@designcrowd/library.brand-page 6.0.25-json-prereq-2 → 6.0.25

package/src/metadata-builder/sanitizers/rte-schema-check.ts

@@ -1,6 +1,16 @@
-import { getSchema } from '@tiptap/core';
-import type { Schema } from '@tiptap/pm/model';
-import { getRteExtensions } from '../../brand-page-maker/composables/rich-text-editor/getRteExtensions';
+import { Editor } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextStyle from '@tiptap/extension-text-style';
+import TextAlign from '@tiptap/extension-text-align';
+import FontFamily from '@tiptap/extension-font-family';
+import ColorExtension from '@tiptap/extension-color';
+import Highlight from '@tiptap/extension-highlight';
+import Link from '@tiptap/extension-link';
+import { FontSize } from '../../brand-page-maker/composables/rich-text-editor/extensions/FontSize';
+import { LetterSpacing } from '../../brand-page-maker/composables/rich-text-editor/extensions/LetterSpacing';
+import { LineHeight } from '../../brand-page-maker/composables/rich-text-editor/extensions/LineHeight';
+import { AutoLink } from '../../brand-page-maker/composables/rich-text-editor/extensions/AutoLink';
 import { isTiptapDocument } from '../parsers/section-tool-arguments';
 import {
   rteStyleCheck,
@@ -9,30 +19,45 @@ import {
 } from './section-args-validator';
 
 /**
- * The ProseMirror schema built from the SAME extension set the editor and
- * renderer use (`getRteExtensions`), so validation matches real editor output.
- * `getSchema` is DOM-less (no Editor instance) and the schema is pure, so it is
- * built once and cached.
- *
- * We import `getRteExtensions` (a leaf module — @tiptap + prosemirror only), not
- * the maker composable (`useExternalRichTextEditor`), which would pull in the
- * AI executor → section-builders → section-rules graph and re-enter this file
- * before its exports are bound.
+ * Constructs a headless Tiptap Editor with the same extension set as
+ * `useExternalRichTextEditor` in the maker. We import the Tiptap extension
+ * files directly (they are leaf modules) instead of going through the maker
+ * composable, which would pull in the AI executor → section-builders →
+ * section-rules graph and re-enter this file before its exports are bound.
  */
-let cachedSchema: Schema | undefined;
-
-const getRteSchema = (): Schema =>
-  (cachedSchema ??= getSchema(getRteExtensions({ includeLinkRel: true })));
+const buildHeadlessEditor = (): Editor =>
+  new Editor({
+    editable: false,
+    extensions: [
+      StarterKit,
+      Underline,
+      TextStyle.configure({ mergeNestedSpanStyles: true }),
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+      FontFamily.configure({ types: ['textStyle'] }),
+      FontSize,
+      LetterSpacing,
+      LineHeight,
+      ColorExtension.configure({ types: ['textStyle'] }),
+      Highlight.configure({ multicolor: true }),
+      Link.configure({
+        openOnClick: false,
+        defaultProtocol: 'https',
+        autolink: true,
+      }),
+      AutoLink,
+    ],
+  });
 
 /**
- * Validates a Tiptap doc against the real ProseMirror schema
- * (`schema.nodeFromJSON`). Catches malformed AI input — stray non-node children
- * in `content`, unknown node types, malformed attrs — before the builder runs
- * and the renderer's silent `setContent` drops the doc to `<p></p>` (BP-5669).
+ * Validates a Tiptap doc against the headless editor's real ProseMirror
+ * schema (`schema.nodeFromJSON`). Catches malformed AI input — stray
+ * non-node children in `content`, unknown node types, malformed attrs —
+ * before the builder runs and the renderer's silent `setContent` drops
+ * the doc to `<p></p>` (BP-5669).
  *
- * Returns the field-prefixed error string so the AI's tool-call retry loop reads
- * it via `BuilderResult.errors` → `tool_result.errorMessage` and re-emits a
- * corrected payload.
+ * Returns the field-prefixed error string so the AI's tool-call retry
+ * loop reads it via `BuilderResult.errors` → `tool_result.errorMessage`
+ * and re-emits a corrected payload.
  */
 export const rteSchemaCheck =
   (field: string): SectionCheck =>
@@ -41,14 +66,18 @@ export const rteSchemaCheck =
 
     if (!isTiptapDocument(value)) return null;
 
+    const editor = buildHeadlessEditor();
+
     try {
-      getRteSchema().nodeFromJSON(value);
+      editor.schema.nodeFromJSON(value);
 
       return null;
     } catch (err) {
       const detail = err instanceof Error ? err.message : String(err);
 
       return `"${field}" is not valid Tiptap JSON: ${detail}`;
+    } finally {
+      editor.destroy();
     }
   };
 

package/src/shared/content-settings/components/GenericTextInput.mixin.ts

@@ -175,23 +175,7 @@ export default defineComponent({
     },
   },
   watch: {
-    value(newVal: string | undefined, oldVal: string | undefined) {
-      // BP-5787: RTE values are Tiptap JSON objects. The parent (TextItemsField)
-      // re-clones its items array (cloneDeep) on ANY change — including a sibling
-      // field's style sync — yielding a NEW object reference with identical text
-      // content. For objects Vue fires this watcher on reference change, so that
-      // spurious re-clone would overwrite `_value` and clobber an in-flight edit
-      // (a mark applied but not yet debounced to the store), silently dropping
-      // the user's formatting. Strings never hit this (same content = same
-      // reference = no fire), so mirror that: ignore re-clones whose content is
-      // unchanged from the previous prop value.
-      if (
-        this.showRichTextEditor &&
-        JSON.stringify(newVal) === JSON.stringify(oldVal)
-      ) {
-        return;
-      }
-
+    value(newVal: string | undefined) {
       this._value = newVal;
 
       if (this.showRichTextEditor) {

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.ts

@@ -21,9 +21,6 @@ import {
   replaceTextInRTE,
   RTE_ALLOWED_SECTION_TYPES,
   isRTEManagedStyleField,
-  isTiptapDocument,
-  renderRteToHtml,
-  toRteJson,
 } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '@shared/content-settings/utils';
 import { useUiLogoSettingsStore } from '../../../logo-settings/store';
@@ -330,20 +327,10 @@ export default defineComponent({
       this.isToggled = isToggled;
     },
     onUseGeneratedText(generatedText: string) {
-      let formattedText: unknown = generatedText;
+      let formattedText = generatedText;
 
-      // BP-5787: preserve the field's formatting when dropping in AI text.
-      // replaceTextInRTE is HTML-based, so JSON is rendered/parsed around it
-      // (cold AI path, shared editor); string fields use it directly.
-      if (this.showRichTextEditor) {
-        if (isTiptapDocument(this.value)) {
-          formattedText =
-            toRteJson(
-              replaceTextInRTE(renderRteToHtml(this.value), generatedText),
-            ) ?? generatedText;
-        } else if (typeof this.value === 'string') {
-          formattedText = replaceTextInRTE(this.value, generatedText);
-        }
+      if (this.showRichTextEditor && typeof this.value === 'string') {
+        formattedText = replaceTextInRTE(this.value, generatedText);
       }
 
       this.contentSettingsStore.updateItemValue({

package/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.mixin.ts

@@ -4,7 +4,6 @@ import type {
   ColorReplacement,
   Content,
   LogoTheme,
-  RichTextValue,
   TestimonialItems,
 } from '@brand-page';
 import {
@@ -18,7 +17,7 @@ import debounce from 'lodash.debounce';
 import type { UpdateItemValuePayload } from '../../models';
 import cloneDeep from 'lodash.clonedeep';
 import { useSnapshotStore } from '@brand-page-maker/stores';
-import { getPlainTextFromRTE, getRteTextLength } from '@brand-page-maker/utils';
+import { getPlainTextFromRTE } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '../../utils';
 import { decodeHtmlEntities } from '@brand-page/utils';
 import { ESCAPED_NEWLINE_CHARACTER } from '../../../../constants/ui';
@@ -92,10 +91,8 @@ export default defineComponent({
   created() {
     this.options = cloneDeep(this.value);
 
-    // BP-5787: testimonials may be Tiptap JSON (migrated legacy content), so
-    // read visible text via getPlainTextFromRTE rather than `.trim()` on a doc.
     this.isEmpty = this.options.map(
-      (option) => getPlainTextFromRTE(option.testimonials).length === 0,
+      (option) => option.testimonials.trim().length === 0,
     );
 
     if (!this.changeDebounce) {
@@ -209,17 +206,11 @@ export default defineComponent({
       this.options[index][payload.name] = payload.value;
       this.emitChange();
     },
-    getItemTextPreview(text: RichTextValue): string {
-      // BP-5787: a JSON doc has no `.replace` — take its visible text first.
-      const value = typeof text === 'string' ? text : getPlainTextFromRTE(text);
-
+    getItemTextPreview(text: string): string {
       return decodeHtmlEntities(
-        value.replace(new RegExp(ESCAPED_NEWLINE_CHARACTER, 'g'), ' '),
+        text.replace(new RegExp(ESCAPED_NEWLINE_CHARACTER, 'g'), ' '),
       );
     },
-    rteTextLength(value: RichTextValue): number {
-      return getRteTextLength(value);
-    },
     getPlainTextValue(index: number): string {
       const text = this.options[index]?.testimonials || '';
       const plainText = getPlainTextFromRTE(text);

package/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.vue

@@ -26,8 +26,7 @@
           :error="
             isEmpty[option.index] ||
             (options[option.index].testimonials &&
-              rteTextLength(options[option.index].testimonials) >=
-                maxTestimonialLength)
+              options[option.index].testimonials.length >= maxTestimonialLength)
           "
           :resize="false"
           class="tw-w-full"
@@ -43,8 +42,7 @@
         <p
           v-else-if="
             options[option.index].testimonials &&
-            rteTextLength(options[option.index].testimonials) >=
-              maxTestimonialLength
+            options[option.index].testimonials.length >= maxTestimonialLength
           "
           class="tw-text-error-500 tw-text-sm"
         >
@@ -129,7 +127,7 @@
           v-if="
             options[option.index] &&
             options[option.index].name &&
-            rteTextLength(options[option.index].name) >= maxTitleLength
+            options[option.index].name.length >= maxTitleLength
           "
           class="tw-text-error-500 tw-text-sm"
         >
@@ -160,7 +158,7 @@
           v-if="
             options[option.index] &&
             options[option.index].position &&
-            rteTextLength(options[option.index].position) >= maxTitleLength
+            options[option.index].position.length >= maxTitleLength
           "
           class="tw-text-error-500 tw-text-sm"
         >

package/src/shared/content-settings/components/text-image-field/TextImageField.vue

@@ -97,10 +97,10 @@
           :attrs="{
             'data-test-tag': 'image-title-text-input',
           }"
-          :error="rteTextLength(options[option.index].title) >= titleLength"
+          :error="options[option.index].title.length >= titleLength"
         />
         <p
-          v-if="rteTextLength(options[option.index].title) >= titleLength"
+          v-if="options[option.index].title.length >= titleLength"
           class="tw-text-error-500 tw-text-sm tw-mt-2"
         >
           {{ maxLengthError }}
@@ -134,9 +134,7 @@
           :attrs="{
             'data-test-tag': 'image-description-text-input',
           }"
-          :error="
-            rteTextLength(options[option.index].paragraph) >= descriptionLength
-          "
+          :error="options[option.index].paragraph.length >= descriptionLength"
           @update:model-value="onTextAreaTextChange($event, option.index)"
         />
         <PersonalisationOverrideField
@@ -313,7 +311,6 @@ import debounce from 'lodash.debounce';
 import type { UpdateItemValuePayload } from '../../models';
 import cloneDeep from 'lodash.clonedeep';
 import { isURL } from '../../../../utils/validator.util';
-import { getRteTextLength as rteTextLength } from '@brand-page-maker/utils';
 
 const DEBOUNCE_IN_MS = 250;
 

package/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.ts

@@ -3,7 +3,6 @@ import type { PropType } from 'vue';
 import type {
   Content,
   LogoTheme,
-  RichTextValue,
   TextItem,
   TextStyleDeclaration,
 } from '@brand-page/models';
@@ -20,7 +19,7 @@ import type { UpdateItemValuePayload } from '../../models';
 import cloneDeep from 'lodash.clonedeep';
 import { decodeHtmlEntities, escapeContentText } from '@brand-page/utils';
 import { useSnapshotStore } from '@brand-page-maker/stores';
-import { getPlainTextFromRTE, getRteTextLength } from '@brand-page-maker/utils';
+import { getPlainTextFromRTE } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '../../utils';
 
 const DEBOUNCE_IN_MS = 250;
@@ -235,10 +234,6 @@ export default defineComponent({
       this.emitChange();
     },
 
-    rteTextLength(value: RichTextValue): number {
-      return getRteTextLength(value);
-    },
-
     getPlainTextValue(index: number): string {
       const text = this.options[index]?.text || '';
       const plainText = getPlainTextFromRTE(text);

package/src/shared/content-settings/components/text-items-field/TextItemsField.vue

@@ -32,7 +32,7 @@
           size="sm"
           :error="
             isEmpty[option.index] ||
-            rteTextLength(options[option.index].text) >= maxTextLength
+            options[option.index].text.length >= maxTextLength
           "
           :resize="false"
           class="tw-w-full"

package/src/utils/minify-brand-page-metadata.ts

@@ -10,7 +10,7 @@ import {
 } from '../brand-page/models';
 import type { Content, ContentType } from '../brand-page/models/content.model';
 import type { TextStyleDeclaration } from '../brand-page/models/styles.model';
-import { hasRTEContent, isTiptapDocument } from '../brand-page-maker/utils';
+import { hasRTEContent } from '../brand-page-maker/utils';
 import { useExternalRichTextEditor } from '../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import type { Editor, JSONContent } from '@tiptap/vue-3';
 import {
@@ -106,9 +106,6 @@ const convertText = (
   value: unknown,
   editor: Editor,
 ): RichTextValue | undefined => {
-  // Already Tiptap JSON (BP-5787 storage) — keep as-is.
-  if (isTiptapDocument(value)) return value;
-
   if (typeof value !== 'string' || !value) return undefined;
 
   if (hasRTEContent(value)) {

package/lib/src/brand-page/utils/migration/migration-20.d.ts

@@ -1,2 +0,0 @@
-import type { MigrationData } from '../migration.util';
-export declare const migration20: (migrationResult: MigrationData) => Promise<MigrationData>;

package/lib/src/brand-page/utils/migration/migration-20.js

@@ -1,111 +0,0 @@
-import { hasRTEContent, toRteJson } from '../../../brand-page-maker/utils';
-/**
- * BP-5787 — migrate existing inline-HTML RTE content to Tiptap JSON.
- *
- * The editor emits, and the renderer reads, Tiptap JSON. Existing
- * published/saved sites still hold RTE fields as HTML strings. This converts
- * them on load, in EVERY environment:
- *   - maker (browser): the loaded model is JSON, so the next save persists JSON.
- *   - web-renderer (SSR / server API routes): converted on read using a jsdom
- *     window (see below), so old sites are normalised without a re-save and
- *     downstream code can treat RTE as JSON.
- *
- * This is a one-time, versioned migration (runAlways is NOT set): legacy sites
- * are at model version < 20 and convert on first load in any environment; once
- * `v` is stamped to 20 the conversion is skipped. This is only safe because the
- * AI section builders now emit Tiptap JSON directly (they no longer write HTML),
- * so there is no recurring post-load source of HTML to normalise.
- *
- * Scope: only HTML-RTE strings (hasRTEContent) are converted. Plain strings,
- * numbers, and already-JSON docs are left untouched, so the migration is
- * idempotent (re-running on JSON content is a no-op — non-string values are
- * skipped). Nested RTE inside item arrays (textItems, testimonials, images…)
- * is handled by recursing into arrays; style objects are intentionally not
- * descended into (they never hold RTE content).
- */
-const convertRteStringsToJson = (value) => {
-    if (Array.isArray(value)) {
-        value.forEach((item) => convertRteStringsToJson(item));
-        return;
-    }
-    if (!value || typeof value !== 'object')
-        return;
-    const record = value;
-    Object.keys(record).forEach((key) => {
-        const field = record[key];
-        if (typeof field === 'string' && hasRTEContent(field)) {
-            const json = toRteJson(field);
-            if (json)
-                record[key] = json;
-        }
-        else if (Array.isArray(field)) {
-            convertRteStringsToJson(field);
-        }
-    });
-};
-const convertModel = (brandPageModel) => {
-    for (const page of brandPageModel.pages) {
-        for (const content of page.contents) {
-            convertRteStringsToJson(content);
-        }
-    }
-};
-let serverWindowPromise = null;
-const getServerWindow = () => {
-    if (!serverWindowPromise) {
-        // The specifier is assembled at runtime rather than written as the string
-        // literal "jsdom", so no bundler (Rollup/Vite in the library build, and any
-        // downstream browser consumer — BrandCrowd.Nuxt, web-renderer, …) can
-        // statically follow it and try to bundle jsdom → cssstyle, whose generated
-        // code breaks Rollup's CommonJS parser. The library stays self-contained
-        // (it still loads its own jsdom at runtime on the server) while never
-        // leaking jsdom into a browser bundle. `@vite-ignore` silences the
-        // "cannot be analyzed" warning the non-literal specifier would otherwise
-        // trigger. At Node runtime this resolves the real jsdom from node_modules.
-        const jsdomModuleId = ['js', 'dom'].join('');
-        serverWindowPromise = import(/* @vite-ignore */ jsdomModuleId)
-            .then(({ JSDOM }) => new JSDOM('').window)
-            .catch((error) => {
-            // Don't cache the failure — let a later migration retry the import.
-            serverWindowPromise = null;
-            throw error;
-        });
-    }
-    return serverWindowPromise;
-};
-export const migration20 = async (migrationResult) => {
-    const { brandPageModel } = migrationResult;
-    // Browser / jsdom test: a DOM is already present — convert directly.
-    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
-        convertModel(brandPageModel);
-        return migrationResult;
-    }
-    // Pure-node SSR: install a memoised jsdom window as the global for the duration
-    // of the conversion pass, then restore. The pass is fully synchronous (no await
-    // between install and restore), so in Node's single thread no concurrent request
-    // can observe the temporary globals.
-    const serverWindow = await getServerWindow();
-    const globals = globalThis;
-    // Track whether the globals existed so we restore exactly — deleting keys we
-    // added rather than leaving `window: undefined` own-properties behind.
-    const hadWindow = 'window' in globals;
-    const hadDocument = 'document' in globals;
-    const prevWindow = globals.window;
-    const prevDocument = globals.document;
-    globals.window = serverWindow;
-    globals.document = serverWindow.document;
-    try {
-        convertModel(brandPageModel);
-    }
-    finally {
-        if (hadWindow)
-            globals.window = prevWindow;
-        else
-            delete globals.window;
-        if (hadDocument)
-            globals.document = prevDocument;
-        else
-            delete globals.document;
-    }
-    return migrationResult;
-};

package/lib/src/brand-page-maker/__fixtures__/complex-rte.fixture.d.ts

@@ -1,22 +0,0 @@
-/**
- * BP-5787 — golden-master fixture for the RTE HTML→JSON migration.
- *
- * A single rich-text value that exercises every mark/node the editor can emit,
- * so one snapshot guards the whole serialisation surface. Captured as a baseline
- * on the current HTML pipeline; after the migration the JSON pipeline must
- * reproduce byte-identical rendered output (see rte-render-parity.test.ts).
- *
- * Coverage:
- *  - block nodes: heading (h2), paragraph, text-align (center / right)
- *  - inline marks: bold, italic, underline, strike
- *  - textStyle attrs: fontFamily, fontSize (em), letterSpacing (em), lineHeight (unitless)
- *  - colour: theme TOKEN ref (var(--logo-text-color)) AND a literal hex (#FF0000)
- *  - highlight (background colour via <mark>)
- *  - links: internal (target=_self) and external (target=_blank rel=noopener)
- */
-export declare const COMPLEX_RTE_HTML = "<h2 style=\"text-align: center\"><span style=\"color: var(--logo-text-color)\">Themed heading</span></h2><p><strong>bold</strong> <em>italic</em> <u>underline</u> <s>strike</s> <span style=\"font-family: Montserrat; font-size: 1.5em; letter-spacing: 0.05em; line-height: 1.4\">styled span</span> <mark data-color=\"#ffe08a\" style=\"background-color: #ffe08a\">highlight</mark> <span style=\"color: #FF0000\">literal hex</span> <a target=\"_self\" href=\"/about\">internal link</a> <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://example.com\">external link</a></p><p style=\"text-align: right\">second paragraph, right-aligned</p>";
-/**
- * The theme-token CSS variable that MUST survive the HTML→JSON round-trip
- * (BP-5787 stores token refs instead of flattening them to rgb()).
- */
-export declare const THEME_TOKEN_REF = "var(--logo-text-color)";

package/lib/src/brand-page-maker/__fixtures__/complex-rte.fixture.js

@@ -1,22 +0,0 @@
-/**
- * BP-5787 — golden-master fixture for the RTE HTML→JSON migration.
- *
- * A single rich-text value that exercises every mark/node the editor can emit,
- * so one snapshot guards the whole serialisation surface. Captured as a baseline
- * on the current HTML pipeline; after the migration the JSON pipeline must
- * reproduce byte-identical rendered output (see rte-render-parity.test.ts).
- *
- * Coverage:
- *  - block nodes: heading (h2), paragraph, text-align (center / right)
- *  - inline marks: bold, italic, underline, strike
- *  - textStyle attrs: fontFamily, fontSize (em), letterSpacing (em), lineHeight (unitless)
- *  - colour: theme TOKEN ref (var(--logo-text-color)) AND a literal hex (#FF0000)
- *  - highlight (background colour via <mark>)
- *  - links: internal (target=_self) and external (target=_blank rel=noopener)
- */
-export const COMPLEX_RTE_HTML = `<h2 style="text-align: center"><span style="color: var(--logo-text-color)">Themed heading</span></h2><p><strong>bold</strong> <em>italic</em> <u>underline</u> <s>strike</s> <span style="font-family: Montserrat; font-size: 1.5em; letter-spacing: 0.05em; line-height: 1.4">styled span</span> <mark data-color="#ffe08a" style="background-color: #ffe08a">highlight</mark> <span style="color: #FF0000">literal hex</span> <a target="_self" href="/about">internal link</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://example.com">external link</a></p><p style="text-align: right">second paragraph, right-aligned</p>`;
-/**
- * The theme-token CSS variable that MUST survive the HTML→JSON round-trip
- * (BP-5787 stores token refs instead of flattening them to rgb()).
- */
-export const THEME_TOKEN_REF = 'var(--logo-text-color)';

package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.d.ts

@@ -1,14 +0,0 @@
-/**
- * BP-5787 — font-family with quote-stripping parse.
- *
- * The stock extension stores whatever `element.style.fontFamily` returns. For
- * multi-word families (e.g. "Open Sans", "Playwrite AU") the browser quotes the
- * value, so parsing HTML — pasting RTE-styled text between editors, or the
- * HTML→JSON migration — yields a value that still contains the quote chars
- * (`"Open Sans"`). That value then (a) no longer matches the font list and,
- * worse, (b) is dropped by the native RTE sanitiser (`sanitizeRteJson`), whose
- * `isSafeCssValue` rejects any value containing `"` `'` `;` — so the font is
- * silently lost. Mirror the FontSize/LetterSpacing extensions and strip the
- * quotes on parse so the stored value is always the bare family name.
- */
-export declare const FontFamily: import("@tiptap/core").Extension<import("@tiptap/extension-text-style").FontFamilyOptions, any>;

package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.js

@@ -1,39 +0,0 @@
-import TiptapFontFamily from '@tiptap/extension-font-family';
-/**
- * BP-5787 — font-family with quote-stripping parse.
- *
- * The stock extension stores whatever `element.style.fontFamily` returns. For
- * multi-word families (e.g. "Open Sans", "Playwrite AU") the browser quotes the
- * value, so parsing HTML — pasting RTE-styled text between editors, or the
- * HTML→JSON migration — yields a value that still contains the quote chars
- * (`"Open Sans"`). That value then (a) no longer matches the font list and,
- * worse, (b) is dropped by the native RTE sanitiser (`sanitizeRteJson`), whose
- * `isSafeCssValue` rejects any value containing `"` `'` `;` — so the font is
- * silently lost. Mirror the FontSize/LetterSpacing extensions and strip the
- * quotes on parse so the stored value is always the bare family name.
- */
-export const FontFamily = TiptapFontFamily.extend({
-    addGlobalAttributes() {
-        return [
-            {
-                types: this.options.types,
-                attributes: {
-                    fontFamily: {
-                        default: null,
-                        // Strip quotes only — keep '' for an absent value so the stored
-                        // JSON shape matches the other textStyle attrs (FontSize etc.).
-                        parseHTML: (element) => element.style.fontFamily?.replace(/['"]+/g, ''),
-                        renderHTML: (attributes) => {
-                            if (!attributes.fontFamily) {
-                                return {};
-                            }
-                            return {
-                                style: `font-family: ${attributes.fontFamily}`,
-                            };
-                        },
-                    },
-                },
-            },
-        ];
-    },
-});

package/lib/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.d.ts

@@ -1,28 +0,0 @@
-import type { Extensions } from '@tiptap/vue-3';
-/**
- * Single source of truth for the Tiptap extension set (BP-5787).
- *
- * The live editor, the headless serialiser (useExternalRichTextEditor), and
- * the upcoming render-from-JSON path must all use the SAME extensions, or
- * rendered output drifts from what the user authored. This factory removes the
- * previous duplication while preserving each consumer's exact configuration.
- *
- * Known, intentional differences are parameterised:
- *  - `restrictStarterKit` — the live editor disables list/hr/code nodes.
- *  - `includeLinkRel` — the headless/render path emits rel="noopener noreferrer";
- *    the live editing surface does not.
- *  - `editing` — only the live editor carries the Placeholder + MaxLength plugins
- *    (neither affects serialised output; they are editing-time only).
- */
-export interface RteExtensionOptions {
-    /** Disable StarterKit nodes the editor doesn't use (lists, hr, code). */
-    restrictStarterKit?: boolean;
-    /** Emit rel="noopener noreferrer" on link HTMLAttributes (render path). */
-    includeLinkRel?: boolean;
-    /** When present, add the live-editing-only plugins (Placeholder, MaxLength). */
-    editing?: {
-        placeholder?: string;
-        maxLength?: number;
-    };
-}
-export declare const getRteExtensions: (options?: RteExtensionOptions) => Extensions;