@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -0,0 +1,110 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor } from '@tiptap/vue-3';
+import { getRteExtensions } from '@shared/rte-extensions.util';
+import {
+  RoleTypographyFill,
+  type RoleTypographyFillOptions,
+} from './RoleTypographyFill';
+
+// The editor box must draw a run the way the canvas's `fillRteRunTypography` does, or a role's
+// italic / underline shows on the canvas but not in the box, and turning it off looks like a no-op.
+describe('RoleTypographyFill', () => {
+  let editors: Editor[] = [];
+
+  const ROLE = {
+    fontWeight: 'bold',
+    fontStyle: 'italic',
+    textDecoration: 'underline line-through',
+  };
+
+  const mk = (
+    html: string,
+    getFillSource: RoleTypographyFillOptions['getFillSource'] = () => ({
+      role: ROLE,
+    }),
+  ) => {
+    const editor = new Editor({
+      element: document.createElement('div'),
+      extensions: [
+        ...getRteExtensions({ restrictStarterKit: true }),
+        RoleTypographyFill.configure({ getFillSource }),
+      ],
+      content: html,
+    });
+
+    editors.push(editor);
+
+    return editor;
+  };
+
+  // The inline style the text node's closest wrapper draws with.
+  const drawnStyle = (editor: Editor, text: string): string => {
+    const walker = document.createTreeWalker(
+      editor.view.dom,
+      NodeFilter.SHOW_TEXT,
+    );
+
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      if (node.textContent === text)
+        return node.parentElement?.getAttribute('style') ?? '';
+    }
+
+    return '';
+  };
+
+  afterEach(() => {
+    editors.forEach((e) => e.destroy());
+    editors = [];
+  });
+
+  it('draws a run with no weight / style / decoration of its own as the role', () => {
+    const style = drawnStyle(mk('<p>Hello</p>'), 'Hello');
+
+    expect(style).toContain('font-weight: var(--role-font-weight)');
+    expect(style).toContain('font-style: var(--role-font-style)');
+    expect(style).toContain('text-decoration: underline line-through');
+  });
+
+  it("leaves a run's own turned-off value to its mark", () => {
+    const editor = mk(
+      '<p><span style="font-weight: normal; font-style: normal; text-decoration: none">Off</span></p>',
+    );
+
+    const style = drawnStyle(editor, 'Off');
+
+    expect(style).toContain('text-decoration: none');
+    expect(style).not.toContain('text-decoration: var(--role-');
+  });
+
+  it('draws the role underline plus a local strikethrough', () => {
+    const editor = mk(
+      '<p><span style="text-decoration: line-through">Both</span></p>',
+      () => ({ role: { textDecoration: 'underline' } }),
+    );
+
+    expect(drawnStyle(editor, 'Both')).toContain(
+      'text-decoration: underline line-through',
+    );
+  });
+
+  it('leaves a legacy semantic mark to draw itself', () => {
+    const editor = mk('<p><em>Legacy</em></p>');
+
+    expect(drawnStyle(editor, 'Legacy')).not.toContain('font-style');
+  });
+
+  it('draws a block override the canvas would fill', () => {
+    const editor = mk('<p>Hello</p>', () => ({
+      role: ROLE,
+      block: { fontStyle: 'oblique' },
+    }));
+
+    expect(drawnStyle(editor, 'Hello')).toContain('font-style: oblique');
+  });
+
+  it('draws nothing for a block that is not role-linked', () => {
+    const editor = mk('<p>Hello</p>', () => undefined);
+
+    expect(drawnStyle(editor, 'Hello')).toBe('');
+  });
+});

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

@@ -0,0 +1,99 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { runTypography } from '@brand-page-maker/utils/rich-text-editor.util';
+import {
+  roleVarRef,
+  runTypographyFillValue,
+  type RoleVarMarkAttr,
+  composeTextDecoration,
+} from '@shared/text-role-typography.util';
+
+type Typography = Partial<Record<RoleVarMarkAttr, string>>;
+
+export interface RoleTypographyFillOptions {
+  // The linked role and the block's style object; undefined when the block isn't role-linked.
+  getFillSource: () => { role: Typography; block?: Typography } | undefined;
+}
+
+// The box's CSS pins family, size, spacing and line height, so only these show through.
+const FILLED_ATTRS = [
+  ['fontWeight', 'font-weight'],
+  ['fontStyle', 'font-style'],
+  ['textDecoration', 'text-decoration'],
+] as const;
+
+/**
+ * Draws the editor box the way the canvas does: a run with no weight / style / decoration of its
+ * own shows the value `fillRteRunTypography` would fill. Decorations are view-only, so the stored
+ * doc is untouched.
+ */
+export const RoleTypographyFill = Extension.create<RoleTypographyFillOptions>({
+  name: 'roleTypographyFill',
+
+  addOptions() {
+    return { getFillSource: () => undefined };
+  },
+
+  addProseMirrorPlugins() {
+    const { getFillSource } = this.options;
+
+    return [
+      new Plugin({
+        key: new PluginKey('roleTypographyFill'),
+        props: {
+          decorations(state) {
+            const source = getFillSource();
+
+            if (!source) return DecorationSet.empty;
+
+            const decorations: Decoration[] = [];
+
+            state.doc.descendants((node, pos) => {
+              if (!node.isText) return;
+
+              const run = runTypography(node);
+              const style = FILLED_ATTRS.flatMap(([attr, cssProp]) => {
+                if (attr === 'textDecoration') {
+                  const blockValue = runTypographyFillValue(
+                    attr,
+                    source.role,
+                    source.block,
+                  );
+                  const localValue =
+                    run.textDecoration === roleVarRef(attr) &&
+                    blockValue !== roleVarRef(attr)
+                      ? blockValue
+                      : (run.textDecoration ?? blockValue);
+                  const value = composeTextDecoration(
+                    source.role.textDecoration ?? 'none',
+                    localValue,
+                  );
+
+                  return value ? [`${cssProp}: ${value}`] : [];
+                }
+
+                if (run[attr] !== undefined) return [];
+
+                const value = runTypographyFillValue(
+                  attr,
+                  source.role,
+                  source.block,
+                );
+
+                return value ? [`${cssProp}: ${value}`] : [];
+              }).join('; ');
+
+              if (style)
+                decorations.push(
+                  Decoration.inline(pos, pos + node.nodeSize, { style }),
+                );
+            });
+
+            return DecorationSet.create(state.doc, decorations);
+          },
+        },
+      }),
+    ];
+  },
+});

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

@@ -0,0 +1,397 @@
+import { Extension } from '@tiptap/core';
+import type { JSONContent } from '@tiptap/vue-3';
+import { closeHistory } from '@tiptap/pm/history';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import type { EditorState } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+import { Slice, type Mark } from 'prosemirror-model';
+import { sanitizeRteJson } from '@brand-page-maker/utils';
+import {
+  alignPastedParagraphs,
+  parseOwnRteClipboardPayload,
+  plainTextToParagraphSlice,
+  relinkColorToPalette,
+  relinkRunTypographyToRole,
+  resolveRunColorForCopy,
+  resolveRunStyleForCopy,
+  resolveRunStyleForExternal,
+  RTE_CLIPBOARD_MIME_TYPE,
+  RTE_CLIPBOARD_VERSION,
+  type ResolvedRunStyle,
+  type RteClipboardContext,
+  type RteClipboardPayload,
+  type RteClipboardSliceJSON,
+} from '@brand-page-maker/utils/rte-clipboard.util';
+import {
+  AUTO_LINK_SKIP_STYLING_META,
+  linkDetachMarksAt,
+} from '@shared/rte-extensions/AutoLink';
+
+/**
+ * The maker RTE's copy, cut and paste, as one extension (James Joung: build it "as
+ * extension"). Kept out of `getRteExtensions` — see `rich-text-editor.md` *Entry points* —
+ * so this maker-only code never reaches the SSR/migration schema. The pure per-run/
+ * per-value work is `rte-clipboard.util.ts`; this file is the tree walk over a real
+ * selection/paste and the live ProseMirror wiring around it.
+ */
+
+type RteRunMarkJSON = { type: string; attrs?: Record<string, unknown> };
+
+export interface RteClipboardOptions {
+  /** The field's role, style object and site palette, read at event time. */
+  getContext: () => RteClipboardContext;
+  /** The first-type seed a text-only paste into an empty field takes, same as typing. */
+  getFirstInputMarks: (state: EditorState) => Mark[];
+}
+
+// `hardBreak` is left out: it carries no text of its own, so resolving it would give every
+// break a full `textStyle` mark the source run never had (R1).
+const INLINE_NODE_TYPES = new Set(['text']);
+
+type RunResolver = (
+  node: { marks?: RteRunMarkJSON[] },
+  context: RteClipboardContext,
+) => ResolvedRunStyle & { href?: string };
+
+/** Replace a run's `textStyle`/`highlight` marks with their resolved forms; every other mark
+ * (link, a legacy bold/italic/underline/strike) rides through untouched (R1). */
+const resolveRunMarks = (
+  node: JSONContent,
+  context: RteClipboardContext,
+  resolveRun: RunResolver,
+): JSONContent => {
+  const style: ResolvedRunStyle & { href?: string } = resolveRun(node, context);
+
+  delete style.href; // a link mark's own href, not a textStyle attr
+
+  const marks = (node.marks ?? [])
+    .filter((mark) => mark.type !== 'textStyle')
+    .map((mark) => {
+      if (mark.type !== 'highlight' || mark.attrs?.color == null) return mark;
+
+      return {
+        type: 'highlight',
+        attrs: {
+          color:
+            resolveRunColorForCopy(
+              mark.attrs.color as string,
+              context.colors,
+            ) ?? mark.attrs.color,
+        },
+      };
+    });
+
+  if (Object.keys(style).length)
+    marks.push({ type: 'textStyle', attrs: style });
+
+  return { ...node, marks };
+};
+
+const resolveContentForCopy = (
+  content: JSONContent[],
+  context: RteClipboardContext,
+  resolveRun: RunResolver,
+): JSONContent[] =>
+  content.map((node) => {
+    if (INLINE_NODE_TYPES.has(node.type ?? ''))
+      return resolveRunMarks(node, context, resolveRun);
+
+    return node.content
+      ? {
+          ...node,
+          content: resolveContentForCopy(node.content, context, resolveRun),
+        }
+      : node;
+  });
+
+const buildInternalSlice = (
+  content: JSONContent[],
+  openStart: number,
+  openEnd: number,
+  context: RteClipboardContext,
+): RteClipboardSliceJSON => {
+  const resolved = resolveContentForCopy(
+    content,
+    context,
+    resolveRunStyleForCopy,
+  );
+  const sanitized = sanitizeRteJson({ type: 'doc', content: resolved });
+
+  return {
+    content: sanitized.content ?? [],
+    ...(openStart ? { openStart } : {}),
+    ...(openEnd ? { openEnd } : {}),
+  };
+};
+
+/** Every text/link mark relinked to the destination (A5 steps 2–3): typography that equals the
+ * destination role (or its neutral) becomes the role var, and a colour equal to a palette entry
+ * links to it; everything else — including an unresolvable value — stays exactly as copied. */
+const relinkContentToDestination = (
+  content: JSONContent[],
+  context: RteClipboardContext,
+): JSONContent[] =>
+  content.map((node) => {
+    if (!INLINE_NODE_TYPES.has(node.type ?? ''))
+      return node.content
+        ? {
+            ...node,
+            content: relinkContentToDestination(node.content, context),
+          }
+        : node;
+
+    const isLinkRun = (node.marks ?? []).some((mark) => mark.type === 'link');
+
+    const marks = (node.marks ?? []).map((mark) => {
+      if (mark.type === 'textStyle') {
+        const relinked = relinkRunTypographyToRole(
+          (mark.attrs ?? {}) as ResolvedRunStyle,
+          context.role,
+        );
+
+        if (relinked.color !== undefined)
+          relinked.color = relinkColorToPalette(
+            relinked.color,
+            context.colors,
+            isLinkRun,
+          );
+
+        return { type: 'textStyle', attrs: relinked };
+      }
+
+      if (mark.type === 'highlight' && mark.attrs?.color != null) {
+        return {
+          type: 'highlight',
+          attrs: {
+            color: relinkColorToPalette(
+              mark.attrs.color as string,
+              context.colors,
+            ),
+          },
+        };
+      }
+
+      return mark;
+    });
+
+    return { ...node, marks };
+  });
+
+/** The destination alignment every pasted paragraph takes (Reading 14): the field's own alignment,
+ * else the alignment of the paragraph the cursor sits in. */
+const resolveDestinationAlign = (
+  state: EditorState,
+  context: RteClipboardContext,
+): string | undefined => {
+  if (context.block?.textAlign) return context.block.textAlign;
+
+  const { textAlign } = state.doc.resolve(state.selection.from).parent
+    .attrs as { textAlign?: string };
+
+  return textAlign;
+};
+
+/** The marks a text-only paste's runs take — the marks typing would take at that spot (Approach
+ * step 4): the first-type seed in an empty field; else, over an empty selection, the stored/
+ * cursor marks with AutoLink's end-of-link detach applied exactly as it applies to typed text;
+ * over a range, ProseMirror's own `insertText` rule (`$from.marksAcross($to)`), since replacing
+ * a selection is never a link's end-of-line position. */
+const resolvePlainPasteMarks = (
+  state: EditorState,
+  getFirstInputMarks: (state: EditorState) => Mark[],
+): RteRunMarkJSON[] => {
+  if (state.doc.textContent === '')
+    return getFirstInputMarks(state).map((mark) => mark.toJSON());
+
+  const { from, to } = state.selection;
+
+  if (from !== to) {
+    // `marksAcross` is null when nothing inline follows `from` within its own parent —
+    // a selection starting at a paragraph's end, or on an empty line. Real typing at
+    // that exact spot would get no marks; paste falls back to the marks AT `from`
+    // instead, so a routine "select to end of line, paste" doesn't lose the line's look.
+    // When `from` sits right at a link's end, AutoLink's own end-of-link detach applies
+    // first — the same one typing gets there — so the paste doesn't extend the link.
+    const marks =
+      state.storedMarks ??
+      state.doc.resolve(from).marksAcross(state.doc.resolve(to)) ??
+      linkDetachMarksAt(state, from) ??
+      state.doc.resolve(from).marks();
+
+    return marks.map((mark) => mark.toJSON());
+  }
+
+  const detached = linkDetachMarksAt(state, from);
+
+  const marks =
+    detached ?? state.storedMarks ?? state.doc.resolve(from).marks();
+
+  return marks.map((mark) => mark.toJSON());
+};
+
+/** Copy and cut share this: build every clipboard form the canvas's own look supports (A4), never
+ * mutating the doc. Returns false (no-op, browser default) for an empty selection or an unusable
+ * clipboard object. */
+const writeClipboardData = (
+  view: EditorView,
+  event: ClipboardEvent,
+  context: RteClipboardContext,
+): boolean => {
+  const { state } = view;
+
+  if (state.selection.empty) return false;
+
+  const data = event.clipboardData;
+
+  if (!data) return false;
+
+  const liveSlice = state.selection.content();
+  const sliceJson = liveSlice.toJSON() as RteClipboardSliceJSON | null;
+
+  if (!sliceJson) return false;
+
+  event.preventDefault();
+
+  const { openStart = 0, openEnd = 0 } = liveSlice;
+
+  const payload: RteClipboardPayload = {
+    v: RTE_CLIPBOARD_VERSION,
+    slice: buildInternalSlice(sliceJson.content, openStart, openEnd, context),
+  };
+
+  const externalContent = resolveContentForCopy(
+    sliceJson.content,
+    context,
+    resolveRunStyleForExternal,
+  );
+  const externalSlice = Slice.fromJSON(state.schema, {
+    content: externalContent,
+    ...(openStart ? { openStart } : {}),
+    ...(openEnd ? { openEnd } : {}),
+  });
+
+  const { dom, text } = view.serializeForClipboard(externalSlice);
+
+  data.clearData();
+  data.setData('text/plain', text);
+  data.setData('text/html', dom.innerHTML);
+  data.setData(RTE_CLIPBOARD_MIME_TYPE, JSON.stringify(payload));
+
+  return true;
+};
+
+export const RteClipboard = Extension.create<RteClipboardOptions>({
+  name: 'rteClipboard',
+
+  addOptions() {
+    return {
+      getContext: () => ({ role: undefined, block: undefined, colors: [] }),
+      getFirstInputMarks: () => [],
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const { getContext, getFirstInputMarks } = this.options;
+
+    return [
+      new Plugin({
+        key: new PluginKey('rteClipboard'),
+        props: {
+          handleDOMEvents: {
+            copy(view: EditorView, event: ClipboardEvent) {
+              return writeClipboardData(view, event, getContext());
+            },
+
+            cut(view: EditorView, event: ClipboardEvent) {
+              if (!view.editable) return false;
+
+              if (!writeClipboardData(view, event, getContext())) return false;
+
+              const tr = view.state.tr.deleteSelection();
+
+              tr.scrollIntoView();
+              tr.setMeta('uiEvent', 'cut');
+              view.dispatch(tr);
+
+              return true;
+            },
+
+            paste(view: EditorView, event: ClipboardEvent) {
+              if (!view.editable) return false;
+
+              const data = event.clipboardData;
+
+              if (!data) return false;
+
+              event.preventDefault();
+
+              const { state } = view;
+              const context = getContext();
+              const destinationAlign = resolveDestinationAlign(state, context);
+
+              const ownRaw = data.getData(RTE_CLIPBOARD_MIME_TYPE);
+              const ownPayload = ownRaw
+                ? parseOwnRteClipboardPayload(ownRaw)
+                : null;
+
+              let pasteSliceJson: RteClipboardSliceJSON | null = null;
+
+              if (ownPayload) {
+                pasteSliceJson = {
+                  content: alignPastedParagraphs(
+                    relinkContentToDestination(
+                      ownPayload.slice.content,
+                      context,
+                    ),
+                    destinationAlign,
+                  ),
+                  ...(ownPayload.slice.openStart
+                    ? { openStart: ownPayload.slice.openStart }
+                    : {}),
+                  ...(ownPayload.slice.openEnd
+                    ? { openEnd: ownPayload.slice.openEnd }
+                    : {}),
+                };
+              } else {
+                const plainText = data.getData('text/plain') || '';
+
+                if (plainText) {
+                  pasteSliceJson = plainTextToParagraphSlice(
+                    plainText,
+                    resolvePlainPasteMarks(state, getFirstInputMarks),
+                    destinationAlign,
+                  );
+                }
+              }
+
+              if (!pasteSliceJson) return true; // R10 — nothing to paste
+
+              let slice = Slice.fromJSON(state.schema, pasteSliceJson);
+              const isPlainTextPaste = !ownPayload;
+
+              view.someProp('transformPasted', (transform) => {
+                slice = transform(slice, view, isPlainTextPaste);
+              });
+
+              if (!slice.size) return true; // R8 — nothing fits
+
+              const tr = view.state.tr.replaceSelection(slice);
+
+              tr.setMeta('preventAutolink', true);
+              tr.setMeta(AUTO_LINK_SKIP_STYLING_META, true);
+              closeHistory(tr);
+              tr.scrollIntoView();
+              view.dispatch(tr);
+
+              // Seals the paste off as its own undo step (R12): typing right after opens a new
+              // group instead of merging into it (prosemirror-history groups within 500 ms).
+              view.dispatch(closeHistory(view.state.tr));
+
+              return true;
+            },
+          },
+        },
+      }),
+    ];
+  },
+});