自定义Tiptap HardBreak扩展：按下Enter后光标不显示问题求助

自定义Tiptap扩展实现按下Enter键插入<br>标签，标签能正常插入，但存在光标异常：按下Enter后光标看似移至新行，但闪烁光标需开始输入才会显示，当前行输入时光标正常，用户无法直观知晓输入位置。尝试在<br>后添加新Paragraph也未解决问题。

相关代码 #

import {HardBreak} from "@tiptap/extension-hard-break";

const Linebreak = HardBreak.extend({
    group: 'block',
    content: 'inline*',
    inline: false,
    addCommands() {
        return {
            setLineBreak: () => ({ commands, editor }) => {
                const { state } = editor;
                const { selection } = state;
                const { $head } = selection;
                const position = $head.after();

                commands.insertContentAt({ from: position, to: position }, { type: this.name });
                return true;
            }
        };
    },

    addKeyboardShortcuts() {
        return {
            'Enter': () => {
                return this.editor.commands.setLineBreak();
            },
        };
    }
});

export { Linebreak, Linebreak as default };

你错误地将原本是inline类型的HardBreak扩展成了block类型节点，还添加了content: 'inline*'属性，完全违背了HardBreak的设计初衷——它是用于插入行内硬换行的节点。这种错误的节点定义会导致Tiptap的光标渲染逻辑混乱：插入自定义的block节点后，编辑器无法正确识别光标应该停留的可编辑位置，所以光标不会显示，直到输入触发重新渲染。

恢复HardBreak的inline属性，同时调整命令逻辑，确保插入<br>后光标能正确定位到换行后的位置：

方案一：使用原生命令处理 #

import { HardBreak } from "@tiptap/extension-hard-break";

const Linebreak = HardBreak.extend({
    // 移除错误的block相关配置，保持原HardBreak的inline特性
    addCommands() {
        return {
            setLineBreak: () => ({ commands }) => {
                // 用HardBreak原生的insert命令，自动处理光标位置
                return commands.insertHardBreak();
            }
        };
    },

    addKeyboardShortcuts() {
        return {
            'Enter': () => {
                return this.editor.commands.setLineBreak();
            },
        };
    }
});

export { Linebreak, Linebreak as default };

方案二：手动控制光标位置 #

如果需要自定义插入逻辑，可手动设置光标到<br>之后：

import { HardBreak } from "@tiptap/extension-hard-break";
import { NodeSelection } from "prosemirror-state";

const Linebreak = HardBreak.extend({
    addCommands() {
        return {
            setLineBreak: () => ({ commands, tr }) => {
                const hardBreak = commands.schema.nodes.hardBreak.create();
                tr.insert(tr.selection.head, hardBreak);
                // 将光标移动到硬换行节点之后
                tr.setSelection(NodeSelection.create(tr.doc, tr.selection.head + 1));
                return true;
            }
        };
    },

    addKeyboardShortcuts() {
        return {
            'Enter': () => {
                return this.editor.commands.setLineBreak();
            },
        };
    }
});

export { Linebreak, Linebreak as default };

关键说明 #

• HardBreak本身就是用于插入<br>的行内节点，无需修改它的group、inline属性，否则会破坏编辑器的节点结构逻辑。
• 确保插入后光标能正确定位到<br>之后的可编辑位置，编辑器才能正常渲染光标。

内容的提问来源于stack exchange，提问作者justlikeThat