@designcrowd/library.brand-page 6.2.6 → 6.2.7-ast-faq-1

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -1,5 +1,5 @@
-import { SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, GettyVideoMedia, } from '@brand-page';
-import { createInitialButtonContent, createInitialImageContent, createInitialProfileContent, createInitialTextContent, createInitialVideoContent, createInitialLogoContent, createInitialMapContent, createInitialImageGalleryContent, createInitialGeneralLinkContent, createInitialMailingListContent, createInitialRequestPaymentContent, createInitialSupportMeContent, createInitialContactFormContent, CONTENT_SETTINGS_DISPLAY_MODES, createInitialBannerSectionContent, createInitialSocialLinksContent, createInitialImagesSectionContent, createInitialTestimonialSectionContent, createInitialAboutSectionContent, createInitialDividerSectionContent, createInitialShapesSectionContent, VARIANT_DISPLAY_MODES, createInitialShopContent, createInitialBookingSectionContent, } from '../models';
+import { FAQ_DISPLAY_STYLES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, GettyVideoMedia, } from '@brand-page';
+import { createInitialButtonContent, createInitialImageContent, createInitialProfileContent, createInitialTextContent, createInitialVideoContent, createInitialLogoContent, createInitialMapContent, createInitialImageGalleryContent, createInitialGeneralLinkContent, createInitialMailingListContent, createInitialRequestPaymentContent, createInitialSupportMeContent, createInitialContactFormContent, CONTENT_SETTINGS_DISPLAY_MODES, createInitialBannerSectionContent, createInitialSocialLinksContent, createInitialImagesSectionContent, createInitialTestimonialSectionContent, createInitialAboutSectionContent, createInitialDividerSectionContent, createInitialShapesSectionContent, VARIANT_DISPLAY_MODES, createInitialShopContent, createInitialBookingSectionContent, createInitialFaqSectionContent, } from '../models';
 import * as uuid from 'uuid';
 import { colorConvertor, backgroundColorConvertor, borderColorConvertor, displayStyleConvertor, galleryTypeConvertor, imageAspectRatioConvertor, textAlignmentOptionsConvertor, videoContentStateConvertor, fillColorConvertor, bannerAlignDisplayStyleConvertor, aboutDisplayStyleConvertor, dividerStyleConvertor, shapeSizeOptionsConvertor, buttonLinkStyleConvertor, textSizeValueConvertor, textColumnStyleConvertor, contactLayoutStyleConvertor, paymentLinkDisplayStyleConvertor, shopDisplayConvertor, shopAspectRatioConvertor, } from '../convertors';
 import { ALIGN_CENTERED, DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, } from '@brand-page';
@@ -8,6 +8,7 @@ import { contactFormCardColorDefaultGetter, paymentFillColorFieldDefaultGetter,
 import { socialLinksIconDisplayStyleConvertor } from '../convertors/social-links-icon-display-style.convertor';
 import { getTextMediaOptionsConverterByMediaType } from '../convertors/text-image-display-style.convertor';
 import { testimonialDisplayStyleConvertor } from '../convertors/testimonial-display-style-convertor';
+import { faqDisplayStyleConvertor } from '../convertors/faq-display-style.convertor';
 import { pageValidator, urlValidator } from '../validators';
 import { imagesSectionAspectRatioVisibilityAssessor } from '../assessors/images-section-aspect-ratio-visibility.assessor';
 import { bannerLinkTypeVisibilityAssessor, bannerSectionPageVisibilityAssessor, bannerSectionUrlVisibilityAssessor, bannerDisplayTypeVisibilityAssessor, bannerOverlayOptionsVisibilityAssessor, } from '../assessors/banner-section-description-visibility.assessor';
@@ -15,7 +16,7 @@ import { imagesSectionTextStyleVisibilityAssessor } from '../assessors/images-se
 import { bannerPlaceholderFieldTypeAssessor, bannerSectionFieldTypeAssessor, bannerSectionRoleTypeAssessor, } from '../assessors/banner-section-field.assessor';
 import { isValidSvgUrl } from '@brand-page/utils';
 import { brandPageOrbrandContactTypeVisibilityAssessor, brandSiteTypeVisibilityAssessor, } from '../assessors/brand-page-type-visibility.assessor';
-import { contentSettingsTr } from '@src/composables/useTranslate';
+import { commonTr, contentSettingsTr } from '@src/composables/useTranslate';
 const MediaFieldNames = {
     aspectRatio: 'aspectRatio',
     iconUrl: 'iconUrl',
@@ -2807,6 +2808,101 @@ export const BOOKING_SECTION_SETTINGS_CONFIG = () => ({
     isEnabled: true,
     isLocked: false,
 });
+const FAQ_FIELD_GROUP_IDS = {
+    settings: 'settings',
+    items: 'items',
+    style: 'style',
+};
+export const FAQ_SECTION_SETTINGS_CONFIG = () => ({
+    type: 'faq-section',
+    category: 'general',
+    createInitialContent: createInitialFaqSectionContent,
+    displayMode: CONTENT_SETTINGS_DISPLAY_MODES.focused,
+    defaultIconName: 'question-circle-filled',
+    displayName: contentSettingsTr(`faqSectionDisplayName`),
+    fieldGroups: [
+        {
+            id: FAQ_FIELD_GROUP_IDS.settings,
+            displayName: contentSettingsTr(`settingsDisplayName`),
+            isCollapsed: false,
+        },
+        {
+            id: FAQ_FIELD_GROUP_IDS.items,
+            displayName: contentSettingsTr(`faqItemsDisplayName`),
+            isCollapsed: false,
+        },
+        {
+            id: FAQ_FIELD_GROUP_IDS.style,
+            displayName: contentSettingsTr(`styleDisplayName`),
+            isCollapsed: true,
+        },
+    ],
+    fields: {
+        titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
+        descriptionStyle: DEFAULT_DESCRIPTION_STYLE_FILED(),
+        title: {
+            type: 'text',
+            placeholder: contentSettingsTr(`titlePlaceholder`),
+            title: contentSettingsTr(`titleTitle`),
+            groupId: FAQ_FIELD_GROUP_IDS.settings,
+            maxLength: 200,
+        },
+        description: {
+            type: 'textarea',
+            placeholder: contentSettingsTr(`descriptionPlaceholder`),
+            title: contentSettingsTr(`descriptionTitle`),
+            groupId: FAQ_FIELD_GROUP_IDS.settings,
+            maxLength: 1000,
+        },
+        // FaqItemsField owns the question/answer inputs and the FAQ_MAX_ITEMS cap.
+        items: {
+            type: 'faq-items',
+            defaultValue: [],
+            groupId: FAQ_FIELD_GROUP_IDS.items,
+        },
+        displayStyle: {
+            type: 'radio',
+            role: 'multi',
+            defaultValue: FAQ_DISPLAY_STYLES.centered,
+            title: contentSettingsTr(`displayStyleTitle`),
+            optionsConvertor: faqDisplayStyleConvertor,
+            groupId: FAQ_FIELD_GROUP_IDS.style,
+            variant: 'icon',
+        },
+        ...PADDING_CONTROL_FIELDS(FAQ_FIELD_GROUP_IDS.style),
+        iconColor: {
+            type: 'color',
+            groupId: FAQ_FIELD_GROUP_IDS.style,
+            defaultValue: {},
+            isInline: true,
+            showToggle: false,
+            disableTransparent: true,
+            title: commonTr(`iconColor`),
+            valueConvertor: colorConvertor,
+        },
+        // Transparent allowed on purpose (it hides the line), unlike the Divider section's field.
+        dividerColor: {
+            type: 'color',
+            groupId: FAQ_FIELD_GROUP_IDS.style,
+            defaultValue: {},
+            isInline: true,
+            showToggle: false,
+            title: contentSettingsTr(`dividerColorTitle`),
+            valueConvertor: backgroundColorConvertor,
+        },
+        backgroundStyle: {
+            type: 'color',
+            groupId: FAQ_FIELD_GROUP_IDS.style,
+            defaultValue: {},
+            isInline: true,
+            showToggle: false,
+            title: contentSettingsTr(`backgroundColorTitle`),
+            valueConvertor: backgroundColorConvertor,
+        },
+    },
+    isEnabled: true,
+    isLocked: false,
+});
 export const CONTENT_SETTINGS_CONFIGS = () => ({
     logo: LOGO_SETTINGS_CONFIG(),
     'general-link': GENERAL_LINK_CONTENT_SETTINGS_CONFIG(),
@@ -2840,4 +2936,5 @@ export const CONTENT_SETTINGS_CONFIGS = () => ({
     'shapes-section': SHAPES_SECTION_SETTINGS_CONFIG(),
     'shop-section': SHOP_SECTION_SETTINGS_CONFIG(),
     'booking-section': BOOKING_SECTION_SETTINGS_CONFIG(),
+    'faq-section': FAQ_SECTION_SETTINGS_CONFIG(),
 });

package/lib/src/brand-page-maker/convertors/faq-display-style.convertor.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonGroupConfig, ValueConvertor } from '../models';
+import type { FaqSectionContent } from '@brand-page/models';
+export declare const faqDisplayStyleConvertor: ValueConvertor<string | null, ButtonGroupConfig, Partial<FaqSectionContent>>;

package/lib/src/brand-page-maker/convertors/faq-display-style.convertor.js

@@ -0,0 +1,47 @@
+import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
+import { converterTr } from '@src/composables/useTranslate';
+const ICON_VIEW_BOX = '0 0 96 56';
+export const faqDisplayStyleConvertor = {
+    convertBackToMultipleValues: true,
+    convert(value) {
+        return {
+            options: [
+                {
+                    title: converterTr(`faqCenteredAccordion`),
+                    value: FAQ_DISPLAY_STYLES.centered,
+                    isSelected: value === FAQ_DISPLAY_STYLES.centered,
+                    iconName: 'display-style-faq-1',
+                    iconViewBox: ICON_VIEW_BOX,
+                    dataAttribute: 'data-test-btn-faq-centered',
+                },
+                {
+                    title: converterTr(`faqSplitAccordion`),
+                    value: FAQ_DISPLAY_STYLES.split,
+                    isSelected: value === FAQ_DISPLAY_STYLES.split,
+                    iconName: 'display-style-faq-2',
+                    iconViewBox: ICON_VIEW_BOX,
+                    dataAttribute: 'data-test-btn-faq-split',
+                },
+                {
+                    title: converterTr(`faqGrid`),
+                    value: FAQ_DISPLAY_STYLES.grid,
+                    isSelected: value === FAQ_DISPLAY_STYLES.grid,
+                    iconName: 'display-style-faq-3',
+                    iconViewBox: ICON_VIEW_BOX,
+                    dataAttribute: 'data-test-btn-faq-grid',
+                },
+            ],
+        };
+    },
+    // The heading sits left beside the accordion in split, centred above it otherwise.
+    convertBack(config) {
+        const displayStyle = config.options.find((v) => v.isSelected)?.value ??
+            FAQ_DISPLAY_STYLES.centered;
+        const textAlign = displayStyle === FAQ_DISPLAY_STYLES.split ? 'left' : 'center';
+        return {
+            displayStyle,
+            titleStyle: { textAlign },
+            descriptionStyle: { textAlign },
+        };
+    },
+};

package/lib/src/brand-page-maker/models/content-settings-configs.d.ts

@@ -52,6 +52,7 @@ export declare const ITEM_FIELD_TYPES: {
     readonly 'color-replacements': "color-replacements";
     readonly 'testimonial-items': "testimonial-items";
     readonly 'text-items': "text-items";
+    readonly 'faq-items': "faq-items";
     readonly 'page-dropdown': "page-dropdown";
     readonly 'personalisation-override': "personalisation-override";
 };

package/lib/src/brand-page-maker/models/content-settings-configs.js

@@ -55,6 +55,7 @@ export const ITEM_FIELD_TYPES = {
     'color-replacements': 'color-replacements',
     'testimonial-items': 'testimonial-items',
     'text-items': 'text-items',
+    'faq-items': 'faq-items',
     'page-dropdown': 'page-dropdown',
     'personalisation-override': 'personalisation-override',
 };

package/lib/src/brand-page-maker/models/content-settings.d.ts

@@ -1,5 +1,5 @@
 import { BrandPageModel } from '@brand-page';
-import type { ButtonContent, ContentType, ImageContent, ProfileContent, TextContent, VideoContent, LogoContent, LogoTheme, MapContent, ImageGalleryContent, GeneralLinkContent, MailingListContent, RequestPaymentContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, BrandPageType, SupportMeContent, ShopContent, BookingSectionContent } from '@brand-page';
+import type { ButtonContent, ContentType, ImageContent, ProfileContent, TextContent, VideoContent, LogoContent, LogoTheme, MapContent, ImageGalleryContent, GeneralLinkContent, MailingListContent, RequestPaymentContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, BrandPageType, SupportMeContent, ShopContent, BookingSectionContent, TextStyleDeclaration, FaqSectionContent } from '@brand-page';
 import type { CreateInitialContentFunction } from './content-settings-configs';
 import type { CreateInitialContentOptions } from '@shared/content-settings/models';
 export declare const createInitialButtonContent: (type: ContentType, iconUrl: string, options?: CreateInitialContentOptions) => () => ButtonContent;
@@ -18,6 +18,9 @@ export declare const createInitialSupportMeContent: (options?: CreateInitialCont
 export declare const createInitialContactFormContent: CreateInitialContentFunction<ContactFormContent>;
 export declare const createInitialBannerSectionContent: CreateInitialContentFunction<BannerSectionContent>;
 export declare const createInitialBookingSectionContent: CreateInitialContentFunction<BookingSectionContent>;
+export declare const createInitialFaqQuestionStyle: (applyAutoScale?: boolean) => TextStyleDeclaration;
+export declare const createInitialFaqAnswerStyle: (applyAutoScale?: boolean) => TextStyleDeclaration;
+export declare const createInitialFaqSectionContent: CreateInitialContentFunction<FaqSectionContent>;
 export declare const createInitialImagesSectionContent: CreateInitialContentFunction<ImagesSectionContent>;
 export declare const createInitialTestimonialSectionContent: CreateInitialContentFunction<TestimonialSectionContent>;
 export declare const createInitialAboutSectionContent: CreateInitialContentFunction<AboutSectionContent>;

package/lib/src/brand-page-maker/models/content-settings.js

@@ -1,4 +1,4 @@
-import { BrandPageModel, PageStyles, FORM_FIELD_IDS, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, MEDIA_TYPES, BUTTON_LINK_TYPE, DISPLAY_STYLE_PREVIEW, SUPPORT_ME_CUSTOM_PRODUCT_NAME, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, FONT_SIZE_BODY, LINE_HEIGHT_BODY, TEXT_STYLE_TYPES, TEXT_COLUMNS, DEFAULT_LOGO_BACKGROUND_COLOR_RGB, DEFAULT_LOGO_TEXT_COLOR_RGB, EMPTY_LOGO_IMAGE_MODEL, BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, CONTACT_FORM_LAYOUT_DEFAULT_PADDING, TESTIMONIAL_DEFAULT_PADDING, } from '@brand-page';
+import { BrandPageModel, PageStyles, FORM_FIELD_IDS, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, MEDIA_TYPES, BUTTON_LINK_TYPE, DISPLAY_STYLE_PREVIEW, SUPPORT_ME_CUSTOM_PRODUCT_NAME, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, FONT_SIZE_BODY, LINE_HEIGHT_BODY, TEXT_STYLE_TYPES, TEXT_COLUMNS, DEFAULT_LOGO_BACKGROUND_COLOR_RGB, DEFAULT_LOGO_TEXT_COLOR_RGB, EMPTY_LOGO_IMAGE_MODEL, BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, CONTACT_FORM_LAYOUT_DEFAULT_PADDING, TESTIMONIAL_DEFAULT_PADDING, FAQ_DISPLAY_STYLES, } from '@brand-page';
 import * as uuid from 'uuid';
 import { getColorShades, DEFAULT_CARD_SURFACE_REFERENCE, } from '@brand-page/utils';
 import { contentSettingsTr } from '@src/composables/useTranslate';
@@ -556,6 +556,52 @@ export const createInitialBookingSectionContent = (options) => {
         },
     };
 };
+// Questions follow the Headings role, answers the Paragraphs role.
+export const createInitialFaqQuestionStyle = (applyAutoScale = false) => ({
+    applyAutoScale,
+    textStyleType: TEXT_STYLE_TYPES.headings,
+    textAlign: 'left',
+});
+export const createInitialFaqAnswerStyle = (applyAutoScale = false) => ({
+    applyAutoScale,
+    textStyleType: TEXT_STYLE_TYPES.paragraphs,
+    textAlign: 'left',
+});
+export const createInitialFaqSectionContent = (options) => {
+    const applyAutoScale = options?.brandPageType === BRAND_PAGE_TYPES.brandSite;
+    return {
+        id: uuid.v4(),
+        type: 'faq-section',
+        title: contentSettingsTr(`defaultFaqTitle`),
+        description: contentSettingsTr(`defaultFaqDescription`),
+        displayStyle: FAQ_DISPLAY_STYLES.centered,
+        topPadding: 32,
+        bottomPadding: 32,
+        // One sample item; the design's four are only there to show a longer list.
+        items: [
+            {
+                id: uuid.v4(),
+                question: contentSettingsTr(`defaultFaqQuestion`),
+                questionStyle: createInitialFaqQuestionStyle(applyAutoScale),
+                answer: contentSettingsTr(`defaultFaqAnswer`),
+                answerStyle: createInitialFaqAnswerStyle(applyAutoScale),
+            },
+        ],
+        titleStyle: {
+            applyAutoScale,
+            textStyleType: TEXT_STYLE_TYPES.titles,
+            textAlign: 'center',
+        },
+        descriptionStyle: {
+            applyAutoScale,
+            textStyleType: TEXT_STYLE_TYPES.paragraphs,
+            textAlign: 'center',
+        },
+        backgroundStyle: {},
+        iconColor: { color: '#555555' },
+        dividerColor: { backgroundColor: '#dcdcdc' },
+    };
+};
 export const createInitialImagesSectionContent = (options) => {
     return {
         id: uuid.v4(),

package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.js

@@ -1477,6 +1477,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
                 isCustomDomain: false,
                 brandPageSlug: brandPageContainerStore.brandPageSlug,
+                activeItemIdByContentId: useUiContentSettingsStore().activeItemIdByContentId,
             });
         },
         gettyVideoIds() {

package/lib/src/brand-page-maker/utils/apply-color-strategy.js

@@ -2,7 +2,8 @@ import { BRAND_PAGE_TYPES } from '@brand-page';
 import { FIELD_SLOT_MAP, raisedLayerFor, strategyRoleRefForField, } from '@shared/color-strategies/color-strategies';
 import { isTransparentDisabled, } from '@shared/content-settings/disable-transparent.util';
 import { setRteTextColor } from '@shared/color-strategies/rte-color';
-import { pairedRteTextField } from '@shared/color-strategies/rte-field-pairs';
+import { isTiptapDocument } from '@brand-page-maker/utils/rte-shape';
+import { pairedRteTextField, RTE_ITEM_FIELD_PAIRS, } from '@shared/color-strategies/rte-field-pairs';
 /**
  * Field types a strategy can assign. `color` fields hold nothing but a colour and are
  * REPLACED via their `valueConvertor`; `text-style` fields hold typography *and* a
@@ -62,6 +63,17 @@ const sectionLayers = (assignable, content, context) => {
             surfaceFields.every(([, field]) => !isTransparentDisabled(field.disableTransparent, context?.brandPageType ?? BRAND_PAGE_TYPES.default)),
     };
 };
+/**
+ * The strategy's text treatment for one text-style field: `color` set, text background
+ * cleared (matching the highlight strip in `setRteTextColor` — the toolbar writes both).
+ * The key is deleted rather than set undefined so `'backgroundColor' in style` checks
+ * downstream stay honest.
+ */
+const withStrategyTextStyle = (current, ref) => {
+    const nextStyle = { ...(current ?? {}), color: ref };
+    delete nextStyle.backgroundColor;
+    return nextStyle;
+};
 /**
  * Build the per-field colour writes a strategy stamps onto a section. Pure — reads the
  * section config + current content and returns a `{ fieldName: value }` partial. Each
@@ -97,16 +109,7 @@ export const buildColorStrategyValues = (config, content, strategyId, context, a
         }
         if (field.type === 'text-style') {
             const current = contentRecord[name];
-            const nextStyle = {
-                ...(current ?? {}),
-                color: ref,
-            };
-            // A strategy owns the text treatment, so it clears the text background colour
-            // too — matching the highlight strip in `setRteTextColor` (the toolbar writes
-            // both). Delete the key rather than set it undefined so `'backgroundColor' in
-            // style` checks downstream stay honest.
-            delete nextStyle.backgroundColor;
-            values[name] = nextStyle;
+            values[name] = withStrategyTextStyle(current, ref);
             // Also stamp the colour into the paired RTE document, if this field drives one.
             // `setRteTextColor` returns undefined for a plain string or legacy HTML RTE, so
             // that doubles as the "nothing to do" test — no separate type guard here.
@@ -133,6 +136,28 @@ export const buildColorStrategyValues = (config, content, strategyId, context, a
         }
         values[name] = field.valueConvertor.convertBack(ref);
     });
+    // Item-level RTE fields (each FAQ question) carry their own style and document, so
+    // the section's field loop above never sees them. Same two halves, per item, written
+    // back as one new list.
+    const itemPairs = typeof contentRecord.type === 'string'
+        ? (RTE_ITEM_FIELD_PAIRS[contentRecord.type] ?? [])
+        : [];
+    itemPairs.forEach((pair) => {
+        const ref = strategyRoleRefForField(strategyId, pair.styleField, content, context, layers, anchors);
+        const items = (values[pair.itemsField] ??
+            contentRecord[pair.itemsField]);
+        if (!ref || !Array.isArray(items)) {
+            return;
+        }
+        values[pair.itemsField] = items.map((item) => {
+            const nextDoc = setRteTextColor(item[pair.textField], ref);
+            return {
+                ...item,
+                [pair.styleField]: withStrategyTextStyle(item[pair.styleField], ref),
+                ...(nextDoc ? { [pair.textField]: nextDoc } : {}),
+            };
+        });
+    });
     return values;
 };
 /**
@@ -147,12 +172,15 @@ export const applyColorStrategyToItem = (store, { id, config, content, strategyI
     Object.entries(values).forEach(([name, value]) => {
         store.updateItemValue({ id, name, value });
     });
-    // A recoloured RTE field is emitted as a whole Tiptap document; the paired
-    // style-object writes are plain objects. Only the former needs the live editor
-    // to re-seed, so signal it just when a doc was among the writes.
-    const replacedRteDoc = Object.values(values).some((value) => typeof value === 'object' &&
-        value !== null &&
-        value.type === 'doc');
+    // A recoloured RTE field is emitted as a whole Tiptap document (at the top level,
+    // or inside a rewritten item list); the paired style-object writes are plain
+    // objects. Only the former needs the live editor to re-seed, so signal it just
+    // when a doc was among the writes.
+    const replacedRteDoc = Object.values(values).some((value) => isTiptapDocument(value) ||
+        (Array.isArray(value) &&
+            value.some((item) => typeof item === 'object' &&
+                item !== null &&
+                Object.values(item).some(isTiptapDocument))));
     if (replacedRteDoc) {
         markRteResync?.();
     }

package/lib/src/brand-page-maker/utils/rich-text-editor.util.d.ts

@@ -36,6 +36,12 @@ export declare const getPlainTextFromRTE: (content: unknown) => string;
  */
 export declare const getRteTextLength: (value: RichTextValue | null | undefined) => number;
 export declare const replaceTextInRTE: (existingHtml: string, newText: string) => string;
+/**
+ * Convert a new list item's plain text to RTE, as adding its section would. Goes through
+ * `transformRTEField` (element-first colour), so an item that copied a sibling's
+ * strategy-coloured style bakes that colour rather than the linked global one.
+ */
+export declare const switchRteItemFieldsToRTE: (sectionType: string, item: Record<string, unknown>, externalEditor: Editor, uiStyleSettingsStore?: StyleSettingsState) => void;
 export declare const transformToRTE: (uiPageSettingStore: PageSettingsState, externalEditor: Editor, uiStyleSettingsStore?: StyleSettingsState, newContent?: Content, type?: TextStyleType, newStyle?: TextStyleDeclaration) => void;
 export declare const switchAllContentToRTE: (uiPageSettingStore: PageSettingsState, externalEditor: Editor, uiStyleSettingsStore?: StyleSettingsState) => void;
 export declare const getUpdatedHTMLFromEditor: (externalEditor: Editor, contentText: RichTextValue, newContentStyle: TextStyleDeclaration) => string | import("@tiptap/core").DocumentType<Record<string, any> | undefined, import("@tiptap/core").NodeType<string, Record<string, any> | undefined, any, (import("@tiptap/core").NodeType<any, any, any, any> | import("@tiptap/core").TextType<import("@tiptap/core").MarkType<any, any>>)[]>[]>;

package/lib/src/brand-page-maker/utils/rich-text-editor.util.js

@@ -5,7 +5,7 @@ import { getRenderText } from '@brand-page/utils';
 import createDomPurify, {} from 'dompurify';
 import Color from 'color';
 import { isHrefPageId } from '../composables/rich-text-editor/hyperlink';
-import { RTE_SECTION_FIELD_PAIRS, } from '@shared/color-strategies/rte-field-pairs';
+import { RTE_ITEM_FIELD_PAIRS, RTE_SECTION_FIELD_PAIRS, } from '@shared/color-strategies/rte-field-pairs';
 // Re-exported below so every existing caller keeps importing them from here; they
 // live in a leaf module because this one pulls dompurify at runtime.
 import { isTiptapDocument, isRteHtmlString } from './rte-shape';
@@ -372,6 +372,24 @@ const switchRTEField = (content, pair, externalEditor, uiStyleSettingsStore) =>
         fields[pair.textField] = getUpdatedHTMLFromEditor(externalEditor, fields[pair.textField], style);
     }
 };
+// Items are visited as their own "content": each item carries the style that drives its
+// text, so the section-field helpers apply unchanged.
+const forEachRteItem = (sectionType, content, visit) => {
+    for (const pair of RTE_ITEM_FIELD_PAIRS[sectionType] ?? []) {
+        const items = content[pair.itemsField];
+        if (Array.isArray(items)) {
+            items.forEach((item) => visit(item, pair));
+        }
+    }
+};
+/**
+ * Convert a new list item's plain text to RTE, as adding its section would. Goes through
+ * `transformRTEField` (element-first colour), so an item that copied a sibling's
+ * strategy-coloured style bakes that colour rather than the linked global one.
+ */
+export const switchRteItemFieldsToRTE = (sectionType, item, externalEditor, uiStyleSettingsStore) => {
+    RTE_ITEM_FIELD_PAIRS[sectionType]?.forEach((pair) => transformRTEField(item, pair, externalEditor, uiStyleSettingsStore, item, undefined, undefined));
+};
 export const transformToRTE = (uiPageSettingStore, externalEditor, uiStyleSettingsStore, newContent, type, newStyle) => {
     for (const page of uiPageSettingStore.pages) {
         for (const contentItem of page.contents) {
@@ -382,6 +400,10 @@ export const transformToRTE = (uiPageSettingStore, externalEditor, uiStyleSettin
                     transformRTEField(content, pair, externalEditor, uiStyleSettingsStore, newContent, type, newStyle);
                 }
             }
+            const isNewContent = !!newContent && newContent.id === contentItem.id;
+            forEachRteItem(contentItem.type, contentItem.settings.content, (item, pair) => transformRTEField(item, pair, externalEditor, uiStyleSettingsStore, 
+            // An unlinked item of the section being added bakes its own style.
+            isNewContent ? item : undefined, type, newStyle));
             if (contentItem.type === 'text') {
                 const textContent = contentItem.settings.content;
                 if (textContent.textItems && textContent.textItems.length > 0) {
@@ -447,6 +469,7 @@ export const switchAllContentToRTE = (uiPageSettingStore, externalEditor, uiStyl
                     switchRTEField(content, pair, externalEditor, uiStyleSettingsStore);
                 }
             }
+            forEachRteItem(contentItem.type, contentItem.settings.content, (item, pair) => switchRTEField(item, pair, externalEditor, uiStyleSettingsStore));
             if (contentItem.type === 'text') {
                 const textContent = contentItem.settings.content;
                 if (textContent.textItems && textContent.textItems.length > 0) {

package/lib/src/brand-page-maker/validators/field.validator.js

@@ -139,6 +139,7 @@ export const validatorDict = {
     'color-replacements': dummyValidator,
     'testimonial-items': dummyValidator,
     'text-items': dummyValidator,
+    'faq-items': dummyValidator,
     'page-dropdown': dummyValidator,
     shape: dummyValidator,
     'logo-selection': dummyValidator,
@@ -181,6 +182,7 @@ export const adminValidatorsDict = {
     'color-replacements': dummyValidator,
     'testimonial-items': dummyValidator,
     'text-items': dummyValidator,
+    'faq-items': dummyValidator,
     'page-dropdown': dummyValidator,
     shape: dummyValidator,
     'logo-selection': dummyValidator,