Basic Marks

Common inline text formatting marks.

Basic Marks covers the common inline formatting marks: bold, italic, underline, strikethrough, code, subscript, superscript, highlight, and kbd. The package owns mark plugins and transforms; the registry kit adds leaf components, toolbar wiring, and Markdown-style input rules.

Bold

Use bold for strong emphasis.

Italic

Use italic for emphasis or stylistic text.

Underline

Use underline for underlined text.

Strikethrough

Use strikethrough for deleted or replaced text.

Code

Use code for inline code and technical terms.

Subscript

Use sub for subscript text.

Superscript

Use sup for superscript text.

Kbd

Use kbd for keyboard shortcuts.

Highlight

Use highlight for marked text.

Loading…

Features

Leaf plugins for common mark keys.
Toggle transforms through each mark plugin.
HTML deserialization for semantic tags and styles.
Markdown-style input rules in the registry kit.
Registry leaves for code, highlight, and keyboard text.
Toolbar support through MarkToolbarButton.

Kit Usage

Add The Kit

BasicMarksKit is the full client-side registry kit. It includes mark plugins, input rules, CodeLeaf, HighlightLeaf, and 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),
];

'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 for direct mark toggles.

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>
  );
}

Ownership

Surface	Owner	What It Does
`BasicMarksPlugin`	`@platejs/basic-nodes/react`	Groups bold, code, italic, strikethrough, subscript, superscript, and underline.
`BaseBasicMarksPlugin`	`@platejs/basic-nodes`	Headless grouping plugin for the same seven marks.
`BasicMarksKit`	Registry	Adds the full mark set, input rules, and client leaf components.
`BaseBasicMarksKit`	Registry	Adds static/base mark plugins with static code, highlight, and kbd leaves.
Individual mark plugins	`@platejs/basic-nodes`	Own mark keys, HTML parsing, render tags, and `toggle` transforms.
`MarkToolbarButton`	Registry UI	Reads mark state and calls the mark toolbar hook.

BasicMarksPlugin is smaller than BasicMarksKit: highlight and kbd are separate plugins that the registry kit includes.

Mark Set

Mark	Plugin	Key	Render	Notes
Bold	`BoldPlugin`	`KEYS.bold`	`strong`	Deserializes `strong`, `b`, and bold font weight.
Italic	`ItalicPlugin`	`KEYS.italic`	`em`	Deserializes `em`, `i`, and italic font style.
Underline	`UnderlinePlugin`	`KEYS.underline`	`u`	Deserializes `u` and underline text decoration.
Strikethrough	`StrikethroughPlugin`	`KEYS.strikethrough`	`s`	Uses directional selection affinity.
Code	`CodePlugin`	`KEYS.code`	`code`	Uses hard selection affinity and skips `pre` HTML parents.
Subscript	`SubscriptPlugin`	`KEYS.sub`	`sub`	Toggle removes superscript.
Superscript	`SuperscriptPlugin`	`KEYS.sup`	`sup`	Toggle removes subscript.
Highlight	`HighlightPlugin`	`KEYS.highlight`	`mark`	Uses directional selection affinity.
Kbd	`KbdPlugin`	`KEYS.kbd`	`kbd`	Uses hard selection affinity.

Each base mark plugin extends editor.tf.<mark>.toggle() by calling editor.tf.toggleMark(type).

Input Rules

BasicMarksKit registers input rules explicitly. The package plugins do not enable them by default.

Rule Family	Kit Registration
`BoldRules.markdown`	`variant: '*'` and `variant: '_'`
`ItalicRules.markdown`	`variant: '*'` and `variant: '_'`
`UnderlineRules.markdown`	Default underline rule
`CodeRules.markdown`	Default inline code rule
`StrikethroughRules.markdown`	Default strikethrough rule
`SubscriptRules.markdown`	Default subscript rule
`SuperscriptRules.markdown`	Default superscript rule
`HighlightRules.markdown`	`variant: '=='` and `variant: '≡'`
`MarkComboRules.markdown`	Bold/italic/underline combinations

See Plugin Input Rules for the runtime model.

Manual Usage

Install the package when you want to compose marks yourself.

pnpm add @platejs/basic-nodes

pnpm add @platejs/basic-nodes

Add only the marks you need.

components/editor/mark-plugins.tsx

import {
  BoldPlugin,
  CodePlugin,
  ItalicPlugin,
  UnderlinePlugin,
} from '@platejs/basic-nodes/react';
 
export const markPlugins = [
  BoldPlugin,
  ItalicPlugin,
  UnderlinePlugin,
  CodePlugin,
];

components/editor/mark-plugins.tsx

import {
  BoldPlugin,
  CodePlugin,
  ItalicPlugin,
  UnderlinePlugin,
} from '@platejs/basic-nodes/react';
 
export const markPlugins = [
  BoldPlugin,
  ItalicPlugin,
  UnderlinePlugin,
  CodePlugin,
];

Use the individual pages for mark-specific setup and component details.

API Reference

API	Package	Use
`BasicMarksPlugin`	`@platejs/basic-nodes/react`	React grouping plugin for seven common marks.
`BaseBasicMarksPlugin`	`@platejs/basic-nodes`	Headless grouping plugin for seven common marks.
`BasicMarksKit`	Registry	Full client kit with highlight, kbd, input rules, and leaves.
`BaseBasicMarksKit`	Registry	Static/base kit for server or static rendering.
`MarkToolbarButton`	Registry UI	Toolbar control for one mark key.

Toggle Bold

On This Page

Features Kit Usage Add The Kit Add Toolbar Buttons Ownership Mark Set Input Rules Manual Usage API Reference

Build your editor

Production-ready AI template and reusable components.