Plate Utils

API reference for @udecode/plate-utils.

@udecode/plate-utils contains utility functions for Plate.

Components

<PlateElement>

Generic component for rendering an element.

Props

Collapse all

    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. An alternative to PlatePlugin.props.

    The component type to render as.

    • Default: 'div'

    If true, merges its props onto its immediate child.

<PlateLeaf>

Generic component for rendering a leaf.

Props

Collapse all

    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. An alternative to PlatePlugin.props.

    The component type to render as.

    • Default: 'span'

    If true, merges its props onto its immediate child.

Hooks

useEditorString

Returnsstring

    The concatenated text content of all text nodes in the editor.

useMarkToolbarButtonState

Generates the state for a mark toolbar button.

Parameters

Collapse all

    The type of the node to check for active marks.

    Type or types of the node to clear when the mark is applied.

Returnsobject

Collapse all

    Whether the nodeType mark is active in the current selection.

    The type of the node.

    The type or types to clear when toggling this mark.

useMarkToolbarButton

Generates the props for a mark toolbar button using the state created by useMarkToolbarButtonState.

Parameters

Collapse all

    The state for the mark toolbar button generated by useMarkToolbarButtonState.

Returnsobject

Collapse all

usePlaceholderState

Generates the state for a placeholder in an editor.

Parameters

Collapse all

    If true, hide the placeholder when the editor is not focused.

    • Default: true

    If defined, the placeholder shows only if the node matches the query.

    The element in which the placeholder is to be displayed.

Returnsobject

Collapse all

    Whether the placeholder should be displayed.

useRemoveNodeButton

Generates props for a button that removes a node from the editor when clicked.

Parameters

Collapse all

    The node element to be removed.

Returnsobject

Collapse all