Italic

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

When to use

Use Italic when you need:

A standard  mark with Cmd+I, *single asterisks*, or _underscores_
Pasted content from any source to land correctly (parses both  and  tags plus inline font-style: italic)
Programmatic control via setItalic, unsetItalic, and toggleItalic commands

Notes:

Italic renders  (semantic emphasis), not  (presentational), to match accessibility best practices
Both * and _ markdown rules fire; choose either or both depending on your project style

Live Playground

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

Themed
Headless

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

Click to try it out

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:

import { Document, Paragraph, Text, Italic } from '@domternal/core';
import { DomternalEditor, DomternalToolbar } from '@domternal/vanilla';
import '@domternal/theme';

const editorEl = document.getElementById('editor')!;
const toolbarEl = document.createElement('div');
editorEl.before(toolbarEl);

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

new DomternalToolbar(toolbarEl, { editor: dm.editor });

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

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

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

<script setup lang="ts">
import { Domternal } from '@domternal/vue';
import { Document, Paragraph, Text, Italic } from '@domternal/core';

const extensions = [Document, Paragraph, Text, Italic];
</script>

<template>
  <Domternal :extensions="extensions" content="<p>This is <em>italic</em> text.</p>">
    <Domternal.Toolbar />
    <Domternal.Content />
  </Domternal>
</template>

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.

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