[FE] RichText 富文本工具Prosemirror

Docs(官方文档)

https://prosemirror.net/docs/

RichText 富文本问题

1. 可支持多少种格式
2. 如何输入
3. 如何渲染
4. 如何保存历史
5. 是否支持多人实时更新文本交互

Basic(基本工具包)

Prosemirror State
记录当前富文本的所有状态，仅能通过Transaction更新
类:

class EditorState{
      doc:Node, // 文本的主节点
      selection: Selection, // 文本的选择
      storedMarks: Mark[], // 当前状态输入的所有标记，会被应用到下次输入的字符
      schema: Schema, // 当前文档的架构,例如paragraph,doc,text,list-node等等
      plugins: Plugin[], // 当前文本的插件
      apply: (tr)=>{}, // 使用当前的状态执行某个变换生成一个新的状态
      applyTransation: (rootTr)=>{}, // TODO: 暂时未知
      tr: Transaction, //提供定义变换的一个类
      reconfigure: (config:{schema:{},plugins:{}})=>EditorState, // 重新配置架构以及插件
      toJson:(PluginFields:{}|string|number), // 导出Json，TODO: 暂时未知
      fromJson:(config:{schema，plugins},json:Object,pluginFields: Object<Plugin>) -> EditorState // 从json导入创建状态，TODO: 目前具体未知
      static create(config:{ // 创建一个新的状态
            schema:Schema,
            doc:Node,
            selection: Selection,
            storedMarks: Mark[],
            plugins: Plugin[], 
      })->EditorState 
}

可以通过EditorState创建一个更新用的Transaction

class Transaction{
      time: Date.now(), // 与此变换想过的时间戳，可能是number格式
      storedMarks: mark[], // 该次变换的保存的标记
      selection: Selection, // 默认为上次EditorState的选择区域，但是可以被setSelection方法进行重载
      setSelection: (selection)->Transaction, // 更新变换的选择区域
      selectionSet: boolean,//当前的选择区域是否通过setSelection进行了更新
      setStoreMarks: (mark[])-> Transaction, // 修改存储的标记
      ensureMarks: (mark[])-> Transaction, // 确保标记，如果已经标记，则不执行操作， TODO: 作用未知
      addStoredMark: (mark)-> Transaction, // 添加一个标记
      removeStoredMark: (mark|markType)-> transaction, // 移除一个标记
      setTime:(time:number)->transaction, // 更新时间戳
      replaceSelection:(slice:Slice)->transaction, //设置当前的选择区域为某个切片
      replaceSelectionWith:(node:Node,inheritMarks:bool)->transaction, // 选择整个节点，同时选择是否继承当前选择节点上的所有标记
      deleteSelection:()->transaction, // 移除选择区域
      insertText:(text:string,from:number,to:number)->transaction, // 插入文本，替换(from,to)区间的文本
      setMeta:(key:string|Plugin|PluginKey,value:{})->transaction, // 存储一个元元素，存储用？ TODO: 作用未知
      getMeta:(key:string|Plugin|PluginKey)->value:{}, // 获取一个元元素
      isGeneric: boolean, // 是否具有元元素
      scrollIntoView:()->transaction //滚动到选择区域，相当于获取焦点
}

选择区域

class Selection{
      construct:($anchor:ResolvedPos,$head:ResolvedPos,ranges:[Selection Range])->Selection, // 构造函数,TODO: 具体作用
      ranges: [Selection Range], // 选择的区域
      $anchor: ResolvedPos, // 锚点,TODO: 具体作用未知
      $head: ResolvedPos, // 头,TODO: 具体作用未知
      anchor: number, // 瞄点的坐标
      head: number, // 选择的头
      from: number,
}

Prosemirror View
渲染View
Prosemirror Model
常用的模型
Prosemirror Transactions
变化