Skip to content

A plugin framework for building rich text editors with slate.

License

Notifications You must be signed in to change notification settings

rbuchberger/slate-plugins

Β 
Β 

Repository files navigation

slate-plugins

PRs Welcome Tested with Jest

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

Packages

Core libraries

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

Element Plugins

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

Mark Plugins

Name Version Description
@udecode/slate-plugins-basic-marks @udecode/slate-plugins-basic-marks npm package badge Basic text formatting: bold, code, italic, strikethrough, subscript, superscript and underline.
@udecode/slate-plugins-highlight @udecode/slate-plugins-highlight npm package badge Highlights.
@udecode/slate-plugins-kbd @udecode/slate-plugins-kbd npm package badge Keyboard input formatting.

Serializer Plugins

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

Plugins

Name Version Description
@udecode/slate-plugins-slate-plugins @udecode/slate-plugins npm package badge Provides all packages.
@udecode/slate-plugins-autoformat @udecode/slate-plugins-autoformat npm package badge Autoformatting actions.
@udecode/slate-plugins-break @udecode/slate-plugins-break npm package badge Soft-break and exit-break.
@udecode/slate-plugins-dnd @udecode/slate-plugins-dnd npm package badge Drag and drop with react-dnd.
@udecode/slate-plugins-find-replace @udecode/slate-plugins-find-replace npm package badge Highlighting searching text.
@udecode/slate-plugins-find-replace-ui @udecode/slate-plugins-find-replace-ui npm package badge Default UI for find-replace.
@udecode/slate-plugins-node-id @udecode/slate-plugins-node-id npm package badge Insert nodes with an id key.
@udecode/slate-plugins-normalizers @udecode/slate-plugins-normalizers npm package badge Editor normalizers.
@udecode/slate-plugins-reset-node @udecode/slate-plugins-reset-node npm package badge Reset node type.
@udecode/slate-plugins-select @udecode/slate-plugins-select npm package badge Selection utilities.
@udecode/slate-plugins-trailing-block @udecode/slate-plugins-trailing-block npm package badge Ensures a trailing block.
@udecode/slate-plugins-toolbar @udecode/slate-plugins-toolbar npm package badge Toolbar components: balloon, heading, buttons.
@udecode/slate-plugins-ui-fluent @udecode/slate-plugins-ui-fluent npm package badge Common UI utilities with fluentui.
@udecode/slate-plugins-test-utils @udecode/slate-plugins-test-utils npm package badge 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.

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

πŸ”Œ πŸ’‘ πŸ›

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

License

MIT

About

A plugin framework for building rich text editors with slate.

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 98.3%
  • JavaScript 1.7%