Docs
Excalidraw

Excalidraw

Create drawings and diagrams as block nodes.

Excalidraw

Unleash your creativity with the Excalidraw plugin, which enables you to embed and draw diagrams directly within your editor.



Features

  • Integrates Excalidraw library for creation of drawings and diagrams.

Installation

npm install @udecode/plate-excalidraw

Usage

import {
  createExcalidrawPlugin,
  ELEMENT_EXCALIDRAW,
  ExcalidrawElement,
} from '@udecode/plate-excalidraw';
import { createSelectOnBackspacePlugin } from '@udecode/plate-select';
 
const plugins = [
  // ...otherPlugins
  createExcalidrawPlugin(),
  createSelectOnBackspacePlugin({
    options: { query: { allow: [ELEMENT_EXCALIDRAW] } },
  }),
];

API

createExcalidrawPlugin

insertExcalidraw

Inserts an Excalidraw element into the editor.

Parameters

Collapse all

    The editor instance.

    The props and key for the Excalidraw element.

    The options for inserting the Excalidraw element.

API Components

useExcalidrawElement

A behavior hook for the Excalidraw component.

State

Collapse all

    The Excalidraw element.

    The library items to be displayed in the Excalidraw component.

    • Default: []

    Determines whether to scroll to the content inside the Excalidraw component.

    • Default: true

Returns

Collapse all

    The Excalidraw component.

    The props to be passed to the Excalidraw component.

EmojiExit Break