Design WYSIWYG Rich Text Editor – Frontend System Design
In this exploration, we are tasked with designing a WYSIWYG (What You See Is What You Get) text editor, a fundamental tool allowing users to edit and create content in a format that closely mirrors its appearance when published. This editor will provide both basic and advanced editing capabilities, catering to a wide range of user needs. MDN’s contenteditable reference is the starting point for most rich text editor implementations.
Clarifying Questions
Before diving into the design, it’s essential to clarify several aspects to ensure the editor meets user expectations and technical feasibility. The following questions will guide our design process:
- Supported Content Types: What range of content types (text, images, videos, GIFs, tables, etc.) should the editor support?
- Media Handling: How will the editor manage media uploads, including size limitations and storage?
- Collaborative Editing: Is collaborative editing required, and how will simultaneous changes be managed?
- Customizability: To what extent should the editor allow custom styles or plugins?
- Export Options: In which formats can users export their content?
- Mentions... premium content.
