Excalidraw

PreviousNext
Excalidraw Element
Loading...

Features

  • Integrates Excalidraw library for creation of drawings and diagrams.

Installation

pnpm add @platejs/excalidraw

Usage

import { ExcalidrawPlugin } from '@platejs/excalidraw/react';
 
const plugins = [
  // ...otherPlugins
  ExcalidrawPlugin,
];

Insert Toolbar Button

You can add this item to the Insert Toolbar Button to insert Excalidraw elements:

{
  icon: <PenToolIcon />,
  label: 'Excalidraw',
  value: KEYS.excalidraw,
}

Plugins

ExcalidrawPlugin

Excalidraw void element plugin.

API

insertExcalidraw

Inserts an Excalidraw element into the editor.

Parameters

  • props optional NodeProps<TExcalidrawElement>

    Props for the Excalidraw element.

  • options optional InsertNodesOptions

    Options for inserting the Excalidraw element.

Hooks

useExcalidrawElement

A behavior hook for the Excalidraw component.

State

Collapse all

  • element TExcalidrawElement

    The Excalidraw element.

  • libraryItems optional LibraryItems

    Library items to display in the Excalidraw component.

    • Default: []

  • scrollToContent optional boolean

    Whether to scroll to content inside the Excalidraw component.

    • Default: true

Returnsobject

Collapse all

  • Excalidraw any

    The Excalidraw component.

  • excalidrawProps ExcalidrawProps

    Props to pass to the Excalidraw component.

Excalidraw标题