@designcrowd/library.brand-page 6.2.3-ast-faq → 6.2.3

package/src/brand-page-maker/components/rich-text-editor/RichTextEditor.vue

@@ -394,11 +394,7 @@ import {
 } from '@designcrowd/fe-shared-lib';
 import { EditorContent } from '@tiptap/vue-3';
 import { BubbleMenu } from '@tiptap/vue-3/menus';
-import {
-  useRichTextEditor,
-  writeListItemStyles,
-} from '../../composables/rich-text-editor/useRichTextEditor';
-import type { RteItemStyleTarget } from '@shared/content-settings/models';
+import { useRichTextEditor } from '../../composables/rich-text-editor/useRichTextEditor';
 import FontPicker from '@shared/font-family-selector/FontPicker.vue';
 import ColorField from '@shared/content-settings/components/color-field/ColorField.vue';
 import UrlField from '@shared/content-settings/components/url-field/UrlField.vue';
@@ -464,8 +460,6 @@ const props = withDefaults(
     textItemIndex: number;
     item: TextItem;
     contentType: string;
-    /** Edit a list item's text: toolbar styles go to that item's own style field. */
-    itemStyleTarget?: RteItemStyleTarget;
   }>(),
   {
     id: '',
@@ -478,7 +472,6 @@ const props = withDefaults(
     textStyleName: '',
     styles: () => ({}),
     rawId: '',
-    itemStyleTarget: undefined,
   },
 );
 
@@ -609,29 +602,6 @@ const isAddLinkButtonDisabled = computed(() => {
   );
 });
 
-// Where this editor's role/colour writes land: the list item it edits, a Text block
-// item, or the section's own `${name}Style`.
-const writeStyles = (value: TextStyleDeclaration): void => {
-  if (writeListItemStyles(contentSettingStore, props, value)) {
-    return;
-  }
-
-  if (props.name === 'textItems') {
-    contentSettingStore.updateTextItemTextStyleTypeWithStyles({
-      id: props.rawId,
-      name: props.name,
-      value,
-      index: props.textItemIndex,
-    });
-  } else {
-    contentSettingStore.updateTextStyles({
-      id: props.rawId,
-      name: props.name,
-      value,
-    });
-  }
-};
-
 // Keeps a text ITEM's own style in step with the global text style it links to.
 watch(
   () =>
@@ -671,7 +641,20 @@ watch(
           backgroundColor: undefined,
         };
 
-        writeStyles(value);
+        if (props.name === 'textItems') {
+          contentSettingStore.updateTextItemTextStyleTypeWithStyles({
+            id: props.rawId,
+            name: props.name,
+            value,
+            index: props.textItemIndex,
+          });
+        } else {
+          contentSettingStore.updateTextStyles({
+            id: props.rawId,
+            name: props.name,
+            value,
+          });
+        }
       }
     } else {
       // make sure text style options are updated and selected Global style is set to none
@@ -702,10 +685,26 @@ const onSelectTextStyleType = (option: ButtonGroupOption) => {
     if (optionSelected) {
       selectedGlobalTextStyles.value = item.value;
       if (option.value === undefined) {
-        writeStyles({
-          textStyleType: undefined,
-          fontSize: fontSettings.selectedFontSize,
-        });
+        if (props.name === 'textItems') {
+          contentSettingStore.updateTextItemTextStyleTypeWithStyles({
+            id: props.rawId,
+            name: props.name,
+            value: {
+              textStyleType: undefined,
+              fontSize: fontSettings.selectedFontSize,
+            },
+            index: props.textItemIndex,
+          });
+        } else {
+          contentSettingStore.updateTextStyles({
+            id: props.rawId,
+            name: props.name,
+            value: {
+              textStyleType: undefined,
+              fontSize: fontSettings.selectedFontSize,
+            },
+          });
+        }
       } else {
         const selectedStyle: BrandPageCssStyle =
           styleSettingsStore.textStyles.textStyleOptions[
@@ -724,7 +723,20 @@ const onSelectTextStyleType = (option: ButtonGroupOption) => {
           backgroundColor: undefined,
         };
 
-        writeStyles(value);
+        if (props.name === 'textItems') {
+          contentSettingStore.updateTextItemTextStyleTypeWithStyles({
+            id: props.rawId,
+            name: props.name,
+            value,
+            index: props.textItemIndex,
+          });
+        } else {
+          contentSettingStore.updateTextStyles({
+            id: props.rawId,
+            name: props.name,
+            value,
+          });
+        }
       }
       item.isSelected = true;
     } else {

package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts

@@ -32,7 +32,6 @@ import {
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 import { letterSpacingValueConvertor } from '@brand-page-maker/convertors';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
-import type { RteItemStyleTarget } from '@shared/content-settings/models';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { AllSelection } from 'prosemirror-state';
 import { useHyperlink } from './hyperlink';
@@ -114,32 +113,6 @@ export const useExternalRichTextEditor = (): {
   };
 };
 
-/**
- * An editor bound to a list item (`itemStyleTarget`) writes its toolbar styles to that
- * item's own style field instead of the section-level `${name}Style`. Returns false when
- * the editor has no item target, so the caller falls through to its section-level write.
- */
-export const writeListItemStyles = (
-  store: ReturnType<typeof useUiContentSettingsStore>,
-  props: { rawId: string; name: string; itemStyleTarget?: RteItemStyleTarget },
-  value: TextStyleDeclaration,
-  isHydrationWrite?: boolean,
-): boolean => {
-  if (!props.itemStyleTarget) {
-    return false;
-  }
-
-  store.updateListItemTextStyles({
-    id: props.rawId,
-    name: props.name,
-    value,
-    target: props.itemStyleTarget,
-    isHydrationWrite,
-  });
-
-  return true;
-};
-
 export const useRichTextEditor = (
   model: ModelRef<any>,
   props: {
@@ -153,7 +126,6 @@ export const useRichTextEditor = (
     textItemIndex: number;
     item: TextItem;
     contentType: string;
-    itemStyleTarget?: RteItemStyleTarget;
   },
   emit: (event: 'focus' | 'blur' | 'update:modelValue', ...args: any[]) => void,
   fontSettings: {
@@ -454,23 +426,6 @@ export const useRichTextEditor = (
     }
   });
 
-  // Set while a toolbar command runs. The toolbar has taken focus by then, so
-  // `isFocused` alone would tag the command's write as hydration and fold it into
-  // the previous undo entry — hidden only when a style write rides along and opens
-  // an entry of its own. Synchronous commands only: the spacing sliders dispatch
-  // after a debounce and are not covered.
-  let isRunningToolbarCommand = false;
-
-  const runAsToolbarCommand = <T>(command: () => T): T => {
-    isRunningToolbarCommand = true;
-
-    try {
-      return command();
-    } finally {
-      isRunningToolbarCommand = false;
-    }
-  };
-
   // Update model when editor content changes. RTE content is stored as Tiptap
   // JSON (BP-5787). getJSON() is already in hand (the editor holds the doc) and
   // is sanitised natively — no getHTML(), no DOMPurify, no extra editor — so
@@ -484,9 +439,15 @@ export const useRichTextEditor = (
     // field → store chain and arms the history merge at the moment of the
     // store write — arming here at emit time would lapse before the
     // debounce fires. Genuine edits happen while focused and commit
-    // normally, and so do synchronous toolbar commands (isRunningToolbarCommand).
+    // normally.
+    //
+    // Known limitation: a programmatic toolbar command run on an editor the
+    // user hasn't focused yet would also merge (losing that undo step). Today
+    // the RTE only mounts inside an already-open settings drawer and the user
+    // focuses it before formatting, so this doesn't occur — revisit if a
+    // consumer ever drives toolbar actions on an unfocused editor.
     emit('update:modelValue', sanitizeRteJson(editor.getJSON()), {
-      isHydrationWrite: !editor.isFocused && !isRunningToolbarCommand,
+      isHydrationWrite: !editor.isFocused,
     });
   });
 
@@ -590,38 +551,26 @@ export const useRichTextEditor = (
       // write lands ~100ms BEFORE the editor's canonical text write-back, and
       // an unflagged write here would open a plain capture burst that
       // swallows the flagged text write into a phantom entry (BP-5810).
-      const syncedStyles = {
-        fontSize: globalStyles.fontSize,
-        fontFamily: globalStyles.fontFamily,
-        fontWeight: globalStyles.fontWeight,
-        fontStyle: globalStyles.fontStyle,
-        textDecoration: globalStyles.textDecoration,
-        // Keep an element colour override (a creation-time contrast bake, or a
-        // colour picked while linked) — only fall back to the global style's colour
-        // when the element has none, mirroring `resolveTextColor`'s element-first
-        // cascade. Blindly taking `globalStyles.color` here re-derived the linked
-        // colour on every RTE mount and clobbered the override.
-        color: props.styles?.color || globalStyles.color,
-        lineHeight: globalStyles.lineHeight,
-        letterSpacing: globalStyles.letterSpacing,
-      };
-      const isHydrationWrite = !editor.isFocused;
-
-      if (
-        !writeListItemStyles(
-          contentSettingStore,
-          props,
-          syncedStyles,
-          isHydrationWrite,
-        )
-      ) {
-        contentSettingStore.updateTextStyles({
-          id: props.rawId,
-          name: props.name,
-          value: syncedStyles,
-          isHydrationWrite,
-        });
-      }
+      contentSettingStore.updateTextStyles({
+        id: props.rawId,
+        name: props.name,
+        value: {
+          fontSize: globalStyles.fontSize,
+          fontFamily: globalStyles.fontFamily,
+          fontWeight: globalStyles.fontWeight,
+          fontStyle: globalStyles.fontStyle,
+          textDecoration: globalStyles.textDecoration,
+          // Keep an element colour override (a creation-time contrast bake, or a
+          // colour picked while linked) — only fall back to the global style's colour
+          // when the element has none, mirroring `resolveTextColor`'s element-first
+          // cascade. Blindly taking `globalStyles.color` here re-derived the linked
+          // colour on every RTE mount and clobbered the override.
+          color: props.styles?.color || globalStyles.color,
+          lineHeight: globalStyles.lineHeight,
+          letterSpacing: globalStyles.letterSpacing,
+        },
+        isHydrationWrite: !editor.isFocused,
+      });
 
       // sync toolbar editor styles
       fontSettings.selectedFont = globalStyles?.fontFamily ?? 'Lato';
@@ -813,10 +762,6 @@ export const useRichTextEditor = (
   };
 
   const syncContentSettings = (fontStyleChanges: TextStyleDeclaration) => {
-    if (writeListItemStyles(contentSettingStore, props, fontStyleChanges)) {
-      return;
-    }
-
     if (props.name === 'textItems') {
       contentSettingStore.updateTextItemTextStyleTypeWithStyles({
         id: props.rawId,
@@ -952,8 +897,7 @@ export const useRichTextEditor = (
     editor,
     onFocus,
     onBlur,
-    triggerEditorStyleChange: (editorOption: EditorOptionType) =>
-      runAsToolbarCommand(() => triggerEditorStyleChange(editorOption)),
+    triggerEditorStyleChange,
     toggleBold,
     toggleItalic,
     toggleUnderline,
@@ -970,8 +914,7 @@ export const useRichTextEditor = (
     setInitialStyleSettings,
     copyGlobalStyleSettings,
     unsetAllMarks,
-    handleHyperlink: (...args: Parameters<typeof handleHyperlink>) =>
-      runAsToolbarCommand(() => handleHyperlink(...args)),
+    handleHyperlink,
     hyperlinkValue,
     setHyperlinkUrlValue,
     shouldShow,

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

@@ -35,11 +35,8 @@ import type {
   Content,
   ShopContent,
   BookingSectionContent,
-  FaqSectionContent,
 } from '@brand-page';
 import {
-  FAQ_DISPLAY_STYLES,
-  FAQ_MAX_ITEMS,
   SOCIAL_LINKS_ICON_DISPLAY_STYLES,
   BRAND_PAGE_TYPES,
   DIVIDER_STYLES,
@@ -87,9 +84,6 @@ import {
   VARIANT_DISPLAY_MODES,
   createInitialShopContent,
   createInitialBookingSectionContent,
-  createInitialFaqSectionContent,
-  createInitialFaqQuestionStyle,
-  createInitialFaqAnswerStyle,
 } from '../models';
 import * as uuid from 'uuid';
 import type {
@@ -155,7 +149,6 @@ import {
 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 {
@@ -3302,106 +3295,6 @@ export const BOOKING_SECTION_SETTINGS_CONFIG =
     isLocked: false,
   });
 
-const FAQ_FIELD_GROUP_IDS = {
-  settings: 'settings',
-  items: 'items',
-  style: 'style',
-} as const;
-
-export const FAQ_SECTION_SETTINGS_CONFIG =
-  (): ContentSettingsConfig<FaqSectionContent> => ({
-    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,
-      },
-      items: {
-        type: 'list-items',
-        defaultValue: [],
-        groupId: FAQ_FIELD_GROUP_IDS.items,
-        maxLength: FAQ_MAX_ITEMS,
-        itemFields: [
-          {
-            key: 'question',
-            kind: 'text',
-            styleKey: 'questionStyle',
-            defaultStyle: () => createInitialFaqQuestionStyle(),
-            maxLength: 200,
-            title: contentSettingsTr(`faqQuestionTitle`),
-            placeholder: contentSettingsTr(`faqQuestionPlaceholder`),
-            defaultValue: () => contentSettingsTr(`faqNewQuestion`),
-          },
-          {
-            key: 'answer',
-            kind: 'textarea',
-            styleKey: 'answerStyle',
-            defaultStyle: () => createInitialFaqAnswerStyle(),
-            maxLength: 1000,
-            title: contentSettingsTr(`faqAnswerTitle`),
-            placeholder: contentSettingsTr(`faqAnswerPlaceholder`),
-            defaultValue: () => contentSettingsTr(`faqNewAnswer`),
-          },
-        ],
-      },
-      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),
-      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 = (): Record<
   ContentType,
   ContentSettingsConfig<any>
@@ -3438,5 +3331,4 @@ export const CONTENT_SETTINGS_CONFIGS = (): Record<
   '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/src/brand-page-maker/convertors/i18n/converter.json

@@ -21,9 +21,6 @@
     "medium": "Medium",
     "large": "Large",
     "bigImage": "Big Image",
-    "columns": "Columns",
-    "faqCenteredAccordion": "Centered accordion",
-    "faqSplitAccordion": "Split accordion",
-    "faqGrid": "Grid"
+    "columns": "Columns"
   }
 }

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

@@ -3,7 +3,6 @@ import type {
   BrandPageType,
   Content,
   ContentType,
-  TextStyleDeclaration,
 } from '@brand-page';
 import type { ContentReplaceImageSettings } from '@shared/content-settings/models';
 import type { UIUserFeatures } from '@src/constants/ui';
@@ -87,7 +86,6 @@ export const ITEM_FIELD_TYPES = {
   'color-replacements': 'color-replacements',
   'testimonial-items': 'testimonial-items',
   'text-items': 'text-items',
-  'list-items': 'list-items',
   'page-dropdown': 'page-dropdown',
   'personalisation-override': 'personalisation-override',
 } as const;
@@ -156,28 +154,6 @@ export interface ContentSettingsField<TContent> {
    * Defaults to `${fieldName}Style` when not specified.
    */
   styleName?: string;
-
-  /** `list-items` only: the per-item inputs, in order. The first `text` input labels the row. */
-  itemFields?: ListItemFieldSchema[];
-}
-
-export interface ListItemFieldSchema {
-  key: string;
-  /** The plain input used when the rich-text editor is unavailable. */
-  kind: 'text' | 'textarea';
-  title: string;
-  placeholder?: string;
-  maxLength?: number;
-  /**
-   * The item field that holds this text's style. Set it to make the text rich text —
-   * the same editor as a section title, writing this item's own style — whenever the
-   * section allows rich text. Without rich text, a font-style control edits it instead.
-   */
-  styleKey?: string;
-  /** Style a first item starts with; later items copy the last item's style. */
-  defaultStyle?: () => TextStyleDeclaration;
-  /** Value a newly added item starts with. */
-  defaultValue?: () => string;
 }
 
 export interface ContentSettingsMultiField<TContent, TField> extends Omit<

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

@@ -26,7 +26,6 @@ import {
   SENSITIVE_CONTENT_TYPES,
   CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
   TESTIMONIAL_DEFAULT_PADDING,
-  FAQ_DISPLAY_STYLES,
 } from '@brand-page';
 import type {
   ButtonContent,
@@ -54,8 +53,6 @@ import type {
   SupportMeContent,
   ShopContent,
   BookingSectionContent,
-  TextStyleDeclaration,
-  FaqSectionContent,
 } from '@brand-page';
 import * as uuid from 'uuid';
 import type { CreateInitialContentFunction } from './content-settings-configs';
@@ -674,60 +671,6 @@ export const createInitialBookingSectionContent: CreateInitialContentFunction<
   };
 };
 
-// Questions follow the Headings role, answers the Paragraphs role.
-export const createInitialFaqQuestionStyle = (
-  applyAutoScale = false,
-): TextStyleDeclaration => ({
-  applyAutoScale,
-  textStyleType: TEXT_STYLE_TYPES.headings,
-  textAlign: 'left',
-});
-
-export const createInitialFaqAnswerStyle = (
-  applyAutoScale = false,
-): TextStyleDeclaration => ({
-  applyAutoScale,
-  textStyleType: TEXT_STYLE_TYPES.paragraphs,
-  textAlign: 'left',
-});
-
-export const createInitialFaqSectionContent: CreateInitialContentFunction<
-  FaqSectionContent
-> = (options?: CreateInitialContentOptions) => {
-  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: {},
-  };
-};
-
 export const createInitialImagesSectionContent: CreateInitialContentFunction<
   ImagesSectionContent
 > = (options?: CreateInitialContentOptions) => {

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

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