tiptap - 在当前节点的下方/末尾插入节点

Question

我正在尝试使用reactjs 创建一个带有tiptap 的文本编辑器。我想在编辑器的每个“块”（paragraph块、blockquote块、codeblock块...）旁边创建一个按钮，允许用户在所选块之前添加一个新的空块。它看起来像这样（概念编辑器）：

所以我尝试执行此操作的方法是将光标的位置设置在当前节点的末尾：

src/components/blocks/Paragraph.js

const Paragraph = (props) => {
    // ...

    

    return {
        // ...
        <button onMouseDown={() => {
            // ...

            // props.getPos() gives the position at the beginning of the block
            // props.node.nodeSize gives the "length" of the node
            const endPos = props.getPos() + props.node.nodeSize;
            props.editor.commands.focus(endPos);

            // ...
        }}>
             Add block below
        </button>
    }
}

所以在这一点上，它有效。node但是，当我尝试在这个位置插入新的时......

// It will insert a paragraph node containing text "New block added"
props.editor.commands.insertContent({
    "type":"paragraph",
    "content":[
        {
            "type":"text",
            "text":"New block added"
        }
    ]
})

...我收到错误：TypeError: Cannot read property 'nodeType' of null

因此，为了让您详细了解此错误，我在codesandbox.io 上创建了一个沙箱。要重现该错误，您只需将注意力集中在编辑器上，随意编写一些内容，然后单击+按钮即可。您应该看到该错误。

在此先感谢您的帮助 ！

Answer 1

目前的解决方案

目前我找到的最佳解决方案：

// Last position of the current node (props are available in a react node view: https://tiptap.dev/guide/node-views/react#all-available-props)
const endPos = props.getPos() + props.node.nodeSize

// I focus the start of the editor because
// when the cursor is at the end of the node below which 
// we want to add a block, it doesn't focus the next block
props.editor.commands.focus('start')

props.editor
    .chain()
    .insertContentAt(endPos, {type: "paragraph"})
    .focus(endPos)
    .run()