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

    Props for the Excalidraw element.

    Options for inserting the Excalidraw element.

Hooks

useExcalidrawElement

A behavior hook for the Excalidraw component.

State

    The Excalidraw element.

    Library items to display in the Excalidraw component.

    • Default: []

    Whether to scroll to content inside the Excalidraw component.

    • Default: true

Returnsobject

    The Excalidraw component.

    Props to pass to the Excalidraw component.