Add formatting toolbars to documentation editor

[kazcw]

Add two toolbars to the Lexical-based markdown editor:

• A top toolbar containing actions and states that are relevant without a selection, such as Insert table.
• A pop-up toolbar that shows when there is a selection, and includes only options for formatting the selected text, such as Italic.

The Lexical playground's toolbar and LexicalMenu in lexical-react can be used as the primary references; there is also a Vue port in lexical-vue, but it is out of date.

Design

Similar to the Lexical playground, but without any formatting options that are unrepresentable in markdown, and in the Enso visual style (fully-rounded elements, 16x16 icons, DropdownWidget, collection of side by side bars instead of single divided bar).

Top bar

• Undo (icon=undo)[^1]

• Redo (icon=redo)[^1]

• Dropdown (icons needed for each entry): Normal (text icon?) / Heading (how many levels?) / Bulleted List / Numbered List / Checklist[^1] / Block Quote / Code Block

• Bold (icon=bold)
• Italic (icon=italic)
• Insert Code Block (icon needed)
• Insert Link (icon=connector)[^4]

• Dropdown (icon needed for dropdown and each entry): Strikethrough (icon=strike-through) / Subscript / Superscript / Clear Formatting (icon=remove-textstyle)

• "Insert" dropdown (dropdown icon=add?, icons needed for entries): Horizontal Rule[^1] / Image[^2] icon=image / Table[^3] icon=table

[^1]: Not in initial implementation, no specific plans. [^2]: Will be added as part of #10059. [^3]: Will be added as part of #9970. [^4]: Will be added as part of #9907 or later follow-up for link editing.

Floating selection toolbar

(All icons same as top bar)

• Bold
• Italic
• Subscript
• Superscript
• Code
• Link

[enso-bot[bot]]

Keziah Wesley reports a new STANDUP for today (2024-05-21):

Progress: Implemented selection formatting toolbar. Implemented copy button (#9878). Debugged suggestion db issue (#9831). It should be finished by 2024-05-24.

Next Day: Next day I will be working on the #9969 task. Format toolbar icons; top formatting bar.

[enso-bot[bot]]

Keziah Wesley reports a new STANDUP for yesterday (2024-05-22):

Progress: Implementing top bar UI components. It should be finished by 2024-05-24.

Next Day: Next day I will be working on the #9969 task. Formatting logic.

[enso-bot[bot]]

Keziah Wesley reports a new STANDUP for today (2024-05-23):

Progress: Implemented top bar formatting logic. It should be finished by 2024-05-24.

Next Day: Next day I will be working on the #9969 task. Pick a 1-point issue.