PlatePlugin
API reference for Plate plugins.
Plate plugins are objects passed to Plate
plugins prop.
Attributes
- Unique in the editor.
- Naming convention:
- all Plate element keys start with
ELEMENT_
. - all Plate mark keys start with
MARK_
. - React component with element of leaf props.
- 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
- 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. onCopy
,onPaste
,onFocus
,onBlur
,onDOMBeforeInput
,onKeyDown
,- ...
- Its type is the second generic type of
PlatePlugin
. - Plate eventually flattens all the plugins into the editor.
- 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.
- Can be used to derive plugin fields from
editor
andplugin
. - The returned value will be deeply merged to the plugin.
- It requires slate element properties to have a
type
property with the plugintype
as value. - Example:
{ type: 'p' }
where plugintype
is'p'
. - It requires slate leaf properties to have the plugin
type
value as key andtrue
as value. - Example:
{ bold: true }
where plugintype
is'bold'
. - Default: is plugin
key
.
Property used by Plate to store the plugins by key in editor.pluginsByKey
.
Property used by Plate to render a slate element or leaf.
Property used by Plate to decorate editor ranges.
export type Decorate<
P = PluginOptions,
V extends Value = Value,
E extends PlateEditor<V> = PlateEditor<V>
> = (
editor: PlateEditor<V>,
plugin: WithPlatePlugin<P, V, E>
) => (entry: ENodeEntry<V>) => Range[] | undefined;
Properties used by the HTML deserializer core plugin for each HTML element.
Handlers called whenever the corresponding event occurs in the editor.
This attribute extends most textarea
handlers like:
type Handler<
P = PluginOptions,
V extends Value,
E extends PlateEditor = PlateEditor
> = (editor: E, plugin: WithPlatePlugin) => (event: Event) => boolean | void;
Property used by Plate to render nodes of this type
as elements, i.e.
renderElement
.
Property used by inlineVoid
core plugin to set elements of this type
as
inline.
Property used by Plate to render nodes of this type
as leaves, i.e.
renderLeaf
.
Property used by inlineVoid
core plugin to set elements of this type
as
void.
Normalize value before passing it into the editor.
Extended properties used by any plugin as options.
Property used by Plate to deeply override plugins by key.
Recursive plugin support to allow having multiple plugins in a single plugin.
Property used by Plate to override node component
props.
object |
((props: PlateRenderElementProps & PlateRenderLeafProps) =>
object | undefined);
Render a component above Editable
.
Render a component above Slate
.
Render a component after Editable
.
Render a component before Editable
.
Property used by serializeHtml
util to replace renderElement
and
renderLeaf
when serializing a node of this type
.
React.FC<{
className?: string;
editor: PlateEditor;
nodeProps?: AnyObject;
children: any;
attributes:
| {
'data-slate-node': 'element';
'data-slate-inline'?: true;
'data-slate-void'?: true;
dir?: 'rtl';
ref: any;
}
| {
'data-slate-leaf': true;
};
element: TElement;
leaf: TText;
text: TText;
}>;
Recursive plugin merging.
(editor: PlateEditor, plugin: WithPlatePlugin) => Partial<PlatePlugin> | void;
Property used by Plate to render a node by type.
Use any React hooks here. Each plugin useHooks
will be called in a React component.
(editor: PlateEditor, plugin: WithPlatePlugin) => void
Editor method overriders.
(editor: PlateEditor, plugin: WithPlatePlugin) => PlateEditor;