Bug：在`useEffect`中，设置值会报错

[hsuna]

bug 描述

在React框架中，如果我在useEffect里面初始化值，会出现报错；

你预期的样子是？

在useEffect设置值时不会报错

系统和浏览器及版本号

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

wangEditor-next 版本

• "@wangeditor-next/editor": "5.3.14"
• "@wangeditor-next/editor-for-react": "1.0.7"

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(`<p>test</p>`);

    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;

最小成本的复现步骤

• 执行上述代码段，控制台就能出现报错信息

[cycleccc]

是以前的 bug，修复多编辑器后放开了这行代码，已为不会有影响，结果还是有影响，问题不大，我晚上看下。

[cycleccc]

https://www.npmjs.com/package/@wangeditor-next/editor/v/5.3.15-experimental.15 发布了个实验版，在 沙盒里试了没有这个问题，你可以先切换这个试试。

[cycleccc]

已更新 5.3.15

[hsuna]

我设置的是以下的值，还是依然报错

setValue(`<p>123<strong>456</strong>789</p><table><tr><td>test</td></tr></table>`);

回显似乎是没问题的，单纯就是内部报错了

[cycleccc]

试试这个 5.3.15-experimental.23.22 https://www.npmjs.com/package/@wangeditor-next/editor/v/5.3.15-experimental.23.22?activeTab=readme

[cycleccc]

发布了 5.4.1 可以切换试试

[hsuna]

发布了 5.4.1 可以切换试试

没问题了～

[hsuna]

wangEditor-next 版本 "@wangeditor-next/editor": "5.5.0" "@wangeditor-next/editor-for-react": "1.0.8-beta.0"

我设置的是以下的值，发生报错了

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=""></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>`
    );

出现严重的报错现象了：

[cycleccc]

wangEditor-next 版本 "@wangeditor-next/editor": "5.5.0" "@wangeditor-next/editor-for-react": "1.0.8-beta.0"

我设置的是以下的值，发生报错了

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=""></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>`
    );

出现严重的报错现象了：

https://github.com/cycleccc/wangEditor-next/issues/133 和这个相同，暂时的解决办法是 setHtml 第一个元素为 table 时在前面先插一个占位空行元。

[cycleccc]

选区在 path [0,0,0,0] 处没正确拿到 dom，要试试解决这个问题不？