Kbd

PreviousNext
Mark Toolbar Button
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}
Basic text formatting marks like bold, italic, and underline.
basic-marks-demo
basic-marks-demo

Features

  • Display keyboard shortcuts and key combinations
  • Keyboard shortcut support for quick formatting
  • Renders as <kbd> HTML element by default

Kit Usage

Installation

The fastest way to add the kbd plugin is with the BasicMarksKit, which includes pre-configured KbdPlugin along with other basic marks and their Plate UI components.

'use client';

import {
  BoldPlugin,
  CodePlugin,
  HighlightPlugin,
  ItalicPlugin,
  KbdPlugin,
  StrikethroughPlugin,
  SubscriptPlugin,
  SuperscriptPlugin,
  UnderlinePlugin,
} from '@platejs/basic-nodes/react';

import { CodeLeaf } from '@/components/ui/code-node';
import { HighlightLeaf } from '@/components/ui/highlight-node';
import { KbdLeaf } from '@/components/ui/kbd-node';

export const BasicMarksKit = [
  BoldPlugin,
  ItalicPlugin,
  UnderlinePlugin,
  CodePlugin.configure({
    node: { component: CodeLeaf },
    shortcuts: { toggle: { keys: 'mod+e' } },
  }),
  StrikethroughPlugin.configure({
    shortcuts: { toggle: { keys: 'mod+shift+x' } },
  }),
  SubscriptPlugin.configure({
    shortcuts: { toggle: { keys: 'mod+comma' } },
  }),
  SuperscriptPlugin.configure({
    shortcuts: { toggle: { keys: 'mod+period' } },
  }),
  HighlightPlugin.configure({
    node: { component: HighlightLeaf },
    shortcuts: { toggle: { keys: 'mod+shift+h' } },
  }),
  KbdPlugin.withComponent(KbdLeaf),
];
  • KbdLeaf: Renders keyboard shortcut elements.

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...BasicMarksKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/basic-nodes

Add Plugin

Include KbdPlugin in your Plate plugins array when creating the editor.

import { KbdPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    KbdPlugin,
  ],
});

Configure Plugin

You can configure the KbdPlugin with a custom component.

import { KbdPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
import { KbdLeaf } from '@/components/ui/kbd-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    KbdPlugin.withComponent(KbdLeaf),
  ],
});
  • withComponent: Assigns KbdLeaf to render keyboard shortcut elements.

Add Toolbar Button

You can add MarkToolbarButton to your Toolbar to toggle kbd formatting.

Plugins

KbdPlugin

Plugin for keyboard input text formatting. Renders as <kbd> HTML element by default.

Transforms

tf.kbd.toggle

Toggles the kbd formatting for the selected text.

ItalicKbd