4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:Tea9,--- title: Keyboard Input description: Style keyboard shortcuts and key names. docs: - route: /docs/basic-marks title: Basic Marks - route: /docs/components/kbd-node title: Keyboard Input Leaf - route: /docs/components/more-toolbar-button title: More Toolbar Button --- Keyboard Input applies the `kbd` leaf mark to selected text. Use it for shortcuts, key names, and command hints that should render as ``. ## Features - `KEYS.kbd` leaf mark. - Hard selection affinity. - HTML deserialization from `kbd`. - `` rendering by default. - Registry `KbdLeaf` for styled keyboard input. - Static rendering support through `KbdLeafStatic`. ## Kit Usage ### Add Basic Marks `BasicMarksKit` includes `KbdPlugin.withComponent(KbdLeaf)`. It does not add a shortcut or input rule for keyboard input. ```tsx import { createPlateEditor } from 'platejs/react'; import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit'; export const editor = createPlateEditor({ plugins: [...BasicMarksKit], }); ``` ### Add the Leaf `KbdLeaf` provides the registry styling for the `` element. ### Add a Toolbar Control The registry `MoreToolbarButton` toggles keyboard input from the More menu. ```tsx import { MoreToolbarButton } from '@/components/ui/more-toolbar-button'; export function FormattingMoreMenu() { return ; } ``` ## Manual Usage Install the mark package. ```bash npm install @platejs/basic-nodes ``` Add `KbdPlugin` directly when you want the default `` render. ```tsx import { KbdPlugin } from '@platejs/basic-nodes/react'; import { createPlateEditor } from 'platejs/react'; export const editor = createPlateEditor({ plugins: [KbdPlugin], }); ``` Attach the registry leaf when you want the same visual treatment as the kit. ```tsx import { KbdPlugin } from '@platejs/basic-nodes/react'; import { KbdLeaf } from '@/components/ui/kbd-node'; export const kbdPlugin = KbdPlugin.withComponent(KbdLeaf); ``` ## Ownership | Surface | Owner | What It Does | |---------|-------|--------------| | `BaseKbdPlugin` | `@platejs/basic-nodes` | Headless keyboard-input mark, HTML parser, render tag, selection rule, and `toggle` transform. | | `KbdPlugin` | `@platejs/basic-nodes/react` | React wrapper for the headless keyboard-input mark. | | `KbdLeaf` | Registry UI | Styled client `` leaf using `PlateLeaf`. | | `KbdLeafStatic` | Registry UI | Static rendering version using `SlateLeaf`. | | `BasicMarksKit` | Registry | Adds `KbdPlugin.withComponent(KbdLeaf)`. | | `MoreToolbarButton` | Registry UI | Calls `editor.tf.toggleMark(KEYS.kbd)` from the More menu. | The package owns the mark. The registry owns keycap styling and toolbar placement. ## Behavior | Behavior | Source | |----------|--------| | Mark key | `KEYS.kbd` | | Leaf behavior | `node.isLeaf: true` | | Toggle transform | `editor.tf.kbd.toggle()` calls `editor.tf.toggleMark(type)`. | | Selection affinity | `hard` | | HTML tags | `kbd` | | Render output | `kbd` | | Kit component | `KbdLeaf` | | Registry toolbar | `MoreToolbarButton` toggles `KEYS.kbd`. | ## API Reference | API | Package | Use | |-----|---------|-----| | `BaseKbdPlugin` | `@platejs/basic-nodes` | Headless keyboard-input plugin. | | `KbdPlugin` | `@platejs/basic-nodes/react` | React keyboard-input plugin. | | `tf.kbd.toggle()` | `@platejs/basic-nodes` | Toggles the keyboard-input mark at the selection. | | `KbdLeaf` | Registry UI | Styled client keyboard-input leaf. | | `KbdLeafStatic` | Registry UI | Styled static keyboard-input leaf. | 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"../../content/docs/(plugins)/(marks)/kbd.mdx","content":"$4f","type":"registry:file","target":"content/docs/plate/(plugins)/(marks)/kbd.mdx"}],"className":"h-[70svh] min-h-80"}]]}]