CustomSelection extension

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)

Parameters:

style · LinkedStyle · required

The linked style to apply (with id property)

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

Show Properties

focused · boolean · required

Whether editor is focused

preservedSelection · Object | any · required

Stored selection

showVisualSelection · boolean · required

Whether to show selection decoration

skipFocusReset · boolean · required

Whether to skip clearing selection on next focus

ParentNodeInfo

Show Properties

pos · number · required

The position of the parent node.

start · number · required

The start position of the parent node.

depth · number · required

The depth of the parent node.

node · any · required

The parent node.

LinkedStyle

Style definition from 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

View on GitHub →