Why does the autocomplete integration not work in react-codemirror?

[chenbinli-dev]

https://codesandbox.io/p/sandbox/react-codemirror-tzhnch.

 const jsonCompletion = (context: CompletionContext) => {
    const word = context.matchBefore(/\w*/);
    if (word.from == word.to && !context.explicit) return null;
    return {
      from: word.from,
      options: [
        { label: "match", type: "keyword" },
        { label: "hello", type: "variable", info: "(World)" },
        { label: "magic", type: "text", apply: "⠁⭒*.✩.*⭒⠁", detail: "macro" },
      ],
    };
  };

    <ReactCodeMirror
        className="editor"
        theme={vscodeDarkInit({
          styles: [
            {
              tag: t.comment,
              color: "#787b80",
            },
          ],
        })}
        basicSetup={{
          crosshairCursor: false,
        }}
        extensions={[
          langs.json(),
          autocompletion({ override: [jsonCompletion] }),
        ]}
        onChange={handleChange}
      />

[jaywcjlove]

@codercoin98 Example: https://codesandbox.io/embed/vibrant-marco-p8znlj?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { autocompletion } from "@codemirror/autocomplete";

// Our list of completions (can be static, since the editor
/// will do filtering based on context).
const completions = [
  { label: "panic", type: "keyword" },
  { label: "park", type: "constant", info: "Test completion" },
  { label: "password", type: "variable" }
];

function myCompletions(context) {
  let before = context.matchBefore(/\w+/);
  // If completion wasn't explicitly started and there
  // is no word before the cursor, don't open completions.
  if (!context.explicit && !before) return null;
  return {
    from: before ? before.from : context.pos,
    options: completions,
    validFor: /^\w*$/
  };
}

function App() {
  const [value, setValue] = React.useState("// Type a 'p'\n");
  const onChange = React.useCallback((val, viewUpdate) => {
    console.log("val:", val);
    setValue(val);
  }, []);
  return (
    <CodeMirror
      value={value}
      height="200px"
      extensions={[autocompletion({ override: [myCompletions] })]}
      onChange={onChange}
    />
  );
}

export default App;