@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -0,0 +1,385 @@
+import { getSchema } from '@tiptap/core';
+import {
+  DOMParser as ProseMirrorDOMParser,
+  Node as ProseMirrorNode,
+  type Mark as ProseMirrorMark,
+} from '@tiptap/pm/model';
+import type { JSONContent } from '@tiptap/vue-3';
+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 };
+
+/**
+ * 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;
+
+// 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<number, ReturnType<typeof getSchema>>([
+  [rteSchemaGeneration(undefined), RTE_SCHEMA],
+]);
+
+const rteSchemaForVersion = (
+  schemaVersion?: number,
+): ReturnType<typeof getSchema> => {
+  const generation = rteSchemaGeneration(schemaVersion);
+  let schema = schemaByGeneration.get(generation);
+
+  if (!schema) {
+    schema = getSchema(getRteExtensions({ schemaVersion }));
+    schemaByGeneration.set(generation, schema);
+  }
+
+  return schema;
+};
+
+/**
+ * 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 const renderRteToHtml = (
+  value: RichTextValue | null | undefined,
+  options: { textDecorationClasses?: boolean } = {},
+): string => {
+  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: Node): 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: string,
+  parser: HtmlParser,
+  schemaVersion?: number,
+): JSONContent => {
+  const body = parser.parseFromString(`<body>${html}</body>`, 'text/html').body;
+  const dom = stripIndentationTextNodes(body);
+
+  return ProseMirrorDOMParser.fromSchema(rteSchemaForVersion(schemaVersion))
+    .parse(dom)
+    .toJSON();
+};
+
+let serverParserPromise: Promise<HtmlParser> | null = 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 (): Promise<HtmlParser> => {
+  if (typeof DOMParser !== 'undefined') return new DOMParser();
+
+  if (!serverParserPromise) {
+    const jsdomModuleId = ['js', 'dom'].join('');
+
+    serverParserPromise = import(/* @vite-ignore */ jsdomModuleId)
+      .then((mod) => {
+        const { JSDOM } = mod as {
+          JSDOM: new (html?: string) => {
+            window: { DOMParser: new () => HtmlParser };
+          };
+        };
+        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 = (): HtmlParser => {
+  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: RichTextValue | null | undefined,
+  parser?: HtmlParser,
+  schemaVersion?: number,
+): JSONContent | undefined => {
+  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: RichTextValue | null | undefined,
+  parser?: HtmlParser,
+  schemaVersion?: number,
+): JSONContent | undefined => {
+  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 = (): JSONContent =>
+  RTE_SCHEMA.topNodeType.createAndFill()!.toJSON() as JSONContent;
+
+/**
+ * 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: string,
+  textAlign?: string,
+  parser?: HtmlParser,
+): JSONContent => {
+  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: string,
+  styleMarks: readonly ProseMirrorMark[],
+  textAlign?: unknown,
+): JSONContent => {
+  const { paragraph, hardBreak } = RTE_SCHEMA.nodes;
+  const attrs = textAlign ? { textAlign } : null;
+
+  const inline: ProseMirrorNode[] = [];
+
+  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() as 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 const reflowRteDoc = (
+  templateDoc: JSONContent,
+  newText: string,
+): JSONContent => {
+  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: readonly ProseMirrorMark[] = [];
+    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/src/shared/rte-shape.util.ts

@@ -0,0 +1,29 @@
+import type { JSONContent } from '@tiptap/vue-3';
+
+/** Canonical discriminator for the JSON RTE model. */
+export const isTiptapDocument = (value: unknown): value is JSONContent =>
+  typeof value === 'object' &&
+  value !== null &&
+  (value as JSONContent).type === 'doc';
+
+/** A legacy inline-HTML RTE string, rather than arbitrary text containing angle brackets. */
+export const isRteHtmlString = (value: unknown): value is string =>
+  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: JSONContent): string => {
+  const parts: string[] = [];
+
+  const walk = (node: JSONContent): void => {
+    if (typeof node.text === 'string') parts.push(node.text);
+
+    node.content?.forEach(walk);
+  };
+
+  walk(doc);
+
+  return parts.join(' ').replace(/\s+/g, ' ').trim();
+};

package/src/shared/side-bar/store/side-bar-store.test.ts

@@ -1,6 +1,9 @@
 import { describe, test, expect, beforeEach } from 'vitest';
 import { createPinia, setActivePinia } from 'pinia';
-import { useUiSideBarStore } from './side-bar-store';
+import {
+  TEXT_STYLES_SETTINGS_SECTION,
+  useUiSideBarStore,
+} from './side-bar-store';
 import {
   PAGE_SETTINGS_SECTIONS,
   useUiPageSettingsStore,
@@ -122,3 +125,26 @@ describe('side-bar store — tab switches clear a leftover content-settings mode
     );
   });
 });
+
+describe('side-bar store — openTextStyles', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('openTextStyles opens the Style tab at the Text Styles section', () => {
+    const sideBarStore = useUiSideBarStore();
+
+    sideBarStore.setSelectedTabName({
+      tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+    });
+
+    sideBarStore.openTextStyles();
+
+    expect(sideBarStore.selectedTabName).toBe(
+      SIDE_BAR_TAB_NAMES.STYLE_SETTINGS,
+    );
+    expect(sideBarStore.selectedSettingsSection).toBe(
+      TEXT_STYLES_SETTINGS_SECTION,
+    );
+  });
+});

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

@@ -11,6 +11,9 @@ import {
 } 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 interface SideBarState {
   tabs: SideBarTab[];
   selectedTabName: string;
@@ -77,5 +80,13 @@ export const useUiSideBarStore = defineStore('uiSideBar', {
     setSelectedSettingsSection(payload: { sectionName?: string }) {
       this.selectedSettingsSection = payload.sectionName;
     },
+
+    // The section is set first: the Style tab mounts on the switch and scrolls to it.
+    openTextStyles(): void {
+      this.setSelectedSettingsSection({
+        sectionName: TEXT_STYLES_SETTINGS_SECTION,
+      });
+      this.setSelectedTabName({ tabName: SIDE_BAR_TAB_NAMES.STYLE_SETTINGS });
+    },
   },
 });

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

@@ -18,6 +18,7 @@ import {
   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({
@@ -47,9 +48,6 @@ export default defineComponent({
       selectedButtonStyleConfig: computed(
         () => styleSettingsStore.selectedButtonStyleConfig,
       ),
-      selectedTextFontFamily: computed(
-        () => styleSettingsStore.selectedTextFontFamily,
-      ),
       isAdminMaker: computed(() => brandPageContainerStore.isAdminMaker),
       brandPageType: computed(() => brandPageMakerStore.brandPageType),
       showBrandCrowdLogo: computed(
@@ -113,6 +111,12 @@ export default defineComponent({
         ? styleSettingsTr(`hideDesignLogo`)
         : styleSettingsTr(`hideBrandCrowdLogo`);
     },
+    // The panel's subtitle, so the warning still shows while the panel is collapsed.
+    textStyleSizeOrderWarning(): string {
+      return hasTextStyleSizeOrderIssue(this.textStyles.textStyleOptions)
+        ? styleSettingsTr('sizeOrderWarning')
+        : '';
+    },
   },
   methods: {
     onColorPickerSelected(value: boolean) {

package/src/shared/style-settings/components/StyleSettings.test.ts

@@ -0,0 +1,116 @@
+import { nextTick } from 'vue';
+import { readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import StyleSettings from './StyleSettings.vue';
+import { useUiStyleSettingsStore } from '../store';
+import { setLocaleAsync } from '@src/composables/useTranslate';
+import type { CanonicalTextStyleType } from '@brand-page';
+
+const WARNING =
+  "Some text sizes are out of order. A heading or paragraph shouldn't be larger than the one above it.";
+
+const mountStyleSettings = () =>
+  mount(StyleSettings, {
+    global: {
+      stubs: {
+        TextStyleOptionsSettingsWithState: {
+          template: '<div data-test-role-cards-stub />',
+        },
+        ColorPaletteSettingsWithState: true,
+        ColorField: true,
+      },
+    },
+  });
+
+const textStylesPanel = (wrapper: ReturnType<typeof mountStyleSettings>) =>
+  wrapper.findComponent({ ref: 'textStylesPanel' });
+
+const setRoleSize = (type: CanonicalTextStyleType, fontSize: string): void => {
+  const store = useUiStyleSettingsStore();
+
+  store.setTextStyleOption({
+    type,
+    style: { ...store.textStyles.textStyleOptions[type].style, fontSize },
+  });
+};
+
+describe('StyleSettings — text size order warning', () => {
+  beforeAll(async () => {
+    await setLocaleAsync('en-US');
+  });
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('no warning shows at the default role sizes', () => {
+    expect(textStylesPanel(mountStyleSettings()).text()).not.toContain(WARNING);
+  });
+
+  test('a heading larger than the one above it shows the warning under the panel title', () => {
+    // Heading 3 at 90px, above Heading 2's default 84px.
+    setRoleSize('heading3', '5.625em');
+
+    expect(textStylesPanel(mountStyleSettings()).props('subtitle')).toBe(
+      WARNING,
+    );
+  });
+
+  test('a paragraph larger than the one above it shows the same warning', () => {
+    // Paragraph 2 at 64px, above Paragraph 1's default 22px.
+    setRoleSize('paragraph2', '4em');
+
+    expect(textStylesPanel(mountStyleSettings()).props('subtitle')).toBe(
+      WARNING,
+    );
+  });
+
+  test('the warning stays visible while the panel is collapsed', async () => {
+    setRoleSize('heading3', '5.625em');
+
+    const panel = textStylesPanel(mountStyleSettings());
+
+    (panel.vm as unknown as { toggleCollapsed: () => void }).toggleCollapsed();
+    await nextTick();
+
+    expect(panel.find('[data-test-role-cards-stub]').exists()).toBe(false);
+    expect(panel.text()).toContain(WARNING);
+  });
+
+  // StyleSettings.vue boxes the warning with a selector on CollapsiblePanel's own markup.
+  test('the warning sits in the element the warning box styles', () => {
+    setRoleSize('heading3', '5.625em');
+
+    expect(
+      mountStyleSettings()
+        .find('.c-text-style-panel .tw-grow > div + div')
+        .text(),
+    ).toBe(WARNING);
+  });
+
+  test('the warning clears once the order is fixed', async () => {
+    setRoleSize('heading3', '5.625em');
+
+    const wrapper = mountStyleSettings();
+
+    setRoleSize('heading3', '3.1875em');
+    await nextTick();
+
+    expect(textStylesPanel(wrapper).text()).not.toContain(WARNING);
+  });
+
+  test('every maker locale has the warning text', () => {
+    const dir = join(__dirname, 'i18n');
+    const files = readdirSync(dir).filter((file) => file.endsWith('.json'));
+
+    expect(files).toHaveLength(7);
+
+    for (const file of files) {
+      const json = JSON.parse(readFileSync(join(dir, file), 'utf-8'));
+
+      expect(json.styleSettingsSection.sizeOrderWarning, file).toBeTruthy();
+    }
+  });
+});