Check if the user is currently composing inside the editor.
Check if the editor is focused.
Check if the editor is in read-only mode.
Check if the user is currently composing inside the editor from the DOM bridge.
Check if the DOM editor is focused.
Check if the DOM editor is in read-only mode.
Blur the editor.
Focus the editor.
Clear the native DOM selection and the editor selection.
Call listener with the text each mounted editable types: an insertText
input or IME composition commit whose one change is an insertion ending at a
collapsed caret. typed.editable is the editable root element that received
the input, typed.range the inserted text in the model, ending at the caret,
and typed.text that text. Returns the unsubscribe function.
Paste, drop, yank, replacement text, history replay, remote edits and typing
over a selection report nothing, and so does a commit whose document an
earlier commit listener changes before the report. Android keyboards that paste through
insertText report the pasted text. When an Android keyboard sends typed and
pasted text for the same text node before one input event, that input reports
nothing.
Return the mounted editor root element.
Return the mounted editable element for a document root.
Return the element used as the editor scroll container. It falls back to the editor root when no custom scroll element is registered.
Find a key for an editor node.
Resolve the current path of an editor node. Returns null when the node is not
mounted in the current editor value.
Assert the current path of an editor node.
Check if a DOM node is within the editor.
Check if the target is editable and in the editor.
Check if the target can be selected by the editor.
Check if the target is in the editor.
Assert the native DOM element for an editor node.
Resolve the native DOM element for an editor node or its live NodeKey. Returns
null when the node is not mounted or the key is removed or belongs to another
editor.
Assert a native DOM selection point from an editor point.
Resolve a native DOM selection point from an editor point. Returns null when the
editor point is not currently mappable.
Assert a native DOM range from an editor range.
Resolve a native DOM range from an editor range. Returns null when the editor
range is not currently mappable.
Resolve the bounding rect for an editor range. Returns null when the range is
not currently mappable to mounted DOM.
Read the DOM text from from to the native caret, including IME preedit text
the editor has not received yet. Non-editable, retained and nested-editor DOM
is left out. Returns null when the editor root or from is not mounted, when
from is in another root, or when the caret is outside this editor or before
from.
editor.api.dom.resolveVisualPoint(point: Point, options: { affinity?: SelectionAssociation; direction: 'left' | 'right'; unit: 'character' | 'word' }): DOMVisualPoint | nullResolve one physical horizontal caret step through the mounted browser layout.
The result carries both the next model point and its affinity. Returns null
when the point is not mounted or the browser cannot resolve the step.
editor.api.dom.scrollIntoView(target: Path | Point | Range | DOMRange, options?: ScrollIntoViewOptions): () => voidSchedule scrolling to an editor path, point, range, or native DOM range in the mounted view. Range targets use their bounding rectangle, so caret scrolling follows the actual position inside a text leaf. The returned function cancels pending work for this request; return it from an effect to cancel scrolling when its target changes or the component unmounts.
Assert the target range from a DOM event.
Resolve the target range from a DOM event. Returns null when the event target
cannot be mapped into the editor.
Assert an editor node from a native DOM node.
Resolve an editor node from a native DOM node. Returns null when the DOM node is
not owned by the editor.
editor.api.dom.assertPoint(domPoint: DOMPoint, options: { exactMatch: boolean; searchDirection?: 'backward' | 'forward' }): PointAssert an editor point from a DOM point.
editor.api.dom.resolvePoint(domPoint: DOMPoint, options: { exactMatch: boolean; searchDirection?: 'backward' | 'forward' }): Point | nullResolve an editor point from a DOM point. Returns null when the DOM point is not
currently mappable.
editor.api.dom.assertRange(domRange: DOMRange | DOMStaticRange | DOMSelection, options: { exactMatch: boolean }): RangeAssert an editor range from a DOM range or selection.
editor.api.dom.resolveRange(domRange: DOMRange | DOMStaticRange | DOMSelection, options: { exactMatch: boolean }): Range | nullResolve an editor range from a DOM range or selection. Returns null when the DOM
range is not currently mappable.
Return the document or shadow root that owns the editor.
Return the window that owns the editor.
Check whether an editor range can currently be mapped to DOM.
Check whether a DOM event target is inside a non-read-only void element.
Native block dragging for drag handles and custom drivers. A block drag moves
inside one document and copies between editors; every drop runs
editor.api.transfer.
editor.api.dom.drag.start(event: DragEvent, options: { node: Element }): { origin: { x: number; y: number }; previews: HTMLElement[] } | nullStart a block drag from a handle's dragstart. It selects the blocks
editor.read.transfer.nodes({ node }) returns, such as the selected blocks
around node or a list item's family, marks their hosts with data-editor-dragging, and returns inert previews plus
the pointer's offset for event.dataTransfer.setDragImage. A read-only view
starts a copy-only drag. Returns null when nothing can be dragged.
Publish this view's drop indicator for a target from resolveDropTarget, or
clear it. useDropIndicator reads it.
editor.api.dom.resolveDropTarget(input: { clientX: number; clientY: number; target?: EventTarget | null; dataTransfer?: DataTransfer | null }, options?: { copy?: boolean; files?: Element; from?: Editor; nodes?: NodeKey[]; range?: Range }): { key: NodeKey; edge: 'after' | 'before'; axis: 'x' | 'y' } | { key: NodeKey; side: 'end' | 'start' } | { point: Point } | nullResolve where a drop under a pointer lands: an edge the schema, the landing
redirects and the vetoes admit, or a text point for a text drag. Within 8px of a
container's top or bottom edge, clamped to a quarter of its height, the drop lands
beside that container when that edge is admitted; otherwise
it lands beside the block under the pointer, or beside an outer block when the
schema or a veto refuses that edge. An edge inside the dragged blocks, or one
that would not move them, drops nothing. A move whose pointer is over or beside
its own blocks also drops nothing, even within a container's band. Edges inside
collapsed content are refused. Without options it reads the active drag session.
Pass files with the block that dropped files become to place an upload. The
drop checks one such block per file the browser exposes, and one block when the
browser hides them during the drag.
When a feature builds side landings, such as the Column plugin, a move inside
the editor whose pointer rests in the inline-end strip of the innermost block
resolves to { key, side: 'end' }. The strip is the outer 24px of the block's
box, at most a quarter of its width, in the middle half of its height; a
container's band wins where they overlap. A copy, a file drop or a drag from
another editor never resolves to a side. Pass the target to
editor.api.transfer.move as to, or narrow with 'edge' in target.
Insert data from a DataTransfer into the editor. Returns true when Plate or
a plugin inserts content. The DOM adapter dispatches domCommands.insertData;
typed plugin command interceptors can claim the payload, transform it, or return
next() to continue. The accepted command spec commits through one transaction.
The default command path reads the editor fragment format, then configured DataTransfer formats, then plain text.
Insert editor fragment data from a DataTransfer. Returns true when fragment
content was inserted.
Insert plain text data from a DataTransfer. Returns true when text content
was inserted.
editor.api.dom.clipboard.readSlice(data: Pick<DataTransfer, 'getData' | 'types'>): ClipboardSliceReadRead one exact editor slice. The result distinguishes absent data, invalid MIME
or HTML data, and a valid ContentSlice.
Write the current selection to a DataTransfer.
editor.api.dom.clipboard.writeSlice(data: Pick<DataTransfer, 'getData' | 'setData'>, payload: ClipboardSliceWrite): voidWrite one exact ContentSlice plus optional browser MIME representations.
Plate writes plain text, HTML, and an internal editor fragment payload. The
fragment payload uses application/${clipboardFormatKey} and the HTML fallback
is tagged with the same key, so differently configured editors do not blindly
import each other's internal JSON.
Use Clipboard for copy, paste, drop, DataTransfer format
ordering, and fitted slice replacement.
resolve* methods return null when a model position has no current mounted DOM
representation. The corresponding assert* methods throw DOMResolutionError.
Import the error from platejs/dom when a boundary needs to handle it.
The document can contain hidden, external, or virtualized content. Configure content boundaries, external text, or virtualization on their owning components. A successful model lookup does not prove that its DOM is mounted.
platejs/dom exports isHotkey for platform-aware keyboard matching and
domCommands, dataTransferFormats, and writeDataTransferFragment for
browser transfer integration. Semantic HTML,
Markdown, and plain-text node mappings belong in the owning plugin's
formats declaration.
Its public types describe DOM primitives (DOMNode, DOMElement, DOMText,
DOMPoint, DOMRange, DOMStaticRange, DOMSelection), mounted editor services
(DOMApi, DOMClipboardApi), clipboard slices, DataTransfer formats,
keyboard matching, visual caret movement, and scrolling.
See Selection for the interaction between model selection and the browser, and Editor Components for mounting the view.