docs/api/core.mdx
createPlateEditorGenerates a new instance of a PlateEditor, initialized with a set of plugins and their configurations.
For more details on editor configuration, refer to the Editor Configuration guide.
createPlatePluginCreates a new Plate plugin with the given configuration, supporting extension, nested plugin manipulation, and runtime configuration.
<API name="createPlatePlugin"> <APIParameters> <APIItem name="config" type="PlatePluginConfig | ((editor: PlateEditor) => PlatePluginConfig)"> The configuration object for the plugin, or a function that returns the configuration. If a function is provided, it will be executed when the plugin is resolved with the editor.For details on the `PlatePluginConfig` type, refer to the [PlatePlugin API](/docs/api/core/plate-plugin#plugin-properties).
createTPlatePluginExplicitly typed version of createPlatePlugin.
For details on the `TPlatePluginConfig` type, refer to the [PlatePlugin API](/docs/api/core/plate-plugin#plugin-properties).
toPlatePluginExtends a SlatePlugin to create a React PlatePlugin.
<API name="toPlatePlugin"> <APIParameters> <APIItem name="basePlugin" type="SlatePlugin"> The base SlatePlugin to be extended. </APIItem> <APIItem name="extendConfig" type="PlatePluginConfig | ((ctx: PlatePluginContext<C>) => PlatePluginConfig)" optional> A function or object that provides the extension configuration. If a function, it receives the plugin context and should return a partial PlatePlugin. If an object, it should be a partial PlatePlugin configuration. </APIItem> </APIParameters> <APIReturns type="PlatePlugin"> A new plugin instance that combines the base SlatePlugin functionality with React-specific features defined in the extension configuration. </APIReturns> </API>toTPlatePluginExplicitly typed version of toPlatePlugin.
usePlateEditorCreates a memoized Plate editor for React components.
<API name="usePlateEditor"> <APIParameters> <APIItem name="options" type="CreatePlateEditorOptions & { enabled?: boolean; onReady?: (ctx: { editor: PlateEditor; isAsync: boolean; value: V }) => void }" optional> Configuration options for creating the Plate editor. All options from `createPlateEditor` are supported, plus: <APISubList> <APISubListItem parent="options" name="enabled" type="boolean" optional> Whether the editor should be created. When `false`, returns `null`. - **Default:** `true` </APISubListItem> <APISubListItem parent="options" name="onReady" type="(ctx: { editor: PlateEditor; isAsync: boolean; value: V }) => void" optional> Callback called when the editor initialization completes. The `isAsync` flag indicates whether the value was loaded asynchronously. </APISubListItem> </APISubList> </APIItem> <APIItem name="deps" type="React.DependencyList" optional> Additional dependencies for the useMemo hook. - **Default:** `[]` </APIItem> </APIParameters> <APIReturns type="PlateEditor | null"> A memoized Plate editor instance. Returns `null` if `enabled` is `false`. </APIReturns> </API>useEditorContainerRefuseEditorScrollRefuseScrollRefuseEditorPluginGet editor and plugin context.
<API name="useEditorPlugin"> <APIParameters> <APIItem name="p" type="WithRequiredKey<P>"> The plugin or plugin configuration with a required key. </APIItem> </APIParameters> <APIReturns type="PlatePluginContext"> <APIItem name="editor" type="PlateEditor"> The current editor instance. </APIItem> <APIItem name="plugin" type="PlatePlugin"> The plugin instance. </APIItem> <APIItem name="getOption" type="function"> Function to get a specific option value. </APIItem> <APIItem name="getOptions" type="function"> Function to get all options for the plugin. </APIItem> <APIItem name="setOption" type="function"> Function to set a specific option value. </APIItem> <APIItem name="setOptions" type="function"> Function to set multiple options. </APIItem> <APIItem name="store" type="PlateStore"> The Plate store for the editor. </APIItem> </APIReturns> </API>useEditorRefGet the Plate editor reference without re-rendering. The returned editor object is enhanced with a store property that provides access to the Plate store.
useEditorSelectorSubscribe to a specific property of the editor.
<API name="useEditorSelector"> <APIParameters> <APIItem name="selector" type="(editor: PlateEditor<V>, prev?: T) => T"> The selector function. </APIItem> <APIItem name="deps" type="DependencyList"> The dependency list for the selector function. </APIItem> <APIItem name="options" type="UseEditorSelectorOptions<T>" optional> Options for the selector function. </APIItem> </APIParameters> <APIOptions> <APIItem name="id" type="string" optional> The ID of the plate editor. Useful only when nesting editors. Default is using the closest editor id. </APIItem> <APIItem name="equalityFn" type="(a: T, b: T) => boolean" optional> Equality function to determine whether the result of the selector function has changed. Default is `(a, b) => a === b`. </APIItem> </APIOptions> <APIReturns type="T"> The return value of the selector function. </APIReturns> </API>useEditorStateGet the Plate editor reference with re-rendering.
<API name="useEditorState"> <APIParameters> <APIItem name="id" type="string" optional> The ID of the plate editor. Default is using the closest editor id. </APIItem> </APIParameters> <APIReturns type="PlateEditor"> The editor reference. </APIReturns> </API>useEditorComposingGet the editor's composing state.
useEditorReadOnlyGet the editor's readOnly state.
<API name="useEditorReadOnly">
<APIParameters>
<APIItem name="id" type="string" optional>
The ID of the plate editor.
</APIItem>
</APIParameters>
<APIReturns type="boolean">
Whether the editor is read-only.
</APIReturns>
</API>
useEditorMountedGet the editor's isMounted state.
useEditorSelectionGet the editor's selection. Memoized so it does not re-render if the range is the same.
<API name="useEditorSelection"> <APIParameters> <APIItem name="id" type="string" optional> The ID of the plate editor. </APIItem> </APIParameters> <APIReturns type="TRange | null"> The current selection in the editor. </APIReturns> </API>useEditorVersionGet the version of the editor value. That version is incremented on each editor change.
<API name="useEditorVersion"> <APIParameters> <APIItem name="id" type="string" optional> The ID of the plate editor. </APIItem> </APIParameters> <APIReturns type="number"> The current version of the editor value. </APIReturns> </API>useSelectionVersionGet the version of the editor selection. That version is incremented on each selection change (the range being different).
<API name="useSelectionVersion"> <APIParameters> <APIItem name="id" type="string" optional> The ID of the plate editor. </APIItem> </APIParameters> <APIReturns type="number"> The current version of the editor selection. </APIReturns> </API>useSelectionCollapseduseSelectionExpandeduseSelectionWithinBlockuseSelectionAcrossBlocksuseSelectionFragmentReturns the fragment of the current selection, optionally unwrapping structural nodes.
<API name="useSelectionFragment"> <APIReturns type="TElement[]"> The fragment of the current selection. Returns an empty array if the selection is not expanded or if no fragment is found. </APIReturns> </API>useSelectionFragmentPropReturns a prop value derived from the current selection fragment.
<API name="useSelectionFragmentProp"> <APIOptions type="GetSelectionFragmentOptions & GetFragmentPropOptions" optional> <APIItem name="key" type="string" optional> The key of the property to extract from each node. </APIItem> <APIItem name="defaultValue" type="string" optional> The default value to return if no valid prop is found. </APIItem> <APIItem name="getProp" type="(node: TElement | TText) => any" optional> Custom function to extract the prop value from a node. </APIItem> <APIItem name="mode" type="'all' | 'block' | 'text'" optional> Determines how to traverse the fragment: - 'all': Check both block and text nodes - 'block': Only check block nodes - 'text': Only check text nodes'block'
</APIItem>
useNodePathReturns the path of a node in the editor.
<API name="useNodePath"> <APIParameters> <APIItem name="node" type="TNode"> The node to find the path for. </APIItem> </APIParameters> <APIReturns> A memoized Path array representing the location of the node in the editor's tree structure. </APIReturns> </API>usePathGet the memoized path of the closest element.
<API name="usePath"> <APIParameters> <APIItem name="pluginKey" type="string" optional> The key of the plugin to get the path for. </APIItem> </APIParameters> <APIReturns> The path of the element, or `undefined` if used outside of a node component's context. </APIReturns> </API>usePluginOptionHook to access plugin options from the plugin store. For usage inside <Plate>.
// Access a simple option
const value = usePluginOption(plugin, 'value');
// Access a selector with parameters
const doubleValue = usePluginOption(plugin, 'doubleValue', 2);
// Access with equality function
const value = usePluginOption(plugin, 'value', (a, b) => a === b);
// Access entire state
const state = usePluginOption(plugin, 'state');
useEditorPluginOptionHook to access plugin options from the plugin store. For usage outside <Plate>.
// Access a simple option
const value = useEditorPluginOption(editor, plugin, 'value');
// Access a selector with parameters
const doubleValue = useEditorPluginOption(editor, plugin, 'doubleValue', 2);
// Access with equality function
const value = useEditorPluginOption(editor, plugin, 'value', (a, b) => a === b);
// Access entire state
const state = useEditorPluginOption(editor, plugin, 'state');
useElementGet the element by plugin key.
<API name="useElement"> <APIParameters> <APIItem name="pluginKey" type="string" optional> The key of the plugin to get the element for. - **Default:** `'element'` </APIItem> </APIParameters> <APIReturns> The element of type `T extends TElement`, or an empty object if used outside of a node component's context. </APIReturns> </API>DebugPluginProvides debugging capabilities with configurable log levels and error handling.
See Debugging for more details.
SlateExtensionPlugin & SlateReactExtensionPluginExtend core apis and improve default functionality.
DOMPlugin & ReactPluginIntegrates React-specific functionality into the editor.
HistoryPluginEnables undo and redo functionality for the editor.
InlineVoidPluginManages inline and void elements in the editor.
ParserPluginHandles parsing of content for the editor.
LengthPluginEnforces a maximum length for the editor content.
HtmlPluginEnables HTML serialization and deserialization.
AstPluginHandles Abstract Syntax Tree (AST) operations for the editor.
ParagraphPluginProvides paragraph formatting functionality.
EventEditorPluginManages editor events such as focus and blur.
isTypeChecks whether a node matches the provided type.
<API name="isType"> <APIParameters> <APIItem name="editor" type="PlateEditor<V>"> The editor in which the node is present. </APIItem> <APIItem name="node" type="any"> The node to be checked. </APIItem> <APIItem name="key" type="string | string[]" optional> The type or types to match the node against. Can be a string or an array of strings. </APIItem> </APIParameters> <APIReturns> A boolean indicating whether the node's type matches the provided type or types. </APIReturns> </API><PlateElement>Generic component for rendering an element.
<API name="PlateElement"> <APIProps> <APIItem name="className" type="string" optional> The CSS class to apply to the component. </APIItem> <APIItem name="editor" type="E"> The editor instance. Also available using `useEditorRef` hook. </APIItem> <APIItem name="element" type="TElement"> The element node. Also available using `useElement` hook. </APIItem> <APIItem name="path" type="Path"> The path of the element in the editor tree. Also available using `usePath` hook. </APIItem> <APIItem name="attributes" type="HTMLAttributes<HTMLElement>"> Attributes of the element to be spread on the top-level element. <APISubList> <APISubListItem parent="attributes" name="data-slate-node" type="'element'"> Always set to `'element'`. </APISubListItem> <APISubListItem parent="attributes" name="data-slate-inline" type="boolean" optional /> <APISubListItem parent="attributes" name="data-slate-void" type="boolean" optional /> <APISubListItem parent="attributes" name="dir" type="string" optional /> <APISubListItem parent="attributes" name="ref" type="any"> The reference to the element. If using your own reference, merge it with this one. </APISubListItem> </APISubList> </APIItem> <APIItem name="children" type="any"> Necessary for rendering the node children. </APIItem> <APIItem name="as" type="React.ElementType" optional> The component type to render as. - **Default:** `'div'` </APIItem> </APIProps> </API><PlateLeaf>Generic component for rendering a leaf.
<API name="PlateLeaf"> <APIProps> <APIItem name="className" type="string" optional> The CSS class to apply to the component. </APIItem> <APIItem name="editor" type="E"> The editor context. </APIItem> <APIItem name="children" type="any"> Necessary for rendering the node children. </APIItem> <APIItem name="leaf" type="TText"> The leaf node. </APIItem> <APIItem name="text" type="TText"> The text node. </APIItem> <APIItem name="attributes" type="HTMLAttributes<HTMLElement>"> Attributes of the leaf to be spread on the top-level element. <APISubList> <APISubListItem parent="attributes" name="data-slate-leaf" type="true"> Always set to `true`. </APISubListItem> </APISubList> </APIItem> <APIItem name="as" type="React.ElementType" optional> The component type to render as. - **Default:** `'span'` </APIItem> </APIProps> </API><PlateText>Generic component for rendering text.
<API name="PlateText"> <APIProps> <APIItem name="className" type="string" optional> The CSS class to apply to the component. </APIItem> <APIItem name="text" type="TText"> The text node. </APIItem> <APIItem name="attributes" type="HTMLAttributes<HTMLElement>"> Attributes of the text to be spread on the top-level element. </APIItem> <APIItem name="children" type="any"> Necessary for rendering the node children. </APIItem> <APIItem name="as" type="React.ElementType" optional> The component type to render as. - **Default:** `'span'` </APIItem> </APIProps> </API>