Excalidraw

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

import React from 'react';

import { Plate } from '@udecode/plate/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

Parameters

Collapse all

    The editor instance.

    Props for the Excalidraw element.

    Options for inserting the Excalidraw element.

Hooks

useExcalidrawElement

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.