Extensions
Auto Complete
Word auto-completion suggestions as you type
The Auto Complete extension provides inline word completion suggestions based on a dictionary or custom word list.
Demo
Loading preview...
import { EditorContent, EditorRoot, createEditorConfig, defaultExtensionNodes,} from "@typix-editor/react";import { AutocompleteExtension, AutocompleteNode,} from "@typix-editor/extension-auto-complete";import { theme } from "./theme";import "./style.css";const config = createEditorConfig({ extensionNodes: [...defaultExtensionNodes, AutocompleteNode], theme,});export default function AutoCompleteExample() { return ( <EditorRoot config={config}> <EditorContent placeholder="Start typing..." /> <AutocompleteExtension /> </EditorRoot> );}Installation
pnpm add @typix-editor/extension-auto-completenpm install @typix-editor/extension-auto-completeyarn add @typix-editor/extension-auto-completeSetup
Register the AutocompleteNode in your editor config and add the extension component:
import { createEditorConfig, defaultExtensionNodes } from '@typix-editor/react';
import { AutocompleteExtension, AutocompleteNode } from '@typix-editor/extension-auto-complete';
const config = createEditorConfig({
extensionNodes: [...defaultExtensionNodes, AutocompleteNode],
});
function MyEditor() {
return (
<EditorRoot config={config}>
<EditorContent />
<AutocompleteExtension />
</EditorRoot>
);
}Exports
| Export | Type | Description |
|---|---|---|
AutocompleteExtension | Component | The autocomplete plugin |
AutocompleteNode | Lexical Node | Custom node for autocomplete suggestions |
Nodes
| Node | Description |
|---|---|
AutocompleteNode | Renders inline completion text. Must be registered in editor config. |