Bold

Add strong inline text formatting.

Basic Marks Mark Toolbar Button Plugin Shortcuts

Bold applies the bold leaf mark to selected text. BoldPlugin owns the mark key, shortcut, HTML parsing, render tag, and toggle transform.

Loading…

Features

KEYS.bold leaf mark.
Default ⌘B / Ctrl+B shortcut.
HTML deserialization from strong, b, and bold font weight.
<strong> rendering by default.
Optional Markdown-style input rules through BoldRules.
Toolbar support through MarkToolbarButton.

Kit Usage

Add Basic Marks

BasicMarksKit includes BoldPlugin, bold input rules, and the standard toolbar buttons that use KEYS.bold.

'use client';
 
import {
  BoldRules,
  CodeRules,
  HighlightRules,
  ItalicRules,
  MarkComboRules,
  StrikethroughRules,
  SubscriptRules,
  SuperscriptRules,
  UnderlineRules,
} from '@platejs/basic-nodes';
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.configure({
    inputRules: [
      BoldRules.markdown({ variant: '*' }),
      BoldRules.markdown({ variant: '_' }),
      MarkComboRules.markdown({ variant: 'boldItalic' }),
      MarkComboRules.markdown({ variant: 'boldUnderline' }),
      MarkComboRules.markdown({ variant: 'boldItalicUnderline' }),
      MarkComboRules.markdown({ variant: 'italicUnderline' }),
    ],
  }),
  ItalicPlugin.configure({
    inputRules: [
      ItalicRules.markdown({ variant: '*' }),
      ItalicRules.markdown({ variant: '_' }),
    ],
  }),
  UnderlinePlugin.configure({
    inputRules: [UnderlineRules.markdown()],
  }),
  CodePlugin.configure({
    inputRules: [CodeRules.markdown()],
    node: { component: CodeLeaf },
    shortcuts: { toggle: { keys: 'mod+e' } },
  }),
  StrikethroughPlugin.configure({
    inputRules: [StrikethroughRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+shift+x' } },
  }),
  SubscriptPlugin.configure({
    inputRules: [SubscriptRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+comma' } },
  }),
  SuperscriptPlugin.configure({
    inputRules: [SuperscriptRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+period' } },
  }),
  HighlightPlugin.configure({
    inputRules: [
      HighlightRules.markdown({ variant: '==' }),
      HighlightRules.markdown({ variant: '≡' }),
    ],
    node: { component: HighlightLeaf },
    shortcuts: { toggle: { keys: 'mod+shift+h' } },
  }),
  KbdPlugin.withComponent(KbdLeaf),
];

'use client';
 
import {
  BoldRules,
  CodeRules,
  HighlightRules,
  ItalicRules,
  MarkComboRules,
  StrikethroughRules,
  SubscriptRules,
  SuperscriptRules,
  UnderlineRules,
} from '@platejs/basic-nodes';
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.configure({
    inputRules: [
      BoldRules.markdown({ variant: '*' }),
      BoldRules.markdown({ variant: '_' }),
      MarkComboRules.markdown({ variant: 'boldItalic' }),
      MarkComboRules.markdown({ variant: 'boldUnderline' }),
      MarkComboRules.markdown({ variant: 'boldItalicUnderline' }),
      MarkComboRules.markdown({ variant: 'italicUnderline' }),
    ],
  }),
  ItalicPlugin.configure({
    inputRules: [
      ItalicRules.markdown({ variant: '*' }),
      ItalicRules.markdown({ variant: '_' }),
    ],
  }),
  UnderlinePlugin.configure({
    inputRules: [UnderlineRules.markdown()],
  }),
  CodePlugin.configure({
    inputRules: [CodeRules.markdown()],
    node: { component: CodeLeaf },
    shortcuts: { toggle: { keys: 'mod+e' } },
  }),
  StrikethroughPlugin.configure({
    inputRules: [StrikethroughRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+shift+x' } },
  }),
  SubscriptPlugin.configure({
    inputRules: [SubscriptRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+comma' } },
  }),
  SuperscriptPlugin.configure({
    inputRules: [SuperscriptRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+period' } },
  }),
  HighlightPlugin.configure({
    inputRules: [
      HighlightRules.markdown({ variant: '==' }),
      HighlightRules.markdown({ variant: '≡' }),
    ],
    node: { component: HighlightLeaf },
    shortcuts: { toggle: { keys: 'mod+shift+h' } },
  }),
  KbdPlugin.withComponent(KbdLeaf),
];

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

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

Use MarkToolbarButton with KEYS.bold.

import { BoldIcon } from 'lucide-react';
import { KEYS } from 'platejs';
 
import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';
 
export function BoldToolbarButton() {
  return (
    <MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)">
      <BoldIcon />
    </MarkToolbarButton>
  );
}

import { BoldIcon } from 'lucide-react';
import { KEYS } from 'platejs';
 
import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';
 
export function BoldToolbarButton() {
  return (
    <MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)">
      <BoldIcon />
    </MarkToolbarButton>
  );
}

Manual Usage

Install the mark package.

pnpm add @platejs/basic-nodes

pnpm add @platejs/basic-nodes

Add BoldPlugin directly when you do not want the whole kit.

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

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

import { BoldRules } from '@platejs/basic-nodes';
import { BoldPlugin } from '@platejs/basic-nodes/react';
 
export const boldPlugin = BoldPlugin.configure({
  inputRules: [
    BoldRules.markdown({ variant: '*' }),
    BoldRules.markdown({ variant: '_' }),
  ],
});

import { BoldRules } from '@platejs/basic-nodes';
import { BoldPlugin } from '@platejs/basic-nodes/react';
 
export const boldPlugin = BoldPlugin.configure({
  inputRules: [
    BoldRules.markdown({ variant: '*' }),
    BoldRules.markdown({ variant: '_' }),
  ],
});

Ownership

Surface	Owner	What It Does
`BaseBoldPlugin`	`@platejs/basic-nodes`	Headless bold mark, HTML parser, render tag, and `toggle` transform.
`BoldPlugin`	`@platejs/basic-nodes/react`	React wrapper with default `mod+b` shortcut.
`BoldRules.markdown`	`@platejs/basic-nodes`	Optional mark input rule factory.
`BasicMarksKit`	Registry	Adds `BoldPlugin` with `*` and `_` Markdown-style input rules.
`MarkToolbarButton`	Registry UI	Reads active mark state and calls the mark toggle hook.

The package owns the mark. The registry owns toolbar placement and icon choice.

Behavior

Behavior	Source
Mark key	`KEYS.bold`
Leaf behavior	`node.isLeaf: true`
Toggle transform	`editor.tf.bold.toggle()` calls `editor.tf.toggleMark(type)`.
Shortcut	`BoldPlugin` registers `mod+b`.
HTML tags	`strong`, `b`
HTML styles	`font-weight: 600`, `700`, or `bold`
HTML guard	Ignores descendants where `fontWeight` is `normal`.
Render output	`strong`

API Reference

API	Package	Use
`BaseBoldPlugin`	`@platejs/basic-nodes`	Headless bold plugin.
`BoldPlugin`	`@platejs/basic-nodes/react`	React bold plugin with shortcut defaults.
`BoldRules.markdown(options)`	`@platejs/basic-nodes`	Creates a bold mark input rule.
`tf.bold.toggle()`	`@platejs/basic-nodes`	Toggles the bold mark at the selection.

Marks Italic

On This Page

Features Kit Usage Add Basic Marks Add A Toolbar Button Manual Usage Ownership Behavior API Reference

Build your editor

Production-ready AI template and reusable components.