I've just started using https://tiptap.dev as a framework for rich text editing.
I'm using a custom React component based on the TaskItem extension. When I use these assigned keyboard shortcuts I get the expected result but the cursor isn't following into newly created nodes (see video below).
I've recreated the issue here: https://codesandbox.io/s/condescending-roentgen-9qhb23?file=/src/App.js
It is a strange behavior. With a pure JS created node-view
, the cursor jumps to new line as one would expect. With React rendered node-view
, there are some wrappings of div
around what's actually rendered in DOM. I suspect those might be interfering with the working of splitListItem
as desired (but not totally sure).
I can get the jumping to next list item behavior as follows though :-
Enter: () => {
this.editor.commands.splitListItem("taskItem")
const endPos = this.editor.state.tr.selection.anchor;
this.editor.chain().focus(endPos);
return true;
},