BlockApi

Interface providing API access for Block implementations in the Stripo Email Editor Extensions SDK.

interface BlockApi extends BaseApi, BaseModifierApi

Description

The BlockApi interface provides comprehensive access to editor functionalities for block implementations. It combines base API features (translation, configuration, state management) with document modification capabilities, enabling blocks to interact with and modify email templates while maintaining synchronization with the editor's collaborative features.

Import

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

Inheritance Hierarchy

BaseApi
  ↓
BlockApi ← BaseModifierApi

Properties

None (all functionality provided through methods)

Methods

setViewOnly()

Sets the view-only state for the current block context.

setViewOnly(viewOnly: boolean): void

Parameters

Parameter	Type	Description
viewOnly	boolean	If true, interactions might be restricted

Usage Notes

• Controls whether the block can be dragged and dropped within the template
• Useful for singleton blocks or conditional editing

Example

public onDocumentInit(): void {
    // Ensure only one instance can be edited
    const instances = this.api.getDocumentRoot()
        .querySelectorAll(`.${this.getUniqueBlockClassname()}`);

    if (instances.length > 1) {
        this.api.setViewOnly(true);
    }
}

---

getHiddenElementState()

Gets the current device-specific hidden state for the provided node.

getHiddenElementState(target: ImmutableHtmlNode): HideElementState

Parameters

Parameter	Type	Description
target	ImmutableHtmlNode	The node to inspect

Returns

HideElementState - 'desktop', 'mobile', or undefined

Usage Notes

• The editor resolves the canonical node that owns the visibility configuration
• Use this method when custom controls need to stay synchronized with the built-in hide-element state
• undefined means the target is not hidden for a specific device mode

Example

public onTemplateNodeUpdated(node: ImmutableHtmlNode): void {
    const hiddenState = this.api.getHiddenElementState(node);

    if (hiddenState === 'mobile') {
        this.api.sendEvent('extensions.block.hidden-on-mobile', {
            blockId: this.getId(),
        });
    }
}

Inherited Methods from BaseApi

BaseApi - Base API interface

Inherited Methods from BaseModifierApi

BaseModifierApi - Document modification API