From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Stream
    • Copilot
  • Discussion
    • Comments
    • Suggestion
    • Basic Blocks
      • Blockquote
      • Heading
      • Horizontal Rule
    • Callout
    • Code Block
    • Column
    • Date
    • Equation
    • Link
    • List Classic
    • Media
    • MentionElement
    • Table
    • Table of Contents
    • Footnote
    • Toggle
  • Marks
    • Bold
    • Italic
    • Underline
    • Code
    • Highlight
    • Keyboard Input
    • Strikethrough
    • Subscript
    • Superscript
      • Font
      • Line Height
      • Text Align
    • Indent
    • List
      • Exit Break
      • Single Block
      • Trailing Block
    • Autoformat
    • Block Menu
    • Block Placeholder
    • Combobox
      • Emoji
      • MentionElement
      • Slash Command
    • Cursor Overlay
    • Drag & Drop
    • Navigation Feedback
    • Tabbable
    • Toolbar
    • Yjs
    • Multi SelectEditor
    • CSV
    • DOCX
    • HTML
    • Markdown

Italic

PreviousNext

Add emphasized inline text.

Basic MarksMark Toolbar ButtonPlugin Shortcuts

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

Loading…
BoldUnderline

On This Page

FeaturesKit UsageAdd Basic MarksAdd A Toolbar ButtonManual UsageOwnershipBehaviorAPI Reference
Build your editor
Production-ready AI template and reusable components.
Get all-access

Features

  • Boolean italic leaf property owned by the PLUGINS.italic capability.
  • 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.
Report an issue

Kit Usage

Add Basic Marks

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

'use client';
 
import {
  BoldRules,
  CodeRules,
  HighlightRules,
  ItalicRules,
  MarkComboRules,
  ScriptRules,
  StrikethroughRules,
  UnderlineRules,
} from '@platejs/basic-nodes';
import {
  BoldPlugin,
  CodePlugin,
  HighlightPlugin,
  ItalicPlugin,
  KbdPlugin,
  ScriptPlugin,
  StrikethroughPlugin,
  UnderlinePlugin,
} from '@platejs/basic-nodes/react';
 
import { CodeLeaf } from '@/components/editor/code';
import { HighlightLeaf } from '@/components/editor/highlight';
import { KbdLeaf } from '@/components/editor/kbd';
 
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({
    component: CodeLeaf,
    inputRules: [CodeRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+e' } },
  }),
  StrikethroughPlugin.configure({
    inputRules: [StrikethroughRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+shift+x' } },
  }),
  ScriptPlugin.configure({
    inputRules: [
      ScriptRules.markdown({ value: 'sub' }),
      ScriptRules.markdown({ value: 'sup' }),
    ],
    shortcuts: {
      subscript: {
        keys: 'mod+comma',
        handler: ({ editor }) => {
          editor.plugin(ScriptPlugin).update.toggle('sub');
        },
      },
      superscript: {
        keys: 'mod+period',
        handler: ({ editor }) => {
          editor.plugin(ScriptPlugin).update.toggle('sup');
        },
      },
    },
  }),
  HighlightPlugin.configure({
    component: HighlightLeaf,
    inputRules: [
      HighlightRules.markdown({ variant: '==' }),
      HighlightRules.markdown({ variant: '≡' }),
    ],
    shortcuts: { toggle: { keys: 'mod+shift+h' } },
  }),
  KbdPlugin.configure({ component: KbdLeaf }),
] as const;
'use client';
 
import {
  BoldRules,
  CodeRules,
  HighlightRules,
  ItalicRules,
  MarkComboRules,
  ScriptRules,
  StrikethroughRules,
  UnderlineRules,
} from '@platejs/basic-nodes';
import {
  BoldPlugin,
  CodePlugin,
  HighlightPlugin,
  ItalicPlugin,
  KbdPlugin,
  ScriptPlugin,
  StrikethroughPlugin,
  UnderlinePlugin,
} from '@platejs/basic-nodes/react';
 
import { CodeLeaf } from '@/components/editor/code';
import { HighlightLeaf } from '@/components/editor/highlight';





























































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

Add A Toolbar Button

Pass ItalicPlugin to MarkToolbarButton so the button uses the configured mark key.

import { ItalicIcon } from 'lucide-react';
import { ItalicPlugin } from '@platejs/basic-nodes/react';
 
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
 
export function ItalicToolbarButton() {
  return (
    <MarkToolbarButton plugin={ItalicPlugin} 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],
});

Register Markdown-style input rules when users should type italic delimiters.

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

SurfaceOwnerWhat It Does
BaseItalicPlugin@platejs/basic-nodesHeadless italic mark, HTML parser, render tag, and toggle transform.
ItalicPlugin@platejs/basic-nodes/reactReact wrapper with default mod+i shortcut.
ItalicRules.markdown@platejs/basic-nodesOptional mark input rule factory.
BasicMarksKitRegistryAdds ItalicPlugin with * and _ Markdown-style input rules.
MarkToolbarButtonRegistry UIReads active mark state and calls the mark toggle hook.

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

Behavior

BehaviorSource
Mark keyeditor.plugin(ItalicPlugin).schema.key (default: italic)
Mark declarationschema.mark: property.boolean({ default: false, omitDefault: true })
Toggle commandtx.italic.toggle() toggles the resolved schema key.
ShortcutItalicPlugin registers mod+i.
HTML tagsem, i
HTML stylesfont-style: italic
HTML guardIgnores descendants where fontStyle is normal.
Render outputem

API Reference

APIPackageUse
BaseItalicPlugin@platejs/basic-nodesHeadless italic plugin.
ItalicPlugin@platejs/basic-nodes/reactReact italic plugin with shortcut defaults.
ItalicRules.markdown(options)@platejs/basic-nodesCreates an italic mark input rule.
tx.italic.toggle()@platejs/basic-nodesToggles the italic mark at the selection.
import { KbdLeaf } from '@/components/editor/kbd';
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({
component: CodeLeaf,
inputRules: [CodeRules.markdown()],
shortcuts: { toggle: { keys: 'mod+e' } },
}),
StrikethroughPlugin.configure({
inputRules: [StrikethroughRules.markdown()],
shortcuts: { toggle: { keys: 'mod+shift+x' } },
}),
ScriptPlugin.configure({
inputRules: [
ScriptRules.markdown({ value: 'sub' }),
ScriptRules.markdown({ value: 'sup' }),
],
shortcuts: {
subscript: {
keys: 'mod+comma',
handler: ({ editor }) => {
editor.plugin(ScriptPlugin).update.toggle('sub');
},
},
superscript: {
keys: 'mod+period',
handler: ({ editor }) => {
editor.plugin(ScriptPlugin).update.toggle('sup');
},
},
},
}),
HighlightPlugin.configure({
component: HighlightLeaf,
inputRules: [
HighlightRules.markdown({ variant: '==' }),
HighlightRules.markdown({ variant: '≡' }),
],
shortcuts: { toggle: { keys: 'mod+shift+h' } },
}),
KbdPlugin.configure({ component: KbdLeaf }),
] as const;
plugins: [
...
BasicMarksKit],
});
import { ItalicIcon } from 'lucide-react'; import { ItalicPlugin } from '@platejs/basic-nodes/react'; import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button'; export function ItalicToolbarButton() { return ( <MarkToolbarButton plugin={ItalicPlugin} tooltip="Italic (⌘+I)"> <ItalicIcon /> </MarkToolbarButton> ); }