# 核心包
npm install lexical
 
# React 集成
npm install @lexical/react
 
# 富文本编辑插件
npm install @lexical/rich-text
 
# 常用功能包
npm install @lexical/list        # 列表
npm install @lexical/link         # 链接
npm install @lexical/table        # 表格
npm install @lexical/code         # 代码块
npm install @lexical/history      # 撤销/重做
npm install @lexical/clipboard    # 剪贴板
npm install @lexical/markdown     # Markdown 支持
npm install @lexical/utils        # 工具函数

import { createEditor } from 'lexical'
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
import { ContentEditable } from '@lexical/react/LexicalContentEditable'
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'

import { LexicalComposer } from '@lexical/react/LexicalComposer'
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
import { ContentEditable } from '@lexical/react/LexicalContentEditable'
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
import { HeadingNode, QuoteNode } from '@lexical/rich-text'
import { ListNode, ListItemNode } from '@lexical/list'
 
const theme = {
  heading: {
    h1: 'editor-heading-h1',
    h2: 'editor-heading-h2',
  },
  list: {
    ol: 'editor-list-ol',
    ul: 'editor-list-ul',
    listitem: 'editor-listitem',
  },
  text: {
    bold: 'editor-text-bold',
    italic: 'editor-text-italic',
    underline: 'editor-text-underline',
  },
}
 
const editorConfig = {
  namespace: 'MyEditor',
  theme,
  onError(error: Error) {
    throw error
  },
  nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode],
}
 
export default function Editor() {
  return (
    <LexicalComposer initialConfig={editorConfig}>
      <RichTextPlugin
        contentEditable={<ContentEditable className="editor-input" />}
        placeholder={<div className="editor-placeholder">开始编辑...</div>}
        ErrorBoundary={LexicalErrorBoundary}
      />
      <HistoryPlugin />
    </LexicalComposer>
  )
}

import {
  DecoratorNode,
  EditorConfig,
  LexicalEditor,
  LexicalNode,
  NodeKey,
  SerializedLexicalNode,
} from 'lexical'
 
export type SerializedImageNode = SerializedLexicalNode & {
  src: string
  altText: string
}
 
export class ImageNode extends DecoratorNode<JSX.Element> {
  __src: string
  __altText: string
 
  static getType(): string {
    return 'image'
  }
 
  static clone(node: ImageNode): ImageNode {
    return new ImageNode(node.__src, node.__altText, node.__key)
  }
 
  constructor(src: string, altText: string, key?: NodeKey) {
    super(key)
    this.__src = src
    this.__altText = altText
  }
 
  createDOM(_config: EditorConfig): HTMLElement {
    const span = document.createElement('span')
    span.setAttribute('data-lexical-image', 'true')
    return span
  }
 
  decorate(): JSX.Element {
    return (
      <img
        src={this.__src}
        alt={this.__altText}
        style={{ maxWidth: '100%' }}
      />
    )
  }
 
  serialize(): SerializedImageNode {
    return {
      ...super.serialize(),
      type: 'image',
      src: this.__src,
      altText: this.__altText,
    }
  }
 
  static importJSON(json: SerializedImageNode): ImageNode {
    return $createImageNode(json.src, json.altText)
  }
}
 
export function $createImageNode(src: string, altText: string): ImageNode {
  return new ImageNode(src, altText)
}
 
export function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode {
  return node instanceof ImageNode
}

// Lexical Extensions 是模块化的配置和行为组合
import { createEditor } from 'lexical'
 
const editor = createEditor({
  extensions: [
    // 框架无关的功能组合
    myRichTextExtension,
    myCollaborationExtension,
  ],
})

# 克隆仓库
git clone https://github.com/facebook/lexical.git
cd lexical
 
# 安装依赖
npm install
 
# 构建
npm run build
 
# 运行开发服务器
npm run dev
 
# 测试
npm run test-unit
npm run test-e2e

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { $getSelection, $createParagraphNode, $createTextNode } from 'lexical'
import { useEffect } from 'react'
 
function MyPlugin() {
  const [editor] = useLexicalComposerContext()
 
  useEffect(() => {
    // 注册命令
    return editor.registerCommand(
      MY_COMMAND,
      (payload) => {
        editor.update(() => {
          const selection = $getSelection()
          // 处理命令...
        })
        return true // 已处理
      },
      // 命令优先级
      COMMAND_PRIORITY_LOW
    )
  }, [editor])
 
  return null
}

// Transform 在节点变化时自动运行
editor.registerNodeTransform(TextNode, (textNode) => {
  // 自动将 ":)" 转换为表情
  if (textNode.__text === ':)') {
    textNode.replace($createEmojiNode('😊'))
  }
})