Editor Note

CodeMirror 概述

CodeMirror Autocomplete 模块

CodeMirror Commands 模块

CodeMirror Language 模块

CodeMirror State 模块

CodeMirror View 模块

Editor State

Lexical 采用抽象的数据模型来表示编辑器在页面上的 DOM 结构和行为，Editor State 编辑器状态就是指这一份数据

节点

Lexical 编辑器的内容是由各种类型的节点 nodes 构成的

响应性

Lexical 提供多种时机 hook 可以对编辑器的各种变更做出响应，让编辑器的交互更灵活多变，包括 listener 侦听器、node transform 节点转换、command dispatch 指令分发

选区

Lexical 的选区 selection 是编辑器内容中被选中的区域，它是 Editor State 编辑器状态里的一部分。

主题

Lexical 支持为编辑器设置外观主题，主要是通过在不同类型的节点上设置 class 类名

代码节点

Lexical 推出了一个模块包 @lexical/code 提供了两个自定义节点 CodeNode 代码节点和 CodeHighlightNode 高亮代码节点，通过解读源码学习如何使用 Lexical

可折叠容器

Lexical 官方制作了一个节点（插件）示例 Collapsible Container 可折叠容器，实现类似 HTML <details> 标签（折叠与展开文本）的功能

链接节点

Lexical 推出了一个模块包 @lexical/link 提供了一个自定义节点 LinkNode 链接节点，通过解读源码学习如何使用 Lexical

列表节点

Lexical 推出了一个模块包 @lexical/list 提供了两个自定义节点 ListNode 列表节点和 ListItemNode 列表项节点，通过解读源码学习如何使用 Lexical

兼容 markdown

Lexical 推出了一个模块包 @lexical/markdown 让富文本编辑器兼容 Markdown 文件，通过解读源码学习如何使用 Lexical

构建纯文本编辑器

Lexical 推出了一个模块包 @lexical/plain-text 可用于快速构建一个纯文本编辑器，通过解读源码学习如何使用 Lexical

构建富文本编辑器

Lexical 推出了一个模块包 @lexical/rich-text 可用于快速构建一个富文本编辑器，通过解读源码学习如何使用 Lexical

Lexical 常见问题集合

记录 Lexical 一些常见问题，也是一些方法的速览手册

Lexical 简介

Lexical 是一个用于构建可拓展的网页文本编辑器 JavaScript 工具库。

Clipboard 模块包

Lexical 提供一个模块包 @lexical/clipboard，其中有一些关于复制、剪切、粘贴的实用方法

Lexical 核心模块

Lexical 的核心模块 lexical 提供了一些方法以实现编辑器的基础功能

Selection 模块包

Lexical 提供一个模块包 @lexical/selection，其中有一些关于选区的实用方法

Text 模块包

Lexical 提供一个模块包 @lexical/text，其中有一些关于操作文本的实用方法

Utils 模块包

Lexical 提供一个模块包 @lexical/utils，提供了一些通用的方法

Lezer 语法描述文件

对特定编程语言的语法规则描述编写在后缀为 .grammar 的文件里

Lezer 概述

Lezer 语法高亮系统

Lezer 的语法高亮系统分为两部分：

使用 Lezer 语法树

由 @lezer/generator 生成的 JavaScript 文件，其中导出的变量（默认名称）parse 绑定的是一个 LRParser 实例，调用其方法 parse 对给定内容（符合 Input 类型的对象或纯字符串）进行解析，获得语法树

ProseMirror Basic Example

ProseMirror 在官方文档中演示了如何制作一个基础编辑器，完整的源码可以查看相关的 Github 仓库

ProseMirror Custom Schema Example

本文介绍 ProseMirror 官方提供的几个例子，从最基本的 schema 入手，然后介绍构建自定义的节点和样式标记，以及如何使用指令

ProseMirror Dino Example For Command

ProseMirror 在官方文档中演示了如何创建自定义 node 节点，并创建自定义指令（以实现点击按钮往编辑器中插入该节点的功能），完整的源码可以查看相关的 Github 仓库

ProseMirror Example For Decoration

ProseMirror 支持通过 Decoration 装饰器为编辑器添加自定义视图

ProseMirror Example For NodeView

ProseMirror 支持通过 NodeView 节点视图为编辑器添加自定义视图

ProseMirror Markdown 模块

prosemirror-markdown 模块用于实现 markdown 与 prosemirror 之间的转换

ProseMirror Schema Basic 模块

prosemirror-schema-basic 模块提供了一个 schema 数据结构的约束对象，以及它的配置对象（符合一种 TypeScript interface SchemaSpec）的属性 nodes 和属性 marks 的值（分别表示该文档所支持的节点类型和样式标记类型）

ProseMirror Schema List 模块

prosemirror-schema-list 模块提供了一些与列表节点相关的属性和方法，以便为编辑器提供有序列表和无序列表的支持

ProseMirror Tooltip Example For PluginView

ProseMirror 在官方文档中演示了如何通过 plugin view 插件为编辑器添加自定义视图（可交互的 tooltip 提示框），完整的源码可以查看相关的 Github 仓库

ProseMirror 编程式操作文档

一般用户需要与编辑器的在页面的视图直接交互（光标聚焦到文档上，然后通过敲击键盘）才可以修改文档内容

ProseMirror History 模块

prosemirror-history 模块为编辑器提供 undo 撤销和 redo 重做的功能，其中需要恢复的历史记录是可选择的（即不单单能回滚到上一个操作），还可以选择性地保留某些修改（这对于协同编辑很重要）。

ProseMirror Input Rules 模块

prosemirror-inputrules 模块用于将一些输入规则 input rules 与编辑器绑定，当用户输入特定的内容时编辑器会作出响应，例如对文字内容进行转换

ProseMirror Model 模块

prosemirror-model 模块主要与文档内容相关，包括文档结构（节点 node、片段 fragment、标记 mark、切片 slice），节点的数据结构（schema 即编辑器可以容纳哪些类型的内容），解析文档的位置（resolve position），所对应的页面元素（与 DOM 之间的转换）。

ProseMirror State 模块

ProseMirror 将编辑器的状态存储到一个对象中，prosemirror-state 模块提供了相关的类和方法用于生成 state 编辑器状态。另外该模块该定义了 selection 选区（表示用户框选的内容范围）和 plugin 插件系统（可用于拓展编辑器状态）。

ProseMirror Transform 模块

prosemirror-transform 模块主要与文档的修改相关，让修改文档的步骤可以被记录下来，使得操作可以 replayed 重放/重新执行，或对使得变更可以 reordered 重新排序。

ProseMirror View 模块

prosemirror-view 模块主要用于将编辑器状态对象 state 展示在页面（渲染为 DOM），并处理用户与编辑器的交互事件。

ProseMirror 概述