GeneralPanelTab

Version Availability

This class is available starting from v3.5.0

Core class for creating custom tabs in the "General" panel of the Stripo Email Editor.

class GeneralPanelTab

Description

The GeneralPanelTab class allows developers to extend the editor's "General" panel (typically found in the left sidebar) with custom tabs. Unlike standard Controls which are context-sensitive to the selected block, General Panel Tabs provide global functionality or settings that are accessible regardless of which block is currently selected.

Import

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

Properties

api

Provides access to editor functionalities specific to this tab instance.

public api!: GeneralPanelTabApi

Type

GeneralPanelTabApi

Methods

getId()

Retrieves the unique identifier for this tab.

public getId(): string

Returns

string - Unique identifier for the tab

Usage Notes

• Must be unique across all registered tabs

---

getIcon()

Retrieves the icon representing this tab in the general panel header.

public getIcon(): string

Returns

string - Icon key from the IconsRegistry

---

getName()

Retrieves the display name of the tab shown to the user in the header hint.

public getName(): string

Returns

string - Localized tab name

Usage Notes

• Displayed as a tooltip or label for the tab icon
• Use this.api.translate() for localization

---

getTabIndex()

Retrieves the position/order of the tab in the General panel.

public getTabIndex(): number

Returns

number - The index position (0-based)

---

getTemplate()

Retrieves the HTML template string that defines the initial structure of the tab's content.

public getTemplate(): string

Returns

string - HTML template

Usage Notes

• Defines the UI structure rendered when the tab is opened
• Can use standard HTML and UI Elements

---

isEnabled()

Determines if the tab should be available for use in the editor.

public isEnabled(): boolean

Returns

boolean - True if enabled. Defaults to true.

Lifecycle Hooks

onRender()

Optional hook called when the general panel tab is initially rendered.

public onRender(): void

Usage Notes

• Use for setup tasks like attaching event listeners to template elements
• Initialize UI state

---

onDocumentChanged()

Lifecycle hook called when any part of the document template has changed.

public onDocumentChanged(): void

Usage Notes

• Triggered frequently during editing
• Use for global tab state synchronization with the document

---

onDestroy()

Optional cleanup hook called when the general panel tab is being destroyed.

public onDestroy(): void

Usage Notes

• Clean up event listeners, timers, or other resources