Tiptap 事件在附加到通过 props 传递到组件的编辑器时不起作用

Question

我使用 useEditor 创建了一个编辑器。我想将 events 绑定到它，以获取特定标记的 active 状态，并使用 getAttributes 获取链接 href 以更新先前设置的链接的 url。我无法将这些事件绑定在我通过 props 接收该编辑器的组件中。

文件：Editor.jsx

var editor = useEditor({
    extensions: EditorExtensions,
    onUpdate({ editor }) {
      setState({
        ...state,
        json: editor.getJSON(),
        html: editor.getHTML(),
        editorTextContent: editor.state.doc.textContent,
      });
    },
  });

// passing this editor instance to toolbar down in big component
<Toolbar editor={editor} /> // relevnat part

工具栏.jsx

const Toolbar = ({ editor }) => {
  return (
    <div className="">
      <Btns.UndoBtn editor={editor} />
      <Btns.RedoBtn editor={editor} />
      <Btns.VerticalDivider />
      <Btns.BoldBtn editor={editor} />
      <Btns.ItalicBtn editor={editor} />
      <Btns.UnderlineBtn editor={editor} />
      <Btns.VerticalDivider />
    </div>

工具栏按钮.jsx

export const BoldBtn = ({ editor }) => {
  const onClick = () => editor.chain().focus().toggleBold().run();
  return (
    <IcnBtn shortcut={"Ctrl + B"} Icon={Icons.BoldIcon} onClick={onClick} />
  );
};

在工具栏按钮中，我创建了接受编辑器的不同按钮。我使用这个编辑器来更新编辑器状态，格式化文本等。这个

BoldBtn

是一个例子，我使用编辑器使文本加粗，它工作得很好。我遇到的问题存在于所有其他组件中，并且每个组件都接收一个编辑器，因此它们是相似的。

这就是问题所在 粗体

export const BoldBtn = ({ editor }) => {
  var [boldState, setBoldState] = useState(false);
  editor.on("update", ({ editor }) => {});
  editor.on("selectionUpdate", ({ editor }) => {
    var boldIsActive = editor.isActive("bold");
    setBoldState(boldIsActive);
  });

  const onClick = () => editor.chain().focus().toggleBold().run();
  return (
    <IcnBtn isActive={boldState} shortcut={"Ctrl + B"} Icon={Icons.BoldIcon} onClick={onClick} />
  );
};

onClick 内的编辑器实例完美运行>

editor.chain().focus().toggleBold().run()

。

这些

editor.on()

事件不起作用并给出这些错误

1

Cannot read properties of null (reading 'isActive')

2

TypeError: Cannot read properties of null (reading 'on')

不知何故，当它们在组件内部访问时，它们为空，并且在函数内部正常工作。 我可能会犯一个非常基本的错误，我是一名移动应用程序开发人员，请提出任何解决方案或解决此问题的方法。 谢谢你。

Answer 1

使用useEffect钩子，将编辑器作为依赖项传递，在useEffect中你可以附加事件。

    export const BoldBtn = ({ editor }) => {
      var [state, setState] = useState();
      useEffect(() => {
        if (!editor) {
          console.log("No Editor");
          return;
        }
        editor.on("update", ({ editor }) => {
          var boldIsActive = editor.isActive("bold");
          setState(boldIsActive);
          console.log("boldstate", state);
        });
      }, [editor]);
    
      const onClick = () => editor.chain().focus().toggleBold().run();
      return (
        <IcnBtn
          active={state}
          shortcut={"Ctrl + B"}
          Icon={Icons.BoldIcon}
          onClick={onClick}
        />
      );
    };