slate-pen
v0.58.1-4
Published
---
Downloads
13
Readme
Unofficial Slate.js Plugin ENgine
Custom plugin engine for Slate editors framework. Written in TypeScript.
Why
Slate.js is a great framework for simple and complex text editors. It is very customisable in a functional manner. During development of an HTML WYSIWYG based on Slate.js we've seen an opportunity to standardize our modules. So we started this library - an abstraction layer for Slate.js plugins. It currently supports these methods:
- extendEditor
- RenderElement
- RenderLeaf
- toHtml
- fromHtmlElement
Quick Example
const createYourVoidElementPlugin = (): TSlatePlugin => ({
extendEditor: editor => {
const { isVoid } = editor
editor.isVoid = element => {
return isYourSlateElement(element) ? true : isVoid(element)
}
},
RenderElement: props => {
if (isYourSlateElement(props.element)) {
return <YourComponent {...props.attributes} />
}
return null
},
toHtml: slateElement => {
if (isYourSlateElement(slateElement)) {
return formatVoidToString(slateElement.type, slateElement.attributes)
}
return null
},
fromHtmlElement: htmlElement => {
if (isYourHtmlElement(htmlElement)) {
return generateYourSlateElement(htmlElement)
}
return null
},
})
new SlatePen({
editor,
plugins: [..., createYourVoidElementPlugin()],
})
Related project and more examples
slate-html-mui - Slate and Material-UI based HTML WYSIWYG editor.
Installation
npm install slate-pen
or
yarn add slate-pen
Versioning
We will follow slate.js minor versions until v1.
License
This project is licensed under the terms of the MIT license.