GitHub image
@codemirror/autocomplete
⌘K
Exports
Readme
Classes
1
CompletionContext
Docs
Import
Tests
3
References
2

An instance of this is passed to completion source functions.

class CompletionContext {

Create a new completion context. (Mostly useful for testing completion sources—in the editor, the extension will create these for you.)

constructor(
state: EditorState,
pos: number,
explicit: boolean
): CompletionContext

The editor state that the completion happens in.

state: EditorState

The position at which the completion is happening.

pos: number

Indicates whether completion was activated explicitly, or implicitly by typing. The usual way to respond to this is to only return completions when either there is part of a completable entity before the cursor, or explicit is true.

explicit: boolean

Get the extent, content, and (if there is a token) type of the token before this.pos.

tokenBefore: (
types: ReadonlyArray<string>
) => { from: number, to: number, text: string, type: _lezer_common.NodeType }

Get the match of the given expression directly before the cursor.

matchBefore: (expr: RegExp) => { from: number, to: number, text: string }

Yields true when the query has been aborted. Can be useful in asynchronous queries to avoid doing work that will be ignored.

aborted: boolean

Allows you to register abort handlers, which will be called when the query is aborted.

addEventListener: (type: "abort", listener: () => void) => void
}
Constants
5
acceptCompletion
Docs
Import
Tests
3
References
2
any
clearSnippet
Docs
Import
Tests
3
References
2
any
closeCompletion
Docs
Import
Tests
3
References
2
any
nextSnippetField
Docs
Import
Tests
3
References
2
any
prevSnippetField
Docs
Import
Tests
3
References
2
any
Functions
9
autocompletion
Docs
Import
Tests
3
References
2

Returns an extension that enables autocompletion.

function autocompletion(config?: CompletionConfig): any
completeFromList
Docs
Import
Tests
3
References
2

Given a a fixed array of options, return an autocompleter that completes them.

function completeFromList(list: ReadonlyArray<(string | Completion)>): CompletionSource
completionStatus
Docs
Import
Tests
3
References
2

Get the current completion status. When completions are available, this will return "active". When completions are pending (in the process of being queried), this returns "pending". Otherwise, it returns null.

function completionStatus(state: EditorState): ("active" | "pending")
currentCompletions
Docs
Import
Tests
3
References
2

Returns the available completions as an array.

function currentCompletions(state: EditorState): ReadonlyArray<Completion>
ifIn
Docs
Import
Tests
3
References
2

Wrap the given completion source so that it will only fire when the cursor is in a syntax node with one of the given names.

function ifIn(nodes: ReadonlyArray<string>, source: CompletionSource): CompletionSource
ifNotIn
Docs
Import
Tests
3
References
2

Wrap the given completion source so that it will not fire when the cursor is in a syntax node with one of the given names.

function ifNotIn(nodes: ReadonlyArray<string>, source: CompletionSource): CompletionSource
moveCompletionSelection
Docs
Import
Tests
3
References
2

Returns a command that moves the completion selection forward or backward by the given amount.

function moveCompletionSelection(forward: boolean, by?: "option" | "page"): any
snippet
Docs
Import
Tests
3
References
2

Convert a snippet template to a function that can apply it. Snippets are written using syntax like this:

"for (let ${index} = 0; ${index} < ${end}; ${index}++) {\n\t${}\n}"

Each ${} placeholder (you may also use #{}) indicates a field that the user can fill in. Its name, if any, will be the default content for the field.

When the snippet is activated by calling the returned function, the code is inserted at the given position. Newlines in the template are indented by the indentation of the start line, plus one indent unit per tab character after the newline.

On activation, (all instances of) the first field are selected. The user can move between fields with Tab and Shift-Tab as long as the fields are active. Moving to the last field or moving the cursor out of the current field deactivates the fields.

The order of fields defaults to textual order, but you can add numbers to placeholders (${1} or ${1:defaultText}) to provide a custom order.

function snippet(
template: string
): (
editor: { state: EditorState, dispatch: (tr: Transaction) => void },
_completion: Completion,
from: number,
to: number
) => void
snippetCompletion
Docs
Import
Tests
3
References
2

Create a completion from a snippet. Returns an object with the properties from completion, plus an apply function that applies the snippet.

function snippetCompletion(template: string, completion: Completion): Completion
generic_call
1
completionKeymap
Docs
Import
Tests
3
References
2
ReadonlyArray<any>
Interfaces
2
Completion
Docs
Import
Tests
3
References
2

Objects type used to represent individual completions.

interface Completion {

The label to show in the completion picker. This is what input is matched agains to determine whether a completion matches (and how well it matches).

label: string

An optional short piece of information to show (with a different style) after the label.

detail?: string

Additional info to show when the completion is selected. Can be a plain string or a function that'll render the DOM structure to show when invoked.

info?: string | (completion: Completion) => (Node | Promise<Node>)

How to apply the completion. The default is to replace it with its label. When this holds a string, the completion range is replaced by that string. When it is a function, that function is called to perform the completion.

apply?:
|
string
|
(view: EditorView, completion: Completion, from: number, to: number) => void

The type of the completion. This is used to pick an icon to show for the completion. Icons are styled with a CSS class created by appending the type name to "cm-completionIcon-". You can define or restyle icons by defining these selectors. The base library defines simple icons for class, constant, enum, function, interface, keyword, method, namespace, property, text, type, and variable.

Multiple types can be provided by separating them with spaces.
type?: string

When given, should be a number from -99 to 99 that adjusts how this completion is ranked compared to other completions that match the input as well as this one. A negative number moves it down the list, a positive number moves it up.

boost?: number
}
CompletionResult
Docs
Import
Tests
3
References
2

Interface for objects returned by completion sources.

interface CompletionResult {

The start of the range that is being completed.

from: number

The end of the range that is being completed. Defaults to the main cursor position.

to?: number

The completions returned. These don't have to be compared with the input by the source—the autocompletion system will do its own matching (against the text between from and to) and sorting.

options: ReadonlyArray<Completion>

When given, further input that causes the part of the document between (mapped) from and to to match this regular expression will not query the completion source again, but continue with this list of options. This can help a lot with responsiveness, since it allows the completion list to be updated synchronously.

span?: RegExp

By default, the library filters and scores completions. Set filter to false to disable this, and cause your completions to all be included, in the order they were given. When there are other sources, unfiltered completions appear at the top of the list of completions. span must not be given when filter is false, because it only works when filtering.

filter?: boolean
}
Type Aliases
2
CompletionSource
Docs
Import
Tests
3
References
2

The function signature for a completion source. Such a function may return its result synchronously or as a promise. Returning null indicates no completions are available.

type CompletionSource = () => (CompletionResult | Promise<CompletionResult>)
completeAnyWord
Docs
Import
Tests
3
References
2

The function signature for a completion source. Such a function may return its result synchronously or as a promise. Returning null indicates no completions are available.

type CompletionSource = () => (CompletionResult | Promise<CompletionResult>)
Description
Autocompletion for the CodeMirror code editor
Install
yarn add @codemirror/autocomplete
Copy
Details
MIT License
6 Dependencies
Bundles TypeScript Types
Metrics
Weekly Downloads
Keywords