EditorStatePropertyType

Enum defining observable properties of the editor's active state in the Stripo Email Editor Extensions SDK.

enum EditorStatePropertyType {
    previewDeviceMode = 'previewDeviceMode',
    panelPosition = 'panelPosition'
}

Description

The EditorStatePropertyType enum identifies specific editor state properties that extensions can monitor for changes. It enables reactive behavior in extensions by allowing them to subscribe to state changes and update their functionality accordingly.

Import

import { EditorStatePropertyType } from '@stripoinc/ui-editor-extensions';

Enum Values

previewDeviceMode

Property containing information about the active preview mode.

EditorStatePropertyType.previewDeviceMode = 'previewDeviceMode'

Description

Represents the current device preview mode in the editor (desktop or mobile).

Value Type When Subscribed

'DESKTOP' | 'MOBILE'

Usage Notes

• Monitors changes between desktop and mobile preview modes
• Useful for adapting block behavior based on preview context
• Commonly used to show different content or layouts per device
• Value changes when user switches preview mode in the editor

Example

this.api.onEditorStatePropUpdated(
    EditorStatePropertyType.previewDeviceMode,
    (newMode, oldMode) => {
        console.log(`Preview changed from ${oldMode} to ${newMode}`);
    }
);

panelPosition

Property containing information about the current panel layout configuration.

EditorStatePropertyType.panelPosition = 'panelPosition'

Description

Represents the current arrangement of the blocks panel and settings panel in the editor interface.

Value Type When Subscribed

'BLOCKS_SETTINGS' | 'SETTINGS_BLOCKS'

Usage Notes

• Monitors changes in panel layout configuration
• Useful for adapting extension UI based on panel positioning
• BLOCKS_SETTINGS: Blocks panel on left, settings panel on right (default)
• SETTINGS_BLOCKS: Settings panel on left, blocks panel on right
• Value changes when panel layout is reconfigured in the editor

Example

this.api.onEditorStatePropUpdated(
    EditorStatePropertyType.panelPosition,
    (newPosition, oldPosition) => {
        console.log(`Panel layout changed from ${oldPosition} to ${newPosition}`);
    }
);