@useinsider/guido 3.7.2-beta.0ef1511 → 3.7.2-beta.1489585

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/config/compiler/utils/recommendationCompilerUtils.js +19 -25
  2. package/dist/extensions/Blocks/Recommendation/constants/selectors.js +11 -10
  3. package/dist/extensions/Blocks/Recommendation/controls/main/index.js +24 -26
  4. package/dist/extensions/Blocks/Recommendation/controls/main/layoutOrientation.js +30 -39
  5. package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +28 -34
  6. package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +285 -333
  7. package/dist/extensions/Blocks/Recommendation/extension.js +6 -5
  8. package/dist/extensions/Blocks/Recommendation/settingsPanel.js +3 -2
  9. package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js +142 -173
  10. package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +56 -30
  11. package/dist/extensions/Blocks/Recommendation/templates/index.js +29 -8
  12. package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js +132 -105
  13. package/dist/extensions/Blocks/Recommendation/templates/list/template.js +44 -23
  14. package/dist/extensions/Blocks/Recommendation/templates/utils.js +112 -64
  15. package/dist/extensions/Blocks/Recommendation/utils/captureStyleTemplates.js +216 -0
  16. package/dist/extensions/Blocks/Recommendation/utils/preserveTextStyles.js +24 -19
  17. package/dist/extensions/Blocks/Recommendation/utils/tagName.js +30 -22
  18. package/dist/extensions/Blocks/controlFactories.js +159 -133
  19. package/dist/src/extensions/Blocks/Items/controls/index.d.ts +1 -1
  20. package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts +1 -1
  21. package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts +2 -0
  22. package/dist/src/extensions/Blocks/Recommendation/controls/button/index.d.ts +1 -1
  23. package/dist/src/extensions/Blocks/Recommendation/controls/main/layoutOrientation.d.ts +2 -1
  24. package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +20 -47
  25. package/dist/src/extensions/Blocks/Recommendation/templates/grid/template.d.ts +4 -4
  26. package/dist/src/extensions/Blocks/Recommendation/templates/index.d.ts +1 -1
  27. package/dist/src/extensions/Blocks/Recommendation/templates/list/template.d.ts +3 -2
  28. package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts +165 -11
  29. package/dist/src/extensions/Blocks/Recommendation/utils/captureStyleTemplates.d.ts +78 -0
  30. package/dist/src/extensions/Blocks/Recommendation/utils/preserveTextStyles.d.ts +15 -0
  31. package/dist/src/extensions/Blocks/Recommendation/utils/tagName.d.ts +29 -9
  32. package/dist/src/extensions/Blocks/controlFactories.d.ts +11 -1
  33. package/package.json +10 -1
  34. package/dist/src/composables/validators/useUnsubscribeBlockValidator.test.d.ts +0 -1
  35. package/dist/src/extensions/Blocks/Recommendation/block.test.d.ts +0 -1
  36. package/dist/src/extensions/Blocks/Recommendation/utils/recommendationBlockCount.test.d.ts +0 -1
  37. package/dist/src/extensions/Blocks/Recommendation/utils/stylePreserver.d.ts +0 -113
@@ -1,4 +1,5 @@
1
1
  import type { FiltersResponse, RecommendationProduct } from '@@/Types/recommendation';
2
+ import { type RenderOptions } from '../utils';
2
3
  /**
3
4
  * Generates a list product card with 3-column layout
4
5
  * Uses buildElementRenderer to render Image, Info content, and Button
@@ -11,7 +12,7 @@ import type { FiltersResponse, RecommendationProduct } from '@@/Types/recommenda
11
12
  * @param composition - Array defining order of card elements
12
13
  * @returns HTML string for a single product card row
13
14
  */
14
- export declare function getListProductCard(product: RecommendationProduct, composition?: string[], filterList?: FiltersResponse): string;
15
+ export declare function getListProductCard(product: RecommendationProduct, composition?: string[], filterList?: FiltersResponse, renderOptions?: RenderOptions): string;
15
16
  /**
16
17
  * Prepares list product rows
17
18
  * Each product is a full-width row with 3-column layout
@@ -19,6 +20,6 @@ export declare function getListProductCard(product: RecommendationProduct, compo
19
20
  * @param composition - Array defining order of card elements
20
21
  * @returns HTML string for product rows
21
22
  */
22
- export declare function prepareProductRows(products: RecommendationProduct[], composition?: string[], filterList?: FiltersResponse): string;
23
+ export declare function prepareProductRows(products: RecommendationProduct[], composition?: string[], filterList?: FiltersResponse, renderOptions?: RenderOptions): string;
23
24
  export declare function getDefaultTemplate(): string;
24
25
  export declare function generateBlockTemplate(products: RecommendationProduct[], title?: string, composition?: string[]): string;
@@ -25,13 +25,20 @@ export declare function isDefaultAttribute(attrName: string, filterList: Filters
25
25
  * - Product attributes → "product_attribute.<name>" (e.g., "product_attribute.rating_star")
26
26
  */
27
27
  export declare function resolveProductAttrValue(attrName: string, filterList: FiltersResponse): string;
28
+ /**
29
+ * Reverse of `resolveProductAttrValue`: maps a cell's `product-attr` value back to its
30
+ * `customAttr:<name>` composition key. The resolver only ever emits `<name>` (default
31
+ * attribute) or `product_attribute.<name>` (custom product attribute), so stripping the
32
+ * prefix recovers the attribute name without needing the store's filter list.
33
+ */
34
+ export declare function toCustomCompositionKey(productAttrValue: string): string;
28
35
  /**
29
36
  * Callback that generates the cell HTML for a custom product attribute.
30
37
  * Layout-specific: grid returns `<td>…`, list returns `<tr><td>…</td></tr>`.
31
38
  * @param productAttrValue - The resolved `product-attr` value (e.g., "brand" or "product_attribute.rating_star")
32
39
  * @param content - The display content for the cell
33
40
  */
34
- export type CustomCellHtmlGetter = (productAttrValue: string, content: string) => string;
41
+ export type CustomCellHtmlGetter = (productAttrValue: string, content: string, options?: CellRenderOptions) => string;
35
42
  /**
36
43
  * Symbol key for embedding custom attribute HTML in an ElementRenderer.
37
44
  * Grid and list renderers store their custom-attribute cell template under this key
@@ -54,10 +61,99 @@ export declare const CUSTOM_CELL_HTML: unique symbol;
54
61
  */
55
62
  export declare function buildElementRenderer(baseRenderer: ElementRenderer, composition: string[], filterList?: FiltersResponse): ElementRenderer;
56
63
  export type Orientation = 'list' | 'grid';
64
+ /**
65
+ * A captured "style template" for one text attribute, used to bake user-applied
66
+ * styling back into regenerated HTML in a SINGLE setInnerHtml/apply pass.
67
+ *
68
+ * Stripo applies inline formats as TAGS (`<strong>`, `<em>`, `<s>`), not CSS, so we
69
+ * preserve the actual wrapper tags around the text — re-emitting `text-decoration`
70
+ * CSS would render a strike that Stripo's own toggle can't detect. `pStyle` carries
71
+ * the `<p>`-level inline CSS (font-size/color/align/etc.).
72
+ */
73
+ export interface AttributeStyleTemplate {
74
+ /** Raw inline style for the `<p>`, e.g. "font-size: 18px; color: #111;" */
75
+ pStyle?: string;
76
+ /** Opening inline-format tags captured around the text (or button label), e.g. "<strong><em>" */
77
+ openTags?: string;
78
+ /** Matching closing tags in reverse order, e.g. "</em></strong>" */
79
+ closeTags?: string;
80
+ /** Button: inline style of the `<span class="es-button-border">` (background/border/radius). */
81
+ buttonBorderStyle?: string;
82
+ /** Button: inline style of the `<a class="es-button">` (color/background/font/padding/width). */
83
+ buttonAnchorStyle?: string;
84
+ /** Button: whether "Fit to Container" is on (the `es-fw` class on the border span). */
85
+ buttonFitToContainer?: boolean;
86
+ /** Button: the user-edited label text (without wrapper tags), e.g. "Shop Now" instead of "Buy". */
87
+ buttonText?: string;
88
+ /** Image: inline style of the `<img>` (width/height/max-width/border-radius/margin). */
89
+ imgStyle?: string;
90
+ }
91
+ /** Per-attribute style templates keyed by ATTR_PRODUCT_* composition key. */
92
+ export type AttributeStyleTemplates = Record<string, AttributeStyleTemplate>;
93
+ /** Per-attribute "Block Background Color" values keyed by ATTR_PRODUCT_* composition key. */
94
+ export type CellBackgroundColors = Record<string, string>;
95
+ /** Per-attribute text alignment (the cell's `align` attribute) keyed by ATTR_PRODUCT_* composition key. */
96
+ export type CellAlignments = Record<string, string>;
97
+ /** Per-attribute preserved cell classes (padding `es-p*`, margin `es-m*`, text-trim) keyed by attr. */
98
+ export type CellClasses = Record<string, string>;
99
+ /** A user-edited omnibus prefix/suffix, e.g. before = "Lowest 30-day price: ". */
100
+ export interface OmnibusText {
101
+ before?: string;
102
+ after?: string;
103
+ }
104
+ /** Per-attribute omnibus before/after texts keyed by ATTR_PRODUCT_OMNIBUS_* composition key. */
105
+ export type OmnibusTexts = Record<string, OmnibusText>;
106
+ /** Per-attribute visibility (show/hide) keyed by ATTR_PRODUCT_* composition key. */
107
+ export type AttributeVisibility = Record<string, boolean>;
108
+ /**
109
+ * Per-cell rendering context passed to each ElementRenderer function so a single
110
+ * regeneration can bake column spacing and preserved styles directly into the HTML.
111
+ */
112
+ export interface CellRenderOptions {
113
+ /** Column-spacing padding for the attribute cell, e.g. "0 7px". Falls back to DEFAULT_CELL_PADDING. */
114
+ cellPadding?: string;
115
+ /** Captured style template for this attribute (preserves user bold/italic/strike + p-style). */
116
+ styleTemplate?: AttributeStyleTemplate;
117
+ /** Card background color baked onto the `.product-card-segment` of every cell. */
118
+ cardBackgroundColor?: string;
119
+ /** This text attribute's "Block Background Color", baked onto its `[esd-extension-block-id]` cell. */
120
+ cellBackgroundColor?: string;
121
+ /** This text attribute's alignment, baked onto its `[esd-extension-block-id]` cell `align` attribute. */
122
+ cellAlignment?: string;
123
+ /** This cell's preserved spacing/text-trim classes, replacing the renderer's hardcoded `es-p*` defaults. */
124
+ cellClasses?: string;
125
+ /** Omnibus cell's user-edited before/after text, replacing the renderer's hardcoded prefix. */
126
+ omnibusText?: OmnibusText;
127
+ }
128
+ /**
129
+ * Spacing + preserved-style values baked into generated HTML so a regeneration
130
+ * needs only a single setInnerHtml/apply (no deferred reapply pass). Shared by the
131
+ * grid and list layout generators and by `PrepareProductRowsOptions`.
132
+ */
133
+ export interface RenderOptions {
134
+ /** Column-spacing padding baked into product cells (grid) or the card wrapper (list), e.g. "0 7px". */
135
+ cellPadding?: string;
136
+ /** Row-spacing height in px baked into spacer rows between product rows. */
137
+ rowSpacingPx?: number;
138
+ /** Per-attribute captured style templates to preserve user styling across regeneration. */
139
+ styleTemplates?: AttributeStyleTemplates;
140
+ /** Card background color baked into the card containers (`.product-card-segment` / `.product-card-wrapper`). */
141
+ cardBackgroundColor?: string;
142
+ /** Per-attribute "Block Background Color" values baked onto each text cell across regeneration. */
143
+ cellBackgroundColors?: CellBackgroundColors;
144
+ /** Per-attribute text alignment baked onto each text cell's `align` attribute across regeneration. */
145
+ cellAlignments?: CellAlignments;
146
+ /** Per-attribute preserved cell classes (padding/margin/text-trim) re-baked across regeneration. */
147
+ cellClasses?: CellClasses;
148
+ /** Per-attribute omnibus before/after texts re-baked across regeneration. */
149
+ omnibusTexts?: OmnibusTexts;
150
+ /** Per-attribute visibility (show/hide) re-applied across regeneration; falls back to defaults. */
151
+ visibility?: AttributeVisibility;
152
+ }
57
153
  /**
58
154
  * Options for prepareProductRows unified function
59
155
  */
60
- export interface PrepareProductRowsOptions {
156
+ export interface PrepareProductRowsOptions extends RenderOptions {
61
157
  /** Number of products per row (only for grid layout, defaults to 3) */
62
158
  productsPerRow?: number;
63
159
  /** Number of products per row on mobile (only for grid layout, defaults to 1) */
@@ -75,15 +171,15 @@ export interface PrepareProductRowsOptions {
75
171
  * for custom attributes — used by `buildElementRenderer` to create custom entries.
76
172
  */
77
173
  export interface ElementRenderer {
78
- [ATTR_PRODUCT_IMAGE]: (product: RecommendationProduct) => string;
79
- [ATTR_PRODUCT_NAME]: (product: RecommendationProduct) => string;
80
- [ATTR_PRODUCT_PRICE]: (product: RecommendationProduct) => string;
81
- [ATTR_PRODUCT_OLD_PRICE]: (product: RecommendationProduct) => string;
82
- [ATTR_PRODUCT_OMNIBUS_PRICE]: (product: RecommendationProduct) => string;
83
- [ATTR_PRODUCT_OMNIBUS_DISCOUNT]: (product: RecommendationProduct) => string;
84
- [ATTR_PRODUCT_BUTTON]: (product: RecommendationProduct) => string;
174
+ [ATTR_PRODUCT_IMAGE]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
175
+ [ATTR_PRODUCT_NAME]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
176
+ [ATTR_PRODUCT_PRICE]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
177
+ [ATTR_PRODUCT_OLD_PRICE]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
178
+ [ATTR_PRODUCT_OMNIBUS_PRICE]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
179
+ [ATTR_PRODUCT_OMNIBUS_DISCOUNT]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
180
+ [ATTR_PRODUCT_BUTTON]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
85
181
  [CUSTOM_CELL_HTML]?: CustomCellHtmlGetter;
86
- [key: string]: (product: RecommendationProduct) => string;
182
+ [key: string]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
87
183
  }
88
184
  /**
89
185
  * Product card getter function type
@@ -96,7 +192,65 @@ export declare const DEFAULTS: {
96
192
  };
97
193
  export declare const DEFAULT_CARD_COMPOSITION: string[];
98
194
  export declare const DEFAULT_CARD_VISIBILITY: Record<string, boolean>;
99
- export declare const spacer = "\n <tr>\n <td class=\"spacer\" style=\"height: 10px;\"></td>\n </tr>\n";
195
+ /** Default row-spacing height in px, used when no explicit value is baked in. */
196
+ export declare const DEFAULT_ROW_SPACING_PX = 10;
197
+ /**
198
+ * Builds a spacer row with the given height. Baking row spacing into the HTML lets
199
+ * regeneration use a single setInnerHtml/apply instead of a deferred reapply pass.
200
+ */
201
+ export declare function buildSpacer(heightPx?: number): string;
202
+ export declare const spacer: string;
203
+ /**
204
+ * Resolves the `<p>` inline style for a text cell. When a captured template exists,
205
+ * it wins (even when empty — meaning the user cleared the style); otherwise the
206
+ * renderer's default style is used.
207
+ */
208
+ export declare function resolvePStyle(defaultPStyle: string, template?: AttributeStyleTemplate): string;
209
+ /**
210
+ * Renders `<p>…text…</p>` for a text attribute, preserving captured inline-format
211
+ * tags (`<strong>`/`<em>`/`<s>`) and p-style when a template is supplied, or falling
212
+ * back to the renderer defaults. A present-but-empty template faithfully drops the
213
+ * default wrapper (e.g. the user removed bold).
214
+ */
215
+ export declare function renderStyledParagraph(text: string, defaults: {
216
+ pStyle: string;
217
+ openTags: string;
218
+ closeTags: string;
219
+ }, template?: AttributeStyleTemplate): string;
220
+ /**
221
+ * Builds the inline style for a card container (`.product-card-segment` in grid,
222
+ * `.product-card-wrapper` in list), appending the captured card background color to any
223
+ * base style. Returns '' when there is nothing to set.
224
+ */
225
+ export declare function resolveSegmentBgStyle(baseStyle: string, cardBackgroundColor?: string): string;
226
+ /**
227
+ * Builds the ` style="background-color: …"` attribute for a text attribute's
228
+ * `[esd-extension-block-id]` cell, baking in the captured "Block Background Color".
229
+ * Returns '' when there is nothing to set (the cell otherwise carries no inline style).
230
+ */
231
+ export declare function cellBgStyleAttr(cellBackgroundColor?: string): string;
232
+ /** Resolves an omnibus cell's before/after text, falling back to the renderer's defaults. */
233
+ export declare function resolveOmnibusText(captured?: OmnibusText, defaultBefore?: string): Required<OmnibusText>;
234
+ /**
235
+ * Wraps a button label in the captured inline-format tags (bold/italic), or returns it
236
+ * plain. Mirrors text wrapper preservation for the button's `<a>` content.
237
+ */
238
+ export declare function renderButtonLabel(label: string, template?: AttributeStyleTemplate): string;
239
+ /**
240
+ * Resolves the `<span class="es-button-border">` class, adding `es-fw` (full-width)
241
+ * when the captured template had "Fit to Container" on. Stripo applies fit via this
242
+ * class, not inline width, so we preserve the class across regeneration.
243
+ */
244
+ export declare function resolveButtonBorderClass(template?: AttributeStyleTemplate): string;
245
+ /** Default inline style for the product image `<img>` (used when nothing is captured). */
246
+ export declare const DEFAULT_IMG_STYLE = "display: block; max-width: 100%; height: auto;";
247
+ /** Default inline style for the button `<span class="es-button-border">`. */
248
+ export declare const DEFAULT_BUTTON_BORDER_STYLE: string;
249
+ /**
250
+ * Default inline style for the button `<a class="es-button">`. The list layout appends its
251
+ * own `padding: 5px 30px;` on top of this shared base.
252
+ */
253
+ export declare const DEFAULT_BUTTON_ANCHOR_STYLE: string;
100
254
  export declare const PLACEHOLDER_IMAGE = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
101
255
  /**
102
256
  * Sanitizes product image URLs for consistent rendering
@@ -0,0 +1,78 @@
1
+ /**
2
+ * Capture Style Templates
3
+ *
4
+ * Reads the user-applied styling of each text attribute from the LIVE block DOM
5
+ * and turns it into per-attribute `AttributeStyleTemplate`s that the template
6
+ * renderers bake straight into regenerated HTML.
7
+ *
8
+ * Why this exists: a full regeneration replaces product cells via `setInnerHtml`.
9
+ * Querying the new cells to re-apply styles after `apply()` requires a second
10
+ * (deferred) commit, and multiple commits corrupt Stripo's selection tracking
11
+ * (the `textContent` crash). Baking the captured styles into the HTML keeps the
12
+ * whole regeneration a SINGLE `setInnerHtml` + SINGLE `apply()`.
13
+ *
14
+ * Inline formats (bold/italic/strike) are captured as TAGS (`<strong>/<em>/<s>`),
15
+ * not CSS, because Stripo applies and detects them as tags — re-emitting
16
+ * `text-decoration` CSS would render a strike its own toggle can't see.
17
+ */
18
+ import type { AttributeStyleTemplates, OmnibusText, RenderOptions } from '../templates/utils';
19
+ import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
20
+ /**
21
+ * Captures per-attribute style templates (text + button + image) from the block's desktop
22
+ * container. Scoped to desktop so the mobile container's duplicate block ids aren't read.
23
+ * Returns only the attributes that actually have styling worth preserving.
24
+ */
25
+ export declare function captureAttributeStyleTemplates(node: ImmutableHtmlNode | null | undefined): AttributeStyleTemplates;
26
+ /**
27
+ * Captures the card background color (the "Styles" tab control) from the first card
28
+ * container — `.product-card-segment` in grid, `.product-card-wrapper` in list. Returns
29
+ * undefined when unset/transparent so the renderer keeps its (bg-less) default.
30
+ */
31
+ export declare function captureCardBackgroundColor(node: ImmutableHtmlNode | null | undefined): string | undefined;
32
+ /**
33
+ * Captures each text attribute's "Block Background Color" (Styles tab) from the block's
34
+ * desktop container, keyed by composition key. The renderers bake these
35
+ * straight onto the regenerated `[esd-extension-block-id]` cell so the bg survives a full
36
+ * regeneration — unlike the card background, the text-cell bg lives on the attribute cell
37
+ * itself and is only readable via `getComputedStyle` (see `readCellBackground`). Returns
38
+ * only the attributes that actually carry a non-transparent background.
39
+ */
40
+ export declare function captureCellBackgroundColors(node: ImmutableHtmlNode | null | undefined): Record<string, string>;
41
+ /**
42
+ * Captures each text attribute's alignment from the cell's `align` attribute, keyed by
43
+ * composition key. Stripo's built-in `TextAlignBuiltInControl` writes the
44
+ * alignment as the `align` HTML attribute on the `[esd-extension-block-id]` cell (not as
45
+ * inline `text-align`), so the renderers' hardcoded `align` would otherwise reset it on
46
+ * every regeneration. We capture the current value and re-bake it.
47
+ */
48
+ export declare function captureCellAlignments(node: ImmutableHtmlNode | null | undefined): Record<string, string>;
49
+ /**
50
+ * Captures each text/button cell's preservable classes (padding `es-p*`, margin `es-m*`,
51
+ * text-trim) keyed by composition key, so a regeneration can re-bake them
52
+ * instead of resetting to the renderer's hardcoded spacing classes. Stripo stores padding
53
+ * and margin as these classes (NOT inline style), so an inline-style capture misses them.
54
+ */
55
+ export declare function captureCellClasses(node: ImmutableHtmlNode | null | undefined): Record<string, string>;
56
+ /**
57
+ * Captures the omnibus cells' editable before/after text (from the `data-text-before` /
58
+ * `data-text-after` attributes the omnibus text controls write), keyed by attr, so a
59
+ * regeneration re-bakes the user's wording instead of the renderer's hardcoded prefix.
60
+ */
61
+ export declare function captureOmnibusTexts(node: ImmutableHtmlNode | null | undefined): Record<string, OmnibusText>;
62
+ /**
63
+ * Captures the current per-attribute visibility from the live block, keyed by composition
64
+ * attribute (`data-attribute-type`). The card-composition control toggles visibility by
65
+ * setting `display`/`data-visibility` on `.recommendation-attribute-row`s, but the renderers
66
+ * re-apply the hardcoded `DEFAULT_CARD_VISIBILITY` on regeneration — so a user who showed
67
+ * omnibus (default-hidden) or hid a row would lose it. Capturing the live `data-visibility`
68
+ * lets the rebuild honor the user's choice.
69
+ */
70
+ export declare function captureVisibility(node: ImmutableHtmlNode | null | undefined): Record<string, boolean>;
71
+ /**
72
+ * The full bundle of user-applied styling captured from the live block before a
73
+ * regeneration replaces its cells. Threaded as ONE object (not a long positional list)
74
+ * into the rebuild so the regenerated HTML re-bakes every preserved value.
75
+ */
76
+ export type StyleCaptures = Pick<RenderOptions, 'styleTemplates' | 'cardBackgroundColor' | 'cellBackgroundColors' | 'cellAlignments' | 'cellClasses' | 'omnibusTexts' | 'visibility'>;
77
+ /** Runs every capture against the live node and returns them as a single bundle. */
78
+ export declare function captureStyles(node: ImmutableHtmlNode | null | undefined): StyleCaptures;
@@ -1,4 +1,19 @@
1
1
  import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
2
+ /**
3
+ * Extracts the nested inline-format wrapper tags around text content, outermost first.
4
+ *
5
+ * Stripo applies bold/italic/underline/strike as tags (`<strong>/<em>/<u>/<s>`), so to
6
+ * preserve user formatting across a text swap or block regeneration we capture the actual
7
+ * wrapper tags rather than CSS.
8
+ * @example
9
+ * // '<strong><em>Hi</em></strong>' → { openTags: '<strong><em>', closeTags: '</em></strong>' }
10
+ * @param html - The inner HTML to parse
11
+ * @returns The concatenated opening tags and matching closing tags (empty strings if none)
12
+ */
13
+ export declare function extractWrapperTags(html: string): {
14
+ openTags: string;
15
+ closeTags: string;
16
+ };
2
17
  /**
3
18
  * Preserves existing style tags when updating text content
4
19
  *
@@ -5,33 +5,54 @@
5
5
  * Handles both standard DOM properties and Stripo's custom methods.
6
6
  */
7
7
  import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
8
- /** Interface for nodes with standard tagName property */
9
- interface NodeWithTagName {
10
- tagName: string;
11
- }
12
8
  /** Interface for nodes with getStyle method */
13
9
  export interface NodeWithGetStyle {
14
10
  getStyle: (property: string) => string | null | undefined;
15
11
  }
12
+ /** Interface for nodes with getComputedStyle method */
13
+ export interface NodeWithGetComputedStyle {
14
+ getComputedStyle: (property: string) => string | null | undefined;
15
+ }
16
+ /** Interface for nodes with getAttribute method */
17
+ export interface NodeWithGetAttribute {
18
+ getAttribute: (name: string) => string | null;
19
+ }
16
20
  /** Interface for nodes with parent method */
17
21
  export interface NodeWithParent {
18
22
  parent: () => ImmutableHtmlNode | null;
19
23
  }
24
+ /** Interface for nodes with querySelectorAll method */
25
+ export interface NodeWithQuerySelectorAll {
26
+ querySelectorAll: (selector: string) => ImmutableHtmlNode[];
27
+ }
20
28
  /**
21
29
  * Type guard to check if a node has getStyle method
22
30
  * @param node - The node to check
23
31
  */
24
32
  export declare function hasGetStyle(node: unknown): node is NodeWithGetStyle;
25
33
  /**
26
- * Type guard to check if a node has parent method
34
+ * Type guard to check if a node has getComputedStyle method.
35
+ * This is the only read that sees a background applied by Stripo's built-in
36
+ * "Block Background Color" control — it writes neither an inline style nor a
37
+ * queryable stylesheet rule, but the computed value is still resolvable.
27
38
  * @param node - The node to check
28
39
  */
29
- export declare function hasParent(node: unknown): node is NodeWithParent;
40
+ export declare function hasGetComputedStyle(node: unknown): node is NodeWithGetComputedStyle;
41
+ /**
42
+ * Type guard to check if a node has getAttribute method
43
+ * @param node - The node to check
44
+ */
45
+ export declare function hasGetAttribute(node: unknown): node is NodeWithGetAttribute;
30
46
  /**
31
- * Type guard to check if a node is a TD element
47
+ * Type guard to check if a node has querySelectorAll method
32
48
  * @param node - The node to check
33
49
  */
34
- export declare function isTdNode(node: unknown): node is ImmutableHtmlNode & NodeWithTagName;
50
+ export declare function hasQuerySelectorAll(node: unknown): node is NodeWithQuerySelectorAll;
51
+ /**
52
+ * Type guard to check if a node has parent method
53
+ * @param node - The node to check
54
+ */
55
+ export declare function hasParent(node: unknown): node is NodeWithParent;
35
56
  /**
36
57
  * Safely retrieves a style value from a node
37
58
  * @param node - The node to get the style from
@@ -74,4 +95,3 @@ export declare function isTableCellNode(node: ImmutableHtmlNode | null | undefin
74
95
  * @returns The CSS display value ('table-cell' or 'table-row')
75
96
  */
76
97
  export declare function getTableDisplayValue(node: ImmutableHtmlNode | null | undefined): 'table-cell' | 'table-row';
77
- export {};
@@ -280,11 +280,21 @@ export declare function createButtonTextStyleAndFontColorControl(controlId: stri
280
280
  new (): {
281
281
  getId(): string;
282
282
  getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
283
+ /**
284
+ * Propagates Bold/Italic to ALL product buttons, not just the focused one.
285
+ *
286
+ * Stripo's built-in applies font-color/size to every target node but writes
287
+ * the text-style (font-weight/font-style) only to the selected button. Bold/italic
288
+ * are plain inline CSS on the `<a class="es-button">` (no tags), so we mirror them
289
+ * onto every button's anchor. The toggle state comes from the control's form
290
+ * (`buttonTextStyleForm.{bold,italic}`) because the patched node isn't updated yet
291
+ * when this runs. Returned modifications are merged into the parent control's patch.
292
+ */
293
+ getAdditionalModifications(root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
283
294
  getParentControlId(): string;
284
295
  getLabels(): import("@stripoinc/ui-editor-extensions").ButtonTextStyleAndFontColorControlLabels | undefined;
285
296
  api: import("@stripoinc/ui-editor-extensions").ControlApi;
286
297
  getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
287
- getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
288
298
  isVisible(_node: ImmutableHtmlNode): boolean;
289
299
  };
290
300
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useinsider/guido",
3
- "version": "3.7.2-beta.0ef1511",
3
+ "version": "3.7.2-beta.1489585",
4
4
  "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
5
5
  "main": "./dist/guido.umd.cjs",
6
6
  "module": "./dist/library.js",
@@ -27,6 +27,8 @@
27
27
  "test": "vitest run --coverage",
28
28
  "test:watch": "vitest",
29
29
  "test:visual-update": "npx playwright test --update-snapshots --reporter html",
30
+ "test:e2e:coverage": "E2E_COVERAGE=true playwright test",
31
+ "coverage:e2e:report": "nyc report --reporter=lcov --reporter=text-summary --report-dir=coverage/e2e",
30
32
  "prepare": "husky",
31
33
  "preinstall": "rm -rf ./node_modules/.vite"
32
34
  },
@@ -74,10 +76,12 @@
74
76
  "happy-dom": "15.11.7",
75
77
  "husky": "9.1.7",
76
78
  "msw": "2.10.3",
79
+ "nyc": "17.1.0",
77
80
  "sass": "1.69.7",
78
81
  "typescript": "5.5.4",
79
82
  "typescript-eslint": "8.26.0",
80
83
  "vite-plugin-dts": "4.5.4",
84
+ "vite-plugin-istanbul": "7.0.0",
81
85
  "vitest": "2.1.9",
82
86
  "vue-tsc": "2.2.10"
83
87
  },
@@ -90,6 +94,11 @@
90
94
  "msw": {
91
95
  "workerDirectory": "public"
92
96
  },
97
+ "nyc": {
98
+ "report-dir": "coverage/e2e",
99
+ "reporter": ["lcov", "text-summary"],
100
+ "all": false
101
+ },
93
102
  "guido": {
94
103
  "stripo": {
95
104
  "version": "2.65.0"
@@ -1,113 +0,0 @@
1
- /**
2
- * Style Preserver Utility
3
- *
4
- * Captures and restores element styles during block regeneration.
5
- * This ensures user styling is preserved when:
6
- * - Layout changes (grid <-> list)
7
- * - Cards per row changes
8
- * - Composition order changes
9
- *
10
- * Works with the node config system to provide complete style persistence.
11
- */
12
- import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
13
- import { ModificationDescription } from '@stripoinc/ui-editor-extensions';
14
- /**
15
- * Style properties that can be captured for text elements
16
- */
17
- export interface TextElementStyles {
18
- fontSize?: string;
19
- fontFamily?: string;
20
- fontWeight?: string;
21
- fontStyle?: string;
22
- color?: string;
23
- textAlign?: string;
24
- lineHeight?: string;
25
- textDecoration?: string;
26
- }
27
- /**
28
- * Style properties for button elements
29
- */
30
- export interface ButtonElementStyles extends TextElementStyles {
31
- backgroundColor?: string;
32
- borderRadius?: string;
33
- border?: string;
34
- padding?: string;
35
- }
36
- /**
37
- * Style properties for image elements
38
- */
39
- export interface ImageElementStyles {
40
- width?: string;
41
- height?: string;
42
- maxWidth?: string;
43
- }
44
- /**
45
- * Complete captured styles for a recommendation block
46
- */
47
- export interface CapturedStyles {
48
- /** Product name text styles */
49
- name: TextElementStyles;
50
- /** Current price text styles */
51
- price: TextElementStyles;
52
- /** Original/old price text styles */
53
- oldPrice: TextElementStyles;
54
- /** Omnibus price text styles */
55
- omnibusPrice: TextElementStyles;
56
- /** Omnibus discount text styles */
57
- omnibusDiscount: TextElementStyles;
58
- /** CTA button styles */
59
- button: ButtonElementStyles;
60
- /** Product image styles */
61
- image: ImageElementStyles;
62
- /** Card background color */
63
- cardBackgroundColor: string | null;
64
- /** Column spacing in pixels */
65
- columnSpacing: number;
66
- /** Row spacing in pixels */
67
- rowSpacing: number;
68
- /** Element composition order */
69
- composition: string[];
70
- /** Element visibility flags */
71
- visibility: Record<string, boolean>;
72
- }
73
- type DocumentModifier = {
74
- modifyHtml: (node: ImmutableHtmlNode) => {
75
- setStyle: (prop: string, value: string) => DocumentModifier;
76
- };
77
- apply: (description: ModificationDescription) => void;
78
- };
79
- /**
80
- * Capture all styles from a recommendation block
81
- *
82
- * Call this BEFORE any operation that regenerates the block HTML.
83
- * The captured styles can then be restored after regeneration.
84
- * @example
85
- * // Before layout change
86
- * const styles = captureStyles(this.currentNode);
87
- *
88
- * // ... regenerate block HTML ...
89
- *
90
- * // After regeneration
91
- * restoreStyles(this.currentNode, this.api.getDocumentModifier(), styles);
92
- * @param node - The block node to capture styles from
93
- * @returns Complete captured styles object
94
- */
95
- export declare function captureStyles(node: ImmutableHtmlNode | null | undefined): CapturedStyles;
96
- /**
97
- * Restore captured styles to a regenerated block
98
- *
99
- * Call this AFTER regenerating block HTML to reapply user styling.
100
- * @example
101
- * restoreStyles(this.currentNode, this.api.getDocumentModifier(), capturedStyles);
102
- * @param node - The block node to restore styles to
103
- * @param modifier - Document modifier for applying changes
104
- * @param styles - Previously captured styles
105
- */
106
- export declare function restoreStyles(node: ImmutableHtmlNode | null | undefined, modifier: DocumentModifier, styles: CapturedStyles): void;
107
- /**
108
- * Check if styles have meaningful content worth restoring
109
- * @param styles - Captured styles to check
110
- * @returns True if styles contain restorable content
111
- */
112
- export declare function hasRestorableStyles(styles: CapturedStyles): boolean;
113
- export {};