LobeHub Editor

Lobe Editor provides different component types depending on whether you need an interactive editor, a static renderer, or a diff viewer:

• Interactive Editing: Use the Editor component for a full, editable experience with React UI building blocks.
• Static Rendering / SSR: Use LexicalRenderer for a headless JSON-to-React renderer. This is ideal for displaying content without editing capabilities or for Server-Side Rendering (SSR).
• Document Comparison: Use LexicalDiff to view a read-only diff between two SerializedEditorState values.
• Extending Functionality: Use the Plugins system to add new capabilities or modify editor behavior.

The List plugin provides comprehensive list functionality, including multi-level nesting, list item manipulation, and markdown shortcuts. It leverages Lexical's ListNode and ListItemNode to support both bulleted and numbered lists.

Core Capabilities

• Nesting: Supports deeply nested list structures.
• Markdown Shortcuts: Automatically creates lists using patterns like -, *, +, or 1..
• Keyboard Navigation: Supports Tab/Shift+Tab for indentation and Enter for new items.
• Type Conversion: Easily switch between ordered and unordered lists.

const listPlugin = new ListPlugin(kernel, {
  theme: {
    list: 'custom-list',
    listItem: 'custom-list-item',
    nestedListItem: 'custom-nested-item',
  },
  maxNestingLevel: 5,
  enableMarkdown: true,
  autoIndent: true,
});

To prevent UI conflicts during multi-user editing, the plugin implements a guard on the collapse action:

An expanded collapsible cannot be collapsed if a remote collaborator has a cursor inside it.

The plugin validates this by checking both Yjs relative positions and the materialized Lexical cursor selection to ensure accuracy even during pending updates.

To customize how specific block types are displayed during a diff, you can provide custom rendering logic via two main extension points:

1. blockRenderers[type]: Use this to provide a custom renderer for rows where both the original and the modified blocks are of the same type.
2. renderBlockDiff: Use this as a fallback renderer for rows where the block types differ (cross-type changes) or when no specific type-based renderer is provided.

When deciding between using the full <Editor> component with editable={false} versus using <LexicalRenderer>, consider the following:

• <Editor editable={false}>: Loads the full editor engine, plugins, and DOM bindings. It is more heavy-weight but provides the exact same environment as the editor.
• <LexicalRenderer>: A lightweight, headless renderer that only performs JSON-to-React conversion. It is significantly more efficient for displaying content in read-only modes, especially in server-side environments where a full editor instance is unnecessary or impossible to instantiate.

The Collapsible plugin manages arrow navigation and Backspace behavior through two layers to ensure consistent selection movement around nested contentEditable and empty block boundaries:

1. Lexical Commands: Handles standard editor keyboard dispatch for critical-priority operations.
2. DOM keydown Listeners: A capture-phase listener scoped to the editor root handles native selection movement that might bypass Lexical commands.

Key behaviors:

• Edge Navigation: When navigating near an edge collapsible or decorator block, the plugin may create a temporary paragraph to facilitate movement, removing it once the selection leaves.
• Collapsed State Selection: If a selection attempt resolves into a hidden child (within a collapsed section), the plugin redirects the selection back to the visible title.

You can control how users find commands by adjusting matchingStrategy and matchingFields within SlashOptions:

• startsWith (Default): Matches the beginning of the string. Use matchingFields: ['key'] for standard behavior or ['title', 'description'] for more descriptive searches.
• fuzzy: Uses Fuse.js for flexible matching, allowing users to find items even with typos or partial character sequences.

Example of fuzzy matching:

const fuzzyMatching = {
  trigger: '#',
  matchingStrategy: 'fuzzy',
  matchingFields: ['key', 'title'],
  items: [
    { key: 'react-component', title: 'React Component' },
    { key: 'vue-template', title: 'Vue Template' },
  ],
};

The plugin supports automatic markdown serialization and deserialization using the <url> format. This allows for seamless persistence and editing.

Supported Formats:

• Standard URLs: <https://example.com>
• Email: <mailto:user@example.com>
• Phone: <tel:+1234567890>

Automatic Conversion:

• Typing: Typing a URL inside angle brackets automatically converts it to a LinkHighlightNode.
• Pasting: Pasting a URL (HTTP, Mailto, or Tel) automatically wraps it in a LinkHighlightNode if enablePasteAutoHighlight is enabled.
• Markdown Content: Pasting markdown containing <url> syntax will be converted to LinkHighlightNode instead of a standard LinkNode.