Skip to main content

@lexical/clipboard

Interfaces​

GetClipboardDataConfig​

Defined in: packages/lexical-clipboard/src/clipboard.ts:843

Configuration for GetClipboardDataExtension.

Properties​

$exportMimeType​

$exportMimeType: ExportMimeTypeConfig

Defined in: packages/lexical-clipboard/src/clipboard.ts:850

The per-MIME-type serializer stacks used when copying or dragging the current selection out of the editor. See ExportMimeTypeConfig.

Merged with [...prev, ...override]

LexicalClipboardData​

Defined in: packages/lexical-clipboard/src/clipboard.ts:55

Indexable​

[mimeType: string & object]: string | undefined

Properties​

application/x-lexical-editor?​

optional application/x-lexical-editor?: string

Defined in: packages/lexical-clipboard/src/clipboard.ts:57

text/html?​

optional text/html?: string

Defined in: packages/lexical-clipboard/src/clipboard.ts:56

text/plain​

text/plain: string

Defined in: packages/lexical-clipboard/src/clipboard.ts:58

Type Aliases​

ExportMimeTypeConfig​

ExportMimeTypeConfig = { [K in keyof LexicalClipboardData]?: ExportMimeTypeFunction[] }

Defined in: packages/lexical-clipboard/src/clipboard.ts:869

A mapping from MIME type to a stack of ExportMimeTypeFunction.

Each entry is an ordered array; the function at the highest index runs first and may call next() to fall through to the function below it. The default config provides a single fallback handler for 'application/x-lexical-editor', 'text/html', and 'text/plain'.

When GetClipboardDataExtension merges a partial config, new functions are appended to the existing array for each MIME type, so later-registered handlers run before earlier ones (including the defaults) and may delegate to them via next(). To register a brand new MIME type, supply a key not present in the default config; arbitrary string keys are accepted in addition to the keys of LexicalClipboardData.

ExportMimeTypeFunction​

ExportMimeTypeFunction = (selection, next) => null | string

Defined in: packages/lexical-clipboard/src/clipboard.ts:835

A function that produces the serialized representation of a selection for a single MIME type. Functions are arranged in a stack per MIME type (see ExportMimeTypeConfig); the function at the top of the stack is invoked first and may call next() to delegate to the previous function in the stack (typically the default Lexical serializer).

Returning null from the top-most function omits that MIME type from the resulting LexicalClipboardData.

Parameters​

selection​

null | BaseSelection

The selection to serialize, or null if there is none.

next​

() => null | string

Calls the previous handler in the stack and returns its result, or null if there is no previous handler.

Returns​

null | string

The serialized string for this MIME type, or null to omit it.

Variables​

GetClipboardDataExtension​

const GetClipboardDataExtension: LexicalExtension<GetClipboardDataConfig, "@lexical/clipboard/GetClipboardData", ExportMimeTypeConfig, unknown>

Defined in: packages/lexical-clipboard/src/clipboard.ts:997

Lexical extension that controls how the current selection is serialized into clipboard MIME types when copying or dragging out of the editor.

The extension's config holds an ExportMimeTypeConfig — a stack of ExportMimeTypeFunction per MIME type. Out of the box it provides fallback serializers for 'application/x-lexical-editor', 'text/html', and 'text/plain' that defer to $getLexicalContent, $getHtmlContent, and selection.getTextContent() respectively.

Apps can layer additional handlers on top to customize an existing payload (delegating to the default via next()) or to register an entirely new MIME type. Functions provided through mergeConfig are appended to the existing stack for each MIME type, so a newly registered handler runs first and may fall through to the previously registered handlers via its next argument.

The extension's output is the resolved ExportMimeTypeConfig, which $getClipboardDataFromSelection and $exportMimeTypeFromSelection read via the editor's peer dependency lookup.

Example​

import {configExtension, defineExtension} from '@lexical/extension';
import {GetClipboardDataExtension} from '@lexical/clipboard';

const MyClipboardExtension = defineExtension({
  name: 'my-app/clipboard',
  dependencies: [
    configExtension(GetClipboardDataExtension, {
      $exportMimeType: {
        // Wrap the default HTML output with an app-specific marker.
        'text/html': [
          (selection, next) => {
            const html = next();
            return html ? wrapWithMyAppMarker(html) : html;
          },
        ],
        // Add a brand-new MIME type.
        'application/vnd.myapp+json': [
          (selection) =>
            selection ? exportMyAppFormat(selection) : null,
        ],
      },
    }),
  ],
});

Functions​

$exportMimeTypeFromSelection()​

$exportMimeTypeFromSelection(mimeType, selection?): string | null

Defined in: packages/lexical-clipboard/src/clipboard.ts:937

Serialize the given selection for a single MIME type using the active editor's configured ExportMimeTypeConfig. The configured stack is read from GetClipboardDataExtension via the editor's peer dependency lookup; if the extension was not built into the editor, the default stack is used.

Useful when only one MIME representation is needed rather than the full LexicalClipboardData produced by $getClipboardDataFromSelection.

Must be called from within an editor update or read.

Parameters​

mimeType​

keyof LexicalClipboardData

The MIME type to serialize, e.g. 'text/html', 'application/x-lexical-editor', 'text/plain', or any custom key registered in the ExportMimeTypeConfig.

selection?​

BaseSelection | null

The selection to serialize (defaults to $getSelection()).

Returns​

string | null

The serialized string for the requested MIME type, or null if no handler is registered for it or every handler returned null.

$generateJSONFromSelectedNodes()​

$generateJSONFromSelectedNodes<SerializedNode>(editor, selection): object

Defined in: packages/lexical-clipboard/src/clipboard.ts:618

Gets the Lexical JSON of the nodes inside the provided Selection.

Type Parameters​

SerializedNode​

SerializedNode extends BaseSerializedNode

Parameters​

editor​

LexicalEditor

LexicalEditor to get the JSON content from.

selection​

BaseSelection | null

Selection to get the JSON content from.

Returns​

object

an object with the editor namespace and a list of serializable nodes as JavaScript objects.

namespace​

namespace: string

nodes​

nodes: SerializedNode[]

$generateNodesFromSerializedNodes()​

$generateNodesFromSerializedNodes(serializedNodes): LexicalNode[]

Defined in: packages/lexical-clipboard/src/clipboard.ts:648

This method takes an array of objects conforming to the BaseSerializedNode interface and returns an Array containing instances of the corresponding LexicalNode classes registered on the editor. Normally, you'd get an Array of BaseSerialized nodes from $generateJSONFromSelectedNodes

Parameters​

serializedNodes​

BaseSerializedNode[]

an Array of objects conforming to the BaseSerializedNode interface.

Returns​

LexicalNode[]

an Array of Lexical Node objects.

$getClipboardDataFromSelection()​

$getClipboardDataFromSelection(selection?): LexicalClipboardData

Defined in: packages/lexical-clipboard/src/clipboard.ts:787

Serialize the content of the current selection to strings in text/plain, text/html, and application/x-lexical-editor (Lexical JSON) formats (as available).

Parameters​

selection?​

BaseSelection | null

the selection to serialize (defaults to $getSelection())

Returns​

LexicalClipboardData

LexicalClipboardData

$getHtmlContent()​

$getHtmlContent(editor, selection?): string

Defined in: packages/lexical-clipboard/src/clipboard.ts:72

Returns the currently selected Lexical content as an HTML string, relying on the logic defined in the exportDOM methods on the LexicalNode classes. Note that this will not return the HTML content of the entire editor (unless all the content is included in the current selection).

Parameters​

editor​

LexicalEditor

LexicalEditor instance to get HTML content from

selection?​

BaseSelection | null

The selection to use (default is $getSelection())

Returns​

string

a string of HTML content

$getLexicalContent()​

$getLexicalContent(editor, selection?): string | null

Defined in: packages/lexical-clipboard/src/clipboard.ts:101

Returns the currently selected Lexical content as a JSON string, relying on the logic defined in the exportJSON methods on the LexicalNode classes. Note that this will not return the JSON content of the entire editor (unless all the content is included in the current selection).

Parameters​

editor​

LexicalEditor

LexicalEditor instance to get the JSON content from

selection?​

BaseSelection | null

The selection to use (default is $getSelection())

Returns​

string | null

$handlePlainTextDrop()​

$handlePlainTextDrop(event, editor): boolean

Defined in: packages/lexical-clipboard/src/clipboard.ts:437

Drop handler for plain-text editors. Same semantics as $handleRichTextDrop but inserts via $insertDataTransferForPlainText.

Parameters​

event​

DragEvent

editor​

LexicalEditor

Returns​

boolean

$handleRichTextDrop()​

$handleRichTextDrop(event, editor): boolean

Defined in: packages/lexical-clipboard/src/clipboard.ts:425

Drop handler for rich-text editors. Inserts the DataTransfer payload via $insertDataTransferForRichText at the drop caret and, when the drag originated from a Lexical editor (marked via $writeDragSourceToDataTransfer on DRAGSTART), removes the source range — producing cut-and-paste semantics whether the drop is in the same editor or a different one on the same page.

Parameters​

event​

DragEvent

editor​

LexicalEditor

Returns​

boolean

$insertDataTransferForPlainText()​

$insertDataTransferForPlainText(dataTransfer, selection): void

Defined in: packages/lexical-clipboard/src/clipboard.ts:128

Attempts to insert content of the mime-types text/plain or text/uri-list from the provided DataTransfer object into the editor at the provided selection. text/uri-list is only used if text/plain is not also provided.

Parameters​

dataTransfer​

DataTransfer

an object conforming to the [DataTransfer interface] (https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface)

selection​

BaseSelection

the selection to use as the insertion point for the content in the DataTransfer object

Returns​

void

$insertDataTransferForRichText()​

$insertDataTransferForRichText(dataTransfer, selection, editor): void

Defined in: packages/lexical-clipboard/src/clipboard.ts:149

Attempts to insert content of the mime-types application/x-lexical-editor, text/html, text/plain, or text/uri-list (in descending order of priority) from the provided DataTransfer object into the editor at the provided selection.

Parameters​

dataTransfer​

DataTransfer

an object conforming to the [DataTransfer interface] (https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface)

selection​

BaseSelection

the selection to use as the insertion point for the content in the DataTransfer object

editor​

LexicalEditor

the LexicalEditor the content is being inserted into.

Returns​

void

$insertGeneratedNodes()​

$insertGeneratedNodes(editor, nodes, selection): void

Defined in: packages/lexical-clipboard/src/clipboard.ts:466

Inserts Lexical nodes into the editor using different strategies depending on some simple selection-based heuristics. If you're looking for a generic way to to insert nodes into the editor at a specific selection point, you probably want lexical.$insertNodes

Parameters​

editor​

LexicalEditor

LexicalEditor instance to insert the nodes into.

nodes​

LexicalNode[]

The nodes to insert.

selection​

BaseSelection

The selection to insert the nodes into.

Returns​

void

$writeDragSourceToDataTransfer()​

$writeDragSourceToDataTransfer(dataTransfer, editor): void

Defined in: packages/lexical-clipboard/src/clipboard.ts:242

Populate dataTransfer with a marker identifying the current editor as a drag source. Pair this with $handleRichTextDrop or $handlePlainTextDrop on the drop side to get cut-and-paste semantics for drags that end in a different editor.

Only the source editor's key needs to round-trip — the source's RangeSelection itself is preserved on the source editor between drag start and drop (Lexical suppresses selectionchange during drag), so the drop handler reads it directly via $getSelection() on the resolved source editor.

Callers typically invoke this from a DRAGSTART_COMMAND handler alongside setLexicalClipboardDataTransfer (so that the dragged content itself round-trips with full node fidelity).

Parameters​

dataTransfer​

DataTransfer

editor​

LexicalEditor

Returns​

void

copyToClipboard()​

copyToClipboard(editor, event, data?): Promise<boolean>

Defined in: packages/lexical-clipboard/src/clipboard.ts:672

Copies the content of the current selection to the clipboard in text/plain, text/html, and application/x-lexical-editor (Lexical JSON) formats.

Parameters​

editor​

LexicalEditor

the LexicalEditor instance to copy content from

event​

ClipboardEvent | null

the native browser ClipboardEvent to add the content to.

data?​

LexicalClipboardData

Returns​

Promise<boolean>

setLexicalClipboardDataTransfer()​

setLexicalClipboardDataTransfer(clipboardData, data): void

Defined in: packages/lexical-clipboard/src/clipboard.ts:803

Call setData on the given clipboardData for each MIME type present in the given data (from $getClipboardDataFromSelection)

Parameters​

clipboardData​

DataTransfer

the event.clipboardData to populate from data

data​

LexicalClipboardData

The lexical data

Returns​

void