Frontend Editor

Problem

We need to choose a frontend editor that will allow our users to document anything they need for their work with the PermaplanT app. The React MD Editor is already in use for various notes, including plants and seeds, and we need to decide if we should continue using it or make the switch.

Constraints

  • The editor must be compatible with our UI framework.
  • The editor must support Markdown formatting and being able to store the content as Markdown.
  • The editor must support both small and large editor sizes, including fullscreen, and the possibility to switch size on demand.
  • The editor must support clickable links, checklists, and images.
  • The editor must not be prone to XSS attacks.
  • The editor must provide customizable icons and being able to only show a subset of icons for small editor windows.
  • The editor should support users with varying degrees of technical knowledge.

Considered Alternatives

  • React MD Editor
    • Explicitly compatible with React.
    • Specifically a Markdown Editor. Display of rendered output in split or full view possible.
    • Offers fullscreen toggle out of the box.
    • No XSS protections are in place but offers support to do so through rehype-sanitize. Unlikely that any new issues are fixed by the editor itself.
    • Does come with visual assets, therefore requiring less effort to implement but offering less flexibility.
    • No clear concept regarding customizability. Some examples but no pre-packaged components.
    • API seems a bit disorganized and messy. Might not accommodate more complex use cases.
    • Very limited documentation.
    • Supported by a relatively small community.
    • Actively developed.
  • Lexical
    • Explicitly compatible with React.
    • Allows switching between Markdown and WYSIWYG Editors.
    • Some community plugins offer fullscreen toggle.
    • Some XSS protections are in place and new issues are patched fairly quickly.
    • Does come with visual assets, therefore requiring less effort to implement but offering less flexibility. It is unclear if this means the icons and their arrangement cannot be changed.
    • Plugin-based approach allows for easy customizability. Limited library of pre-packaged plugins. Community/Custom plugins.
    • Simple API that should provide a good development experience. Might not accommodate more complex use cases.
    • Supports mobile use cases.
    • Extensive documentation.
    • Supported by a large community.
    • Actively developed.
  • Tiptap Editor
    • Explicitly compatible with React.
    • Allows switching between Markdown and WYSIWYG Editors.
    • Some community plugins offer fullscreen toggle.
    • Some XSS protections are in place and new issues are patched fairly quickly.
    • Does not come with any visual assets, therefore requiring more effort to implement but offering greater flexibility.
    • Extension-based approach allows for easy customizability. Big library of pre-packaged extensions. Community/Custom extensions.
    • Simple API that should provide a good development experience. Might not accommodate more complex use cases.
    • Offers no support for mobile use cases out of the box but allows the flexibility to implement them.
    • Extensive documentation.
    • Supported by a large community.
    • Actively developed.
    • Some features, like collaborative editing, are locked behind cloud or self-hosted solutions. Various payment plans.
  • CKEditor 5
    • Explicitly compatible with React.
    • Mostly a WYSIWYG Editor but allows the use of Markdown input as well as Markdown source editing.
    • Offers fullscreen toggle out of the box.
    • Some XSS protections are in place and new issues are patched fairly quickly.
    • Does come with visual assets, therefore requiring less effort to implement but offering less flexibility. The icons can be changed, but they need to be individually packaged.
    • Plugin-based approach allows for easy customizability. All information regarding pre-packaged, community and custom plugins can be found here.
    • Complex API makes it highly flexible but not always easy to work with.
    • Supports mobile use cases.
    • Extensive documentation.
    • Actively developed.
    • Widely used.
    • Some features, like collaborative editing, are locked behind cloud or self-hosted solutions. Various payment plans.
  • TinyMCE
    • Mostly a WYSIWYG Editor but allows the use of Markdown input. However, this is locked behind a subscription.
  • MDX-Editor
    • Based on Lexical so has mostly the same advantages and disadvantages but offers additional Markdown Support.
    • Significantly smaller community compared to Lexical.
  • Gitlab Content Editor
    • Missing React Support.

Decision

Rationale