Select a rich text editor

[briri]

We need to review, select and then build a component to support a rich text editor.

The editor should support all of the current functionality offered within the DMPTool:

• make text bold
• make text italic
• change font color
• change font size: 8pt to 24pt (step by 2pt ... 10pt, 12pt, 14pt, etc.)
• change alignment: left, center, right
• lists: bullet or numerical
• tables
• hyperlinks

One of the major new features we want to add is inline commenting. Similar to the functionality in Google docs

Some options might be Draft, Quill or Trix ... there may be others. See this Quill article where it compares itself to others in the space.

[andrewebdev]

Draftail

While draft.js is a good text editor, it’s fairly low level. It mostly provides low-level apis for creating a good text editor.

Draftail is an opinionated editor built on top of the draft editor. Draftail provide many improvements over using draft.js by itself.

A couple of features that Draftail provide above draft.js.

• A toolbar button, with an active state, an icon or label, and tooltip including description and keyboard shortcut
• A keyboard shortcut, for formats that have built-in support
• A Markdown shortcut, for formats that have a Markdown representation
• Default styles for formatted text
• Support to copy-paste custom formats between editors
• Filtering out of inactive formats on paste

The most important benefit is that draftail provide additional API’s for things like creating plugins, and managing controls on the editor toolbar.

Potential Issues

• Collaborative editing was never thought of when draft.js was created. If this is ever a feature considered, then it would be a costly addition to the editor (is not impossible).

  That said I don’t think this particular point is a concern for our use-case?

Definite Issues

• The draft.js content schema doesn’t play well with deeply nested structures, making it hard to work with tables, embeds and other components that require more complex structure.

References

• https://www.draftail.org/docs/draftjs-vs-draftail

Trix

Trix is a well established editor that uses modern browser features. a great benefit of Trix is that it uses current web standards (like web components), which means it “behaves” like any other standard HTML tag, with few surprises.

Some Benefits

• File attachments via drag-and-drop
• Web standards based. Does not depend on React, which means you don’t have to upgrade your editor when React inevitably upgrade their API’s.
• Editor events are standard javascript DOM events.

Potential Issues

• We will need to wrap the trix editor into a custom react component and React won’t know about Trix events. We would need to write even listeners for important events and pass them on to the react component.

  Luckily this is a trivial task, but still needs consideration.

Definite Issues

• Tables are not currently supported in Trix. There are ways to implement tables ourselve, but this would be a costly addition.

References

• https://trix-editor.org/
• Using Trix in React

Slate

I briefly reviewed Slate as an option. Although it looks promising, the project is still in Beta and the underlying API’s are subject to change.

For this reason I don’t think Slate is a viable option for DMPTool.

Remirror

ReMirror is based on Prosemirror. It wraps ProseMirror inside react components, but also provides a wide range of extra features and plugins.

ProseMirror Benefits

• Support for domain specific content in the text content. This means it’s easy for us to add elements to represent a reference, author, or anything else related to the project inside the text content.

• Supports markdown schema so if any content in the backend is in this format, we don’t have to do any extra conversion/parsing.

• Prosemirror allows us to fully customize the Schema. This doesn’t immediately benefit DMPTool, but the positive from this is that the option is there, and we are not constrained to a single opinionated schema.

ReMirror Specific Benefits

• Unlike some of the other editors reviewed, tables are supported by ReMirror directly. The UI for editing tables in this is also appealing to use.

References

• https://prosemirror.net/
• https://prosemirror.net/examples/
• https://remirror.io/

Quill

Benefits

• Uses plain javascript, no dependencies on React. This means it’s portable and easy to userstand since it’s just javascript and DOM. This is also a potential issue (see below).

• Customizable and Extensible.

Potential Issues

• Since this editor uses plain javascript, we would need to write our own react component wrapper for it, and pass/handle any quill events over to react. This will require extra development cost.

• Tables are not well supported. It seems like the latest version of Quill have table support, but there is no documentation on this. Will test this when I do the prototype testing.

References

• https://quilljs.com/

[andrewebdev]

I've narrowd down the potential editors to ReMirror or Quill. My next steps will be to test the 2 editors on the current styleguide to get a better idea of the functionality, developer experience, UX and potential accessibility issues.

[briri]

Thanks for the thorough analysis @andrewebdev. Can you elaborate on the "Support for domain specific content" that ReMirror has? Does that mean for example that it provides a way for the user to quickly reference or type the name of another contributor on the project, or perhaps a research output that they defined at the project level?

[andrewebdev]

Thanks for the thorough analysis @andrewebdev. Can you elaborate on the "Support for domain specific content" that ReMirror has? Does that mean for example that it provides a way for the user to quickly reference or type the name of another contributor on the project, or perhaps a research output that they defined at the project level?

Kind of, yes. It allows us to create custom "entities" that relates to something in DMPTool, like a reference to a contributor etc. From a cursory look at the code for that, it seemed quite simple to add, and also provide an easy way to add a custom look/rendering for this component inside the text editor itself. This is nice since it will show user where such elements are.

Here is an example: https://prosemirror.net/examples/dino/

That example is for Prosemirror, but Remirror uses it under the hood, so those same API's should be valid.

[briri]

That is very cool. I like the dinosaurs 😆 but I think having the ability to provide users with shortcuts to reference info they've already defined in their project might be very useful

[andrewebdev]

This is also related to the custom schema and domain specific elements: https://prosemirror.net/examples/schema/

[jupiter007]

Thanks @andrewebdev.

Hopefully ReMirror or Quill has the capability to add inline commenting. My understanding is that all the above functionality that Brian listed in the ticket's description is currently free from TinyMCE and working for us. I believe the main reason we started looking for a different editor was to add inline commenting because TinyMCE charges a fortune to use that plugin.

[andrewebdev]

Thanks @andrewebdev.

Hopefully ReMirror or Quill has the capability to add inline commenting. My understanding is that all the above functionality that Brian listed in the ticket's description is currently free from TinyMCE and working for us. I believe the main reason we started looking for a different editor was to add inline commenting because TinyMCE charges a fortune to use that plugin.

I'll be sure to test this. I suspect it neither have that as a feature out-of-the-box, but both Quill and ReMirror are easy enough to extend, and if we cannot find an existing plugin, I'd be happy to create one ;)

[briri]

Andre will push a side-by-side comparison of ReMirror and TinyMCE so that we can evaluate them. The commenting plugin has only been developed for ReMirror. Adding comments to TinyMCE would be more time-consuming.