Italic

Add emphasized inline text.

Basic Marks Mark Toolbar Button Plugin Shortcuts

Italic applies the italic leaf mark to selected text. ItalicPlugin owns the mark key, shortcut, HTML parsing, render tag, and toggle transform.

Loading…

Features

KEYS.italic leaf mark.
Default ⌘I / Ctrl+I shortcut.
HTML deserialization from em, i, and italic font style.
<em> rendering by default.
Optional Markdown-style input rules through ItalicRules.
Toolbar support through MarkToolbarButton.

Kit Usage

Add Basic Marks

BasicMarksKit includes ItalicPlugin, * and _ Markdown-style input rules, and the standard toolbar buttons that use KEYS.italic.

'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.italic.

import { ItalicIcon } from 'lucide-react';
import { KEYS } from 'platejs';
 
import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';
 
export function ItalicToolbarButton() {
  return (
    <MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)">
      <ItalicIcon />
    </MarkToolbarButton>
  );
}

import { ItalicIcon } from 'lucide-react';
import { KEYS } from 'platejs';
 
import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';
 
export function ItalicToolbarButton() {
  return (
    <MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)">
      <ItalicIcon />
    </MarkToolbarButton>
  );
}

Manual Usage

Install the mark package.

pnpm add @platejs/basic-nodes

pnpm add @platejs/basic-nodes

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

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

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

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

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

Ownership

Surface	Owner	What It Does
`BaseItalicPlugin`	`@platejs/basic-nodes`	Headless italic mark, HTML parser, render tag, and `toggle` transform.
`ItalicPlugin`	`@platejs/basic-nodes/react`	React wrapper with default `mod+i` shortcut.
`ItalicRules.markdown`	`@platejs/basic-nodes`	Optional mark input rule factory.
`BasicMarksKit`	Registry	Adds `ItalicPlugin` 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.italic`
Leaf behavior	`node.isLeaf: true`
Toggle transform	`editor.tf.italic.toggle()` calls `editor.tf.toggleMark(type)`.
Shortcut	`ItalicPlugin` registers `mod+i`.
HTML tags	`em`, `i`
HTML styles	`font-style: italic`
HTML guard	Ignores descendants where `fontStyle` is `normal`.
Render output	`em`

API Reference

API	Package	Use
`BaseItalicPlugin`	`@platejs/basic-nodes`	Headless italic plugin.
`ItalicPlugin`	`@platejs/basic-nodes/react`	React italic plugin with shortcut defaults.
`ItalicRules.markdown(options)`	`@platejs/basic-nodes`	Creates an italic mark input rule.
`tf.italic.toggle()`	`@platejs/basic-nodes`	Toggles the italic mark at the selection.

Bold Underline

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.