volto-slate

An alternative text editor for Volto, capable of completely replacing the default richtext editor while offering enhanced functionality and behavior. We believe that, in order to succeed, Volto's richtext 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-slate text block will create multiple Volto blocks: images will be converted to Volto Image blocks, tables will be converted to Volto Table blocks, etc.
• The text block accepts drag&drop images and it will upload them as Volto Image blocks.
• volto-slate has a Table button with the familiar size input, but it create a Table block

While this addon is still in an early alpha stage, we've solved most of the big issues, the API starts to stabilize and we've already started several addons based on it: https://github.com/eea/volto-slate-metadata-mentions/ and https://github.com/eea/volto-slate-zotero

Why

Some of the main reasons that drove us to create volto-slate instead of enhancing Volto's draftjs implementation:

• Volto's draftjs implementation depends on draft-js-plugins, a third-party project that introduces its own set of bugs and maintanance issues

• Slate has a modern, developer-friendly api that makes developing plugins something easy to do. Getting the editor in a plugin is as easy as const editor = useSlate(), overriding core functionality is something that's built in as pluggable, directly in Slate.

• Volto's draft 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-slate implements 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 Draftjs based implementation.

Features

Note: the preview images here are old, volto-slate now has an almost identical look to the default Volto editor.

1. Hovering (floating) toolbar

2. Fixed toolbar

3. Working with links

4. Callouts

5. Split paragraph block in two with Enter key and join them back with Backspace key

6. Splitting a list item with Enter

7. Splitting a list item with Enter on expanded selection

8. Inserting a new list item at the end

9. Two Enter key presses at the end of a list create a new Slate block with an empty paragraph

10. Using Up and Down keys to go through the blocks in both directions

11. Using Tab and Shift-Tab keys to go through the blocks in both directions

12. Changing indent level of list items (including nested lists!) using Tab and Shift-Tab keys

13. Two Enter key presses break a list in two lists

14. Support for markdown bulleted lists with *, - and +

15. Support for markdown numbered lists with 1. - 9.

16. Backspace with cursor on first position inside a list with just one item converts the list to a paragraph

17. Backspace on empty block deletes it and focuses the previous block

18. Using the toolbar we can switch to a type of list or convert the list to a paragraph

19. The content rendered to the end-user

Credit

A lot of inspiration from the great Slate Plugins repository, especially the autoformat handlers.