Extensions
Keywords
Highlight specific keywords in the editor
The Keywords extension highlights predefined keywords in the editor content using a custom KeywordNode.
Demo
Loading preview...
import { EditorContent, EditorRoot, createEditorConfig, defaultExtensionNodes,} from "@typix-editor/react";import { KeywordsExtension, KeywordNode,} from "@typix-editor/extension-keywords";import { theme } from "./theme";import "./style.css";const config = createEditorConfig({ extensionNodes: [...defaultExtensionNodes, KeywordNode], theme,});export default function KeywordsExample() { return ( <EditorRoot config={config}> <EditorContent placeholder='Type "congratulations" to see it highlighted...' /> <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. |