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

Collapse all

    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.

    • Default: 'div'

    If true, merges its props onto its immediate child.

PlateLeaf

Generic component for rendering a leaf.

Attributes

Collapse all

    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.

    • Default: 'span'

    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

Collapse all

    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.

Returns

Collapse all

    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

Collapse all

    The state for the mark toolbar button generated by useMarkToolbarButtonState.

Returns

Collapse all

    Properties of the toolbar button including pressed status and onClick function.

usePlaceholderState

Generates the state for a placeholder in an editor.

Parameters

Collapse all

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

    • Default: true

    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

Collapse all

    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

Collapse all

    The node element to be removed when the button is clicked.

Returns

Collapse all

    Properties of the remove node button including the onClick function.

Queries

isType

Checks whether a node matches the provided type.

Parameters

Collapse all

    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

Collapse all

    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

Collapse all

    The editor to be selected.

    Specific location to select.

    • If edge is not defined, this option is considered.

    Select the start or end of the editor.

    • Overrides at option if defined.

    If true, focuses the React editor before selecting markdown Copy code.

    • Default: false

Returns

    No explicit return, but selects and potentially focuses the editor.

moveSelectionByOffset

Moves the selection by offset based on the keyboard arrow keys.

Parameters

Collapse all

    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

Collapse all

    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

Collapse all

    Options for the function, excluding the 'apply' option.

Returns

    No explicit return, but it modifies the children nodes based on the provided options.

StoreSlate