HtmlNodeModifier

Interface for modifying HTML nodes within email templates.

interface HtmlNodeModifier extends TemplateModifier<HtmlNodeModifier, CssNodeModifier>

Description

HtmlNodeModifier provides methods for manipulating HTML elements, including content modification, attribute management, styling, and advanced features such as display conditions and structure management.

Import

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

Inheritance

Extends: TemplateModifier

Methods

Content Modification Methods

setInnerHtml()

Replaces the inner HTML content of the current node.

setInnerHtml(html: string): HtmlNodeModifier

Parameter	Type	Description
html	string	The HTML string to set as inner content

Returns: HtmlNodeModifier for method chaining

Example:

modifier.modifyHtml(element)
    .setInnerHtml('<p>New content</p>');

---

setText()

Updates the text content of an HTML text node.

setText(newValue: string): HtmlNodeModifier

Parameter	Type	Description
newValue	string	The new text value

Returns: HtmlNodeModifier for method chaining

Example:

modifier.modifyHtml(textNode)
    .setText('Updated text content');

---

append()

Appends HTML content as the last child of the current node.

append(html: string): HtmlNodeModifier

Parameter	Type	Description
html	string	The HTML string to append

Returns: HtmlNodeModifier for method chaining

Example:

modifier.modifyHtml(container)
    .append('<div class="new-section">Additional content</div>');

---

prepend()

Prepends HTML content as the first child of the current node.

prepend(html: string): HtmlNodeModifier

Parameter	Type	Description
html	string	The HTML string to prepend

Returns: HtmlNodeModifier for method chaining

Example:

modifier.modifyHtml(container)
    .prepend('<header>Header content</header>');

---

replaceWith()

Replaces the current node with new HTML content.

replaceWith(html: string): HtmlNodeModifier

Parameter	Type	Description
html	string	The HTML string to replace the node with

Returns: HtmlNodeModifier for method chaining

Example:

modifier.modifyHtml(oldElement)
    .replaceWith('<div class="replacement">New element</div>');

---

Attribute Methods

setAttribute()

Sets or updates an attribute on the current HTML node.

setAttribute(name: string, value: string): HtmlNodeModifier

Parameter	Type	Description
name	string	The attribute name
value	string	The attribute value

Returns: HtmlNodeModifier for method chaining

Example:

modifier.modifyHtml(link)
    .setAttribute('href', 'https://example.com')
    .setAttribute('target', '_blank');

---

removeAttribute()

Removes an attribute from the current HTML node.

removeAttribute(name: string): HtmlNodeModifier

Parameter	Type	Description
name	string	The attribute name to remove

Returns: HtmlNodeModifier for method chaining

Example:

modifier.modifyHtml(element)
    .removeAttribute('data-old-value');

---

setValue()

Sets the value attribute for form elements.

setValue(value: string): HtmlNodeModifier

Parameter	Type	Description
value	string	The value to set

Returns: HtmlNodeModifier for method chaining

Example:

modifier.modifyHtml(inputElement)
    .setValue('default text');

---

Class Methods

setClass()

Adds a CSS class to the current node.

setClass(name: string): HtmlNodeModifier

Parameter	Type	Description
name	string	The CSS class name to add

Returns: HtmlNodeModifier for method chaining

Example:

modifier.modifyHtml(element)
    .setClass('highlighted')
    .setClass('active');

---

removeClass()

Removes a CSS class from the current node.

removeClass(name: string): HtmlNodeModifier

Parameter	Type	Description
name	string	The CSS class name to remove

Returns: HtmlNodeModifier for method chaining

Example:

modifier.modifyHtml(element)
    .removeClass('disabled');

---

Style Methods

setStyle()

Sets a CSS style property on the current node.

setStyle(property: string, value: string): HtmlNodeModifier

Parameter	Type	Description
property	string	The CSS property name
value	string	The CSS property value

Returns: HtmlNodeModifier for method chaining

Example:

modifier.modifyHtml(element)
    .setStyle('background-color', '#f0f0f0')
    .setStyle('padding', '10px');

---

removeStyle()

Removes a CSS style property from the current node.

removeStyle(property: string): HtmlNodeModifier

Parameter	Type	Description
property	string	The CSS property name to remove

Returns: HtmlNodeModifier for method chaining

Example:

modifier.modifyHtml(element)
    .removeStyle('margin');

---

Advanced Methods

delete()

Removes the current node from the DOM tree.

delete(): HtmlNodeModifier

Returns: HtmlNodeModifier for method chaining

Example:

modifier.modifyHtml(elementToRemove)
    .delete();

---

setDisplayCondition()

Sets a display condition for conditional visibility.

setDisplayCondition(condition: DisplayCondition): HtmlNodeModifier

Parameter	Type	Description
condition	DisplayCondition	The display condition configuration

Returns: HtmlNodeModifier for method chaining

Usage Notes:

• Display conditions control element visibility based on runtime evaluation
• Useful for personalization, A/B testing, and dynamic content
• Conditions are evaluated when the email is rendered

Example:

modifier.modifyHtml(element)
    .setDisplayCondition({
        id: 1,
        name: 'Female',
        description: 'Only female customers will see this part of the email.',
        beforeScript: '{% if contact.gender == \"Female\" %}',
        afterScript: '{% endif %}'
    });

---

setNodeConfig()

Attaches custom configuration data to the node.

setNodeConfig(config: Record<string, any>): HtmlNodeModifier

Parameter	Type	Description
config	Record<string, any>	Configuration object to attach

Returns: HtmlNodeModifier for method chaining

Usage Notes:

• Store extension-specific data without using HTML attributes
• Configuration is preserved during template operations
• Synchronized across all users in collaborative editing

Example:

modifier.modifyHtml(widgetNode)
    .setNodeConfig({
        widgetType: 'countdown',
        endDate: '2024-12-31T23:59:59Z',
        format: 'DD:HH:MM:SS',
        onExpiry: 'hide'
    });

---

multiRowStructureModifier()

Returns a modifier for creating and modifying email structures.

multiRowStructureModifier(): MultiRowStructureModifier

Returns: MultiRowStructureModifier - Interface for structure modifications

Example:

modifier.modifyHtml(structureNode)
    .multiRowStructureModifier()
    .updateLayout(['33%', '34%', '33%']);