Plate Core
API reference for @platejs/core.
API
createPlateEditor
Generates a new instance of a PlateEditor
, initialized with a set of plugins and their configurations.
- A static value array
- An HTML string to be deserialized
- A function that returns a value (can be async)
- Default:
false
true
| 'end': Select the end of the editorfalse
: Do not select anything'start'
: Select the start of the editor- Default:
false
Unique identifier for the editor.
Initial editor without withPlate
.
An array of editor plugins.
Initial value of the editor. Can be:
Select the editor after initialization.
Callback called when the editor initialization completes. The isAsync
flag indicates whether the value was loaded asynchronously.
Specifies the maximum number of characters allowed in the editor.
Configuration for automatic node ID generation and management.
Configure Slate's chunking optimization, which reduces latency while typing. Set to false
to disable. Learn more about chunking.
Initial selection for the editor.
When true
, it will normalize the initial value
passed to the editor
.
Function to configure the root plugin.
API methods for the editor.
Decoration function for the editor.
Function to extend the editor.
Event handlers for the editor.
Injection configuration for the editor.
Function to normalize the initial value.
Additional options for the editor.
Override configuration for the editor.
Priority of the editor plugin.
Editor read-only initial state. For dynamic value, use
Plate.readOnly
prop.
Render functions for the editor.
Keyboard shortcuts for the editor.
Transform functions for the editor.
Hook to use with the editor.
For more details on editor configuration, refer to the Editor Configuration guide.
createPlatePlugin
Creates a new Plate plugin with the given configuration, supporting extension, nested plugin manipulation, and runtime configuration.
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.
createTPlatePlugin
Explicitly typed version of createPlatePlugin
.
The configuration object for the plugin, or a function that returns the configuration. This version requires an explicit type parameter C
extending AnyPluginConfig
.
For details on the TPlatePluginConfig
type, refer to the PlatePlugin API.
toPlatePlugin
Extends a SlatePlugin to create a React PlatePlugin.
toTPlatePlugin
Explicitly typed version of toPlatePlugin
.
usePlateEditor
Creates a memoized Plate editor for React components.
useEditorContainerRef
useEditorScrollRef
useScrollRef
useEditorPlugin
Get editor and plugin context.
useEditorRef
Get the Plate editor reference without re-rendering. The returned editor object is enhanced with a store
property that provides access to the Plate store.
useEditorSelector
Subscribe to a specific property of the editor.
useEditorState
Get the Plate editor reference with re-rendering.
useEditorComposing
Get the editor's composing
state.
useEditorReadOnly
Get the editor's readOnly
state.
useEditorMounted
Get the editor's isMounted
state.
useEditorSelection
Get the editor's selection. Memoized so it does not re-render if the range is the same.
useEditorVersion
Get the version of the editor value. That version is incremented on each editor change.
useSelectionVersion
Get the version of the editor selection. That version is incremented on each selection change (the range being different).
useSelectionCollapsed
useSelectionExpanded
useSelectionWithinBlock
useSelectionAcrossBlocks
useSelectionFragment
Returns the fragment of the current selection, optionally unwrapping structural nodes.
useSelectionFragmentProp
Returns a prop value derived from the current selection fragment.
-
'all': Check both block and text nodes
-
'block': Only check block nodes
-
'text': Only check text nodes
-
Default:
'block'
The key of the property to extract from each node.
The default value to return if no valid prop is found.
Custom function to extract the prop value from a node.
Determines how to traverse the fragment:
useNodePath
Returns the path of a node in the editor.
usePath
Get the memoized path of the closest element.
usePluginOption
Hook 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');
useEditorPluginOption
Hook 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');
useElement
Get the element by plugin key.
Core plugins
DebugPlugin
Provides debugging capabilities with configurable log levels and error handling.
See Debugging for more details.
SlateExtensionPlugin & SlateReactExtensionPlugin
Extend core apis and improve default functionality.
DOMPlugin & ReactPlugin
Integrates React-specific functionality into the editor.
HistoryPlugin
Enables undo and redo functionality for the editor.
InlineVoidPlugin
Manages inline and void elements in the editor.
ParserPlugin
Handles parsing of content for the editor.
LengthPlugin
Enforces a maximum length for the editor content.
HtmlPlugin
Enables HTML serialization and deserialization.
AstPlugin
Handles Abstract Syntax Tree (AST) operations for the editor.
ParagraphPlugin
Provides paragraph formatting functionality.
EventEditorPlugin
Manages editor events such as focus and blur.
Utils
isType
Checks whether a node matches the provided type.
Components
<PlateElement>
Generic component for rendering an element.
- Default:
'div'
The CSS class to apply 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.
The component type to render as.
<PlateLeaf>
Generic component for rendering a leaf.
<PlateText>
Generic component for rendering text.
On This Page
APIcreatePlateEditorcreatePlatePlugincreateTPlatePlugintoPlatePlugintoTPlatePluginusePlateEditoruseEditorContainerRefuseEditorScrollRefuseScrollRefuseEditorPluginuseEditorRefuseEditorSelectoruseEditorStateuseEditorComposinguseEditorReadOnlyuseEditorMounteduseEditorSelectionuseEditorVersionuseSelectionVersionuseSelectionCollapseduseSelectionExpandeduseSelectionWithinBlockuseSelectionAcrossBlocksuseSelectionFragmentuseSelectionFragmentPropuseNodePathusePathusePluginOptionuseEditorPluginOptionuseElementCore pluginsDebugPluginSlateExtensionPlugin & SlateReactExtensionPluginDOMPlugin & ReactPluginHistoryPluginInlineVoidPluginParserPluginLengthPluginHtmlPluginAstPluginParagraphPluginEventEditorPluginUtilsisTypeComponents<PlateElement><PlateLeaf><PlateText>