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
import { createEditorConfig, defaultExtensionNodes, defaultTheme, EditorContent, EditorRoot,} from "@typix-editor/react";import { AutocompleteExtension, AutocompleteNode,} from "@typix-editor/extension-auto-complete";import { Toolbar } from "./Toolbar";const config = createEditorConfig({ extensionNodes: [...defaultExtensionNodes, AutocompleteNode], theme: defaultTheme,});export default function AutoCompleteExample() { return ( <EditorRoot config={config}> <div className="editor-container"> <Toolbar /> <EditorContent placeholder="Start typing to see autocomplete..." /> </div> <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. |