feat: record clipboard actions (#445)

Co-authored-by: Codex <noreply@openai.com>

Author: AHB

csr/csr-recorder/src/engine/rrweb-engine.test.ts

@@ -69,6 +69,39 @@ describe('RrwebEngine', () => {
     expect(recordSpy.mock.calls[0][0].slimDOMOptions).toBe('all');
   });
 
+  it('records copy, cut, and paste actions without reading clipboard contents', () => {
+    new RrwebEngine().start({}, () => {});
+    const plugin = recordSpy.mock.calls[0][0].plugins.find(({ name }: { name: string }) => name === 'csr/clipboard@1');
+    const getId = vi.fn().mockReturnValue(42);
+    plugin.getMirror({ nodeMirror: { getId } });
+    const callback = vi.fn();
+    const removeObserver = plugin.observer(callback, window);
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+
+    for (const action of ['copy', 'cut', 'paste']) {
+      const event = new Event(action, { bubbles: true });
+      Object.defineProperty(event, 'clipboardData', {
+        get: () => {
+          throw new Error('clipboard contents must not be read');
+        },
+      });
+      expect(() => input.dispatchEvent(event)).not.toThrow();
+    }
+
+    expect(callback.mock.calls.map(([payload]) => payload)).toEqual([
+      { action: 'copy', targetId: 42 },
+      { action: 'cut', targetId: 42 },
+      { action: 'paste', targetId: 42 },
+    ]);
+    expect(getId).toHaveBeenCalledTimes(3);
+
+    removeObserver();
+    input.dispatchEvent(new Event('paste', { bubbles: true }));
+    expect(callback).toHaveBeenCalledTimes(3);
+    input.remove();
+  });
+
   it('keeps native click modifiers through a browser microtask checkpoint', async () => {
     new RrwebEngine().start({}, () => {});
     const plugin = recordSpy.mock.calls[0][0].plugins.find(

csr/csr-recorder/src/engine/rrweb-engine.ts

@@ -10,6 +10,39 @@ type RrwebPlugin = NonNullable<recordOptions<RecordingEvent>['plugins']>[number]
 
 type ClickModifiers = Pick<MouseEvent, 'button' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'>;
 
+type ClipboardAction = 'copy' | 'cut' | 'paste';
+
+/**
+ * Record clipboard actions and their DOM target without reading clipboard
+ * contents. The resulting rrweb Plugin events can explain otherwise
+ * surprising input changes during analysis.
+ */
+function clipboardActionsPlugin(): RrwebPlugin {
+  let getId: ((node: Node) => number) | undefined;
+
+  return {
+    name: 'csr/clipboard@1',
+    options: {},
+    getMirror: ({ nodeMirror }) => {
+      getId = node => nodeMirror.getId(node);
+    },
+    observer: (callback, win) => {
+      const actions: ClipboardAction[] = ['copy', 'cut', 'paste'];
+      const handlers = actions.map(action => {
+        const handler = (event: Event) => {
+          const targetId = event.target instanceof win.Node ? getId?.(event.target) ?? -1 : -1;
+          callback({ action, targetId });
+        };
+
+        win.document.addEventListener(action, handler, true);
+        return () => win.document.removeEventListener(action, handler, true);
+      });
+
+      return () => handlers.forEach(remove => remove());
+    },
+  };
+}
+
 /**
  * rrweb does not include modifier keys in mouse-interaction events. Capture
  * the native click first, then add its safe, non-text metadata to the rrweb
@@ -69,7 +102,7 @@ export class RrwebEngine implements RecordingEngine {
     const maskSelectors = config.maskSelectors ?? DEFAULT_MASK_SELECTORS;
     const blockSelectors = config.blockSelectors ?? DEFAULT_BLOCK_SELECTORS;
 
-    const plugins: RrwebPlugin[] = [clickModifiersPlugin()];
+    const plugins: RrwebPlugin[] = [clickModifiersPlugin(), clipboardActionsPlugin()];
     const { captureConsoleLogs } = config;
     if (captureConsoleLogs) {
       const levels = captureConsoleLogs === true ? ALL_CONSOLE_LEVELS : captureConsoleLogs.levels;