Does tab key work in codemirror 6?

1

I just found this codemirror project and I’ve started with version 6. When testing it, I noticed that the tab key doesn’t insert a tab. I check out an older version and tab works in there.

Is tab just not defined in version 6 yet or is there something I need to set up?

2

That’s intentional, and important for accessibility. See https://github.com/codemirror/codemirror.next/issues/238

3

Thanks but I really need tabs to works so I can add it. Based on the link you gave me, I tried the following code but it doesn’t work. I get cannot find name ‘keymap’. What am I doing wrong?

import { defaultKeymap, indentMore, indentLess } from "@codemirror/next/commands";
EditorState.create({
  extensions: [
    keymap([
      defaultKeymap,
      {
        key: "Tab",
        preventDefault: true,
        run: indentMore,
      },
      {
        key: "Shift-Tab",
        preventDefault: true,
        run: indentLess,
      },
    ]),
  ],
});
4

Not importing it, it seems (import {keymap} from "@codemirror/next/view"). Also, you’re passing it an invalid argument—you need ... in front of defaultKeymap for it to become part of the outer array.

5

Thank you. I’ll give that a try. I am a C# developer so this is new to me.

6

I was able to get codemirror V6 to enter a tab character but it is always at the beginning of the line. How do I get the insert to be a the carat position? Here is the code I copied.

export const insertTab: StateCommand = ({state, dispatch}) => {
  dispatch(state.update(changeBySelectedLine(state, (line, changes) => {
    changes.push({from: line.from, insert: "\t"})
  })))
  return true
}
7 
const indentWithTab = {

  key: 'Tab',

  run: insertTab

};

const state = EditorState.create({

  doc: '',

  extensions: [

    basicSetup,

    javascript(),

    EditorState.tabSize.of(2),

    keymap.of([indentWithTab])

  ]

});
8

As a follow up – is there a convenient command for “indent if at the beginning of line, but insert tab character in the middle of the line”? (This is sort of what Eclipse seems to do)

9

You may use @codemirror/command and add keymap like this

  keymap.of([
                    {
                        key: 'Tab',
                        preventDefault: true,
                        run: insertTab,
                    },
                    {
                        key: 'Shift-Tab',
                        preventDefault: true,
                        run: indentLess,
                    },
                ])

it’s worked for me :smiley: