@haklex/rich-ext-excalidraw

Excalidraw whiteboard integration for the Haklex rich editor.

Installation

pnpm add @haklex/rich-ext-excalidraw

Peer Dependencies

| Package | Version | | ---------------- | --------- | | @lexical/react | ^0.45.0 | | lexical | ^0.45.0 | | lucide-react | ^1.0.0 | | react | >= 19 | | react-dom | >= 19 |

Usage

Register nodes in your editor config

import { ExcalidrawEditNode } from '@haklex/rich-ext-excalidraw';

const editorConfig = {
  nodes: [ExcalidrawEditNode],
};

For static/read-only rendering:

import { ExcalidrawNode } from '@haklex/rich-ext-excalidraw/static';

const staticConfig = {
  nodes: [ExcalidrawNode],
};

Use the Excalidraw plugin

import { ExcalidrawPlugin } from '@haklex/rich-ext-excalidraw';

function EditorPlugins() {
  return <ExcalidrawPlugin />;
}

Insert an Excalidraw block programmatically

import { INSERT_EXCALIDRAW_COMMAND } from '@haklex/rich-ext-excalidraw';

editor.dispatchCommand(INSERT_EXCALIDRAW_COMMAND, undefined);

Configure Excalidraw behavior

import { ExcalidrawConfigProvider } from '@haklex/rich-ext-excalidraw';
import type { ExcalidrawConfig } from '@haklex/rich-ext-excalidraw';

const config: ExcalidrawConfig = {
  // your Excalidraw configuration
};

function App() {
  return (
    <ExcalidrawConfigProvider value={config}>
      <Editor />
    </ExcalidrawConfigProvider>
  );
}

Use renderers

import { ExcalidrawEditRenderer } from '@haklex/rich-ext-excalidraw';
import {
  ExcalidrawDisplayRenderer,
  ExcalidrawSSRRenderer,
} from '@haklex/rich-ext-excalidraw/static';

Snapshot utilities

import { parseSnapshot, serializeSnapshot } from '@haklex/rich-ext-excalidraw';

Import styles

import '@haklex/rich-ext-excalidraw/style.css';

Exports

Nodes

• ExcalidrawNode -- static (read-only) node
• ExcalidrawEditNode -- edit node with full Excalidraw editor
• $createExcalidrawNode() / $isExcalidrawNode() -- Lexical helpers

Renderers

• ExcalidrawDisplayRenderer -- static display renderer
• ExcalidrawEditRenderer -- interactive edit renderer
• ExcalidrawSSRRenderer -- server-side rendering renderer

Plugin

• ExcalidrawPlugin -- editor plugin for Excalidraw block insertion
• INSERT_EXCALIDRAW_COMMAND -- Lexical command for programmatic insertion

Context

• ExcalidrawConfigProvider -- context provider for Excalidraw configuration
• useExcalidrawConfig -- hook to access Excalidraw config context

Utilities

• parseSnapshot -- deserialize an Excalidraw snapshot
• serializeSnapshot -- serialize an Excalidraw snapshot

Types

• ExcalidrawConfig -- configuration type
• ExcalidrawSnapshot -- snapshot data type

Sub-path Exports

| Path | Description | | --------------------------------------- | --------------------------------------- | | @haklex/rich-ext-excalidraw | Full exports (edit + static) | | @haklex/rich-ext-excalidraw/static | Static-only (no Excalidraw editor deps) | | @haklex/rich-ext-excalidraw/style.css | Stylesheet |

Part of Haklex

This package is part of the Haklex rich editor ecosystem.

License

MIT