@designcrowd/library.brand-page 6.1.1-json-prereq-4 → 6.1.1

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

@@ -1,162 +0,0 @@
-import type { Extensions } from '@tiptap/vue-3';
-import StarterKit from '@tiptap/starter-kit';
-import Underline from '@tiptap/extension-underline';
-import { TextStyle, FontSize, LineHeight } from '@tiptap/extension-text-style';
-import TextAlign from '@tiptap/extension-text-align';
-import ColorExtension from '@tiptap/extension-color';
-import Highlight from '@tiptap/extension-highlight';
-import Placeholder from '@tiptap/extension-placeholder';
-import Link from '@tiptap/extension-link';
-import { FontFamily } from './extensions/FontFamily';
-import { LetterSpacing } from './extensions/LetterSpacing';
-import { MaxLength } from './extensions/MaxLength';
-import { AutoLink } from './extensions/AutoLink';
-import { isHrefPageId } from './hyperlink';
-
-/**
- * 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.
- *  - `editing` — only the live editor carries the Placeholder + MaxLength plugins
- *    (neither affects serialised output; they are editing-time only).
- *
- * Link target/rel are NOT parameterised: they are a pure function of the href
- * applied in the Link mark's renderHTML (below), so every consumer — live
- * editor, static renderer, schema check — emits identical link markup.
- */
-export interface RteExtensionOptions {
-  /** Disable StarterKit nodes the editor doesn't use (lists, hr, code). */
-  restrictStarterKit?: boolean;
-  /** When present, add the live-editing-only plugins (Placeholder, MaxLength). */
-  editing?: {
-    placeholder?: string;
-    maxLength?: number;
-  };
-}
-
-export const getRteExtensions = (
-  options: RteExtensionOptions = {},
-): Extensions => {
-  const { restrictStarterKit = false, editing } = options;
-
-  const extensions: Extensions = [
-    // v3 StarterKit bundles Link + Underline; we register both separately (with
-    // custom Link config), so disable the bundled copies to avoid duplicate
-    // extension errors.
-    // trailingNode: false — v3 StarterKit adds a TrailingNode plugin (not in v2)
-    // that appends an empty paragraph after any non-paragraph trailing block.
-    // Disabled to keep editor/stored-content behaviour identical to v2 (BP-5787
-    // is backward-compat-first); revisit as a standalone UX change if wanted.
-    restrictStarterKit
-      ? StarterKit.configure({
-          link: false,
-          underline: false,
-          trailingNode: false,
-          bulletList: false,
-          orderedList: false,
-          listItem: false,
-          horizontalRule: false,
-          codeBlock: false,
-          code: false,
-        })
-      : StarterKit.configure({
-          link: false,
-          underline: false,
-          trailingNode: false,
-        }),
-    Underline,
-    // priority: 99 — render the textStyle <span> (which carries font-size) as the
-    // OUTERMOST inline mark, so decoration marks (<u>/<s>) nest INSIDE it and
-    // inherit the applied font-size. v3's extension-text-style defaults to
-    // priority 101, which flips this: <u>/<s> end up outside the font-size span
-    // and inherit only the base paragraph size. Since text-decoration thickness
-    // AND vertical position are computed from the decorating element's own font,
-    // that produced thin, mis-centred underline/strike on large text — a
-    // regression vs v2's serializer, which emitted the font-size span outermost
-    // (BP-5787, backward-compat-first).
-    TextStyle.extend({ priority: 99 }).configure({
-      mergeNestedSpanStyles: true,
-    }),
-    TextAlign.configure({
-      types: ['heading', 'paragraph'],
-    }),
-    FontFamily.configure({
-      types: ['textStyle'],
-    }),
-    // FontSize + LineHeight are now shipped natively by @tiptap/extension-text-style.
-    FontSize.configure({ types: ['textStyle'] }),
-    LetterSpacing,
-    LineHeight.configure({ types: ['textStyle'] }),
-    ColorExtension.configure({
-      types: ['textStyle'],
-    }),
-    Highlight.configure({
-      multicolor: true,
-    }),
-  ];
-
-  // Live-editing-only plugins sit between Highlight and Link (original order).
-  if (editing) {
-    extensions.push(
-      Placeholder.configure({ placeholder: editing.placeholder }),
-      MaxLength.configure({ maxLength: editing.maxLength }),
-    );
-  }
-
-  extensions.push(
-    Link.extend({
-      // External-link policy lives at the serialisation boundary: target/rel are
-      // a pure function of the href, applied whenever a link mark renders to <a>
-      // (live editor DOM + static renderer alike). They are neither stored on the
-      // mark nor the sanitiser's concern — the sanitiser validates href only
-      // (see rte-sanitize.util.ts). This is what the old, unsupported
-      // `HTMLAttributes: (attrs) => …` function was trying (and failing) to do:
-      // Tiptap types HTMLAttributes as a static object, so a function silently
-      // no-ops, which is why fresh links lost target/rel after the JSON migration.
-      renderHTML(props) {
-        const href = props.HTMLAttributes.href;
-        const isExternal =
-          typeof href === 'string' &&
-          (href.startsWith('http://') || href.startsWith('https://'));
-        const HTMLAttributes = {
-          ...props.HTMLAttributes,
-          target: isExternal ? '_blank' : null,
-          rel: isExternal ? 'noopener noreferrer' : null,
-        };
-
-        // Delegate to the base renderHTML so its XSS href-strip guard still runs.
-        // base Link always defines renderHTML, so the ?? branch is a defensive
-        // fallback only (never taken in practice); href is pre-validated by the
-        // sanitiser and isAllowedUri regardless.
-        return (
-          this.parent?.({ ...props, HTMLAttributes }) ?? [
-            'a',
-            HTMLAttributes,
-            0,
-          ]
-        );
-      },
-    }).configure({
-      openOnClick: false,
-      defaultProtocol: 'https',
-      autolink: true,
-      // Override Tiptap's built-in Link defaults ({ target: '_blank', rel:
-      // 'noopener noreferrer nofollow' }) with nulls: target/rel are NOT stored on
-      // the mark, they are derived from the href at render time (see renderHTML
-      // above). configure() deep-merges HTMLAttributes, so an empty {} would leave
-      // those built-in defaults in place and stamp them onto every link — hence
-      // the explicit nulls.
-      HTMLAttributes: { target: null, rel: null },
-      isAllowedUri: (url, ctx) => ctx.defaultValidate(url) || isHrefPageId(url),
-    }),
-    AutoLink,
-  );
-
-  return extensions;
-};

package/src/brand-page-maker/utils/__snapshots__/rte-render-parity.test.ts.snap

@@ -1,202 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`BP-5787 RTE render parity (golden master) > T1 — editor renders the complex fixture to the frozen HTML baseline > editor-normalized-html 1`] = `"<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: rgb(255, 224, 138); color: inherit;">highlight</mark> <span style="color: rgb(255, 0, 0);">literal hex</span> <a href="/about">internal link</a> <a target="_blank" rel="noopener noreferrer" href="https://example.com">external link</a></p><p style="text-align: right;">second paragraph, right-aligned</p>"`;
-
-exports[`BP-5787 RTE render parity (golden master) > T1 — render-from-JSON (DOM-less renderer) produces equivalent HTML > serializer-html 1`] = `"<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; color: inherit">highlight</mark> <span style="color: #FF0000">literal hex</span> <a href="/about">internal link</a> <a target="_blank" rel="noopener noreferrer" href="https://example.com">external link</a></p><p style="text-align: right">second paragraph, right-aligned</p>"`;
-
-exports[`BP-5787 RTE render parity (golden master) > T6 — freezes the RAW editor JSON (pre-sanitise; not the persisted form) > editor-json 1`] = `
-{
-  "content": [
-    {
-      "attrs": {
-        "level": 2,
-        "textAlign": "center",
-      },
-      "content": [
-        {
-          "marks": [
-            {
-              "attrs": {
-                "color": "var(--logo-text-color)",
-                "fontFamily": "",
-                "fontSize": "",
-                "letterSpacing": "",
-                "lineHeight": "",
-              },
-              "type": "textStyle",
-            },
-          ],
-          "text": "Themed heading",
-          "type": "text",
-        },
-      ],
-      "type": "heading",
-    },
-    {
-      "attrs": {
-        "textAlign": null,
-      },
-      "content": [
-        {
-          "marks": [
-            {
-              "type": "bold",
-            },
-          ],
-          "text": "bold",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "type": "italic",
-            },
-          ],
-          "text": "italic",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "type": "underline",
-            },
-          ],
-          "text": "underline",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "type": "strike",
-            },
-          ],
-          "text": "strike",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "attrs": {
-                "color": "",
-                "fontFamily": "Montserrat",
-                "fontSize": "1.5em",
-                "letterSpacing": "0.05em",
-                "lineHeight": "1.4",
-              },
-              "type": "textStyle",
-            },
-          ],
-          "text": "styled span",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "attrs": {
-                "color": "#ffe08a",
-              },
-              "type": "highlight",
-            },
-          ],
-          "text": "highlight",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "attrs": {
-                "color": "#FF0000",
-                "fontFamily": "",
-                "fontSize": "",
-                "letterSpacing": "",
-                "lineHeight": "",
-              },
-              "type": "textStyle",
-            },
-          ],
-          "text": "literal hex",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "attrs": {
-                "class": null,
-                "href": "/about",
-                "rel": null,
-                "target": "_self",
-                "title": null,
-              },
-              "type": "link",
-            },
-          ],
-          "text": "internal link",
-          "type": "text",
-        },
-        {
-          "text": " ",
-          "type": "text",
-        },
-        {
-          "marks": [
-            {
-              "attrs": {
-                "class": null,
-                "href": "https://example.com",
-                "rel": "noopener noreferrer nofollow",
-                "target": "_blank",
-                "title": null,
-              },
-              "type": "link",
-            },
-          ],
-          "text": "external link",
-          "type": "text",
-        },
-      ],
-      "type": "paragraph",
-    },
-    {
-      "attrs": {
-        "textAlign": "right",
-      },
-      "content": [
-        {
-          "text": "second paragraph, right-aligned",
-          "type": "text",
-        },
-      ],
-      "type": "paragraph",
-    },
-  ],
-  "type": "doc",
-}
-`;