@designcrowd/library.brand-page 6.2.11 → 6.2.12-hotfix-1

package/src/brand-page-maker/utils/rte-clipboard.util.test.ts

@@ -0,0 +1,558 @@
+import { describe, it, expect } from 'vitest';
+import type { ColorItem, GlobalTextStyleDeclaration } from '@brand-page';
+import { DEFAULT_PRIMARY } from '@brand-page/utils/color-palette.util';
+import { roleVarRef } from '@shared/text-role-typography.util';
+import {
+  alignPastedParagraphs,
+  isSameTypographyValue,
+  parseOwnRteClipboardPayload,
+  plainTextToParagraphSlice,
+  relinkColorToPalette,
+  relinkRunTypographyToRole,
+  resolveRunColorForCopy,
+  resolveRunStyleForCopy,
+  resolveRunStyleForExternal,
+  RTE_CLIPBOARD_VERSION,
+  type RteClipboardContext,
+} from './rte-clipboard.util';
+
+// "Heading 1 is Lato 6.875em bold 1.2; Paragraph 1 is Lato 1.375em normal 1.5" — the
+// plan's editor fixtures (Files affected › Tests), reused verbatim so these unit rows
+// match the integration rows' roles.
+const HEADING_1_ROLE: GlobalTextStyleDeclaration = {
+  fontFamily: 'Lato',
+  fontSize: '6.875em',
+  fontWeight: 'bold',
+  fontStyle: undefined,
+  letterSpacing: undefined,
+  lineHeight: '1.2',
+  textDecoration: undefined,
+  textStyleType: 'heading1',
+};
+
+const PARAGRAPH_1_ROLE: GlobalTextStyleDeclaration = {
+  fontFamily: 'Lato',
+  fontSize: '1.375em',
+  fontWeight: 'normal',
+  fontStyle: undefined,
+  letterSpacing: undefined,
+  lineHeight: '1.5',
+  textDecoration: undefined,
+  textStyleType: 'paragraph1',
+};
+
+const contextFor = (
+  role: GlobalTextStyleDeclaration | undefined,
+  colors: ColorItem[] = [],
+): RteClipboardContext => ({ role, block: undefined, colors });
+
+describe('resolveRunStyleForCopy', () => {
+  it('resolves role references', () => {
+    const run = {
+      marks: [
+        {
+          type: 'textStyle',
+          attrs: {
+            fontFamily: roleVarRef('fontFamily'),
+            fontSize: roleVarRef('fontSize'),
+            lineHeight: roleVarRef('lineHeight'),
+            fontWeight: roleVarRef('fontWeight'),
+            color: 'var(--palette-custom-a)',
+          },
+        },
+      ],
+    };
+    const colors: ColorItem[] = [
+      { id: 'palette-custom-a', value: '#e4572e', type: 'custom' },
+    ];
+
+    expect(
+      resolveRunStyleForCopy(run, contextFor(HEADING_1_ROLE, colors)),
+    ).toEqual({
+      fontFamily: 'Lato',
+      fontSize: '6.875em',
+      lineHeight: '1.2',
+      fontWeight: 'bold',
+      fontStyle: 'normal',
+      letterSpacing: 'normal',
+      textDecoration: 'none',
+      color: '#e4572e',
+    });
+  });
+
+  it('whole-field value', () => {
+    const run = { marks: [{ type: 'textStyle', attrs: {} }] };
+    const context: RteClipboardContext = {
+      role: HEADING_1_ROLE,
+      block: { fontSize: '3em' },
+      colors: [],
+    };
+
+    expect(resolveRunStyleForCopy(run, context).fontSize).toBe('3em');
+  });
+
+  it('unquotes a literal font family', () => {
+    const run = {
+      marks: [
+        { type: 'textStyle', attrs: { fontFamily: "'Playfair Display'" } },
+      ],
+    };
+
+    expect(
+      resolveRunStyleForCopy(run, contextFor(HEADING_1_ROLE)).fontFamily,
+    ).toBe('Playfair Display');
+
+    // A quoted stack: the outer-pair-only form of the regex used to leave the inner
+    // closing quote in place (`Playfair Display", serif`), which then failed
+    // sanitizeRteJson's safe-CSS-value check and was dropped outright.
+    const stacked = {
+      marks: [
+        {
+          type: 'textStyle',
+          attrs: { fontFamily: '"Playfair Display", serif' },
+        },
+      ],
+    };
+
+    expect(
+      resolveRunStyleForCopy(stacked, contextFor(HEADING_1_ROLE)).fontFamily,
+    ).toBe('Playfair Display, serif');
+  });
+
+  it('keeps legacy marks', () => {
+    const run = { marks: [{ type: 'italic' }, { type: 'underline' }] };
+
+    const resolved = resolveRunStyleForCopy(run, contextFor(HEADING_1_ROLE));
+
+    expect(resolved.fontStyle).toBe('italic');
+    expect(resolved.textDecoration).toBe('underline');
+    // No mark was added or dropped — the run still carries exactly its two legacy marks.
+    expect(run.marks).toEqual([{ type: 'italic' }, { type: 'underline' }]);
+  });
+});
+
+describe('isSameTypographyValue', () => {
+  it('same value written differently', () => {
+    expect(isSameTypographyValue('fontFamily', "'Lato'", 'Lato')).toBe(true);
+    expect(isSameTypographyValue('fontWeight', 'normal', undefined)).toBe(true);
+    expect(isSameTypographyValue('textDecoration', 'none', undefined)).toBe(
+      true,
+    );
+    expect(isSameTypographyValue('fontSize', '1.375em', '22px')).toBe(true);
+    expect(isSameTypographyValue('fontSize', '6.875em', '1.375em')).toBe(false);
+    expect(isSameTypographyValue('lineHeight', '1.2', '1.5')).toBe(false);
+  });
+});
+
+describe('relinkRunTypographyToRole', () => {
+  it('links a value only where it equals the role', () => {
+    const resolved = {
+      fontFamily: 'Lato',
+      fontSize: '6.875em',
+      lineHeight: '1.2',
+      fontWeight: 'bold',
+      fontStyle: 'normal',
+      letterSpacing: 'normal',
+      textDecoration: 'none',
+    };
+
+    const toParagraph1 = relinkRunTypographyToRole(resolved, PARAGRAPH_1_ROLE);
+
+    expect(toParagraph1.fontSize).toBe('6.875em');
+    expect(toParagraph1.fontWeight).toBe('bold');
+    expect(toParagraph1.lineHeight).toBe('1.2');
+    expect(toParagraph1.fontFamily).toBe(roleVarRef('fontFamily'));
+    expect(toParagraph1.fontStyle).toBe(roleVarRef('fontStyle'));
+    expect(toParagraph1.letterSpacing).toBe(roleVarRef('letterSpacing'));
+    expect(toParagraph1.textDecoration).toBe(roleVarRef('textDecoration'));
+
+    const toHeading1 = relinkRunTypographyToRole(resolved, HEADING_1_ROLE);
+
+    expect(toHeading1).toEqual({
+      fontFamily: roleVarRef('fontFamily'),
+      fontSize: roleVarRef('fontSize'),
+      lineHeight: roleVarRef('lineHeight'),
+      fontWeight: roleVarRef('fontWeight'),
+      fontStyle: roleVarRef('fontStyle'),
+      letterSpacing: roleVarRef('letterSpacing'),
+      textDecoration: roleVarRef('textDecoration'),
+    });
+
+    const toNoRole = relinkRunTypographyToRole(resolved, undefined);
+
+    expect(toNoRole).toEqual(resolved);
+  });
+});
+
+describe('alignPastedParagraphs', () => {
+  it('destination alignment', () => {
+    const content = [
+      { type: 'paragraph', attrs: { textAlign: 'center' }, content: [] },
+      { type: 'paragraph', attrs: { textAlign: 'center' }, content: [] },
+    ];
+
+    const out = alignPastedParagraphs(content, 'left');
+
+    expect(out.every((node) => node.attrs?.textAlign === 'left')).toBe(true);
+
+    // No destination alignment resolves anywhere: clear the source's own alignment rather
+    // than leave it — an open-ended merge would otherwise repaint the destination's own
+    // trailing text with it (review blocking finding).
+    const unaligned = alignPastedParagraphs(content, undefined);
+
+    expect(unaligned.every((node) => node.attrs?.textAlign === undefined)).toBe(
+      true,
+    );
+  });
+});
+
+describe('resolveRunColorForCopy', () => {
+  it('one normalised colour', () => {
+    expect(resolveRunColorForCopy('#E4572E', [])).toBe('#e4572e');
+    expect(resolveRunColorForCopy('#e4572e', [])).toBe('#e4572e');
+    expect(resolveRunColorForCopy('rgb(228, 87, 46)', [])).toBe('#e4572e');
+
+    const colors: ColorItem[] = [
+      { id: 'palette-0', value: '#111111', type: 'palette' },
+    ];
+
+    expect(resolveRunColorForCopy('var(--logo-text-color)', colors)).toBe(
+      '#111111',
+    );
+
+    const blankPrimary: ColorItem[] = [
+      { id: 'palette-0', value: '', type: 'palette' },
+    ];
+
+    expect(resolveRunColorForCopy('var(--logo-text-color)', blankPrimary)).toBe(
+      DEFAULT_PRIMARY,
+    );
+
+    expect(resolveRunColorForCopy('var(--palette-custom-gone)', [])).toBe(
+      'var(--palette-custom-gone)',
+    );
+
+    // Highlight colours resolve through the same function as text colour.
+    expect(resolveRunColorForCopy('#E4572E', colors)).toBe('#e4572e');
+  });
+});
+
+describe('relinkColorToPalette', () => {
+  it('links a colour to the palette', () => {
+    expect(
+      relinkColorToPalette('#e4572e', [
+        { id: 'palette-0', value: '#e4572e', type: 'palette' },
+        { id: 'palette-custom-x', value: '#e4572e', type: 'custom' },
+      ]),
+    ).toBe('var(--palette-0)');
+
+    expect(
+      relinkColorToPalette('#ffffff', [
+        { id: 'palette-1', value: '#ffffff', type: 'palette' },
+        { id: 'palette-2', value: '#ffffff', type: 'palette' },
+      ]),
+    ).toBe('var(--palette-1)');
+
+    expect(
+      relinkColorToPalette('#e4572e', [
+        { id: 'palette-custom-x', value: '#e4572e', type: 'custom' },
+      ]),
+    ).toBe('var(--palette-custom-x)');
+
+    const untouched: ColorItem[] = [
+      { id: 'palette-0', value: '#111111', type: 'palette' },
+    ];
+
+    expect(relinkColorToPalette('#e4572e', untouched)).toBe('#e4572e');
+    expect(untouched).toEqual([
+      { id: 'palette-0', value: '#111111', type: 'palette' },
+    ]);
+
+    // A link's own fixed colour is never remapped, even where the palette holds a match.
+    expect(
+      relinkColorToPalette(
+        '#0097d7',
+        [{ id: 'palette-0', value: '#0097d7', type: 'palette' }],
+        true,
+      ),
+    ).toBe('#0097d7');
+
+    // Off a link, the same hex is an ordinary colour and links to the palette like any other.
+    expect(
+      relinkColorToPalette('#0097d7', [
+        { id: 'palette-0', value: '#0097d7', type: 'palette' },
+      ]),
+    ).toBe('var(--palette-0)');
+  });
+});
+
+describe('plainTextToParagraphSlice', () => {
+  it('lines become paragraphs', () => {
+    const marks = [{ type: 'textStyle', attrs: { color: '#111111' } }];
+
+    const result = plainTextToParagraphSlice(
+      'Opening hours\n\nOpen daily\r\nFind us\n',
+      marks,
+      'left',
+    );
+
+    expect(result?.openStart).toBe(1);
+    expect(result?.openEnd).toBe(1);
+    expect(result?.content).toHaveLength(3);
+    result?.content.forEach((paragraph) => {
+      expect(paragraph.attrs?.textAlign).toBe('left');
+      expect(paragraph.content?.[0]?.marks).toEqual(marks);
+    });
+    expect(result?.content.map((p) => p.content?.[0]?.text)).toEqual([
+      'Opening hours',
+      'Open daily',
+      'Find us',
+    ]);
+
+    expect(plainTextToParagraphSlice('', marks, 'left')).toBeNull();
+    expect(plainTextToParagraphSlice('\n\n', marks, 'left')).toBeNull();
+  });
+});
+
+describe('resolveRunStyleForExternal', () => {
+  it('what the canvas shows for other apps', () => {
+    const run = {
+      marks: [
+        {
+          type: 'textStyle',
+          attrs: {
+            fontFamily: roleVarRef('fontFamily'),
+            fontSize: roleVarRef('fontSize'),
+            lineHeight: roleVarRef('lineHeight'),
+            fontWeight: roleVarRef('fontWeight'),
+            color: 'var(--palette-custom-a)',
+          },
+        },
+        { type: 'link', attrs: { href: 'https://example.com' } },
+      ],
+    };
+    const colors: ColorItem[] = [
+      { id: 'palette-custom-a', value: '#e4572e', type: 'custom' },
+    ];
+
+    const style = resolveRunStyleForExternal(
+      run,
+      contextFor(HEADING_1_ROLE, colors),
+    );
+
+    expect(style.fontSize).toBe('110px');
+    expect(style.color).toBe('#e4572e');
+    expect(style.href).toBe('https://example.com');
+    expect(JSON.stringify(style)).not.toContain('var(');
+  });
+});
+
+describe('parseOwnRteClipboardPayload', () => {
+  const ownPayload = () => ({
+    v: RTE_CLIPBOARD_VERSION,
+    slice: {
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Hi',
+              marks: [{ type: 'textStyle', attrs: { color: '#e4572e' } }],
+            },
+          ],
+        },
+      ],
+    },
+  });
+
+  it('only what our editor could have made', () => {
+    const payload = ownPayload();
+
+    expect(parseOwnRteClipboardPayload(JSON.stringify(payload))).toEqual(
+      payload,
+    );
+
+    const withBadLink = {
+      v: RTE_CLIPBOARD_VERSION,
+      slice: {
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Hi',
+                marks: [
+                  { type: 'link', attrs: { href: 'javascript:alert(1)' } },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    };
+
+    expect(parseOwnRteClipboardPayload(JSON.stringify(withBadLink))).toBeNull();
+
+    const withCommentMark = {
+      v: RTE_CLIPBOARD_VERSION,
+      slice: {
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              { type: 'text', text: 'Hi', marks: [{ type: 'comment' }] },
+            ],
+          },
+        ],
+      },
+    };
+
+    expect(
+      parseOwnRteClipboardPayload(JSON.stringify(withCommentMark)),
+    ).toBeNull();
+
+    const withBulletList = {
+      v: RTE_CLIPBOARD_VERSION,
+      slice: {
+        content: [
+          {
+            type: 'bulletList',
+            content: [
+              {
+                type: 'listItem',
+                content: [
+                  {
+                    type: 'paragraph',
+                    content: [{ type: 'text', text: 'Hi' }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    };
+
+    expect(
+      parseOwnRteClipboardPayload(JSON.stringify(withBulletList)),
+    ).toBeNull();
+
+    // sanitizeRteJson allows 'paragraph' anywhere — it isn't a structural check — so a
+    // paragraph nested inside a paragraph survives it unchanged and only fails the
+    // schema's content-expression check() (review blocking finding).
+    const nestedParagraph = {
+      v: RTE_CLIPBOARD_VERSION,
+      slice: {
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              { type: 'paragraph', content: [{ type: 'text', text: 'Hi' }] },
+            ],
+          },
+        ],
+      },
+    };
+
+    expect(
+      parseOwnRteClipboardPayload(JSON.stringify(nestedParagraph)),
+    ).toBeNull();
+
+    // An openStart claiming more open ancestry than the content actually has: unbounded,
+    // this throws deep inside `replaceSelection` instead of falling back to text only.
+    const outOfRangeOpenStart = {
+      v: RTE_CLIPBOARD_VERSION,
+      slice: {
+        content: [
+          { type: 'paragraph', content: [{ type: 'text', text: 'Hi' }] },
+        ],
+        openStart: 5,
+      },
+    };
+
+    expect(
+      parseOwnRteClipboardPayload(JSON.stringify(outOfRangeOpenStart)),
+    ).toBeNull();
+
+    const negativeOpenStart = {
+      v: RTE_CLIPBOARD_VERSION,
+      slice: {
+        content: [
+          { type: 'paragraph', content: [{ type: 'text', text: 'Hi' }] },
+        ],
+        openStart: -1,
+      },
+    };
+
+    expect(
+      parseOwnRteClipboardPayload(JSON.stringify(negativeOpenStart)),
+    ).toBeNull();
+
+    // A fractional open depth passes the numeric bound check (0.5 < maxOpen) and would
+    // otherwise reach `replaceSelection`, which throws on a non-integer depth.
+    const fractionalOpenStart = {
+      v: RTE_CLIPBOARD_VERSION,
+      slice: {
+        content: [
+          { type: 'paragraph', content: [{ type: 'text', text: 'Hi' }] },
+        ],
+        openStart: 0.5,
+      },
+    };
+
+    expect(
+      parseOwnRteClipboardPayload(JSON.stringify(fractionalOpenStart)),
+    ).toBeNull();
+
+    expect(
+      parseOwnRteClipboardPayload(JSON.stringify({ ...ownPayload(), v: 2 })),
+    ).toBeNull();
+
+    expect(parseOwnRteClipboardPayload('{not valid json')).toBeNull();
+
+    const withUnsafeCss = {
+      v: RTE_CLIPBOARD_VERSION,
+      slice: {
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Hi',
+                marks: [
+                  {
+                    type: 'textStyle',
+                    attrs: { color: 'red; position: fixed' },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    };
+
+    expect(
+      parseOwnRteClipboardPayload(JSON.stringify(withUnsafeCss)),
+    ).toBeNull();
+
+    const reorderedKeys = {
+      v: RTE_CLIPBOARD_VERSION,
+      slice: {
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ text: 'Hi', type: 'text' }],
+          },
+        ],
+      },
+    };
+
+    expect(
+      parseOwnRteClipboardPayload(JSON.stringify(reorderedKeys)),
+    ).toBeNull();
+  });
+});