LexKit

https://lexkit.dev/docs
Admin
LexKit is a type-safe, headless rich text editor framework powered by Meta's Lexical that enables...
Tokens:42,591
Snippets:316
Trust Score:4.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install dependencies

Source: https://lexkit.dev/docs/contributing

Install all required project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Basic ShadcnTemplate Usage

Source: https://lexkit.dev/docs/templates/shadcn

Demonstrates how to get started with the ShadcnTemplate in a React application. The `onReady` callback provides access to editor methods.

```typescript
import { ShadcnTemplate } from '@lexkit/editor/templates'

function MyEditor() {
  return (
    <ShadcnTemplate
      onReady={(editor) => {
        console.log('Editor ready!')
        // Access editor methods here
        editor.injectMarkdown('# Hello World')
      }}
    />
  )
}
```

--------------------------------

### Install SHADCN UI Components

Source: https://lexkit.dev/docs/templates/shadcn

Installs all required SHADCN UI components for the ShadcnTemplate. Ensure you have npm, yarn, or pnpm installed.

```bash
npx shadcn@latest add button toggle command tooltip tabs select separator label input dropdown-menu switch dialog collapsible textarea
```

--------------------------------

### Start the development server

Source: https://lexkit.dev/docs/contributing

Launch the local development environment to preview changes.

```bash
pnpm run dev
```

--------------------------------

### Basic Setup

Source: https://lexkit.dev/docs/extensions/DraggableBlockExtension

Import and add the DraggableBlockExtension to your editor for basic drag-and-drop functionality.

```APIDOC
## Basic Setup

### Description
Import and add `DraggableBlockExtension` to your editor for basic drag-and-drop functionality.

### Code Example
```javascript
function MyEditor() {
  return (
    <DefaultTemplate
      extensions={[draggableBlockExtension]}
      onReady={(editor) => {
        console.log('Editor with drag-and-drop ready!')
      }}
    />
  )
}
```
```

--------------------------------

### Create LexKit Editor with Manual RichTextPlugin Setup

Source: https://lexkit.dev/docs/get-started

Use createEditorSystem with manual RichTextPlugin setup for maximum control. This approach requires explicit configuration of LexicalComposer and RichTextPlugin.

```typescript
import { createEditorSystem, boldExtension, italicExtension, historyExtension } from "@lexkit/editor"
import { LexicalComposer } from '@lexical/react/LexicalComposer' 
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin' 
import { ContentEditable } from '@lexical/react/LexicalContentEditable' 

// Define your extensions (without RichText extension)
const extensions = [
  boldExtension,
  italicExtension,
  historyExtension
] as const

// Create typed editor system
const { Provider, useEditor } = createEditorSystem<typeof extensions>()


  return (
    <LexicalComposer initialConfig={initialConfig}> 
      <Provider extensions={extensions}>
        <div className="my-editor">
          <RichTextPlugin
            contentEditable={<ContentEditable className="my-editor-content" />}
            placeholder={<div className="my-editor-placeholder">Start writing...</div>}
          />
          {/* Add your toolbar or other UI here */}
        </div>
      </Provider>
    </LexicalComposer>
  )
}
```

--------------------------------

### Install LexKit Editor Package

Source: https://lexkit.dev/docs/installation

Install the main LexKit package that provides the type-safe editor system. Use this command with npm.

```bash
npm install @lexkit/editor
```

--------------------------------

### Install Collaboration Dependencies

Source: https://lexkit.dev/docs/extensions/CollaborationExtension

Install Yjs and a chosen transport provider as peer dependencies.

```bash
# Pick a transport: y-webrtc (P2P), y-websocket (server), or y-indexeddb (offline)
pnpm add yjs y-webrtc
```

--------------------------------

### Setup LexKit Extension System

Source: https://lexkit.dev/docs/get-started

Set up the LexKit editor system by defining extensions, creating the editor system with a provider, and then using it within a component. This is the foundational step for adding functionality to your editor.

```typescript
// 1. Define your extensions
const extensions = [MyExtension] as const

// 2. Create editor system
const { Provider, useEditor } = createEditorSystem<typeof extensions>()

// 3. Use in component
function MyEditor() {
  return (
    <Provider extensions={extensions}>
      <EditorContent />
    </Provider>
  )
}
```

--------------------------------

### Basic ContextMenuExtension Setup

Source: https://lexkit.dev/docs/extensions/ContextMenuExtension

Import and add the ContextMenuExtension to your editor's extensions for basic functionality.

```javascript
function MyEditor() {
  return (
    <DefaultTemplate
      extensions={[contextMenuExtension]}
      onReady={(editor) => {
        console.log('Editor with context menu ready!')
      }}
    />
  )
}
```

--------------------------------

### Create an extension with createExtension

Source: https://lexkit.dev/docs/api/extensions

Example of using the factory function to define commands, state queries, and lifecycle hooks.

```typescript
const myExtension = createExtension({
  name: 'my-extension',
  commands: (editor) => ({
    myCommand: () => console.log('Hello!'),
  }),
  stateQueries: (editor) => ({
    isActive: async () => true,
  }),
  initialize: (editor) => {
    console.log('Extension initialized');
    return () => {
      console.log('Extension cleaned up');
    };
  }
});
```

--------------------------------

### Custom Handle Renderer

Source: https://lexkit.dev/docs/extensions/DraggableBlockExtension

Example of how to implement a custom handle renderer for drag-and-drop functionality.

```APIDOC
## Custom Handle Renderer

### Description
Allows for custom rendering of drag handles to provide full control over their appearance and behavior.

### Usage
Pass a `handleRenderer` function to the `draggableBlockExtension.configure` method.

### Parameters
#### `handleRenderer` Function
- **rect** (object) - The bounding box of the element being dragged.
- **isDragging** (boolean) - Indicates if the element is currently being dragged.
- **onDragStart** (function) - A function to call to initiate the drag operation.

### Example
```javascript
function MyEditor() {
  const extensions = [
    draggableBlockExtension.configure({
      handleRenderer: ({ rect, isDragging, onDragStart }) => (
        <div
          style={{
            position: 'absolute',
            left: rect.left - 20,
            top: rect.top + rect.height / 2 - 10,
            width: 16,
            height: 16,
            background: isDragging ? '#007acc' : '#ccc',
            cursor: 'grab'
          }}
          onMouseDown={onDragStart}
        >
          ⋮⋮
        </div>
      )
    })
  ] as const

  return <DefaultTemplate extensions={extensions} />
}
```
```

--------------------------------

### Create an extension with BaseExtension

Source: https://lexkit.dev/docs/api/extensions

Example of implementing an extension by extending the BaseExtension class.

```typescript
class MyExtension extends BaseExtension<'my-extension'> {
  constructor() {
    super('my-extension');
  }

  register(editor: LexicalEditor): () => void {
    // Registration logic
    return () => {
      // Cleanup logic
    };
  }

  getCommands(editor: LexicalEditor) {
    return {
      myCommand: () => console.log('Hello!'),
    };
  }

  getStateQueries(editor: LexicalEditor) {
    return {
      isActive: async () => true,
    };
  }
}

const myExtension = new MyExtension();
```

--------------------------------

### Install Lexical Peer Dependencies

Source: https://lexkit.dev/docs/installation

Install the necessary Lexical packages that LexKit relies on. These are peer dependencies, ensuring compatibility and access to Lexical's features. Use this command with npm.

```bash
npm install lexical @lexical/react @lexical/html @lexical/markdown @lexical/list @lexical/rich-text @lexical/selection @lexical/utils
```

--------------------------------

### Basic LexKit Editor Setup with LinkExtension

Source: https://lexkit.dev/docs/extensions/LinkExtension

Import and configure LinkExtension for basic editor functionality, including insert and remove link buttons.

```typescript
import { createEditorSystem, linkExtension } from '@lexkit/editor'

const extensions = [linkExtension] as const
const { Provider, useEditor } = createEditorSystem<typeof extensions>()

function MyEditor() {
  const { commands, activeStates } = useEditor()

  return (
    <Provider extensions={extensions}>
      <button
        onClick={() => commands.insertLink()}
        className={activeStates.isLink ? 'active' : ''}
      >
        Insert Link
      </button>
      <button
        onClick={() => commands.removeLink()}
        disabled={!activeStates.isLink}
      >
        Remove Link
      </button>
    </Provider>
  )
}
```

--------------------------------

### Basic DraggableBlockExtension Setup

Source: https://lexkit.dev/docs/extensions/DraggableBlockExtension

Import and add the DraggableBlockExtension to your editor for basic drag-and-drop functionality. This sets up the extension with default configurations.

```javascript
function MyEditor() {
  return (
    <DefaultTemplate
      extensions={[draggableBlockExtension]}
      onReady={(editor) => {
        console.log('Editor with drag-and-drop ready!')
      }}
    />
  )
}
```

--------------------------------

### DefaultTemplate Implementation

Source: https://lexkit.dev/docs/templates/default

The core component implementation including extension configuration and system setup.

```tsx
"use client";

import React, { useState, useEffect, useMemo, useRef, forwardRef } from "react";
import { useTheme } from "next-themes";
import {
  // Core system
  createEditorSystem,

  // Extensions
  boldExtension,
  italicExtension,
  underlineExtension,
  strikethroughExtension,
  linkExtension,
  horizontalRuleExtension,
  TableExtension,
  listExtension,
  historyExtension,
  imageExtension,
  blockFormatExtension,
  htmlExtension,
  MarkdownExtension,
  codeExtension,
  codeFormatExtension,
  HTMLEmbedExtension,
  floatingToolbarExtension,
  contextMenuExtension,
  commandPaletteExtension,
  DraggableBlockExtension,

  // Utilities
  ALL_MARKDOWN_TRANSFORMERS,

  // Types
  type ExtractCommands,
  type ExtractStateQueries,
  type BaseCommands,
} from "@lexkit/editor";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { LexicalEditor } from "lexical";
import { Bold, Italic, Underline, Strikethrough, List, ListOrdered, Undo, Redo, Sun, Moon, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight, Upload, Link, Unlink, Minus, Code, Terminal, Table as TableIcon, FileCode, Eye, Pencil, Command, Type, Quote, Indent, Outdent } from "lucide-react";
import { Select, Dropdown, Dialog } from "./components";
import {
  commandsToCommandPaletteItems,
  registerKeyboardShortcuts,
} from "./commands";
import { CommandPalette } from "./CommandPalette";
import { createPortal } from "react-dom";
import { defaultTheme } from "./theme";
import "./styles.css";

type TableConfig = {
  rows?: number;
  columns?: number;
  includeHeaders?: boolean;
};

// Create markdown extension instance
const markdownExt = new MarkdownExtension().configure({
  customTransformers: [...ALL_MARKDOWN_TRANSFORMERS],
});

// Define extensions array
export const extensions = [
  boldExtension,
  italicExtension,
  underlineExtension,
  strikethroughExtension,
  linkExtension.configure({
    linkSelectedTextOnPaste: true,
    autoLinkText: true,
    autoLinkUrls: true,
  }),
  horizontalRuleExtension,
  new TableExtension().configure({
    enableContextMenu: true,
    markdownExtension: markdownExt,
  }),
  listExtension,
  historyExtension,
  imageExtension,
  blockFormatExtension,
  htmlExtension,
  markdownExt,
  codeExtension,
  codeFormatExtension,
  new HTMLEmbedExtension().configure({
    markdownExtension: markdownExt,
  }),
  floatingToolbarExtension,
  contextMenuExtension,
  commandPaletteExtension,
  new DraggableBlockExtension().configure({}),
] as const;

// Create typed editor system
const { Provider, useEditor } = createEditorSystem<typeof extensions>();

// Extract types
type EditorCommands = BaseCommands & ExtractCommands<typeof extensions>;
type EditorStateQueries = ExtractStateQueries<typeof extensions>;
type ExtensionNames = (typeof extensions)[number]["name"];

// Editor modes
type EditorMode = "visual" | "html" | "markdown";

// Ref interface for external control
export interface DefaultTemplateRef {
  injectMarkdown: (content: string) => void;
  injectHTML: (content: string) => void;
  getMarkdown: () => string;
  getHTML: () => string;
}
```

--------------------------------

### Custom URL Validation with LinkExtension

Source: https://lexkit.dev/docs/extensions/LinkExtension

Implement custom URL validation logic by providing a `validateUrl` function. This example only accepts URLs starting with 'https://' and containing 'example.com'.

```typescript
import { linkExtension } from '@lexkit/editor'

const extensions = [
  linkExtension.configure({
    autoLinkText: true,
    validateUrl: (url: string) => {
      // Custom URL validation
      return url.startsWith('https://') &&
             url.includes('example.com')
    }
  })
] as const
```

--------------------------------

### Create Editor System

Source: https://lexkit.dev/docs/extensions

Use the `createEditorSystem` function with your extensions array to generate a typed Provider and `useEditor` hook. This setup is consistent for all extension types.

```typescript
const { Provider, useEditor } = createEditorSystem<typeof extensions>();
```

--------------------------------

### Best Practices for createEditorSystem

Source: https://lexkit.dev/docs/api/create-editor-system

Offers tips and recommendations for effectively using the createEditorSystem, focusing on type safety, code organization, and editor composition.

```APIDOC
## Best Practices

### Description
This section outlines recommended practices to optimize the usage of `createEditorSystem` for better performance, maintainability, and type safety.

### Recommendations

- **Use Const Assertions**: Always use `as const` with your extension arrays. This enables full type inference and improves type safety.
  ```typescript
  import { $createParagraphNode } from 'lexical';
  import { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
  import { LinkNode } from '@lexical/link';

  const extensions = [
    // ... other extensions
    AutoLinkPlugin,
    LinkNode
  ] as const;
  ```

- **Single Responsibility**: Create separate editor systems for distinct use cases. Avoid building a single, monolithic system with all possible extensions, as this can lead to complexity and performance issues.

- **Type Your Props**: When calling `createEditorSystem`, use `typeof extensions` to maintain type safety for your editor's props and configurations.
  ```typescript
  import { createEditorSystem } from 'lexical';

  const extensions = [...] as const;
  type EditorContext = ReturnType<typeof createEditorSystem<typeof extensions>>;
  ```

- **Composition Over Configuration**: Build complex editors by composing simpler, focused editor systems. This approach promotes modularity and reusability, making your codebase easier to manage.
```

--------------------------------

### Editor State Queries

Source: https://lexkit.dev/docs/extensions/DraggableBlockExtension

Queries to get the current state of the editor.

```APIDOC
## GET /api/editor/is-dragging

### Description
Real-time boolean indicating if a drag operation is in progress.

### Method
GET

### Endpoint
/api/editor/is-dragging

### Response
#### Success Response (200)
- **isDragging** (boolean) - True if a drag operation is in progress, false otherwise.

#### Response Example
```json
{
  "isDragging": false
}
```
```

--------------------------------

### Create a feature branch

Source: https://lexkit.dev/docs/contributing

Standard command to initialize a new branch for development work.

```bash
git checkout -b feature/your-feature-name
```

--------------------------------

### Clone the LexKit repository

Source: https://lexkit.dev/docs/contributing

Initial step to download the project source code from GitHub.

```bash
git clone https://github.com/novincode/lexkit.git
cd lexkit
```

--------------------------------

### Basic DefaultTemplate Usage

Source: https://lexkit.dev/docs/templates/default

Initialize the editor and use the onReady callback to interact with editor methods.

```tsx
import { DefaultTemplate } from '@/components/DefaultTemplate'

function MyEditor() {
  return (
    <DefaultTemplate
      onReady={(editor) => {
        console.log('Editor ready!')
        // Access editor methods here
        editor.injectMarkdown('# Hello World')
      }}
    />
  )
}
```

--------------------------------

### Initialize LexKit Editor with Shadcn UI

Source: https://lexkit.dev/docs/templates/shadcn

Sets up the LexKit editor system with various extensions and integrates it with Shadcn UI components for a rich editing experience. Includes custom themes and styles.

```typescript
"use client";

import React, { useState, useEffect, useMemo, useRef, forwardRef, useCallback, useImperativeHandle } from "react";
import { createPortal } from "react-dom";
import {
  // Core system
  createEditorSystem,

  // Extensions
  boldExtension,
  italicExtension,
  underlineExtension,
  strikethroughExtension,
  linkExtension,
  horizontalRuleExtension,
  TableExtension,
  listExtension,
  historyExtension,
  imageExtension,
  blockFormatExtension,
  htmlExtension,
  MarkdownExtension,
  codeExtension,
  codeFormatExtension,
  HTMLEmbedExtension,
  commandPaletteExtension,
  floatingToolbarExtension,
  contextMenuExtension,
  DraggableBlockExtension,

  // Utilities
  ALL_MARKDOWN_TRANSFORMERS,

  // Types
  type ExtractCommands,
  type ExtractStateQueries,
  type BaseCommands,
} from "@lexkit/editor";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { LexicalEditor } from "lexical";
import { Bold, Italic, Underline, Strikethrough, List, ListOrdered, Undo, Redo, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight, Upload, Link as LinkIcon, Unlink, Minus, Code, Terminal, Table as TableIcon, FileCode, Eye, Pencil, Command as CommandIcon, Type, Quote, FileText, Hash, X, CloudUpload, Globe, ChevronDown, Indent, Outdent } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Toggle } from "@/components/ui/toggle";
import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from "@/components/ui/command";
import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Switch } from "@/components/ui/switch";
import { Dialog as ShadcnDialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Textarea } from "@/components/ui/textarea";
import {
  commandsToCommandPaletteItems,
  registerKeyboardShortcuts,
} from "./commands";
import { shadcnTheme } from "./theme";
import { cn } from "@/lib/utils";
import "./shadcn-styles.css";

// Editor Mode Types
type EditorMode = "visual" | "html" | "markdown";

// Table Config Type
type TableConfig = {
  rows: number;
  columns: number;
  includeHeaders: boolean;
};

// Ref interface for parent control
export interface ShadcnTemplateRef {
  injectMarkdown: (content: string) => void;
  injectHTML: (content: string) => void;
  getMarkdown: () => string;
  getHTML: () => string;
}

// Custom Shadcn-styled context menu renderer
function ShadcnContextMenuRenderer(props: {
  items: any[];
  position: { x: number; y: number };
  onClose: () => void;
  className: string;
  style?: React.CSSProperties;
  itemClassName: string;
  itemStyle?: React.CSSProperties;
  disabledItemClassName: string;
  disabledItemStyle?: React.CSSProperties;
}) {
  const { items, position, onClose } = props;

  return createPortal(
    <div
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
        props.className
      )}
      style={{
        position: 'fixed',
        left: position.x,
        top: position.y,
        zIndex: 9999,
        ...props.style,
      }}
      onClick={(e) => e.stopPropagation()}
      onContextMenu={(e) => e.preventDefault()}
    >
      {items.map((item: any, index: number) => (
        <div
          key={index}
          className={cn(
            "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
            item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
            item.disabled ? props.disabledItemClassName : props.itemClassName
          )}
          style={item.disabled ? props.disabledItemStyle : props.itemStyle}
          onClick={() => {
            if (!item.disabled && item.action) {
              item.action();
              onClose();
            }
          }}
        >

```

--------------------------------

### Define a basic extension with createExtension

Source: https://lexkit.dev/docs/extensions

Use the createExtension factory function to initialize a new extension with a name and command set.

```typescript
import { createExtension } from '@lexkit/editor'

const MyExtension = createExtension({
  name: 'my-extension',
  commands: (editor) => ({
    // Define your commands here
    myCommand: () => console.log('Hello!')
  })
})
```

--------------------------------

### createEditorSystem API Reference

Source: https://lexkit.dev/docs/api/create-editor-system

Provides a detailed reference for the createEditorSystem API, including its React component, configuration options, and available utilities.

```APIDOC
## API Reference: createEditorSystem

### Description
This section details the `createEditorSystem` API, which is used to initialize and configure a Lexical editor instance.

### `Provider<Exts>`

- **Description**: A React component that provides the editor context to its children. It should wrap your editor components.
- **Props**:
  - `extensions` (Exts): Required. An array of Lexical extensions to be used in the editor.
  - `config` (EditorConfig): Optional. Configuration options for the editor.

### Available Utilities

- **`commands`**: Access to all available commands exposed by your extensions.
- **`activeStates`**: Provides the current state of all formatters and selections within the editor.
- **`editor`**: The raw Lexical editor instance, useful for advanced use cases.
- **`export` / `import`**: Utilities for serializing and deserializing editor content.
```

--------------------------------

### contextMenuExtension.configure

Source: https://lexkit.dev/docs/extensions/ContextMenuExtension

Configures the behavior, appearance, and custom rendering logic for the context menu extension.

```APIDOC
## configure(config)

### Description
Configures the context menu extension with custom renderers, behavior settings, and styling.

### Parameters
#### Request Body
- **defaultRenderer** (Component) - Optional - A custom React component to render the context menu.
- **preventDefault** (boolean) - Optional - Whether to prevent the default browser context menu.
- **initPriority** (number) - Optional - Priority for registration order.
- **theme** (object) - Optional - CSS class names for container and items.
- **styles** (object) - Optional - Inline style overrides for the container and items.
```

--------------------------------

### Configure Theme and Options

Source: https://lexkit.dev/docs/api/create-editor-system

Customize the editor's appearance and behavior by passing a configuration object to the Provider. This includes defining custom themes and other settings.

```typescript
import { createEditorSystem, defaultLexKitTheme } from '@lexkit/editor'

const extensions = [boldExtension, italicExtension] as const
const { Provider, useEditor } = createEditorSystem<typeof extensions>()

const customTheme = {
  ...defaultLexKitTheme,
  text: {
    bold: 'font-bold text-blue-600',
  },
}

function MyEditor() {
  return (
    <Provider
      extensions={extensions}
      config={{
        theme: customTheme,
        // other config options...
      }}>
      <EditorContent />
    </Provider>
  )
}
```

--------------------------------

### Implement Main Editor Content

Source: https://lexkit.dev/docs/templates/shadcn

Orchestrates editor state, command registration, and content injection methods.

```typescript
function EditorContent({
  className,
  onReady,
}: {
  className?: string;
  onReady?: (methods: ShadcnTemplateRef) => void;
}) {
  const { commands, hasExtension, activeStates, lexical: editor } = useEditor();
  const [mode, setMode] = useState<EditorMode>("visual");
  const [content, setContent] = useState({ html: "", markdown: "" });
  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
  const [linkDialogOpen, setLinkDialogOpen] = useState(false);
  const [imageDialogOpen, setImageDialogOpen] = useState(false);
  const [linkInitial, setLinkInitial] = useState({ url: "" });
  const commandsRef = useRef<EditorCommands>(commands);

  // Store onReady in ref to avoid infinite loops
  const onReadyRef = useRef(onReady);
  const readyCalledRef = useRef(false);

  useEffect(() => {
    onReadyRef.current = onReady;
  }, [onReady]);

  useEffect(() => {
    commandsRef.current = commands;
  }, [commands]);

  const methods = useMemo<ShadcnTemplateRef>(
    () => ({
      injectMarkdown: (content: string) => {
        if (editor) {
          editor.update(() => {
            commandsRef.current.importFromMarkdown(content, { immediate: true });
          });
        }
      },
      injectHTML: (content: string) => {
        if (editor) {
          editor.update(() => {
            commandsRef.current.importFromHTML(content);
          });
        }
      },
      getMarkdown: () => commandsRef.current.exportToMarkdown(),
      getHTML: () => commandsRef.current.exportToHTML(),
    }),
    [], // No dependencies to prevent recreation
  );

  const { handlers: imageHandlers } = useImageHandlers(commands, editor);

  const openLinkDialog = useCallback(
    (options: { initialUrl?: string } = {}) => {
      const { initialUrl = "" } = options;
      setLinkInitial({ url: initialUrl });
      setLinkDialogOpen(true);
    },
    [],
  );

  const handleLinkSubmit = useCallback(
    ({ url }: { url: string }) => {
      commands.insertLink(url);
    },
    [commands],
  );

  const handleImageSubmit = useCallback(
    ({ activeTab, url, alt, caption, file }: {
      activeTab: "upload" | "url";
      url: string;
      alt: string;
      caption: string;
      file: File | null;
    }) => {
      if (activeTab === "upload" && file) {
        imageHandlers.insertImageFromFile(file, alt, caption);
      } else if (activeTab === "url" && url.trim()) {
        imageHandlers.insertImageFromUrl(url.trim(), alt, caption);
      }
    },
    [imageHandlers],
  );

  useEffect(() => {
    if (!editor || !commands || readyCalledRef.current) return;

    const paletteCommands = commandsToCommandPaletteItems(commands);
    paletteCommands.forEach((cmd) => commands.registerCommand(cmd));

    const originalShowCommand = commands.showCommandPalette;
```

--------------------------------

### Customize behavior and appearance

Source: https://lexkit.dev/docs/extensions/ContextMenuExtension

Configure global context menu settings including browser default prevention, priority, and CSS theme overrides.

```javascript
const customContextMenu = contextMenuExtension.configure({
  preventDefault: true, // Prevent browser context menu
  initPriority: 100,   // High priority for early registration
  theme: {
    container: 'my-context-menu',
    item: 'my-menu-item',
    itemDisabled: 'my-menu-item-disabled'
  },
  styles: {
    container: {
      backgroundColor: '#f8f9fa',
      borderRadius: '12px',
      boxShadow: '0 8px 32px rgba(0,0,0,0.1)'
    },
    item: {
      padding: '12px 16px',
      fontSize: '14px'
    }
  }
})
```

--------------------------------

### Context Menu Commands

Source: https://lexkit.dev/docs/extensions/ContextMenuExtension

Programmatic commands to manage context menu providers and visibility.

```APIDOC
## registerProvider(provider)

### Description
Registers a new context menu provider.

## unregisterProvider(id)

### Description
Removes a registered context menu provider by its ID.

## showContextMenu(config)

### Description
Displays a context menu programmatically at a specific position.

### Parameters
#### Request Body
- **items** (array) - Required - List of menu items with labels and actions.
- **position** (object) - Required - Coordinates {x, y} for the menu display.

## hideContextMenu()

### Description
Hides the currently visible context menu.
```

--------------------------------

### Configuration Options

Source: https://lexkit.dev/docs/extensions/DraggableBlockExtension

Customize the drag-and-drop behavior and appearance using various configuration options.

```APIDOC
## With Configuration

### Description
Customize drag behavior by configuring the `draggableBlockExtension` with various options.

### Code Example
```javascript
const extensionsWithDraggable = [
  draggableBlockExtension.configure({
    showMoveButtons: true,        // Show up/down buttons
    showUpButton: true,           // Enable move up button
    showDownButton: true,         // Enable move down button
    buttonStackPosition: 'left',  // Position buttons on left
    enableTextSelectionDrag: true, // Allow dragging via text selection
    theme: {
      handle: 'my-drag-handle',
      handleActive: 'my-drag-handle-active',
      blockDragging: 'my-block-dragging',
      dropIndicator: 'my-drop-indicator'
    }
  }),
  historyExtension
] as const
```

### Configuration Options

| Option | Type | Description |
|---|---|---|
| showMoveButtons | boolean | Show up/down arrow buttons for manual block movement. |
| showUpButton | boolean | Enable the move up button specifically. |
| showDownButton | boolean | Enable the move down button specifically. |
| buttonStackPosition | 'left' | 'right' | Position of the move buttons relative to blocks. |
| enableTextSelectionDrag | boolean | Allow dragging blocks by selecting text within them. |
| theme | object | CSS class names for customizing handles, indicators, and animations. |
| handleRenderer | function | Custom renderer for drag handles with full control. |
| buttonsRenderer | function | Custom renderer for move up/down buttons. |
| dropIndicatorRenderer | function | Custom renderer for the drop indicator line. |
```

--------------------------------

### commands.collab

Source: https://lexkit.dev/docs/extensions/CollaborationExtension

Imperative commands to manage the collaboration session and user presence.

```APIDOC
## commands.collab

### Methods
- **connect()** - Establishes a connection.
- **disconnect()** - Terminates the connection.
- **toggle()** - Toggles the connection state.
- **setLocalUser(data)** - Sets local user information (name, color, awarenessData).
- **getUsers()** - Returns the current list of collaborators.
- **onUsersChange(cb)** - Subscribes to user changes; returns an unsubscribe function.

### Properties
- **activeStates.isCollaborating** (boolean) - Indicates if the editor is currently in a collaborative state.
```

--------------------------------

### Configure Markdown Extension

Source: https://lexkit.dev/docs/templates/shadcn

Creates and configures a Markdown extension for Lexical, specifying custom transformers to be used.

```typescript
// Create markdown extension instance for this template
const markdownExt = new MarkdownExtension().configure({
  customTransformers: ALL_MARKDOWN_TRANSFORMERS,
});
```

--------------------------------

### LexKit Monorepo Structure

Source: https://lexkit.dev/docs/contributing

Overview of the project directory layout and package organization.

```text
lexkit/
├── apps/
│   └── web/                 # Main web application
│       ├── app/             # Next.js app directory
│       ├── components/      # Shared components
│       └── lib/             # Utility functions
├── packages/
│   ├── editor/              # Core editor package
│   ├── ui/                  # UI component library
│   ├── meta/                # Metadata utilities
│   ├── eslint-config/       # ESLint configurations
│   └── typescript-config/   # TypeScript configurations
├── package.json
├── pnpm-workspace.yaml
├── turbo.json
└── tsconfig.json
```

--------------------------------

### Run quality checks

Source: https://lexkit.dev/docs/contributing

Execute linting, type checking, and testing scripts before submitting a pull request.

```bash
pnpm run lint
pnpm run type-check
pnpm run test
```

--------------------------------

### isContextMenuOpen

Source: https://lexkit.dev/docs/extensions/ContextMenuExtension

Query the current visibility state of the context menu.

```APIDOC
## isContextMenuOpen()

### Description
Returns a boolean indicating whether the context menu is currently visible.

### Response
- **result** (boolean) - True if open, false otherwise.
```

--------------------------------

### createEditorSystem Factory

Source: https://lexkit.dev/docs/api/create-editor-system

The createEditorSystem function analyzes an array of extensions to generate a typed Provider component and useEditor hook.

```APIDOC
## createEditorSystem

### Description
A factory function that creates a fully typed editor system based on provided extensions. It generates a Provider component and a useEditor hook with compile-time type safety.

### Method
Function Call

### Parameters
#### Generic Parameters
- **T** (Extension[]) - Required - A const array of extensions to define the editor's capabilities.

### Request Example
```typescript
const extensions = [boldExtension, italicExtension] as const;
const { Provider, useEditor } = createEditorSystem<typeof extensions>();
```

### Response
#### Success Response
- **Provider** (Component) - React component to wrap editor content.
- **useEditor** (Hook) - Hook to access commands and active states.
```

--------------------------------

### Configure CollaborationExtension

Source: https://lexkit.dev/docs/extensions/CollaborationExtension

Initialize the extension by providing a providerFactory to manage the Yjs document and transport connection.

```typescript
import {
  createEditorSystem,
  richTextExtension,
  collaborationExtension,
  type CollaborationProvider,
} from "@lexkit/editor";
import { WebrtcProvider } from "y-webrtc";
import * as Y from "yjs";

const extensions = [
  richTextExtension,
  collaborationExtension.configure({
    id: "my-room",
    username: "Ada",
    cursorColor: "#e11d48",
    providerFactory: (id, docMap) => {
      let doc = docMap.get(id);
      if (!doc) { doc = new Y.Doc(); docMap.set(id, doc); }
      return new WebrtcProvider(id, doc) as unknown as CollaborationProvider;
    },
  }),
] as const;

const { Provider, useEditor } = createEditorSystem<typeof extensions>();
```

--------------------------------

### Create LexKit Editor with RichText Extension

Source: https://lexkit.dev/docs/get-started

Use createEditorSystem with RichTextExtension for type safety and modularity. Configure placeholder and class names for the editor container, content editable area, and placeholder.

```typescript
import { createEditorSystem, richTextExtension, boldExtension, italicExtension, historyExtension } from "@lexkit/editor"

// Define your extensions (as const for type safety)
const extensions = [
  richTextExtension.configure({
    placeholder: "Start writing...",
    classNames: {
      container: "my-editor-container",
      contentEditable: "my-editor-content",
      placeholder: "my-editor-placeholder"
    }
  }),
  boldExtension,
  italicExtension,
  historyExtension
] as const

// Create typed editor system
const { Provider, useEditor } = createEditorSystem<typeof extensions>()

function MyEditor() {
  return (
    <Provider extensions={extensions}>
      <div className="my-editor">
        {/* RichText extension renders automatically */}
        {/* Add your toolbar or other UI here */}
      </div>
    </Provider>
  )
}
```

--------------------------------

### Implement Source View Components

Source: https://lexkit.dev/docs/templates/shadcn

Textarea-based components for raw HTML or Markdown editing, utilizing a shared theme configuration.

```typescript
function HTMLSourceView({
  htmlContent,
  onHtmlChange,
}: {
  htmlContent: string;
  onHtmlChange: (html: string) => void;
}) {
  return (
    <Textarea
      className={shadcnTheme.sourceView?.textarea || "w-full h-full min-h-[600px] p-4 bg-background border-none rounded-none font-mono text-sm resize-none focus:outline-none focus:ring-0"}
      value={htmlContent}
      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onHtmlChange(e.target.value)}
      placeholder="Enter HTML content..."
      spellCheck={false}
    />
  );
}
```

```typescript
function MarkdownSourceView({
  markdownContent,
  onMarkdownChange,
}: {
  markdownContent: string;
  onMarkdownChange: (markdown: string) => void;
}) {
  return (
    <Textarea
      className={shadcnTheme.sourceView?.textarea || "w-full h-full min-h-[600px] p-4 bg-background border-none rounded-none font-mono text-sm resize-none focus:outline-none focus:ring-0"}
      value={markdownContent}
      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onMarkdownChange(e.target.value)}
      placeholder="Enter Markdown content..."
      spellCheck={false}
    />
  );
}
```

--------------------------------

### Configure Extension-Specific Themes

Source: https://lexkit.dev/docs/theming

Define custom styles for draggable blocks and floating toolbars within the LexKitTheme object.

```typescript
const themeWithExtensions: LexKitTheme = {
  // Base properties
  paragraph: 'editor-paragraph',
  text: {
    bold: 'editor-bold',
  },

  // Draggable blocks extension
  draggable: {
    handle: 'absolute -left-8 top-0 w-6 h-6 bg-gray-200 hover:bg-gray-300 rounded cursor-move flex items-center justify-center',
    handleHover: 'bg-gray-300',
    handleDragging: 'bg-blue-500',
    blockDragging: 'opacity-50 border-2 border-blue-500 border-dashed',
    dropIndicator: 'h-1 bg-blue-500 my-2 rounded',
    upButton: 'absolute -left-6 -top-3 w-5 h-5 bg-white border border-gray-300 rounded-full flex items-center justify-center text-xs hover:bg-gray-50',
    downButton: 'absolute -left-6 -bottom-3 w-5 h-5 bg-white border border-gray-300 rounded-full flex items-center justify-center text-xs hover:bg-gray-50',
    blockIsDragging: 'shadow-lg transform rotate-2',
    buttonStack: 'flex flex-col gap-1',
  },

  // Floating toolbar extension
  floatingToolbar: {
    container: 'absolute z-50 bg-white border border-gray-300 rounded-lg shadow-lg p-2 flex gap-1',
    button: 'w-8 h-8 flex items-center justify-center rounded hover:bg-gray-100 text-sm',
    buttonActive: 'bg-blue-100 text-blue-700',
  },
}
```

--------------------------------

### Import DefaultTemplate

Source: https://lexkit.dev/docs/templates/default

Import the component into your project after copying the required files.

```typescript
import { DefaultTemplate } from '@/components/DefaultTemplate'
```

--------------------------------

### Configure Image Extension for Editor

Source: https://lexkit.dev/docs/templates/shadcn

Configures the image extension for the editor, setting up an upload handler, default alignment, resizability, and paste listener options. This is typically done once when the editor is initialized.

```typescript
useEffect(() => {
      imageExtension.configure({
        uploadHandler: async (file: File) => {
          const objectUrl = URL.createObjectURL(file);
          return objectUrl;
        },
        defaultAlignment: "center",
        resizable: true,
        pasteListener: { insert: true, replace: true },
        debug: false,
      });
    }, []);
```

--------------------------------

### Create Typed Editor System

Source: https://lexkit.dev/docs/templates/shadcn

Creates a typed editor system using Lexical's `createEditorSystem` function, allowing for type inference of commands, state queries, and extension names based on the provided extensions array.

```typescript
// Create a typed editor system for these specific extensions
const { Provider, useEditor } = createEditorSystem<typeof extensions>();
```

--------------------------------

### Component-Level Theming for Multiple Editors

Source: https://lexkit.dev/docs/theming

Apply different themes to distinct editor instances within the same application. This allows for varied styling based on editor purpose.

```javascript
import { LexKitTheme } from '@lexkit/editor'

// Different themes for different editor instances
const minimalTheme: LexKitTheme = {
  container: 'border border-gray-200 rounded',
  paragraph: 'text-sm text-gray-700',
  toolbar: {
    button: 'w-6 h-6 text-xs',
  },
}

const richTheme: LexKitTheme = {
  container: 'border-2 border-blue-200 rounded-lg shadow-lg',
  paragraph: 'text-base text-gray-900 leading-relaxed',
  heading: {
    h1: 'text-3xl font-bold text-blue-900',
  },
  toolbar: {
    button: 'px-4 py-2 text-sm font-medium bg-blue-50 hover:bg-blue-100',
    buttonActive: 'bg-blue-200',
  },
}

function MultiEditorApp() {
  return (
    <div className="space-y-8">
      {/* Minimal editor for comments */}
      <div>
        <h3 className="text-lg font-semibold mb-2">Comment Editor</h3>
        <Provider extensions={basicExtensions} config={{ theme: minimalTheme }}>
          <CommentEditor />
        </Provider>
      </div>

      {/* Rich editor for content creation */}
      <div>
        <h3 className="text-lg font-semibold mb-2">Content Editor</h3>
        <Provider extensions={richExtensions} config={{ theme: richTheme }}>
          <ContentEditor />
        </Provider>
      </div>
    </div>
  )
}
```

--------------------------------

### Table Configuration and Insertion

Source: https://lexkit.dev/docs/templates/shadcn

Handles table column configuration and insertion logic within a dialog interface.

```tsx
setTableConfig((prev: TableConfig) => ({
                              ...prev,
                              columns: parseInt(e.target.value) || 1,
                            }))
                          }
                          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                            if (e.key === "Enter") {
                              e.preventDefault();
                              commands.insertTable(tableConfig);
                              setShowTableDialog(false);
                            }
                          }}
                        />
                      </div>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch
                        id="headers"
                        checked={tableConfig.includeHeaders || false}
                        onCheckedChange={(checked: boolean) =>
                          setTableConfig((prev: TableConfig) => ({
                            ...prev,
                            includeHeaders: checked,
                          }))
                        }
                      />
                      <Label htmlFor="headers">Include headers</Label>
                    </div>
                  </div>
                  <DialogFooter>
                    <div className="flex justify-end space-x-2">
                      <Button
                        variant="outline"
                        onClick={() => setShowTableDialog(false)}
                      >
                        Cancel
                      </Button>
                      <Button
                        onClick={() => {
                          commands.insertTable(tableConfig);
                          setShowTableDialog(false);
                        }}
                      >
                        Insert Table
                      </Button>
                    </div>
                  </DialogFooter>
                </DialogContent>
              </ShadcnDialog>
            </>
```

--------------------------------

### Base Extension Configuration Interface

Source: https://lexkit.dev/docs/api/type-definitions

Defines the base configuration options for Lexical extensions. Use this for common settings like toolbar visibility and category.

```typescript
export interface BaseExtensionConfig {
  showInToolbar?: boolean;
  category?: ExtensionCategory[];
  position?: 'before' | 'after';
  [key: string]: any;
}
```

--------------------------------

### Initialize Floating Toolbar

Source: https://lexkit.dev/docs/templates/shadcn

This code initializes the floating toolbar extension, checking its visibility and selection rectangle. It uses a `useEffect` hook with `setInterval` to periodically update the toolbar's state. Ensure the 'floatingToolbar' extension is available.

```typescript
const floatingExtension = extensions.find(
    (ext) => ext.name === "floatingToolbar",
  ) as any;

  useEffect(() => {
    if (!floatingExtension) return;

    const checkState = () => {
      const visible = floatingExtension.getIsVisible();
      const rect = floatingExtension.getSelectionRect();
      setIsVisible(visible);
      setSelectionRect(rect);
    };

    const interval = setInterval(checkState, 200);
    return () => clearInterval(interval);
  }, [floatingExtension]);
```

--------------------------------

### Register Keyboard Shortcuts and Command Palette

Source: https://lexkit.dev/docs/templates/shadcn

Registers keyboard shortcuts and sets up the command palette trigger within the editor lifecycle.

```typescript
(commands as any).showCommandPalette = () => setCommandPaletteOpen(true);

    const unregisterShortcuts = registerKeyboardShortcuts(commands, document.body);

    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key === "k") {
        e.preventDefault();
        setCommandPaletteOpen(true);
      }
    };
    document.addEventListener("keydown", handleKeyDown);

    // Call onReady only once
    readyCalledRef.current = true;
    onReadyRef.current?.(methods);

    return () => {
      unregisterShortcuts();
      document.removeEventListener("keydown", handleKeyDown);
      (commands as any).showCommandPalette = originalShowCommand;
    };
  }, [editor, commands, methods]); // Only depend on editor and commands
```

--------------------------------

### Use Typed System in Components

Source: https://lexkit.dev/docs/api/create-editor-system

Wrap your editor components with the Provider and utilize the useEditor hook. Ensure the extensions array is passed to the Provider.

```typescript
import { createEditorSystem } from '@lexkit/editor'
import { boldExtension, italicExtension } from '@lexkit/editor'

// Define your extensions as a const array for type safety
const extensions = [boldExtension, italicExtension] as const

// Create a typed editor system
const { Provider, useEditor } = createEditorSystem<typeof extensions>()

function MyEditor() {
  return (
    <Provider extensions={extensions}>
      <EditorContent />
    </Provider>
  )
}
```

--------------------------------

### Create custom context menu styling

Source: https://lexkit.dev/docs/extensions/ContextMenuExtension

Define a custom React component for rendering the context menu and register it using the configure method.

```javascript
function CustomContextMenuRenderer(props) {
  const { items, position, onClose } = props

  return createPortal(
    <div
      className="my-custom-context-menu"
      style={{
        position: 'fixed',
        left: position.x,
        top: position.y,
        background: 'white',
        border: '1px solid #ccc',
        borderRadius: '8px',
        boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
        minWidth: '200px',
        zIndex: 9999
      }}
    >
      {items.map((item, index) => (
        <div
          key={index}
          className="menu-item"
          style={{
            padding: '12px 16px',
            cursor: 'pointer',
            borderBottom: index < items.length - 1 ? '1px solid #eee' : 'none'
          }}
          onClick={() => {
            item.action()
            onClose()
          }}
        >
          {item.label}
        </div>
      ))}
    </div>,
    document.body
  )
}

// Use custom renderer
const customContextMenu = contextMenuExtension.configure({
  defaultRenderer: CustomContextMenuRenderer
})
```
Tokens:
Raw