jsx-slack icon indicating copy to clipboard operation
jsx-slack copied to clipboard

Escaped special chars in Android have incorrect rendering

Open yhatt opened this issue 4 years ago • 1 comments

I've found that escaping special character through the fallback text of date formatting is not work correctly in Slack client for Android.

<Blocks>
  <Section>&gt; *bold* _italic_ ~strikethrough~ `code`</Section>
  <Section>
    <Escape>&gt; *bold* _italic_ ~strikethrough~ `code`</Escape>
  </Section>
</Blocks>
[
  {
    "type": "section",
    "text": {
      "type": "mrkdwn",
      "text": "&gt; *bold* _italic_ ~strikethrough~ `code`",
      "verbatim": true
    }
  },
  {
    "type": "section",
    "text": {
      "type": "mrkdwn",
      "text": "­&gt; <!date^00000000^{_}|*>bold<!date^00000000^{_}|*> <!date^00000000^{_}|_>italic<!date^00000000^{_}|_> <!date^00000000^{_}|~>strikethrough<!date^00000000^{_}|~> <!date^00000000^{_}|`>code<!date^00000000^{_}|`>",
      "verbatim": true
    }
  }
]

PC / Web

スクリーンショット 2020-08-01 3 33 26

iOS

Android

Android does not fallback into escaped character and always renders an invalid date format {_}.

We don't want to escape characters by implicit Unicode injection because a copied message would include magic characters that hard to notice by user. (#124) However, I think there is no other way.

yhatt avatar Jul 31 '20 18:07 yhatt

~~I think Combining Grapheme Joiner (&#847;) is the best for escape.~~ It has a edge case to break expected styling: https://github.com/yhatt/jsx-slack/pull/190#issue-677539181

<Blocks>
  <Section>
    <p>_*test*_</p>
    <p>&#847;_&#847;*test&#847;*&#847;_</p>
    <p>`test`</p>
    <p>&#847;`test&#847;`</p>
    <p>_*test*_</p>
    <p>&#847;_&#847;*test&#847;*&#847;_</p>
    <p>`test`</p>
    <p>&#847;`test&#847;`</p>
  </Section>
</Blocks>

The rendering in Slack Block Kit Builder is here. Most of characters are seems to be escaped correctly excepted full-width asterisk ().

Soft hyphen (&shy;) also can use to escape, but it may render unnecessary hyphen if it was brought hyphenation.

<Blocks>
  <Section> <p>&shy;_&shy;*aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&shy;*&shy;_</p>
  </Section>
</Blocks>

yhatt avatar Jul 31 '20 19:07 yhatt