Slice 2: Add toolbar actions to Rich Text Editor Widget

[mnholtz]

Implementation sketch

See https://www.notion.so/pixiebrix/Phase-1-Implement-Rich-Text-Editor-f74aea6b845847c0ad25f81d8236da3c?pvs=4#12843b21a2538038803fe014f1a22857

Acceptance Criteria

Rendered Rich-Text Field

• Given a modal or sidebar form with a “Rich Text Editor” field
• When the form is rendered in the Form Preview, Sidebar, or Modal
• Then the “Rich Text Editor” field should render a WYSIWYG editor with a toolbar-style interface containing the following controls as buttons:
  • Bold, Italic, Underline, Strikethrough
  • Numbered & bulleted list
  • Headings 1-6, and paragraph text formatting (as a dropdown)
  • Link formatting
  • Horizontal rule
  • Blockquote
  • Image insertion capabilities (not to be confused with Image Upload)
    • Nice-to-have:
      • Dragging & dropping to rearrange
      • Image handles to resize
  • Nice-to-have:
    • Text color
    • Tables
    • Text alignment/element alignment
    • Code blocks/code samples

Horizontally-constrained Rich-Text Field

• Given a form with a “Rich Text Editor” field
• When that form is rendered in either the Form Preview, Modal, or Sidebar
• And the horizontal space is compressed as much as possible
• Then all toolbar actions and editing capabilities should still be accessible in some way

Vertically-constrained Rich-Text Field

• Given a form with a “Rich Text Editor” field
• When that form is rendered in either the Form Preview, Modal, or Sidebar
• Then the editor field contains a handle in the bottom-right that allows the field to expand vertically to reveal more form content