---
url: https://plugin.stripo.email/extensions/reference/blocks/ContextAction.md
---
# ContextAction

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

```typescript
class ContextAction
```

## Description

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

## Import

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

## Properties

### api

```typescript
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.

```typescript
getId(): string
```

#### Returns

`string` - Unique identifier for the action

#### Usage Notes

* Must be unique across all context actions

#### Example

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

***

### getIcon()

Retrieves the URL or icon content representing this action.

```typescript
getIcon(): string
```

#### Returns

`string` - Icon source (URL or data URI)

#### Usage Notes

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

#### Example

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

public getIcon(): string {
    return actionIcon;
}
```

***

### getLabel()

Retrieves the display label for the action.

```typescript
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

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

***

### onClick()

Handles the action execution when clicked.

```typescript
onClick(node: ImmutableHtmlNode): void
```

#### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| node | [ImmutableHtmlNode](../nodes/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

```typescript
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'));
}
```