Text Style

The TextStyle mark is a carrier mark that wraps text in a <span> element. It has no visual output on its own - it serves as a container for other extensions (TextColor, FontFamily, FontSize, Highlight) that inject CSS attributes into it via addGlobalAttributes. Not included in StarterKit - must be added separately.

Tip

You rarely need to interact with TextStyle directly. It is required by TextColor, FontFamily, FontSize, and Highlight, so add it whenever you use any of those extensions.

Usage

TextStyle is not included in StarterKit. Add it when using TextColor, FontFamily, FontSize, or Highlight:

Vanilla JS/TS

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

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, TextStyle, TextColor],
});

Angular

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, TextStyle, TextColor } 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, TextStyle, TextColor];
}

editor.html

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

React

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

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, TextStyle, TextColor]}
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

Headless

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

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, TextStyle, TextColor],
});

// Set text color programmatically
editor.chain().focus().setTextColor('#ff0000').run();

Caution

Disabling TextStyle will also break TextColor, FontFamily, FontSize, and Highlight, since they depend on it to render their styles.

Schema

Property	Value
ProseMirror name	textStyle
Type	Mark
HTML tag	<span>
Priority	101

Parsing rules

Source	Condition
<span>	Only when it has a style attribute
<mark>	Always (used by Highlight extension)

Spans without style attributes are ignored to avoid wrapping plain <span> tags.

Options

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

Commands

setTextStyle

Applies a text style with specific attributes.

editor.commands.setTextStyle({ color: 'red' });

removeTextStyle

Removes the text style mark entirely.

editor.commands.removeTextStyle();

removeEmptyTextStyle

Removes text style marks that have no meaningful attributes (all attributes are null/undefined). This prevents empty <span> wrappers from remaining in the document.

editor.commands.removeEmptyTextStyle();

Note

removeEmptyTextStyle is smart about selections: for empty selections it checks stored marks, for non-empty selections it only removes marks where ALL attributes are null, preserving marks with active styling.

Keyboard shortcuts

TextStyle has no keyboard shortcuts.

Input rules

TextStyle has no input rules.

Toolbar items

TextStyle has no toolbar items. The extensions that use it (TextColor, FontFamily, FontSize, Highlight) provide their own toolbar items.

How it works

TextStyle is a carrier mark. On its own, it renders an empty <span>. Other extensions add attributes to it:

// TextColor adds a 'color' style attribute
editor.commands.setTextColor('#ff0000');
// Renders: <span style="color: #ff0000">text</span>

// FontFamily adds a 'font-family' style attribute
editor.commands.setFontFamily('Georgia');
// Renders: <span style="font-family: Georgia">text</span>

// FontSize adds a 'font-size' style attribute
editor.commands.setFontSize('24px');
// Renders: <span style="font-size: 24px">text</span>

Multiple styles can be combined on a single <span>:

<span style="color: #ff0000; font-family: Georgia; font-size: 24px">styled text</span>

Exports

import { TextStyle } from '@domternal/core';
import type { TextStyleOptions } from '@domternal/core';

Export	Type	Description
TextStyle	Mark extension	The text style carrier mark
TextStyleOptions	TypeScript type	Options for TextStyle.configure()

Source

@domternal/core - TextStyle.ts