Linked Styles extension

Apply Word document styles to maintain consistent formatting across your document.

Linked styles preserve the original Word styling system, including style inheritance and formatting rules.

Important: Linked Styles work with Word documents. This demo simulates the visual effect.

Real-World Usage

When a Word document is loaded:

// Styles are automatically imported from styles.xml
const styles = editor.helpers.linkedStyles.getStyles()

// Apply a style by ID
editor.commands.setStyleById('Heading1')

// Or with the style object
const titleStyle = editor.helpers.linkedStyles.getStyleById('Title')
editor.commands.setLinkedStyle(titleStyle)

OOXML Structure

<w:p>
  <w:pPr>
    <w:pStyle w:val="Heading1"/>
  </w:pPr>
  <w:r>
    <w:t>Text with Heading 1 style</w:t>
  </w:r>
</w:p>

Use case

• Document Templates - Maintain corporate style guides
• Consistency - Uniform formatting across large documents
• Quick Formatting - One-click style application
• Word Compatibility - Preserves Word’s style system
• Style Updates - Change all instances by updating the style definition

Commands

setLinkedStyle

Apply a linked style to the selected paragraphs.

Example:

Usage

const style = editor.helpers.linkedStyles.getStyleById('Heading1');
editor.commands.setLinkedStyle(style);

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

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    const style = editor.helpers.linkedStyles.getStyleById('Heading1');
    editor.commands.setLinkedStyle(style);
  },
});

Parameters:

style · LinkedStyle · required

The style object to apply

toggleLinkedStyle

Toggle a linked style on the current selection. Removes the style if already applied, applies it if not.

Example:

Usage

const style = editor.helpers.linkedStyles.getStyleById('Heading1');
editor.commands.toggleLinkedStyle(style)
editor.commands.toggleLinkedStyle(style, 'paragraph')

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

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    const style = editor.helpers.linkedStyles.getStyleById('Heading1');
    editor.commands.toggleLinkedStyle(style)
    editor.commands.toggleLinkedStyle(style, 'paragraph')
  },
});

Parameters:

style · LinkedStyle · required

The linked style to apply (with id property)

nodeType · string

Node type to restrict toggle to (e.g., ‘paragraph’)

setStyleById

Apply a linked style by its ID.

Example:

Usage

editor.commands.setStyleById('Heading1')
editor.commands.setStyleById('Normal')

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

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

Parameters:

styleId · string · required

The style ID to apply (e.g., ‘Heading1’)

Helpers

getStyles

Get all available linked styles from the document.

Example:

Usage

const styles = editor.helpers.linkedStyles.getStyles();

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

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    const styles = editor.helpers.linkedStyles.getStyles();
  },
});

Returns:

return · Array · required

Array of linked style objects

getStyleById

Get a specific style by ID.

Example:

Usage

const headingStyle = editor.helpers.linkedStyles.getStyleById('Heading1');

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

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    const headingStyle = editor.helpers.linkedStyles.getStyleById('Heading1');
  },
});

Parameters:

styleId · string · required

The style ID to find

Returns:

return · Object · required

The style object or undefined

Types

LinkedStyle

Style definition from a Word document.

Show Properties

id · string · required

Style ID (e.g., ‘Heading1’, ‘Normal’)

type · string · required

Style type (‘paragraph’ or ‘character’)

definition · Object · required

Style definition from Word

Source code