ContextAction

Core class for creating context actions in the Stripo Email Editor Extensions SDK.

class ContextAction

Description

The ContextAction class provides the foundation for creating custom context menu actions that appear when users interact with email elements.

Import

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

Properties

api

api: ContextActionApi

The API instance providing access to editor functionality, document modification capabilities, and core features. Automatically injected by the framework.

Methods

getId()

Retrieves a unique identifier for the context action.

getId(): string

Returns

string - Unique identifier for the action

Usage Notes

• Must be unique across all context actions

Example

public getId(): string {
    return 'improve-action';
}

---

getIcon()

Retrieves the URL or icon content representing this action.

getIcon(): string

Returns

string - Icon source (URL or data URI)

Usage Notes

• Recommended size: 24x24px for optimal display
• Supports SVG, PNG, JPG formats

Example

import actionIcon from './assets/icon.svg';

public getIcon(): string {
    return actionIcon;
}

---

getLabel()

Retrieves the display label for the action.

getLabel(): string

Returns

string - Display label for the menu item

Usage Notes

• Should be localized using the translation API
• Keep labels concise and action-oriented
• Use sentence case (e.g., "Duplicate block", not "DUPLICATE BLOCK")

Example

public getLabel(): string {
    return this.api.translate('actions.duplicate.label');
    // Returns: "Duplicate block" (in current language)
}

---

onClick()

Handles the action execution when clicked.

onClick(node: ImmutableHtmlNode): void

Parameters

Parameter	Type	Description
node	ImmutableHtmlNode	The HTML node the action was triggered on

Usage Notes

• This is where the main action logic goes
• Use the API to modify the document
• Handle errors gracefully

Example

public onClick(node: ImmutableHtmlNode): void {
    // Perform the action
    this.api.getDocumentModifier()
        .modifyHtml(node)
            .setAttribute('data-tracking-id', Math.random())
        .apply(new ModificationDescription('Added tracking parameter to block'));
}