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>
  );
}

功能特性

  • 集成 Excalidraw 库用于创建绘图和图表。

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] } },
  }),
];

插件

ExcalidrawPlugin

为编辑器添加 Excalidraw 功能。

API

insertExcalidraw

在编辑器中插入一个 Excalidraw 元素。

Parameters

Collapse all

    编辑器实例。

    Excalidraw 元素的属性。

    插入 Excalidraw 元素的选项。

API 组件

useExcalidrawElement

Excalidraw 组件的行为 hook。

State

Collapse all

    Excalidraw 元素。

    要在 Excalidraw 组件中显示的库项目。

    • 默认值： []

    决定是否滚动到 Excalidraw 组件内的内容。

    • 默认值： true

Returns

Collapse all

    Excalidraw 组件。

    要传递给 Excalidraw 组件的属性。

EquationExit Break