slate-plugins

We are working hard on v1 docs. Storybook docs are still for v0.75.

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 slate@0.60.11

Table of contents

• Installation
• Usage
• Packages
  • Core libraries
  • Element Plugins
  • Mark Plugins
  • Serializer Plugins
  • Plugins
• Contributing
  • Development scripts
  • Contributors
• License

Installation

You can install all the packages simultaneously:

yarn add @udecode/slate-plugins

You will also need these peer dependencies (slate >= 0.60):

yarn add slate slate-hyperscript slate-react react react-dom

Alternatively 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-fluent

Usage

Most 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.

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.

Contributing

🌟 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.

Development scripts

Useful scripts include:

yarn

Installs package dependencies

yarn build

Build the local packages.

yarn storybook

Starts storybook (after yarn build).

yarn storybook:w

Starts storybook dev and watch package files (after yarn build).

yarn lint

boolean check if code conforms to linting eslint rules

yarn test

Test with Jest

yarn release

Lint, test, build and push a release to git and npm will ask for version in interactive mode - using lerna.

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. At the end, a fully-featured editor will be shared here. DRY.

Contributors

Ziad Beyens 💻 🚧 🔌 ⚠️ 📖	Horacio Herrera 💻 🔌 💡 🐛 🤔	Eivind Barstad Waaler 💻 🔌 💡 🐛	Petr Sahula 💻 🔌 💡	Mark Vujevits 💻	Alan 💻 🔌 🐛 ⚠️ 🤔	cycle-app 💻
Paul 💻 🐛	Daniel Lunde 💻 🔌 ⚠️	Roman Landenband 💻 🔌 ⚠️ 💡	Dylan Schiemann 💻 🔌 💡 🐛 🤔

License

MIT