We are working hard on v1 docs. Storybook docs are still for v0.75.
Slate is a low-level 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 needs a lot of skills to make something similar to Quill or ProseMirror. This repository allows you to build your editor right away with minimal slate knowledge.
@udecode/slate-plugins is built on top of slate to handle plugins and
state management for an optimal development experience. This repository
comes with a lot of plugins as elements, marks, serializers,
normalizers, queries, transforms, components and so on.
- 🏎 Simple Start
You only need one component to get started:
<SlatePlugins>
- 🐻 State Management
zustand store is internally used to support multiple editor states.
- 💅 Design System
The API is design system friendly. We provide a default design system for quick start but you can plug-in your own one using a single function.
- 🔌 40+ Packages
We enforce separation of concerns by packaging each feature for build optimization and versioning.
- 🛠 Extensible
All plugins accept extensible options and if you need to fork a plugin, all its functions are exported.
- 📦 Tree-shaking / ES modules
- ✅ TypeScript types
- ✅ Unit tested with
slate@0.60.11
You can install all the packages simultaneously:
yarn add @udecode/slate-pluginsYou will also need these peer dependencies (slate >= 0.60):
yarn add slate slate-hyperscript slate-react react react-domAlternatively you can install only the packages you need:
yarn add @udecode/slate-plugins-alignment
yarn add @udecode/slate-plugins-alignment-ui
yarn add @udecode/slate-plugins-autoformat
yarn add @udecode/slate-plugins-basic-elements
yarn add @udecode/slate-plugins-basic-marks
yarn add @udecode/slate-plugins-block-quote
yarn add @udecode/slate-plugins-block-quote-ui
yarn add @udecode/slate-plugins-break
yarn add @udecode/slate-plugins-code-block
yarn add @udecode/slate-plugins-code-block-ui
yarn add @udecode/slate-plugins-common
yarn add @udecode/slate-plugins-core
yarn add @udecode/slate-plugins-dnd
yarn add @udecode/slate-plugins-find-replace
yarn add @udecode/slate-plugins-find-replace-ui
yarn add @udecode/slate-plugins-heading
yarn add @udecode/slate-plugins-highlight
yarn add @udecode/slate-plugins-html-serializer
yarn add @udecode/slate-plugins-image
yarn add @udecode/slate-plugins-image-ui
yarn add @udecode/slate-plugins-kbd
yarn add @udecode/slate-plugins-link
yarn add @udecode/slate-plugins-link-ui
yarn add @udecode/slate-plugins-list
yarn add @udecode/slate-plugins-list-ui
yarn add @udecode/slate-plugins-md-serializer
yarn add @udecode/slate-plugins-media-embed
yarn add @udecode/slate-plugins-media-embed-ui
yarn add @udecode/slate-plugins-mention
yarn add @udecode/slate-plugins-mention-ui
yarn add @udecode/slate-plugins-node-id
yarn add @udecode/slate-plugins-normalizers
yarn add @udecode/slate-plugins-paragraph
yarn add @udecode/slate-plugins-reset-node
yarn add @udecode/slate-plugins-select
yarn add @udecode/slate-plugins-table
yarn add @udecode/slate-plugins-table-ui
yarn add @udecode/slate-plugins-toolbar
yarn add @udecode/slate-plugins-trailing-block
yarn add @udecode/slate-plugins-ui-fluentMost plugins are used in this storybook playground.
For guidance on using @udecode/slate-plugins visit (v1 docs WIP):
slate-plugins-next.netlify.app
and checkout our API
documentation.
For additional help, join us in Slate Slack.
| Name | Version | Description |
|---|---|---|
@udecode/slate-plugins-common |
 |
Common queries, transforms and utilities. |
@udecode/slate-plugins-core |
 |
Core slate-plugins architecture. |
| Name | Version | Description |
|---|---|---|
@udecode/slate-plugins-basic-marks |
 |
Basic text formatting: bold, code, italic, strikethrough, subscript, superscript and underline. |
@udecode/slate-plugins-highlight |
 |
Highlights. |
@udecode/slate-plugins-kbd |
 |
Keyboard input formatting. |
| Name | Version | Description |
|---|---|---|
@udecode/slate-plugins-html-serializer |
 |
HTML (de)serializing. |
@udecode/slate-plugins-md-serializer |
 |
Markdown (de)serializing. |
| Name | Version | Description |
|---|---|---|
@udecode/slate-plugins-slate-plugins |
 |
Provides all packages. |
@udecode/slate-plugins-autoformat |
 |
Autoformatting actions. |
@udecode/slate-plugins-break |
 |
Soft-break and exit-break. |
@udecode/slate-plugins-dnd |
 |
Drag and drop with react-dnd. |
@udecode/slate-plugins-find-replace |
 |
Highlighting searching text. |
@udecode/slate-plugins-find-replace-ui |
 |
Default UI for find-replace. |
@udecode/slate-plugins-node-id |
 |
Insert nodes with an id key. |
@udecode/slate-plugins-normalizers |
 |
Editor normalizers. |
@udecode/slate-plugins-reset-node |
 |
Reset node type. |
@udecode/slate-plugins-select |
 |
Selection utilities. |
@udecode/slate-plugins-trailing-block |
 |
Ensures a trailing block. |
@udecode/slate-plugins-toolbar |
 |
Toolbar components: balloon, heading, buttons. |
@udecode/slate-plugins-ui-fluent |
 |
Common UI utilities with fluentui. |
@udecode/slate-plugins-test-utils |
 |
Test utilities. |
🌟 Stars and 📥 Pull requests to @udecode/slate-plugins are welcome!
Don't hesitate to share your plugins here. Read our
contributing guide to get started, or find us on
Slack, we will
take the time to guide you.
Useful scripts include:
Installs package dependencies
Build the local packages.
Starts storybook (after
yarn build).
Starts storybook dev and watch package files (after
yarn build).
boolean check if code conforms to linting eslint rules
Test with Jest
Lint, test, build and push a release to git and npm will ask for version in interactive mode - using lerna.
@zbeyens: I'm building an app with an editor like many of you and my first initiative was to spend months to share this work, while hundreds of developers were coding and debugging the exact same features. Open-source is a long-term investment for a bug-free product and reducing technical debt, so I can only encourage you to join this collaboration. At the end, a fully-featured editor will be shared here. DRY.
