Using tab key for autocomplete suggestions

v6
1

Currently, we see auto-complete menu from code mirror. but when i press tab it doesnt add the selected suggestion to the editor. instead, a tab key is added to the text.

How can we enable tab auto completion for codemirror?

2

You could bind tab to acceptCompletion.

1 Like
3

thanks, it worked

4

Is there a good way to do this while also using the indentWithTab package?

Here’s my attempt which seems to work

keymap.of([
        {
          key: 'Tab',
          preventDefault: true,
          shift: indentLess,
          run: e => {
            if (!completionStatus(e.state)) return indentMore(e);
            return acceptCompletion(e);
          },
        },
      ])
2 Likes
5

Hi!
… and how to do it? is there an example?

6

I’m working with react but this could also fit to you, this is the extensions:

import ReactCodeMirror, {
  placeholder,
} from "@uiw/react-codemirror";
import { markdown } from "@codemirror/lang-markdown";
import {
  globalCompletion,
  localCompletionSource,
  python,
} from "@codemirror/lang-python";
import { json } from "@codemirror/lang-json";
import {
  acceptCompletion,
  autocompletion,
  CompletionContext,
} from "@codemirror/autocomplete";
import { useCallback, useEffect, useState } from "react";
import { keymap } from "@codemirror/view";
import { indentWithTab } from "@codemirror/commands";

 setExtensions([
        python().extension,
        json(),
        keymap.of([{ key: "Tab", run: acceptCompletion }, indentWithTab]),
        autocompletion({
          override: [
            (context: CompletionContext) =>
              myCompletions(context, listOfPromptVariables, true),
          ],
        }),
      ]);

and also for the component I needed to put indentWithTab in false

<ReactCodeMirror
    value={value}
    theme={"light"}
    extensions={extensions}
    height={"100%"}
    onChange={onChange}
    basicSetup={codeOptions}
    indentWithTab={false}
/>