[super_editor_markdown] - Parse and apply inline Markdown styles in an EditorReaction (Resolves #1866)

[matthew-carroll]

Parse and apply inline Markdown styles in an EditorReaction.

Applying inline Markdown means recognizing inline Markdown syntax, removing the syntax, and adding appropriate attributions where the syntax was. Example: "Hello *italics*" with "Hello italics".

Inline Markdown could appear as a result of multiple causes, e.g., the user typing a character, the user pasting text, or a programmer edit operation. Therefore, it's not always clear what we should consider when attempting to apply inline Markdown parsing.

This PR inspects all text content in every TextNode that's edited during a given transaction. All inline Markdown that's found in an edited node is applied.

Ambiguous Changes

Markdown syntax for bold and italics makes it ambiguous to identify the user's intention when the user enters only one character at a time.

Imagine that the user wants to achieve '"Hello bold"'. Consider the following steps to type that:

Hello **bold
Hello **bold*
Hello **bold**

If the inline Markdown is blindly applied to the text, the user would end up with the following results:

Hello **bold

Hello *bold

Hello bold

The user would end up with italic text, not bold text, because each "*" was applied on its own. The user never got a chance to enter two "**" back to back.

To solve this problem, the inline Markdown reaction first converts the existing TextNodes AttributedText to a Markdown string. Then, that Markdown string is parsed back to AttributedText. That process looks like the following:

Start with: Hello **bold

User types "*", creating text: Hello **bold*

The reaction serializes the AttributedText and gets: Hello **bold* (no change)

The reaction deserializes the Markdown and gets: "Hello *bold" (with italics)

User types "*", creating text: Hello *bold* (with italics)

The reaction serializes the AttributedText and gets: Hello **bold** (notice that we've recovered the extra "*"s)

The reaction deserializes the Markdown and gets: "Hello bold" (with bold)

By going from AttributedText -> Markdown -> AttributedText, we successfully honor ambiguous Markdown syntax.

Surgical changes

The easiest way to apply a Markdown change is to throw away the previous paragraph and replace it with the newly parsed and styled paragraph. However, when considering undo/redo systems, which remember all deleted text, repeatedly deleting and recreating entire paragraphs quickly becomes costly.

This PR brings in a text diff'ing package so that text and styles are only inserted/deleted where necessary. This adds complexity to the reaction, but reduces the memory footprint for the history ledger.

Selection adjustments

The selection base/extent might sit within the TextNode where inline Markdown is applied. Therefore, the reaction in this PR adjusts the selection bounds based on the amount of content that's either inserted or deleted.

[matthew-carroll]

CC @dhikshith12

[dhikshithrm]

Curious to know how ***Bold And Italic*** is handled while typing the closing *** stars.

In Notion, It will start with bold and then become *BOLD and as soon as another star is added at the end it then becomes bold and italic.

[dhikshithrm]

Screen.Recording.2024-03-18.at.15.46.37.mov

[matthew-carroll]

@miguelcmedeiros I fixed the situation you identified over in the issue ticket where starting a block of text with Markdown syntax causes that syntax to disappear.

[matthew-carroll]

For reference, I filed this issue in the markdown package: dart-lang/markdown#599

[miguelcmedeiros]

LGTM

[matthew-carroll]

@angelosilvestre do you wanna take a look at this before merging?

[angelosilvestre]

@matthew-carroll Yeah, I'll take a look in a few minutes

[angelosilvestre]

I left some comments.