Skip to main content
Keep text selection visible when clicking toolbar buttons. Select text and click the toolbar - your selection stays highlighted for a seamless editing experience.

​
Use Case

  • Professional UX - Selection doesn’t disappear when using toolbars
  • Seamless editing - Apply multiple formats without reselecting
  • User expectations - Matches desktop word processor behavior

​
Integration

Add toolbar-button class to toolbar elements. Call restorePreservedSelection() before applying commands.

​
Commands

​
restorePreservedSelection

Restore the preserved selection
Used internally to maintain selection when interacting with toolbar
Example: 
// Restore selection after toolbar interaction
editor.commands.restorePreservedSelection()
Returns: Function Command function

​
setLinkedStyle

Apply a linked style to the selected paragraphs
Works with custom selection preservation
Example: 
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 style if already applied, applies it if not
Example: 
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 | any
required
Node type to restrict toggle to (e.g., ‘paragraph’)

​
setStyleById

Apply a linked style by its ID
Looks up the style from loaded Word styles
Example: 
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 Example: 
const styles = editor.helpers.linkedStyles.getStyles();
// Returns all styles from the Word document
Returns:
​
return
Array
required
Array of linked style objects

​
getStyleById

Get a specific style by ID Example: 
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

​
SelectionState

Selection state

​
LinkedStyle

Style definition from Word document

​
Source Code