MultiRowStructureModifier

Interface for creating and modifying email structure layouts.

interface MultiRowStructureModifier

Description

MultiRowStructureModifier provides high-level methods to manage email structure containers, handling the intricate details of email-compatible HTML generation.

Import

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

Access

Access the MultiRowStructureModifier through the HtmlNodeModifier:

const structureModifier = modifier
    .modifyHtml(structureNode)
    .multiRowStructureModifier();

Methods

updateLayoutWithContent()

Creates a new structure with specified containers and content.

updateLayoutWithContent(
    layout: StructureLayout[], 
    containerContent: string[]
): HtmlNodeModifier

Parameters

Parameter	Type	Description
layout	StructureLayout[]	Array of container configurations defining the structure layout
containerContent	string[]	Array of HTML content strings for containers content

Returns

HtmlNodeModifier for method chaining

Description

This method completely replaces the existing structure with a new layout defined by the container configuration and content distribution. It handles:

• Responsive design implementation
• MSO/Outlook compatibility
• Automatic image resizing
• Proper DOM positioning
• Content distribution to content containers only

Usage Notes

• Content is only placed in content containers
• Empty and spacer containers do not receive content
• Number of content strings can be less than content containers (remaining will be empty)
• Excess content is wrapped to the next line as a new structure

Example

// Create a three-column layout with mixed container types
structureModifier.updateLayoutWithContent(
    [
        {width: '15%', contentType: 'SPACER'},  // Left margin
        '35%',                                   // Content column 1
        {width: '15%', contentType: 'EMPTY'},    // Placeholder for d&d content
        '35%'                                    // Content column 2
    ],
    [
        `<${BlockType.BLOCK_TEXT}>
            <p>Content 1</p>
        </${BlockType.BLOCK_TEXT}>`,
        
        `<${BlockType.BLOCK_TEXT}>
            <p>Content 2</p>
        </${BlockType.BLOCK_TEXT}>`
    ]
);

---

updateLayout()

Modifies the container layout while preserving existing content.

updateLayout(layout: StructureLayout[]): HtmlNodeModifier

Parameters

Parameter	Type	Description
layout	StructureLayout[]	New container layout configuration

Returns

HtmlNodeModifier for method chaining

Description

This method changes the container arrangement of the current structure without losing existing content. Content is redistributed among the new container layout with intelligent handling of mismatches.

Content Redistribution Rules

1. More containers than content: Empty containers are added
2. Fewer containers than content: Excess content is wrapped to the next line as a new structure
3. Same number: Content is mapped one-to-one
4. Empty/Spacer containers: Do not receive redistributed content

Example

// Convert two-column to three-column layout
structureModifier.updateLayout(['33%', '34%', '33%']);

// Add margins with spacers
structureModifier.updateLayout([
    {width: '30%', contentType: 'SPACER'},
    '40%',
    {width: '30%', contentType: 'SPACER'}
]);