about-escape-and-exact-mode.md

Top » About escape and exact mode

About escape and exact mode

jsx-slack are making effort to be focusable only to contents of your message. Nevertheless, we may require you to consider escaping contents.

Special characters

We think that anyone never wants to care about special characters for Slack mrkdwn while using jsx-slack with HTML-like formatting. But unfortunately, Slack does not provide how to escape special characters for formatting text. 🤔

The content may break when JSX contents may have mrkdwn special characters like *, _, ~, `, and >.

<Escape>: Escape special characters

To battle against breaking message, we provide <Escape> component to keep special characters as plain text as possible (or replace into another similar character on the part of some restricted).

<Blocks>
  <Section>&gt; *bold* _italic_ ~strikethrough~ `code`</Section>
  <Section>
    <Escape>&gt; *bold* _italic_ ~strikethrough~ `code`</Escape>
  </Section>
</Blocks>

By using <Escape>, please notice that it might change characters on the contents by replacement and insertion. jsx-slack leaves mrkdwn by default to avoid unintended content breaking.

We recommend using <Escape> only to unpredictable contents like made by users.

Details

Our basic strategy for escaping special character is using the fallback text of date formatting. Slack client always renders fallback as plain text, without text formatting, by setting invalid date format.

<!date^00000000^{_}|*>

We will escape special characters with date formatting as possible, but there are some exceptions:

• Leading > (>)
• The content of hyperlink (<a>)

Please notice contents may break if you are considering escape in them!

More details about exceptions...

Leading quotes

In Slack, both of > (>) and ＞ (U+FF1E) would recognize as blockquote only when it has coming to the beginning of line.

U+FF1E can escape through date formatting but > cannot; the fallback text won't parse HTML entity used to avoid confliction with date format syntax. So we will add normally invisible soft hyphen (U+00AD) to the beginning if > was found.

Replacements in hyperlink

Due to the same reason, the content of hyperlink (<a> tag) cannot escape through date format. So we will replace all special characters to another Unicode character whose similar shape.

• * ➡️ ∗ (Asterisk operator: U+2217)
• ＊ ➡️ ﹡ (Small asterisk: U+FF0A)
• _ ➡️ ˍ (Modifier letter low macron: U+02CD)
• ＿ ➡️ ⸏ (Paragraphos: U+2E0F)
• ` ➡️ ˋ (Modifier letter grave accent: U+02CB)
• ｀ ➡️ ˋ (Modifier letter grave accent: U+02CB)
• ~ ➡️ ∼ (Tilde operator: U+223C)
• > ➡️ U+00AD + >
• ＞ ➡️ U+00AD + ＞

These replacements also will trigger by using corresponded HTML tag. (e.g. * and ＊ in the contents of <b> tag)

ℹ️ Special characters in valid emoji shorthand won't be escaped. For example, we will leave underscore(s) of the shorthand such as :white_check_mark:, :marca_de_verificación_blanca: and :チェックマーク_緑:.

Exact mode

Some special characters will work only in breaks of words. Take a look this example:

<Blocks>
  <Section>
    Super<i>cali</i>fragilistic<b>expiali</b>docious
  </Section>
</Blocks>

We expect showing the post as follow:

Supercalifragilisticexpialidocious

However, Slack renders as:

Super_cali_fragilistic*expiali*docious

You can deal workaround via JSXSlack.exactMode(true). It can enable formatting forcibly by inserting zero-width space around special chars.

Exact mode is a last resort. We recommend dealing with incorrect rendering by such as inserting spaces around markup elements.

---

Top » About escape and exact mode