Plate Utils
API reference for @udecode/plate-utils.
@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.
Queries
isType
Checks whether a node matches the provided type.
Parameters
The editor in which the node is present.
The node to be checked.
The type or types to match the node against. Can be a string or an array of strings.
Returns
A boolean indicating whether the node's type matches the provided type or types.
Transforms
resetEditorChildren
Replaces the children of an editor with default blocks.
Parameters
The editor whose children are to be replaced.
Options for replacing the children of the node. Excludes at and nodes
options.
selectEditor
Selects an editor at a target location or an edge (start, end).
Parameters
- If
edgeis not defined, this option is considered. - Overrides
atoption if defined. - Default:
false
The editor to be selected.
Specific location to select.
Select the start or end of the editor.
If true, focuses the React editor before selecting markdown Copy code.
Returns
No explicit return, but selects and potentially focuses the editor.
moveSelectionByOffset
Moves the selection by offset based on the keyboard arrow keys.
Parameters
The editor instance.
Options for moving the selection by offset. This is an optional parameter.
selectSiblingNodePoint
Selects a point from the previous or next sibling node of the specified node.
Parameters
The editor instance.
Options for selecting a sibling node's point.
Utils
defaultsDeepToNodes
Recursively merges a source object into children nodes using a query.
Parameters
Options for the function, excluding the 'apply' option.
Returns
No explicit return, but it modifies the children nodes based on the provided options.