Enhanced Rich Text Editor for RichTextBlocks

[jogibear9988]

Improve the rich text editing experience in the Web Component Designer by integrating a more advanced editor while ensuring seamless switching between design and edit modes.

Key Features:

• Unified Rich Text Editing – Detect and group text-only elements into a single rich text block for editing.
• Extended Toolbar & Formatting Options – Expand the current editor toolbar to include:
  • Bold, Italics, Underline, Strikethrough
  • Font selection, size, and color
  • Lists (ordered & unordered)
  • Alignment, indentation, and line height
  • Hyperlinks and media embedding
• Improved ContentEditable Integration:
  • Seamlessly enter and exit rich text editing mode.
  • Ensure smooth transition between editing and standard mode.
• Integration with Undo/Redo Stack – Ensure rich text changes are tracked properly in the existing undo system.
• Support for External Rich Text Libraries:
  • Evaluate StyloJS, CKEditor, and TinyMCE for possible integration.
  • Ensure compatibility with Web Components.
• Performance & Accessibility Considerations:
  • Lightweight integration to avoid unnecessary overhead.
  • Ensure accessibility features (e.g., keyboard navigation, ARIA support).

Technical Considerations:

• Define a strategy for detecting editable elements and grouping them logically.
• Determine whether to extend StyloJS or integrate another editor.
• Ensure proper serialization and deserialization of rich text content.

Frameworks:

Maybe Prosemirror or TipTap could be used?