tessl/npm-codemirror--autocomplete

Autocompletion system for the CodeMirror code editor with completion sources, snippets, and bracket closing

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

CodeMirror Autocomplete

Name: tessl/npm-codemirror--autocomplete
Author: tessl

CodeMirror Autocomplete is a comprehensive autocompletion system for the CodeMirror 6 code editor. It provides a flexible and extensible framework for implementing context-aware code completion, including features like custom completion sources, intelligent filtering and ranking, snippet-based completions with field navigation, automatic bracket closing, and a fully themeable completion interface with keyboard navigation.

Package Information

Package Name: @codemirror/autocomplete
Package Type: npm
Language: TypeScript
Installation: npm install @codemirror/autocomplete

Core Imports

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

For CommonJS:

const { autocompletion, CompletionContext, CompletionSource } = require("@codemirror/autocomplete");

Basic Usage

import { EditorView } from "@codemirror/view";
import { autocompletion, completeFromList } from "@codemirror/autocomplete";

// Basic autocompletion with fixed word list
const view = new EditorView({
  parent: document.body,
  extensions: [
    autocompletion({
      override: [completeFromList(["hello", "world", "completion"])]
    })
  ]
});

// Language-specific completion via language data
import { jsonLanguage } from "@codemirror/lang-json";

const jsonView = new EditorView({
  parent: document.body,
  extensions: [
    jsonLanguage,
    autocompletion(),
    jsonLanguage.data.of({
      autocomplete: ["id", "name", "address", "phone"]
    })
  ]
});

Architecture

CodeMirror Autocomplete is built around several key components:

Main Extension: The autocompletion() function provides the complete autocompletion system
Completion Sources: Functions that generate completion options based on context
Configuration System: Extensive options for customizing behavior and appearance
Snippet System: Template-based completions with field navigation
Bracket Closing: Automatic insertion and handling of matching brackets
View Commands: Programmatic control over completion state and selection
Filtering & Ranking: Built-in fuzzy and strict matching with customizable scoring

Capabilities

Core Autocompletion

The main autocompletion extension and essential utility functions for managing completion state.

function autocompletion(config?: CompletionConfig): Extension;

function completionStatus(state: EditorState): null | "active" | "pending";

function currentCompletions(state: EditorState): readonly Completion[];

function selectedCompletion(state: EditorState): Completion | null;

function selectedCompletionIndex(state: EditorState): number | null;

function setSelectedCompletion(index: number): StateEffect<unknown>;

const completionKeymap: readonly KeyBinding[];

Configuration

Completion Sources & Results

System for creating custom completion sources and handling completion results with filtering, validation, and dynamic updates.

interface Completion {
  label: string;
  displayLabel?: string;
  detail?: string;
  info?: string | ((completion: Completion) => CompletionInfo | Promise<CompletionInfo>);
  apply?: string | ((view: EditorView, completion: Completion, from: number, to: number) => void);
  type?: string;
  commitCharacters?: readonly string[];
  boost?: number;
  section?: string | CompletionSection;
}

type CompletionSource = (context: CompletionContext) => CompletionResult | null | Promise<CompletionResult | null>;

interface CompletionResult {
  from: number;
  to?: number;
  options: readonly Completion[];
  validFor?: RegExp | ((text: string, from: number, to: number, state: EditorState) => boolean);
  filter?: boolean;
  getMatch?: (completion: Completion, matched?: readonly number[]) => readonly number[];
  update?: (current: CompletionResult, from: number, to: number, context: CompletionContext) => CompletionResult | null;
  map?: (current: CompletionResult, changes: ChangeDesc) => CompletionResult | null;
  commitCharacters?: readonly string[];
}

Completion Sources

Snippets

Template-based completions with field navigation, supporting placeholders, default values, and tab-stop functionality.

function snippet(template: string): (editor: {state: EditorState, dispatch: (tr: Transaction) => void}, completion: Completion | null, from: number, to: number) => void;

function snippetCompletion(template: string, completion: Completion): Completion;

const nextSnippetField: StateCommand;
const prevSnippetField: StateCommand;
const clearSnippet: StateCommand;

function hasNextSnippetField(state: EditorState): boolean;
function hasPrevSnippetField(state: EditorState): boolean;

const snippetKeymap: Facet<readonly KeyBinding[], readonly KeyBinding[]>;

Snippets

Bracket Closing

Automatic insertion and handling of matching brackets, including intelligent behavior for strings and nested structures.

function closeBrackets(): Extension;

function insertBracket(state: EditorState, bracket: string): Transaction | null;

const deleteBracketPair: StateCommand;

const closeBracketsKeymap: readonly KeyBinding[];

interface CloseBracketConfig {
  brackets?: string[];
  before?: string;
  stringPrefixes?: string[];
}

Bracket Closing

View Commands

Programmatic control over completion state, selection, and lifecycle for building custom completion interfaces.

function moveCompletionSelection(forward: boolean, by?: "option" | "page"): Command;

const acceptCompletion: Command;
const startCompletion: Command;
const closeCompletion: Command;

View Commands

Types

type CompletionInfo = Node | null | {dom: Node, destroy?(): void};

interface CompletionSection {
  name: string;
  header?: (section: CompletionSection) => HTMLElement;
  rank?: number;
}

class CompletionContext {
  readonly state: EditorState;
  readonly pos: number;
  readonly explicit: boolean;
  readonly view?: EditorView;
  
  tokenBefore(types: readonly string[]): {from: number, to: number, text: string, type: any} | null;
  matchBefore(expr: RegExp): {from: number, to: number, text: string} | null;
  get aborted(): boolean;
  addEventListener(type: "abort", listener: () => void, options?: {onDocChange: boolean}): void;
}