Text 模块包

lexical
Created 7/17/2023
Updated 9/27/2023

Text 模块包

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

参考
注意

其中有一些方法的名称以 $ 符号开头,它们大部分是用于修改编辑器状态 EditorState 的,一般只能在 editor.update(callbackFn) 的回调函数 callbackFn 中实用

  • $canShowPlaceholder(isComposing) 返回一个布尔值,以判断是否显示占位符(输入提示符)。参数 isComposing 是一个布尔值,以表示当前是否处于「组合」输入模式
    提示

    输入提示符是在输入框内容为空时才显示的,对于编辑器而言则是指根节点里不能有内容(子节点),此时调用以上方法返回 true

    「组合」输入模式是指通过 IME 或第三方扩展接收用户输入,最终输出的内容并不是键盘上的字母,而是转换为其他语言符号

    如果参数 isComposingtrue 即表示用户当前正在使用「组合」输入模式,即使真正的内容还没有插入到编辑器中,但是所敲击过的键盘上的字母已经先显示(占位)编辑器中,所以不应该显示占位符(输入提示符),因此以上方法会返回 false

  • $canShowPlaceholderCurry(isComposing) 返回一个函数(在该函数里会调用方法 $canShowPlaceholder(isComposing)
    返回一个布尔值以表示是否显示占位符/输入提示符) ❓ 这是函数的柯里化 ❓
  • $isRootTextContentEmpty(isEditorComposing, trim?) 返回一个布尔值,以表示根节点内部(文本内容)是否为空。第一个参数 isEditorComposing 是一个布尔值,以表示当前是否处于「组合」输入模式;第二个(可选)参数 trim 是一个布尔值(默认值为 true),以表示是否删去文本的前后空格再判断内容是否为空
    提示

    「组合」输入模式是指通过 IME 或第三方扩展接收用户输入,最终输出的内容并不是键盘上的字母,而是转换为其他语言符号

    如果参数 isEditorComposingtrue 即表示用户当前正在使用「组合」输入模式,即使真正的内容还没有插入到编辑器中,但是所敲击过的键盘上的字母已经先显示(占位)编辑器中,因此以上方法会返回 true

  • $isRootTextContentEmptyCurry(isEditorComposing, trim?) 返回一个函数(在该函数里会调用方法 $isRootTextContentEmpty(isEditorComposing, trim?)
    返回一个布尔值以表示根节点内部(文本内容)是否为空。 ❓ 这是函数的柯里化 ❓
  • $findTextIntersectionFromCharacters(root, targetCharacters) 寻找一个 TextNode 文本节点,它所包含的字符串的长度需要大于(不包含等于的情况)给定的数值 targetCharacters。第一个参数 root 是编辑器的 RootNode 根节点
    返回一个对象,它包含两个属性
    • 属性 node 是符合条件的 TextNode 文本节点
    • 属性 offset 是指该 TextNode 文本节点并不作为计数的开头,而是与前一个文本节点拼凑起来,加上该节点一定 offset 数量的字符后,满足给定数值 targetCharacters 的字符

    如果编辑器中没有符合的节点,则返回 null
  • $rootTextContent() 获取 RootNode 根节点内的文本内容(相当于获取编辑器里的所有文本内容)
  • registerLexicalTextEntity(editor, getMatch, targetNode, createNode) 为给定的 targetNode节点类型注册一个 node transform 节点转换器,当 targetNode 节点内的文本内容符合/匹配特定的 getMatch 模式时,就会对节点进行转换
    它所接受的参数
    • editor 参数:编辑器实例
    • getMatch 参数:一个函数,其入参是 targetNode 目标节点中的文本内容;在函数内一般使用正则表达式对内容进行匹配;返回一个对象(其 TypeScript 类型是 EntityMatch),它包含属性 startend,都是数值,分别表示匹配部分的起始点和终止点。如果没有匹配成功,则返回 null
    • targetNode 参数:节点类型,该节点内的文本内容会被进行匹配
    • crateNode 参数:一个函数,它的入参是一个 TextNode 文本节点,其中内容是匹配的部分,然后返回所需的节点(一般是转换为其他节点,并包裹这个传入的文本节点)

    返回一个数组,其中包含了该节点转换器
    提示

    可以将以上方法的返回值解构后传递给 mergeRegister 进行统一注册

    js
    mergeRegister(
      ...registerLexicalTextEntity(editor, getMatch, targetNode, createNode),
    );
    

    mergeRegister(...func) 方法来自 @lexical/utils 模块

    该方法将一系列的注册函数封装起来,其返回值是一个函数,调用它可以一次性取消所有的注册


Copyright © 2025 Ben

Theme BlogiNote

Icons from Icônes