@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -0,0 +1,2485 @@
+import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
+import {
+  computed,
+  effectScope,
+  nextTick,
+  reactive,
+  ref,
+  type EffectScope,
+} from 'vue';
+import { createPinia, setActivePinia } from 'pinia';
+import type { Editor, JSONContent } from '@tiptap/vue-3';
+import { useRichTextEditor } from './useRichTextEditor';
+import { useUiContentSettingsStore } from '@shared/content-settings/store';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
+import { useUiColorPaletteStore } from '@shared/color-palette/store';
+import {
+  TextStyles,
+  type TextStyleDeclaration,
+  type ColorItem,
+} from '@brand-page';
+import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
+import { roleVarRef } from '@shared/text-role-typography.util';
+import { renderRteToHtml, sanitizeRteJson } from '@brand-page-maker/utils';
+import { RTE_CLIPBOARD_MIME_TYPE } from '@brand-page-maker/utils/rte-clipboard.util';
+import { DEFAULT_LINK_COLOR } from '@src/constants/rich-text-editor.constants';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
+import { undoDepth } from '@tiptap/pm/history';
+
+// A headless harness for the composable: a real Tiptap editor in jsdom, real Pinia stores, and
+// every reactive the component would pass in built by hand. Run inside an effect scope so its
+// watchers and computeds stop with the test.
+
+type Harness = ReturnType<typeof useRichTextEditor> & {
+  emit: ReturnType<typeof vi.fn>;
+  fontSettings: {
+    selectedFont: string;
+    selectedFontSize: string;
+    selectedFontSizePx: number;
+    isBold: boolean;
+    isItalic: boolean;
+    isUnderline: boolean;
+    isStrike: boolean;
+  };
+};
+
+const docOf = (attrs?: Record<string, unknown>): JSONContent => ({
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: [
+        {
+          type: 'text',
+          text: 'Hello',
+          ...(attrs ? { marks: [{ type: 'textStyle', attrs }] } : {}),
+        },
+      ],
+    },
+  ],
+});
+
+const EMPTY_DOC: JSONContent = {
+  type: 'doc',
+  content: [{ type: 'paragraph' }],
+};
+
+// A new block's runs, as the add path authors them: every role-defined attr a role ref.
+const ROLE_LINKED_RUN = {
+  fontFamily: roleVarRef('fontFamily'),
+  fontSize: roleVarRef('fontSize'),
+  fontWeight: roleVarRef('fontWeight'),
+  lineHeight: roleVarRef('lineHeight'),
+  color: '#111111',
+};
+
+const firstRunTextStyle = (json: JSONContent): Record<string, unknown> =>
+  (json.content?.[0]?.content?.[0]?.marks ?? []).find(
+    (mark) => mark.type === 'textStyle',
+  )?.attrs ?? {};
+
+let scopes: EffectScope[] = [];
+
+const buildEditor = (
+  doc: JSONContent,
+  styles: TextStyleDeclaration = { textStyleType: 'heading3' },
+  options: {
+    maxLength?: number;
+    readOnly?: boolean;
+    id?: string;
+    name?: string;
+    onSelectTextStyleType?: (option: ButtonGroupOption) => void;
+  } = {},
+): Harness => {
+  const styleSettingsStore = useUiStyleSettingsStore();
+  const fontSettings = reactive({
+    selectedTextStyle: '',
+    selectedFont: '',
+    selectedFontSize: '',
+    selectedFontSizePx: 0,
+    selectedTextColor: '',
+    selectedBackgroundColor: '',
+    isBold: false,
+    isItalic: false,
+    isUnderline: false,
+    isStrike: false,
+  });
+
+  const emit = vi.fn();
+
+  // Each editor gets its own scope (one scope per editor) so a test building several editors
+  // stops every one of them — a single shared scope would leak the earlier editors' watchers.
+  const scope = effectScope();
+
+  scopes.push(scope);
+
+  const result = scope.run(() =>
+    useRichTextEditor(
+      ref(doc) as never,
+      {
+        id: options.id ?? 'field-1',
+        name: options.name ?? 'title',
+        readOnly: options.readOnly ?? false,
+        maxLength: options.maxLength ?? 1000,
+        styles,
+        rawId: options.id ?? 'item-1',
+        placeholder: '',
+        textItemIndex: 0,
+        item: undefined as never,
+        contentType: 'banner-section',
+      },
+      emit,
+      fontSettings,
+      ref(),
+      computed({
+        get: () =>
+          styles.textStyleType
+            ? styleSettingsStore.textStyles.textStyleOptions[
+                styles.textStyleType
+              ]
+            : undefined,
+        set: () => undefined,
+      }),
+      options.onSelectTextStyleType ?? vi.fn(),
+      ref(false),
+      [] as ButtonGroupOption[],
+      ref(''),
+      ref(false),
+      ref('url') as never,
+    ),
+  )!;
+
+  return { ...result, emit, fontSettings };
+};
+
+// A minimal `DataTransfer` standing in for the browser's — jsdom's own doesn't hold data
+// reliably across separately-dispatched events. Carries a `Files`-only clipboard (T10.1) as an
+// empty `text/plain` with `files.length` set.
+class FakeDataTransfer {
+  private readonly store = new Map<string, string>();
+
+  files: { length: number } = { length: 0 };
+
+  setData(type: string, value: string): void {
+    this.store.set(type, value);
+  }
+
+  getData(type: string): string {
+    return this.store.get(type) ?? '';
+  }
+
+  clearData(): void {
+    this.store.clear();
+  }
+}
+
+// Fires a real copy/cut/paste DOM event on the editor's own element, so RteClipboard's
+// `handleDOMEvents` — the same path a real Cmd/Ctrl+C/X/V takes — runs.
+const fireClipboardEvent = (
+  editor: Editor,
+  type: 'copy' | 'cut' | 'paste',
+  dataTransfer: FakeDataTransfer,
+): void => {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+
+  Object.defineProperty(event, 'clipboardData', {
+    value: dataTransfer,
+    configurable: true,
+  });
+
+  editor.view.dom.dispatchEvent(event);
+};
+
+const copyFrom = (
+  editor: Editor,
+  type: 'copy' | 'cut' = 'copy',
+): FakeDataTransfer => {
+  const dataTransfer = new FakeDataTransfer();
+
+  fireClipboardEvent(editor, type, dataTransfer);
+
+  return dataTransfer;
+};
+
+const pasteInto = (editor: Editor, dataTransfer: FakeDataTransfer): void => {
+  fireClipboardEvent(editor, 'paste', dataTransfer);
+};
+
+// A plain `text/plain`-only clipboard (an outside app, or "paste and match style").
+const plainDataTransfer = (text: string): FakeDataTransfer => {
+  const dataTransfer = new FakeDataTransfer();
+
+  dataTransfer.setData('text/plain', text);
+
+  return dataTransfer;
+};
+
+const textStyleAttrs = (
+  node: JSONContent | undefined,
+): Record<string, unknown> =>
+  (node?.marks ?? []).find((mark) => mark.type === 'textStyle')?.attrs ?? {};
+
+const markTypes = (node: JSONContent | undefined): string[] =>
+  (node?.marks ?? []).map((mark) => mark.type);
+
+const paragraphs = (doc: JSONContent): JSONContent[] => doc.content ?? [];
+
+const setPaletteColors = (colors: ColorItem[]): void => {
+  useUiColorPaletteStore().setColors(colors);
+};
+
+// Finds a text run whose text CONTAINS the given text, wherever it lands. Substring, not exact
+// match: ProseMirror auto-joins adjacent text nodes once their marks match (e.g. a plain-text
+// paste landing next to identically-marked text becomes one combined node), so a pasted run's
+// own text is often a substring of a larger merged node rather than its own isolated one.
+const findTextNode = (
+  doc: JSONContent,
+  text: string,
+): JSONContent | undefined => {
+  let found: JSONContent | undefined;
+
+  const walk = (node: JSONContent): void => {
+    if (found) return;
+
+    if (node.type === 'text' && node.text?.includes(text)) {
+      found = node;
+
+      return;
+    }
+
+    node.content?.forEach(walk);
+  };
+
+  walk(doc);
+
+  return found;
+};
+
+const collectNodesOfType = (doc: JSONContent, type: string): JSONContent[] => {
+  const found: JSONContent[] = [];
+
+  const walk = (node: JSONContent): void => {
+    if (node.type === type) found.push(node);
+
+    node.content?.forEach(walk);
+  };
+
+  walk(doc);
+
+  return found;
+};
+
+// The document position right after / before a text run's first occurrence — readable position
+// math for the paste tests below (a cursor "inside" or "after" a given word).
+const posAfter = (editor: Editor, text: string): number => {
+  let pos = -1;
+
+  editor.state.doc.descendants((node, nodePos) => {
+    if (pos !== -1) return false;
+
+    if (node.isText && node.text?.includes(text)) {
+      pos = nodePos + node.text.indexOf(text) + text.length;
+
+      return false;
+    }
+
+    return undefined;
+  });
+
+  return pos;
+};
+
+const posBefore = (editor: Editor, text: string): number => {
+  let pos = -1;
+
+  editor.state.doc.descendants((node, nodePos) => {
+    if (pos !== -1) return false;
+
+    if (node.isText && node.text?.includes(text)) {
+      pos = nodePos + node.text.indexOf(text);
+
+      return false;
+    }
+
+    return undefined;
+  });
+
+  return pos;
+};
+
+describe('useRichTextEditor', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    useUiStyleSettingsStore()._setTextStyles({
+      textStyleOptions: TextStyles.GetDefaultTextStyle().textStyleOptions,
+    });
+  });
+
+  afterEach(() => {
+    scopes.forEach((s) => s.stop());
+    scopes = [];
+  });
+
+  test('apply to all: the block overrides reach the role, and siblings renormalise against the role before the promotion', () => {
+    const contentSettingsStore = useUiContentSettingsStore();
+    const renormalize = vi
+      .spyOn(contentSettingsStore, 'renormalizeTextStylesForRole')
+      .mockImplementation(() => undefined);
+    const styleSettingsStore = useUiStyleSettingsStore();
+    const before = {
+      ...styleSettingsStore.textStyles.textStyleOptions.heading3.style,
+    };
+
+    const { applyTypographyToRole, hasTypographyOverride, editor } =
+      buildEditor(
+        docOf({
+          fontFamily: 'Oswald',
+          fontSize: '4em',
+          fontWeight: 'normal',
+          letterSpacing: '0.1em',
+          lineHeight: '1.8',
+        }),
+      );
+
+    expect(hasTypographyOverride()).toBe(true);
+
+    applyTypographyToRole();
+
+    expect(
+      styleSettingsStore.textStyles.textStyleOptions.heading3.style,
+    ).toEqual({
+      ...before,
+      fontFamily: 'Oswald',
+      fontSize: '4em',
+      fontWeight: 'normal',
+      letterSpacing: '0.1em',
+      lineHeight: '1.8',
+    });
+    // the block itself relinks to the (new) role, and hands that doc to the store as the active
+    // field, so the store holds it at once and this editor isn't remounted
+    expect(hasTypographyOverride()).toBe(false);
+    expect(renormalize).toHaveBeenCalledWith('heading3', before, {
+      id: 'item-1',
+      name: 'title',
+      index: 0,
+      doc: sanitizeRteJson(editor.getJSON()),
+    });
+    expect(
+      firstRunTextStyle(
+        (renormalize.mock.calls[0][2] as { doc: JSONContent }).doc,
+      ).fontSize,
+    ).toBe(roleVarRef('fontSize'));
+
+    editor.destroy();
+  });
+
+  test('apply to all preserves the role underline when the block adds strike', () => {
+    const styleSettingsStore = useUiStyleSettingsStore();
+    const role = styleSettingsStore.textStyles.textStyleOptions.heading3.style;
+
+    styleSettingsStore.setTextStyleOption({
+      type: 'heading3',
+      style: { ...role, textDecoration: 'underline' },
+    });
+    vi.spyOn(
+      useUiContentSettingsStore(),
+      'renormalizeTextStylesForRole',
+    ).mockImplementation(() => undefined);
+
+    const { applyTypographyToRole, hasTypographyOverride, editor } =
+      buildEditor(docOf({ textDecoration: 'line-through' }));
+
+    applyTypographyToRole();
+
+    expect(
+      styleSettingsStore.textStyles.textStyleOptions.heading3.style
+        .textDecoration,
+    ).toBe('underline line-through');
+    expect(firstRunTextStyle(editor.getJSON()).textDecoration).toBe(
+      roleVarRef('textDecoration'),
+    );
+    expect(hasTypographyOverride()).toBe(false);
+
+    editor.destroy();
+  });
+
+  test('one bold word: the asterisk shows, only Reset is offered, and Reset clears it', () => {
+    const {
+      hasTypographyOverride,
+      canApplyTypographyToRole,
+      resetTypographyToRole,
+      editor,
+    } = buildEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: 'Hello ' },
+            {
+              type: 'text',
+              text: 'world',
+              marks: [{ type: 'textStyle', attrs: { fontWeight: 'normal' } }],
+            },
+          ],
+        },
+      ],
+    });
+
+    // Heading 3 is bold, so the one normal-weight word differs from its role.
+    expect(hasTypographyOverride()).toBe(true);
+    expect(canApplyTypographyToRole()).toBe(false);
+
+    resetTypographyToRole();
+
+    expect(hasTypographyOverride()).toBe(false);
+
+    editor.destroy();
+  });
+
+  test('apply to all: a word-level override stays on its word and keeps the asterisk', () => {
+    vi.spyOn(
+      useUiContentSettingsStore(),
+      'renormalizeTextStylesForRole',
+    ).mockImplementation(() => undefined);
+    const styleSettingsStore = useUiStyleSettingsStore();
+
+    const {
+      applyTypographyToRole,
+      hasTypographyOverride,
+      canApplyTypographyToRole,
+      editor,
+    } = buildEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Hello ',
+              marks: [{ type: 'textStyle', attrs: { fontSize: '4em' } }],
+            },
+            {
+              type: 'text',
+              text: 'world',
+              marks: [
+                {
+                  type: 'textStyle',
+                  attrs: { fontSize: '4em', fontStyle: 'italic' },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(canApplyTypographyToRole()).toBe(true);
+
+    applyTypographyToRole();
+
+    const role = styleSettingsStore.textStyles.textStyleOptions.heading3.style;
+    const [hello, world] = (editor.getJSON().content?.[0]?.content ?? []).map(
+      (node) =>
+        (node.marks ?? []).find((mark) => mark.type === 'textStyle')?.attrs ??
+        {},
+    );
+
+    expect(role.fontSize).toBe('4em');
+    expect(role.fontStyle).not.toBe('italic'); // not whole-block → not promoted
+    expect(hello.fontSize).toBe(roleVarRef('fontSize'));
+    expect(world.fontSize).toBe(roleVarRef('fontSize'));
+    expect(world.fontStyle).toBe('italic');
+    expect(hasTypographyOverride()).toBe(true);
+    expect(canApplyTypographyToRole()).toBe(false);
+
+    editor.destroy();
+  });
+
+  test('a role edit while the editor is open refreshes the B/I/U/S buttons', async () => {
+    const styleSettingsStore = useUiStyleSettingsStore();
+    const { fontSettings, editor } = buildEditor(docOf(ROLE_LINKED_RUN));
+
+    expect(fontSettings.isItalic).toBe(false);
+
+    styleSettingsStore.setTextStyleOption({
+      type: 'heading3',
+      style: {
+        ...styleSettingsStore.textStyles.textStyleOptions.heading3.style,
+        fontStyle: 'italic',
+      },
+    });
+    await nextTick();
+
+    expect(fontSettings.isItalic).toBe(true);
+
+    editor.destroy();
+  });
+
+  test('picked format: Bold on an empty field shows at once and the first character carries it', () => {
+    const { toggleBold, fontSettings, editor } = buildEditor(EMPTY_DOC, {
+      textStyleType: 'paragraph1',
+    });
+    const updates: string[] = [];
+
+    editor.on('update', () => updates.push('update'));
+
+    toggleBold();
+
+    // a stored mark only: the doc is unchanged, so no `update` fires to refresh the toolbar
+    expect(updates).toEqual([]);
+    expect(fontSettings.isBold).toBe(true);
+
+    editor.view.dom.dispatchEvent(
+      new InputEvent('beforeinput', {
+        inputType: 'insertText',
+        data: 'a',
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    editor.view.dispatch(editor.state.tr.insertText('a'));
+
+    const textStyle = firstRunTextStyle(editor.getJSON());
+
+    expect(textStyle.fontWeight).toBe('bold'); // the pick (Paragraph 1 is normal)
+    expect(textStyle.fontFamily).toBe(roleVarRef('fontFamily')); // the seed's role ref kept
+
+    editor.destroy();
+  });
+
+  // A snapshot apply rewrites the doc through transactions before the editor settles (BP-5506).
+  test('picked format: the toolbar ignores transactions while a history snapshot applies', () => {
+    const { fontSettings, editor } = buildEditor(EMPTY_DOC, {
+      textStyleType: 'paragraph1',
+    });
+
+    useHistoryStore().isApplyingSnapshot = true;
+    editor.commands.setMark('textStyle', { fontWeight: 'bold' });
+
+    expect(fontSettings.isBold).toBe(false);
+
+    useHistoryStore().isApplyingSnapshot = false;
+    editor.destroy();
+  });
+
+  test('before the first click: new Heading 2 content shows its role on the toolbar', () => {
+    const {
+      setInitialStyleSettings,
+      fontSettings,
+      lineHeightValue,
+      letterSpacingValue,
+      editor,
+    } = buildEditor(docOf(ROLE_LINKED_RUN), { textStyleType: 'heading2' });
+
+    setInitialStyleSettings();
+
+    expect(fontSettings.selectedFont).toBe('Lato');
+    expect(fontSettings.selectedFontSizePx).toBe(84); // 5.25em
+    expect(fontSettings.isBold).toBe(true); // headings are bold
+    expect(fontSettings.isItalic).toBe(false);
+    expect(lineHeightValue.value).toBe('1.2');
+    expect(letterSpacingValue.value).toBe('0');
+
+    editor.destroy();
+  });
+
+  test('before the first click: a size override on the runs shows instead of the role size', () => {
+    const { setInitialStyleSettings, fontSettings, editor } = buildEditor(
+      docOf({ ...ROLE_LINKED_RUN, fontSize: '6em' }),
+      { textStyleType: 'heading2' },
+    );
+
+    setInitialStyleSettings();
+
+    expect(fontSettings.selectedFontSizePx).toBe(96);
+
+    editor.destroy();
+  });
+  // Undo groups a toolbar edit with the typing around it by time; it never files it as a mount
+  // write-back, which would fold it into whatever undo step came last (undo-redo.md).
+  describe("undo history: which writes are the user's", () => {
+    const lastWriteIsHydration = (emit: ReturnType<typeof vi.fn>): unknown =>
+      emit.mock.calls
+        .filter(([event]) => event === 'update:modelValue')
+        .slice(-1)[0]?.[2]?.isHydrationWrite;
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    test("a toolbar command on an unfocused editor is the user's edit", () => {
+      const { triggerEditorStyleChange, emit, editor } = buildEditor(
+        docOf(ROLE_LINKED_RUN),
+        { textStyleType: 'paragraph1' },
+      );
+
+      editor.commands.selectAll();
+      expect(editor.isFocused).toBe(false); // the click moved focus to the toolbar button
+
+      triggerEditorStyleChange({ type: 'fontWeight', value: 'bold' });
+
+      expect(lastWriteIsHydration(emit)).toBe(false);
+
+      editor.destroy();
+    });
+
+    test("a debounced spacing change is the user's edit when its command runs", () => {
+      vi.useFakeTimers();
+
+      const { lineHeightValue, emit, editor } = buildEditor(
+        docOf(ROLE_LINKED_RUN),
+        { textStyleType: 'paragraph1' },
+      );
+
+      editor.commands.selectAll();
+      lineHeightValue.value = '1.8';
+      vi.advanceTimersByTime(300);
+
+      expect(lastWriteIsHydration(emit)).toBe(false);
+
+      editor.destroy();
+    });
+
+    test("Reset to default is the user's edit", () => {
+      const { resetTypographyToRole, emit, editor } = buildEditor(
+        docOf({ ...ROLE_LINKED_RUN, fontSize: '4em' }),
+      );
+
+      resetTypographyToRole();
+
+      expect(lastWriteIsHydration(emit)).toBe(false);
+
+      editor.destroy();
+    });
+
+    test('an unfocused change with no toolbar command is a mount write-back', () => {
+      const { emit, editor } = buildEditor(docOf(ROLE_LINKED_RUN));
+
+      editor.commands.setContent(
+        docOf({ ...ROLE_LINKED_RUN, fontSize: '3em' }),
+        {
+          emitUpdate: true,
+        },
+      );
+
+      expect(lastWriteIsHydration(emit)).toBe(true);
+
+      editor.destroy();
+    });
+
+    test('once the command window has passed, an unfocused change is a write-back again', () => {
+      vi.useFakeTimers();
+
+      const { triggerEditorStyleChange, emit, editor } = buildEditor(
+        docOf(ROLE_LINKED_RUN),
+        { textStyleType: 'paragraph1' },
+      );
+
+      editor.commands.selectAll();
+      triggerEditorStyleChange({ type: 'fontWeight', value: 'bold' });
+      vi.advanceTimersByTime(1001);
+      editor.commands.setContent(
+        docOf({ ...ROLE_LINKED_RUN, fontSize: '3em' }),
+        {
+          emitUpdate: true,
+        },
+      );
+
+      expect(lastWriteIsHydration(emit)).toBe(true);
+
+      editor.destroy();
+    });
+  });
+
+  describe('role switch', () => {
+    test('picking a role relinks the runs to it, dropping the size override', async () => {
+      const styles = reactive<TextStyleDeclaration>({
+        textStyleType: 'heading3',
+      });
+      const { editor } = buildEditor(
+        docOf({ ...ROLE_LINKED_RUN, fontSize: '4em' }),
+        styles,
+      );
+
+      styles.textStyleType = 'heading2';
+      await nextTick();
+
+      expect(firstRunTextStyle(editor.getJSON()).fontSize).toBe(
+        roleVarRef('fontSize'),
+      );
+
+      editor.destroy();
+    });
+
+    test('an undo that changes the role keeps the restored size override; a later pick still relinks', async () => {
+      const styles = reactive<TextStyleDeclaration>({
+        textStyleType: 'heading3',
+      });
+      const { editor } = buildEditor(
+        docOf({ ...ROLE_LINKED_RUN, fontSize: '4em' }),
+        styles,
+      );
+
+      useHistoryStore().snapshotAppliedToken += 1;
+      styles.textStyleType = 'heading2';
+      await nextTick();
+
+      expect(firstRunTextStyle(editor.getJSON()).fontSize).toBe('4em');
+
+      styles.textStyleType = 'heading4';
+      await nextTick();
+
+      expect(firstRunTextStyle(editor.getJSON()).fontSize).toBe(
+        roleVarRef('fontSize'),
+      );
+
+      editor.destroy();
+    });
+  });
+
+  // BP-5969 Brief 5 — RteClipboard: the maker RTE's copy, cut and paste.
+  describe('copy and paste', () => {
+    const HEADING1: TextStyleDeclaration = { textStyleType: 'heading1' };
+    const PARAGRAPH1: TextStyleDeclaration = { textStyleType: 'paragraph1' };
+
+    test('copied between our editors looks the same', () => {
+      setPaletteColors([
+        { id: 'palette-custom-a', value: '#e4572e', type: 'custom' },
+      ]);
+
+      const titleDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              { type: 'text', text: 'Fresh ' },
+              {
+                type: 'text',
+                text: 'Bakes',
+                marks: [
+                  {
+                    type: 'textStyle',
+                    attrs: {
+                      fontStyle: 'italic',
+                      color: 'var(--palette-custom-a)',
+                    },
+                  },
+                  { type: 'highlight', attrs: { color: '#fff2cc' } },
+                ],
+              },
+              { type: 'hardBreak' },
+              {
+                type: 'text',
+                text: 'our shop',
+                marks: [
+                  { type: 'link', attrs: { href: 'https://example.com' } },
+                  { type: 'textStyle', attrs: { color: DEFAULT_LINK_COLOR } },
+                  { type: 'underline' },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+
+      const title = buildEditor(titleDoc, HEADING1, {
+        id: 'title-1',
+        name: 'title',
+      });
+      const description = buildEditor(docOf(), PARAGRAPH1, {
+        id: 'desc-1',
+        name: 'description',
+      });
+
+      const beforeTitle = JSON.stringify(title.editor.getJSON());
+
+      title.editor.commands.selectAll();
+
+      const clipboard = copyFrom(title.editor);
+
+      expect(clipboard.getData('text/html')).toBeTruthy();
+      expect(clipboard.getData('text/plain')).toBeTruthy();
+      expect(clipboard.getData(RTE_CLIPBOARD_MIME_TYPE)).toBeTruthy();
+      expect(clipboard.getData('application/x-rte-styles')).toBe('');
+      expect(JSON.stringify(title.editor.getJSON())).toBe(beforeTitle);
+
+      description.editor.commands.focus('end');
+      pasteInto(description.editor, clipboard);
+
+      const doc = description.editor.getJSON();
+      const bakes = findTextNode(doc, 'Bakes');
+      const ourShop = findTextNode(doc, 'our shop');
+
+      expect(markTypes(bakes).sort()).toEqual(['highlight', 'textStyle']);
+      expect(textStyleAttrs(bakes).color).toBe('var(--palette-custom-a)');
+      expect(markTypes(ourShop).sort()).toEqual([
+        'link',
+        'textStyle',
+        'underline',
+      ]);
+      expect(
+        ourShop?.marks?.find((mark) => mark.type === 'link')?.attrs?.href,
+      ).toBe('https://example.com');
+      expect(textStyleAttrs(ourShop).color).toBe(DEFAULT_LINK_COLOR);
+      expect(collectNodesOfType(doc, 'hardBreak').length).toBeGreaterThan(0);
+
+      title.editor.destroy();
+      description.editor.destroy();
+    });
+
+    test('link colour stays hex', () => {
+      const titleDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'our shop',
+                marks: [
+                  { type: 'link', attrs: { href: 'https://example.com' } },
+                  { type: 'textStyle', attrs: { color: DEFAULT_LINK_COLOR } },
+                  { type: 'underline' },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      const title = buildEditor(titleDoc, HEADING1);
+      const description = buildEditor(docOf(), PARAGRAPH1);
+
+      title.editor.commands.selectAll();
+
+      const clipboard = copyFrom(title.editor);
+
+      // Simulate Chrome rewriting hex as rgb() in the HTML form — paste must ignore it.
+      clipboard.setData(
+        'text/html',
+        '<span style="color: rgb(0, 151, 215)">our shop</span>',
+      );
+
+      description.editor.commands.focus('end');
+      pasteInto(description.editor, clipboard);
+
+      const pasted = findTextNode(description.editor.getJSON(), 'our shop');
+
+      expect(textStyleAttrs(pasted).color).toBe(DEFAULT_LINK_COLOR);
+
+      title.editor.destroy();
+      description.editor.destroy();
+    });
+
+    test('pasted link keeps its own look', () => {
+      const sourceDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'our shop',
+                marks: [
+                  { type: 'link', attrs: { href: 'https://example.com' } },
+                  { type: 'textStyle', attrs: { color: '#e4572e' } },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      const source = buildEditor(sourceDoc, HEADING1);
+      const destination = buildEditor(docOf(), PARAGRAPH1);
+
+      source.editor.commands.selectAll();
+
+      const clipboard = copyFrom(source.editor);
+
+      destination.editor.commands.focus('start');
+      pasteInto(destination.editor, clipboard);
+
+      const pasted = findTextNode(destination.editor.getJSON(), 'our shop');
+
+      expect(textStyleAttrs(pasted).color).toBe('#e4572e');
+      expect(markTypes(pasted)).not.toContain('underline');
+
+      source.editor.destroy();
+      destination.editor.destroy();
+    });
+
+    test('keeps its look against the destination role', () => {
+      const roleLinkedRun = (): JSONContent => ({
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Fresh',
+                marks: [
+                  {
+                    type: 'textStyle',
+                    attrs: {
+                      fontFamily: roleVarRef('fontFamily'),
+                      fontSize: roleVarRef('fontSize'),
+                      lineHeight: roleVarRef('lineHeight'),
+                      letterSpacing: roleVarRef('letterSpacing'),
+                      fontWeight: roleVarRef('fontWeight'),
+                      fontStyle: roleVarRef('fontStyle'),
+                      textDecoration: roleVarRef('textDecoration'),
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      });
+
+      const title = buildEditor(roleLinkedRun(), HEADING1);
+
+      title.editor.commands.selectAll();
+      const clipboardToParagraph = copyFrom(title.editor);
+
+      title.editor.commands.selectAll();
+      const clipboardToHeading = copyFrom(title.editor);
+
+      const description = buildEditor(docOf(), PARAGRAPH1);
+
+      description.editor.commands.focus('end');
+      pasteInto(description.editor, clipboardToParagraph);
+
+      const inParagraph = findTextNode(description.editor.getJSON(), 'Fresh');
+      const paragraphAttrs = textStyleAttrs(inParagraph);
+
+      expect(paragraphAttrs.fontSize).toBe('6.875em');
+      expect(paragraphAttrs.fontWeight).toBe('bold');
+      expect(paragraphAttrs.lineHeight).toBe('1.2');
+      expect(paragraphAttrs.fontFamily).toBe(roleVarRef('fontFamily'));
+      expect(paragraphAttrs.letterSpacing).toBe(roleVarRef('letterSpacing'));
+      expect(paragraphAttrs.fontStyle).toBe(roleVarRef('fontStyle'));
+      expect(paragraphAttrs.textDecoration).toBe(roleVarRef('textDecoration'));
+      expect(description.hasTypographyOverride()).toBe(true);
+
+      const anotherHeading = buildEditor(docOf(), HEADING1, {
+        id: 'title-2',
+        name: 'title',
+      });
+
+      anotherHeading.editor.commands.focus('end');
+      pasteInto(anotherHeading.editor, clipboardToHeading);
+
+      const inHeading = findTextNode(anotherHeading.editor.getJSON(), 'Fresh');
+      const headingAttrs = textStyleAttrs(inHeading);
+
+      expect(headingAttrs.fontFamily).toBe(roleVarRef('fontFamily'));
+      expect(headingAttrs.fontSize).toBe(roleVarRef('fontSize'));
+      expect(headingAttrs.lineHeight).toBe(roleVarRef('lineHeight'));
+      expect(headingAttrs.letterSpacing).toBe(roleVarRef('letterSpacing'));
+      expect(headingAttrs.fontWeight).toBe(roleVarRef('fontWeight'));
+      expect(headingAttrs.fontStyle).toBe(roleVarRef('fontStyle'));
+      expect(headingAttrs.textDecoration).toBe(roleVarRef('textDecoration'));
+      expect(anotherHeading.hasTypographyOverride()).toBe(false);
+
+      title.editor.destroy();
+      description.editor.destroy();
+      anotherHeading.editor.destroy();
+    });
+
+    test('within one field', () => {
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Fresh',
+                marks: [
+                  {
+                    type: 'textStyle',
+                    attrs: { fontSize: roleVarRef('fontSize') },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      const title = buildEditor(doc, HEADING1);
+
+      title.editor.commands.selectAll();
+      const clipboard = copyFrom(title.editor);
+
+      title.editor.commands.focus('end');
+      pasteInto(title.editor, clipboard);
+
+      const pastedJson = title.editor.getJSON();
+      const allFresh = collectNodesOfType(pastedJson, 'text').filter(
+        (node) => node.text === 'Fresh',
+      );
+
+      // Copying into the SAME role: every attr copy resolved (filling the whole-field look, A5
+      // edge) relinks straight back to a role var, since the destination role is the source's own.
+      expect(allFresh).toHaveLength(2);
+      const pastedStyle = textStyleAttrs(allFresh[1]);
+
+      expect(pastedStyle.fontSize).toBe(roleVarRef('fontSize'));
+      expect(pastedStyle.fontFamily).toBe(roleVarRef('fontFamily'));
+      expect(pastedStyle.fontWeight).toBe(roleVarRef('fontWeight'));
+      expect(pastedStyle.lineHeight).toBe(roleVarRef('lineHeight'));
+
+      title.editor.destroy();
+    });
+
+    test("another site's role font", () => {
+      const styleSettingsStore = useUiStyleSettingsStore();
+
+      styleSettingsStore.setTextStyleOption({
+        type: 'heading1',
+        style: {
+          ...styleSettingsStore.textStyles.textStyleOptions.heading1.style,
+          fontFamily: 'Playfair Display',
+        },
+      });
+
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Fresh',
+                marks: [
+                  {
+                    type: 'textStyle',
+                    attrs: { fontFamily: roleVarRef('fontFamily') },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      const title = buildEditor(doc, HEADING1);
+
+      title.editor.commands.selectAll();
+      const clipboard = copyFrom(title.editor);
+
+      // "the other site": the destination's Heading 1 role is back to Lato.
+      styleSettingsStore.setTextStyleOption({
+        type: 'heading1',
+        style: {
+          ...styleSettingsStore.textStyles.textStyleOptions.heading1.style,
+          fontFamily: 'Lato',
+        },
+      });
+
+      const destination = buildEditor(docOf(), HEADING1, {
+        id: 'title-2',
+        name: 'title',
+      });
+
+      destination.editor.commands.focus('end');
+      pasteInto(destination.editor, clipboard);
+
+      const pasted = findTextNode(destination.editor.getJSON(), 'Fresh');
+      const attrs = textStyleAttrs(pasted);
+
+      expect(attrs.fontFamily).toBe('Playfair Display');
+      expect(attrs.fontSize).toBe(roleVarRef('fontSize'));
+      expect(attrs.fontWeight).toBe(roleVarRef('fontWeight'));
+      expect(attrs.lineHeight).toBe(roleVarRef('lineHeight'));
+      expect(attrs.letterSpacing).toBe(roleVarRef('letterSpacing'));
+      expect(attrs.fontStyle).toBe(roleVarRef('fontStyle'));
+      expect(attrs.textDecoration).toBe(roleVarRef('textDecoration'));
+
+      title.editor.destroy();
+      destination.editor.destroy();
+    });
+
+    test('reset after a paste', () => {
+      const sourceDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Fresh',
+                marks: [
+                  {
+                    type: 'textStyle',
+                    attrs: {
+                      fontFamily: roleVarRef('fontFamily'),
+                      fontSize: roleVarRef('fontSize'),
+                      lineHeight: roleVarRef('lineHeight'),
+                      letterSpacing: roleVarRef('letterSpacing'),
+                      fontWeight: roleVarRef('fontWeight'),
+                      fontStyle: roleVarRef('fontStyle'),
+                      textDecoration: roleVarRef('textDecoration'),
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      const title = buildEditor(sourceDoc, HEADING1);
+
+      title.editor.commands.selectAll();
+      const clipboard = copyFrom(title.editor);
+
+      const description = buildEditor(docOf(), PARAGRAPH1);
+
+      description.editor.commands.focus('end');
+      pasteInto(description.editor, clipboard);
+
+      expect(description.hasTypographyOverride()).toBe(true);
+
+      description.resetTypographyToRole();
+
+      expect(description.hasTypographyOverride()).toBe(false);
+
+      const doc = description.editor.getJSON();
+      const fresh = findTextNode(doc, 'Fresh');
+      const attrs = textStyleAttrs(fresh);
+
+      expect(attrs.fontSize).toBe(roleVarRef('fontSize'));
+      expect(attrs.fontWeight).toBe(roleVarRef('fontWeight'));
+      expect(attrs.lineHeight).toBe(roleVarRef('lineHeight'));
+
+      title.editor.destroy();
+      description.editor.destroy();
+    });
+
+    test("field's alignment", () => {
+      // Three centred paragraphs — pasted mid-field, the FIRST and LAST merge into the
+      // destination's own surrounding paragraph (an open-ended slice boundary joins rather than
+      // replaces), but the MIDDLE one is a genuinely new, standalone node with no neighbour to
+      // inherit from — its alignment can only have come from the destination's own field
+      // (Reading 14), never the source's 'center'.
+      const centredTitle: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            attrs: { textAlign: 'center' },
+            content: [{ type: 'text', text: 'Para one.' }],
+          },
+          {
+            type: 'paragraph',
+            attrs: { textAlign: 'center' },
+            content: [{ type: 'text', text: 'Para two.' }],
+          },
+          {
+            type: 'paragraph',
+            attrs: { textAlign: 'center' },
+            content: [{ type: 'text', text: 'Para three.' }],
+          },
+        ],
+      };
+      const title = buildEditor(centredTitle, HEADING1);
+
+      title.editor.commands.selectAll();
+      const clipboard = copyFrom(title.editor);
+
+      const descriptionDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'Start end.' }],
+          },
+        ],
+      };
+      const description = buildEditor(descriptionDoc, {
+        ...PARAGRAPH1,
+        textAlign: 'left',
+      });
+
+      // A real mounted field applies its own alignment on mount (RichTextEditorField calls
+      // this), so the surrounding paragraph the first/last pasted paragraphs merge into already
+      // carries it.
+      description.setInitialStyleSettings();
+      description.editor.commands.setTextSelection(
+        posAfter(description.editor, 'Start '),
+      );
+      pasteInto(description.editor, clipboard);
+
+      const middle = paragraphs(description.editor.getJSON()).find((p) =>
+        p.content?.some((run) => run.text?.includes('Para two.')),
+      );
+
+      expect(middle?.attrs?.textAlign).toBe('left');
+
+      const emptyCentred = buildEditor(EMPTY_DOC, {
+        ...PARAGRAPH1,
+        textAlign: 'center',
+      });
+
+      emptyCentred.setInitialStyleSettings();
+      pasteInto(emptyCentred.editor, plainDataTransfer('Hello there'));
+
+      const emptyResult = paragraphs(emptyCentred.editor.getJSON());
+
+      expect(emptyResult[0]?.attrs?.textAlign).toBe('center');
+
+      // No destination alignment resolves anywhere (no block override, no alignment on the
+      // destination's own paragraph): the merged LAST paragraph must drop the source's
+      // centred alignment rather than carry it over (review blocking finding — Reading 14).
+      const unaligned = buildEditor(
+        {
+          type: 'doc',
+          content: [
+            {
+              type: 'paragraph',
+              content: [{ type: 'text', text: 'Start end.' }],
+            },
+          ],
+        },
+        PARAGRAPH1,
+        { id: 'unaligned', name: 'description' },
+      );
+
+      unaligned.editor.commands.setTextSelection(
+        posAfter(unaligned.editor, 'Start '),
+      );
+      pasteInto(unaligned.editor, clipboard);
+
+      const unalignedLast = paragraphs(unaligned.editor.getJSON()).find((p) =>
+        p.content?.some((run) => run.text?.includes('end.')),
+      );
+
+      // The schema fills the attr's own default (null) rather than leaving it unset.
+      expect(unalignedLast?.attrs?.textAlign).toBeNull();
+
+      title.editor.destroy();
+      description.editor.destroy();
+      emptyCentred.editor.destroy();
+      unaligned.editor.destroy();
+    });
+
+    test('every pasted colour keeps its look', () => {
+      const whiteTitle: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Fresh',
+                marks: [{ type: 'textStyle', attrs: { color: '#ffffff' } }],
+              },
+            ],
+          },
+        ],
+      };
+      const title = buildEditor(whiteTitle, HEADING1);
+
+      title.editor.commands.selectAll();
+      const whiteClipboard = copyFrom(title.editor);
+
+      const description = buildEditor(docOf(), PARAGRAPH1);
+
+      description.editor.commands.focus('end');
+      pasteInto(description.editor, whiteClipboard);
+
+      expect(
+        textStyleAttrs(findTextNode(description.editor.getJSON(), 'Fresh'))
+          .color,
+      ).toBe('#ffffff');
+
+      setPaletteColors([
+        { id: 'palette-0', value: '#111111', type: 'palette' },
+      ]);
+
+      const paletteTitle: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Word',
+                marks: [
+                  {
+                    type: 'textStyle',
+                    attrs: { color: 'var(--palette-0)' },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      const titleB = buildEditor(paletteTitle, HEADING1, {
+        id: 'title-b',
+        name: 'title',
+      });
+
+      titleB.editor.commands.selectAll();
+      const paletteClipboard = copyFrom(titleB.editor);
+
+      const otherField = buildEditor(docOf(), PARAGRAPH1, {
+        id: 'other',
+        name: 'description',
+      });
+
+      otherField.editor.commands.focus('end');
+      pasteInto(otherField.editor, paletteClipboard);
+
+      expect(
+        textStyleAttrs(findTextNode(otherField.editor.getJSON(), 'Word')).color,
+      ).toBe('var(--palette-0)');
+
+      setPaletteColors([
+        { id: 'palette-custom-a', value: '#e4572e', type: 'custom' },
+      ]);
+
+      const customTitle: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Custom',
+                marks: [
+                  {
+                    type: 'textStyle',
+                    attrs: { color: 'var(--palette-custom-a)' },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      const titleC = buildEditor(customTitle, HEADING1, {
+        id: 'title-c',
+        name: 'title',
+      });
+
+      titleC.editor.commands.selectAll();
+      const customClipboard = copyFrom(titleC.editor);
+
+      setPaletteColors([]);
+
+      const paletteStore = useUiColorPaletteStore();
+      const paletteBeforePaste = JSON.parse(
+        JSON.stringify(paletteStore.colors),
+      );
+
+      const destination = buildEditor(docOf(), PARAGRAPH1, {
+        id: 'dest-c',
+        name: 'description',
+      });
+
+      destination.editor.commands.focus('end');
+      pasteInto(destination.editor, customClipboard);
+
+      expect(
+        textStyleAttrs(findTextNode(destination.editor.getJSON(), 'Custom'))
+          .color,
+      ).toBe('#e4572e');
+      expect(paletteStore.colors).toEqual(paletteBeforePaste);
+
+      title.editor.destroy();
+      description.editor.destroy();
+      titleB.editor.destroy();
+      otherField.editor.destroy();
+      titleC.editor.destroy();
+      destination.editor.destroy();
+    });
+
+    test('partial copy', () => {
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Bakes',
+                marks: [
+                  { type: 'textStyle', attrs: { color: '#e4572e' } },
+                  { type: 'bold' },
+                ],
+              },
+              { type: 'text', text: ' daily at ' },
+              {
+                type: 'text',
+                text: 'our shop',
+                marks: [
+                  { type: 'link', attrs: { href: 'https://example.com' } },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      const source = buildEditor(doc, HEADING1);
+
+      source.editor.commands.setTextSelection({
+        from: posBefore(source.editor, 'Bakes'),
+        to: posAfter(source.editor, 'our sh'),
+      });
+
+      const clipboard = copyFrom(source.editor);
+
+      const destination = buildEditor(docOf(), PARAGRAPH1);
+
+      destination.editor.commands.focus('end');
+      pasteInto(destination.editor, clipboard);
+
+      const destJson = destination.editor.getJSON();
+      const bakes = findTextNode(destJson, 'Bakes');
+      const ourSh = findTextNode(destJson, 'our sh');
+
+      expect(markTypes(bakes)).toContain('bold');
+      expect(textStyleAttrs(bakes).color).toBe('#e4572e');
+      expect(markTypes(ourSh)).toContain('link');
+      expect(
+        ourSh?.marks?.find((mark) => mark.type === 'link')?.attrs?.href,
+      ).toBe('https://example.com');
+
+      source.editor.destroy();
+      destination.editor.destroy();
+    });
+
+    test('across paragraphs', () => {
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'Fresh bread.' }],
+          },
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'Open daily.' }],
+          },
+        ],
+      };
+      const source = buildEditor(doc, PARAGRAPH1);
+
+      // Through "Open " (its own trailing space) — so that space, not the destination's, ends
+      // up between the pasted "Open" and whatever follows it.
+      source.editor.commands.setTextSelection({
+        from: posBefore(source.editor, 'bread.'),
+        to: posAfter(source.editor, 'Open '),
+      });
+
+      const clipboard = copyFrom(source.editor);
+
+      const destinationDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'Try our today.' }],
+          },
+        ],
+      };
+      const destination = buildEditor(destinationDoc, PARAGRAPH1, {
+        id: 'dest',
+        name: 'description',
+      });
+
+      // Right after "our " (its own trailing space) — so that space, not the pasted content's,
+      // ends up between the destination's own "our" and the pasted "bread.".
+      destination.editor.commands.setTextSelection(
+        posAfter(destination.editor, 'Try our '),
+      );
+      pasteInto(destination.editor, clipboard);
+
+      const text = destination.editor.state.doc.textBetween(
+        0,
+        destination.editor.state.doc.content.size,
+        '\n',
+      );
+
+      expect(text).toContain('Try our bread.');
+      expect(text).toContain('Open today.');
+
+      source.editor.destroy();
+      destination.editor.destroy();
+    });
+
+    test('cut keeps formatting', () => {
+      // A fully role-linked run (every typography attr a ref, `#e4572e` its only override) —
+      // the shape copy/paste actually work with — so a cut-then-paste-back round trip into the
+      // SAME role reproduces this byte-for-byte: copy resolves every ref to Heading 1's own
+      // value, and relinking against Heading 1 again turns each back into the same ref.
+      const bakesMarks = [
+        {
+          type: 'textStyle',
+          attrs: {
+            fontFamily: roleVarRef('fontFamily'),
+            fontSize: roleVarRef('fontSize'),
+            lineHeight: roleVarRef('lineHeight'),
+            letterSpacing: roleVarRef('letterSpacing'),
+            fontWeight: roleVarRef('fontWeight'),
+            fontStyle: roleVarRef('fontStyle'),
+            textDecoration: roleVarRef('textDecoration'),
+            color: '#e4572e',
+          },
+        },
+      ];
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              { type: 'text', text: 'Fresh ' },
+              { type: 'text', text: 'Bakes', marks: bakesMarks },
+              { type: 'text', text: ' daily' },
+            ],
+          },
+        ],
+      };
+      const harness = buildEditor(doc, HEADING1);
+      // The live editor already canonicalised `doc` through the schema at mount (mark attrs
+      // take the schema's own declaration order, not the object literal's) — capture that
+      // canonical form as the round-trip baseline rather than re-deriving it from `doc` itself.
+      const originalJson = JSON.stringify(
+        sanitizeRteJson(harness.editor.getJSON()),
+      );
+
+      const from = posBefore(harness.editor, 'Bakes');
+      const to = posAfter(harness.editor, 'Bakes');
+
+      harness.editor.commands.setTextSelection({ from, to });
+
+      const copyDoc: JSONContent = {
+        type: 'doc',
+        content: JSON.parse(JSON.stringify(doc.content)),
+      };
+      const copySource = buildEditor(copyDoc, HEADING1, {
+        id: 'copy-ref',
+        name: 'title',
+      });
+
+      copySource.editor.commands.setTextSelection({
+        from: posBefore(copySource.editor, 'Bakes'),
+        to: posAfter(copySource.editor, 'Bakes'),
+      });
+
+      const referenceClipboard = copyFrom(copySource.editor);
+
+      const cutClipboard = copyFrom(harness.editor, 'cut');
+
+      expect(cutClipboard.getData(RTE_CLIPBOARD_MIME_TYPE)).toBe(
+        referenceClipboard.getData(RTE_CLIPBOARD_MIME_TYPE),
+      );
+      expect(cutClipboard.getData('text/plain')).toBe(
+        referenceClipboard.getData('text/plain'),
+      );
+      expect(harness.editor.state.doc.textContent).toBe('Fresh  daily');
+
+      // undo() right after the cut — the cut itself is what comes back, not a later paste.
+      harness.editor.commands.undo();
+      expect(harness.editor.state.doc.textContent).toBe('Fresh Bakes daily');
+
+      // Redo the cut, then paste the SAME clipboard at the same spot — the doc round-trips.
+      harness.editor.commands.redo();
+      harness.editor.commands.setTextSelection(from);
+      pasteInto(harness.editor, cutClipboard);
+
+      expect(JSON.stringify(sanitizeRteJson(harness.editor.getJSON()))).toBe(
+        originalJson,
+      );
+
+      const nothingSelectedDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          { type: 'paragraph', content: [{ type: 'text', text: 'Hi' }] },
+        ],
+      };
+      const nothingSelected = buildEditor(nothingSelectedDoc, HEADING1, {
+        id: 'ns',
+        name: 'title',
+      });
+      const nothingSelectedBefore = JSON.stringify(
+        nothingSelected.editor.getJSON(),
+      );
+
+      nothingSelected.editor.commands.setTextSelection(1); // collapsed, nothing selected
+      const emptyClipboard = new FakeDataTransfer();
+
+      fireClipboardEvent(nothingSelected.editor, 'cut', emptyClipboard);
+
+      expect(JSON.stringify(nothingSelected.editor.getJSON())).toBe(
+        nothingSelectedBefore,
+      );
+      expect(emptyClipboard.getData('text/plain')).toBe('');
+
+      harness.editor.destroy();
+      copySource.editor.destroy();
+      nothingSelected.editor.destroy();
+    });
+
+    test('anything else arrives as text only', () => {
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Our story.',
+                marks: [
+                  {
+                    type: 'textStyle',
+                    attrs: {
+                      fontSize: roleVarRef('fontSize'),
+                      color: '#333333',
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      const harness = buildEditor(doc, PARAGRAPH1);
+      const dataTransfer = new FakeDataTransfer();
+
+      dataTransfer.setData(
+        'text/html',
+        '<h1>Opening hours</h1><p><strong style="color:red">Open daily</strong></p>',
+      );
+      dataTransfer.setData('text/plain', 'Opening hours\nOpen daily\nFind us');
+
+      harness.editor.commands.focus('end');
+      pasteInto(harness.editor, dataTransfer);
+
+      const json = harness.editor.getJSON();
+
+      // Three new visible lines exist — "Opening hours" joins straight into "Our story." (same
+      // marks as the paste point, so ProseMirror merges the run); "Open daily" and "Find us"
+      // land as their own paragraphs.
+      expect(paragraphs(json)).toHaveLength(3);
+
+      ['Opening hours', 'Open daily', 'Find us'].forEach((text) => {
+        const run = findTextNode(json, text);
+
+        expect(run).toBeDefined();
+        expect(markTypes(run)).not.toContain('link');
+        expect(markTypes(run)).not.toContain('bold');
+        expect(markTypes(run)).not.toContain('highlight');
+        expect(textStyleAttrs(run).color).toBe('#333333');
+      });
+
+      harness.editor.destroy();
+    });
+
+    test('formatting where it lands', () => {
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'sourdough',
+                marks: [
+                  {
+                    type: 'textStyle',
+                    attrs: { fontWeight: 'bold', color: '#e4572e' },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      const harness = buildEditor(doc, PARAGRAPH1);
+
+      harness.editor.commands.setTextSelection(
+        posAfter(harness.editor, 'sourdough'),
+      );
+      pasteInto(harness.editor, plainDataTransfer('and rye'));
+
+      const pasted = findTextNode(harness.editor.getJSON(), 'and rye');
+
+      expect(textStyleAttrs(pasted).fontWeight).toBe('bold');
+      expect(textStyleAttrs(pasted).color).toBe('#e4572e');
+
+      const spans = Array.from(
+        harness.editor.view.dom.querySelectorAll('span'),
+      );
+      const rye = spans.find((span) => span.textContent?.includes('and rye'));
+
+      expect(rye?.style.fontWeight).toBe('bold');
+
+      const sizedDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          { type: 'paragraph', content: [{ type: 'text', text: 'Fresh' }] },
+        ],
+      };
+      const sized = buildEditor(
+        sizedDoc,
+        { ...PARAGRAPH1, fontSize: '3em' },
+        {
+          id: 'sized',
+          name: 'description',
+        },
+      );
+
+      sized.editor.commands.setTextSelection(posAfter(sized.editor, 'Fresh'));
+      pasteInto(sized.editor, plainDataTransfer(' bread'));
+
+      const pastedSized = findTextNode(sized.editor.getJSON(), ' bread');
+
+      expect(textStyleAttrs(pastedSized).fontSize).toBeUndefined();
+
+      harness.editor.destroy();
+      sized.editor.destroy();
+    });
+
+    test('marks across a selection match typing', () => {
+      // A plain-text paste over a NON-empty selection takes ProseMirror's own `insertText`
+      // rule (`$from.marksAcross($to)`), not the cursor's own marks at `from` — which, right
+      // at a mark boundary, would wrongly carry the PRECEDING run's marks onto text that
+      // replaces the FOLLOWING (unmarked) run too.
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Bold',
+                marks: [{ type: 'textStyle', attrs: { fontWeight: 'bold' } }],
+              },
+              { type: 'text', text: ' end normal' },
+            ],
+          },
+        ],
+      };
+      const harness = buildEditor(doc, PARAGRAPH1);
+
+      harness.editor.commands.setTextSelection({
+        from: posAfter(harness.editor, 'Bold'),
+        to: posBefore(harness.editor, 'normal'),
+      });
+      pasteInto(harness.editor, plainDataTransfer('X'));
+
+      const pasted = findTextNode(harness.editor.getJSON(), 'X');
+
+      expect(textStyleAttrs(pasted).fontWeight).toBeUndefined();
+
+      harness.editor.destroy();
+    });
+
+    test("selection starting at a line's end keeps that line's colour", () => {
+      // `marksAcross` returns null here — `from` sits at the end of its own paragraph,
+      // so there is no inline sibling within that paragraph to bridge from. Real typing
+      // at that exact spot gets no marks; paste deliberately keeps the line's own look
+      // instead of losing it.
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Coloured line',
+                marks: [{ type: 'textStyle', attrs: { color: '#e4572e' } }],
+              },
+            ],
+          },
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'Next line.' }],
+          },
+        ],
+      };
+      const harness = buildEditor(doc, PARAGRAPH1);
+
+      harness.editor.commands.setTextSelection({
+        from: posAfter(harness.editor, 'Coloured line'),
+        to: posAfter(harness.editor, 'Next'),
+      });
+      pasteInto(harness.editor, plainDataTransfer('X'));
+
+      const pasted = findTextNode(harness.editor.getJSON(), 'X');
+
+      expect(textStyleAttrs(pasted).color).toBe('#e4572e');
+
+      harness.editor.destroy();
+    });
+
+    test("selection starting after a line-ending link drops the link, not the line's look", () => {
+      // Same null-`marksAcross` spot as the test above, but `from` now sits at the end of
+      // a link. AutoLink's own end-of-link detach — the one a typed character gets there —
+      // must run before the bare `.marks()` fallback, or the pasted text joins the link.
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Visit our shop',
+                marks: [
+                  { type: 'link', attrs: { href: 'https://example.com' } },
+                  { type: 'textStyle', attrs: { color: DEFAULT_LINK_COLOR } },
+                  { type: 'underline' },
+                ],
+              },
+            ],
+          },
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'Next line.' }],
+          },
+        ],
+      };
+      const harness = buildEditor(doc, PARAGRAPH1);
+
+      harness.editor.commands.setTextSelection({
+        from: posAfter(harness.editor, 'Visit our shop'),
+        to: posAfter(harness.editor, 'Next'),
+      });
+      pasteInto(harness.editor, plainDataTransfer('X'));
+
+      const pasted = findTextNode(harness.editor.getJSON(), 'X');
+
+      expect(markTypes(pasted)).not.toContain('link');
+      expect(markTypes(pasted)).not.toContain('underline');
+      expect(textStyleAttrs(pasted).color).not.toBe(DEFAULT_LINK_COLOR);
+
+      harness.editor.destroy();
+    });
+
+    test('empty field looks like typing', () => {
+      const empty = buildEditor(EMPTY_DOC, {
+        ...PARAGRAPH1,
+        color: '#111111',
+      });
+
+      pasteInto(empty.editor, plainDataTransfer('Hello'));
+
+      const pasted = findTextNode(empty.editor.getJSON(), 'Hello');
+
+      expect(textStyleAttrs(pasted).color).toBe('#111111');
+      expect(textStyleAttrs(pasted).fontSize).toBe(roleVarRef('fontSize'));
+
+      const clearedDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Was bold',
+                marks: [{ type: 'textStyle', attrs: { fontWeight: 'bold' } }],
+              },
+            ],
+          },
+        ],
+      };
+      const cleared = buildEditor(clearedDoc, PARAGRAPH1, {
+        id: 'cleared',
+        name: 'description',
+      });
+
+      cleared.editor.chain().selectAll().deleteSelection().run();
+      pasteInto(cleared.editor, plainDataTransfer('New text'));
+
+      const pastedCleared = findTextNode(cleared.editor.getJSON(), 'New text');
+
+      expect(textStyleAttrs(pastedCleared).fontWeight).toBe('bold');
+
+      empty.editor.destroy();
+      cleared.editor.destroy();
+    });
+
+    test('web addresses stay plain', () => {
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'End of note.' }],
+          },
+        ],
+      };
+      const harness = buildEditor(doc, PARAGRAPH1);
+
+      harness.editor.commands.focus('end');
+      pasteInto(
+        harness.editor,
+        plainDataTransfer('Visit https://shop.example.com\nThanks'),
+      );
+
+      const noneLinked = collectNodesOfType(
+        harness.editor.getJSON(),
+        'text',
+      ).every((node) => !markTypes(node).includes('link'));
+
+      expect(noneLinked).toBe(true);
+      expect(harness.editor.state.doc.textContent).toContain(
+        'https://shop.example.com',
+      );
+
+      const selectionDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'a word here' }],
+          },
+        ],
+      };
+      const selectionHarness = buildEditor(selectionDoc, PARAGRAPH1, {
+        id: 'sel',
+        name: 'description',
+      });
+
+      selectionHarness.editor.commands.setTextSelection({
+        from: posBefore(selectionHarness.editor, 'word'),
+        to: posAfter(selectionHarness.editor, 'word'),
+      });
+      pasteInto(
+        selectionHarness.editor,
+        plainDataTransfer('https://shop.example.com'),
+      );
+
+      expect(
+        markTypes(
+          findTextNode(
+            selectionHarness.editor.getJSON(),
+            'https://shop.example.com',
+          ),
+        ),
+      ).not.toContain('link');
+
+      harness.editor.destroy();
+      selectionHarness.editor.destroy();
+    });
+
+    test('old maker tab', () => {
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          { type: 'paragraph', content: [{ type: 'text', text: 'Hi' }] },
+        ],
+      };
+      const harness = buildEditor(doc, PARAGRAPH1);
+      const dataTransfer = new FakeDataTransfer();
+
+      dataTransfer.setData(
+        'application/x-rte-styles',
+        JSON.stringify({ fontSize: '2em' }),
+      );
+      dataTransfer.setData('text/html', '<p><strong>StyledBold</strong></p>');
+      dataTransfer.setData('text/plain', 'StyledBold');
+
+      harness.editor.commands.focus('end');
+      pasteInto(harness.editor, dataTransfer);
+
+      const pasted = findTextNode(harness.editor.getJSON(), 'StyledBold');
+
+      expect(pasted).toBeDefined();
+      expect(markTypes(pasted)).not.toContain('bold');
+
+      harness.editor.destroy();
+    });
+
+    test('copy out', () => {
+      setPaletteColors([
+        { id: 'palette-0', value: '#111111', type: 'palette' },
+      ]);
+
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Fresh',
+                marks: [
+                  {
+                    type: 'textStyle',
+                    attrs: {
+                      fontFamily: roleVarRef('fontFamily'),
+                      fontSize: roleVarRef('fontSize'),
+                      fontWeight: roleVarRef('fontWeight'),
+                      color: 'var(--palette-0)',
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      const harness = buildEditor(doc, HEADING1);
+
+      harness.editor.commands.selectAll();
+      const clipboard = copyFrom(harness.editor);
+
+      const html = clipboard.getData('text/html');
+
+      expect(html).toContain('font-family: Lato');
+      expect(html).toContain('font-size: 110px');
+      expect(html).toContain('font-weight: bold');
+      // jsdom (like Chrome) normalises a hex colour through the CSSOM on serialisation — the
+      // resolved value itself is hex (T7.1's lib-unit row covers that); only the DOM's own
+      // rgb() rewrite is visible here.
+      expect(html).toContain('rgb(17, 17, 17)');
+      expect(html).not.toContain('var(');
+      expect(clipboard.getData('text/plain')).toBe('Fresh');
+
+      harness.editor.destroy();
+    });
+
+    test('trims the paste', () => {
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'Try our sourdough today.' }],
+          },
+        ],
+      };
+      const harness = buildEditor(doc, PARAGRAPH1, { maxLength: 95 });
+
+      harness.editor.commands.setTextSelection(
+        posAfter(harness.editor, 'sourdough'),
+      );
+
+      // The brief's scenario 3: 24 chars already in the field, limit 95 → 71 allowed; the
+      // two-line paste is 87 chars, so it overflows by 16 and trims mid-line.
+      pasteInto(
+        harness.editor,
+        plainDataTransfer(
+          ' and rye — order at https://shop.example.com\nBaked before sunrise, every single morning',
+        ),
+      );
+
+      const text = harness.editor.state.doc.textContent;
+
+      expect(text.endsWith(' today.')).toBe(true);
+      expect(text.length).toBe(95);
+
+      const before = doc.content?.[0]?.content?.[0]?.text;
+
+      harness.editor.commands.undo();
+
+      expect(harness.editor.state.doc.textContent).toBe(before);
+
+      harness.editor.destroy();
+    });
+
+    test('nothing fits', () => {
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'x'.repeat(20) }],
+          },
+        ],
+      };
+      const harness = buildEditor(doc, PARAGRAPH1, { maxLength: 20 });
+      const before = JSON.stringify(harness.editor.getJSON());
+      const depthBefore = undoDepth(harness.editor.state);
+
+      harness.editor.commands.focus('end');
+      pasteInto(harness.editor, plainDataTransfer('more text'));
+
+      expect(JSON.stringify(harness.editor.getJSON())).toBe(before);
+      expect(undoDepth(harness.editor.state)).toBe(depthBefore);
+
+      harness.editor.destroy();
+    });
+
+    test('trimmed from its end', () => {
+      const sourceDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'One paragraph.' }],
+          },
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'Two paragraph.' }],
+          },
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'Three paragraph.' }],
+          },
+        ],
+      };
+      const source = buildEditor(sourceDoc, PARAGRAPH1);
+
+      source.editor.commands.selectAll();
+      const clipboard = copyFrom(source.editor);
+
+      const destinationDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'Field text.' }],
+          },
+        ],
+      };
+      const roomForTwoAndAHalf =
+        'Field text.'.length +
+        'One paragraph.'.length +
+        'Two paragraph.'.length +
+        Math.floor('Three paragraph.'.length / 2);
+
+      const destination = buildEditor(destinationDoc, PARAGRAPH1, {
+        maxLength: roomForTwoAndAHalf,
+        id: 'dest',
+        name: 'description',
+      });
+
+      destination.editor.commands.focus('end');
+      pasteInto(destination.editor, clipboard);
+
+      const text = destination.editor.state.doc.textContent;
+
+      expect(text).toContain('Field text.');
+      expect(text).toContain('One paragraph.');
+      expect(text).toContain('Two paragraph.');
+      expect(text.length).toBeLessThanOrEqual(roomForTwoAndAHalf);
+
+      source.editor.destroy();
+      destination.editor.destroy();
+    });
+
+    test('same lines everywhere', () => {
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          { type: 'paragraph', content: [{ type: 'text', text: 'Intro.' }] },
+        ],
+      };
+      const harness = buildEditor(doc, PARAGRAPH1);
+
+      harness.editor.commands.focus('end');
+      pasteInto(
+        harness.editor,
+        plainDataTransfer('Opening hours\nOpen daily\nFind us'),
+      );
+
+      const json = harness.editor.getJSON();
+      const html = renderRteToHtml(json);
+      const htmlParagraphCount = (html.match(/<p[ >]/g) ?? []).length;
+      const domParagraphCount =
+        harness.editor.view.dom.querySelectorAll('p').length;
+
+      // "Opening hours" joins straight into "Intro." (both start with no marks, so ProseMirror
+      // merges the runs); "Open daily" and "Find us" land as their own paragraphs — 3 total,
+      // and the point of this row: the renderer and the live editor agree on that count.
+      expect(htmlParagraphCount).toBe(3);
+      expect(domParagraphCount).toBe(3);
+
+      harness.editor.destroy();
+    });
+
+    test('nothing to paste', () => {
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'A word here' }],
+          },
+        ],
+      };
+      const harness = buildEditor(doc, PARAGRAPH1);
+
+      harness.editor.commands.setTextSelection({
+        from: posBefore(harness.editor, 'word'),
+        to: posAfter(harness.editor, 'word'),
+      });
+
+      const before = JSON.stringify(harness.editor.getJSON());
+      const selectionBefore = {
+        from: harness.editor.state.selection.from,
+        to: harness.editor.state.selection.to,
+      };
+      const depthBefore = undoDepth(harness.editor.state);
+
+      const filesOnly = new FakeDataTransfer();
+
+      filesOnly.files = { length: 1 };
+      pasteInto(harness.editor, filesOnly);
+
+      pasteInto(harness.editor, new FakeDataTransfer());
+
+      expect(JSON.stringify(harness.editor.getJSON())).toBe(before);
+      expect({
+        from: harness.editor.state.selection.from,
+        to: harness.editor.state.selection.to,
+      }).toEqual(selectionBefore);
+      expect(undoDepth(harness.editor.state)).toBe(depthBefore);
+
+      harness.editor.destroy();
+    });
+
+    test("leaves the field's role and settings alone", () => {
+      const contentSettingsStore = useUiContentSettingsStore();
+      const updateSpy = vi.spyOn(contentSettingsStore, 'updateTextStyles');
+      const onSelectTextStyleType = vi.fn();
+
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'Before after' }],
+          },
+        ],
+      };
+      const styles = reactive<TextStyleDeclaration>({ ...PARAGRAPH1 });
+      const stylesBefore = JSON.stringify(styles);
+      const harness = buildEditor(doc, styles, { onSelectTextStyleType });
+
+      harness.editor.commands.setTextSelection(
+        posAfter(harness.editor, 'Before'),
+      );
+      pasteInto(harness.editor, plainDataTransfer(' inserted'));
+
+      const ownDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          { type: 'paragraph', content: [{ type: 'text', text: 'Own' }] },
+        ],
+      };
+      const ownSource = buildEditor(ownDoc, PARAGRAPH1, {
+        id: 'own',
+        name: 'title',
+      });
+
+      ownSource.editor.commands.selectAll();
+      const ownClipboard = copyFrom(ownSource.editor);
+
+      harness.editor.commands.setTextSelection(
+        posAfter(harness.editor, 'inserted'),
+      );
+      pasteInto(harness.editor, ownClipboard);
+
+      expect(updateSpy).not.toHaveBeenCalled();
+      expect(onSelectTextStyleType).not.toHaveBeenCalled();
+      expect(JSON.stringify(styles)).toBe(stylesBefore);
+      expect(harness.editor.state.doc.textContent).toContain('Before');
+      expect(harness.editor.state.doc.textContent).toContain('after');
+
+      const readOnlyDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          { type: 'paragraph', content: [{ type: 'text', text: 'Locked' }] },
+        ],
+      };
+      const readOnly = buildEditor(readOnlyDoc, PARAGRAPH1, {
+        readOnly: true,
+        id: 'ro',
+        name: 'description',
+      });
+      const readOnlyBefore = JSON.stringify(readOnly.editor.getJSON());
+
+      readOnly.editor.commands.setTextSelection({
+        from: posBefore(readOnly.editor, 'Locked'),
+        to: posAfter(readOnly.editor, 'Locked'),
+      });
+      copyFrom(readOnly.editor, 'cut');
+      pasteInto(readOnly.editor, plainDataTransfer('replacement'));
+
+      expect(JSON.stringify(readOnly.editor.getJSON())).toBe(readOnlyBefore);
+
+      harness.editor.destroy();
+      ownSource.editor.destroy();
+      readOnly.editor.destroy();
+    });
+
+    test('undo takes back the whole paste', () => {
+      const sourceDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          { type: 'paragraph', content: [{ type: 'text', text: 'One.' }] },
+          { type: 'paragraph', content: [{ type: 'text', text: 'Two.' }] },
+          { type: 'paragraph', content: [{ type: 'text', text: 'Three.' }] },
+        ],
+      };
+      const source = buildEditor(sourceDoc, PARAGRAPH1);
+
+      source.editor.commands.selectAll();
+      const clipboard = copyFrom(source.editor);
+
+      const destinationDoc: JSONContent = {
+        type: 'doc',
+        content: [
+          { type: 'paragraph', content: [{ type: 'text', text: 'a word b' }] },
+        ],
+      };
+      const destination = buildEditor(destinationDoc, PARAGRAPH1, {
+        id: 'dest',
+        name: 'description',
+      });
+      const preClipDoc = JSON.stringify(destination.editor.getJSON());
+
+      destination.editor.commands.setTextSelection({
+        from: posBefore(destination.editor, 'word'),
+        to: posAfter(destination.editor, 'word'),
+      });
+      pasteInto(destination.editor, clipboard);
+
+      const postPasteDoc = JSON.stringify(destination.editor.getJSON());
+
+      expect(postPasteDoc).not.toBe(preClipDoc);
+
+      destination.editor.commands.undo();
+      expect(JSON.stringify(destination.editor.getJSON())).toBe(preClipDoc);
+
+      destination.editor.commands.redo();
+      expect(JSON.stringify(destination.editor.getJSON())).toBe(postPasteDoc);
+
+      source.editor.destroy();
+      destination.editor.destroy();
+    });
+
+    test('typing after a paste', () => {
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          { type: 'paragraph', content: [{ type: 'text', text: 'Field.' }] },
+        ],
+      };
+      const harness = buildEditor(doc, PARAGRAPH1);
+
+      harness.editor.commands.focus('end');
+      pasteInto(harness.editor, plainDataTransfer('Pasted text'));
+
+      const afterPaste = JSON.stringify(harness.editor.getJSON());
+
+      harness.editor.view.dispatch(harness.editor.state.tr.insertText('x'));
+
+      harness.editor.commands.undo();
+
+      expect(JSON.stringify(harness.editor.getJSON())).toBe(afterPaste);
+
+      harness.editor.destroy();
+    });
+
+    test('claims to come from our editor', () => {
+      const doc: JSONContent = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Before',
+                marks: [{ type: 'textStyle', attrs: { color: '#222222' } }],
+              },
+            ],
+          },
+        ],
+      };
+      const harness = buildEditor(doc, PARAGRAPH1);
+      const badLink = new FakeDataTransfer();
+
+      badLink.setData(
+        RTE_CLIPBOARD_MIME_TYPE,
+        JSON.stringify({
+          v: 1,
+          slice: {
+            content: [
+              {
+                type: 'paragraph',
+                content: [
+                  {
+                    type: 'text',
+                    text: 'Hi',
+                    marks: [
+                      { type: 'link', attrs: { href: 'javascript:alert(1)' } },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        }),
+      );
+      badLink.setData('text/plain', 'Hi');
+
+      harness.editor.commands.focus('end');
+      pasteInto(harness.editor, badLink);
+
+      const pastedHi = findTextNode(harness.editor.getJSON(), 'Hi');
+
+      expect(pastedHi).toBeDefined();
+      expect(markTypes(pastedHi)).not.toContain('link');
+      expect(textStyleAttrs(pastedHi).color).toBe('#222222');
+
+      const unknownMark = new FakeDataTransfer();
+
+      unknownMark.setData(
+        RTE_CLIPBOARD_MIME_TYPE,
+        JSON.stringify({
+          v: 1,
+          slice: {
+            content: [
+              {
+                type: 'paragraph',
+                content: [
+                  { type: 'text', text: 'There', marks: [{ type: 'comment' }] },
+                ],
+              },
+            ],
+          },
+        }),
+      );
+      unknownMark.setData('text/plain', 'There');
+
+      harness.editor.commands.focus('end');
+      pasteInto(harness.editor, unknownMark);
+
+      const pastedThere = findTextNode(harness.editor.getJSON(), 'There');
+
+      expect(pastedThere).toBeDefined();
+      expect(markTypes(pastedThere)).not.toContain('comment');
+      expect(textStyleAttrs(pastedThere).color).toBe('#222222');
+
+      harness.editor.destroy();
+    });
+  });
+});