Tab between heading and paragraph in custom document

[marcuslindblom]

I have this document

const CustomDocument = Document.extend({
  content: 'heading paragraph block*',
});

new Editor({
  element: document.querySelector(".element"),
  extensions: [
    CustomDocument,
    StarterKit.configure({
      document: false,
    }),
    Placeholder.configure({
      showOnlyCurrent: false,
      placeholder: ({ node }) => {
        if (node.type.name === "heading") {
          return "Document title";
        }

        return "Write something …";
      }
    })
  ],
  content:''
});

How can I make the tab key work between the heading and the paragraph?

[philippkuehn]

You have to add Tab to addKeyboardShortcuts(https://tiptap.dev/guide/custom-extensions#keyboard-shortcuts).
Find the needed position based on the current selection (editor.state.selection) and set a new text selection editor.commands.setTextSelection().

[marcuslindblom]

@philippkuehn Ok, so doing this works almost fine but selectNodeBackward does not seem to work?

const CustomHeading = Heading.extend({
  addKeyboardShortcuts() {
    return {
      'Tab': () => this.editor.commands.selectNodeForward()
    }
  },
})

const CustomParagraph = Paragraph.extend({
  addKeyboardShortcuts() {
    return {      
      'Shift-Tab': () => this.editor.commands.selectNodeBackward(),
    }
  },
})

[philippkuehn]

selectNodeForward and selectNodeBackward creates a NodeSelection. I don’t think this is what you want.