What is @codemirror/autocomplete?
The @codemirror/autocomplete package is a module for the CodeMirror code editor that provides autocompletion functionality. It can be used to suggest, complete, or hint at possible code snippets, variables, or other elements to users as they type, enhancing the coding experience by making it faster and reducing errors.
What are @codemirror/autocomplete's main functionalities?
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
});
Other packages similar to @codemirror/autocomplete
monaco-editor
The Monaco Editor is the code editor that powers VS Code, which comes with built-in autocompletion features. It is a full-featured editor with a rich API for customization, including autocompletion, but it is a standalone editor rather than a plugin.
jquery-textcomplete
A jQuery plugin for autocompletion. Unlike @codemirror/autocomplete, which is designed for code editors, jquery-textcomplete is more general-purpose and can be used for any text input field.
0.19.5 (2021-11-09)
Bug fixes
Make sure info tooltips don't stick out of the bottom of the page.
New features
The package exports a new function selectedCompletion
, which can be used to find out which completion is currently selected.
Transactions created by picking a completion now have an annotation (pickedCompletion
) holding the original completion.