useClipboard()

function useClipboard(): ClipboardApi;

Copies, cuts, and pastes cells through the clipboard owned by the surrounding <Diagram clipboard>.

The returned ClipboardApi exposes the underlying ui.Clipboard instance plus graph-bound copyCells, cutCells, pasteCells, and pasteCellsAtPoint helpers that resolve cells (instances, records, ids, or an mvc.Collection) against the diagram graph for you. Like useGraphHistory, the clipboard model lives on the <Diagram>, so this hook throws when the feature was not enabled.

Returns

The ClipboardApi; always present when <Diagram clipboard> is enabled.

clearClipboard

readonly clearClipboard: (options?) => void;

Empties the clipboard, discarding any copied cells.

Parameters

Parameter	Type
options?	BaseOptions

Returns

void

---

clipboard

readonly clipboard: Clipboard;

The underlying ui.Clipboard instance.

---

copyCells

readonly copyCells: (selection, options?) => Cell<Attributes<Selectors>, ModelSetOptions>[];

Copies the given cells, together with any links between them, into the clipboard. Accepts cells, records, ids, or an mvc.Collection, and returns the copied cells.

Parameters

Parameter	Type
selection	CopyInput
options?	BaseOptions

Returns

Cell<Attributes<Selectors>, ModelSetOptions>[]

---

cutCells

readonly cutCells: (selection, options?) => Cell<Attributes<Selectors>, ModelSetOptions>[];

Copies the given cells into the clipboard and removes them, with their links, from the graph. Accepts cells, records, ids, or an mvc.Collection, and returns the cells that were cut.

Parameters

Parameter	Type
selection	CopyInput
options?	CutElementsOptions

Returns

Cell<Attributes<Selectors>, ModelSetOptions>[]

---

isClipboardEmpty

readonly isClipboardEmpty: (options?) => boolean;

Returns true when the clipboard holds no cells.

Parameters

Parameter	Type
options?	BaseOptions

Returns

boolean

---

pasteCells

readonly pasteCells: (options?) => Cell<Attributes<Selectors>, ModelSetOptions>[];

Pastes the clipboard contents into the graph and returns the newly added cells.

Parameters

Parameter	Type
options?	PasteCellsOptions

Returns

Cell<Attributes<Selectors>, ModelSetOptions>[]

---

pasteCellsAtPoint

readonly pasteCellsAtPoint: (point, options?) => Cell<Attributes<Selectors>, ModelSetOptions>[];

Pastes the clipboard contents into the graph, positioned so a chosen point of the cells' bounding box lands at the given point - by default the box is centered on the point; pass options.origin to anchor a different bbox point. Returns the newly added cells.

Parameters

Parameter	Type
point	PlainPoint
options?	PasteCellsAtPointOptions

Returns

Cell<Attributes<Selectors>, ModelSetOptions>[]

See

Clipboard

Throws

When the surrounding <Diagram> does not enable clipboard.

Example

import { useClipboard, useSelectionCollection } from '@joint/react-plus';

// Mount inside a <Diagram clipboard> to copy and paste the current selection.
function ClipboardControls() {
  const { copyCells, pasteCells, isClipboardEmpty } = useClipboard();
  const { collection } = useSelectionCollection();
  return (
    <>
      <button onClick={() => copyCells(collection)}>Copy</button>
      <button disabled={isClipboardEmpty()} onClick={() => pasteCells()}>Paste</button>
    </>
  );
}