How to append to existing JavaScript autocompletions and snippets?

I know how to override the current autocompletions. But I just want to append my own list of autocompletions to the existing built-in CodeMirror v6 autocompletions.

Is there a way to do that? I thought maybe I could append my array of completions to the built-in set, but I haven’t been able to figure out how to get the current list in order to append mine to them.

Thanks,

Brendan

Just define another completion source through language data, and its result will be combined with other sources.

Thanks for the suggestion. I’m trying that now, but not getting anywhere unfortunately. This is what I’ve tried so far after hunting down examples and looking through the source code of CodeMirror to try and find out how to use languageDataOf. I’m sorry, but I’m new to CodeMirror and not super adept at JavaScript. I’m more of an Objective-C and Swift developer.

const completions = [
    {label: "fetchRecords", type: "keyword"},
    {label: "record", type: "variable", info: "The current selected record"},
    {label: "form", type: "variable", info: "The current selected form"},
    {label: "search", type: "variable", info: "The current selected search"},
    {label: "document", type: "variable", info: "The current opened document"},
    {label: "Utils", type: "keyword"},
];

function myCompletions(context) {
    let word = context.matchBefore(/\w*/)
    if (word.from == word.to && !context.explicit)
        return null
        return {
            from: word.from,
        options: completions
        }
};

function javascriptCompletions(context) {
    let word = context.matchBefore(/\w*/)
    if (word.from == word.to && !context.explicit)
        return null
        return {
            from: word.from,
        options: editorView.state.languageDataAt("autocomplete")
        }
};


const editorView = new CodeMirror.EditorView({
  doc: "",
  state: EditorState.create({
  extensions: [
      lineNumbers(),
      highlightActiveLineGutter(),
      highlightSpecialChars(),
      history(),
      foldGutter(),
      drawSelection(),
      dropCursor(),
      indentOnInput(),
      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
      bracketMatching(),
      closeBrackets(),
      autocompletion({override: [myCompletions, javascriptCompletions]}),
      rectangularSelection(),
      crosshairCursor(),
      highlightActiveLine(),
      highlightSelectionMatches(),
      keymap.of([
          ...closeBracketsKeymap,
             ...defaultKeymap,
             ...searchKeymap,
             ...historyKeymap,
             ...foldKeymap,
             ...completionKeymap,
             indentWithTab,
      ]),
      readOnly.of([]),
      lineWrapping.of([]),
      baseTheme,
      theme.of(oneDark),
      language.of(javascript()),
      listener.of([]),
  ],
  }),
  
  parent: document.body,
});

Ok, I figured it out. It was helpful for me to look at the source code of the web page that held the autocompletion documentation and sample entry field. I didn’t realize you had to setup this const and then add it to the EditorView extensions along side the autocompletion() bit.

const myNewCompletions = javascriptLanguage.data.of({
autocomplete: myCompletions
});

new EditorView({
    doc: "/** Complete tags here\n    @pa\n */\n",
    extensions: [
      basicSetup,
      javascriptLanguage,
      myNewCompletions,
      autocompletion()
    ],
    parent: document.querySelector("#editor-javascript")
  });