Lexical是Facebook（Meta）新出的一款Web富文本编辑框架。 之前Facebook的富文本编辑框架是基于React的Draft.js，过时了应该。

网上的讨论

HN：[Lexical is now open-source (web text-editor) (github.com/facebook)]](https://news.ycombinator.com/item?id=31017943)

Draft.js的问题

  • 不支持TypeScript
  • ImmutableJS伸缩性不尽人意，它也不支持Type
  • 基于分块的结构不适应复杂场景
  • 不兼容React 18+
  • 基于React DOM所导致的种种问题，比如会被浏览器扩展拦截

Lexical的途径方法

  • 基于从Draft, Slate, ProseMirror处学来的经验
  • 没有任何外部依赖，可以用于Svelte或Solid，而不仅仅是React

Lexical与ProseMirror的差异

  • 没有ProseMirror中的Mark的概念
  • Editor State即反映文档结构，又反映虚拟DOM
  • 使用DOM reconciler
  • 文本（text）有不同的属性
    • 可以分段以及分号牌，
      • 用于提升可访问性
      • 在编辑自定义emojis、hashtag、mentions的时候不用将contenteditable设置为false
        • 因为会导致NVDA、Jaws、VoiceOver这些访问性工具将其跳过

Lexical的主要作者之一是Inferno的作者

Differences between Prosemirror and Lexical

Lexical的特点

  • 核心比ProseMiirror小
  • 协作功能依赖于yjs
  • 文档没有schema，但是可以通过扩展ElementNode类型来达成
  • Flow/TypeScript是必须的
  • 已用于FB的众多产品
  • 有开发平台原生的打算
  • 不支持IE或老的Edge，与Mozilla和Google一起改进浏览器（使用了很多beforeinput）
  • 强调一流的可访问性
    • 所以PM的横板光标不受支持，因为不符合WCAG准则

Lexical的文档阅读

Introduction

讲了一些Lexical的架构设计。有意思的是DOM Reconciler（DOM比对器）。Editor State更新的时候先克隆一个Editor State，在克隆体上修改（所以是mutable的），然后比对原本的和修改后的Editor State的差异，通过将其更新到DOM上。

可以通过Listener、Node Transform、和Command影响Editor State。

Concepts

Nodes

原生定义了5种节点类型

  • RootNode
  • LineBreakNode
  • ElementNode，可扩展
  • TextNode，可扩展
  • DecoratorNode，可扩展

节点类型支持自定义辖属。

Node Transforms

更新过程是执行Transform的过程，执行到不再有可用的transform为止。transform是序列进行的操作，一个transform可能被执行多次，一个transform可以触发另外一个transform。

API

好多部分尚为空白。

lexical (core)

EditorState的定义在https://github.com/facebook/lexical/blob/09c701791e09a0551cb05ae848160fe77846807e/packages/lexical/src/LexicalEditorState.js#L62。

其他

（完）