Skip to content

Latest commit

 

History

History
59 lines (37 loc) · 2.17 KB

plugin_structure.md

File metadata and controls

59 lines (37 loc) · 2.17 KB
Raw

Plugin Structure

A full reference for every property available inside a slate plugin

renderElement

type RenderElement = (elementProps: RenderElementProps) => JSX.Element | undefined

Function for rendering elements. It should return a React element if and only if it matches the type it's supposed to handle. If the type isn't supposed to be handled by a given plugin, renderElement should return undefinded.

Don't add default cases and make sure there are no conflicts between any and all plugins you're using, because once a renderElement function returns an element, no further renderElement functions will be run.

renderLeaf

type RenderLeaf = (leafProps: RenderLeafProps) => JSX.Element

Function for rendering leaves. Because a node can have any number of marks, all renderLeaf functions will be called and the leaf node will often be wrapped in multiple React components.

renderLeaf always needs to return children, wrapped or not.

editorOverrides

const withSomething = (editor) => {
  /* modify editor object */
  return editor
}

Function that wraps the slate editor object and adds and/or modifies it's functionality. It's the same concept as the vanilla slate plugins.

onKeyDown

type OnKeyDown = (event: KeyboardEvent, editor: Editor) => void

Function that can be used to add keyboard shortcuts and other special cases for handling keyboard events. Usage.

decorate

type Decorate = (entry: NodeEntry) => Range[]

Function for adding decorations. See these examples to learn how it works:

onDOMBeforeInput

This section is a work in progress