@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -0,0 +1,139 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor } from '@tiptap/vue-3';
+import { getRteExtensions } from '@shared/rte-extensions.util';
+import { createFormattingActions } from '../formatting';
+
+interface Run {
+  text: string;
+  fontWeight: string | null;
+  fontStyle: string | null;
+  textDecoration: string | null;
+}
+
+// Types one character the way a browser does: the DOM text node changes first, then ProseMirror's
+// DOM observer reads the change back. A headless `insertText` skips that read-back, which is where
+// the bug lives.
+const typeIntoDom = (editor: Editor, char: string): void => {
+  const { view } = editor;
+  const { node, offset } = view.domAtPos(view.state.selection.from);
+  const textNode = (
+    node.nodeType === Node.TEXT_NODE ? node : node.childNodes[offset - 1]
+  ) as Text;
+  const lastText =
+    textNode.nodeType === Node.TEXT_NODE
+      ? textNode
+      : (textNode.lastChild as Text);
+
+  lastText.data += char;
+  document.getSelection()?.collapse(lastText, lastText.data.length);
+  (
+    view as unknown as { domObserver: { flush: () => void } }
+  ).domObserver.flush();
+};
+
+const runs = (editor: Editor): Run[] => {
+  const result: Run[] = [];
+
+  editor.state.doc.firstChild?.forEach((node) => {
+    const attrs = node.marks.find(
+      (mark) => mark.type.name === 'textStyle',
+    )?.attrs;
+
+    result.push({
+      text: node.text ?? '',
+      fontWeight: attrs?.fontWeight ?? null,
+      fontStyle: attrs?.fontStyle ?? null,
+      textDecoration: attrs?.textDecoration ?? null,
+    });
+  });
+
+  return result;
+};
+
+describe('ViewDomParser — typing keeps earlier runs as they are', () => {
+  let editor: Editor | undefined;
+  let host: HTMLElement | undefined;
+
+  afterEach(() => {
+    editor?.destroy();
+    host?.remove();
+  });
+
+  const mount = (): Editor => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    editor = new Editor({
+      element: host,
+      extensions: getRteExtensions({
+        restrictStarterKit: true,
+        editing: {},
+      }),
+      content: '<p>Hi</p>',
+    });
+    editor.commands.focus('end');
+
+    return editor;
+  };
+
+  it('underline armed after bold text applies only to the next character', () => {
+    const e = mount();
+    const actions = createFormattingActions(e);
+
+    actions.toggleBold();
+    typeIntoDom(e, 'B');
+    typeIntoDom(e, 'B');
+    actions.toggleUnderline();
+    typeIntoDom(e, 'U');
+
+    expect(runs(e)).toEqual([
+      { text: 'Hi', fontWeight: null, fontStyle: null, textDecoration: null },
+      { text: 'BB', fontWeight: 'bold', fontStyle: null, textDecoration: null },
+      {
+        text: 'U',
+        fontWeight: 'bold',
+        fontStyle: null,
+        textDecoration: 'underline',
+      },
+    ]);
+  });
+
+  it('italic armed after underlined text applies only to the next character', () => {
+    const e = mount();
+    const actions = createFormattingActions(e);
+
+    actions.toggleUnderline();
+    typeIntoDom(e, 'U');
+    typeIntoDom(e, 'U');
+    actions.toggleItalic();
+    typeIntoDom(e, 'I');
+
+    expect(runs(e).slice(1)).toEqual([
+      {
+        text: 'UU',
+        fontWeight: null,
+        fontStyle: null,
+        textDecoration: 'underline',
+      },
+      {
+        text: 'I',
+        fontWeight: null,
+        fontStyle: 'italic',
+        textDecoration: 'underline',
+      },
+    ]);
+  });
+
+  it('paste still reads bold that foreign HTML carries only as a style', () => {
+    const e = mount();
+
+    const html = document.createElement('div');
+
+    html.innerHTML = '<p style="font-weight: bold">Pasted</p>';
+
+    // jsdom cannot run a full paste, so read with the parser ProseMirror's paste uses.
+    const pasted = e.view.someProp('clipboardParser')!.parse(html).firstChild!
+      .firstChild!;
+
+    expect(pasted.marks.map((mark) => mark.type.name)).toContain('bold');
+  });
+});

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

@@ -1,6 +1,13 @@
 import { ref, type Ref } from 'vue';
 import type { Editor } from '@tiptap/vue-3';
-import { emToPx, pxToEm, skipStyleDetection } from '@brand-page-maker/utils';
+import {
+  emToPx,
+  pxToEm,
+  skipStyleDetection,
+  roleVarOrLiteral,
+} from '@brand-page-maker/utils';
+import { roleVarRef } from '@shared/text-role-typography.util';
+import type { TextStyleDeclaration } from '@brand-page';
 import debounce from 'lodash/debounce';
 
 interface DropdownRef {
@@ -15,6 +22,9 @@ export const useFont = (
     selectedFontSizePx: number;
   },
   dropdownRef: Ref<DropdownRef | undefined>,
+  // The linked role's style when the block is canonical-linked, else undefined (legacy/unlinked).
+  // Drives the var-or-literal write: a pick equal to the role stores the role var, not a literal.
+  getRoleStyle: () => TextStyleDeclaration | undefined = () => undefined,
 ) => {
   const selectedFont = ref(fontSettings.selectedFont ?? 'Lato');
 
@@ -22,14 +32,23 @@ export const useFont = (
     dropdownRef.value?.hideMenu?.();
     selectedFont.value = font;
     fontSettings.selectedFont = font;
-    editor.chain().focus().setFontFamily(font).run();
+    editor
+      .chain()
+      .focus()
+      .setFontFamily(roleVarOrLiteral('fontFamily', font, getRoleStyle()))
+      .run();
   };
 
+  // Role application (role switch): write the role-agnostic var ref so the run follows the
+  // (new) container class — no literal to pin it.
   const toggleFontAll = (fontName: string) => {
     selectedFont.value = fontName;
     fontSettings.selectedFont = fontName;
     skipStyleDetection(
-      editor.chain().selectAll().setFontFamily(fontName),
+      editor
+        .chain()
+        .selectAll()
+        .setFontFamily(roleVarRef('fontFamily') ?? fontName),
     ).run();
   };
 
@@ -38,7 +57,16 @@ export const useFont = (
     fontSettings.selectedFontSizePx = size.includes('em')
       ? parseInt(emToPx(size))
       : parseInt(size);
-    editor.chain().setFontSize(fontSettings.selectedFontSize).run();
+    editor
+      .chain()
+      .setFontSize(
+        roleVarOrLiteral(
+          'fontSize',
+          fontSettings.selectedFontSize,
+          getRoleStyle(),
+        ),
+      )
+      .run();
   }, 150);
 
   const toggleFontSizeAll = (size: string) => {
@@ -47,7 +75,10 @@ export const useFont = (
       ? parseInt(emToPx(size))
       : parseInt(size);
     skipStyleDetection(
-      editor.chain().selectAll().setFontSize(fontSettings.selectedFontSize),
+      editor
+        .chain()
+        .selectAll()
+        .setFontSize(roleVarRef('fontSize') ?? fontSettings.selectedFontSize),
     ).run();
   };
 

package/src/brand-page-maker/composables/rich-text-editor/formatting.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 { createFormattingActions } from './formatting';
 import { isStyleChanged } from '@brand-page-maker/utils';
 
@@ -73,3 +73,377 @@ describe('createFormattingActions — colour keeps the text-style link', () => {
     expect(fired).toBe(true);
   });
 });
+
+// BP-5969 Phase A: bold/italic/underline/strike write textStyle attrs, not semantic marks.
+describe('createFormattingActions — weight/style/decoration as textStyle attrs', () => {
+  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 firstRun = (editor: Editor) =>
+    editor.getJSON().content?.[0]?.content?.[0] as {
+      marks?: { type: string; attrs?: Record<string, string> }[];
+    };
+  const textStyleAttrs = (editor: Editor) =>
+    (firstRun(editor).marks ?? []).find((m) => m.type === 'textStyle')?.attrs ??
+    {};
+  const markTypes = (editor: Editor) =>
+    (firstRun(editor).marks ?? []).map((m) => m.type);
+
+  it('toggleBold writes a fontWeight attr and no bold mark (unlinked → literal)', () => {
+    const editor = mk();
+
+    createFormattingActions(editor).toggleBold();
+
+    expect(textStyleAttrs(editor).fontWeight).toBe('bold');
+    expect(markTypes(editor)).not.toContain('bold');
+  });
+
+  it('toggleBold re-links to the role var when the pick equals the role', () => {
+    const editor = mk();
+
+    // Start from an explicit `normal` override against a bold role; toggling bold matches the role.
+    editor
+      .chain()
+      .selectAll()
+      .setMark('textStyle', { fontWeight: 'normal' })
+      .run();
+    editor.commands.selectAll();
+
+    createFormattingActions(
+      editor,
+      () => ({ fontWeight: 'bold' }) as never,
+    ).toggleBold();
+
+    // bold == role bold → the run references the role, so a later role edit still flows
+    expect(textStyleAttrs(editor).fontWeight).toBe('var(--role-font-weight)');
+  });
+
+  it('reads an explicit weight role ref from the role, not a conflicting block fill', () => {
+    const editor = mk();
+
+    editor
+      .chain()
+      .selectAll()
+      .setMark('textStyle', { fontWeight: 'var(--role-font-weight)' })
+      .run();
+    editor.commands.selectAll();
+    const actions = createFormattingActions(
+      editor,
+      () => ({ fontWeight: '400' }) as never,
+      () => ({ fontWeight: '700' }) as never,
+    );
+
+    expect(actions.boldActive()).toBe(false);
+
+    actions.toggleBold();
+
+    expect(textStyleAttrs(editor).fontWeight).toBe('bold');
+  });
+
+  it('reads an explicit style role ref from the role, not a conflicting block fill', () => {
+    const editor = mk();
+
+    editor
+      .chain()
+      .selectAll()
+      .setMark('textStyle', { fontStyle: 'var(--role-font-style)' })
+      .run();
+    editor.commands.selectAll();
+    const actions = createFormattingActions(
+      editor,
+      () => ({ fontStyle: 'normal' }) as never,
+      () => ({ fontStyle: 'italic' }) as never,
+    );
+
+    expect(actions.italicActive()).toBe(false);
+
+    actions.toggleItalic();
+
+    expect(textStyleAttrs(editor).fontStyle).toBe('italic');
+  });
+
+  it('composes underline + line-through into one textDecoration attr', () => {
+    const editor = mk();
+    const actions = createFormattingActions(editor);
+
+    actions.toggleUnderline();
+    editor.commands.selectAll();
+    actions.toggleStrike();
+
+    expect(textStyleAttrs(editor).textDecoration).toBe(
+      'underline line-through',
+    );
+    expect(markTypes(editor)).not.toContain('underline');
+    expect(markTypes(editor)).not.toContain('strike');
+  });
+
+  it('migrates a legacy <strong> run to the attr on toggle (removes the mark)', () => {
+    const editor = mk('<p><strong>Hello</strong></p>');
+
+    // The legacy run is bold via the semantic mark; toggling OFF must clear it, not add a second form.
+    expect(markTypes(editor)).toContain('bold');
+
+    createFormattingActions(editor).toggleBold();
+
+    expect(markTypes(editor)).not.toContain('bold');
+    expect(textStyleAttrs(editor).fontWeight).toBe('normal');
+  });
+});
+
+// R9 / D2: a format picked with the cursor inside a word, nothing selected, is armed for the next
+// typing only — the word stays as it is, the toolbar reads it as active, and typed text carries it.
+describe('createFormattingActions — collapsed cursor arms the next typing', () => {
+  let editors: Editor[] = [];
+
+  afterEach(() => {
+    editors.forEach((e) => e.destroy());
+    editors = [];
+  });
+
+  const inWord = () => {
+    const editor = new Editor({
+      extensions: getRteExtensions({ restrictStarterKit: true }),
+    });
+
+    editor.commands.setContent('<p>Hello</p>');
+    editor.commands.setTextSelection(3); // He|llo
+    editors.push(editor);
+
+    return editor;
+  };
+
+  const textStyleOf = (node: { marks?: readonly unknown[] } | undefined) =>
+    (
+      (node?.marks ?? []) as {
+        type: { name: string };
+        attrs: Record<string, unknown>;
+      }[]
+    ).find((mark) => mark.type.name === 'textStyle')?.attrs;
+
+  it.each([
+    ['bold', 'toggleBold', 'boldActive', 'fontWeight', 'bold'],
+    ['italic', 'toggleItalic', 'italicActive', 'fontStyle', 'italic'],
+    [
+      'underline',
+      'toggleUnderline',
+      'underlineActive',
+      'textDecoration',
+      'underline',
+    ],
+    [
+      'strikethrough',
+      'toggleStrike',
+      'strikeActive',
+      'textDecoration',
+      'line-through',
+    ],
+  ] as const)(
+    'collapsed cursor: %s is armed, the word is untouched, typed text carries it',
+    (_label, toggle, reader, attr, value) => {
+      const editor = inWord();
+      const actions = createFormattingActions(editor);
+      const before = JSON.stringify(editor.getJSON());
+
+      actions[toggle]();
+
+      expect(JSON.stringify(editor.getJSON())).toBe(before);
+      expect(
+        textStyleOf({ marks: editor.state.storedMarks ?? [] })?.[attr],
+      ).toBe(value);
+      expect(actions[reader]()).toBe(true);
+
+      editor.view.dispatch(editor.state.tr.insertText('X'));
+
+      const inserted = editor.state.doc.nodeAt(3);
+
+      expect(inserted?.text).toBe('X');
+      expect(textStyleOf(inserted ?? undefined)?.[attr]).toBe(value);
+    },
+  );
+});
+
+// Underline and strike share one CSS property, so a toggle over a mixed selection must compose
+// per run: striking "This change" keeps the underline already on "change".
+describe('createFormattingActions — decoration toggles keep each run’s other flag', () => {
+  let editors: Editor[] = [];
+
+  const mk = (html: string) => {
+    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 runs = (editor: Editor) =>
+    (
+      (editor.getJSON().content?.[0]?.content ?? []) as {
+        text: string;
+        marks?: { type: string; attrs?: Record<string, string> }[];
+      }[]
+    ).map(({ text, marks = [] }) => ({
+      text,
+      textDecoration: marks.find((m) => m.type === 'textStyle')?.attrs
+        ?.textDecoration,
+      legacy: marks
+        .map((m) => m.type)
+        .filter((type) => type === 'underline' || type === 'strike'),
+    }));
+  const textStyleAttrs = (editor: Editor) =>
+    (
+      editor.getJSON().content?.[0]?.content?.[0] as {
+        marks?: { type: string; attrs?: Record<string, unknown> }[];
+      }
+    ).marks?.find((mark) => mark.type === 'textStyle')?.attrs ?? {};
+
+  it('strike over the whole text keeps the underline on "change"', () => {
+    const editor = mk(
+      '<p>This <span style="text-decoration: underline">change</span></p>',
+    );
+
+    createFormattingActions(editor).toggleStrike();
+
+    expect(runs(editor)).toEqual([
+      { text: 'This ', textDecoration: 'line-through', legacy: [] },
+      { text: 'change', textDecoration: 'underline line-through', legacy: [] },
+    ]);
+  });
+
+  it('strike off again keeps the underline on "change"', () => {
+    const editor = mk(
+      '<p>This <span style="text-decoration: underline">change</span></p>',
+    );
+    const actions = createFormattingActions(editor);
+
+    actions.toggleStrike();
+    editor.commands.selectAll();
+    actions.toggleStrike();
+
+    expect(runs(editor)).toEqual([
+      { text: 'This ', textDecoration: 'none', legacy: [] },
+      { text: 'change', textDecoration: 'underline', legacy: [] },
+    ]);
+  });
+
+  it('a legacy <u> run keeps its underline and moves it onto the attr', () => {
+    const editor = mk('<p>This <u>change</u></p>');
+
+    createFormattingActions(editor).toggleStrike();
+
+    expect(runs(editor)).toEqual([
+      { text: 'This ', textDecoration: 'line-through', legacy: [] },
+      { text: 'change', textDecoration: 'underline line-through', legacy: [] },
+    ]);
+  });
+
+  it('turning strike on after clearing a role underline keeps the underline cleared', () => {
+    const editor = mk('<p>Hello</p>');
+
+    editor
+      .chain()
+      .selectAll()
+      .setMark('textStyle', { textDecoration: 'none' })
+      .run();
+    editor.commands.selectAll();
+    createFormattingActions(
+      editor,
+      () => ({ textDecoration: 'underline' }) as never,
+    ).toggleStrike();
+
+    expect(runs(editor)[0].textDecoration).toBe('line-through');
+    expect(textStyleAttrs(editor).textDecorationReset).toBe(true);
+  });
+
+  it('turning a role underline off keeps the run strike', () => {
+    const editor = mk('<p>Hello</p>');
+
+    editor
+      .chain()
+      .selectAll()
+      .setMark('textStyle', { textDecoration: 'line-through' })
+      .run();
+    editor.commands.selectAll();
+    createFormattingActions(
+      editor,
+      () => ({ textDecoration: 'underline' }) as never,
+    ).toggleUnderline();
+
+    expect(runs(editor)[0].textDecoration).toBe('line-through');
+    expect(textStyleAttrs(editor).textDecorationReset).toBe(true);
+  });
+
+  it.each(['toggleUnderlineAll', 'toggleStrikeAll'] as const)(
+    '%s relinks a reset run to the role and drops the reset marker',
+    (action) => {
+      const editor = mk('<p>Hello</p>');
+
+      editor
+        .chain()
+        .selectAll()
+        .setMark('textStyle', {
+          textDecoration: 'line-through',
+          textDecorationReset: true,
+        })
+        .run();
+      createFormattingActions(editor)[action]();
+
+      expect(runs(editor)[0].textDecoration).toBe(
+        'var(--role-text-decoration)',
+      );
+      expect(textStyleAttrs(editor).textDecorationReset).toBeNull();
+    },
+  );
+
+  it('reads and clears a block underline before falling back to the role', () => {
+    const editor = mk('<p>Hello</p>');
+    const actions = createFormattingActions(
+      editor,
+      () => ({}) as never,
+      () => ({ textDecoration: 'underline' }) as never,
+    );
+
+    expect(actions.underlineActive()).toBe(true);
+
+    actions.toggleUnderline();
+
+    expect(actions.underlineActive()).toBe(false);
+    expect(runs(editor)[0].textDecoration).toBe('none');
+  });
+
+  it('reads as active only when every selected run has the flag', () => {
+    const editor = mk(
+      '<p>This <span style="text-decoration: underline">change</span></p>',
+    );
+    const actions = createFormattingActions(editor);
+
+    expect(actions.underlineActive()).toBe(false);
+
+    editor.commands.setTextSelection({ from: 6, to: 12 }); // "change"
+    expect(actions.underlineActive()).toBe(true);
+  });
+});