Plugins
Plate plugins are objects passed to Plate
plugins prop.
#
Creating Plugins#
Plugin FactoryLet's create a plugin factory with createPluginFactory
:
- first param is the default plugin.
- the only required property of the default plugin is
key
. - the naming convention is
create...Plugin
- returns a plugin factory:
- first param
override
can be used to (deeply) override the default plugin. - second param
overrideByKey
can be used to (deeply) override by key a nested plugin (in plugin.plugins). - returns a plugin of type
PlatePlugin
- first param
#
Element- To render a block element, use
isElement: true
. - To customize the rendered component, use
component
. - To enable block toggling with a hotkey, use
handlers.onKeyDown: onKeyDownToggleElement
- To define the hotkey, use
options.hotkey
.- Note that
options
type is set toHotkeyPlugin
- Note that
#
Inline & Void- To set the element as an inline element, use
isInline: true
. - To set the element as a void element, use
isVoid: true
.
#
Leaf- To render a leaf, use
isLeaf: true
. - To customize the rendered component, use
component
. - To enable mark toggling with a hotkey, use
handlers.onKeyDown: onKeyDownToggleMark
- To define the hotkey, use
options.hotkey
. - To clear a mark when toggling, use
options.clear
.
#
With Overrides- To override the editor methods, use
withOverrides
.
#
Deserialize HTML- To customize HTML deserializer for this node, use
deserializeHtml
.
#
Inject Props- To inject props to the component, use
inject.props
.
#
OthersSee the following API for other use cases like:
editor.insertData
: used by the deserializer plugins.decorate
: used by find & replace plugin.inject.aboveComponent
inject.belowComponent
: used by the indent list plugin.inject.pluginsByKey
: used by the list plugin.plugins
: used by the heading plugin.props
serializeHtml
PlatePlugin
#
key
#
- Property used by Plate to store the plugins by key in
editor.pluginsByKey
. - Unique and required.
- Naming convention:
- all Plate element keys start with
ELEMENT_
. - all Plate mark keys start with
MARK_
.
- all Plate element keys start with
component
#
- Property used by Plate to render a slate element or leaf.
- React component with element of leaf props.
decorate
#
- Property used by Plate to decorate editor ranges.
- If the function returns undefined then no ranges are modified.
- If the function returns an array the returned ranges are merged with the ranges called by other plugins.
- See https://docs.slatejs.org/concepts/09-rendering#decorations
deserializeHtml
#
- Properties used by the HTML deserializer core plugin for each HTML element.
- Type is
DeserializeHtml | DeserializeHtml[]
editor.insertData
#
- Properties used by the
insertData
core plugin to deserialize inserted data to a slate fragment. - The fragment will be inserted to the editor if not empty.
handlers
#
- Handlers called whenever the corresponding event occurs in the editor.
- Handlers can also be passed as
Plate
props. These are called after the plugins handlers. - Event handlers can return a boolean flag to specify whether the event can be treated as being handled.
- If it returns
true
, the next handlers will not be called.
- If it returns
This property extends most textarea
handlers like:
onCopy
,onPaste
,onFocus
,onBlur
,onDOMBeforeInput
,onKeyDown
,- ...
The type of each handler is:
inject.aboveComponent
#
- Property used by Plate to inject a component above other plugins
component
.
inject.belowComponent
#
- Property used by Plate to inject a component below other plugins
component
, i.e. above itschildren
.
inject.pluginsByKey
#
- Property that can be used by a plugin to allow other plugins to inject code.
- Differs from
overrideByKey
as this is not overriding any plugin. - For example, if multiple plugins have defined
inject.editor.insertData.transformData
forkey=KEY_DESERIALIZE_HTML
,insertData
plugin will call all of thesetransformData
forKEY_DESERIALIZE_HTML
plugin.
inject.props
#
- Properties used by Plate to inject props into any node
component
.
- If you want more semantics in your content, use CSS classes instead of inline styles.
- You can then adjust the CSS in the style sheets of your application.
- Example:
isElement
#
- Property used by Plate to render nodes of this
type
as elements, i.e.renderElement
.
isInline
#
- Property used by
inlineVoid
core plugin to set elements of thistype
as inline.
isLeaf
#
- Property used by Plate to render nodes of this
type
as leaves, i.e.renderLeaf
.
isVoid
#
- Property used by
inlineVoid
core plugin to set elements of thistype
as void.
normalizeInitialValue
#
- Normalize value before passing it into the editor.
options
#
- Extended properties used by any plugin as options.
- Its type is the second generic type of
PlatePlugin
.
overrideByKey
#
- Property used by Plate to deeply override plugins by key.
plugins
#
- Recursive plugin support to allow having multiple plugins in a single plugin.
- Plate eventually flattens all the plugins into the editor.
props
#
- Property used by Plate to override node
component
props. - If function, its returning value will be shallow merged to the old props, with the old props as parameter.
- If object, its value will be shallow merged to the old props.
renderAboveEditable
#
- Render a component above
Editable
.
renderAboveSlate
#
- Render a component above
Slate
.
renderAfterEditable
#
- Render a component after
Editable
.
renderBeforeEditable
#
- Render a component before
Editable
.
serializeHtml
#
- Property used by
serializeHtml
util to replacerenderElement
andrenderLeaf
when serializing a node of thistype
.
then
#
- Recursive plugin merging.
- Can be used to derive plugin fields from
editor
andplugin
. - The returned value will be deeply merged to the plugin.
- Type is:
type
#
- Property used by Plate to render a node by type.
- It requires slate element properties to have a
type
property with the plugintype
as value.- Example:
{ type: 'p' }
where plugintype
is'p'
.
- Example:
- It requires slate leaf properties to have the plugin
type
value as key andtrue
as value.- Example:
{ bold: true }
where plugintype
is'bold'
.
- Example:
- Default is plugin
key
.
useHooks
#
- Use any React hooks here. Each plugin
useHooks
will be called in a React component.
withOverrides
#
- Editor method overriders.
- See https://docs.slatejs.org/concepts/08-plugins