@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -0,0 +1,244 @@
+import { describe, it, expect } from 'vitest';
+import { authorContentRteFields } from './rte-authoring.util';
+import { rteDoc } from '@shared/rte-render.util';
+import { isTiptapDocument } from '@shared/rte-shape.util';
+import type { Content } from '@brand-page';
+
+const asContent = (o: Record<string, unknown>): Content =>
+  o as unknown as Content;
+
+const firstRunMarkColor = (doc: unknown): string | undefined => {
+  const run = (
+    doc as {
+      content?: {
+        content?: { marks?: { type: string; attrs?: { color?: string } }[] }[];
+      }[];
+    }
+  )?.content?.[0]?.content?.[0];
+
+  return run?.marks?.find((m) => m.type === 'textStyle')?.attrs?.color;
+};
+
+describe('authorContentRteFields (add-content writer — plain → doc)', () => {
+  it('converts a plain-string RTE field to a doc, bakes style.color into the mark, clears the object', () => {
+    const content = asContent({
+      type: 'banner-section',
+      title: 'Hello',
+      titleStyle: { textStyleType: 'heading1', color: 'var(--palette-0)' },
+    });
+
+    authorContentRteFields(content);
+
+    const fields = content as unknown as Record<string, any>;
+
+    expect(isTiptapDocument(fields.title)).toBe(true);
+    expect(firstRunMarkColor(fields.title)).toBe('var(--palette-0)');
+    // colour now lives in the mark, not on the style object (matches migration G)
+    expect(fields.titleStyle.color).toBeUndefined();
+  });
+
+  it('stamps textAlign from the style object onto the block node', () => {
+    const content = asContent({
+      type: 'banner-section',
+      title: 'Hi',
+      titleStyle: { textStyleType: 'heading1', textAlign: 'center' },
+    });
+
+    authorContentRteFields(content);
+
+    const fields = content as unknown as Record<string, any>;
+
+    expect(fields.title.content[0].attrs.textAlign).toBe('center');
+  });
+
+  it('authors shop title as a doc (RTE restored, BP-5969): colour into the mark, style cleared', () => {
+    const content = asContent({
+      type: 'shop-section',
+      title: 'My shop',
+      titleStyle: { textStyleType: 'heading1', color: 'var(--palette-0)' },
+    });
+
+    authorContentRteFields(content);
+
+    const fields = content as unknown as Record<string, any>;
+
+    expect(isTiptapDocument(fields.title)).toBe(true);
+    expect(firstRunMarkColor(fields.title)).toBe('var(--palette-0)');
+    expect(fields.titleStyle.color).toBeUndefined();
+  });
+
+  it('converts textItems[].text and clears each textStyle colour', () => {
+    const content = asContent({
+      type: 'text',
+      textItems: [
+        {
+          text: 'item text',
+          textStyle: { textStyleType: 'paragraph1', color: 'var(--palette-1)' },
+        },
+      ],
+    });
+
+    authorContentRteFields(content);
+
+    const item = (content as unknown as Record<string, any>).textItems[0];
+
+    expect(isTiptapDocument(item.text)).toBe(true);
+    expect(firstRunMarkColor(item.text)).toBe('var(--palette-1)');
+    expect(item.textStyle.color).toBeUndefined();
+  });
+
+  it('leaves an existing Tiptap doc untouched (no reconversion)', () => {
+    const doc = {
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'Rich' }] },
+      ],
+    };
+    const content = asContent({
+      type: 'banner-section',
+      title: doc,
+      titleStyle: { textStyleType: 'heading1' },
+    });
+
+    authorContentRteFields(content);
+
+    expect((content as unknown as Record<string, any>).title).toBe(doc);
+  });
+
+  it('converts percent-encoded newlines (%0A) into hard breaks, not a literal run', () => {
+    const content = asContent({
+      type: 'banner-section',
+      title: 'Line one%0ALine two',
+      titleStyle: { textStyleType: 'heading1' },
+    });
+
+    authorContentRteFields(content);
+
+    const doc = (content as unknown as Record<string, any>).title;
+
+    expect(isTiptapDocument(doc)).toBe(true);
+
+    const runs = doc.content[0].content as { type: string; text?: string }[];
+
+    // The line structure survives as text + hardBreak + text — not a literal "%0A".
+    expect(runs.some((n) => n.type === 'hardBreak')).toBe(true);
+    expect(runs.map((n) => n.text ?? '').join('')).not.toContain('%0A');
+    expect(runs.filter((n) => n.type === 'text').map((n) => n.text)).toEqual([
+      'Line one',
+      'Line two',
+    ]);
+  });
+
+  it('converts an uncoloured field to a doc with no colour mark', () => {
+    const content = asContent({
+      type: 'banner-section',
+      title: 'Plain',
+      titleStyle: { textStyleType: 'heading1' },
+    });
+
+    authorContentRteFields(content);
+
+    const fields = content as unknown as Record<string, any>;
+
+    expect(isTiptapDocument(fields.title)).toBe(true);
+    expect(firstRunMarkColor(fields.title)).toBeUndefined();
+  });
+
+  const optionsWith = (style: Record<string, string>): any =>
+    ({ heading1: { style } }) as any;
+
+  const firstRunMark = (doc: any) =>
+    doc.content[0].content[0].marks.find(
+      (m: { type: string }) => m.type === 'textStyle',
+    );
+
+  it('references the role-defined typography on every run (var refs) for a canonical-linked block', () => {
+    const content = asContent({
+      type: 'banner-section',
+      title: 'Hello',
+      titleStyle: { textStyleType: 'heading1', color: 'var(--palette-0)' },
+    });
+
+    authorContentRteFields(
+      content,
+      optionsWith({
+        fontFamily: 'Lato',
+        fontSize: '2em',
+        lineHeight: '1.2',
+        letterSpacing: '0.1em',
+      }),
+    );
+
+    const mark = firstRunMark(
+      (content as unknown as Record<string, any>).title,
+    );
+
+    expect(mark.attrs.fontFamily).toBe('var(--role-font-family)');
+    expect(mark.attrs.fontSize).toBe('var(--role-font-size)');
+    expect(mark.attrs.lineHeight).toBe('var(--role-line-height)');
+    expect(mark.attrs.letterSpacing).toBe('var(--role-letter-spacing)');
+    // colour is still baked into the same mark
+    expect(mark.attrs.color).toBe('var(--palette-0)');
+  });
+
+  it('references only the attrs the role defines (no ref for an absent role attr)', () => {
+    const content = asContent({
+      type: 'banner-section',
+      title: 'Hi',
+      titleStyle: { textStyleType: 'heading1' },
+    });
+
+    // role has no letterSpacing → no var ref for it (matches migration/buildInitialMarks)
+    authorContentRteFields(
+      content,
+      optionsWith({ fontFamily: 'Lato', fontSize: '2em', lineHeight: '1.2' }),
+    );
+
+    const mark = firstRunMark(
+      (content as unknown as Record<string, any>).title,
+    );
+
+    expect(mark.attrs.fontFamily).toBe('var(--role-font-family)');
+    expect(mark.attrs.letterSpacing).toBeUndefined();
+  });
+});
+
+/**
+ * BP-5969 — the writer must also ENRICH an already-authored doc, not only convert a string, because
+ * factories now emit `rteDoc(...)` as the source. Enrichment is the same either way: colour into the
+ * run mark + role refs. The empty-doc case is the ProseMirror constraint — no run to hold a mark, so
+ * colour stays on the style object.
+ */
+describe('authorContentRteFields — enriching a factory-authored doc', () => {
+  it('bakes style.color into the mark of an already-doc field and clears the object', () => {
+    const content = asContent({
+      type: 'banner-section',
+      title: rteDoc('Hello', 'center'), // factory-emitted doc source
+      titleStyle: { textStyleType: 'heading1', color: 'var(--palette-0)' },
+    });
+
+    authorContentRteFields(content);
+
+    const fields = content as unknown as Record<string, any>;
+
+    expect(isTiptapDocument(fields.title)).toBe(true);
+    expect(firstRunMarkColor(fields.title)).toBe('var(--palette-0)');
+    expect(fields.titleStyle.color).toBeUndefined();
+  });
+
+  it('keeps an empty-doc field colour on the style object (no run to hold a mark)', () => {
+    const content = asContent({
+      type: 'banner-section',
+      title: rteDoc('', 'center'), // empty factory doc — no text run
+      titleStyle: { textStyleType: 'heading1', color: 'var(--palette-0)' },
+    });
+
+    authorContentRteFields(content);
+
+    const fields = content as unknown as Record<string, any>;
+
+    expect(isTiptapDocument(fields.title)).toBe(true);
+    // no run → colour cannot ride a mark → it must stay on the style object
+    expect(fields.titleStyle.color).toBe('var(--palette-0)');
+  });
+});

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

@@ -0,0 +1,175 @@
+import type { JSONContent } from '@tiptap/vue-3';
+import type { Content, TextStyleOptions, TextStyleType } from '@brand-page';
+import {
+  rteStyleFieldsFor,
+  pairedRteTextField,
+} from '@shared/color-strategies/rte-field-pairs';
+import { setRteTextColor } from '@shared/color-strategies/rte-color';
+import {
+  plainTextToRteJson,
+  isTiptapDocument,
+  type RichTextValue,
+} from '@shared/rte-render.util';
+import { isCanonicalLinked } from './rich-text-editor.util';
+import { roleVarRef, ROLE_VAR_ATTRS } from '@shared/text-role-typography.util';
+
+/** The linked role's style for a field's `textStyleType`, for the defined-attr check below. */
+const roleStyleFor = (
+  options: TextStyleOptions | undefined,
+  textStyleType: string | undefined,
+): Record<string, unknown> | undefined =>
+  textStyleType && options
+    ? (options[textStyleType as TextStyleType]?.style as unknown as
+        | Record<string, unknown>
+        | undefined)
+    : undefined;
+
+/**
+ * BP-5969 — reference the role's typography on every run of a canonical-linked authored doc, so
+ * new content matches migration output: the mark names the reference (self-describing, and the
+ * editor reads it without reaching into the store), and it follows role edits via the cascade.
+ * A ref is emitted ONLY for an attr the role actually defines — mirroring `buildInitialMarks` and
+ * migration `stripLiftRteDoc`, so authored and migrated runs share one shape (no reference to a
+ * `--role-*` var the role class never emits). No role style (options absent) → no refs.
+ */
+const applyRoleTypographyVars = (
+  doc: JSONContent,
+  roleStyle: Record<string, unknown> | undefined,
+): void => {
+  const refs = ROLE_VAR_ATTRS.flatMap(({ markAttr }) => {
+    const ref = roleVarRef(markAttr);
+
+    return ref && roleStyle?.[markAttr]
+      ? [[markAttr, ref] as [string, string]]
+      : [];
+  });
+
+  if (!refs.length) return;
+
+  const walk = (node: JSONContent): void => {
+    if (node.type === 'text') {
+      const marks = (node.marks ??= []);
+      let textStyle = marks.find((mark) => mark.type === 'textStyle');
+
+      if (!textStyle) {
+        textStyle = { type: 'textStyle', attrs: {} };
+        marks.push(textStyle);
+      }
+
+      textStyle.attrs = { ...(textStyle.attrs ?? {}) };
+
+      for (const [attr, ref] of refs) textStyle.attrs[attr] = ref;
+    }
+
+    node.content?.forEach(walk);
+  };
+
+  walk(doc);
+};
+
+/**
+ * BP-5969 — author a NEW content item's RTE-eligible fields as Tiptap docs at CREATION, the
+ * replacement for the runtime plain→RTE "rewrap" that this change retires. It produces the SAME
+ * shape load-time migration-22 produces (convert plain→doc, bake the resolved element colour
+ * into the run mark, drop the style-object colour), so new and migrated content share one shape
+ * and nothing downstream ever needs to convert plain text again.
+ *
+ * Run AFTER `applyTextContrast` (which resolves the element's contrast colour onto `style.color`):
+ * this moves that colour into the mark — RAW, exactly as migration step D bakes it (no
+ * `getRTEColor` normalisation, which D also skips) — and clears it from the object (matching
+ * step G). Which fields count as RTE comes from `rteStyleFieldsFor`, the set the migration uses.
+ *
+ * Browser-only (maker content creation): `plainTextToRteJson` uses the native `DOMParser`.
+ */
+
+type AuthoredStyle =
+  | { color?: string; textAlign?: string; textStyleType?: string }
+  | undefined;
+
+// True when the doc has at least one text run — i.e. somewhere for a run mark (colour) to live.
+export const docHasTextRun = (doc: JSONContent): boolean => {
+  const walk = (node: JSONContent): boolean =>
+    node.type === 'text' ? true : (node.content ?? []).some(walk);
+
+  return walk(doc);
+};
+
+/**
+ * Author (or enrich) one RTE field into its final doc: bake the resolved element colour into the run
+ * mark and reference the role's typography on every run, matching migration output.
+ *
+ * The field's value is either an already-authored doc — the BP-5969 factory source (`rteDoc`) — or a
+ * plain string (legacy / AI callers); both normalise to a doc here. `undefined` for empty/absent
+ * input so callers can leave the field alone.
+ */
+const authorRteDoc = (
+  value: unknown,
+  style: AuthoredStyle,
+  roleStyle: Record<string, unknown> | undefined,
+): JSONContent | undefined => {
+  let doc = isTiptapDocument(value)
+    ? (value as JSONContent)
+    : plainTextToRteJson(value as RichTextValue | null | undefined);
+
+  if (!doc) return undefined;
+
+  // Colour rides the run mark — but ONLY when there is a run. An empty doc (empty field) has no text
+  // node to hold a mark, so its colour stays on `style.color` until the user types (the editor's
+  // `buildInitialMarks` seeds the first run from it); stripping it here would strand it.
+  if (style?.color && docHasTextRun(doc)) {
+    doc = setRteTextColor(doc, style.color) ?? doc;
+    delete style.color; // colour now lives in the mark (matches migration step G)
+  }
+
+  if (style?.textAlign) {
+    for (const block of doc.content ?? []) {
+      block.attrs = { ...(block.attrs ?? {}), textAlign: style.textAlign };
+    }
+  }
+
+  // Canonical-linked: reference the role's (defined) typography on every run.
+  if (isCanonicalLinked(style)) applyRoleTypographyVars(doc, roleStyle);
+
+  return doc;
+};
+
+export const authorContentRteFields = (
+  content: Content,
+  // Role definitions, so a run references only the attrs its role actually defines (matches
+  // migration output). Absent → no typography refs (colour/textAlign still authored).
+  textStyleOptions?: TextStyleOptions,
+): void => {
+  const fields = content as unknown as Record<string, unknown>;
+
+  for (const styleField of rteStyleFieldsFor(content.type)) {
+    const textField = pairedRteTextField(content.type, styleField);
+
+    if (!textField) continue;
+
+    const style = fields[styleField] as AuthoredStyle;
+
+    const doc = authorRteDoc(
+      fields[textField],
+      style,
+      roleStyleFor(textStyleOptions, style?.textStyleType),
+    );
+
+    if (doc) fields[textField] = doc;
+  }
+
+  const textItems = fields.textItems as
+    | { text?: unknown; textStyle?: AuthoredStyle }[]
+    | undefined;
+
+  if (Array.isArray(textItems)) {
+    for (const item of textItems) {
+      const doc = authorRteDoc(
+        item.text,
+        item.textStyle,
+        roleStyleFor(textStyleOptions, item.textStyle?.textStyleType),
+      );
+
+      if (doc) item.text = doc;
+    }
+  }
+};