Tiptap 如何在 Shift-Enter 上创建段落 (p)，而不是 br？

Question

使用 TipTap，我试图避免添加 <br /> , 但创建一个 <p></p>相反，焦点在 <p>|</p> 内当用户点击 shift-Enter但我无法让它发挥作用。

这是我到目前为止所做的:

new (class extends Extension {
    keys () {
        return {
            'Shift-Enter' (state, dispatch, view) {
                const { schema, tr } = view.state
                const paragraph = schema.nodes.paragraph

                console.log(tr.storedMarks)
                const transaction = tr.deleteSelection().replaceSelectionWith(paragraph.create(), true).scrollIntoView()
                view.dispatch(transaction)
                return true
            }
        }
    }
})()

我该怎么做？

Answer 1

我不知道这是否仍然相关，但由于我一直在寻找同样的东西，我找到了两种方法来完成这项工作。

注意:我正在使用 tiptap v2，如果这不是问题，那么:

我覆盖了 HardBreak 扩展，因为它是使用 Shift-Enter 键绑定(bind)的扩展。看起来有点像；

const CustomHardBreak = HardBreak.extend({
  addKeyboardShortcuts() {
    return {
      "Mod-Enter": () => this.editor.commands.setHardBreak(),
      "Shift-Enter": () => this.editor.commands.addNewline(),
    };
  },
});

然后像这样使用它；

editor = new Editor({
  extensions: [
    customNewline,
    CustomHardBreak,
  ]
});

1. 使用默认的编辑器命令 createParagraphNear。例如 this.editor.commands.createParagraphNear()

2. 我尝试从您的代码中创建一个自定义扩展，并以类似于上述命令的方式结束，即；

export const customNewline = Extension.create({
  name: "newline",
  priority: 1000, // Optional
  addCommands() {
    return {
      addNewline:
        () =>
        ({ state, dispatch }) => {
          const { schema, tr } = state;
          const paragraph = schema.nodes.paragraph;

          const transaction = tr
            .deleteSelection()
            .replaceSelectionWith(paragraph.create(), true)
            .scrollIntoView();
          if (dispatch) dispatch(transaction);
          return true;
        },
    };
  },
  addKeyboardShortcuts() {
    return {
      "Shift-Enter": () => this.editor.commands.addNewline(),
    };
  },
});

并将其作为扩展添加到我的编辑器实例中。

附言:他们都工作，几乎完全一样，我还没有发现区别。但是，如果您这样调用它，则有些“陷阱”；这两种方法都不适用于空行/节点，必须在光标前添加一个字符才能起作用，任何字符，甚至是空格。