Excalidraw

Excalidraw Element
Loading...
Files
components/excalidraw-demo.tsx
'use client';

import * as React from 'react';

import { ExcalidrawPlugin } from '@platejs/excalidraw/react';
import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { excalidrawValue } from '@/registry/examples/values/excalidraw-value';
import { Editor, EditorContainer } from '@/components/ui/editor';
import { ExcalidrawElement } from '@/components/ui/excalidraw-node';

export default function ExcalidrawDemo() {
  const editor = usePlateEditor({
    plugins: [...EditorKit, ExcalidrawPlugin.withComponent(ExcalidrawElement)],
    value: excalidrawValue,
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

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

Collapse all

    Props for the Excalidraw element.

    Options for inserting the Excalidraw element.

Hooks

useExcalidrawElement

A behavior hook for the Excalidraw component.

State

Collapse all

    The Excalidraw element.

    Library items to display in the Excalidraw component.

    • Default: []

    Whether to scroll to content inside the Excalidraw component.

    • Default: true

Returnsobject

Collapse all

    The Excalidraw component.

    Props to pass to the Excalidraw component.