ExtensionBuilder

Builder class for creating extensions using a fluent API pattern.

class ExtensionBuilder

Description

ExtensionBuilder provides a convenient fluent interface for constructing Extension instances. It allows you to progressively configure all aspects of your extension - from blocks and controls to external integrations and styling - using method chaining. This approach makes extension configuration more readable and maintainable compared to direct constructor calls.

The builder pattern ensures that all components are properly collected and configured before creating the final Extension instance.

Import

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

Methods

withLocalization()

Sets the internationalization configuration for the extension.

public withLocalization(i18n: Record<string, Record<string, string>>): this

Parameters

Name	Type	Description
i18n	Record<string, Record<string, string>>	Localization strings organized by language code

Returns

this - The builder instance for method chaining

Example

builder.withLocalization({
  'en': {
    'button.label': 'Click Me',
    'block.title': 'Custom Block'
  },
  'es': {
    'button.label': 'Haz Clic',
    'block.title': 'Bloque Personalizado'
  }
})

---

addStyles()

Adds CSS styles for editor UI to the extension. Can be called multiple times to add styles incrementally.

public addStyles(styles: string): this

Parameters

Name	Type	Description
styles	string	CSS styles to inject into the editor

Returns

this - The builder instance for method chaining

Usage Notes

• Can be called multiple times to add styles incrementally
• All styles are concatenated when the extension is built

Example

builder
  .addStyles('.my-block { padding: 20px; }')
  .addStyles('.my-control { border: 1px solid #ccc; }')

---

withPreviewStyles()

Sets CSS styles specific to the email template preview.

public withPreviewStyles(styles: string): this

Parameters

Name	Type	Description
styles	string	CSS styles for preview mode only

Returns

this - The builder instance for method chaining

Usage Notes

• These styles are only applied in preview template frame
• Useful for setting styles of selected block (borders, context actions, etc.)
• Does not affect the editor interface

---

addBlock()

Registers a custom block with the extension.

public addBlock(block: ConstructorOfType<Block>): this

Parameters

Name	Type	Description
block	ConstructorOfType<Block>	Block class constructor

Returns

this - The builder instance for method chaining

Example

import { MyHeroBlock } from './blocks/MyHeroBlock';
import { MyTestimonialBlock } from './blocks/MyTestimonialBlock';

builder
  .addBlock(MyHeroBlock)
  .addBlock(MyTestimonialBlock)

---

addControl()

Registers a custom control or built-in control extension.

public addControl(control: ConstructorOfType<Control | BuiltInControl>): this

Parameters

Name	Type	Description
control	ConstructorOfType<Control | BuiltInControl>	Control class constructor

Returns

this - The builder instance for method chaining

---

addContextAction()

Registers a custom context action for blocks.

public addContextAction(contextAction: ConstructorOfType<ContextAction>): this

Parameters

Name	Type	Description
contextAction	ConstructorOfType<ContextAction>	Context action class constructor

Returns

this - The builder instance for method chaining

---

addUiElement()

Registers a custom UI element.

public addUiElement(uiElement: ConstructorOfType<UIElement>): this

Parameters

Name	Type	Description
uiElement	ConstructorOfType<UIElement>	UI element class constructor

Returns

this - The builder instance for method chaining

---

withUiElementTagRegistry()

Sets the UI element tag registry for custom element tags.

public withUiElementTagRegistry(
  uiElementTagRegistry: ConstructorOfType<UIElementTagRegistry>
): this

Parameters

Name	Type	Description
uiElementTagRegistry	ConstructorOfType<UIElementTagRegistry>	Tag registry class constructor

Returns

this - The builder instance for method chaining

---

withSettingsPanelRegistry()

Sets the settings panel registry for custom settings panels.

public withSettingsPanelRegistry(
  settingsPanelRegistry: ConstructorOfType<SettingsPanelRegistry>
): this

Parameters

Name	Type	Description
settingsPanelRegistry	ConstructorOfType<SettingsPanelRegistry>	Registry class constructor

Returns

this - The builder instance for method chaining

---

withBlocksPanel()

Sets a custom blocks panel configuration.

public withBlocksPanel(blocksPanel: ConstructorOfType<BlocksPanel>): this

Parameters

Name	Type	Description
blocksPanel	ConstructorOfType<BlocksPanel>	Blocks panel class constructor

Returns

this - The builder instance for method chaining

---

withExternalImageLibrary()

Integrates an external image library.

public withExternalImageLibrary(
  externalImageLibrary: ConstructorOfType<ExternalImageLibrary>
): this

Parameters

Name	Type	Description
externalImageLibrary	ConstructorOfType<ExternalImageLibrary>	Image library class constructor

Returns

this - The builder instance for method chaining

---

withExternalImageLibraryTab()

Version Availability

This method is available starting from v3.2.0

Registers a custom tab within the external image library interface.

public withExternalImageLibraryTab(
  externalImageLibraryTab: ConstructorOfType<ExternalImageLibraryTab>
): this

Parameters

Name	Type	Description
externalImageLibraryTab	ConstructorOfType<ExternalImageLibraryTab>	Image library tab class constructor

Returns

this - The builder instance for method chaining

---

withExternalMergeTagsLibrary()

Version Availability

This method is available starting from v3.11.0

Integrates an external merge tags library.

public withExternalMergeTagsLibrary(
  externalMergeTagsLibrary: ConstructorOfType<ExternalMergeTagsLibrary>
): this

Parameters

Name	Type	Description
externalMergeTagsLibrary	ConstructorOfType<ExternalMergeTagsLibrary>	Merge tags library class constructor

Returns

this - The builder instance for method chaining

Example

import { MyMergeTagsLibrary } from './integrations/MyMergeTagsLibrary';

builder.withExternalMergeTagsLibrary(MyMergeTagsLibrary)

---

withExternalVideosLibrary()

Integrates an external video library.

public withExternalVideosLibrary(
  externalVideoLibrary: ConstructorOfType<ExternalVideosLibrary>
): this

Parameters

Name	Type	Description
externalVideoLibrary	ConstructorOfType<ExternalVideosLibrary>	Video library class constructor

Returns

this - The builder instance for method chaining

---

withExternalSmartElementsLibrary()

Integrates an external smart elements library.

public withExternalSmartElementsLibrary(
  externalSmartElementsLibrary: ConstructorOfType<ExternalSmartElementsLibrary>
): this

Parameters

Name	Type	Description
externalSmartElementsLibrary	ConstructorOfType<ExternalSmartElementsLibrary>	Smart elements library constructor

Returns

this - The builder instance for method chaining

---

withExternalAiAssistant()

Integrates an external AI assistant.

public withExternalAiAssistant(
  externalAiAssistant: ConstructorOfType<ExternalAiAssistant>
): this

Parameters

Name	Type	Description
externalAiAssistant	ConstructorOfType<ExternalAiAssistant>	AI assistant class constructor

Returns

this - The builder instance for method chaining

---

withExternalDisplayCondition()

Integrates an external display conditions library.

public withExternalDisplayCondition(
  externalDisplayCondition: ConstructorOfType<ExternalDisplayConditionsLibrary>
): this

Parameters

Name	Type	Description
externalDisplayCondition	ConstructorOfType<ExternalDisplayConditionsLibrary>	Display conditions library constructor

Returns

this - The builder instance for method chaining

---

withIconsRegistry()

Sets a custom icons registry for registering SVG icons.

public withIconsRegistry(iconsRegistry: ConstructorOfType<IconsRegistry>): this

Parameters

Name	Type	Description
iconsRegistry	ConstructorOfType<IconsRegistry>	Icons registry class constructor

Returns

this - The builder instance for method chaining

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

Example

import { MyIconsRegistry } from './icons/MyIconsRegistry';

builder.withIconsRegistry(MyIconsRegistry)

---

addGeneralPanelTab()

Version Availability

This method is available starting from v3.5.0

Registers a custom tab within the "General" panel of the editor.

public addGeneralPanelTab(tab: ConstructorOfType<GeneralPanelTab>): this

Parameters

Name	Type	Description
tab	ConstructorOfType<GeneralPanelTab>	General panel tab class constructor

Returns

this - The builder instance for method chaining

Example

import { MyGlobalSettingsTab } from './tabs/MyGlobalSettingsTab';

builder.addGeneralPanelTab(MyGlobalSettingsTab)

---

addModulesPanelTab()

Version Availability

This method is available starting from v3.7.0

Registers a custom tab within the "Modules" panel of the editor.

public addModulesPanelTab(tab: ConstructorOfType<ModulesPanelTab>): this

Parameters

Name	Type	Description
tab	ConstructorOfType<ModulesPanelTab>	Modules panel tab class constructor

Returns

this - The builder instance for method chaining

Example

import { MyModulesTab } from './tabs/MyModulesTab';

builder.addModulesPanelTab(MyModulesTab)

---

build()

Creates the final Extension instance with all configured components.

public build(): Extension

Returns

Extension - The configured extension instance ready for registration