TextStyle extension

Foundation mark for applying multiple text formatting attributes.

Enables combining font, color, and other text properties while maintaining Word compatibility.

OOXML Structure

<w:r>
  <w:rPr>
    <w:rStyle w:val="CustomStyle1"/>
    <!-- Additional properties handled by other extensions -->
    <w:color w:val="0000FF"/>
    <w:sz w:val="36"/>
  </w:rPr>
  <w:t>Styled text</w:t>
</w:r>

Use case

• Style Foundation - Base layer for combining multiple text properties
• Clean Markup - Prevents empty span elements in your HTML
• Style References - Apply predefined Word styles via styleId
• Extension Bridge - Enables font, color, and size extensions to work together
• Word Compatibility - Maps directly to Word’s character styles

Options

Configure the extension behavior:

htmlAttributes · Object · default: "{}"

Custom HTML attributes to apply to text style spans

Attributes

Mark attributes that can be set and retrieved:

vertAlign · string

Vertical alignment for superscript and subscript. Values: 'superscript', 'subscript', 'baseline'

position · string

Custom vertical position offset in points (e.g., '2pt', '-1.5pt'). Takes precedence over vertAlign when both are present.

Commands

removeEmptyTextStyle

Remove empty text style marks

Automatically checks if any style attributes exist before removal

Example:

Usage

editor.commands.removeEmptyTextStyle()

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.removeEmptyTextStyle()
  },
});

Source code