or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

bracket-closing.mdcompletion-sources.mdconfiguration.mdindex.mdsnippets.mdview-commands.md
tile.json

index.mddocs/

CodeMirror Autocomplete

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;
}