@configuratorware/configurator-frontendgui 1.57.13 → 1.57.15

package/src/App/Reducers/Configurator/Reducer.js

@@ -9,7 +9,6 @@ import isArray from 'lodash/isArray';
 import find from 'lodash/find';
 import findIndex from 'lodash/findIndex';
 import omit from 'lodash/omit';
-import forEach from 'lodash/forEach';
 import reduce from 'lodash/reduce';
 import immutableSet from 'Utils/Immutable/set';
 import { designDataHandler } from '../DesignData/Reducer';
@@ -421,13 +420,21 @@ export function baseHandler(state, action) {
         case actionTypes.SET_SELECTED_AMOUNT: {
             const selectedAmountsPath = 'customdata.selectedAmounts';
             const selectedAmounts = get(state.configuration, selectedAmountsPath, {});
-            const configuration = immutableSet(
+            let configuration = immutableSet(
                 state.configuration,
                 selectedAmountsPath,
                 action.amount === 0
                     ? omit(selectedAmounts, action.identifier)
                     : { ...selectedAmounts, [action.identifier]: action.amount }
             );
+            if (action.amount === 0) {
+                const bulkNames = get(configuration, 'customdata.bulkNames', {});
+                configuration = immutableSet(
+                    configuration,
+                    'customdata.bulkNames',
+                    omit(bulkNames, action.identifier)
+                );
+            }
             return {
                 ...state,
                 selectedAmountsUpdated: !!action.isUpdatedByUser,
@@ -437,16 +444,33 @@ export function baseHandler(state, action) {
 
         case actionTypes.SWITCH_SELECTED_AMOUNT: {
             const { srcIdentifier, dstIdentifier } = action;
+            if (srcIdentifier === dstIdentifier) {
+                return state;
+            }
             const selectedAmountsPath = 'customdata.selectedAmounts';
             const selectedAmounts = get(state.configuration, selectedAmountsPath, {});
             if (!(srcIdentifier in selectedAmounts)) {
                 return state;
             }
-            const configuration = immutableSet(
+            let configuration = immutableSet(
                 state.configuration,
                 selectedAmountsPath,
                 omit({ ...selectedAmounts, [dstIdentifier]: selectedAmounts[srcIdentifier] }, srcIdentifier)
             );
+            const bulkNames = get(configuration, 'customdata.bulkNames', {});
+            if (srcIdentifier in bulkNames) {
+                configuration = immutableSet(
+                    configuration,
+                    'customdata.bulkNames',
+                    omit({ ...bulkNames, [dstIdentifier]: bulkNames[srcIdentifier] }, srcIdentifier)
+                );
+            } else if (dstIdentifier in bulkNames) {
+                configuration = immutableSet(
+                    configuration,
+                    'customdata.bulkNames',
+                    omit(bulkNames, dstIdentifier)
+                );
+            }
             return {
                 ...state,
                 configuration,
@@ -455,9 +479,21 @@ export function baseHandler(state, action) {
 
         case actionTypes.SET_SELECTED_AMOUNTS: {
             const selectedAmountsPath = 'configuration.customdata.selectedAmounts';
+            const bulkNamesPath = 'configuration.customdata.bulkNames';
             const selectedAmounts = get(state, selectedAmountsPath, {});
             const nextAmounts = { ...selectedAmounts, ...action.sizes };
-            const newState = { ...state, selectedAmountsUpdated: !!action.isUpdatedByUser };
+            const removedIdentifiers = filter(
+                Object.keys(action.sizes || {}),
+                identifier => action.sizes[identifier] === 0
+            );
+            let newState = { ...state, selectedAmountsUpdated: !!action.isUpdatedByUser };
+            if (removedIdentifiers.length > 0) {
+                newState = immutableSet(
+                    newState,
+                    bulkNamesPath,
+                    omit(get(state, bulkNamesPath, {}), removedIdentifiers)
+                );
+            }
             return immutableSet(newState, selectedAmountsPath, {
                 ...reduce(
                     nextAmounts,
@@ -474,14 +510,22 @@ export function baseHandler(state, action) {
         }
         case actionTypes.DELETE_SELECTED_AMOUNTS: {
             const selectedAmountsPath = 'configuration.customdata.selectedAmounts';
-            const selectedAmounts = cloneDeep(get(state, selectedAmountsPath, {}));
-            forEach(selectedAmounts, (selectedAmount, identifier) => {
-                const variantIdentifier = find(action.variant.sizes, { identifier: identifier });
-                if (variantIdentifier) {
-                    delete selectedAmounts[variantIdentifier.identifier];
-                }
-            });
-            return immutableSet(state, selectedAmountsPath, selectedAmounts);
+            const bulkNamesPath = 'configuration.customdata.bulkNames';
+            const sizeIdentifiers = reduce(
+                get(action, 'variant.sizes', []),
+                (identifiers, size) => (size?.identifier ? [...identifiers, size.identifier] : identifiers),
+                []
+            );
+            const nextState = immutableSet(
+                state,
+                selectedAmountsPath,
+                omit(get(state, selectedAmountsPath, {}), sizeIdentifiers)
+            );
+            return immutableSet(
+                nextState,
+                bulkNamesPath,
+                omit(get(state, bulkNamesPath, {}), sizeIdentifiers)
+            );
         }
         default:
             return state;
@@ -530,11 +574,17 @@ export function configurationModifierHandler(state, action) {
         }
         case actionTypes.DELETE_SELECTED_AMOUNT: {
             const selectedAmountsPath = 'configuration.customdata.selectedAmounts';
-            const selectedAmounts = cloneDeep(get(state, selectedAmountsPath, {}));
-
-            delete selectedAmounts[action.identifier];
-
-            return immutableSet(state, selectedAmountsPath, selectedAmounts);
+            const bulkNamesPath = 'configuration.customdata.bulkNames';
+            const nextState = immutableSet(
+                state,
+                selectedAmountsPath,
+                omit(get(state, selectedAmountsPath, {}), action.identifier)
+            );
+            return immutableSet(
+                nextState,
+                bulkNamesPath,
+                omit(get(state, bulkNamesPath, {}), action.identifier)
+            );
         }
         case actionTypes.SET_SELECTED_CALCULATION: {
             return immutableSet(

package/src/App/Reducers/Configurator/__tests__/Reducer.test.js

@@ -7,6 +7,7 @@ import {
     CLEAR_BULKNAMES,
     SAVE_BULKNAMES,
     SET_SELECTED_AMOUNTS,
+    DELETE_SELECTED_AMOUNT,
     DELETE_SELECTED_AMOUNTS,
     skipNextAutoResolve,
     RECEIVE_CALCULATION,
@@ -145,37 +146,236 @@ describe('Reducers/Configurator/Reducer', () => {
             hoodie_blue_s: 2,
         });
     });
-    test('returns the correct state for DELETE_SELECTED_AMOUNTS action', () => {
-        const variant = {
-            identifier: 'hoodie_blue_s',
-            title: 'blau',
-            url: 'http://localhost:10030/images/item/thumb/hoodie_blue_s.jpg',
-            sizes: [
-                {
-                    identifier: 'hoodie_blue_s',
-                    amount: 1,
-                    size: 'Größe S',
-                    key: 'hoodie_blue_s',
-                    label: 'Größe S',
-                    url: 'http://localhost:10030/images/item/thumb/hoodie_blue_s.jpg',
-                },
-                {
-                    identifier: 'hoodie_green_m',
-                    amount: 1,
-                    size: 'Größe M',
-                    key: 'hoodie_green_m',
-                    label: 'Größe M',
-                    url: 'http://localhost:10030/images/item/thumb/hoodie_green_m.jpg',
-                },
-            ],
-        };
-        const sizes = { hoodie_blue_s: 0 };
-        stateWithSelectedAmounts = configuratorReducer(stateWithSelectedAmounts, {
-            type: DELETE_SELECTED_AMOUNTS,
-            variant: variant,
-            sizes: sizes,
+    describe('bulkNames stay in sync with selectedAmounts', () => {
+        test('SET_SELECTED_AMOUNT with amount 0 removes bulkNames for that identifier', () => {
+            let state = configuratorReducer(initialState, {
+                type: SET_SELECTED_AMOUNT,
+                identifier: 'hoodie_blue_s',
+                amount: 2,
+            });
+            state = configuratorReducer(state, {
+                type: SAVE_BULKNAMES,
+                identifier: 'hoodie_blue_s',
+                bulkNamesData: ['Alex', 'Leon'],
+            });
+            state = configuratorReducer(state, {
+                type: SET_SELECTED_AMOUNT,
+                identifier: 'hoodie_blue_s',
+                amount: 0,
+            });
+            expect(get(state, 'configuration.customdata.selectedAmounts')).toEqual({});
+            expect(get(state, 'configuration.customdata.bulkNames')).toEqual({});
+        });
+
+        test('DELETE_SELECTED_AMOUNT removes bulkNames for that identifier', () => {
+            let state = configuratorReducer(initialState, {
+                type: SET_SELECTED_AMOUNT,
+                identifier: 'hoodie_blue_s',
+                amount: 2,
+            });
+            state = configuratorReducer(state, {
+                type: SAVE_BULKNAMES,
+                identifier: 'hoodie_blue_s',
+                bulkNamesData: ['Alex', 'Leon'],
+            });
+            state = configuratorReducer(state, {
+                type: SAVE_BULKNAMES,
+                identifier: 'hoodie_green_m',
+                bulkNamesData: ['Lea', 'Martin'],
+            });
+            state = configuratorReducer(state, {
+                type: DELETE_SELECTED_AMOUNT,
+                identifier: 'hoodie_blue_s',
+            });
+            expect(get(state, 'configuration.customdata.selectedAmounts')).toEqual({});
+            expect(get(state, 'configuration.customdata.bulkNames')).toEqual({
+                hoodie_green_m: ['Lea', 'Martin'],
+            });
+        });
+
+        test('DELETE_SELECTED_AMOUNTS clears bulkNames for all variant sizes', () => {
+            const variant = {
+                identifier: 'hoodie_blue_s',
+                title: 'blau',
+                url: 'http://localhost:10030/images/item/thumb/hoodie_blue_s.jpg',
+                sizes: [
+                    {
+                        identifier: 'hoodie_blue_s',
+                        amount: 1,
+                        size: 'Größe S',
+                        key: 'hoodie_blue_s',
+                        label: 'Größe S',
+                        url: 'http://localhost:10030/images/item/thumb/hoodie_blue_s.jpg',
+                    },
+                    {
+                        identifier: 'hoodie_green_m',
+                        amount: 1,
+                        size: 'Größe M',
+                        key: 'hoodie_green_m',
+                        label: 'Größe M',
+                        url: 'http://localhost:10030/images/item/thumb/hoodie_green_m.jpg',
+                    },
+                ],
+            };
+            const sizes = { hoodie_blue_s: 0 };
+            let state = configuratorReducer(stateWithSelectedAmounts, {
+                type: SAVE_BULKNAMES,
+                identifier: 'hoodie_blue_s',
+                bulkNamesData: ['Alex', 'Leon'],
+            });
+            state = configuratorReducer(state, {
+                type: SAVE_BULKNAMES,
+                identifier: 'hoodie_green_m',
+                bulkNamesData: ['Lea', 'Martin'],
+            });
+            state = configuratorReducer(state, {
+                type: DELETE_SELECTED_AMOUNTS,
+                variant: variant,
+                sizes: sizes,
+            });
+            expect(get(state, 'configuration.customdata.selectedAmounts')).toEqual({});
+            expect(get(state, 'configuration.customdata.bulkNames')).toEqual({});
+        });
+
+        test('SET_SELECTED_AMOUNTS removes bulkNames for sizes set to 0', () => {
+            const variant = {
+                identifier: 'hoodie_blue_s',
+                sizes: [{ identifier: 'hoodie_blue_s' }, { identifier: 'hoodie_green_m' }],
+            };
+            let state = configuratorReducer(initialState, {
+                type: SET_SELECTED_AMOUNTS,
+                variant,
+                sizes: { hoodie_green_m: 5, hoodie_blue_s: 2 },
+            });
+            state = configuratorReducer(state, {
+                type: SAVE_BULKNAMES,
+                identifier: 'hoodie_blue_s',
+                bulkNamesData: ['Alex', 'Leon'],
+            });
+            state = configuratorReducer(state, {
+                type: SAVE_BULKNAMES,
+                identifier: 'hoodie_green_m',
+                bulkNamesData: ['Lea', 'Martin'],
+            });
+            state = configuratorReducer(state, {
+                type: SET_SELECTED_AMOUNTS,
+                variant,
+                sizes: { hoodie_blue_s: 0 },
+            });
+            expect(get(state, 'configuration.customdata.selectedAmounts')).toEqual({ hoodie_green_m: 5 });
+            expect(get(state, 'configuration.customdata.bulkNames')).toEqual({
+                hoodie_green_m: ['Lea', 'Martin'],
+            });
+        });
+
+        test('SWITCH_SELECTED_AMOUNT moves bulkNames from src to dst identifier', () => {
+            let state = configuratorReducer(initialState, {
+                type: SET_SELECTED_AMOUNT,
+                identifier: 'shirt_red_m',
+                amount: 2,
+            });
+            state = configuratorReducer(state, {
+                type: SAVE_BULKNAMES,
+                identifier: 'shirt_red_m',
+                bulkNamesData: ['Alex', 'Leon'],
+            });
+            state = configuratorReducer(state, {
+                type: SWITCH_SELECTED_AMOUNT,
+                srcIdentifier: 'shirt_red_m',
+                dstIdentifier: 'shirt_blue_m',
+            });
+            expect(get(state, 'configuration.customdata.selectedAmounts')).toEqual({ shirt_blue_m: 2 });
+            expect(get(state, 'configuration.customdata.bulkNames')).toEqual({
+                shirt_blue_m: ['Alex', 'Leon'],
+            });
+        });
+
+        test('SWITCH_SELECTED_AMOUNT is a no-op when src is not in selectedAmounts', () => {
+            const state = configuratorReducer(initialState, {
+                type: SAVE_BULKNAMES,
+                identifier: 'shirt_red_m',
+                bulkNamesData: ['Alex'],
+            });
+            const next = configuratorReducer(state, {
+                type: SWITCH_SELECTED_AMOUNT,
+                srcIdentifier: 'shirt_red_m',
+                dstIdentifier: 'shirt_blue_m',
+            });
+            expect(next).toBe(state);
+            expect(get(next, 'configuration.customdata.bulkNames')).toEqual({ shirt_red_m: ['Alex'] });
+        });
+
+        test('SWITCH_SELECTED_AMOUNT is a no-op when src and dst are the same identifier', () => {
+            let state = configuratorReducer(initialState, {
+                type: SET_SELECTED_AMOUNT,
+                identifier: 'shirt_red_m',
+                amount: 2,
+            });
+            state = configuratorReducer(state, {
+                type: SAVE_BULKNAMES,
+                identifier: 'shirt_red_m',
+                bulkNamesData: ['Alex', 'Leon'],
+            });
+            const next = configuratorReducer(state, {
+                type: SWITCH_SELECTED_AMOUNT,
+                srcIdentifier: 'shirt_red_m',
+                dstIdentifier: 'shirt_red_m',
+            });
+            expect(next).toBe(state);
+            expect(get(next, 'configuration.customdata.selectedAmounts')).toEqual({ shirt_red_m: 2 });
+            expect(get(next, 'configuration.customdata.bulkNames')).toEqual({
+                shirt_red_m: ['Alex', 'Leon'],
+            });
+        });
+
+        test('SWITCH_SELECTED_AMOUNT moves amount and clears dst bulkNames when src has no names', () => {
+            let state = configuratorReducer(initialState, {
+                type: SET_SELECTED_AMOUNT,
+                identifier: 'shirt_red_m',
+                amount: 2,
+            });
+            state = configuratorReducer(state, {
+                type: SAVE_BULKNAMES,
+                identifier: 'shirt_blue_m',
+                bulkNamesData: ['Lea'],
+            });
+            state = configuratorReducer(state, {
+                type: SWITCH_SELECTED_AMOUNT,
+                srcIdentifier: 'shirt_red_m',
+                dstIdentifier: 'shirt_blue_m',
+            });
+            expect(get(state, 'configuration.customdata.selectedAmounts')).toEqual({ shirt_blue_m: 2 });
+            expect(get(state, 'configuration.customdata.bulkNames')).toEqual({});
+        });
+
+        test('SET_SELECTED_AMOUNTS removes all bulkNames when every size is set to 0', () => {
+            const variant = {
+                identifier: 'hoodie_blue_s',
+                sizes: [{ identifier: 'hoodie_blue_s' }, { identifier: 'hoodie_green_m' }],
+            };
+            let state = configuratorReducer(initialState, {
+                type: SET_SELECTED_AMOUNTS,
+                variant,
+                sizes: { hoodie_green_m: 5, hoodie_blue_s: 2 },
+            });
+            state = configuratorReducer(state, {
+                type: SAVE_BULKNAMES,
+                identifier: 'hoodie_blue_s',
+                bulkNamesData: ['Alex'],
+            });
+            state = configuratorReducer(state, {
+                type: SAVE_BULKNAMES,
+                identifier: 'hoodie_green_m',
+                bulkNamesData: ['Lea'],
+            });
+            state = configuratorReducer(state, {
+                type: SET_SELECTED_AMOUNTS,
+                variant,
+                sizes: { hoodie_blue_s: 0, hoodie_green_m: 0 },
+            });
+            expect(get(state, 'configuration.customdata.selectedAmounts')).toEqual({});
+            expect(get(state, 'configuration.customdata.bulkNames')).toEqual({});
         });
-        expect(get(stateWithSelectedAmounts, 'configuration.customdata.selectedAmounts')).toEqual({});
     });
 
     test('returns the correct state for SWITCH_SELECTED_AMOUNT action', () => {

package/src/App/Reducers/DesignArea/Selectors.js

@@ -646,6 +646,32 @@ export const parseColorData = jsonStr => {
     };
 };
 
+/**
+ * Normalizes canvas text color entries (style.colors or text editor) for HTML generation.
+ * @param {{ identifier: string|object, value: string }|null|undefined} color
+ * @returns {{ identifier: string, value: string }|null}
+ */
+export const normalizeTextColorData = color => {
+    if (!color?.identifier || !color?.value) {
+        return null;
+    }
+    const identifier =
+        typeof color.identifier === 'string' ? color.identifier : JSON.stringify(color.identifier);
+    return { identifier, value: color.value.toLowerCase() };
+};
+
+/**
+ * Color from canvas object style.colors (parsed from content HTML).
+ * @param {{ styleColors?: Array }} params
+ * @returns {{ identifier: string, value: string }|null}
+ */
+export const getColorDataForTextContent = ({ styleColors }) => {
+    if (styleColors?.length > 0) {
+        return normalizeTextColorData(styleColors[0]);
+    }
+    return null;
+};
+
 export const getCameraViewListForDesignAreaList = (filteredDesignAreas, designedAreas) =>
     ['default'].concat(
         filteredDesignAreas

package/src/App/Reducers/DesignArea/__tests__/Selectors.test.js

@@ -20,6 +20,8 @@ import {
     getColorsFromCanvasDataWithPalette,
     createColorData,
     parseColorData,
+    normalizeTextColorData,
+    getColorDataForTextContent,
     isActiveBulkName,
     getDefaultDesignAreaIdentifierFromProductionMethod,
     getDefaultColorsFromDesignProductionMethod,
@@ -1128,6 +1130,23 @@ describe('Reducers/DesignArea/Selectors', () => {
         });
     });
 
+    test('getColorDataForTextContent returns color from styleColors', () => {
+        const styleColors = [
+            {
+                identifier: '{"color":"blue","palette":"default"}',
+                value: '#0078b8',
+            },
+        ];
+        expect(getColorDataForTextContent({ styleColors })).toEqual(styleColors[0]);
+        expect(getColorDataForTextContent({ styleColors: [] })).toBeNull();
+        expect(
+            normalizeTextColorData({ identifier: { color: 'red', palette: 'default' }, value: '#F73429' })
+        ).toEqual({
+            identifier: '{"color":"red","palette":"default"}',
+            value: '#f73429',
+        });
+    });
+
     test('get default design area from the flag isDefault', () => {
         const state = {
             designArea: {

package/src/App/Reducers/Fonts/Selectors.js

@@ -11,6 +11,30 @@ export function getDefaultFont(state) {
     return find(fonts, { isDefault: true }) || first(fonts);
 }
 
+const stringifyFontParams = fontParams =>
+    Object.keys(fontParams)
+        .map(prop => `${prop}: ${fontParams[prop]};`)
+        .join(' ');
+
+/**
+ * Inline font CSS from the text toolbar selection (font family + bold/italic).
+ * @param {{ fontItem?: { family?: string }, isBold?: boolean, isItalic?: boolean }} params
+ * @returns {string}
+ */
+export const getTextContentFontParamsFromSelection = ({ fontItem, isBold, isItalic }) => {
+    if (!fontItem?.family) {
+        return '';
+    }
+    const fontParams = {
+        'font-family': `"${escapeQuotes(fontItem.family)}"`,
+        'font-weight': isBold ? 'bold' : 'normal',
+        'font-style': isItalic ? 'italic' : 'normal',
+    };
+    return Object.keys(fontParams)
+        .map(prop => `${prop}: ${fontParams[prop]};`)
+        .join(' ');
+};
+
 export const getDefaultFontParams = (state, stringify = true) => {
     const defaultFont = getDefaultFont(state);
     const fontParams = {
@@ -18,11 +42,7 @@ export const getDefaultFontParams = (state, stringify = true) => {
         'font-weight': 'normal',
         'font-style': 'normal',
     };
-    return stringify
-        ? Object.keys(fontParams)
-              .map(prop => `${prop}: ${fontParams[prop]};`)
-              .join(' ')
-        : fontParams;
+    return stringify ? stringifyFontParams(fontParams) : fontParams;
 };
 
 export const getFontMapping = createSelector(

package/src/App/Reducers/Fonts/__tests__/Selectors.test.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import { getDefaultFont } from '../Selectors';
+import { getDefaultFont, getTextContentFontParamsFromSelection } from '../Selectors';
 
 describe('Reducers/Fonts/Selectors', () => {
     test('getDefaultFont returns the correct font object (isDefault is true)', () => {
@@ -56,4 +56,17 @@ describe('Reducers/Fonts/Selectors', () => {
             isDefault: false,
         });
     });
+
+    it('getTextContentFontParamsFromSelection builds inline font CSS', () => {
+        expect(
+            getTextContentFontParamsFromSelection({
+                fontItem: { family: 'Open Sans' },
+                isBold: true,
+                isItalic: false,
+            })
+        ).toBe('font-family: "Open Sans"; font-weight: bold; font-style: normal;');
+        expect(
+            getTextContentFontParamsFromSelection({ fontItem: null, isBold: false, isItalic: false })
+        ).toBe('');
+    });
 });

package/src/App/Services/DesignerService.js

@@ -29,11 +29,12 @@ import {
     getFontSizeMin,
     hasPlaceHolderImagesForActiveDesignArea,
     getVectorizedImageColor,
+    getColorDataForTextContent,
     getElementLockState,
     getSelectedDesignProductionMethod,
     getDesignDataForSelectedDesignArea,
 } from '../Reducers/DesignArea/Selectors';
-import { getDefaultFontParams } from '../Reducers/Fonts/Selectors';
+import { getDefaultFontParams, getTextContentFontParamsFromSelection } from '../Reducers/Fonts/Selectors';
 import { createTextPlaceholder } from '../Reducers/ImageGallery/Modifiers';
 import { updateLinkedImagesWithImageData } from '../Reducers/DesignData/Actions';
 import { checkDesignElementRestrictions } from '../Reducers/DesignArea/DesignElementSelectors';
@@ -334,21 +335,39 @@ export default class DesignerService {
      * @returns {string}
      */
     createColorizedTextContent(str, colorCount = 1, options = {}) {
-        const { withPlaceholder = true } = options;
+        const {
+            withPlaceholder = true,
+            styleColors = null,
+            fontItem = null,
+            isBold = false,
+            isItalic = false,
+        } = options;
 
         const state = Services.store.state;
-        const fontParams = getDefaultFontParams(state);
+        const selectionFontParams = getTextContentFontParamsFromSelection({
+            fontItem,
+            isBold,
+            isItalic,
+        });
+        const fontParams = selectionFontParams || getDefaultFontParams(state);
         const chunkLength = Math.ceil(str.length / colorCount);
 
         const content = str
             .match(new RegExp(`.{1,${chunkLength}}`, 'g'))
             .map((chunk, idx) => {
-                const color = getDefaultTextColor(state, colorCount > 1 ? idx : null);
-
-                const lastImageColor = getVectorizedImageColor(state);
-                const colorData = isEmpty(lastImageColor)
-                    ? createColorData(color.identifier, color.paletteIdentifier, color.custom, color.value)
-                    : lastImageColor;
+                let colorData = getColorDataForTextContent({ styleColors });
+                if (!colorData) {
+                    const color = getDefaultTextColor(state, colorCount > 1 ? idx : null);
+                    const lastImageColor = getVectorizedImageColor(state);
+                    colorData = isEmpty(lastImageColor)
+                        ? createColorData(
+                              color.identifier,
+                              color.paletteIdentifier,
+                              color.custom,
+                              color.value
+                          )
+                        : lastImageColor;
+                }
 
                 return `<span style='color: ${colorData.value}; ${fontParams}' data-color='${colorData.identifier}'>${chunk}</span>`;
             })