Bug：当光标在`table`内时`setValue`，会出现`table`嵌套的问题

[hsuna]

bug 描述

当光标在table内时setValue，会出现table嵌套的问题

感觉是 #133 导致的

你预期的样子是？

正常实现table功能

系统和浏览器及版本号

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

wangEditor-next 版本

• "@wangeditor-next/editor": "5.5.0"
• "@wangeditor-next/editor-for-react": "1.0.8-beta.0"

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";

const MyEditor = () => {
  const [value, setValue] = useState("");

  // editor 实例
  const [editor, setEditor] = useState(null); // JS 语法

  // 工具栏配置
  const toolbarConfig = {}; // JS 语法

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

  const hanleChange = (editor) => {
    setValue(editor.getHtml());
  };

  // 及时销毁 editor ，重要！
  useEffect(() => {
    setValue(
      `<table style="width: auto;table-layout: fixed;height:56"><colgroup contentEditable="false"><col width=60></col><col width=60></col><col width=60></col></colgroup><tbody><tr><th colSpan="1" rowSpan="1" width="auto" style="">1</th><th colSpan="1" rowSpan="1" width="auto" style="">2</th><th colSpan="1" rowSpan="1" width="auto" style=""></th></tr><tr><td colspan="1" rowspan="1" width="auto" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"></td><td colspan="1" rowspan="1" width="auto" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"></td><td colspan="1" rowspan="1" width="auto" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"></td></tr></tbody></table><p><br></p>`
    );

    setTimeout(() => {
      setValue(
        `<table style="width: auto;table-layout: fixed;height:56"><colgroup contentEditable="false"><col width=60></col><col width=60></col><col width=60></col></colgroup><tbody><tr><th colSpan="1" rowSpan="1" width="auto" style="">2</th><th colSpan="1" rowSpan="1" width="auto" style=""></th><th colSpan="1" rowSpan="1" width="auto" style=""></th></tr><tr><td colspan="1" rowspan="1" width="auto" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"></td><td colspan="1" rowspan="1" width="auto" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"></td><td colspan="1" rowspan="1" width="auto" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"></td></tr></tbody></table><p><br></p>`
      );
    }, 3000);

    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  return (
    <div>
      <Toolbar editor={editor} defaultConfig={toolbarConfig} mode="default" />
      <Editor
        defaultConfig={editorConfig}
        value={value}
        onCreated={setEditor}
        onChange={hanleChange}
        mode="default"
      />
    </div>
  );
};

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

export default App;

最小成本的复现步骤

• 执行上述代码段
• 在计时器结束前，将光标切到2上，即可复现

如果是失焦或者是不切光标，则setValue是能复写成功的，样式也是正常显示的。