SOLVED: Can't type after hard break

Hey there,

I am new to ProseMirror and I am using it wrapped in preact. I didn’t have many problems so far, but now I tried adding hard breaks to my editor. I basically copied the code from the prosemirror-examplesetup and the prosemirror-basic-schema:

const schema = new Schema({
    nodes: {
        doc: { content: 'block+' },
        paragraph: {
            content: 'inline*',
            group: 'block',
            parseDOM: [{ tag: 'p' }],
            toDOM() {
                return ['p', 0];
            },
        },
        text: {
            group: 'inline',
        },
        hard_break: {
            inline: true,
            group: 'inline',
            selectable: false,
            parseDOM: [{ tag: 'br' }],
            toDOM() {
                return ['br', 0];
            },
        },
    },
    marks: {...}
};

const hardBreakCommand = chainCommands(exitCode, (state, dispatch) => {
    dispatch(state.tr.replaceSelectionWith(schema.nodes.hard_break.create()).scrollIntoView());
    return true;
});

const plugins = [
    keymap({
        'Mod-b': toggleMark(schema.marks.strong),
        'Mod-i': toggleMark(schema.marks.em),
        Backspace: undoInputRule,
        'Mod-Enter': hardBreakCommand,
        'Shift-Enter': hardBreakCommand,
        Enter: splitListItem(schema.nodes.list_item),
        Tab: sinkListItem(schema.nodes.list_item),
    }),
    keymap(baseKeymap),
];

Now, if I hit Shift-Enter, a <br> is inserted, however, I can’t type after it. I am guessing it has something to do with the hard break being an inline block that does not allow content, but shouldn’t I just be able to type after any inline block?

The document looks like this after I inserted the hard break:

{
"type": "doc",
"content": [
  {
    "type": "paragraph",
    "content": [
        {
          "type": "hard_break"
        }
      ]
    }
  ]
}

I’m not seeing anything suspicious in that code. Does the same problem occur for you in the example editor on https://prosemirror.net? If not, I guess you’ll have to figure out what is different in your setup versus the prosemirror-example-setup package.

No, the problem does not occur in the example editor. I spend the last few hours trying to figure out what I did differently, but I really can’t see anything, except for that I wrap the editor in preact. But that should not be relevant, because preact only does the state management. From debugging, I am pretty sure that the error is not that transactions are not applied correctly, but rather that they are not dispatched in the first place. Do you have any idea where I could look more closely?

Ah, I fixed it! After some more trying around, I noticed that the DOMOutputSpec for the hard break must of course be ['br'] not ['br', 0]. Thank you for looking into it (and of course for developing this awesome piece of software)!

1 Like