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

package/src/brand-page/utils/vcard.util.ts

@@ -235,9 +235,11 @@ const addProfileInfo = (
   profile: ProfileViewModel,
   vcardLines: string[],
 ): void => {
-  const name = sanitizeForVCard(profile.name || '');
-  const title = sanitizeForVCard(profile.title || '');
-  const description = sanitizeForVCard(profile.description || '');
+  const name = sanitizeForVCard(getPlainTextFromRTE(profile.name) || '');
+  const title = sanitizeForVCard(getPlainTextFromRTE(profile.title) || '');
+  const description = sanitizeForVCard(
+    getPlainTextFromRTE(profile.description) || '',
+  );
 
   if (name) {
     const nameParts = name.trim().split(/\s+/);
@@ -316,7 +318,7 @@ export const saveContact = (brandPageData: {
 }): void => {
   const vcard = generateVCard(brandPageData);
   const profile = findProfileContent(brandPageData);
-  const filename = generateVCardFilename(profile?.name);
+  const filename = generateVCardFilename(getPlainTextFromRTE(profile?.name));
 
   downloadVCard(vcard, filename);
 };

package/src/brand-page/utils/view-model.pageid-rte.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest';
+import { resolvePageIdsInRteJson } from './view-model.util';
+import type { NavViewModel } from '../view-models';
+
+/**
+ * BP-5847 — internal RTE hyperlinks are stored as `href="pageid:<id>"`. On the
+ * published site these must resolve to the page's relative path. The string
+ * (legacy HTML) path already did this; once RTE moved to Tiptap JSON the link
+ * marks were skipped, so links rendered as raw `pageid:` and didn't navigate.
+ */
+describe('resolvePageIdsInRteJson (BP-5847)', () => {
+  const nav: NavViewModel = {
+    navItems: [
+      {
+        pageId: 'home-id',
+        slug: 'home',
+        displayName: 'Home',
+        routeName: 'home',
+        routeParams: { slug: 'mysite' },
+        isRoot: true,
+        isHidden: false,
+        relativePath: '',
+        nestedNavItems: [],
+      },
+      {
+        pageId: 'about-id',
+        slug: 'about',
+        displayName: 'About',
+        routeName: 'about',
+        routeParams: { slug: 'mysite' },
+        isRoot: false,
+        isHidden: false,
+        relativePath: 'about',
+        nestedNavItems: [],
+      },
+    ],
+  };
+
+  const options = { brandPageSlug: 'mysite' } as any;
+
+  const docWithLink = (href: string) => ({
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text: 'link',
+            marks: [{ type: 'link', attrs: { href, target: '_blank' } }],
+          },
+        ],
+      },
+    ],
+  });
+
+  const linkHref = (doc: any) => doc.content[0].content[0].marks[0].attrs.href;
+
+  it('resolves a pageid link to a sub-page relative path', () => {
+    const out = resolvePageIdsInRteJson(
+      docWithLink('pageid:about-id'),
+      nav,
+      options,
+    );
+
+    expect(linkHref(out)).toBe('/mysite/about');
+  });
+
+  it('resolves a root pageid link to the site root', () => {
+    const out = resolvePageIdsInRteJson(
+      docWithLink('pageid:home-id'),
+      nav,
+      options,
+    );
+
+    expect(linkHref(out)).toBe('/mysite');
+  });
+
+  it('falls back to root when the pageid cannot be matched', () => {
+    const out = resolvePageIdsInRteJson(
+      docWithLink('pageid:missing-id'),
+      nav,
+      options,
+    );
+
+    expect(linkHref(out)).toBe('/mysite');
+  });
+
+  it('leaves external links untouched and returns the same reference', () => {
+    const doc = docWithLink('https://example.com');
+    const out = resolvePageIdsInRteJson(doc, nav, options);
+
+    expect(linkHref(out)).toBe('https://example.com');
+    expect(out).toBe(doc);
+  });
+
+  it('does not mutate the source doc (returns a new object) when resolving', () => {
+    const doc = docWithLink('pageid:about-id');
+    const out = resolvePageIdsInRteJson(doc, nav, options);
+
+    expect(out).not.toBe(doc);
+    expect(linkHref(doc)).toBe('pageid:about-id');
+  });
+});

package/src/brand-page/utils/view-model.util.ts

@@ -119,7 +119,7 @@ import {
   getRouteNameByPageIndex,
   getRouteParamsByPage,
 } from './route.util';
-import { hasRTEContent } from '../../brand-page-maker/utils';
+import { hasRTEContent, isTiptapDocument } from '../../brand-page-maker/utils';
 import {
   getPageIdFromHref,
   isHrefPageId,
@@ -1519,6 +1519,86 @@ const mapPageIdReferencesToRelativePaths = (
   });
 };
 
+// Resolve a `pageid:<id>` internal-link href to the published relative path.
+// Returns the resolved href, or null when `href` is not an internal pageid link
+// (external/absolute links are left untouched). Falls back to the site root when
+// the pageid can't be matched to a nav route.
+const resolvePageIdHref = (
+  href: string,
+  nav: NavViewModel,
+  options: ViewModelMappingOptions,
+): string | null => {
+  // Only process internal links (no protocol, doesn't start with /)
+  if (!href || href.match(/^(https?:\/\/|\/)/) || !isHrefPageId(href)) {
+    return null;
+  }
+
+  const pageId = getPageIdFromHref(href);
+  const route = findNavItemByPageId(nav.navItems, pageId);
+  const brandPageSlugRoute = options.brandPageSlug
+    ? `/${options.brandPageSlug}`
+    : '/';
+
+  if (route) {
+    if (route.isRoot) {
+      return brandPageSlugRoute;
+    }
+
+    return `${brandPageSlugRoute}${brandPageSlugRoute === '/' ? '' : '/'}${route.relativePath}`;
+  }
+
+  // fallback to root if pageid cannot be resolved.
+  return brandPageSlugRoute;
+};
+
+// BP-5847: walk a Tiptap JSON doc and rewrite every link mark whose href is a
+// `pageid:` reference into its published relative path. Returns a NEW doc when
+// something changed (so the shared model doc is never mutated), else the same
+// reference.
+export const resolvePageIdsInRteJson = (
+  doc: unknown,
+  nav: NavViewModel,
+  options: ViewModelMappingOptions,
+): unknown => {
+  let changed = false;
+
+  const walk = (node: any): any => {
+    if (!node || typeof node !== 'object') {
+      return node;
+    }
+
+    let next = node;
+
+    if (Array.isArray(node.marks)) {
+      const marks = node.marks.map((mark: any) => {
+        if (mark?.type === 'link' && typeof mark.attrs?.href === 'string') {
+          const resolved = resolvePageIdHref(mark.attrs.href, nav, options);
+
+          if (resolved !== null) {
+            changed = true;
+
+            return { ...mark, attrs: { ...mark.attrs, href: resolved } };
+          }
+        }
+
+        return mark;
+      });
+
+      next = { ...next, marks };
+    }
+
+    if (Array.isArray(node.content)) {
+      next = { ...next, content: node.content.map(walk) };
+    }
+
+    return next;
+  };
+
+  const result = walk(doc);
+
+  return changed ? result : doc;
+};
+
 const dynamicallyMapPageIdInHyperlinksToRelativePaths = (
   content: any,
   nav: NavViewModel,
@@ -1531,7 +1611,15 @@ const dynamicallyMapPageIdInHyperlinksToRelativePaths = (
       return;
     }
 
-    if (typeof value === 'object' && (key === 'items' || key === 'textItems')) {
+    if (isTiptapDocument(value)) {
+      // BP-5847: RTE fields may now be Tiptap JSON. Resolve pageid link marks
+      // here too, or internal links render as raw `pageid:` and don't navigate.
+      (content as unknown as Record<string, unknown>)[key] =
+        resolvePageIdsInRteJson(value, nav, options);
+    } else if (
+      typeof value === 'object' &&
+      (key === 'items' || key === 'textItems')
+    ) {
       if (Array.isArray(value)) {
         value.forEach((item) => {
           dynamicallyMapPageIdInHyperlinksToRelativePaths(item, nav, options);
@@ -1543,31 +1631,11 @@ const dynamicallyMapPageIdInHyperlinksToRelativePaths = (
       (content as unknown as Record<string, unknown>)[key] = value.replace(
         /<a\s+([^>]*?)href="([^"]*?)"([^>]*?)>/gi,
         (match, existingAttrsStart, href, existingAttrsEnd) => {
-          // Only process internal links (no protocol, doesn't start with /)
-          if (href && !href.match(/^(https?:\/\/|\/)/) && isHrefPageId(href)) {
-            const pageId = getPageIdFromHref(href);
-
-            const route = findNavItemByPageId(nav.navItems, pageId);
-
-            const brandPageSlugRoute = options.brandPageSlug
-              ? `/${options.brandPageSlug}`
-              : '/';
-
-            if (route) {
-              let href = `${brandPageSlugRoute}`;
-
-              if (!route.isRoot) {
-                href = `${brandPageSlugRoute}${brandPageSlugRoute === '/' ? '' : '/'}${route.relativePath}`;
-              }
-
-              return `<a ${existingAttrsStart}href="${href}"${existingAttrsEnd}>`;
-            }
-
-            // fallback to root if pageid cannot be resolved.
-            return `<a ${existingAttrsStart}href="${brandPageSlugRoute}"${existingAttrsEnd}>`;
-          }
+          const resolved = resolvePageIdHref(href, nav, options);
 
-          return match;
+          return resolved === null
+            ? match
+            : `<a ${existingAttrsStart}href="${resolved}"${existingAttrsEnd}>`;
         },
       );
     }

package/src/brand-page/view-models.ts

@@ -41,6 +41,7 @@ import type {
   BackgroundShape,
   PersonalisationRole,
   SaveContactOptions,
+  RichTextValue,
 } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 
@@ -196,8 +197,8 @@ export interface TextImageSectionViewModel {
   id: string;
   type: 'images-section';
   role: ContentType;
-  title: string;
-  description: string;
+  title: RichTextValue;
+  description: RichTextValue;
   displayStyle: ImagesSectionContentDisplayStyle;
   aspectRatio: AspectRatio;
   areImagesFullWidth: boolean;

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

@@ -0,0 +1,23 @@
+/**
+ * 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/src/brand-page-maker/components/rich-text-editor/RichTextEditor.vue

@@ -384,7 +384,7 @@
     <div class="tw-relative" :class="{ 'editor-compact': isCompact }">
       <BubbleMenu
         :editor="editor"
-        :tippy-options="tippyOptions"
+        :options="bubbleMenuOptions"
         :update-delay="0"
         :should-show="shouldShow"
         class="tw-w-fit"
@@ -453,7 +453,8 @@ import {
   ButtonGroup,
   TextInput,
 } from '@designcrowd/fe-shared-lib';
-import { EditorContent, BubbleMenu } from '@tiptap/vue-3';
+import { EditorContent } from '@tiptap/vue-3';
+import { BubbleMenu } from '@tiptap/vue-3/menus';
 import { useRichTextEditor } from '../../composables/rich-text-editor/useRichTextEditor';
 import FontPicker from '@shared/font-family-selector/FontPicker.vue';
 import ColorField from '@shared/content-settings/components/color-field/ColorField.vue';
@@ -951,7 +952,7 @@ const {
   hyperlinkValue,
   setHyperlinkUrlValue,
   shouldShow,
-  tippyOptions,
+  bubbleMenuOptions,
   handleAdminColorChange,
 } = useRichTextEditor(
   model,

package/src/brand-page-maker/composables/ai-chat/useAiMetadataBuilder.ts

@@ -33,7 +33,6 @@ export function useAiMetadataBuilder(logger: Logger) {
     model: BrandPageModel,
     aiAssistantToolCall: AiAssistantToolCall[],
     options: {
-      maxCharacters?: number;
       /**
        * Invoked by the UndoBuilder to resolve the pre-prompt snapshot.
        * Required when the response includes an `undo` tool call.

package/src/brand-page-maker/composables/ai-chat/useAiWebsiteBuilderChat.ts

@@ -70,19 +70,20 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
   const checkpointStore = useAiCheckpointStore();
   const eventTracker = useEventTracker();
 
+  const createWelcomeMessage = (): TextThreadMessage =>
+    ({
+      id: '1',
+      type: 'text',
+      role: 'agent',
+      text: 'What changes would you like to make to your website?',
+      timestamp: new Date(),
+    }) as TextThreadMessage;
+
   const hasStoredMessages = aiThreadStore.messages.length > 0;
   const threadItems = ref<ThreadMessage[]>(
     aiThreadStore.messages.length > 0
       ? aiThreadStore.messages
-      : [
-          {
-            id: '1',
-            type: 'text',
-            role: 'agent',
-            text: 'What changes would you like to make to your website?',
-            timestamp: new Date(),
-          } as TextThreadMessage,
-        ],
+      : [createWelcomeMessage()],
   );
 
   // ---------------------------------------------------------------------------
@@ -148,6 +149,24 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
   const generatedText = ref<string | null>(null);
   const generatedStyle = ref<BrandPageCssStyle | null>(null);
 
+  // External reset (e.g. template switch, BP-5896): tear down the build WS
+  // client so a late push can't repopulate the fresh thread, then re-seed
+  // the welcome bubble. Keyed off `resetToken` — NOT `messages` — to avoid
+  // looping with the deep `threadItems` → `messages` watch above.
+  watch(
+    () => aiThreadStore.resetToken,
+    () => {
+      if (activeBuildWsClient) {
+        activeBuildWsClient.disconnect();
+        activeBuildWsClient = null;
+      }
+
+      currentTypingMessageId.value = null;
+      isStopped.value = false;
+      threadItems.value = [createWelcomeMessage()];
+    },
+  );
+
   const SERVICE_UNAVAILABLE_MESSAGE =
     'This service is not available right now. Please try again later.';
 

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

@@ -23,20 +23,16 @@ export const useBubbleMenu = (
     return false;
   };
 
-  const tippyOptions = {
-    duration: 100,
+  // v3 BubbleMenu uses Floating UI (was tippy.js in v2). Only placement + offset
+  // carry over; the rest of the old tippy config (trigger/interactive/hideOnClick/
+  // zIndex) is either the v3 default or handled in CSS.
+  const bubbleMenuOptions = {
     placement: 'bottom' as const,
-    interactive: true,
-    appendTo: 'parent' as const,
-    hideOnClick: false,
-    arrow: false,
-    offset: [0, 10] as [number, number],
-    trigger: 'manual' as const,
-    zIndex: 10,
+    offset: 10,
   };
 
   return {
     shouldShow,
-    tippyOptions,
+    bubbleMenuOptions,
   };
 };

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

@@ -0,0 +1,52 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor } from '@tiptap/vue-3';
+import { getRteExtensions } from '../getRteExtensions';
+import { sanitizeRteJson } from '@brand-page-maker/utils/rte-sanitize.util';
+
+/**
+ * BP-5787 — multi-word font families ("Open Sans") are quoted in CSS, so
+ * re-parsing HTML (pasting RTE-styled text between editors) previously yielded
+ * a value WITH quote chars, which the native sanitiser then dropped — losing
+ * the font. The custom FontFamily extension strips the quotes on parse.
+ */
+describe('FontFamily — quote-stripping parse (BP-5787)', () => {
+  let editors: Editor[] = [];
+  const mk = () => {
+    const e = new Editor({
+      extensions: getRteExtensions({ restrictStarterKit: true }),
+    });
+
+    editors.push(e);
+
+    return e;
+  };
+
+  afterEach(() => {
+    editors.forEach((e) => e.destroy());
+    editors = [];
+  });
+
+  const fontFamilyOf = (json: any) =>
+    json.content?.[0]?.content?.[0]?.marks?.find(
+      (m: any) => m.type === 'textStyle',
+    )?.attrs?.fontFamily;
+
+  for (const font of ['Montserrat', 'Open Sans', 'Playwrite AU']) {
+    it(`"${font}" survives an HTML re-parse + sanitise unquoted`, () => {
+      const src = mk();
+
+      src.commands.setContent('<p>Hello world</p>');
+      src.commands.selectAll();
+      src.commands.setFontFamily(font);
+
+      // Re-parse the serialised HTML — mirrors an RTE→RTE paste.
+      const tgt = mk();
+
+      tgt.commands.setContent(src.getHTML());
+
+      expect(fontFamilyOf(tgt.getJSON())).toBe(font);
+      // and the sanitiser must keep it (isSafeCssValue rejects quote chars).
+      expect(fontFamilyOf(sanitizeRteJson(tgt.getJSON()))).toBe(font);
+    });
+  }
+});

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

@@ -0,0 +1,42 @@
+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/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.ts

@@ -0,0 +1,137 @@
+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.
+ *  - `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 const getRteExtensions = (
+  options: RteExtensionOptions = {},
+): Extensions => {
+  const {
+    restrictStarterKit = false,
+    includeLinkRel = 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.configure({
+      openOnClick: false,
+      defaultProtocol: 'https',
+      autolink: true,
+      HTMLAttributes: (attrs) => {
+        const href = attrs.href;
+        const isExternal =
+          href && (href.startsWith('http://') || href.startsWith('https://'));
+
+        return {
+          ...(includeLinkRel && { rel: 'noopener noreferrer' }),
+          target: isExternal ? '_blank' : null,
+        };
+      },
+      isAllowedUri: (url, ctx) => ctx.defaultValidate(url) || isHrefPageId(url),
+    }),
+    AutoLink,
+  );
+
+  return extensions;
+};