Inline non-unicode image support (icons and emojis)

[bk-one]

Context of use: Usage of Inline non-unicode icons and emojis
Primary Actor: User
Triggers: User enters special characters colon character followed by a sequence of at least two character

Main Success Scenario:

• 1. The user clicks on the content section to get into editing mode
• 2. The cursor appears at the position where the user clicked
• 3. The user starts typing the characters ":" + "fire" + ":" (written as three strings in the ticket, as GH will render an icon otherwise - 🔥)
• 4. The entered text is replaced with the fire icon (see screenshot, find the icon in Figma)
• 5. The fire icon is displayed in-line at the place where the text was entered. The size of the icon is automatically adjusted to the current font size, so the bottom of the icon is on the baseline and the top is at the cap-height.
• 6. The icon is treated as a single character and can be deleted using backspace with a single keystroke when the cursor is positioned accordingly
• 7. If the font size changes, the icon size is adjusted automatically

Alternative Success Scenario A:

• Step 1. and 2. above applies
• A-1: The user starts typing a non-supported combination like ":nonsense:"
• A-2: The content is unaltered and displayed as is

Notes:

• There are various ways of how an inline image can be handled. Let's start with the most common one, where the image is fully in-line with the line-height and does not break the flow of the paragraph
• I would argue that other inline versions are not required at this point. For the sake of solving the technical aspects on how inline images might affect the rendering of lines of text, we can create a separate ticket, but from my point of view there is no requirement to have that.
• Please see the Figma File for an example where it would break the line-height.
• All drop-down selection and auto-complete functionality for inline icons and emojis (like in GitHub or Slack) will be addressed later.

Image Preview:

[matthew-carroll]

Closing this ticket in favor of this meta ticket: #2439