Hacker News new | ask | show | jobs
by tonyonodi 1401 days ago
Yeah, honestly this has been annoying me too, I just haven't got around to fixing it. It's using CodeMirror 6 as the editor, the author said he deliberately made this version not "break" the default tab behaviour, which I think is understandable as a library author, but that makes it my job to fix!
2 comments

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
    })
Thank you so much! Changes are live now :)
I thought CM had some example code on how to override the tab behaviour. Might be worth checking out as I agree it sucks to not have tab = indent 4 spaces
2 spaces!

(ducks) (but srsly)

Actually you are right :)