You cannot press enter or use the arrow keys to move after an inline block element when it has non-editable content after it

[stevemckenzie]

What’s the bug you are facing?

If you have a custom extension that is an inline block element and it has content after it that is not editable, you cannot press enter to split the block and you cannot use the arrow keys to move the cursor after your inline block.

Which browser was this experienced in? Are any special extensions installed?

Chrome / Firefox

How can we reproduce the bug on our side?

• In the code sandbox example below, click the custom inlineSource element (Word)
• Press enter (nothing will happen)
• Using your keyboard, move to the end of "Word"
• Press the right arrow key

Can you provide a CodeSandbox?

https://codesandbox.io/s/young-silence-hc2uqg?file=/src/App.tsx

What did you expect to happen?

• I expected the block to split and a new paragraph to be created below
• I expected the cursor to move AFTER the word (source) and the custom inlineSource to no longer be in focus.

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[mylesj]

I also encountered these scenarios while I have been working with the library but I don't think that they're bugs.

---

you cannot press enter to split the block

This is the case irrespective of whether there is static / uneditable content within the node. I interpreted this behaviour as intentional though - unlike marks, it's not obvious how nodes should be split (or merged) since they could have any arbitrary state (as attributes). I think it's up to developers to decide how to resolve that via the addKeyboardShortcuts configuration.

I could be wrong though - tangentially; if the hard-break extension is added, Shift-Enter will split the node. So I am interested to know what the expectation is from a consistency standpoint.

---

you cannot use the arrow keys to move the cursor

This seems to be a browser-native behaviour specifically related to HTMLElement.contentEditable (which ProseMirror uses under-the-hood). It's not well documented but to get around it, you have to explicitly add contentEditable={false} to the elements in your node-view containing static text content.

---

I forked your code sandbox here with some changes:

• https://codesandbox.io/s/quiet-shape-wpk53l?file=/src/App.tsx

[stevemckenzie]

@mylesj thanks for the input!

I can see what you mean about splitting nodes in this case. As a user, this feels like a bug so would love to address it.

Setting contentEditable={false} does fix the cursor issue! Thanks for that!

[bdbch]

Thanks @mylesj for helping out on this one! Did this help with your issue @stevemckenzie? Anything open we should look into?

[mylesj]

@bdbch No worries. I would just restate that if my assumption about the intended Enter-key behaviour was correct, then I would also expect the hard-break behaviour to be consistent in not splitting nodes.

[bdbch]

Alright - I'll close this issue. If you still think there is an issue with Tiptap reopen and let me know!