Keyboard Input Leaf

Features

• KEYS.kbd leaf mark.
• Hard selection affinity.
• HTML deserialization from kbd.
• <kbd> rendering by default.
• Registry KbdLeaf for styled keyboard input.
• Static rendering support through KbdLeafStatic.

Usage

Add Basic Marks

BasicMarksKit includes KbdPlugin.withComponent(KbdLeaf). It does not add a shortcut or input rule for keyboard input.

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 <kbd> element.

Add a Toolbar Control

The registry MoreToolbarButton toggles keyboard input from the More menu.

import { MoreToolbarButton } from "@/components/ui/more-toolbar-button";

export function FormattingMoreMenu() {
  return <MoreToolbarButton />;
}