Open
Description
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?