4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T6d6c,--- title: Editor Transforms description: API reference for editor transformation operations in Plate. --- Transforms are helper functions that manipulate a Plate document. ## Node Operations ### `duplicateNodes` Duplicates nodes at a location and inserts them after that location. `insertNodes` options. Location to duplicate from and insert after. Defaults to selection. If true, duplicates blocks above location. Ignored if `nodes` provided. Specific nodes to duplicate. Takes precedence over `block`. ### `insertFragment` Insert a fragment of nodes at a location. Fragment of nodes to insert. Location to insert at. Defaults to selection. Whether range is hanging. Allow insertion in void nodes. ### `insertNode` Insert a single node atomically. Node to insert. ### `insertNodes` Insert one or more nodes atomically. Node(s) to insert. Common query options. Insert after the current block if `removeEmpty` caused it to be removed. Remove the current block if empty. Defaults to removing an empty paragraph, but can be customized. Select inserted nodes. Allow insertion in void nodes. ### `liftNodes` Lift nodes at the specified location upwards in the document tree. If necessary, the parent node is split. ### `mergeNodes` Merge a node at the specified location with the previous node at the same depth. Resulting empty container nodes are removed. ### `moveNodes` Move the nodes from an origin to a destination. Destination path. Move only children of the node at the location. Start index of the children to move. Default is 0. ### `removeNodes` Remove nodes at a location. When true, remove all children of the node at the specified location. Remove the previous empty block if it exists. ### `replaceNodes` Replace nodes at a location with new nodes. The new node(s) to insert. `insertNodes` options. Replace all children of the node at the specified location instead of the node itself. Options for removing nodes before the replacement. ### `reset` Reset the editor state including history, selection and children. `replaceNodes` options. When true, only reset the children without clearing history/operations. ### `setNodes` Set properties on nodes. Properties to set. Use `undefined` to unset. When true, only apply to text nodes in non-void or markable void nodes. ### `splitNodes` Split nodes at a location. ### `toggleBlock` Toggle the block type at a location. The block type to toggle. Options to pass to `setNodes`. The default block type when untoggling. Defaults to paragraph. Options for determining if the block is active. If true, toggles wrapping with `type`. Otherwise, sets the block type directly. ### `unsetNodes` Remove properties from nodes. Property key(s) to remove. ### `unwrapNodes` Unwrap a node at a location. If necessary, the parent node is split. ### `wrapNodes` Wrap nodes at a location in the `element` container. The wrapper element. When true, wrap all children into a single container element. ## Text Operations ### `delete` Delete text at a location. Number of characters (or other unit) to delete. Default is 1. If true, delete backward. Unit to delete by. ### `deleteBackward` Delete text backward. Defaults to `'character'`. ### `deleteForward` Delete text forward. Defaults to `'character'`. ### `deleteFragment` Delete a fragment of nodes. Direction to delete. ### `insertText` Insert text at a location, optionally with marks. The behavior depends on the provided options: 1. If `at` is specified in options, inserts at that location regardless of selection 2. Otherwise, if there's a selection: - If `marks` is true (default) and editor has marks, inserts text with those marks - If no marks, inserts plain text 3. If neither `at` nor selection exists, no text is inserted Text to insert. Location to insert text at. Takes precedence over current selection. Whether to allow insertion in void nodes. - **Default:** `true` When true and editor has marks, the inserted text will include those marks. When false, inserts plain text without marks. ### `insertBreak` Insert a block break at the current selection. ### `insertSoftBreak` Insert a soft break at the current selection. A soft break is a new line in the current block. ### `deselect` Unset the selection. ### `move` Move the selection's point forward or backward. How many units to move. Defaults to 1. Defaults to `'character'`. Move backward if true. Which edge to move. ## Mark Operations ### `addMark` Add a custom property to the leaf text nodes within non-void nodes or void nodes that `editor.markableVoid()` allows in the current selection. If the selection is currently collapsed, the marks will be added to the `editor.marks` property instead, and applied when text is inserted next. Mark key to add. Value for the mark. ### `addMarks` Add multiple marks to the current selection. ```ts editor.tf.addMarks({ bold: true, italic: true }) editor.tf.addMarks({ bold: subscript }, { remove: 'superscript' }) editor.tf.addMarks({ bold: true }, { remove: ['italic', 'underline'] }) ``` Key-value pairs of mark props. Mark keys to remove first. For mutually exclusive marks, e.g. subscript/superscript. ### `removeMark` Remove a mark from text in the selection. Mark key to remove. ### `removeMarks` Remove marks from text nodes in the current selection or from `editor.marks`. The behavior depends on the selection state and options: 1. If selection is expanded or is in a markable void node: - Remove specified mark keys from text nodes 2. If selection is collapsed and no custom range provided: - Remove specified keys from `editor.marks` - If no keys specified, clear all marks from `editor.marks` 3. If custom range provided (`at` option): - Only remove marks from text nodes in that range ```ts editor.tf.removeMarks() // remove all marks editor.tf.removeMarks('bold') // remove the 'bold' mark editor.tf.removeMarks(['bold','italic']) editor.tf.removeMarks('bold', { at: range }) ``` Mark key(s) to remove. If not provided and selection is collapsed, clears all marks from `editor.marks`. Custom range to remove marks from. Takes precedence over current selection. - **Default:** `true` Whether to trigger onChange when modifying editor.marks. Whether to split nodes when removing marks. Custom function to filter which nodes to remove marks from. Whether to allow removing marks from void nodes. ### `toggleMark` Toggle a mark on or off in the current selection. If the mark exists, removes it. If it doesn't exist: 1. Removes any specified marks in the `remove` option 2. Adds the mark with value `true` ```ts editor.tf.toggleMark('bold') // Toggle bold on/off editor.tf.toggleMark('subscript', { remove: 'superscript'}) // Remove superscript before adding subscript ``` The mark key to toggle. Mark key(s) to remove before adding the mark. Useful for mutually exclusive marks like subscript/superscript. The specified mark key is always removed in addition to these marks. ## Selection ### `collapse` Collapse the selection to a point. Edge to collapse to. Defaults to `'anchor'`. ### `deselect` Unset the current selection. ### `move` Move the selection's point. Defaults to 1. Defaults to `'character'`. If true, move backward. Which edge to move. ### `select` Set the selection to a new value specified by `at`. When a selection already exists, this method just calls `setSelection`. ```ts editor.tf.select(at) editor.tf.select(at, { edge: 'end' }) editor.tf.select(at, { edge: 'start' }) ``` Location to select. Select the start or end edge above `at`. Focus the editor before selecting. Select the start of the next sibling. Select the end of the previous sibling. ### `setPoint` Set new properties on one of the selection's points. Point properties to update. Which edge of the selection to set. ### `setSelection` Set new properties on an active selection. Since the value is a `Partial`, this method can only handle updates to an existing selection. If there is no active selection the operation will be void. Use `select` if you'd like to create a selection when there is none. A partial range to update existing selection properties. ## DOM Operations ### `blur` Blur the editor. ### `deselectDOM` Deselect the editor's DOM selection in addition to `deselect`. ### `focus` Focus the editor. ```ts editor.tf.focus() editor.tf.focus({ edge: 'end' }) editor.tf.focus({ edge: 'endEditor' }) ``` Select this location before focusing. Focus at the edge of the location or the editor. Number of attempts to refocus. ### `insertData` Insert data from a `DataTransfer` into the editor. Calls: 1. `insertFragmentData(editor: ReactEditor, data: DataTransfer)` 2. `insertTextData(editor: ReactEditor, data: DataTransfer)` Data to insert from clipboard or drag event. ### `insertFragmentData` Insert fragment data from a `DataTransfer` into the editor. Data to parse as fragment. ### `insertTextData` Insert text data from a `DataTransfer` into the editor. Text data to insert. ### `setFragmentData` Sets data from the currently selected fragment on a `DataTransfer`. DataTransfer to store the fragment. ## History Operations ### `redo` Redo to the next saved state. ### `undo` Undo to the previous saved state. ### `setSplittingOnce` Whether the next operation should split into a new batch in history. ### `withMerging` Apply a series of changes inside a synchronous `fn`, These operations will be merged into the previous history. Batched changes to merge into the previous history point. ### `withNewBatch` Apply a series of changes inside a synchronous `fn`, ensuring that the first operation starts a new batch in the history. Subsequent operations will be merged as usual. Batched changes in a new history point. ### `withoutMerging` Apply a series of changes inside a synchronous `fn`, without merging any of the new operations into previous save point in the history. Changes not merged into any existing history point. ### `withoutSaving` Apply a series of changes inside a synchronous `fn`, without saving any of their operations into the history. Changes not saved into history at all. ## Core Operations ### `apply` Apply an operation in the editor. Operation to apply. ### `normalizeNode` Normalize a node according to the editor's schema. The node entry to normalize. The triggering operation. ### `normalize` Normalize dirty nodes in the editor. When true, forcibly re-normalize all nodes. ### `withoutNormalizing` Call a function, deferring normalization until after it completes. A synchronous function to execute without normalization in between operations. True if normalization was performed afterwards. ## Keyboard Shortcuts ### `moveLine` Handle `ArrowUp` and `ArrowDown` keyboard events. - `reverse: true` for `ArrowUp` - `reverse: false` for `ArrowDown` Return `true` to prevent default browser behavior, `false` to allow it. **Default behavior:** Returns `false` (allows Plate's default line movement). **Usage:** ```ts const plugin = createPlatePlugin({ key: 'myPlugin', }).overrideEditor(() => ({ transforms: { moveLine: ({ reverse }) => { // Custom line movement logic if (reverse) { // Handle ArrowUp } else { // Handle ArrowDown } return true; // Prevent default }, }, })); ``` ### `tab` Handle `Tab` and `Shift+Tab` keyboard events. - `reverse: false` for `Tab` - `reverse: true` for `Shift+Tab` Return `true` to prevent default browser behavior, `false` to allow it. **Default behavior:** Returns `false` (allows default browser tab navigation). **Usage:** ```ts const plugin = createPlatePlugin({ key: 'myPlugin', }).overrideEditor(() => ({ transforms: { tab: ({ reverse }) => { if (reverse) { // Handle Shift+Tab (usually outdent) editor.tf.outdent(); } else { // Handle Tab (usually indent) editor.tf.indent(); } return true; // Prevent default }, }, })); ``` ### `selectAll` Handle `Cmd+A` / `Ctrl+A` keyboard events. Return `true` to prevent default browser behavior, `false` to allow it. **Default behavior:** Returns `false` (allows default browser select all). **Usage:** ```ts const plugin = createPlatePlugin({ key: 'myPlugin', }).overrideEditor(() => ({ transforms: { selectAll: () => { // Custom select all logic const blockEntry = editor.api.block(); if (blockEntry) { editor.tf.select(blockEntry[1]); return true; // Prevent default } return false; // Allow default }, }, })); ``` ### `escape` Handle `Escape` keyboard events. Return `true` to prevent default browser behavior, `false` to allow it. **Default behavior:** Returns `false` (allows default browser escape handling). **Usage:** ```ts const plugin = createPlatePlugin({ key: 'myPlugin', }).overrideEditor(() => ({ transforms: { escape: () => { // Custom escape logic (e.g., exit special mode) if (editor.api.inSpecialMode()) { editor.tf.exitSpecialMode(); return true; // Prevent default } return false; // Allow default }, }, })); ``` 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://platejs.org/r/api-slate-editor-transforms-docs.json","proxyUrl":"https://shadcnregistry.com/r/plate/api-slate-editor-transforms-docs","itemId":"@plate/api-slate-editor-transforms-docs"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"../../content/docs/api/slate/editor-transforms.mdx","content":"$51","type":"registry:file","target":"content/docs/plate/api/slate/editor-transforms.mdx"}]}]]}],"$L52"]}]

Editor Transforms

Installation

Files

content

Styles