Bug: 创建多个编辑器，输入文本会反复失去焦点

[hsuna]

bug 描述

使用editor-for-react 创建多个编辑器，在第一个编辑器输入文本，一输入文本，焦点就失去了，如果屏蔽第二个编辑器则没问题

你预期的样子是？

两个编辑器不应该相互干扰，各自输入应该没影响。

系统和浏览器及版本号

• 操作系统 Mac
• 浏览器和版本 Microsoft Edge 版本 126.0.2592.113 (正式版本) (x86_64)

wangEditor-next 版本

• "@wangeditor-next/editor": "^5.3.11",
  • "@wangeditor-next/editor-for-react": "^1.0.6",

demo 能否复现该 bug ？

能

import "@wangeditor-next/editor/dist/css/style.css"; // 引入 css
import { useState, useEffect } from "react";
import { Editor, Toolbar } from "@wangeditor-next/editor-for-react/dist/index";

function MyEditor() {
  // editor 实例
  // const [editor, setEditor] = useState<IDomEditor | null>(null)   // TS 语法
  const [editor, setEditor] = useState(null); // JS 语法

  // 编辑器内容
  const [html, setHtml] = useState(`<p>hello</p>`);

  // 工具栏配置
  // const toolbarConfig: Partial<IToolbarConfig> = { }  // TS 语法
  const toolbarConfig = {}; // JS 语法

  // 编辑器配置
  // const editorConfig: Partial<IEditorConfig> = {    // TS 语法
  const editorConfig = {
    // JS 语法
    placeholder: "请输入内容...",
  };

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  return (
    <>
      <div style={{ border: "1px solid #ccc", zIndex: 100 }}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: "1px solid #ccc" }}
        />
        <Editor
          defaultConfig={editorConfig}
          value={html}
          onCreated={setEditor}
          onChange={(editor) => setHtml(editor.getHtml())}
          mode="default"
          style={{ height: "300px", overflowY: "hidden" }}
        />
      </div>
    </>
  );
}

const App = () => {
  return (
    <div>
      <MyEditor />
      <MyEditor />
    </div>
  );
};

export default App;

最小成本的复现步骤

• 执行上述代码段，点击第一个编辑器，输入文本，即可复现

[cycleccc]

收到，这周会处理好，如果急用的话，可以试试切换 5.3.12-alpha.2 ，我回滚了 5.3.2 至 5.3.3 的代码。应该可以正常使用多编辑器了，我还没有试，正在处理另一个问题，方便的话可以试试。

[cycleccc]

我用 multi-editor.html 试过了，5.3.12-alpha.2 可以解决多编辑器的问题，不需要使用 合并 table 的话可以先用这个哈 😆

[hsuna]

下午你更新了5.3.12-alpha.2后，已经在multi-editor.html 尝试过，确实能解决，但很遗憾，我需要使用合并单元格的功能，这是我的核心需求，我们已经使用umd的方式先尝试解决了，等这边解决后再切回npm～另外@wangeditor-next/editor-for-react缺失esm文件，目前我们只能使用dist下的引入方式。

[cycleccc]

ok，感谢反馈哈

[hsuna]

最近是否有增加表格/单元格属性(背景色/边框)相关的计划呢？

[cycleccc]

@wangeditor-next/editor-for-react 补上 esm 文件了，发布了 1.0.7-0 稳定版等周末测完再发

[cycleccc]

单元格属性这个暂时没计划，现在计划是补全一些小缺陷，再补全单测，提升单测覆盖率后可以调研实现这个功能。

[cycleccc]

现在输入文本应该不会反复失去焦点了，table的话还是有这个问题，这个得从根源上把 各个编辑器分开，这个 issue 先关了，另一个 issue 处理多编辑器表格编辑相关。 增加表格/单元格属性也会另开一个 issue。