@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/shared/page-settings/store/page-settings-store.ts

@@ -10,7 +10,8 @@ import {
   VIEWPORTS,
   getNavigationType,
 } from '@brand-page';
-import type { NavigationType } from '@brand-page';
+import type { NavigationType, TextStyleOptions } from '@brand-page';
+import { normalizeTextStyleAgainstRole } from '@brand-page/utils/text-style.util';
 import type {
   ButtonLinkType,
   Content,
@@ -290,6 +291,34 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
     }): void {
       this.pages.find((p) => p.id === pageId)!.isHidden = isHidden;
     },
+    renormalizeTextStylesForRole(
+      type: string,
+      textStyleOptions: TextStyleOptions | undefined,
+    ): void {
+      for (const viewport of [VIEWPORTS.desktop, VIEWPORTS.mobile] as const) {
+        const footer = this.sections[PAGE_SECTIONS.footer][viewport];
+
+        if (footer.copyrightStyle?.textStyleType === type) {
+          footer.copyrightStyle = normalizeTextStyleAgainstRole(
+            footer.copyrightStyle,
+            textStyleOptions,
+          );
+        }
+
+        const header = this.sections[PAGE_SECTIONS.header][viewport];
+        const buttonTextStyle = header.headerButton?.buttonTextStyle;
+
+        if (header.headerButton && buttonTextStyle?.textStyleType === type) {
+          header.headerButton = {
+            ...header.headerButton,
+            buttonTextStyle: normalizeTextStyleAgainstRole(
+              buttonTextStyle,
+              textStyleOptions,
+            ),
+          };
+        }
+      }
+    },
     setPageSettingsSectionValue({
       sectionName,
       propName,

package/src/shared/rte-extensions/AutoLink.test.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor, type JSONContent } from '@tiptap/vue-3';
+import { getRteExtensions } from '@shared/rte-extensions.util';
+import { DEFAULT_LINK_COLOR } from '@src/constants/rich-text-editor.constants';
+
+const link = { type: 'link', attrs: { href: 'https://example.com' } };
+
+// "Read our guide today", where "guide" is a link the user made red with no underline.
+const customLinkDoc = (): JSONContent => ({
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: [
+        { type: 'text', text: 'Read our ' },
+        {
+          type: 'text',
+          text: 'guide',
+          marks: [link, { type: 'textStyle', attrs: { color: '#ff0000' } }],
+        },
+        { type: 'text', text: ' today' },
+      ],
+    },
+  ],
+});
+
+const linkMarksOf = (editor: Editor) => {
+  let marks: string[] = [];
+  let color: unknown;
+
+  editor.state.doc.descendants((node) => {
+    if (node.isText && node.marks.some((mark) => mark.type.name === 'link')) {
+      marks = node.marks.map((mark) => mark.type.name);
+      color = node.marks.find((mark) => mark.type.name === 'textStyle')?.attrs
+        .color;
+    }
+  });
+
+  return { marks, color };
+};
+
+describe('AutoLink new-link styling', () => {
+  let editors: Editor[] = [];
+
+  const mk = (content: JSONContent | string) => {
+    const editor = new Editor({ extensions: getRteExtensions(), content });
+
+    editors.push(editor);
+
+    return editor;
+  };
+
+  afterEach(() => {
+    editors.forEach((editor) => editor.destroy());
+    editors = [];
+  });
+
+  it("leaves an existing link's own colour and underline after an earlier delete", () => {
+    const editor = mk(customLinkDoc());
+
+    editor.commands.deleteRange({ from: 2, to: 3 }); // "Read" → "Rad"
+
+    expect(editor.state.doc.textContent).toBe('Rad our guide today');
+    expect(linkMarksOf(editor)).toEqual({
+      marks: ['link', 'textStyle'],
+      color: '#ff0000',
+    });
+  });
+
+  it('leaves an existing link alone after a delete in an earlier paragraph', () => {
+    const doc = customLinkDoc();
+
+    doc.content!.unshift({
+      type: 'paragraph',
+      content: [{ type: 'text', text: 'Intro line' }],
+    });
+
+    const editor = mk(doc);
+
+    editor.commands.deleteRange({ from: 1, to: 7 }); // "Intro " gone
+
+    expect(linkMarksOf(editor).color).toBe('#ff0000');
+    expect(linkMarksOf(editor).marks).not.toContain('underline');
+  });
+
+  it('still gives a newly linked word the link blue and an underline', () => {
+    const editor = mk('<p>Read our guide today</p>');
+
+    editor
+      .chain()
+      .setTextSelection({ from: 10, to: 15 })
+      .setLink({ href: 'https://example.com' })
+      .run();
+
+    expect(linkMarksOf(editor).color).toBe(DEFAULT_LINK_COLOR);
+    expect(linkMarksOf(editor).marks).toContain('underline');
+  });
+});

package/src/{brand-page-maker/composables/rich-text-editor/extensions → shared/rte-extensions}/AutoLink.ts

@@ -1,9 +1,14 @@
 import { Extension } from '@tiptap/core';
 import { Plugin, PluginKey } from 'prosemirror-state';
-import type { Transaction } from 'prosemirror-state';
+import type { EditorState, Transaction } from 'prosemirror-state';
 import type { Node, Mark } from 'prosemirror-model';
 import { DEFAULT_LINK_COLOR as LINK_COLOR } from '@src/constants/rich-text-editor.constants';
 
+/** A transaction carrying this meta skips the new-link styling pass below: a clipboard paste
+ * brings its own look (a copied link keeps its colour; a text-only paste brings no links), so
+ * neither wants AutoLink's "force blue + underline" treatment for a newly-created link. */
+export const AUTO_LINK_SKIP_STYLING_META = 'autoLinkSkipStyling';
+
 const isLinkMark = (mark: Mark) => mark.type.name === 'link';
 const isUnderlineMark = (mark: Mark) => mark.type.name === 'underline';
 const isTextStyleMark = (mark: Mark) => mark.type.name === 'textStyle';
@@ -61,6 +66,55 @@ const applyDefaultLinkStyling = (
   return modified;
 };
 
+/**
+ * The end-of-link detach a typed character gets right after a link's last position: the link
+ * mark (and its auto-blue colour, unless the user manually added an underline) drops from what
+ * comes next, so continuing to type doesn't extend the link. `null` when `pos` isn't at the end
+ * of a link — mid-link, or no link at all — so the caller keeps its own marks unchanged.
+ * Exported for `RteClipboard.ts`'s text-only paste, which takes the same detach a typed
+ * character would.
+ */
+export const linkDetachMarksAt = (
+  state: EditorState,
+  pos: number,
+): Mark[] | null => {
+  const currentMarks = state.doc.resolve(pos).marks();
+  const linkMark = currentMarks.find(isLinkMark);
+
+  if (!linkMark) return null;
+
+  const nextPos = pos + 1;
+  const hasLinkAfter =
+    nextPos <= state.doc.content.size &&
+    state.doc
+      .resolve(Math.min(nextPos, state.doc.content.size))
+      .marks()
+      .some((mark) => isLinkMark(mark) && mark.eq(linkMark));
+
+  if (hasLinkAfter) return null;
+
+  return currentMarks
+    .filter((mark) => {
+      if (isLinkMark(mark)) return false;
+
+      // Only preserve underlines if there's no blue color (manually added underlines)
+      // Remove underlines that were part of link styling (with blue color)
+      if (isUnderlineMark(mark)) {
+        const hasBlueColor = currentMarks.some(isBlueColorMark);
+
+        return !hasBlueColor;
+      }
+
+      // Remove blue color styling but preserve other text styles
+      if (isBlueColorMark(mark)) {
+        return createStylesWithoutColor(state.schema, mark);
+      }
+
+      return true;
+    })
+    .filter(Boolean) as Mark[];
+};
+
 const removeHyperlinkStyles = (
   tr: Transaction,
   schema: any,
@@ -109,66 +163,28 @@ export const AutoLink = Extension.create({
         props: {
           handleTextInput(view, from, to, text) {
             const { state } = view;
-            const { selection } = state;
-            const { $anchor } = selection;
 
             // Only handle when typing at a cursor position (from === to)
             if (from !== to) {
               return false;
             }
 
-            // Check if we have link marks at cursor position
-            const currentMarks = $anchor.marks();
-            const linkMark = currentMarks.find(isLinkMark);
-
-            if (linkMark) {
-              // Check if we're at the end of the link
-              const currentPos = $anchor.pos;
-              const nextPos = currentPos + 1;
-
-              const hasLinkAfter =
-                nextPos <= state.doc.content.size &&
-                state.doc
-                  .resolve(Math.min(nextPos, state.doc.content.size))
-                  .marks()
-                  .some((mark) => isLinkMark(mark) && mark.eq(linkMark));
-
-              if (!hasLinkAfter) {
-                // detach the link after the attached link mark
-                const preservedMarks = currentMarks
-                  .filter((mark) => {
-                    if (isLinkMark(mark)) return false;
-
-                    // Only preserve underlines if there's no blue color (manually added underlines)
-                    // Remove underlines that were part of link styling (with blue color)
-                    if (isUnderlineMark(mark)) {
-                      const hasBlueColor = currentMarks.some(isBlueColorMark);
+            const detached = linkDetachMarksAt(
+              state,
+              state.selection.$anchor.pos,
+            );
 
-                      return !hasBlueColor; // Keep underline only if no blue color
-                    }
+            if (!detached) return false;
 
-                    // Remove blue color styling but preserve other text styles
-                    if (isBlueColorMark(mark)) {
-                      return createStylesWithoutColor(state.schema, mark);
-                    }
+            let tr = state.tr;
 
-                    return true;
-                  })
-                  .filter(Boolean); // Insert text with only preserved marks
+            tr = tr.setStoredMarks(detached);
+            tr = tr.insertText(text, from, to);
+            tr = tr.setMeta('autoLinkDetached', true);
 
-                let tr = state.tr;
+            view.dispatch(tr);
 
-                tr = tr.setStoredMarks(preservedMarks);
-                tr = tr.insertText(text, from, to);
-                tr = tr.setMeta('autoLinkDetached', true);
-
-                view.dispatch(tr);
-
-                return true;
-              }
-            }
-
-            return false;
+            return true;
           },
         },
 
@@ -185,26 +201,39 @@ export const AutoLink = Extension.create({
           const wasDetached = transactions.some((transaction) =>
             transaction.getMeta('autoLinkDetached'),
           );
+          const skipsNewLinkStyling = transactions.some((transaction) =>
+            transaction.getMeta(AUTO_LINK_SKIP_STYLING_META),
+          );
+
+          // Apply default styling to links (unless just detached, or the transaction brings its
+          // own look — a clipboard paste)
+          if (!wasDetached && !skipsNewLinkStyling) {
+            // A link is new when its text wasn't a link before these transactions. Map each
+            // position back through them: an edit earlier in the doc shifts every later link, so
+            // the same raw position in the old doc lands on other text.
+            const toOldPos = transactions
+              .map((transaction) => transaction.mapping.invert())
+              .reverse();
 
-          // Apply default styling to links (unless just detached)
-          if (!wasDetached) {
             newState.doc.descendants((node, pos) => {
               if (!node.isText || !node.text || !hasLinkMark(node.marks))
                 return;
 
-              // Check if this is a newly created link by comparing with old state
+              const oldPos = toOldPos.reduce(
+                (mapped, mapping) => mapping.map(mapped, 1),
+                pos,
+              );
               const oldNode =
-                pos < oldState.doc.nodeSize ? oldState.doc.nodeAt(pos) : null;
+                oldPos < oldState.doc.content.size
+                  ? oldState.doc.nodeAt(oldPos)
+                  : null;
               const wasAlreadyLink = oldNode && hasLinkMark(oldNode.marks);
 
-              // Only apply full styling (including underline) to newly created links
+              // An existing link keeps the colour and underline it has now.
               if (wasAlreadyLink === false) {
                 if (applyDefaultLinkStyling(tr, newState.schema, node, pos)) {
                   modified = true;
                 }
-              } else {
-                // For existing links, preserve their current color and underline choices
-                // Don't override user customizations on existing links
               }
             });
           }

package/src/{brand-page-maker/composables/rich-text-editor/extensions → shared/rte-extensions}/MaxLength.ts

@@ -26,7 +26,10 @@ export const MaxLength = Extension.create<MaxLengthOptions>({
             const { maxLength } = this.options;
             const { state } = view;
             const { from, to } = view.state.selection;
-            const selectionSize = to - from;
+            // The selected TEXT being replaced, not its position span: a selection crossing a
+            // paragraph boundary spans 2 extra positions (the closing/opening block nodes) that
+            // aren't characters.
+            const selectionSize = state.doc.textBetween(from, to).length;
             const currentTextLength =
               state.doc.textContent.length - selectionSize;
             const incomingText = slice.content.textBetween(

package/src/shared/rte-extensions/TextEffects.ts

@@ -0,0 +1,151 @@
+import { Extension } from '@tiptap/core';
+import {
+  composeTextDecoration,
+  roleVarRef,
+  rteTextDecorationClassName,
+} from '@shared/text-role-typography.util';
+
+export type TextEffectsOptions = {
+  types: string[];
+  renderTextDecorationClasses?: boolean;
+};
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    textEffects: {
+      setFontWeight: (value: string) => ReturnType;
+      unsetFontWeight: () => ReturnType;
+      setFontStyle: (value: string) => ReturnType;
+      unsetFontStyle: () => ReturnType;
+      setTextDecoration: (value: string) => ReturnType;
+      unsetTextDecoration: () => ReturnType;
+    };
+  }
+}
+
+/**
+ * BP-5969 — weight / style / decoration as `textStyle` mark ATTRIBUTES, not semantic marks.
+ *
+ * Every typography property now lives on the run's `textStyle` mark, each defaulting to its role
+ * `var(--role-*)` (or a raw override) — identical to family/size/line-height/letter-spacing. So
+ * editing a role's font-weight / font-style / text-decoration changes one CSS custom-property
+ * declaration and repaints every linked run through the cascade, with no doc rewrite. (The
+ * container applies nothing, so a per-run `font-weight: normal` / `text-decoration: none` override
+ * cleanly wins — the reason these can leave the semantic `<strong>`/`<u>` model.)
+ */
+export const TextEffects = Extension.create<TextEffectsOptions>({
+  name: 'textEffects',
+
+  addOptions() {
+    return {
+      types: ['textStyle'],
+      renderTextDecorationClasses: false,
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontWeight: {
+            default: null,
+            parseHTML: (element) => element.style.fontWeight || null,
+            renderHTML: (attributes) =>
+              attributes.fontWeight
+                ? { style: `font-weight: ${attributes.fontWeight}` }
+                : {},
+          },
+          fontStyle: {
+            default: null,
+            parseHTML: (element) => element.style.fontStyle || null,
+            renderHTML: (attributes) =>
+              attributes.fontStyle
+                ? { style: `font-style: ${attributes.fontStyle}` }
+                : {},
+          },
+          textDecoration: {
+            default: null,
+            parseHTML: (element) => element.style.textDecoration || null,
+            renderHTML: (attributes) => {
+              if (!attributes.textDecoration) return {};
+
+              const className = this.options.renderTextDecorationClasses
+                ? rteTextDecorationClassName(
+                    attributes.textDecoration,
+                    attributes.textDecorationReset === true,
+                  )
+                : undefined;
+
+              if (this.options.renderTextDecorationClasses)
+                return className ? { class: className } : {};
+
+              const value =
+                attributes.textDecoration === roleVarRef('textDecoration')
+                  ? attributes.textDecoration
+                  : composeTextDecoration(undefined, attributes.textDecoration);
+
+              return value ? { style: `text-decoration: ${value}` } : {};
+            },
+          },
+          textDecorationReset: {
+            default: null,
+            parseHTML: (element) =>
+              element.getAttribute('data-bp-text-decoration-reset') === 'true'
+                ? true
+                : null,
+            renderHTML: (attributes) =>
+              attributes.textDecorationReset
+                ? { 'data-bp-text-decoration-reset': 'true' }
+                : {},
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setFontWeight:
+        (fontWeight) =>
+        ({ chain }) =>
+          chain().setMark('textStyle', { fontWeight }).run(),
+      unsetFontWeight:
+        () =>
+        ({ chain }) =>
+          chain()
+            .setMark('textStyle', { fontWeight: null })
+            .removeEmptyTextStyle()
+            .run(),
+      setFontStyle:
+        (fontStyle) =>
+        ({ chain }) =>
+          chain().setMark('textStyle', { fontStyle }).run(),
+      unsetFontStyle:
+        () =>
+        ({ chain }) =>
+          chain()
+            .setMark('textStyle', { fontStyle: null })
+            .removeEmptyTextStyle()
+            .run(),
+      // A reset marker qualifies only the value it was written with; setMark merges attrs, so a
+      // new value must clear it or the run would drop its role's lines.
+      setTextDecoration:
+        (textDecoration) =>
+        ({ chain }) =>
+          chain()
+            .setMark('textStyle', { textDecoration, textDecorationReset: null })
+            .run(),
+      unsetTextDecoration:
+        () =>
+        ({ chain }) =>
+          chain()
+            .setMark('textStyle', {
+              textDecoration: null,
+              textDecorationReset: null,
+            })
+            .removeEmptyTextStyle()
+            .run(),
+    };
+  },
+});

package/src/shared/rte-extensions/ViewDomParser.ts

@@ -0,0 +1,27 @@
+import { Extension } from '@tiptap/core';
+import { DOMParser } from 'prosemirror-model';
+import { Plugin, PluginKey } from 'prosemirror-state';
+
+// The legacy bold/italic/underline/strike style rules misread the textStyle span's own styles on the
+// per-keystroke DOM read-back, so the whole run is retyped with the armed format — see
+// rich-text-editor.md. Paste keeps them: foreign HTML may carry bold only as a style.
+export const ViewDomParser = Extension.create({
+  name: 'viewDomParser',
+
+  addProseMirrorPlugins() {
+    const schemaParser = DOMParser.fromSchema(this.editor.schema);
+
+    return [
+      new Plugin({
+        key: new PluginKey('viewDomParser'),
+        props: {
+          domParser: new DOMParser(
+            this.editor.schema,
+            schemaParser.rules.filter((rule) => 'tag' in rule),
+          ),
+          clipboardParser: schemaParser,
+        },
+      }),
+    ];
+  },
+});

package/src/{brand-page-maker/composables/rich-text-editor/getRteExtensions.ts → shared/rte-extensions.util.ts}

@@ -7,11 +7,13 @@ 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';
+import { FontFamily } from './rte-extensions/FontFamily';
+import { LetterSpacing } from './rte-extensions/LetterSpacing';
+import { TextEffects } from './rte-extensions/TextEffects';
+import { MaxLength } from './rte-extensions/MaxLength';
+import { ViewDomParser } from './rte-extensions/ViewDomParser';
+import { AutoLink } from './rte-extensions/AutoLink';
+import { isHrefPageId } from './rte-link.util';
 
 /**
  * Single source of truth for the Tiptap extension set (BP-5787).
@@ -23,27 +25,68 @@ import { isHrefPageId } from './hyperlink';
  *
  * 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).
+ *  - `editing` — only the live editor carries the Placeholder, MaxLength and
+ *    ViewDomParser plugins (none 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.
  */
+/**
+ * The RTE schema is piecewise-constant across model-version ranges: it only changes when an
+ * extension is added, so every version between two change points shares one schema. Today the one
+ * change point is v22 — where `TextEffects` (weight/style/decoration on the `textStyle` mark) was
+ * added — giving two generations: below 22 is the pre-BP-5969 schema, 22-and-later (and the latest)
+ * carries TextEffects. Add the next version here if the schema grows.
+ *
+ * MIGRATION-22 SNAPSHOT DEPENDENCY: B1 parses v21 plain RTE strings with generation 22, so the
+ * extensions' `parseHTML` rules shape its output. Pinning the generation does not freeze those rules;
+ * after migration-22 releases, pin them in the migration before changing them.
+ */
+const RTE_SCHEMA_CHANGE_VERSIONS = [22];
+
+/**
+ * The schema generation a requested version resolves to: the highest change point at or below it
+ * (0 = the base schema). `undefined` = latest → the newest generation. So versions in the same
+ * range share one schema — asking for 5 or 20 both give the base — and callers cache one built
+ * schema per generation rather than per exact number.
+ */
+export const rteSchemaGeneration = (schemaVersion?: number): number =>
+  RTE_SCHEMA_CHANGE_VERSIONS.reduce(
+    (generation, changeVersion) =>
+      // undefined = latest → reaches every change point → the newest generation.
+      schemaVersion === undefined || schemaVersion >= changeVersion
+        ? changeVersion
+        : generation,
+    0,
+  );
+
 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). */
+  /** When present, add the live-editing-only plugins (Placeholder, MaxLength, ViewDomParser). */
   editing?: {
     placeholder?: string;
     maxLength?: number;
   };
+  /**
+   * Pin the schema to a model version's extension set. A migration passes its own version so the
+   * parse reproduces that era's schema (see `rteSchemaGeneration`); omit for the latest (runtime).
+   */
+  schemaVersion?: number;
+  /** Render text-decoration marks as role-aware classes instead of inline styles. */
+  renderTextDecorationClasses?: boolean;
 }
 
 export const getRteExtensions = (
   options: RteExtensionOptions = {},
 ): Extensions => {
-  const { restrictStarterKit = false, editing } = options;
+  const {
+    restrictStarterKit = false,
+    editing,
+    schemaVersion,
+    renderTextDecorationClasses = false,
+  } = options;
 
   const extensions: Extensions = [
     // v3 StarterKit bundles Link + Underline; we register both separately (with
@@ -93,6 +136,19 @@ export const getRteExtensions = (
     FontSize.configure({ types: ['textStyle'] }),
     LetterSpacing,
     LineHeight.configure({ types: ['textStyle'] }),
+    // BP-5969: weight / style / decoration as textStyle attrs (role var or literal override), so a
+    // role edit to any of them repaints linked RTE via the cascade — like family/size already do.
+    // TextEffects entered at v22 (RTE_SCHEMA_CHANGE_VERSIONS). Gated in place — not appended — so the
+    // latest schema's extension order is byte-unchanged; a parse resolving below 22 omits it,
+    // reproducing the pre-BP-5969 schema.
+    ...(rteSchemaGeneration(schemaVersion) >= 22
+      ? [
+          TextEffects.configure({
+            types: ['textStyle'],
+            renderTextDecorationClasses,
+          }),
+        ]
+      : []),
     ColorExtension.configure({
       types: ['textStyle'],
     }),
@@ -106,6 +162,7 @@ export const getRteExtensions = (
     extensions.push(
       Placeholder.configure({ placeholder: editing.placeholder }),
       MaxLength.configure({ maxLength: editing.maxLength }),
+      ViewDomParser,
     );
   }
 

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

@@ -0,0 +1,2 @@
+export const isHrefPageId = (href: string): boolean =>
+  !!href && href.startsWith('pageid:');