Hacker News new | ask | show | jobs
by dugmartin 1401 days ago
To save you some time, here is what I did to add tabs to CM 6 (I think I found it somewhere or I may have cobbled it together to insert two spaces):

First import things you need:

    import { indentMore, indentLess } from "@codemirror/commands"
Then create a command:

    export const insertTab: StateCommand = ({state, dispatch}) => {
      if (state.selection.ranges.some(r => !r.empty)) return indentMore({state, dispatch})
      dispatch(state.update(state.replaceSelection("  "), {scrollIntoView: true, userEvent: "input"}))
      return true
    }
and then add it to the keymap in your extensions array:

    const extensions: Extension[] = [
      ...other extensions here...,
      keymap.of([
          ...closeBracketsKeymap,
          ...defaultKeymap,
          ...searchKeymap,
          ...historyKeymap,
          ...completionKeymap,
          {key: "Tab", run: insertTab, shift: indentLess}
        ]),
    ]
and then pass the extensions array into where you setup your editor view, eg:

    const view = new EditorView({
      state: EditorState.create({
        doc: textarea.value,
        extensions
      }),
      parent: editor
    })
1 comments

Thank you so much! Changes are live now :)