jsx-slack
jsx-slack copied to clipboard
Escaped special chars in Android have incorrect rendering
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>> *bold* _italic_ ~strikethrough~ `code`</Section>
<Section>
<Escape>> *bold* _italic_ ~strikethrough~ `code`</Escape>
</Section>
</Blocks>
[
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "> *bold* _italic_ ~strikethrough~ `code`",
"verbatim": true
}
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "> <!date^00000000^{_}|*>bold<!date^00000000^{_}|*> <!date^00000000^{_}|_>italic<!date^00000000^{_}|_> <!date^00000000^{_}|~>strikethrough<!date^00000000^{_}|~> <!date^00000000^{_}|`>code<!date^00000000^{_}|`>",
"verbatim": true
}
}
]
PC / Web
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.
~~I think Combining Grapheme Joiner (͏
) 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>͏_͏*test͏*͏_</p>
<p>`test`</p>
<p>͏`test͏`</p>
<p>_*test*_</p>
<p>͏_͏*test͏*͏_</p>
<p>`test`</p>
<p>͏`test͏`</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 (­
) also can use to escape, but it may render unnecessary hyphen if it was brought hyphenation.
<Blocks>
<Section> <p>­_­*aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa­*­_</p>
</Section>
</Blocks>