@designcrowd/library.brand-page 6.2.11-builder-v2-1 → 6.2.12

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

@@ -0,0 +1,112 @@
+import type { JSONContent } from '@tiptap/vue-3';
+import { isTiptapDocument, getRteJsonPlainText } from './rte-shape.util';
+export { isTiptapDocument, getRteJsonPlainText };
+/**
+ * BP-5787 — the boundary plumbing for storing RTE as Tiptap JSON.
+ *
+ * An RTE field is either a legacy inline-HTML string (pre-migration, or a
+ * not-yet-migrated published site) or a Tiptap JSON document (post-migration).
+ * These helpers let every consumer treat the two uniformly:
+ *
+ *   - isTiptapDocument — the canonical discriminator (object with type 'doc').
+ *   - renderRteToHtml  — render either form to final HTML for display.
+ *   - toRteJson        — normalise either form to JSON for storage.
+ *
+ * The schema-driven core of both directions is Tiptap/ProseMirror, fed by the
+ * single-source-of-truth extension set (getRteExtensions) — so the mapping lives
+ * in the extensions' schema, not a hand-maintained copy that drifts:
+ *
+ *   - renderRteToHtml uses @tiptap/static-renderer (renderToHTMLString). It is
+ *     DOM-less, so it runs on the server (SSR/publish/preview), not just the
+ *     browser, and needs no Editor instance.
+ *   - toRteJson turns an HTML string into a DOM node with an INJECTED parser and
+ *     feeds it to ProseMirror's schema-driven DOMParser. The HTML→DOM step needs
+ *     a DOM parser; rather than read the global `window.DOMParser` (as Tiptap's
+ *     `generateJSON` does — unusable on a pure-node server and fragile across SSR
+ *     execution contexts), the parser is supplied by the caller: the native
+ *     `DOMParser` in the browser, a jsdom `DOMParser` *instance* on the server
+ *     (see resolveHtmlParser). No global is ever mutated, so the conversion is
+ *     fully isomorphic regardless of how the SSR host bundles/executes this code.
+ */
+export type RichTextValue = string | JSONContent;
+/**
+ * A `DOMParser`-compatible object: turns an HTML string into a Document whose
+ * `body` is a DOM node ProseMirror can parse. The browser's native `DOMParser`
+ * and jsdom's `DOMParser` both satisfy this, so the DOM dependency is injected
+ * rather than read from a global.
+ */
+export interface HtmlParser {
+    parseFromString(html: string, type: 'text/html'): Document;
+}
+/**
+ * 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 declare const renderRteToHtml: (value: RichTextValue | null | undefined, options?: {
+    textDecorationClasses?: boolean;
+}) => string;
+/**
+ * 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 declare const resolveHtmlParser: () => Promise<HtmlParser>;
+/**
+ * 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 declare const toRteJson: (value: RichTextValue | null | undefined, parser?: HtmlParser, schemaVersion?: number) => JSONContent | undefined;
+/**
+ * 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 declare const plainTextToRteJson: (value: RichTextValue | null | undefined, parser?: HtmlParser, schemaVersion?: number) => JSONContent | undefined;
+/**
+ * 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 declare const rteDoc: (text: string, textAlign?: string, parser?: HtmlParser) => JSONContent;
+/**
+ * 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 declare const reflowRteDoc: (templateDoc: JSONContent, newText: string) => JSONContent;

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

@@ -84,6 +84,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     isVariation: boolean;
                     isExcluded: boolean;
                 } | undefined;
+                bp_6136_v2_ai_builder?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
             };
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
@@ -159,6 +166,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     isVariation: boolean;
                     isExcluded: boolean;
                 } | undefined;
+                bp_6136_v2_ai_builder?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
             };
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
@@ -234,6 +248,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     isVariation: boolean;
                     isExcluded: boolean;
                 } | undefined;
+                bp_6136_v2_ai_builder?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
             };
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
@@ -360,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: {
@@ -370,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 });
+        },
     },
 });