@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/lib/src/shared/rte-render.util.js

@@ -0,0 +1,255 @@
+import { getSchema } from '@tiptap/core';
+import { DOMParser as ProseMirrorDOMParser, Node as ProseMirrorNode, } from '@tiptap/pm/model';
+import { renderToHTMLString } from '@tiptap/static-renderer/pm/html-string';
+import { getRteExtensions, rteSchemaGeneration } from './rte-extensions.util';
+import { isTiptapDocument, getRteJsonPlainText } from './rte-shape.util';
+import { ESCAPED_NEWLINE_CHARACTER } from '@src/constants/ui';
+export { isTiptapDocument, getRteJsonPlainText };
+// One extension set shared by both directions (render + parse). Schema knowledge
+// lives here, once — Tiptap/extension upgrades propagate to both automatically.
+const RTE_EXTENSIONS = getRteExtensions();
+const RTE_EXTENSIONS_WITH_DECORATION_CLASSES = getRteExtensions({
+    renderTextDecorationClasses: true,
+});
+// ProseMirror schema derived once from the shared extension set. This is the
+// schema-driven heart of HTML→JSON (no drift); only the HTML→DOM step is injected.
+const RTE_SCHEMA = getSchema(RTE_EXTENSIONS);
+// One ProseMirror schema per schema GENERATION, built once each. `rteSchemaGeneration` collapses a
+// requested version to its range, so every version in a range shares one built schema (5 and 20 both
+// use the base; 22 and the latest share the newest). A migration passes its own model version so its
+// HTML→JSON parse reproduces that range's schema and can't drift when the live schema gains an
+// extension; runtime (renderer, factories) omits it and uses the latest. RTE_SCHEMA is the latest,
+// so it seeds the newest generation and isn't rebuilt.
+const schemaByGeneration = new Map([
+    [rteSchemaGeneration(undefined), RTE_SCHEMA],
+]);
+const rteSchemaForVersion = (schemaVersion) => {
+    const generation = rteSchemaGeneration(schemaVersion);
+    let schema = schemaByGeneration.get(generation);
+    if (!schema) {
+        schema = getSchema(getRteExtensions({ schemaVersion }));
+        schemaByGeneration.set(generation, schema);
+    }
+    return schema;
+};
+/**
+ * Render an RTE value to final HTML. Legacy HTML strings pass through untouched
+ * (they are already HTML); Tiptap JSON is serialised by @tiptap/static-renderer
+ * from the extension schema — no editor, no DOM — so it works on the server
+ * (SSR/publish), not just the browser.
+ *
+ * MIGRATION-22 SNAPSHOT DEPENDENCY: B1 uses this module's plain-text conversion and parser seam.
+ * Pin that v22 conversion before changing it after migration-22 releases.
+ */
+export const renderRteToHtml = (value, options = {}) => {
+    if (value == null || value === '')
+        return '';
+    if (typeof value === 'string')
+        return value;
+    try {
+        return renderToHTMLString({
+            content: value,
+            extensions: options.textDecorationClasses
+                ? RTE_EXTENSIONS_WITH_DECORATION_CLASSES
+                : RTE_EXTENSIONS,
+        });
+    }
+    catch (error) {
+        // renderToHTMLString throws on a node/mark type this renderer's schema
+        // doesn't know. The realistic trigger is version skew — the library ships to
+        // multiple apps, so a maker on a newer schema can persist a node an older
+        // deployed renderer can't render. Degrade to visible text rather than let
+        // one field throw out of its (unguarded) computed and 500 the whole page.
+        console.error('renderRteToHtml: unrenderable doc, falling back to plain text', error);
+        return getRteJsonPlainText(value);
+    }
+};
+// Tiptap's elementFromString strips whitespace-only text nodes (pretty-print
+// indentation between tags) before parsing; replicate it so injected-parser
+// output stays identical to the previous generateJSON-based conversion.
+const stripIndentationTextNodes = (node) => {
+    const children = node.childNodes;
+    for (let i = children.length - 1; i >= 0; i -= 1) {
+        const child = children[i];
+        if (child.nodeType === 3 &&
+            child.nodeValue &&
+            /^(\n\s\s|\n)$/.test(child.nodeValue)) {
+            node.removeChild(child);
+        }
+        else if (child.nodeType === 1) {
+            stripIndentationTextNodes(child);
+        }
+    }
+    return node;
+};
+const htmlToRteJson = (html, parser, schemaVersion) => {
+    const body = parser.parseFromString(`<body>${html}</body>`, 'text/html').body;
+    const dom = stripIndentationTextNodes(body);
+    return ProseMirrorDOMParser.fromSchema(rteSchemaForVersion(schemaVersion))
+        .parse(dom)
+        .toJSON();
+};
+let serverParserPromise = null;
+/**
+ * Resolve an HtmlParser for the current runtime: the native `DOMParser` in the
+ * browser (and jsdom-based test envs), or a jsdom `DOMParser` INSTANCE on a
+ * pure-node server — created and returned directly, never assigned to a global,
+ * so it is immune to SSR execution-context differences. The jsdom specifier is
+ * assembled at runtime so no bundler follows it into a browser build. Memoised
+ * on the server (JSDOM construction is relatively expensive).
+ */
+export const resolveHtmlParser = async () => {
+    if (typeof DOMParser !== 'undefined')
+        return new DOMParser();
+    if (!serverParserPromise) {
+        const jsdomModuleId = ['js', 'dom'].join('');
+        serverParserPromise = import(/* @vite-ignore */ jsdomModuleId)
+            .then((mod) => {
+            const { JSDOM } = mod;
+            const { DOMParser: JsdomDOMParser } = new JSDOM('').window;
+            return new JsdomDOMParser();
+        })
+            .catch((error) => {
+            // Don't cache the failure — let a later call retry the import.
+            serverParserPromise = null;
+            throw error;
+        });
+    }
+    return serverParserPromise;
+};
+const getDefaultParser = () => {
+    if (typeof DOMParser !== 'undefined')
+        return new DOMParser();
+    throw new Error('toRteJson: no global DOMParser in this environment. On the server, pass an ' +
+        'explicit parser as the second argument (see resolveHtmlParser).');
+};
+/**
+ * Normalise an RTE value to a Tiptap JSON document. HTML strings are parsed with
+ * `parser` (defaults to the browser's native DOMParser); JSON documents pass
+ * through unchanged. Returns undefined for empty/blank input so callers can omit
+ * empty fields. `schemaVersion` pins the parse schema — a migration passes its own
+ * version so its output can't drift when the live schema gains an extension;
+ * everything else omits it and parses with the latest.
+ */
+export const toRteJson = (value, parser, schemaVersion) => {
+    if (value == null || value === '')
+        return undefined;
+    if (isTiptapDocument(value))
+        return value;
+    return htmlToRteJson(value, parser ?? getDefaultParser(), schemaVersion);
+};
+// Twin of getRenderText (brand-page/utils/text.util) — the plain-text renderer's
+// newline shim, applied on the way INTO the parser instead of at display time.
+const NEWLINE_TO_BR = new RegExp(`(${ESCAPED_NEWLINE_CHARACTER}|\\n)`, 'g');
+/**
+ * Convert a PLAIN-TEXT field to a Tiptap JSON document. Plain-text fields persist
+ * newlines percent-encoded (`ESCAPED_NEWLINE_CHARACTER`, `%0A`); fed straight to the
+ * HTML parser those survive as a literal `"%0A"` run with the line structure lost, so
+ * we first turn them (and any raw `\n`) into `<br>` — the same shim the retired runtime
+ * rewrap applied via getRenderText before `setContent`. Guarded on `%0A` so a legacy
+ * RTE-HTML string (whose pretty-print `\n` must stay insignificant whitespace, stripped
+ * by `stripIndentationTextNodes`) is passed through untouched. JSON docs pass through.
+ */
+export const plainTextToRteJson = (value, parser, schemaVersion) => {
+    const prepared = typeof value === 'string' && value.includes(ESCAPED_NEWLINE_CHARACTER)
+        ? value.replace(NEWLINE_TO_BR, '<br/>')
+        : value;
+    return toRteJson(prepared, parser, schemaVersion);
+};
+// The canonical empty document (a single empty paragraph), built from the schema — no DOM, SSR-safe.
+const emptyRteDoc = () => RTE_SCHEMA.topNodeType.createAndFill().toJSON();
+/**
+ * BP-5969 — build the Tiptap doc a factory stores for an RTE field: the RTE-JSON **source** that
+ * replaces the plain-string-then-convert seam. STRUCTURE only (paragraph + text + `textAlign`) —
+ * colour and role typography are baked afterwards by the init step (`applyTextContrast` +
+ * `authorContentRteFields`), since colour is contrast-derived and must not be duplicated per factory.
+ * Schema-built (never a hand-written literal), so it stays valid and matches migration output.
+ *
+ * Empty text → an empty paragraph (still a doc, never a string). A ProseMirror text node cannot be
+ * empty, so an empty field has no run: its colour then lives on the style object until the user types,
+ * when `buildInitialMarks` seeds the first run from it.
+ */
+export const rteDoc = (text, textAlign, parser) => {
+    const doc = typeof text === 'string' && text.length > 0
+        ? (plainTextToRteJson(text, parser) ?? emptyRteDoc())
+        : emptyRteDoc();
+    if (textAlign) {
+        for (const block of doc.content ?? []) {
+            block.attrs = { ...(block.attrs ?? {}), textAlign };
+        }
+    }
+    return doc;
+};
+// A plain-text field's line breaks: the escaped-newline token (`%0A`) or a real newline. Non-capturing
+// so `split` yields only the lines. `plainTextToRteJson` turns the same breaks into `<br>`; the reflow
+// makes each line its own paragraph instead.
+const REFLOW_LINE_BREAK = new RegExp(`${ESCAPED_NEWLINE_CHARACTER}|\\r?\\n`);
+// The mark carrying a run's colour + role-var typography (family/size/weight/…). It is the ONLY mark
+// the reflow carries onto new text — per-word marks (link/highlight) can't meaningfully apply to
+// different copy, so they are dropped.
+const TEXT_STYLE_MARK_NAME = 'textStyle';
+/**
+ * Build a schema-valid doc from plain text: ONE paragraph, its lines joined by `hardBreak`s, every run
+ * stamped with `styleMarks` and the block with `textAlign`. A hard break (not a paragraph per line)
+ * matches how `plainTextToRteJson` — and so the template's own authoring — turns `%0A` into a `<br>`,
+ * so the reflow introduces no inter-paragraph spacing the template never had. `schema.text` throws on
+ * an empty string, so an empty line contributes only its break; empty text yields an empty paragraph.
+ * The library owns validity — `schema.text` / `NodeType.create`, never a JSON literal — so no DOM parser.
+ */
+const buildStyledDoc = (text, styleMarks, textAlign) => {
+    const { paragraph, hardBreak } = RTE_SCHEMA.nodes;
+    const attrs = textAlign ? { textAlign } : null;
+    const inline = [];
+    text.split(REFLOW_LINE_BREAK).forEach((line, index) => {
+        if (index > 0)
+            inline.push(hardBreak.create());
+        if (line)
+            inline.push(RTE_SCHEMA.text(line, styleMarks));
+    });
+    return RTE_SCHEMA.topNodeType
+        .create(null, paragraph.create(attrs, inline))
+        .toJSON();
+};
+/**
+ * BP-5969 — inject `newText` into a template RTE doc while KEEPING the template's embedded style.
+ * Personalisation supplies only plain text; writing it raw drops the doc and its style (colour +
+ * typography live in the run marks). This lifts the template's **style skeleton** — the FIRST text
+ * run's `textStyle` mark (colour + role-var refs + any literal override) and the first block's
+ * alignment — and reflows the new text through it: a single paragraph whose lines join with hard
+ * breaks (matching how plain text is authored), every run carrying that mark. Per-word variation (a
+ * coloured word, an inline link) collapses to the base style — an accepted, documented loss; a
+ * uniformly-styled field comes out identical.
+ *
+ * The library owns schema handling: `Node.fromJSON` validates the template and hydrates real marks,
+ * `schema.text` applies them. No hand-written JSON and no `DOMParser`, so it is isomorphic — it runs
+ * on the server draft path where an editor or an HTML parse could not. The linked role lives on the
+ * sibling style object (`textStyleType`), untouched here, so the reflowed block still repaints on a
+ * role edit.
+ *
+ * A template that cannot be parsed, or that has no styled run, degrades to unstyled reflow rather than
+ * throwing — one bad field must not abort a whole personalisation pass.
+ */
+export const reflowRteDoc = (templateDoc, newText) => {
+    try {
+        const doc = ProseMirrorNode.fromJSON(RTE_SCHEMA, templateDoc);
+        // The FIRST text run is the base style. `descendants` has no early-abort (returning false skips a
+        // node's children but still visits siblings), so a flag stops us overwriting from later runs.
+        let styleMarks = [];
+        let found = false;
+        doc.descendants((node) => {
+            if (found)
+                return false;
+            if (node.isText) {
+                styleMarks = node.marks.filter((mark) => mark.type.name === TEXT_STYLE_MARK_NAME);
+                found = true;
+                return false;
+            }
+            return true;
+        });
+        return buildStyledDoc(newText, styleMarks, doc.firstChild?.attrs.textAlign);
+    }
+    catch (error) {
+        console.error('reflowRteDoc: unusable template doc, reflowing without style', error);
+        return buildStyledDoc(newText, []);
+    }
+};

package/lib/src/shared/rte-shape.util.d.ts

@@ -0,0 +1,6 @@
+import type { JSONContent } from '@tiptap/vue-3';
+/** Canonical discriminator for the JSON RTE model. */
+export declare const isTiptapDocument: (value: unknown) => value is JSONContent;
+/** A legacy inline-HTML RTE string, rather than arbitrary text containing angle brackets. */
+export declare const isRteHtmlString: (value: unknown) => value is string;
+export declare const getRteJsonPlainText: (doc: JSONContent) => string;

package/lib/src/shared/rte-shape.util.js

@@ -0,0 +1,18 @@
+/** Canonical discriminator for the JSON RTE model. */
+export const isTiptapDocument = (value) => typeof value === 'object' &&
+    value !== null &&
+    value.type === 'doc';
+/** A legacy inline-HTML RTE string, rather than arbitrary text containing angle brackets. */
+export const isRteHtmlString = (value) => typeof value === 'string' &&
+    value.length > 0 &&
+    /^<[A-Za-z][A-Za-z0-9-]*\b[^>]*>[\s\S]*<\/[A-Za-z][A-Za-z0-9-]*>$/.test(value.trim());
+export const getRteJsonPlainText = (doc) => {
+    const parts = [];
+    const walk = (node) => {
+        if (typeof node.text === 'string')
+            parts.push(node.text);
+        node.content?.forEach(walk);
+    };
+    walk(doc);
+    return parts.join(' ').replace(/\s+/g, ' ').trim();
+};

package/lib/src/shared/side-bar/components/SideBar.mixin.d.ts

@@ -381,7 +381,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }[]>;
     selectedTabName: import("vue").ComputedRef<string>;
     isAdminMaker: import("vue").ComputedRef<boolean>;
-    contentSettingsMode: import("vue").ComputedRef<"images" | "add" | "edit" | "focusedContentItem">;
+    contentSettingsMode: import("vue").ComputedRef<"images" | "edit" | "add" | "focusedContentItem">;
     contentSettingsSelectedItemId: import("vue").ComputedRef<string | null>;
     sideBarStore: import("pinia").Store<"uiSideBar", import("../store").SideBarState, {}, {
         setBrandPageSettingsTabVisibility(payload: {
@@ -391,6 +391,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setSelectedSettingsSection(payload: {
             sectionName?: string;
         }): void;
+        openTextStyles(): void;
     }>;
     userStore: import("pinia").Store<"brandPageMakerUser", import("@brand-page-maker/stores").UserState, {}, {
         setUserState(payload: {

package/lib/src/shared/side-bar/components/SideBarTabButton.mixin.d.ts

@@ -13,6 +13,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setSelectedSettingsSection(payload: {
             sectionName?: string;
         }): void;
+        openTextStyles(): void;
     }>;
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {

package/lib/src/shared/side-bar/store/side-bar-store.d.ts

@@ -1,4 +1,5 @@
 import type { SetSelectedTabNamePayload, SideBarTab } from '../models';
+export declare const TEXT_STYLES_SETTINGS_SECTION = "textStyles";
 export interface SideBarState {
     tabs: SideBarTab[];
     selectedTabName: string;
@@ -13,4 +14,5 @@ export declare const useUiSideBarStore: import("pinia").StoreDefinition<"uiSideB
     setSelectedSettingsSection(payload: {
         sectionName?: string;
     }): void;
+    openTextStyles(): void;
 }>;

package/lib/src/shared/side-bar/store/side-bar-store.js

@@ -3,6 +3,8 @@ import { defineStore } from 'pinia';
 import { DEFAULT_SIDE_BAR_TABS, SIDE_BAR_TAB_NAMES, } from '@brand-page-maker/constants';
 import { PAGE_SETTINGS_SECTIONS, useUiPageSettingsStore, } from '../../page-settings/store';
 import { useUiContentSettingsStore } from '../../content-settings/store';
+// The Style tab's Text Styles panel, which "Edit Text Styles" in a role dropdown opens.
+export const TEXT_STYLES_SETTINGS_SECTION = 'textStyles';
 export const useUiSideBarStore = defineStore('uiSideBar', {
     state: () => ({
         tabs: DEFAULT_SIDE_BAR_TABS(),
@@ -51,5 +53,12 @@ export const useUiSideBarStore = defineStore('uiSideBar', {
         setSelectedSettingsSection(payload) {
             this.selectedSettingsSection = payload.sectionName;
         },
+        // The section is set first: the Style tab mounts on the switch and scrolls to it.
+        openTextStyles() {
+            this.setSelectedSettingsSection({
+                sectionName: TEXT_STYLES_SETTINGS_SECTION,
+            });
+            this.setSelectedTabName({ tabName: SIDE_BAR_TAB_NAMES.STYLE_SETTINGS });
+        },
     },
 });

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -188,13 +188,161 @@ declare const _default: import("vue").DefineComponent<{}, {
         };
     }>;
     textStyles: import("vue").ComputedRef<{
-        textFontFamily: import("../../../brand-page").FontFamilyKey;
         textStyleOptions: {
             buttons: {
                 type: import("../../../brand-page").TextStyleType;
                 title: string;
                 style: {
-                    color: string | undefined;
+                    fontFamily: string | undefined;
+                    fontSize: string | undefined;
+                    fontStyle: string | undefined;
+                    fontWeight: string | undefined;
+                    letterSpacing: string | undefined;
+                    lineHeight: string | undefined;
+                    textDecoration: string | undefined;
+                    textStyleType: import("../../../brand-page").TextStyleType | undefined;
+                };
+                isModified: boolean;
+            };
+            button: {
+                type: import("../../../brand-page").TextStyleType;
+                title: string;
+                style: {
+                    fontFamily: string | undefined;
+                    fontSize: string | undefined;
+                    fontStyle: string | undefined;
+                    fontWeight: string | undefined;
+                    letterSpacing: string | undefined;
+                    lineHeight: string | undefined;
+                    textDecoration: string | undefined;
+                    textStyleType: import("../../../brand-page").TextStyleType | undefined;
+                };
+                isModified: boolean;
+            };
+            heading1: {
+                type: import("../../../brand-page").TextStyleType;
+                title: string;
+                style: {
+                    fontFamily: string | undefined;
+                    fontSize: string | undefined;
+                    fontStyle: string | undefined;
+                    fontWeight: string | undefined;
+                    letterSpacing: string | undefined;
+                    lineHeight: string | undefined;
+                    textDecoration: string | undefined;
+                    textStyleType: import("../../../brand-page").TextStyleType | undefined;
+                };
+                isModified: boolean;
+            };
+            heading2: {
+                type: import("../../../brand-page").TextStyleType;
+                title: string;
+                style: {
+                    fontFamily: string | undefined;
+                    fontSize: string | undefined;
+                    fontStyle: string | undefined;
+                    fontWeight: string | undefined;
+                    letterSpacing: string | undefined;
+                    lineHeight: string | undefined;
+                    textDecoration: string | undefined;
+                    textStyleType: import("../../../brand-page").TextStyleType | undefined;
+                };
+                isModified: boolean;
+            };
+            heading3: {
+                type: import("../../../brand-page").TextStyleType;
+                title: string;
+                style: {
+                    fontFamily: string | undefined;
+                    fontSize: string | undefined;
+                    fontStyle: string | undefined;
+                    fontWeight: string | undefined;
+                    letterSpacing: string | undefined;
+                    lineHeight: string | undefined;
+                    textDecoration: string | undefined;
+                    textStyleType: import("../../../brand-page").TextStyleType | undefined;
+                };
+                isModified: boolean;
+            };
+            heading4: {
+                type: import("../../../brand-page").TextStyleType;
+                title: string;
+                style: {
+                    fontFamily: string | undefined;
+                    fontSize: string | undefined;
+                    fontStyle: string | undefined;
+                    fontWeight: string | undefined;
+                    letterSpacing: string | undefined;
+                    lineHeight: string | undefined;
+                    textDecoration: string | undefined;
+                    textStyleType: import("../../../brand-page").TextStyleType | undefined;
+                };
+                isModified: boolean;
+            };
+            heading5: {
+                type: import("../../../brand-page").TextStyleType;
+                title: string;
+                style: {
+                    fontFamily: string | undefined;
+                    fontSize: string | undefined;
+                    fontStyle: string | undefined;
+                    fontWeight: string | undefined;
+                    letterSpacing: string | undefined;
+                    lineHeight: string | undefined;
+                    textDecoration: string | undefined;
+                    textStyleType: import("../../../brand-page").TextStyleType | undefined;
+                };
+                isModified: boolean;
+            };
+            heading6: {
+                type: import("../../../brand-page").TextStyleType;
+                title: string;
+                style: {
+                    fontFamily: string | undefined;
+                    fontSize: string | undefined;
+                    fontStyle: string | undefined;
+                    fontWeight: string | undefined;
+                    letterSpacing: string | undefined;
+                    lineHeight: string | undefined;
+                    textDecoration: string | undefined;
+                    textStyleType: import("../../../brand-page").TextStyleType | undefined;
+                };
+                isModified: boolean;
+            };
+            paragraph1: {
+                type: import("../../../brand-page").TextStyleType;
+                title: string;
+                style: {
+                    fontFamily: string | undefined;
+                    fontSize: string | undefined;
+                    fontStyle: string | undefined;
+                    fontWeight: string | undefined;
+                    letterSpacing: string | undefined;
+                    lineHeight: string | undefined;
+                    textDecoration: string | undefined;
+                    textStyleType: import("../../../brand-page").TextStyleType | undefined;
+                };
+                isModified: boolean;
+            };
+            paragraph2: {
+                type: import("../../../brand-page").TextStyleType;
+                title: string;
+                style: {
+                    fontFamily: string | undefined;
+                    fontSize: string | undefined;
+                    fontStyle: string | undefined;
+                    fontWeight: string | undefined;
+                    letterSpacing: string | undefined;
+                    lineHeight: string | undefined;
+                    textDecoration: string | undefined;
+                    textStyleType: import("../../../brand-page").TextStyleType | undefined;
+                };
+                isModified: boolean;
+            };
+            paragraph3: {
+                type: import("../../../brand-page").TextStyleType;
+                title: string;
+                style: {
                     fontFamily: string | undefined;
                     fontSize: string | undefined;
                     fontStyle: string | undefined;
@@ -210,7 +358,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                 type: import("../../../brand-page").TextStyleType;
                 title: string;
                 style: {
-                    color: string | undefined;
                     fontFamily: string | undefined;
                     fontSize: string | undefined;
                     fontStyle: string | undefined;
@@ -226,7 +373,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                 type: import("../../../brand-page").TextStyleType;
                 title: string;
                 style: {
-                    color: string | undefined;
                     fontFamily: string | undefined;
                     fontSize: string | undefined;
                     fontStyle: string | undefined;
@@ -242,7 +388,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                 type: import("../../../brand-page").TextStyleType;
                 title: string;
                 style: {
-                    color: string | undefined;
                     fontFamily: string | undefined;
                     fontSize: string | undefined;
                     fontStyle: string | undefined;
@@ -262,7 +407,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     buttonShadowColor: import("vue").ComputedRef<string>;
     buttonSoftShadowColor: import("vue").ComputedRef<string>;
     selectedButtonStyleConfig: import("vue").ComputedRef<import("@brand-page-maker/models").ButtonStyleConfig | undefined>;
-    selectedTextFontFamily: import("vue").ComputedRef<"lato" | "roboto" | "notoSans" | "openSans" | "arvo" | "bebasNeue" | "ptSerif" | "oswald" | "inter" | "montserrat" | "raleway" | "anton" | "antonSc" | "quicksand" | "pacifico" | "bioRhyme" | "playfairDisplay" | "mulish" | "telex" | "pridi" | "hindMadurai" | "kanit" | "libreBaskerville" | "amiko" | "neuton" | "tenorSans" | "jacquesFrancois" | "varela" | "quattrocentoSans" | "workSans" | "titilliumWeb" | "amaticSc" | "poiretOne" | "shantellSans" | "dancingScript" | "tangerine" | "cinzel" | "jost" | "exo2" | "ebGaramond" | "ubuntu" | "cabin" | "josefinSans" | "lobsterTwo" | "sacramento" | "nunito" | "aboreto" | "afacad" | "aleo" | "abhayaLibre" | "caladea" | "rokkitt" | "rubik" | "frankRuhlLibre" | "spectral" | "abrilFatface" | "courgette" | "kiteOne" | "amarante" | "satisfy" | "lilitaOne" | "lobster" | "titanOne" | "cookie" | "bungee" | "poppins" | "staatliches" | "patuaOne" | "calistoga" | "suezOne" | "caprasimo" | "rubikMonoOne" | "silkscreen" | "alfaSlabOne" | "orelegaOne" | "audiowide" | "redRose" | "kalnia" | "imbue" | "climateCrisis" | "gluten" | "madimiOne" | "anta" | "trykker" | "moul" | "bevan" | "wendyOne" | "lexendDeca" | "vinaSans" | "chango" | "changaOne" | "protestGuerrilla" | "londrinaShadow" | "candal" | "borel" | "rockNRollOne" | "bungeeInline" | "rampartOne" | "manrope" | "yuseiMagic" | "patrickHandSC" | "farsan" | "handlee" | "lemonada" | "arsenal" | "bakbakOne" | "belleza" | "blackHanSans" | "bowlbyOne" | "brunoAceSC" | "castoroTitling" | "contrailOne" | "delaGothicOne" | "dotGothic16" | "fahkwang" | "francoisOne" | "gloock" | "graduate" | "jersey10" | "kavoon" | "kronaOne" | "notable" | "pavanam" | "phudu" | "poetsenOne" | "pollerOne" | "questrial" | "racingSansOne" | "rammettoOne" | "rubikGlitch" | "shrikhand" | "spicyRice" | "syncopate" | "urbanist" | "yesevaOne" | "zenDots" | "ballet" | "luxuriousScript" | "windSong" | "calSans" | "specialGothicExpandedOne" | "imperialScript" | "greatVibes" | "limelight" | "bodoniModaSc" | "zillaSlab" | "righteous" | "cherryBombOne" | "barlow" | "comfortaa" | "cormorant" | "msMadi" | "tektur" | "spaceGrotesk" | "leagueSpartan" | "cormorantGaramond" | "gwendolyn" | "playwriteOsterreich" | "sourceCodePro" | "commissioner" | "lora" | "sairaCondensed" | "fruktur" | "caudex" | "cascadiaCode" | "merriweather" | "unbounded" | "nataSans" | "museoModerno" | "geologica" | "tomorrow" | "fraunces" | "notoSerifDisplay" | "coiny" | "sriracha" | "redditSans" | "heptaSlab" | "parisienne" | "monteCarlo" | "georama" | "goldman" | "montaguSlab" | "ephesis" | "sigmar" | "knewave">;
     isAdminMaker: import("vue").ComputedRef<boolean>;
     brandPageType: import("vue").ComputedRef<"default" | "brandSite" | "brandContact">;
     showBrandCrowdLogo: import("vue").ComputedRef<boolean>;
@@ -316,9 +460,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         buttonIconColor(): string | undefined;
         buttonShadowColor(): string;
         buttonSoftShadowColor(): string;
-        defaultTextColor(): string | undefined;
         selectedButtonStyleConfig(): import("@brand-page-maker/models").ButtonStyleConfig | undefined;
-        selectedTextFontFamily(): import("../../../brand-page").FontFamilyKey;
     }, {
         initialise(options: {
             reset: boolean;
@@ -338,9 +480,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         _setSelectedButtonStyle(payload: {
             id: string;
         }): void;
-        _setTextFontFamily(payload: {
-            fontFamily: import("../../../brand-page").FontFamilyKey;
-        }): void;
         _setTextStyles(payload: Partial<import("../../../brand-page").TextStyles>): void;
         setAdminStyleOptionDefaultValues(): void;
         setTextStyleOption(payload: {
@@ -364,9 +503,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         setSelectedButtonStyle(payload: {
             id: string;
         }): void;
-        setTextFontFamily(payload: {
-            fontFamily: import("../../../brand-page").FontFamilyKey;
-        }): Promise<void>;
     }>;
     userStore: import("pinia").Store<"brandPageMakerUser", import("@brand-page-maker/stores").UserState, {}, {
         setUserState(payload: {
@@ -430,6 +566,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         setHideBranding(payload: {
             hideBranding: boolean;
         }): void;
+        setSaveContactButtonTextStyle(payload: {
+            buttonTextStyle: import("../../../brand-page").SaveContactOptions["buttonTextStyle"];
+        }): void;
         setSensitiveContent(payload: {
             sensitiveContent: string;
         }): void;
@@ -492,7 +631,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: import("../../../brand-page").BrandPageType;
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../../brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData: _shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData: _shopConfigData, isServerRenderOverride, isBlankSite, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("../../../brand-page").PageModel[];
             sections: import("../../page-settings/store").PageSettingsStateSections;
@@ -1000,6 +1139,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     filteredButtonStyleOptions(): ButtonStyleConfigOption[];
     brandName(): "Design.com" | "BrandCrowd";
     hideText(): any;
+    textStyleSizeOrderWarning(): string;
 }, {
     onColorPickerSelected(value: boolean): void;
     getButtonStyleConfigOptionTitle(option: ButtonStyleConfigOption): any;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.js

@@ -8,6 +8,7 @@ import { useUiBackgroundSettingsStore } from '../../background-settings/store';
 import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, } from '@brand-page-maker/stores';
 import { TRIGGER_TYPE, UPGRADE_CTA_LOCATIONS, useEventTracker, } from '@brand-page-maker/composables/useEventTracker';
 import { styleSettingsTr } from '@src/composables/useTranslate';
+import { hasTextStyleSizeOrderIssue } from '../text-style-size-order';
 import { WEBSITE_UPGRADE_CONTEXT_TYPES } from '@designcrowd/fe-shared-lib';
 export default defineComponent({
     setup() {
@@ -29,7 +30,6 @@ export default defineComponent({
             buttonShadowColor: computed(() => styleSettingsStore.buttonShadowColor),
             buttonSoftShadowColor: computed(() => styleSettingsStore.buttonSoftShadowColor),
             selectedButtonStyleConfig: computed(() => styleSettingsStore.selectedButtonStyleConfig),
-            selectedTextFontFamily: computed(() => styleSettingsStore.selectedTextFontFamily),
             isAdminMaker: computed(() => brandPageContainerStore.isAdminMaker),
             brandPageType: computed(() => brandPageMakerStore.brandPageType),
             showBrandCrowdLogo: computed(() => brandPageMakerStore.showBrandCrowdLogo),
@@ -86,6 +86,12 @@ export default defineComponent({
                 ? styleSettingsTr(`hideDesignLogo`)
                 : styleSettingsTr(`hideBrandCrowdLogo`);
         },
+        // The panel's subtitle, so the warning still shows while the panel is collapsed.
+        textStyleSizeOrderWarning() {
+            return hasTextStyleSizeOrderIssue(this.textStyles.textStyleOptions)
+                ? styleSettingsTr('sizeOrderWarning')
+                : '';
+        },
     },
     methods: {
         onColorPickerSelected(value) {