Tab key behavior

[Alecyrus]

Describe the bug
Tab kay would blur the editor, how should i do to prevent this behavior ? It seems like the editor could not receive the tab input

Expected behavior
Four space or normal behaviors like vs code.

Environment

• macOS Catalina
• Chrome 76
• Version Latest
• Desktop

[Alecyrus]

I modify the ListItem.js file, not sure it is an appropriate way...

 keys({ type }) {
    return {
      Enter: splitListItem(type),
      Tab: chainCommands(sinkListItem(type), insertText("    ")),
      "Shift-Tab": liftListItem(type)
    };
  }

Where is ListItem.js ? i.e. what is the location of ListItem.js in the directory.

[PrimozRome]

@Alecyrus Has this been fixed. TAB behaviour is still broken... It is a major issue!

[Alecyrus]

Where is ListItem.js ? i.e. what is the location of ListItem.js in the directory.

You might be just import ListItem from tiptap-extension. I copy these nodes and marks file from source code of tiptap-extension.

[Alecyrus]

@Alecyrus Has this been fixed. TAB behaviour is still broken... It is a major issue!

It works for me now. Could you please offer more information about this?

[PrimozRome]

@Alecyrus it is not working for me. I am using version "tiptap": "^1.11.0" and here is my Editor setup:

    this.editor = new Editor({
      extensions: [
        new Bold(),
        new Italic(),
        new Strike(),
        new Underline(),
        new Link(),
        new Heading({ levels: [1, 2, 3] }),
        new BulletList(),
        new ListItem(),
        new OrderedList(),
        new History(),
        new Placeholder({
          emptyNodeText: this.$t(this.placeholder)
        })
      ],

[Alecyrus]

Where you import ListItem from ? tiptap-extension? If so, you need to copy ListItem.js file from tiptap-extension and edit it, then import ListItem from the modified version of ListItem.js, and then it should work.

[Alecyrus]

@Alecyrus Has this been fixed. TAB behaviour is still broken... It is a major issue!

It works for me now. Could you please offer more information about this?

That is because the editor do not capture TAB key event when you are typing in paragraph, we need to add TAB shortcuts in our editor instance, but it should not be added to Paragraph node, which will cause other unexpected behavior when the cursor in ListItem node. So, we need to add the TAB shortcut to ListItem node with chainCommands function.

[iannator10]

@Alecyrus Where can you find the chainCommands function? also the insertText function?

What I did is I copied the listItem.js in the tiptap-extensions folder, then I paste it on my main components folder. After that I import it on my editor.vue component, but it did not work,

Also, I edited the listItems.js on the tiptap-extensions folder like this:

import { Node } from 'tiptap'
import { splitListItem, liftListItem, sinkListItem } from 'tiptap-commands'

export default class ListItem extends Node {

  get name() {
    return 'list_item'
  }

  get schema() {
    return {
      content: 'paragraph block*',
      defining: true,
      draggable: false,
      parseDOM: [
        { tag: 'li' },
      ],
      toDOM: () => ['li', 0],
    }
  }

  keys({ type }) {
    return {
      Enter: splitListItem(type),
      Tab: chainCommands(sinkListItem(type), insertText("    ")),
      "Shift-Tab": liftListItem(type)
    };
  }

}

But it's still not working. Thank you in advance!

[Alecyrus]

tiptap-commands

[iannator10]

Bro @Alecyrus Thank you so much. I have been looking for tab key solutions for about 2 days now :) It's now working

[kyleslight]

From my perspective it's a common case to avoid editor's blurring after typing Tab...

There should be a more elegant (and official) way to do so 😂

[MiloLug]

So is there any "official" way to deal with tabs now..?