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)¹
• Redo (icon=redo)¹

---

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

---

• Bold (icon=bold)
• Italic (icon=italic)
• Insert Code Block (icon needed)
• Insert Link (icon=connector)²
• 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¹ / Image³ icon=image / Table⁴ icon=table

Floating selection toolbar

(All icons same as top bar)

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

Footnotes

1. Not in initial implementation, no specific plans. ↩ ↩² ↩³ ↩⁴

2. Will be added as part of Hyperlinks in comments should be clickable #9907 or later follow-up for link editing. ↩

3. Will be added as part of Uploading/pasting images in documentation panel. #10059. ↩

4. Will be added as part of Add table display support to documentation editor #9970. ↩

[enso-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]

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]

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.