volto-slate is an interactive default text editor for Volto, developed on top of Slate.
It offers enhanced WYSIWYG functionality and behavior.
See a brief elevator pitch for
We believe that Volto's rich text form editor (the Volto Composite Page editor) needs strong integration between the rich text capabilities and the rest of the Volto blocks. Some examples of the kind of strong integration we have in mind:
Pasting complex documents inside a
volto-slatetext block will create multiple Volto blocks. Images will be converted to Volto image blocks, tables will be converted to Volto table blocks, and so on.
The text block accepts drag-and-drop images, and it will upload them as Volto image blocks.
volto-slatehas a Table button with the familiar size input, but it creates a table block.
Although this add-on is in an early alpha stage, we have solved most of the big issues.
The API has stabilized, and we have already started several add-ons based on it, including
Why another WYSIWYG editor?#
Some of the main reasons that drove us to create
volto-slate, instead of enhancing Volto's Draft.js implementation, include the following:
Volto's Draft.js implementation depends on
draft-js-plugins, a third-party project that introduces its own set of bugs and maintenance issues.
Slate has a modern, developer-friendly API that makes developing plugins easier. Getting the editor in a plugin is as easy as
const editor = useSlate(). We can override core functionality, something that is built in as pluggable, directly in Slate.
Volto's Draft.js-based implementation depends on Redraft for its final output, which comes with its own bugs and issues. While it is nice to have view-mode components, this is something that
volto-slateimplements just as well.
Because Slate's internal storage uses a tree modeled on the DOM pattern, its final rendered output is very clean. Note: the Slate editor value is a JSON object, similar to the Draft.js-based implementation.
- Editor Configuration
- How to write a Slate editor plugin