Plate Utils
API reference for @udecode/plate-utils.
v42 documentation is in progress.
@udecode/plate-utils contains utility functions for Plate.
Components
PlateElement
Generic component for rendering an element.
Attributes
- Default:
'div'
PlateElementProps.
The CSS class to apply to the component.
Additional props to pass to the component.
The editor instance. Also available using useEditorRef hook.
The element node. Also available using useElement hook.
The path of the element in the editor tree. Also available using usePath hook.
Attributes of the element to be spread on the top-level element.
Necessary for rendering the node children.
Get HTML attributes from Slate element. This is an alternative to
PlatePlugin.props.
The component type to render as.
If true, merges its props onto its immediate child.
PlateLeaf
Generic component for rendering a leaf.
Attributes
- Default:
'span'
PlateLeafProps.
The CSS class to apply to the component.
The editor context.
Additional props to pass to the component.
Necessary for rendering the node children.
The leaf node.
The text node.
Attributes of the leaf to be spread on the top-level element.
Get HTML attributes from Slate leaf. This is an alternative to PlatePlugin.props.
The component type to render as.
If true, merges its props onto its immediate child.
Hooks
useEditorString
A hook that returns the entire text content of the editor as a string.
Returns
The concatenated text content of all text nodes in the editor.
useMarkToolbarButtonState
Generates the state for a mark toolbar button.
Parameters
The type of the node to check for active marks.
Type or types of the node to clear when the mark is applied.
Returns
A boolean indicating whether the nodeType mark is active in the current selection.
The type of the node.
Type or types of the node to clear.
useMarkToolbarButton
Generates the props for a mark toolbar button using the state created by useMarkToolbarButtonState.
Parameters
The state for the mark toolbar button generated by
useMarkToolbarButtonState.
Returns
Properties of the toolbar button including pressed status and onClick
function.
usePlaceholderState
Generates the state for a placeholder in an editor.
Parameters
- Default:
true
If true, the placeholder is hidden when the editor is not focused.
Options to query the node. If defined, the placeholder is only shown if the node matches the query.
The element in which the placeholder is to be displayed.
Returns
A boolean indicating whether the placeholder should be displayed or not.
useRemoveNodeButton
Generates the props for a button that, when clicked, removes a node from the editor.
Parameters
The node element to be removed when the button is clicked.
Returns
Properties of the remove node button including the onClick function.