slate-plugins-next

Slate is a completely customizable framework for building rich text editors. However, your codebase can quickly get complex when implementing tens of features. Built on top of Slate, slate-plugins-next enables you to use a list of configurable and extendable plugins to keep your codebase clean and easy to debug.

This library comes with a lot of plugins for the elements, marks, deserialization, normalization, and so on. We also provide a bunch of helpers on top of Slate's API.

Try out the existing ones and create your own plugins!

📦 Included

✨ 20+ Editor Plugins.
✅ Unit tested with slate@0.58.1.
🏷️ Separation of Concerns.
⚛️ Atomic Design.
📖 Docs and Demos on Storybook.

🚀 Getting Started
🔌 Plugins
🤔 Notice
- Why
- Bundle size
👥 Community
👏 Contributing
- 👨‍💻 Development scripts
✨ Contributors
📝 License

🚀 Getting Started

yarn add slate-plugins-next@0.58.7

⚠️ In production, you should pin the dependency until 1.0.0 is released.

You will also need these peerDependencies:

yarn add slate slate-hyperscript slate-react styled-components react react-dom

For full documentation on using slate-plugins-next visit: slate-plugins-next.netlify.app

For additional help, join us in our Slack

🔌 Plugins

Element Plugins
action item	List of action items
blockquote	Blockquote
code	`Code block`
heading	Heading (from 1 to 6)
image	Image
link	Inline link
list	Bulleted and numbered lists
mention	Inline mention
paragraph	Paragraph
table	Table
video	Video

Mark Plugins
bold	Bold
highlight	Blockquote
inline-code	`Code`
italic	Italic
strikethrough	~~Strikethrough~~
subscript	Subscript
superscript	Superscript
underline	Underline

Deserializer Plugins
deserialize-html	HTML Deserializer
deserialize-md	Markdown Deserializer

Plugins
common	Common helpers for all plugins
components	Common UI components
deserializers	Common helpers for deserializers
element	Common helpers for `Element` plugins
mark	Common helpers for `Mark` plugins
md preview	Markdown preview
md shortcuts	Markdown shortcuts
node	Common helpers and `withPlugins` for `Node` nodes
search highlight	Highlight search text
soft break	Soft break

🤔 Notice

Why

Slate is a powerful editor framework that helps you deal with difficult parts when building an editor, such as events handlers, elements, formatting, commands, rendering, serializing, normalizing, etc.

While you are trying to build your own editors, it still need a lot of efforts to make something similar to Quill or ProseMirror. This repository allows you to build your editor right away with minimal slate knowledge.

Bundle size

For simplicity, a single package slate-plugins-next has been published to share all the plugins. It's not a problem as it is tree-shakeable. However, a few plugins use external dependencies. These should be moved into their own package in the future.