Clipboard

clipboard:after:copy#

Emitted after copy content is written to the clipboard.

Type: signal.

Payload:

  • event — native copy event
  • mode — copy mode that was used: all, block, or selection

Example:

app.on('clipboard:after:copy', ({ mode }) => {
  if (mode === 'all') analytics.track('copy-document');
});

clipboard:after:cut#

Emitted after cut content is written to the clipboard and the source is removed (when allowed).

Type: signal.

Payload:

  • event — native cut event
  • mode — cut mode that was used: all, block, or selection

Example:

app.on('clipboard:after:cut', ({ mode }) => {
  if (mode === 'block') markDocumentDirty();
});

clipboard:after:paste#

Emitted after pasted content is inserted into the document.

Type: signal.

Payload:

  • nodes — array of inserted DOM nodes
  • blocks — array of mounted block instances

Example:

app.on('clipboard:after:paste', ({ blocks = [], nodes = [] }) => {
  blocks.forEach((block) => highlightNewBlock(block.getEl()));
});

clipboard:before:copy#

Hook emitted before copy content is placed on the clipboard. Set cancel: true to abort the copy.

Type: hook (handler may return a value).

Payload:

  • event — native copy event
  • mode — all (select all), block (whole block), or selection (range)
  • html — HTML string for the clipboard
  • text — plain-text string for the clipboard
  • cancel — boolean — set to true in the handler to abort

Example:

app.on('clipboard:before:copy', (payload) => {
  if (payload.html.includes('secret')) payload.cancel = true;
});

clipboard:before:cut#

Hook emitted before cut content is placed on the clipboard. Set cancel: true to abort the cut.

Type: hook (handler may return a value).

Payload:

  • event — native cut event
  • mode — all, block, or selection
  • html — HTML string for the clipboard
  • text — plain-text string for the clipboard
  • cancel — boolean — set to true in the handler to abort

Example:

app.on('clipboard:before:cut', (payload) => {
  if (payload.mode === 'all' && isReadOnly()) payload.cancel = true;
});

clipboard:before:paste#

Hook emitted after the editor receives a paste event and before PasteHandler reads clipboard data for insertion. Inspect or rewrite the payload via clipboard.getData / clipboard.setData. Set cancel: true to abort the paste.

Type: hook (handler may return a value).

Payload:

  • event — native paste event
  • clipboard — mutable clipboard view (getData, setData, files, items, types)
  • cancel — boolean — set to true in the handler to abort

clipboard.setData overrides only what the editor will paste. The native clipboard stays unchanged because browsers keep paste DataTransfer read-only.

Example:

app.on('clipboard:before:paste', (payload) => {
  const html = payload.clipboard.getData('text/html');
  const text = payload.clipboard.getData('text/plain');

  if (text.startsWith('@@')) {
    payload.cancel = true;
    return payload;
  }

  payload.clipboard.setData('text/html', html.replace(/class="lead"/g, ''));
  payload.clipboard.setData('text/plain', text.trim());
  return payload;
});

clipboard:copy#

Emitted when the editor receives a native copy event (before PasteHandler runs).

Type: signal.

Payload:

  • event — native copy event
  • scope — always 'editor' for editor clipboard events
  • inside — always true when emitted from the editor listener
  • inEditable — whether the selection or focused block is inside the editable
  • inEditor — same as inEditable for clipboard scope detection

Example:

app.on('clipboard:copy', ({ inEditable }) => {
  if (!inEditable) return;
  // selection is inside the editable — PasteHandler may handle copy next
});

clipboard:cut#

Emitted when the editor receives a native cut event (before PasteHandler runs).

Type: signal.

Payload:

  • event — native cut event
  • scope — 'editor'
  • inside — true
  • inEditable — whether the operation target is inside the editable
  • inEditor — same as inEditable

Example:

app.on('clipboard:cut', ({ event, inEditable }) => {
  if (!inEditable) event.preventDefault();
});

clipboard:paste#

Emitted when the editor receives a native paste event (before PasteHandler runs).

Type: signal.

Payload:

  • event — native paste event (use event.clipboardData for MIME data)
  • scope — 'editor'
  • inside — true
  • inEditable — whether the caret/selection is inside the editable
  • inEditor — same as inEditable

Example:

app.on('clipboard:paste', ({ event }) => {
  const text = event.clipboardData?.getData('text/plain');
  if (text?.startsWith('@@')) event.preventDefault();
});