@codemirror/autocomplete

Autocompletion

Enables autocompletion in the CodeMirror editor. As the user types, suggestions are displayed in a dropdown, allowing for quick insertion of code snippets.

import { autocompletion } from '@codemirror/autocomplete';

// To enable autocompletion in a CodeMirror editor
new EditorView({
  extensions: [autocompletion()],
  parent: document.body
});

Customizable Completion Source

Allows developers to provide a custom source for completions, enabling the suggestion of context-specific code snippets or keywords.

import { autocompletion, CompletionSource } from '@codemirror/autocomplete';

const myCompletionSource: CompletionSource = (context) => {
  // Custom logic to provide completions
  return [{ label: 'mySnippet', type: 'keyword' }];
};

// To use the custom completion source
new EditorView({
  extensions: [autocompletion({ override: [myCompletionSource] })],
  parent: document.body
});

Asynchronous Completion

Supports asynchronous computation of completions, allowing for the integration of dynamic data sources or external APIs for suggestions.

import { autocompletion, CompletionResult } from '@codemirror/autocomplete';

const asyncCompletionSource = async (context): Promise<CompletionResult> => {
  // Fetch or compute completions asynchronously
  return { from: context.pos, options: [{ label: 'asyncSnippet', type: 'function' }] };
};

// To use asynchronous completions
new EditorView({
  extensions: [autocompletion({ override: [asyncCompletionSource] })],
  parent: document.body
});