@useinsider/guido 3.7.0-beta.bd7cb8f → 3.7.0-beta.d579d2a
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.
- package/dist/composables/useStripo.js +54 -68
- package/dist/config/i18n/en/toasters.json.js +0 -1
- package/dist/extensions/Blocks/Recommendation/controls/main/index.js +10 -12
- package/dist/extensions/Blocks/Recommendation/controls/main/layoutOrientation.js +24 -33
- package/dist/extensions/Blocks/Recommendation/controls/main/productLayout.js +34 -40
- package/dist/extensions/Blocks/Recommendation/controls/main/utils.js +287 -330
- package/dist/extensions/Blocks/Recommendation/extension.js +6 -5
- package/dist/extensions/Blocks/Recommendation/settingsPanel.js +3 -2
- package/dist/extensions/Blocks/Recommendation/templates/grid/elementRenderer.js +142 -173
- package/dist/extensions/Blocks/Recommendation/templates/grid/template.js +56 -30
- package/dist/extensions/Blocks/Recommendation/templates/index.js +29 -8
- package/dist/extensions/Blocks/Recommendation/templates/list/elementRenderer.js +132 -105
- package/dist/extensions/Blocks/Recommendation/templates/list/template.js +44 -23
- package/dist/extensions/Blocks/Recommendation/templates/utils.js +96 -53
- package/dist/extensions/Blocks/Recommendation/utils/captureStyleTemplates.js +207 -0
- package/dist/extensions/Blocks/Recommendation/utils/preserveTextStyles.js +24 -19
- package/dist/extensions/Blocks/Recommendation/utils/tagName.js +20 -16
- package/dist/extensions/Blocks/controlFactories.js +159 -133
- package/dist/src/extensions/Blocks/Items/controls/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/button/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts +20 -47
- package/dist/src/extensions/Blocks/Recommendation/templates/grid/template.d.ts +4 -4
- package/dist/src/extensions/Blocks/Recommendation/templates/index.d.ts +1 -1
- package/dist/src/extensions/Blocks/Recommendation/templates/list/template.d.ts +3 -2
- package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts +158 -11
- package/dist/src/extensions/Blocks/Recommendation/utils/captureStyleTemplates.d.ts +85 -0
- package/dist/src/extensions/Blocks/Recommendation/utils/preserveTextStyles.d.ts +15 -0
- package/dist/src/extensions/Blocks/Recommendation/utils/tagName.d.ts +20 -9
- package/dist/src/extensions/Blocks/controlFactories.d.ts +11 -1
- package/package.json +1 -1
- package/dist/src/extensions/Blocks/Recommendation/utils/stylePreserver.d.ts +0 -113
|
@@ -31,7 +31,7 @@ export declare function resolveProductAttrValue(attrName: string, filterList: Fi
|
|
|
31
31
|
* @param productAttrValue - The resolved `product-attr` value (e.g., "brand" or "product_attribute.rating_star")
|
|
32
32
|
* @param content - The display content for the cell
|
|
33
33
|
*/
|
|
34
|
-
export type CustomCellHtmlGetter = (productAttrValue: string, content: string) => string;
|
|
34
|
+
export type CustomCellHtmlGetter = (productAttrValue: string, content: string, options?: CellRenderOptions) => string;
|
|
35
35
|
/**
|
|
36
36
|
* Symbol key for embedding custom attribute HTML in an ElementRenderer.
|
|
37
37
|
* Grid and list renderers store their custom-attribute cell template under this key
|
|
@@ -54,10 +54,99 @@ export declare const CUSTOM_CELL_HTML: unique symbol;
|
|
|
54
54
|
*/
|
|
55
55
|
export declare function buildElementRenderer(baseRenderer: ElementRenderer, composition: string[], filterList?: FiltersResponse): ElementRenderer;
|
|
56
56
|
export type Orientation = 'list' | 'grid';
|
|
57
|
+
/**
|
|
58
|
+
* A captured "style template" for one text attribute, used to bake user-applied
|
|
59
|
+
* styling back into regenerated HTML in a SINGLE setInnerHtml/apply pass.
|
|
60
|
+
*
|
|
61
|
+
* Stripo applies inline formats as TAGS (`<strong>`, `<em>`, `<s>`), not CSS, so we
|
|
62
|
+
* preserve the actual wrapper tags around the text — re-emitting `text-decoration`
|
|
63
|
+
* CSS would render a strike that Stripo's own toggle can't detect. `pStyle` carries
|
|
64
|
+
* the `<p>`-level inline CSS (font-size/color/align/etc.).
|
|
65
|
+
*/
|
|
66
|
+
export interface AttributeStyleTemplate {
|
|
67
|
+
/** Raw inline style for the `<p>`, e.g. "font-size: 18px; color: #111;" */
|
|
68
|
+
pStyle?: string;
|
|
69
|
+
/** Opening inline-format tags captured around the text (or button label), e.g. "<strong><em>" */
|
|
70
|
+
openTags?: string;
|
|
71
|
+
/** Matching closing tags in reverse order, e.g. "</em></strong>" */
|
|
72
|
+
closeTags?: string;
|
|
73
|
+
/** Button: inline style of the `<span class="es-button-border">` (background/border/radius). */
|
|
74
|
+
buttonBorderStyle?: string;
|
|
75
|
+
/** Button: inline style of the `<a class="es-button">` (color/background/font/padding/width). */
|
|
76
|
+
buttonAnchorStyle?: string;
|
|
77
|
+
/** Button: whether "Fit to Container" is on (the `es-fw` class on the border span). */
|
|
78
|
+
buttonFitToContainer?: boolean;
|
|
79
|
+
/** Button: the user-edited label text (without wrapper tags), e.g. "Shop Now" instead of "Buy". */
|
|
80
|
+
buttonText?: string;
|
|
81
|
+
/** Image: inline style of the `<img>` (width/height/max-width/border-radius/margin). */
|
|
82
|
+
imgStyle?: string;
|
|
83
|
+
}
|
|
84
|
+
/** Per-attribute style templates keyed by ATTR_PRODUCT_* composition key. */
|
|
85
|
+
export type AttributeStyleTemplates = Record<string, AttributeStyleTemplate>;
|
|
86
|
+
/** Per-attribute "Block Background Color" values keyed by ATTR_PRODUCT_* composition key. */
|
|
87
|
+
export type CellBackgroundColors = Record<string, string>;
|
|
88
|
+
/** Per-attribute text alignment (the cell's `align` attribute) keyed by ATTR_PRODUCT_* composition key. */
|
|
89
|
+
export type CellAlignments = Record<string, string>;
|
|
90
|
+
/** Per-attribute preserved cell classes (padding `es-p*`, margin `es-m*`, text-trim) keyed by attr. */
|
|
91
|
+
export type CellClasses = Record<string, string>;
|
|
92
|
+
/** A user-edited omnibus prefix/suffix, e.g. before = "Lowest 30-day price: ". */
|
|
93
|
+
export interface OmnibusText {
|
|
94
|
+
before?: string;
|
|
95
|
+
after?: string;
|
|
96
|
+
}
|
|
97
|
+
/** Per-attribute omnibus before/after texts keyed by ATTR_PRODUCT_OMNIBUS_* composition key. */
|
|
98
|
+
export type OmnibusTexts = Record<string, OmnibusText>;
|
|
99
|
+
/** Per-attribute visibility (show/hide) keyed by ATTR_PRODUCT_* composition key. */
|
|
100
|
+
export type AttributeVisibility = Record<string, boolean>;
|
|
101
|
+
/**
|
|
102
|
+
* Per-cell rendering context passed to each ElementRenderer function so a single
|
|
103
|
+
* regeneration can bake column spacing and preserved styles directly into the HTML.
|
|
104
|
+
*/
|
|
105
|
+
export interface CellRenderOptions {
|
|
106
|
+
/** Column-spacing padding for the attribute cell, e.g. "0 7px". Falls back to DEFAULT_CELL_PADDING. */
|
|
107
|
+
cellPadding?: string;
|
|
108
|
+
/** Captured style template for this attribute (preserves user bold/italic/strike + p-style). */
|
|
109
|
+
styleTemplate?: AttributeStyleTemplate;
|
|
110
|
+
/** Card background color baked onto the `.product-card-segment` of every cell. */
|
|
111
|
+
cardBackgroundColor?: string;
|
|
112
|
+
/** This text attribute's "Block Background Color", baked onto its `[esd-extension-block-id]` cell. */
|
|
113
|
+
cellBackgroundColor?: string;
|
|
114
|
+
/** This text attribute's alignment, baked onto its `[esd-extension-block-id]` cell `align` attribute. */
|
|
115
|
+
cellAlignment?: string;
|
|
116
|
+
/** This cell's preserved spacing/text-trim classes, replacing the renderer's hardcoded `es-p*` defaults. */
|
|
117
|
+
cellClasses?: string;
|
|
118
|
+
/** Omnibus cell's user-edited before/after text, replacing the renderer's hardcoded prefix. */
|
|
119
|
+
omnibusText?: OmnibusText;
|
|
120
|
+
}
|
|
121
|
+
/**
|
|
122
|
+
* Spacing + preserved-style values baked into generated HTML so a regeneration
|
|
123
|
+
* needs only a single setInnerHtml/apply (no deferred reapply pass). Shared by the
|
|
124
|
+
* grid and list layout generators and by `PrepareProductRowsOptions`.
|
|
125
|
+
*/
|
|
126
|
+
export interface RenderOptions {
|
|
127
|
+
/** Column-spacing padding baked into product cells (grid) or the card wrapper (list), e.g. "0 7px". */
|
|
128
|
+
cellPadding?: string;
|
|
129
|
+
/** Row-spacing height in px baked into spacer rows between product rows. */
|
|
130
|
+
rowSpacingPx?: number;
|
|
131
|
+
/** Per-attribute captured style templates to preserve user styling across regeneration. */
|
|
132
|
+
styleTemplates?: AttributeStyleTemplates;
|
|
133
|
+
/** Card background color baked into the card containers (`.product-card-segment` / `.product-card-wrapper`). */
|
|
134
|
+
cardBackgroundColor?: string;
|
|
135
|
+
/** Per-attribute "Block Background Color" values baked onto each text cell across regeneration. */
|
|
136
|
+
cellBackgroundColors?: CellBackgroundColors;
|
|
137
|
+
/** Per-attribute text alignment baked onto each text cell's `align` attribute across regeneration. */
|
|
138
|
+
cellAlignments?: CellAlignments;
|
|
139
|
+
/** Per-attribute preserved cell classes (padding/margin/text-trim) re-baked across regeneration. */
|
|
140
|
+
cellClasses?: CellClasses;
|
|
141
|
+
/** Per-attribute omnibus before/after texts re-baked across regeneration. */
|
|
142
|
+
omnibusTexts?: OmnibusTexts;
|
|
143
|
+
/** Per-attribute visibility (show/hide) re-applied across regeneration; falls back to defaults. */
|
|
144
|
+
visibility?: AttributeVisibility;
|
|
145
|
+
}
|
|
57
146
|
/**
|
|
58
147
|
* Options for prepareProductRows unified function
|
|
59
148
|
*/
|
|
60
|
-
export interface PrepareProductRowsOptions {
|
|
149
|
+
export interface PrepareProductRowsOptions extends RenderOptions {
|
|
61
150
|
/** Number of products per row (only for grid layout, defaults to 3) */
|
|
62
151
|
productsPerRow?: number;
|
|
63
152
|
/** Number of products per row on mobile (only for grid layout, defaults to 1) */
|
|
@@ -75,15 +164,15 @@ export interface PrepareProductRowsOptions {
|
|
|
75
164
|
* for custom attributes — used by `buildElementRenderer` to create custom entries.
|
|
76
165
|
*/
|
|
77
166
|
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;
|
|
167
|
+
[ATTR_PRODUCT_IMAGE]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
|
|
168
|
+
[ATTR_PRODUCT_NAME]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
|
|
169
|
+
[ATTR_PRODUCT_PRICE]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
|
|
170
|
+
[ATTR_PRODUCT_OLD_PRICE]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
|
|
171
|
+
[ATTR_PRODUCT_OMNIBUS_PRICE]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
|
|
172
|
+
[ATTR_PRODUCT_OMNIBUS_DISCOUNT]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
|
|
173
|
+
[ATTR_PRODUCT_BUTTON]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
|
|
85
174
|
[CUSTOM_CELL_HTML]?: CustomCellHtmlGetter;
|
|
86
|
-
[key: string]: (product: RecommendationProduct) => string;
|
|
175
|
+
[key: string]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
|
|
87
176
|
}
|
|
88
177
|
/**
|
|
89
178
|
* Product card getter function type
|
|
@@ -96,7 +185,65 @@ export declare const DEFAULTS: {
|
|
|
96
185
|
};
|
|
97
186
|
export declare const DEFAULT_CARD_COMPOSITION: string[];
|
|
98
187
|
export declare const DEFAULT_CARD_VISIBILITY: Record<string, boolean>;
|
|
99
|
-
|
|
188
|
+
/** Default row-spacing height in px, used when no explicit value is baked in. */
|
|
189
|
+
export declare const DEFAULT_ROW_SPACING_PX = 10;
|
|
190
|
+
/**
|
|
191
|
+
* Builds a spacer row with the given height. Baking row spacing into the HTML lets
|
|
192
|
+
* regeneration use a single setInnerHtml/apply instead of a deferred reapply pass.
|
|
193
|
+
*/
|
|
194
|
+
export declare function buildSpacer(heightPx?: number): string;
|
|
195
|
+
export declare const spacer: string;
|
|
196
|
+
/**
|
|
197
|
+
* Resolves the `<p>` inline style for a text cell. When a captured template exists,
|
|
198
|
+
* it wins (even when empty — meaning the user cleared the style); otherwise the
|
|
199
|
+
* renderer's default style is used.
|
|
200
|
+
*/
|
|
201
|
+
export declare function resolvePStyle(defaultPStyle: string, template?: AttributeStyleTemplate): string;
|
|
202
|
+
/**
|
|
203
|
+
* Renders `<p>…text…</p>` for a text attribute, preserving captured inline-format
|
|
204
|
+
* tags (`<strong>`/`<em>`/`<s>`) and p-style when a template is supplied, or falling
|
|
205
|
+
* back to the renderer defaults. A present-but-empty template faithfully drops the
|
|
206
|
+
* default wrapper (e.g. the user removed bold).
|
|
207
|
+
*/
|
|
208
|
+
export declare function renderStyledParagraph(text: string, defaults: {
|
|
209
|
+
pStyle: string;
|
|
210
|
+
openTags: string;
|
|
211
|
+
closeTags: string;
|
|
212
|
+
}, template?: AttributeStyleTemplate): string;
|
|
213
|
+
/**
|
|
214
|
+
* Builds the inline style for a card container (`.product-card-segment` in grid,
|
|
215
|
+
* `.product-card-wrapper` in list), appending the captured card background color to any
|
|
216
|
+
* base style. Returns '' when there is nothing to set.
|
|
217
|
+
*/
|
|
218
|
+
export declare function resolveSegmentBgStyle(baseStyle: string, cardBackgroundColor?: string): string;
|
|
219
|
+
/**
|
|
220
|
+
* Builds the ` style="background-color: …"` attribute for a text attribute's
|
|
221
|
+
* `[esd-extension-block-id]` cell, baking in the captured "Block Background Color".
|
|
222
|
+
* Returns '' when there is nothing to set (the cell otherwise carries no inline style).
|
|
223
|
+
*/
|
|
224
|
+
export declare function cellBgStyleAttr(cellBackgroundColor?: string): string;
|
|
225
|
+
/** Resolves an omnibus cell's before/after text, falling back to the renderer's defaults. */
|
|
226
|
+
export declare function resolveOmnibusText(captured?: OmnibusText, defaultBefore?: string): Required<OmnibusText>;
|
|
227
|
+
/**
|
|
228
|
+
* Wraps a button label in the captured inline-format tags (bold/italic), or returns it
|
|
229
|
+
* plain. Mirrors text wrapper preservation for the button's `<a>` content.
|
|
230
|
+
*/
|
|
231
|
+
export declare function renderButtonLabel(label: string, template?: AttributeStyleTemplate): string;
|
|
232
|
+
/**
|
|
233
|
+
* Resolves the `<span class="es-button-border">` class, adding `es-fw` (full-width)
|
|
234
|
+
* when the captured template had "Fit to Container" on. Stripo applies fit via this
|
|
235
|
+
* class, not inline width, so we preserve the class across regeneration.
|
|
236
|
+
*/
|
|
237
|
+
export declare function resolveButtonBorderClass(template?: AttributeStyleTemplate): string;
|
|
238
|
+
/** Default inline style for the product image `<img>` (used when nothing is captured). */
|
|
239
|
+
export declare const DEFAULT_IMG_STYLE = "display: block; max-width: 100%; height: auto;";
|
|
240
|
+
/** Default inline style for the button `<span class="es-button-border">`. */
|
|
241
|
+
export declare const DEFAULT_BUTTON_BORDER_STYLE: string;
|
|
242
|
+
/**
|
|
243
|
+
* Default inline style for the button `<a class="es-button">`. The list layout appends its
|
|
244
|
+
* own `padding: 5px 30px;` on top of this shared base.
|
|
245
|
+
*/
|
|
246
|
+
export declare const DEFAULT_BUTTON_ANCHOR_STYLE: string;
|
|
100
247
|
export declare const PLACEHOLDER_IMAGE = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
|
|
101
248
|
/**
|
|
102
249
|
* Sanitizes product image URLs for consistent rendering
|
|
@@ -0,0 +1,85 @@
|
|
|
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 ATTR_PRODUCT_* 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
|
+
* Scope note: custom attributes (`customAttr:*`) share the single CUSTOM_ATTRIBUTE block id
|
|
41
|
+
* and aren't in `CAPTURE_TARGETS`, so their bg is applied live but not preserved here — same
|
|
42
|
+
* boundary as `captureAttributeStyleTemplates`.
|
|
43
|
+
*/
|
|
44
|
+
export declare function captureCellBackgroundColors(node: ImmutableHtmlNode | null | undefined): Record<string, string>;
|
|
45
|
+
/**
|
|
46
|
+
* Captures each text attribute's alignment from the cell's `align` attribute, keyed by
|
|
47
|
+
* ATTR_PRODUCT_* composition key. Stripo's built-in `TextAlignBuiltInControl` writes the
|
|
48
|
+
* alignment as the `align` HTML attribute on the `[esd-extension-block-id]` cell (not as
|
|
49
|
+
* inline `text-align`), so the renderers' hardcoded `align` would otherwise reset it on
|
|
50
|
+
* every regeneration. We capture the current value and re-bake it.
|
|
51
|
+
*
|
|
52
|
+
* Same scope boundary as `captureCellBackgroundColors`: custom attributes (`customAttr:*`)
|
|
53
|
+
* share one block id and aren't in `CAPTURE_TARGETS`.
|
|
54
|
+
*/
|
|
55
|
+
export declare function captureCellAlignments(node: ImmutableHtmlNode | null | undefined): Record<string, string>;
|
|
56
|
+
/**
|
|
57
|
+
* Captures each text/button cell's preservable classes (padding `es-p*`, margin `es-m*`,
|
|
58
|
+
* text-trim) keyed by ATTR_PRODUCT_* composition key, so a regeneration can re-bake them
|
|
59
|
+
* instead of resetting to the renderer's hardcoded spacing classes. Stripo stores padding
|
|
60
|
+
* and margin as these classes (NOT inline style), so an inline-style capture misses them.
|
|
61
|
+
*/
|
|
62
|
+
export declare function captureCellClasses(node: ImmutableHtmlNode | null | undefined): Record<string, string>;
|
|
63
|
+
/**
|
|
64
|
+
* Captures the omnibus cells' editable before/after text (from the `data-text-before` /
|
|
65
|
+
* `data-text-after` attributes the omnibus text controls write), keyed by attr, so a
|
|
66
|
+
* regeneration re-bakes the user's wording instead of the renderer's hardcoded prefix.
|
|
67
|
+
*/
|
|
68
|
+
export declare function captureOmnibusTexts(node: ImmutableHtmlNode | null | undefined): Record<string, OmnibusText>;
|
|
69
|
+
/**
|
|
70
|
+
* Captures the current per-attribute visibility from the live block, keyed by composition
|
|
71
|
+
* attribute (`data-attribute-type`). The card-composition control toggles visibility by
|
|
72
|
+
* setting `display`/`data-visibility` on `.recommendation-attribute-row`s, but the renderers
|
|
73
|
+
* re-apply the hardcoded `DEFAULT_CARD_VISIBILITY` on regeneration — so a user who showed
|
|
74
|
+
* omnibus (default-hidden) or hid a row would lose it. Capturing the live `data-visibility`
|
|
75
|
+
* lets the rebuild honor the user's choice.
|
|
76
|
+
*/
|
|
77
|
+
export declare function captureVisibility(node: ImmutableHtmlNode | null | undefined): Record<string, boolean>;
|
|
78
|
+
/**
|
|
79
|
+
* The full bundle of user-applied styling captured from the live block before a
|
|
80
|
+
* regeneration replaces its cells. Threaded as ONE object (not a long positional list)
|
|
81
|
+
* into the rebuild so the regenerated HTML re-bakes every preserved value.
|
|
82
|
+
*/
|
|
83
|
+
export type StyleCaptures = Pick<RenderOptions, 'styleTemplates' | 'cardBackgroundColor' | 'cellBackgroundColors' | 'cellAlignments' | 'cellClasses' | 'omnibusTexts' | 'visibility'>;
|
|
84
|
+
/** Runs every capture against the live node and returns them as a single bundle. */
|
|
85
|
+
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,14 +5,18 @@
|
|
|
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;
|
|
@@ -23,15 +27,23 @@ export interface NodeWithParent {
|
|
|
23
27
|
*/
|
|
24
28
|
export declare function hasGetStyle(node: unknown): node is NodeWithGetStyle;
|
|
25
29
|
/**
|
|
26
|
-
* Type guard to check if a node has
|
|
30
|
+
* Type guard to check if a node has getComputedStyle method.
|
|
31
|
+
* This is the only read that sees a background applied by Stripo's built-in
|
|
32
|
+
* "Block Background Color" control — it writes neither an inline style nor a
|
|
33
|
+
* queryable stylesheet rule, but the computed value is still resolvable.
|
|
27
34
|
* @param node - The node to check
|
|
28
35
|
*/
|
|
29
|
-
export declare function
|
|
36
|
+
export declare function hasGetComputedStyle(node: unknown): node is NodeWithGetComputedStyle;
|
|
30
37
|
/**
|
|
31
|
-
* Type guard to check if a node
|
|
38
|
+
* Type guard to check if a node has getAttribute method
|
|
32
39
|
* @param node - The node to check
|
|
33
40
|
*/
|
|
34
|
-
export declare function
|
|
41
|
+
export declare function hasGetAttribute(node: unknown): node is NodeWithGetAttribute;
|
|
42
|
+
/**
|
|
43
|
+
* Type guard to check if a node has parent method
|
|
44
|
+
* @param node - The node to check
|
|
45
|
+
*/
|
|
46
|
+
export declare function hasParent(node: unknown): node is NodeWithParent;
|
|
35
47
|
/**
|
|
36
48
|
* Safely retrieves a style value from a node
|
|
37
49
|
* @param node - The node to get the style from
|
|
@@ -74,4 +86,3 @@ export declare function isTableCellNode(node: ImmutableHtmlNode | null | undefin
|
|
|
74
86
|
* @returns The CSS display value ('table-cell' or 'table-row')
|
|
75
87
|
*/
|
|
76
88
|
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.0-beta.
|
|
3
|
+
"version": "3.7.0-beta.d579d2a",
|
|
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",
|
|
@@ -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 {};
|