Extension

Main container class that bundles all extension components for the Stripo Email Editor.

class Extension

Description

The Extension class is the central container that holds all the components of your Stripo extension. It packages together blocks, controls, UI elements, external integrations, localization, and styles into a single deployable unit that can be loaded into the Stripo Email Editor.

Extensions are typically created using the ExtensionBuilder class which provides a fluent API for configuration. Once built, the extension is registered with the editor to make its functionality available to users.

Import

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

Constructor

The Extension class constructor accepts all extension components directly. However, it's recommended to use ExtensionBuilder for creating extensions.

constructor(
  i18n: Record<string, Record<string, string>> | undefined,
  styles: string | undefined,
  uiElements: ConstructorOfType<UIElement>[],
  uiElementTagRegistry: ConstructorOfType<UIElementTagRegistry> | undefined,
  controls: ConstructorOfType<Control | BuiltInControl>[],
  settingsPanelRegistry: ConstructorOfType<SettingsPanelRegistry> | undefined,
  contextActions: ConstructorOfType<ContextAction>[],
  blocks: ConstructorOfType<Block>[],
  externalSmartElementsLibrary?: ConstructorOfType<ExternalSmartElementsLibrary>,
  externalImageLibrary?: ConstructorOfType<ExternalImageLibrary>,
  previewStyles?: string,
  externalAiAssistant?: ConstructorOfType<ExternalAiAssistant>,
  externalDisplayConditionsLibrary?: ConstructorOfType<ExternalDisplayConditionsLibrary>,
  externalVideoLibrary?: ConstructorOfType<ExternalVideosLibrary>,
  blocksPanel?: ConstructorOfType<BlocksPanel>,
  iconsRegistry?: ConstructorOfType<IconsRegistry>
)

Methods

getI18n()

Returns the internationalization configuration for the extension.

public getI18n(): Record<string, Record<string, string>> | undefined

Returns

Record<string, Record<string, string>> | undefined - Localization strings organized by language code

---

getStyles()

Returns the CSS styles that will be injected into the editor.

public getStyles(): string | undefined

Returns

string | undefined - CSS styles as a string

---

getPreviewStyles()

Returns the CSS styles specific to the email preview mode.

public getPreviewStyles(): string | undefined

Returns

string | undefined - Preview-specific CSS styles

---

getUiElements()

Returns all custom UI elements registered with the extension.

public getUiElements(): ConstructorOfType<UIElement>[]

Returns

ConstructorOfType<UIElement>[] - Array of UI element constructors

---

getUiElementTagRegistry()

Returns the registry for custom UI element tags.

public getUiElementTagRegistry(): ConstructorOfType<UIElementTagRegistry> | undefined

Returns

ConstructorOfType<UIElementTagRegistry> | undefined - UI element tag registry constructor

---

getControls()

Returns all controls (custom and built-in) registered with the extension.

public getControls(): ConstructorOfType<Control | BuiltInControl>[]

Returns

ConstructorOfType<Control | BuiltInControl>[] - Array of control constructors

---

getSettingsPanelRegistry()

Returns the registry for custom settings panels.

public getSettingsPanelRegistry(): ConstructorOfType<SettingsPanelRegistry> | undefined

Returns

ConstructorOfType<SettingsPanelRegistry> | undefined - Settings panel registry constructor

---

getContextActions()

Returns all context actions registered with the extension.

public getContextActions(): ConstructorOfType<ContextAction>[]

Returns

ConstructorOfType<ContextAction>[] - Array of context action constructors

---

getBlocks()

Returns all custom blocks registered with the extension.

public getBlocks(): ConstructorOfType<Block>[]

Returns

ConstructorOfType<Block>[] - Array of block constructors

---

getExternalSmartElementsLibrary()

Returns the external smart elements library integration if configured.

public getExternalSmartElementsLibrary(): ConstructorOfType<ExternalSmartElementsLibrary> | undefined

Returns

ConstructorOfType<ExternalSmartElementsLibrary> | undefined - Smart elements library constructor

---

getExternalImageLibrary()

Returns the external image library integration if configured.

public getExternalImageLibrary(): ConstructorOfType<ExternalImageLibrary> | undefined

Returns

ConstructorOfType<ExternalImageLibrary> | undefined - Image library constructor

---

getExternalAiAssistant()

Returns the external AI assistant integration if configured.

public getExternalAiAssistant(): ConstructorOfType<ExternalAiAssistant> | undefined

Returns

ConstructorOfType<ExternalAiAssistant> | undefined - AI assistant constructor

---

getExternalDisplayConditionsLibrary()

Returns the external display conditions library if configured.

public getExternalDisplayConditionsLibrary(): ConstructorOfType<ExternalDisplayConditionsLibrary> | undefined

Returns

ConstructorOfType<ExternalDisplayConditionsLibrary> | undefined - Display conditions library constructor

---

getExternalVideoLibrary()

Returns the external video library integration if configured.

public getExternalVideoLibrary(): ConstructorOfType<ExternalVideosLibrary> | undefined

Returns

ConstructorOfType<ExternalVideosLibrary> | undefined - Video library constructor

---

getBlocksPanel()

Returns the custom blocks panel configuration if provided.

public getBlocksPanel(): ConstructorOfType<BlocksPanel> | undefined

Returns

ConstructorOfType<BlocksPanel> | undefined - Blocks panel constructor

---

getIconsRegistry()

Returns the custom icons registry if configured.

public getIconsRegistry(): ConstructorOfType<IconsRegistry> | undefined

Returns

ConstructorOfType<IconsRegistry> | undefined - Icons registry constructor

Usage Notes

• Allows registration of custom SVG icons for use in controls and UI elements
• Icons can be referenced by key throughout the extension
• Useful for maintaining consistent iconography across custom components

Usage Example

While you can instantiate Extension directly, it's recommended to use ExtensionBuilder:

import { ExtensionBuilder } from '@stripoinc/ui-editor-extensions';
import { MyCustomBlock } from './blocks/MyCustomBlock';
import { MyCustomControl } from './controls/MyCustomControl';

const extension = new ExtensionBuilder()
  .addBlock(MyCustomBlock)
  .addControl(MyCustomControl)
  .withLocalization({
    'en': {
      'my.block.title': 'My Custom Block'
    }
  })
  .addStyles(`
    .my-custom-control {
      padding: 20px;
      background: #f0f0f0;
    }
  `)
  .build();