@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page-maker/components/shop/AddOrEditProductContainer.vue

@@ -55,6 +55,7 @@
           :placeholder="productTr('itemName')"
           :maxlength="MAX_PAYMENT_TITLE_LENGTH"
           :error="!isTitleValid"
+          :attrs="{ 'data-test-tag': 'product-name-text-input' }"
         />
         <span v-if="titleErroMessage" class="tw-text-sm tw-text-error-500">
           {{ titleErroMessage }}

package/src/brand-page-maker/components/template-preview/TemplatePreview.vue

@@ -14,6 +14,7 @@
         <!-- Start Overlay-->
         <button
           class="template-preview__overlay"
+          data-test-tag="select-template"
           @click.stop="onOverlayClicked"
         >
           <span class="tw-sr-only">Select Template</span>

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

@@ -14,6 +14,7 @@ export interface AiMetadataBuilderResult {
   results: {
     toolId: string;
     errors?: string[];
+    warnings?: string[];
     /**
      * The frontend-assigned content id of the section this tool call
      * created/updated, when the builder produced one. Used by the AI chat
@@ -60,6 +61,7 @@ export function useAiMetadataBuilder(logger: Logger) {
           return {
             toolId: x.request.id,
             errors: x.errors,
+            warnings: x.warnings,
             contentId: x.contentId,
           };
         }),

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

@@ -426,6 +426,7 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
           success: x.errors && x.errors.length > 0 ? 'failed' : 'success',
           name: enrichedToolCalls[i]?.function,
           errorMessage: x.errors?.length ? x.errors.join('; ') : undefined,
+          warningMessage: x.warnings?.join('; '),
         };
       },
     );

package/src/brand-page-maker/composables/rich-text-editor/block-typography.test.ts

@@ -0,0 +1,519 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor } from '@tiptap/vue-3';
+import { getRteExtensions } from '@shared/rte-extensions.util';
+import { composeTextDecoration } from '@shared/text-role-typography.util';
+import { createFormattingActions } from './formatting';
+import {
+  hasRunTypographyOverride,
+  readBlockTypography,
+  relinkRoleEqualRunsChain,
+  relinkTypographyChain,
+} from '@brand-page-maker/utils';
+
+// Regression cover for the maker helpers behind the roller-brush style actions: the asterisk
+// (hasRunTypographyOverride), what "apply to role" promotes (readBlockTypography) and relinks
+// (relinkRoleEqualRunsChain), and "reset to default" (relinkTypographyChain). All must understand
+// weight/style/decoration as `textStyle` attrs while still reading legacy marks for un-migrated /
+// pasted runs. A real editor runs the production schema.
+describe('readBlockTypography', () => {
+  let editors: Editor[] = [];
+
+  const mk = (html = '<p>Hello</p>') => {
+    const e = new Editor({
+      extensions: getRteExtensions({ restrictStarterKit: true }),
+    });
+
+    e.commands.setContent(html);
+    e.commands.selectAll();
+    editors.push(e);
+
+    return e;
+  };
+
+  afterEach(() => {
+    editors.forEach((e) => e.destroy());
+    editors = [];
+  });
+
+  it('reads a uniform attr-based bold as a block-level fontWeight', () => {
+    const editor = mk();
+
+    createFormattingActions(editor).toggleBold(); // writes fontWeight: 'bold' attr (unlinked → literal)
+
+    expect(readBlockTypography(editor).fontWeight).toBe('bold');
+  });
+
+  it('falls back to a legacy semantic mark for un-migrated content', () => {
+    const editor = mk('<p><strong>Hello</strong></p>');
+
+    // No fontWeight attr — only the legacy <strong> mark; readBlockTypography must still see it.
+    expect(readBlockTypography(editor).fontWeight).toBe('bold');
+  });
+
+  it('ignores a partial (one-run) format — not a block-level override', () => {
+    const editor = mk('<p><strong>A</strong>B</p>');
+
+    // "A" is bold, "B" is not → not uniform → fontWeight is inline decoration, not a block value.
+    expect(readBlockTypography(editor).fontWeight).toBeUndefined();
+  });
+
+  it('composes underline + strike into one textDecoration', () => {
+    const editor = mk();
+    const actions = createFormattingActions(editor);
+
+    actions.toggleUnderline();
+    editor.commands.selectAll();
+    actions.toggleStrike();
+
+    expect(readBlockTypography(editor).textDecoration).toBe(
+      'underline line-through',
+    );
+  });
+
+  it('passes a role-var ref through as the block value (caller treats it as linked)', () => {
+    const editor = mk();
+
+    editor
+      .chain()
+      .selectAll()
+      .setMark('textStyle', { fontWeight: 'var(--role-font-weight)' })
+      .run();
+
+    expect(readBlockTypography(editor).fontWeight).toBe(
+      'var(--role-font-weight)',
+    );
+  });
+
+  it('reads a reset run as clearing the role, so promotion keeps a removed role line off', () => {
+    const editor = mk();
+
+    editor
+      .chain()
+      .selectAll()
+      .setMark('textStyle', {
+        textDecoration: 'line-through',
+        textDecorationReset: true,
+      })
+      .run();
+
+    expect(
+      composeTextDecoration(
+        'underline',
+        readBlockTypography(editor).textDecoration,
+      ),
+    ).toBe('line-through');
+  });
+
+  it("leaves a link's underline out of the block value it promotes", () => {
+    const editor = mk(
+      '<p><u>Read </u><a href="https://example.com"><u>more</u></a></p>',
+    );
+
+    expect(readBlockTypography(editor).textDecoration).toBe('underline');
+
+    editor.commands.setContent(
+      '<p><a href="https://example.com"><u>more</u></a></p>',
+    );
+
+    expect(readBlockTypography(editor).textDecoration).toBeUndefined();
+  });
+});
+
+describe('relinkTypographyChain (reset to role)', () => {
+  let editors: Editor[] = [];
+
+  const mk = (html = '<p>Hello</p>') => {
+    const e = new Editor({
+      extensions: getRteExtensions({ restrictStarterKit: true }),
+    });
+
+    e.commands.setContent(html);
+    e.commands.selectAll();
+    editors.push(e);
+
+    return e;
+  };
+
+  afterEach(() => {
+    editors.forEach((e) => e.destroy());
+    editors = [];
+  });
+
+  const firstRunAttrs = (editor: Editor) =>
+    ((editor.getJSON().content?.[0]?.content?.[0] as any)?.marks ?? []).find(
+      (m: any) => m.type === 'textStyle',
+    )?.attrs ?? {};
+  const firstRunMarkTypes = (editor: Editor) =>
+    ((editor.getJSON().content?.[0]?.content?.[0] as any)?.marks ?? []).map(
+      (m: any) => m.type,
+    );
+
+  it('re-links an attr-based bold override back to the role var (the reset bug)', () => {
+    const editor = mk();
+
+    createFormattingActions(editor).toggleBold(); // fontWeight: 'bold' literal override
+    expect(firstRunAttrs(editor).fontWeight).toBe('bold');
+
+    editor.commands.selectAll();
+    relinkTypographyChain(editor, {
+      fontFamily: 'Lato',
+      fontWeight: 'bold',
+    }).run();
+
+    // The literal is gone — the run follows the role again.
+    expect(firstRunAttrs(editor).fontWeight).toBe('var(--role-font-weight)');
+    expect(firstRunAttrs(editor).fontFamily).toBe('var(--role-font-family)');
+  });
+
+  it.each([
+    ['a role that sets a decoration', { textDecoration: 'underline' }],
+    ['a role that sets none', { fontFamily: 'Lato' }],
+  ])('drops the reset marker for %s', (_, role) => {
+    const editor = mk();
+
+    editor
+      .chain()
+      .selectAll()
+      .setMark('textStyle', {
+        textDecoration: 'line-through',
+        textDecorationReset: true,
+      })
+      .run();
+    relinkTypographyChain(editor, role).run();
+
+    expect(firstRunAttrs(editor).textDecorationReset ?? null).toBeNull();
+  });
+
+  const LINKED =
+    '<p><u>Plain</u> and <a href="https://example.com"><u>a link</u></a></p>';
+  const underlinedTexts = (editor: Editor) => {
+    const texts: string[] = [];
+
+    editor.state.doc.descendants((node) => {
+      if (node.isText && node.marks.some((m) => m.type.name === 'underline'))
+        texts.push(node.text!);
+    });
+
+    return texts;
+  };
+
+  it("keeps a link's underline and clears every other one", () => {
+    const editor = mk(LINKED);
+
+    relinkTypographyChain(editor, { fontFamily: 'Lato' }).run();
+
+    expect(underlinedTexts(editor)).toEqual(['a link']);
+  });
+
+  it.each(['toggleUnderlineAll', 'toggleStrikeAll'] as const)(
+    "%s keeps a link's underline",
+    (action) => {
+      const editor = mk(LINKED);
+
+      createFormattingActions(editor)[action]();
+
+      expect(underlinedTexts(editor)).toEqual(['a link']);
+    },
+  );
+
+  it('clears a legacy semantic mark on reset', () => {
+    const editor = mk('<p><strong>Hello</strong></p>');
+
+    expect(firstRunMarkTypes(editor)).toContain('bold');
+
+    editor.commands.selectAll();
+    relinkTypographyChain(editor, { fontWeight: 'bold' }).run();
+
+    expect(firstRunMarkTypes(editor)).not.toContain('bold');
+    expect(firstRunAttrs(editor).fontWeight).toBe('var(--role-font-weight)');
+  });
+
+  it('unsets attrs the role does not define (no dangling ref to an undefined var)', () => {
+    const editor = mk();
+
+    // Apply an italic + underline override, then reset against a role that defines neither.
+    const actions = createFormattingActions(editor);
+
+    actions.toggleItalic();
+    editor.commands.selectAll();
+    actions.toggleUnderline();
+    editor.commands.selectAll();
+
+    relinkTypographyChain(editor, { fontWeight: 'normal' }).run();
+
+    const attrs = firstRunAttrs(editor);
+
+    // Unset (null) — not a literal italic / underline; render-fill then follows the role.
+    expect(attrs.fontStyle ?? null).toBeNull();
+    expect(attrs.textDecoration ?? null).toBeNull();
+    // A role-defined attr is still re-linked, not left as a literal.
+    expect(attrs.fontWeight).toBe('var(--role-font-weight)');
+  });
+
+  // BP-5969 (ADR-0020): switching a block's role resets typography only. Colour is a
+  // separate axis (not a role property), so a run's colour mark must survive the relink —
+  // this is what lets the RTE role dropdown keep the element's colour on a role switch.
+  it('keeps a run colour mark while relinking typography to the new role', () => {
+    const editor = mk();
+
+    // A colour + a literal typography override on the run.
+    editor
+      .chain()
+      .selectAll()
+      .setMark('textStyle', { color: 'var(--palette-3)', fontWeight: 'bold' })
+      .run();
+
+    relinkTypographyChain(editor, {
+      fontFamily: 'Lato',
+      fontWeight: 'bold',
+    }).run();
+
+    const attrs = firstRunAttrs(editor);
+
+    // Colour is untouched; typography follows the new role.
+    expect(attrs.color).toBe('var(--palette-3)');
+    expect(attrs.fontWeight).toBe('var(--role-font-weight)');
+    expect(attrs.fontFamily).toBe('var(--role-font-family)');
+  });
+
+  // The multi-colour case: a doc whose runs each carry a DIFFERENT colour (and one with
+  // none). Relinking to a role that defines only family + weight forces the other attrs to
+  // unset — which nulls them via `removeEmptyTextStyle`, so a run keeps its textStyle mark
+  // (and its colour) as long as it still carries one. Every run's own colour must survive.
+  it('preserves per-run colours across a multi-colour doc when relinking', () => {
+    const editor = mk('<p>RRRBBBNNN</p>');
+
+    editor
+      .chain()
+      .setTextSelection({ from: 1, to: 4 }) // "RRR"
+      .setMark('textStyle', { color: 'var(--palette-1)', fontStyle: 'italic' })
+      .setTextSelection({ from: 4, to: 7 }) // "BBB"
+      .setMark('textStyle', { color: 'var(--palette-2)' })
+      .selectAll()
+      .setMark('textStyle', { fontWeight: 'bold' }) // uniform typography override
+      .run();
+
+    // Role defines family + weight only → line-height / letter-spacing / style / decoration unset.
+    relinkTypographyChain(editor, {
+      fontFamily: 'Lato',
+      fontWeight: 'bold',
+    }).run();
+
+    const runs = (editor.getJSON().content?.[0]?.content ?? []).map(
+      (node: any) => ({
+        text: node.text,
+        attrs:
+          (node.marks ?? []).find((m: any) => m.type === 'textStyle')?.attrs ??
+          {},
+      }),
+    );
+
+    const byText = (t: string) => runs.find((r: any) => r.text === t)!;
+
+    // Each run keeps its OWN colour...
+    expect(byText('RRR').attrs.color).toBe('var(--palette-1)');
+    expect(byText('BBB').attrs.color).toBe('var(--palette-2)');
+    expect(byText('NNN').attrs.color ?? null).toBeNull();
+
+    // ...while every run's typography is relinked to the role and the unset attr is gone.
+    for (const t of ['RRR', 'BBB', 'NNN']) {
+      expect(byText(t).attrs.fontWeight).toBe('var(--role-font-weight)');
+      expect(byText(t).attrs.fontFamily).toBe('var(--role-font-family)');
+      expect(byText(t).attrs.fontStyle ?? null).toBeNull();
+    }
+  });
+});
+
+describe('hasRunTypographyOverride (the asterisk)', () => {
+  let editors: Editor[] = [];
+
+  const mk = (html: string) => {
+    const e = new Editor({
+      extensions: getRteExtensions({ restrictStarterKit: true }),
+    });
+
+    e.commands.setContent(html);
+    editors.push(e);
+
+    return e;
+  };
+
+  afterEach(() => {
+    editors.forEach((e) => e.destroy());
+    editors = [];
+  });
+
+  const ROLE = { fontFamily: 'Lato', fontSize: '1em', fontWeight: 'normal' };
+
+  it('flags one bold word, which readBlockTypography ignores', () => {
+    const editor = mk('<p><strong>A</strong>B</p>');
+
+    expect(readBlockTypography(editor).fontWeight).toBeUndefined();
+    expect(hasRunTypographyOverride(editor, ROLE)).toBe(true);
+  });
+
+  it('flags one word with its own size', () => {
+    const editor = mk(
+      '<p>Hello <span style="font-size: 3em">big</span> world</p>',
+    );
+
+    expect(hasRunTypographyOverride(editor, ROLE)).toBe(true);
+  });
+
+  it('is false when every run is absent, a role ref, or a literal equal to the role', () => {
+    const editor = mk('<p>AB</p>');
+
+    editor
+      .chain()
+      .setTextSelection({ from: 1, to: 2 })
+      .setMark('textStyle', {
+        fontFamily: "'Lato'",
+        fontWeight: 'var(--role-font-weight)',
+      })
+      .run();
+
+    expect(hasRunTypographyOverride(editor, ROLE)).toBe(false);
+  });
+
+  it('ignores a word-level colour (colour is not role typography)', () => {
+    const editor = mk('<p>A<span style="color: #ff0000">B</span></p>');
+
+    expect(hasRunTypographyOverride(editor, ROLE)).toBe(false);
+  });
+
+  it("ignores a link's own blue underline", () => {
+    const editor = mk(
+      '<p>Visit <a href="https://example.com"><u><span style="color: #0097d7">our site</span></u></a></p>',
+    );
+
+    expect(hasRunTypographyOverride(editor, ROLE)).toBe(false);
+  });
+
+  it('still flags a link with its own weight', () => {
+    const editor = mk(
+      '<p>Visit <a href="https://example.com"><strong>our site</strong></a></p>',
+    );
+
+    expect(hasRunTypographyOverride(editor, ROLE)).toBe(true);
+  });
+});
+
+describe('relinkRoleEqualRunsChain (apply to role)', () => {
+  let editors: Editor[] = [];
+
+  const mk = (html: string) => {
+    const e = new Editor({
+      extensions: getRteExtensions({ restrictStarterKit: true }),
+    });
+
+    e.commands.setContent(html);
+    editors.push(e);
+
+    return e;
+  };
+
+  afterEach(() => {
+    editors.forEach((e) => e.destroy());
+    editors = [];
+  });
+
+  const runs = (editor: Editor) =>
+    (editor.getJSON().content?.[0]?.content ?? []).map((node: any) => ({
+      text: node.text,
+      marks: (node.marks ?? []).map((m: any) => m.type),
+      attrs:
+        (node.marks ?? []).find((m: any) => m.type === 'textStyle')?.attrs ??
+        {},
+    }));
+
+  it('relinks the promoted whole-block value and keeps a word-level bold', () => {
+    const editor = mk('<p>AAA BBB</p>');
+
+    editor
+      .chain()
+      .selectAll()
+      .setMark('textStyle', { fontSize: '4em', color: 'var(--palette-2)' })
+      .setTextSelection({ from: 5, to: 8 }) // "BBB"
+      .setMark('textStyle', { fontWeight: 'bold' })
+      .setTextSelection(2)
+      .run();
+
+    relinkRoleEqualRunsChain(editor, {
+      fontSize: '4em',
+      fontWeight: 'normal',
+    }).run();
+
+    const [plain, bold] = runs(editor);
+
+    expect(plain.attrs.fontSize).toBe('var(--role-font-size)');
+    expect(bold.text).toBe('BBB');
+    expect(bold.attrs.fontSize).toBe('var(--role-font-size)');
+    expect(bold.attrs.fontWeight).toBe('bold'); // differs from the role → stays
+    expect(bold.attrs.color).toBe('var(--palette-2)');
+    expect(editor.state.selection.from).toBe(2); // selection untouched
+  });
+
+  it('drops a legacy mark equal to the role and keeps one that differs', () => {
+    const editor = mk('<p><strong>A</strong><em>B</em></p>');
+
+    relinkRoleEqualRunsChain(editor, { fontWeight: 'bold' }).run();
+
+    const [a, b] = runs(editor);
+
+    expect(a.marks).not.toContain('bold');
+    expect(a.attrs.fontWeight).toBe('var(--role-font-weight)');
+    expect(b.marks).toContain('italic'); // the role isn't italic → a word override
+  });
+
+  it('removes the textStyle mark when a relink leaves it empty', () => {
+    const editor = mk('<p><span style="font-style: normal">A</span></p>');
+
+    relinkRoleEqualRunsChain(editor, {}).run();
+
+    expect(runs(editor)[0].marks).not.toContain('textStyle');
+  });
+
+  const resetStrikeRun = () => {
+    const editor = mk('<p>A</p>');
+
+    editor
+      .chain()
+      .selectAll()
+      .setMark('textStyle', {
+        textDecoration: 'line-through',
+        textDecorationReset: true,
+      })
+      .run();
+
+    return editor;
+  };
+
+  it('relinks a reset run whose lines now equal the role and drops the marker', () => {
+    const editor = resetStrikeRun();
+
+    relinkRoleEqualRunsChain(
+      editor,
+      { textDecoration: 'line-through' },
+      { textDecoration: 'underline' },
+    ).run();
+
+    expect(runs(editor)[0].attrs.textDecoration).toBe(
+      'var(--role-text-decoration)',
+    );
+    expect(runs(editor)[0].attrs.textDecorationReset).toBeNull();
+  });
+
+  it('keeps a reset run whose lines still differ from the role', () => {
+    const editor = resetStrikeRun();
+
+    // The run shows strike only; the new role draws both lines, so the run is still an override.
+    relinkRoleEqualRunsChain(
+      editor,
+      { textDecoration: 'underline line-through' },
+      { textDecoration: 'underline' },
+    ).run();
+
+    expect(runs(editor)[0].attrs.textDecoration).toBe('line-through');
+    expect(runs(editor)[0].attrs.textDecorationReset).toBe(true);
+  });
+});

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

@@ -1,6 +1,6 @@
 import { describe, it, expect, afterEach } from 'vitest';
 import { Editor } from '@tiptap/vue-3';
-import { getRteExtensions } from '../getRteExtensions';
+import { getRteExtensions } from '@shared/rte-extensions.util';
 import { sanitizeRteJson } from '@brand-page-maker/utils/rte-sanitize.util';
 
 /**

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

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { Editor } from '@tiptap/vue-3';
 import StarterKit from '@tiptap/starter-kit';
-import { MaxLength } from './MaxLength';
+import { MaxLength } from '@shared/rte-extensions/MaxLength';
 
 function getEditorText(editor: Editor): string {
   return editor.state.doc.textContent;
@@ -56,4 +56,29 @@ describe('MaxLength Extension (Vitest)', () => {
     expect(getEditorText(editor)).toBe('Zabcdefghijklmnopqrs');
     expect(getEditorText(editor)).toHaveLength(20);
   });
+
+  // BP-5969 Brief 5 (R8): a selection spanning a paragraph boundary counts 2 extra POSITIONS
+  // (the boundary's own open/close) that aren't characters — `to - from` over-counted the room
+  // a paste had, letting an over-limit paste through for `appendTransaction` to trim from the
+  // field's END instead of the paste itself.
+  it('selected text', () => {
+    editor.destroy();
+    editor = new Editor({
+      editable: false,
+      extensions: [StarterKit, MaxLength.configure({ maxLength: 20 })],
+      content: '<p>abcdefgh</p><p>ijklmnop</p>',
+    });
+
+    // "gh" (end of paragraph 1) through "ij" (start of paragraph 2): 4 characters, 6 positions.
+    // jsdom has no global ClipboardEvent, so pass a plain Event — pasteText only reads its
+    // shape defensively and never needs a real clipboardData for the plain-text path.
+    editor.commands.setTextSelection({ from: 7, to: 13 });
+    editor.view.pasteText(
+      '1234567890',
+      new Event('paste') as unknown as ClipboardEvent,
+    );
+
+    expect(getEditorText(editor)).toBe('abcdef12345678klmnop');
+    expect(getEditorText(editor)).toHaveLength(20);
+  });
 });