Extensions
Keywords
Highlight specific keywords in the editor
The Keywords extension highlights predefined keywords in the editor content using a custom KeywordNode.
Demo
import { createEditorConfig, defaultExtensionNodes, defaultTheme, EditorContent, EditorRoot,} from "@typix-editor/react";import { KeywordsExtension, KeywordNode,} from "@typix-editor/extension-keywords";import { Toolbar } from "./Toolbar";const config = createEditorConfig({ extensionNodes: [...defaultExtensionNodes, KeywordNode], theme: defaultTheme,});export default function KeywordsExample() { return ( <EditorRoot config={config}> <div className="editor-container"> <Toolbar /> <EditorContent placeholder='Type your message… (Try "congratulations", "felicitaciones", "恭喜", "축하해")' /> </div> <KeywordsExtension /> </EditorRoot> );}Installation
pnpm add @typix-editor/extension-keywordsnpm install @typix-editor/extension-keywordsyarn add @typix-editor/extension-keywordsSetup
Register the KeywordNode and add the extension:
import { createEditorConfig, defaultExtensionNodes } from '@typix-editor/react';
import { KeywordsExtension, KeywordNode } from '@typix-editor/extension-keywords';
const config = createEditorConfig({
extensionNodes: [...defaultExtensionNodes, KeywordNode],
});
function MyEditor() {
return (
<EditorRoot config={config}>
<EditorContent />
<KeywordsExtension />
</EditorRoot>
);
}Exports
| Export | Type | Description |
|---|---|---|
KeywordsExtension | Component | The keyword detection plugin |
KeywordNode | Lexical Node | Node for highlighted keywords |
$createKeywordNode | Function | Create a keyword node |
$isKeywordNode | Function | Type guard for keyword nodes |
Nodes
| Node | Description |
|---|---|
KeywordNode | Renders keyword text with special styling. Must be registered in editor config. |