slate-plugins

Visit slate-plugins.udecode.io for docs, guides, API and more!

Introduction

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 [email protected]

Packages

Core libraries

Name	Version	Description
`@udecode/slate-plugins-common`		Common queries, transforms and utilities.
`@udecode/slate-plugins-core`		Core slate-plugins architecture.

Element Plugins

Name	Version	Description
`@udecode/slate-plugins-basic-elements`		Basic elements.
`@udecode/slate-plugins-alignment`		Text alignment.
`@udecode/slate-plugins-alignment-ui`		Default UI for alignment.
`@udecode/slate-plugins-block-quote`		Block quotes.
`@udecode/slate-plugins-block-quote-ui`		Default UI for block quotes.
`@udecode/slate-plugins-code-block`		Code blocks.
`@udecode/slate-plugins-code-block-ui`		Default UI for code blocks.
`@udecode/slate-plugins-heading`		Headings (from 1 to 6).
`@udecode/slate-plugins-image`		Images and pasting images from clipboard.
`@udecode/slate-plugins-image-ui`		Default UI for images.
`@udecode/slate-plugins-link`		Hyperlinks.
`@udecode/slate-plugins-link-ui`		Default UI for hyperlinks.
`@udecode/slate-plugins-list`		Bulleted, numbered and to-do lists.
`@udecode/slate-plugins-list-ui`		Default UI for lists.
`@udecode/slate-plugins-media-embed`		Embeddable media such as YouTube or Vimeo videos.
`@udecode/slate-plugins-media-embed-ui`		Default UI for embeddable media.
`@udecode/slate-plugins-mention`		Autocompleting @mentions and #tags.
`@udecode/slate-plugins-mention-ui`		Default UI for mentions.
`@udecode/slate-plugins-paragraph`		Paragraphs.
`@udecode/slate-plugins-table`		Tables.
`@udecode/slate-plugins-table-ui`		Default UI for tables.

Mark Plugins

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.

Serializer Plugins

Name	Version	Description
`@udecode/slate-plugins-html-serializer`		HTML (de)serializing.
`@udecode/slate-plugins-md-serializer`		Markdown (de)serializing.

Plugins

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.

Author's Note

@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. Our goal is to build a fully-featured editor.

Become a Sponsor!

Contributors

🌟 Stars and 📥 Pull requests 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.

Thanks goes to these wonderful people (emoji key):

_{Ziad Beyens} 🚧	_{Dylan Schiemann} 🚧	_{Horacio Herrera} 💻 🔌 💡 🐛 🤔	_{Eivind Barstad Waaler} 💻 🔌 💡 🐛	_{Petr Sahula} 💻 🔌 💡	_{Mark Vujevits} 💻	_Alan 💻 🔌 🐛 🤔
_cycle-app 💻	_Paul 💻 🐛	_{Daniel Lunde} 💻 🔌	_{Roman Landenband} 💻 🔌 💡	_Karthikeyan 🔌 💡 🐛