lobehub/lobe-editor
GitHub: lobehub/lobe-editor
Stars: 136 | Forks: 19
LobeHub Editor
A modern, extensible rich text editor built on Meta's Lexical framework with dual-architecture design, featuring both a powerful kernel and React integration. Optimized for AI applications and chat interfaces. [][npm-release-link] [][github-releasedate-link] [][github-action-test-link] [][github-action-release-link][][github-contributors-link] [][github-forks-link] [][github-stars-link] [][github-issues-link] [][github-license-link] [Changelog](./CHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link] 
Table of contents
#### TOC - [✨ Features](#-features) - [📦 Installation](#-installation) - [🚀 Quick Start](#-quick-start) - [Basic Editor](#basic-editor) - [Advanced Usage with Plugins](#advanced-usage-with-plugins) - [Chat Input Component](#chat-input-component) - [Editor Kernel API](#editor-kernel-api) - [🔌 Available Plugins](#-available-plugins) - [Core Plugins](#core-plugins) - [Content Plugins](#content-plugins) - [Plugin Architecture](#plugin-architecture) - [Plugin Features](#plugin-features) - [📖 API Reference](#-api-reference) - [Editor Kernel](#editor-kernel) - [Plugin System](#plugin-system) - [🛠️ Development](#️-development) - [Setup](#setup) - [Available Scripts](#available-scripts) - [Debug Environment Variables](#debug-environment-variables) - [Project Architecture](#project-architecture) - [🤝 Contributing](#-contributing) - [🔗 Links](#-links) - [More Products](#more-products) - [Design Resources](#design-resources) - [Development Resources](#development-resources) ####
\[!\[][back-to-top\]](#readme-top)
## 🚀 Quick Start
### Basic Editor
The simplest way to get started with a fully-featured editor:
import {
INSERT_HEADING_COMMAND,
ReactCodeblockPlugin,
ReactImagePlugin,
ReactLinkPlugin,
ReactListPlugin,
} from '@lobehub/editor';
import { Editor, useEditor } from '@lobehub/editor/react';
export default function MyEditor() {
const editor = useEditor();
return (
\[!\[][back-to-top\]](#readme-top)
## 🔌 Available Plugins
### Core Plugins
| Plugin | Description | Features |
| ------------------ | ----------------------------- | --------------------------------------------------------------- |
| **CommonPlugin** | Foundation editor components | ReactEditor, ReactEditorContent, ReactPlainText, base utilities |
| **MarkdownPlugin** | Markdown processing engine | Shortcuts, transformers, serialization, custom writers |
| **UploadPlugin** | File upload management system | Priority handlers, drag-drop, multi-source uploads |
### Content Plugins
| Plugin | Description | Features |
| ------------------------ | ------------------------- | --------------------------------------------------------------- |
| **ReactSlashPlugin** | Slash command menu system | `/` and `@` triggered menus, customizable items, async search |
| **ReactMentionPlugin** | User mention support | `@username` mentions, custom markdown output, async user search |
| **ReactImagePlugin** | Image handling | Upload, display, drag & drop, captions, resizing |
| **ReactCodeblockPlugin** | Code syntax highlighting | Shiki-powered, 100+ languages, custom themes, color schemes |
| **ReactListPlugin** | List management | Ordered/unordered lists, nested lists, keyboard shortcuts |
| **ReactLinkPlugin** | Link management | Auto-detection, validation, previews, custom styling |
| **ReactTablePlugin** | Table support | Insert tables, edit cells, add/remove rows/columns, i18n |
| **ReactHRPlugin** | Horizontal rules | Divider insertion, custom styling, markdown shortcuts |
| **ReactFilePlugin** | File attachments | File upload, status tracking, validation, drag-drop |
### Plugin Architecture
#### 🧠 **Kernel Layer** (Framework-agnostic)
- **Plugin Interface**: Standardized plugin system with lifecycle management
- **Service Container**: Centralized service registration and dependency injection
- **Command System**: Event-driven command pattern for editor operations
- **Node System**: Custom node types with serialization and transformation
- **Data Sources**: Content management and format conversion (JSON, Markdown, Text)
#### ⚛️ **React Layer** (React-specific)
- **React Components**: High-level components for easy integration
- **Hook Integration**: Custom hooks for editor state and functionality
- **Event Handling**: React-friendly event system and callbacks
- **UI Components**: Pre-built UI elements with theming support
### Plugin Features
- ✅ **Fully configurable** with TypeScript-typed options
- ✅ **Composable** - use any combination together
- ✅ **Extensible** - create custom plugins using the same API
- ✅ **Event-driven** - react to user interactions and content changes
- ✅ **Service-oriented** - modular architecture with dependency injection
- ✅ **Internationalization** - Built-in i18n support where applicable
- ✅ **Markdown integration** - Shortcuts, import/export, custom transformers
- ✅ **Theme system** - Customizable styling and appearance
- ✅ **Command pattern** - Programmatic control and automation
## 📖 API Reference
#### Utility Hooks
// Get editor instance
const editor = useEditor();
// Helper for plugin configuration
const PluginWithConfig = Editor.withProps(ReactFilePlugin, {
handleUpload: async (file) => ({ url: 'uploaded-url' }),
});
### Editor Kernel
#### `createEditor(): IEditor`
Create a new editor kernel instance:
const editor = createEditor();
#### `IEditor` Interface
Core editor methods:
interface IEditor {
// Content management
setDocument(type: string, content: any): void;
getDocument(type: string): any;
// Plugin system
registerPlugin
\[!\[][back-to-top\]](#readme-top)
## 🛠️ Development
### Setup
You can use Github Codespaces for online development:
[][github-codespace-link]
Or clone it for local development:
[][bun-link]
$ git clone https://github.com/lobehub/lobe-editor.git
$ cd lobe-editor
$ pnpm install
$ pnpm run dev
This will start the Dumi documentation server with live playground at `http://localhost:8000`.
### Available Scripts
| Script | Description |
| -------------------- | --------------------------------------------- |
| `pnpm dev` | Start Dumi development server with playground |
| `pnpm build` | Build library and generate type definitions |
| `pnpm test` | Run tests with Vitest |
| `pnpm test:coverage` | Run tests with coverage report |
| `pnpm lint` | Lint and fix code with ESLint |
| `pnpm type-check` | Type check with TypeScript |
| `pnpm ci` | Run all CI checks (lint, type-check, test) |
| `pnpm docs:build` | Build documentation for production |
| `pnpm release` | Publish new version with semantic-release |
### Debug Environment Variables
LobeHub Editor includes comprehensive debug logging that can be controlled via environment variables:
#### Basic Debug Configuration
# Enable all LobeHub Editor debug output
DEBUG=lobe-editor:*
# Enable only important logs (recommended for development)
DEBUG=lobe-editor:*:info,lobe-editor:*:warn,lobe-editor:*:error
# Enable specific components
DEBUG=lobe-editor:kernel,lobe-editor:plugin:*
#### Available Debug Categories
| Category | Description | Example |
| ------------------ | ------------------------- | ------------------------------------ |
| `kernel` | Core editor functionality | `DEBUG=lobe-editor:kernel` |
| `plugin:*` | All plugins | `DEBUG=lobe-editor:plugin:*` |
| `plugin:slash` | Slash commands | `DEBUG=lobe-editor:plugin:slash` |
| `plugin:mention` | Mention system | `DEBUG=lobe-editor:plugin:mention` |
| `plugin:image` | Image handling | `DEBUG=lobe-editor:plugin:image` |
| `plugin:file` | File operations | `DEBUG=lobe-editor:plugin:file` |
| `service:*` | All services | `DEBUG=lobe-editor:service:*` |
| `service:upload` | Upload service | `DEBUG=lobe-editor:service:upload` |
| `service:markdown` | Markdown processing | `DEBUG=lobe-editor:service:markdown` |
#### Debug Levels
| Level | Browser Display | Usage | Environment Variable |
| ------- | --------------------- | ------------------- | --------------------------- |
| `debug` | Console.log (gray) | Detailed tracing | `DEBUG=lobe-editor:*:debug` |
| `info` | Console.log (blue) | General information | `DEBUG=lobe-editor:*:info` |
| `warn` | Console.warn (yellow) | Warnings | `DEBUG=lobe-editor:*:warn` |
| `error` | Console.error (red) | Errors | `DEBUG=lobe-editor:*:error` |
#### Development Usage
# Full debug during development
DEBUG=lobe-editor:*
# Only critical logs
DEBUG=lobe-editor:*:error,lobe-editor:*:warn
# Plugin debugging
DEBUG=lobe-editor:plugin:*
# Service debugging
DEBUG=lobe-editor:service:*
### Project Architecture
lobe-editor/
├── src/
│ ├── editor-kernel/ # 🧠 Core editor logic
│ │ ├── kernel.ts # Main editor class with plugin system
│ │ ├── data-source.ts # Content management (JSON/Markdown/Text)
│ │ ├── service.ts # Service container and dependency injection
│ │ ├── plugin/ # Plugin base classes and interfaces
│ │ ├── react/ # React integration layer
│ │ └── types.ts # TypeScript interfaces
│ │
│ ├── plugins/ # 🔌 Feature plugins
│ │ ├── common/ # 🏗️ Foundation components
│ │ │ ├── plugin/ # Base editor plugin
│ │ │ ├── react/ # ReactEditor, ReactEditorContent, ReactPlainText
│ │ │ ├── data-source/ # Content data sources
│ │ │ └── utils/ # Common utilities
│ │ │
│ │ ├── markdown/ # 📝 Markdown processing engine
│ │ │ ├── plugin/ # Markdown transformation plugin
│ │ │ ├── service/ # Markdown shortcut service
│ │ │ ├── data-source/ # Markdown serialization
│ │ │ └── utils/ # Transformer utilities
│ │ │
│ │ ├── upload/ # 📤 Upload management system
│ │ │ ├── plugin/ # Upload handling plugin
│ │ │ ├── service/ # Upload service with priority system
│ │ │ └── utils/ # Upload utilities
│ │ │
│ │ ├── slash/ # ⚡ Slash commands (/, @)
│ │ │ ├── plugin/ # Slash detection plugin
│ │ │ ├── react/ # ReactSlashPlugin, ReactSlashOption
│ │ │ ├── service/ # Slash service with fuzzy search
│ │ │ └── utils/ # Search and trigger utilities
│ │ │
│ │ ├── mention/ # 👤 @mention system
│ │ │ ├── plugin/ # Mention plugin with decorators
│ │ │ ├── react/ # ReactMentionPlugin
│ │ │ ├── command/ # INSERT_MENTION_COMMAND
│ │ │ └── node/ # MentionNode with serialization
│ │ │
│ │ ├── codeblock/ # 🎨 Syntax highlighting
│ │ │ ├── plugin/ # Codeblock plugin with Shiki
│ │ │ ├── react/ # ReactCodeblockPlugin
│ │ │ ├── command/ # Language and color commands
│ │ │ └── utils/ # Language detection
│ │ │
│ │ ├── image/ # 🖼️ Image upload & display
│ │ │ ├── plugin/ # Image plugin with captions
│ │ │ ├── react/ # ReactImagePlugin
│ │ │ ├── command/ # INSERT_IMAGE_COMMAND
│ │ │ └── node/ # BaseImageNode, ImageNode
│ │ │
│ │ ├── table/ # 📊 Table support
│ │ │ ├── plugin/ # Table plugin with i18n
│ │ │ ├── react/ # ReactTablePlugin
│ │ │ ├── command/ # Table manipulation commands
│ │ │ ├── node/ # Enhanced TableNode
│ │ │ └── utils/ # Table operations
│ │ │
│ │ ├── file/ # 📎 File attachments
│ │ │ ├── plugin/ # File plugin with status tracking
│ │ │ ├── react/ # ReactFilePlugin
│ │ │ ├── command/ # INSERT_FILE_COMMAND
│ │ │ ├── node/ # FileNode with metadata
│ │ │ └── utils/ # File operations
│ │ │
│ │ ├── link/ # 🔗 Link management
│ │ │ ├── plugin/ # Link plugin with validation
│ │ │ ├── react/ # ReactLinkPlugin
│ │ │ ├── command/ # Link commands
│ │ │ └── utils/ # URL validation and detection
│ │ │
│ │ ├── list/ # 📋 Lists (ordered/unordered)
│ │ │ ├── plugin/ # List plugin with nesting
│ │ │ ├── react/ # ReactListPlugin
│ │ │ ├── command/ # List manipulation commands
│ │ │ └── utils/ # List operations
│ │ │
│ │ └── hr/ # ➖ Horizontal rules
│ │ ├── plugin/ # HR plugin with styling
│ │ ├── react/ # ReactHRPlugin
│ │ ├── command/ # HR insertion commands
│ │ └── node/ # HorizontalRuleNode
│ │
│ ├── react/ # ⚛️ High-level React components
│ │ ├── Editor/ # Main Editor component with plugins
│ │ ├── ChatInput/ # Chat interface component
│ │ ├── ChatInputActions/ # Chat action buttons
│ │ ├── ChatInputActionBar/ # Action bar layout
│ │ ├── SendButton/ # Send button with states
│ │ └── CodeLanguageSelect/ # Code language selector
│ │
│ └── index.ts # Public API exports
│
├── docs/ # 📚 Documentation source
├── tests/ # 🧪 Test files
├── vitest.config.ts # Test configuration
└── .dumi/ # Dumi doc build cache
The architecture follows a **dual-layer design**:
1. **Kernel Layer** (`editor-kernel/`) - Framework-agnostic core with plugin system
2. **React Layer** (`react/` + `plugins/*/react/`) - React-specific implementations
Each plugin follows a consistent structure:
- **`plugin/`** - Core plugin logic and node definitions
- **`react/`** - React components and hooks (if applicable)
- **`command/`** - Editor commands and handlers
- **`service/`** - Services and business logic
- **`node/`** - Custom Lexical nodes
- **`utils/`** - Utility functions and helpers
This allows for maximum flexibility - you can use just the kernel for custom integrations, or the React components for rapid development.
[](#readme-top)
## 🔗 Links
### More Products
- **[🤯 Lobe Chat](https://github.com/lobehub/lobe-chat)** - An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application.
- **[🅰️ Lobe Theme](https://github.com/lobehub/sd-webui-lobe-theme)** - The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.
- **[🧸 Lobe Vidol](https://github.com/lobehub/lobe-vidol)** - Experience the magic of virtual idol creation with Lobe Vidol, enjoy the elegance of our Exquisite UI Design, dance along using MMD Dance Support, and engage in Smooth Conversations.
### Design Resources
- **[🍭 Lobe UI](https://ui.lobehub.com)** - An open-source UI component library for building AIGC web apps.
- **[🥨 Lobe Icons](https://lobehub.com/icons)** - Popular AI / LLM Model Brand SVG Logo and Icon Collection.
- **[📊 Lobe Charts](https://charts.lobehub.com)** - React modern charts components built on recharts
### Development Resources
- **[🎤 Lobe TTS](https://tts.lobehub.com)** - A high-quality & reliable TTS/STT library for Server and Browser
- **[🌏 Lobe i18n](https://github.com/lobehub/lobe-cli-toolbox/blob/master/packages/lobe-i18n)** - Automation ai tool for the i18n (internationalization) translation process.
[More Resources](https://lobehub.com/resources)
[](#readme-top)
#### 📝 License
Copyright © 2025 [LobeHub][profile-link]. This project is [MIT](./LICENSE) licensed.
标签：自定义脚本