Search code examples
reactjstiptap

React TipTap - Unexptected cursor behaviour on custom TaskItem


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).

https://user-images.githubusercontent.com/14828061/193038744-bd04b1a3-27f2-49e4-bcbb-f93a8243bd22.mov

I've recreated the issue here: https://codesandbox.io/s/condescending-roentgen-9qhb23?file=/src/App.js


Solution

  • 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;
          },