Excalidraw

Create drawings and diagrams as block nodes.

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

import React from 'react';

import { Plate } from '@udecode/plate-common/react';
import { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { excalidrawValue } from '@/components/values/excalidraw-value';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';
import { ExcalidrawElement } from '@/components/plate-ui/excalidraw-element';

export default function ExcalidrawDemo() {
  const editor = useCreateEditor({
    components: {
      [ExcalidrawPlugin.key]: ExcalidrawElement,
    },
    plugins: [...editorPlugins, ExcalidrawPlugin],
    value: excalidrawValue,
  });

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

Features

  • Integrates Excalidraw library for creation of drawings and diagrams.

Installation

npm install @udecode/plate-excalidraw

Usage

import { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';
import { SelectOnBackspace } from '@udecode/plate-select';
 
const plugins = [
  // ...otherPlugins
  ExcalidrawPlugin,
  SelectOnBackspace.configure({
    options: { query: { allow: [ExcalidrawPlugin.key] } },
  }),
];

Plugins

ExcalidrawPlugin

Adds Excalidraw functionality to the editor.

API

insertExcalidraw

Inserts an Excalidraw element into the editor.

Parameters

Collapse all

    The editor instance.

    The props 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.

EquationExit Break