Extensions
Tab Focus
Tab key focus management for the editor
The Tab Focus extension manages Tab key behavior, allowing users to tab out of the editor to the next focusable element instead of inserting a tab character.
Demo
Loading preview...
import { EditorContent, EditorRoot, createEditorConfig, defaultExtensionNodes,} from "@typix-editor/react";import { TabFocusExtension } from "@typix-editor/extension-tab-focus";import { theme } from "./theme";import "./style.css";const config = createEditorConfig({ extensionNodes: defaultExtensionNodes, theme,});export default function TabFocusExample() { return ( <EditorRoot config={config}> <EditorContent placeholder="Press Tab to move focus away..." /> <TabFocusExtension /> </EditorRoot> );}Installation
pnpm add @typix-editor/extension-tab-focusnpm install @typix-editor/extension-tab-focusyarn add @typix-editor/extension-tab-focusSetup
import { TabFocusExtension } from '@typix-editor/extension-tab-focus';
function MyEditor() {
return (
<EditorRoot>
<EditorContent />
<TabFocusExtension />
</EditorRoot>
);
}Exports
| Export | Type | Description |
|---|---|---|
TabFocusExtension | Component | The tab focus management plugin |
Behavior
- Pressing
Tabmoves focus to the next focusable element on the page - Pressing
Shift+Tabmoves focus to the previous focusable element - Useful for forms where Tab should navigate between fields rather than indent content