Italic

The Italic mark applies italic formatting to text. It renders as <em> and parses <em>, <i>, and CSS font-style: italic. Included in StarterKit by default.

Live Playground

Select text and apply italic with buttons, keyboard shortcut (Cmd+I / Ctrl+I), or type *text* to trigger the input rule.

Vanilla JS/TS

With the default theme enabled. Click the I toolbar button or use Cmd+I / Ctrl+I.

Click to try it out

Angular

Click to try it out

Vanilla JS preview - Angular components produce the same output

React

Click to try it out

Vanilla JS preview - React components produce the same output

Headless

Plain editor without the theme. The buttons above call toggleItalic(), setItalic(), and unsetItalic() directly.

Click to try it out

Usage

Italic is included in StarterKit, so it works out of the box. To use it standalone:

Vanilla JS/TS

import { Editor, Document, Paragraph, Text, Italic, defaultIcons } from '@domternal/core';
import '@domternal/theme';

const editorEl = document.getElementById('editor')!;

// Toolbar
const toolbar = document.createElement('div');
toolbar.className = 'dm-toolbar';
toolbar.innerHTML = `<div class="dm-toolbar-group">
  <button class="dm-toolbar-button" data-mark="italic">${defaultIcons.textItalic}</button>
</div>`;
editorEl.before(toolbar);

// Editor
const editor = new Editor({
  element: editorEl,
  extensions: [Document, Paragraph, Text, Italic],
  content: '<p>This is <em>italic</em> text.</p>',
});

// Toggle italic on click
toolbar.addEventListener('click', (e) => {
  const btn = (e.target as Element).closest<HTMLButtonElement>('[data-mark]');
  if (btn) editor.chain().focus().toggleItalic().run();
});

Angular

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, Italic } from '@domternal/core';

@Component({
  selector: 'app-editor',
  imports: [DomternalEditorComponent, DomternalToolbarComponent],
  templateUrl: './editor.html',
})
export class EditorComponent {
  editor = signal<Editor | null>(null);
  extensions = [Document, Paragraph, Text, Italic];
  content = '<p>This is <em>italic</em> text.</p>';
}

editor.html

@if (editor(); as ed) {
  <domternal-toolbar [editor]="ed" />
}
<domternal-editor
  [extensions]="extensions"
  [content]="content"
  (editorCreated)="editor.set($event)"
/>

React

import { Domternal } from '@domternal/react';
import { Document, Paragraph, Text, Italic } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, Italic]}
      content="<p>This is <em>italic</em> text.</p>"
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

Headless

import { Editor, Document, Paragraph, Text, Italic } from '@domternal/core';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, Italic],
  content: '<p>This is <em>italic</em> text.</p>',
});

// Toggle italic programmatically
editor.chain().focus().toggleItalic().run();

To disable Italic in StarterKit:

StarterKit.configure({ italic: false })

Schema

Property	Value
ProseMirror name	italic
Type	Mark
HTML tag	<em>

Parsing rules

Italic parses from multiple HTML sources for maximum compatibility:

Source	Condition
<em>	Always
<i>	Unless font-style: normal (Google Docs compatibility)
CSS font-style	Value is italic (case-insensitive)

Options

Option	Type	Default	Description
HTMLAttributes	Record<string, unknown>	{}	Custom HTML attributes added to the rendered <em> element

import { Italic } from '@domternal/core';

const CustomItalic = Italic.configure({
  HTMLAttributes: { class: 'my-italic' },
});

Commands

setItalic

Applies italic formatting to the current selection.

editor.commands.setItalic();

unsetItalic

Removes italic formatting from the current selection.

editor.commands.unsetItalic();

toggleItalic

Toggles italic formatting on the current selection. Applies italic if not active, removes it if active.

editor.commands.toggleItalic();

// With chaining
editor.chain().focus().toggleItalic().run();

Keyboard shortcuts

Key	Action
Mod-I	Toggle italic (toggleItalic)

Mod is Cmd on macOS and Ctrl on Windows/Linux.

Input rules

Input	Result
*text*	Wraps text in italic
_text_	Wraps text in italic

Type the closing * or _ to trigger the conversion. The markers are removed and the text between them becomes italic.

Note

The input rules use a negative lookbehind to avoid conflicts with bold (**text** and __text__). Typing **text** will apply bold, not italic.

Toolbar items

Italic registers a button in the toolbar with the name italic in group format at priority 190.

Item	Type	Command	Icon	Shortcut	Active when
Italic	button	toggleItalic	textItalic	Mod-I	Italic mark is active on selection

Exports

import { Italic } from '@domternal/core';
import type { ItalicOptions } from '@domternal/core';

Export	Type	Description
Italic	Mark extension	The italic mark extension
ItalicOptions	TypeScript type	Options for Italic.configure()

Source

@domternal/core - Italic.ts