MrkdwnCompiler re-encodes URL

[mrcljx]

The following URL has a query parameter named x with the value y:z (which must be encoded).

https://google.com/a?x=y%3Az

Using this in

 <a href="https://google.com/a?x=y%3Az">show</a>

is encoded as

<https://google.com/a?x=y%253Az|show>

which is a different link.

[yhatt]

It's a tricky topic. Our position: jsx-slack assumes URL for hyperlink as "not encoded URI string", and finally returns the mrkdwn with encoded URL by using encodeURI(), becuase we cannot determine %3A is meaning which of a colon : or an exact string %3A.

[mrcljx]

@yhatt Thanks first of all for this library.

I would have expected <a href=""> here behaves like in the browser (where the URL is not re-encoded). Note that the URL is not encoded itself, but the parameter has been encoded to construct a correct URL.

The example above has been constructed via the standardized URL:

const url = new URL("https://google.com/a");
url.searchParams.append("x", "y:z");
const href = url.toString();

[yhatt]

After some thought, I have begun to think keeping URL string is better than implicit encoding. If so, we have to bump a major version to v6 because of a potentially breaking change.

@mrcljx The following cases are my updated ideas for escaping URLs in <a href="...">. I feel the most cases are matching to your thoughts, but there are edge cases about implicit URI escaping | to %7C caused by Slack mrkdwn syntax. Feel free to tell us what you think :)

Cases

• <a href="https://example.com/test">link</a> ➡️ <https://example.com/test|link>
  • This is a basic link example.

• <a href="https://example.com/a?b=c:d">link</a> ➡️ <https://example.com/a?b=c:d|link>
• <a href="https://example.com/a?b=c%3Ad">link</a> ➡️ <https://example.com/a?b=c%3Ad|link>
  • %3A will output in mrkdwn as it is.
  • Probably whether treat ?b=c:d and ?b=c%3Ad as different query is depending on Web server so should not normalize in jsx-slack.

• <a href={encodeURI("https://example.com/a?b=c%3Ad")}>link</a> ➡️ <https://example.com/a?b=c%253Ad|link>
  • Require to encode manually if developers want to include a string "%3A" to URI explicitly.
  • For jsx-slack v5 users, wrapping href attribute in every <a> tags by encodeURI() should get the same output as before.

• <a href={"https://example.com/a?char=&"}>link</a> ➡️ <https://example.com/a?char=&amp;|link>
• <a href={"https://example.com/a?char=<"}>link</a> ➡️ <https://example.com/a?char=&lt;|link>
• <a href={"https://example.com/a?char=>"}>link</a> ➡️ <https://example.com/a?char=&gt;|link>
  • These 3 characters MUST escape in Slack mrkdwn, without exceptions.
  • https://api.slack.com/reference/surfaces/formatting#escaping

• <a href="https://example.com/a?char=%7C">link</a> ➡️ <https://example.com/a?char=%7C|link>
• <a href="https://example.com/a?char=|">link</a> ➡️ <https://example.com/a?char=%7C|link> ⚠️
  • A vertical bar | may become an only exception of normalization with URL escaping. Slack mrkdwn uses | as a separator of the link syntax and does not provide a way to escape, excepted URL encoding.
  • When using a vertical bar | in raw URL, developers should rely to Web server that treats %7C as same as |.

[mrcljx]

This sounds great, including the implicit | encoding.

[yhatt]

Thanks to @nholden's contribution, this change has shipped as a major update v6.0.0. 🚀

[nholden]

Awesome! Thanks very much, @yhatt. ❤️