Plate

Visit plate.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/plate 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: <Plate>

• 🐻 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.63.0 and slate-react@0.65.2

Documentation

To find out more see the following Plate documentation sections:

• API documentation
• Quick start
• Guides
• Playground

The documentation is far from being complete and will be constantly evolving (as will the packages).

Contributing and project organization

Ideas and discussions

Discussions is the best place for bringing opinions and contributions. Letting us know if we're going in the right or wrong direction is great feedback and will be much appreciated!

Development

Plate is a modular, multi-package, monorepo project. It consists of a core package that creates the plugin system, based on which the plugin packages are implemented.

See the contributing guide to learn how to contribute your code to the project.

Looking to hire?

We're advertising Plate developers open to job opportunities. We're only asking that the job includes contributing to Plate, even partially.

• @seloner
• @sanj44

DM @zbeyens to be added to the list.

Packages

Core libraries

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

Element Plugins

Name	Version	Description
@udecode/plate-basic-elements		Basic elements plugins.
@udecode/plate-alignment		Text alignment plugin.
@udecode/plate-alignment-ui		Text alignment UI.
@udecode/plate-block-quote		Block quote plugin.
@udecode/plate-block-quote-ui		Block quote UI.
@udecode/plate-code-block		Code block plugin.
@udecode/plate-code-block-ui		Code block UI.
@udecode/plate-excalidraw		Excalidraw plugin.
@udecode/plate-heading		Headings (1-6) plugin.
@udecode/plate-image		Image plugin. Supports pasting images from clipboard.
@udecode/plate-image-ui		Image UI.
@udecode/plate-link		Link plugin.
@udecode/plate-link-ui		Link UI.
@udecode/plate-list		Bulleted, numbered and to-do list plugins.
@udecode/plate-list-ui		List UI.
@udecode/plate-media-embed		Media embed plugin.
@udecode/plate-media-embed-ui		Media embed UI.
@udecode/plate-mention		Mention plugin (autocomplete @mentions, #tags, etc.).
@udecode/plate-mention-ui		Mention UI.
@udecode/plate-paragraph		Paragraph plugin.
@udecode/plate-table		Table plugin.
@udecode/plate-table-ui		Table UI.

Mark Plugins

Name	Version	Description
@udecode/plate-basic-marks		Basic marks plugins: bold, code, italic, strikethrough, subscript, superscript and underline.
@udecode/plate-font		Font color and background color plugins.
@udecode/plate-highlight		Highlight plugin.
@udecode/plate-kbd		Keyboard input plugin.

Serializer Plugins

Name	Version	Description
@udecode/plate-html-serializer		Serializing utilities.
@udecode/plate-html-serializer		HTML serializer plugin.
@udecode/plate-md-serializer		Markdown serializer plugin.
@udecode/plate-ast-serializer		AST serializer plugin.
@udecode/plate-csv-serializer		CSV serializer plugin.

Plugins

Name	Version	Description
@udecode/plate		All-in-one package.
@udecode/plate-autoformat		Autoformatting plugin. Replaces predefined characters with a corresponding format (e.g. foo becomes bold).
@udecode/plate-break		Insert break plugins.
@udecode/plate-dnd		Drag and drop with react-dnd.
@udecode/plate-find-replace		Find and replace plugin.
@udecode/plate-find-replace-ui		Find and replace UI.
@udecode/plate-node-id		Node ID plugin.
@udecode/plate-normalizers		Normalizer plugins.
@udecode/plate-reset-node		Reset node plugin.
@udecode/plate-select		Node selecting plugins.
@udecode/plate-styled-components		Styled components (Plate UI library).
@udecode/plate-trailing-block		Trailing-block plugin.
@udecode/plate-toolbar		Toolbar UI (balloon, heading, buttons, etc.).
@udecode/plate-test-utils		Test utilities.

Looking for slate-plugins?

This repo has been renamed to plate. The name change should not disrupt any current usage, repo clones, pull requests or issue reporting. Links should redirect to the new location. The library formerly known as @udecode/slate-plugins is now available as @udecode/plate.

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 🔌 💡 🐛	Csaba Benkő 🔌

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT