Skip to main content

lexical

  • facebook/lexical
    • MIT, FlowJS
    • by Facebook
    • React 体验
    • EditorState single source of truth
      • reconcile DOM
    • 纯 JS 可使用
    • 基于 contentEditable
    • 替代 Draft.js
    • 性能好
      • queueMicrotask
      • React 18+ concurrent 支持
    • 支持 yjs 集成
  • adopted by
    • payloadcms
  • lexical
    • 0 依赖
  • https://playground.lexical.dev/
caution
  • 目前还相当不成熟 - 还处于快速开发阶段
    • 目前更建议使用 Tiptap
  • 节点耦合插件 - #1262
    • 无法扩展已有节点 - 做不到 Tiptap 的 Extension 效果
# react -> list,link,code,overflow,history,markdown,mark,hashtag,selection,dragon,utils,table,clipboard,rich-text,plain-text
npm add lexical @lexical/react

npm add @lexical/file

npm add y-websocket yjs @lexical/yjs
  • link-preview-generator

Notes​

Node​

  • RootNode
  • LineBreakNode - \n
  • ElementNode - 基础类
  • TextNode
    • format - bold, italic, underline, strikethrough, code, subscript, superscript
    • mode
      • token - 内容不可编辑，作为整体删除 - tiptap atom
      • inert - 类似 token，会设置 contenteditable=false
      • segmented
    • style - CSS 样式
  • DecoratorNode - 修饰现有节点 - tiptap NodeView
interface Node {
  static getType();
  static clone(node: typeof this);

  // ElementNode 没有 EditorConfig
  // TextNode 有 EditorConfig

  createDOM(config: EditorConfig): HTMLElement;
  // true - replace with createDOM
  updateDOM(prevNode: CustomParagraph, dom: HTMLElement, config: EditorConfig): boolean;

  // for DecoratorNode<React$Node>
  decorate(): React$Node;
}

Node Transform​

editor.registerNodeTransform(TextNode, (textNode) => {
  //
});

Command​

// payload
const HELLO_WORLD_COMMAND: LexicalCommand<string> = createCommand();

editor.dispatchCommand(HELLO_WORLD_COMMAND, 'Hello World!');

editor.registerCommand(
  HELLO_WORLD_COMMAND,
  (payload: string) => {
    console.log(payload); // Hello World!
    return false;
  },
  LowPriority,
);

Listener​

const removeUpdateListener = editor.registerUpdateListener(({ editorState }) => {
  editorState.read(() => {
    // 通过 $ 前缀函数 访问上下文状态
  });
  editor.update(() => {
    // transaction
  });
});

removeUpdateListener();

// 监听内容变化
editor.registerTextContentListener((textContent) => {
  console.log(textContent);
});

// 监听节点修改
editor.registerMutationListener(MyCustomNode, (mutatedNodes) => {
  // mutation: created, destroyed, updated
  for (let [nodeKey, mutation] of mutatedNodes) {
    console.log(nodeKey, mutation);
  }
});
// 只读状态变化
editor.registerReadOnlyListener((readOnly) => {
  console.log(readOnly);
});
//
editor.registerDecoratorListener((decorators) => {
  console.log(decorators);
});

Selection​

  • RangeSelection
  • NodeSelection
  • GridSelection
  • null

EditorState​