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.

When to use

Use TextStyle when you need:

• A carrier mark that other extensions inject color, font-family, font-size, or background-color attributes into
• Automatic cleanup of empty <span> wrappers when all child attributes become null

You do not usually configure TextStyle directly. TextColor, FontFamily, and FontSize pull it in for you through addExtensions(). Highlight does not: it only declares dependencies: ['textStyle'], so if you use Highlight without any of those three, add TextStyle yourself or the editor throws Extension "highlight" requires "textStyle" extension. Please add it to your extensions array. at startup. Add it explicitly when:

• You use Highlight and none of TextColor, FontFamily, or FontSize
• You implement a custom inline-style extension and want to share the <span> carrier
• You want to set HTMLAttributes on the carrier <span> (the only option TextStyle takes)

Usage

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

Vanilla

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

const dm = new DomternalEditor(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>
  );
}

Vue

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

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

<template>
  <Domternal :extensions="extensions">
    <Domternal.Toolbar />
    <Domternal.Content />
  </Domternal>
</template>

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>
Group	formatting
Priority	101

Membership of the formatting group is what makes TextStyle mutually exclusive with inline code: Code declares excludes: 'formatting' and never names the marks it excludes. Because TextStyle is the carrier, every attribute riding on it inherits that exclusion, so applying code to a range drops its text color, background color, font family and font size in one go, and parsing does the same: <code><span style="color:red">x</span></code> comes in as plain code. See Excluding third-party marks for how a mark of your own joins the group or stays out of it.

Parsing rules

Source	Condition
<span>	When it has a style attribute, or a data-text-color / data-bg-color attribute
<mark>	Always (used by Highlight extension)

A span is parsed when it carries styling: inline CSS, or the named color tokens data-text-color / data-bg-color. Those tokens are the serialized form of the colorToken / backgroundColorToken attributes that Text Color and Highlight add to textStyle, and they are what the Notion Color Picker writes instead of an inline style. A plain <span> with neither is ignored, so unstyled wrappers are not turned into marks.

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

See also

• Text Color - inline text color via TextStyle
• Font Family - inline font family selector
• Font Size - inline font size with dynamic-label dropdown
• Highlight - inline background color (text highlight)
• Notion Color Picker - named-token inline colors carried on TextStyle