draftjs-latex-plugin按$键偶现空白无法触发内联TeX如何解决

我在Draft-JS编辑器中使用draft-js-latex-plugin包实现TeX功能，该包官方文档标注的操作逻辑为：

• 按下$键启动内联TeX
• 按下CMD + M启动TeX块
• 若需要输入$字符本身，连续输入$即可

但实际使用过程中，按下$键后会随机出现空白占位，无法正常触发内联TeX，该问题无规律偶发。当前需要将异常出现的空白占位替换为正常的内联TeX组件。

当前插件实现代码（省略无关部分）如下：

...
import { getLaTeXPlugin } from "draft-js-latex-plugin";
import "draft-js-latex-plugin/lib/styles.css";
import "katex/dist/katex.min.css";

const DraftEditor = props => {
   ...
   const LaTeXPlugin = getLaTeXPlugin();
   const plugins = [LaTeXPlugin];
   return <Editor
          customStyleMap={highlightStyleMap}
          ref={editorRef}
          handleKeyCommand={handleKeyCommand}
          editorState={editorState}
          onChange={changeHandler}
          plugins={plugins}
        />
}

这个偶发空白的根因是你把getLaTeXPlugin()写在了组件函数内部，每次组件重渲染（比如输入内容触发state更新、父组件传参变化）都会生成全新的插件实例，插件内部用来记录「当前正在输入内联TeX」的临时状态、实体和渲染组件的绑定关系会直接重置，就会出现已经插入了TeX实体但找不到对应渲染组件、只显示空白的情况。因为触发$输入的时机和重渲染时机重合是随机的，所以问题表现为无规律偶发。

修复方式很简单，把插件实例的生成逻辑移出渲染执行路径，用useMemo缓存实例，保证插件实例在组件生命周期内唯一即可：

...
import { useMemo } from "react";
import { getLaTeXPlugin } from "draft-js-latex-plugin";
import "draft-js-latex-plugin/lib/styles.css";
import "katex/dist/katex.min.css";

const DraftEditor = props => {
   ...
   // 缓存插件实例，避免重渲染时生成新实例导致内部状态丢失
   const LaTeXPlugin = useMemo(() => getLaTeXPlugin(), []);
   const plugins = useMemo(() => [LaTeXPlugin], [LaTeXPlugin]);
   
   return <Editor
          customStyleMap={highlightStyleMap}
          ref={editorRef}
          handleKeyCommand={handleKeyCommand}
          editorState={editorState}
          onChange={changeHandler}
          plugins={plugins}
        />
}

如果修复后还有历史存量的空白占位，可以在onChange回调中加一层内容扫描逻辑：检测到未绑定TeX渲染数据的LaTeX类型实体时，自动补全对应渲染字段，就能把存量空白替换为正常的内联TeX组件。

内容的提问来源于stack exchange，提问作者Asad Zubair Bhatti