/slate-plugins

🔌 Next-gen slate plugins

Primary LanguageTypeScriptOtherNOASSERTION

slate-plugins

GitHub release (latest by date) CodeFactor Snyk Vulnerabilities for GitHub Repo codecov    

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 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: API documentation.

Try out our plugins and create yours in a few minutes!

📦 Included

  • ✨ 30+ Editor Plugins.
  • 💅 Styling.
  • 🏷️ Separation of Concerns.
  • ⚛️ Atomic Design.
  • ✅ Unit tested with slate@0.59.0.
  • 📓 Docs and Demos on Storybook.
  • 📖 API generated with TypeDoc.

Table of contents

🚀 Getting Started

yarn add @udecode/slate-plugins

⚠️ 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 guidance on using @udecode/slate-plugins visit: slate-plugins-next.netlify.app and checkout our API documentation.

For additional help, join us in our Slack.

🔌 Plugins

blocks

Element Plugins
Align Enables support for text alignment.
BasicElements Enables support for basic elements.
Blockquote Enables support for block quotes.
CodeBlock Enables support for pre-formatted code blocks.
Heading Enables support for headings (from 1 to 6).
Image Enables support for images.
ImageUpload Allows for pasting images from clipboard.
Link Enables support for hyperlinks.
List Enables support for bulleted, numbered and to-do lists.
MediaEmbed Enables support for embeddable media such as YouTube or Vimeo videos.
Mention Enables support for autocompleting @mentions and #tags.
Paragraph Enables support for paragraphs.
Table Enables support for tables.

marks

Mark Plugins
BasicMarks Enables support for basic text formatting.
Bold Enables support for bold formatting.
Code Enables support for inline code formatting.
Highlight Enables support for highlights.
Italic Enables support for italic formatting.
Strikethrough Enables support for strikethrough formatting.
Subscript Enables support for subscript formatting.
Superscript Enables support for superscript formatting.
Underline Enables support for underline formatting.
Deserializer Plugins
DeserializeHtml Enables support for deserializing content from HTML format to Slate format.
DeserializeMarkdown Enables support for deserializing content from Markdown format to Slate format.
Serializer Plugins
SerializeHtml Enables support for serializing content from Slate format to HTML. Useful for exports from editor.
Normalizer Plugins
NormalizeTypes Enables support for defining type rules for specific locations in the document.
TrailingNode Enables support for inserting a trailing node of a configurable type when the type of the last node is not matching.
Handler Plugins
Autoformat Enables support for autoformatting actions.
SoftBreak Enables support for inserting soft breaks.
Decorator Plugins
Preview Enables support for previewing.
Toolbar
BalloonToolbar Provides a toolbar, pointing at a particular element or range.
Toolbar Provides a toolbar with buttons.
Utility Plugins
NodeID Enables support for inserting nodes with an id key.
Widget Plugins
SearchHighlight Enables support for highlighting searching text.

🤔 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 @udecode/slate-plugins 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.

👥 Community

We welcome contributions to @udecode/slate-plugins! Please feel free to share your own plugins here.

📥 Pull requests and 🌟 Stars are always welcome. 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 dev (after building).

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.

Contributors ✨


Ziad Beyens

💻 🚧 🔌 ⚠️ 📖

Horacio Herrera

💻 🔌 💡 🐛 🤔

Eivind Barstad Waaler

💻 🔌 💡 🐛

Petr Sahula

💻 🔌 💡

Mark Vujevits

💻

Alan

💻 🔌 🐛 ⚠️ 🤔

cycle-app

💻

Paul

💻 🐛

Daniel Lunde

💻 🔌 ⚠️

Roman Landenband

💻 🔌 ⚠️ 💡

License

MIT