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.
The editor instance.
Additional props to pass to the component.
The element node.
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.
PortalBody
Renders a React component in the document.body using a portal.
Text
Generic component for rendering a span.
Box
Generic component for rendering a div.
Hooks
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.
Utils
createPrimitiveComponent
Creates a primitive component factory which utilizes hooks for managing state, props, and forwards references to child components.
Parameters
The base component or native HTML element.
Returns
A function returning a primitive component with hooks for state and props management.
createSlotComponent
Creates a Slot component, which is useful when you want a component to behave as its child.
Parameters
The base component or native HTML element.
Returns
A function returning a Slot component.
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.
getRootProps
Gets the Plate component root props.
Parameters
The properties of the Plate component.
Returns
An object containing all props except 'editor', 'attributes', 'children', 'nodeProps', 'element', 'leaf', and 'text'.
onKeyDownToggleElement
A function that toggles the type of the node in the editor when a hotkey is pressed.
Parameters
The PlateEditor instance.
An object that contains the type of the node to be toggled and the hotkey(s) that triggers the toggle.
Returns
A keyboard handler function that toggles the node type when a specified hotkey is pressed.
onKeyDownToggleMark
A function that toggles the mark of the node in the editor when a hotkey is pressed.
Parameters
The PlateEditor instance.
An object that contains the type of the mark to be toggled, the hotkey that triggers the toggle, and an option to clear existing marks.
Returns
A keyboard handler function that toggles the mark when a specified hotkey is pressed.
withProps
A Higher-Order Component (HOC) that adds props to a component.
Parameters
The component to which props will be added.
The props to be added to the component.
Returns
A new component that includes the additional props.
withProviders
A function that wraps a component into multiple providers.
Parameters
Providers with which to wrap the component.
If there are any props that you want a provider to receive, you can simply pass an array.
The component to be wrapped.
The props to be passed to the wrapped component.
Returns
A new component that is wrapped by the specified providers.