TemplateModifier

Interface for managing template modifications in the Stripo Email Editor Extensions SDK.

interface TemplateModifier<HtmlNodeModifier, CssNodeModifier>

Description

The TemplateModifier interface provides a unified API for modifying both HTML and CSS nodes in email templates. It follows a fluent interface pattern, allowing method chaining for multiple modifications before applying them as a single transaction.

Import

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

Properties

None

Methods

modifyHtml()

Sets the HTML node for modification and returns an HtmlNodeModifier instance.

modifyHtml(node: ImmutableHtmlNode): HtmlNodeModifier

Parameters

Parameter	Type	Description
node	ImmutableHtmlNode	The HTML node to modify

Returns

HtmlNodeModifier - Interface for chaining HTML modifications

Usage Notes

• Call this method to begin modifying an HTML element
• Multiple HTML nodes can be modified in a single transaction
• Changes are not applied until apply() is called

Example

const modifier = this.api.getDocumentModifier();
modifier.modifyHtml(buttonNode)
    .setStyle('background', 'blue')
    .apply(description);

---

modifyCss()

Sets the CSS node for modification and returns a CssNodeModifier instance.

modifyCss(node: ImmutableCssNode): CssNodeModifier

Parameters

Parameter	Type	Description
node	ImmutableCssNode	The CSS node to modify

Returns

CssNodeModifier - Interface for chaining CSS modifications

Usage Notes

• Use this method to modify CSS rules and properties
• Can be combined with HTML modifications in the same transaction
• Supports media queries and nested rules

Example

modifier.modifyCss(cssNode)
    .setProperty('color', 'red')
    .setProperty('font-size', '16px')
    .apply(description);

---

apply()

Applies all accumulated modifications as a single transaction.

apply(description: ModificationDescription): void

Parameters

Parameter	Type	Description
description	ModificationDescription	Description object providing context about the modifications

Returns

void

Usage Notes

• This method executes all queued modifications
• Modifications are applied atomically
• The description is used for version history and undo/redo

Example

modifier
    .modifyHtml(htmlNode)
        .setInnerHtml('New content')
    .modifyCss(cssNode)
        .setProperty('margin', '10px')
    .apply(new ModificationDescription('Updated content and styling'));