Fix token-renderer page issue causing failing integ tests and enhance unit test coverage further

Author: ernst-dev

pages/prompt-input/token-renderer.page.tsx

@@ -72,7 +72,7 @@ export default function TokenRendererPage() {
 
   const extractFromDOM = () => {
     if (editorRef.current) {
-      const result = extractTokensFromDOM(editorRef.current, menus);
+      const result = extractTokensFromDOM(editorRef.current, menus, portalContainersRef.current);
       setExtracted(result);
     }
   };

src/prompt-input/__tests__/dom-utils.test.ts

@@ -506,3 +506,65 @@ describe('findElement with tokenId', () => {
     expect(found).toBeNull();
   });
 });
+
+describe('normalizeCaretIntoTrigger - trigger offset 0 nudge', () => {
+  function createTrigger(id: string, text: string): HTMLElement {
+    const span = document.createElement('span');
+    span.setAttribute('data-type', ElementType.Trigger);
+    span.id = id;
+    span.textContent = text;
+    return span;
+  }
+
+  test('nudges caret from offset 0 inside trigger text to paragraph level before trigger', () => {
+    const el = document.createElement('div');
+    const p = document.createElement('p');
+    const textBefore = document.createTextNode('hello ');
+    const trigger = createTrigger('trig-1', '@bob');
+    p.appendChild(textBefore);
+    p.appendChild(trigger);
+    el.appendChild(p);
+    document.body.appendChild(el);
+
+    // Place caret at offset 0 inside the trigger's text node
+    const triggerText = trigger.childNodes[0];
+    const range = document.createRange();
+    range.setStart(triggerText, 0);
+    range.collapse(true);
+    const sel = window.getSelection()!;
+    sel.removeAllRanges();
+    sel.addRange(range);
+
+    normalizeCaretIntoTrigger(el);
+
+    const newRange = sel.getRangeAt(0);
+    // Should be at paragraph level, before the trigger element
+    expect(newRange.startContainer).toBe(p);
+    expect(newRange.startOffset).toBe(1); // After textBefore, before trigger
+    document.body.removeChild(el);
+  });
+
+  test('does not nudge when trigger is the first child (idx === 0)', () => {
+    const el = document.createElement('div');
+    const p = document.createElement('p');
+    const trigger = createTrigger('trig-1', '@bob');
+    p.appendChild(trigger);
+    el.appendChild(p);
+    document.body.appendChild(el);
+
+    const triggerText = trigger.childNodes[0];
+    const range = document.createRange();
+    range.setStart(triggerText, 0);
+    range.collapse(true);
+    const sel = window.getSelection()!;
+    sel.removeAllRanges();
+    sel.addRange(range);
+
+    normalizeCaretIntoTrigger(el);
+
+    // idx is 0, so no nudge — caret stays in trigger text
+    const newRange = sel.getRangeAt(0);
+    expect(newRange.startContainer).toBe(triggerText);
+    document.body.removeChild(el);
+  });
+});

src/prompt-input/__tests__/prompt-input-token-mode.test.tsx

@@ -7137,3 +7137,109 @@ describe('paste multiline over full selection', () => {
     expect(range.startOffset).toBe(3);
   });
 });
+
+describe('paste partial selection replacement', () => {
+  function pasteText(element: HTMLElement, text: string) {
+    fireEvent.paste(element, {
+      clipboardData: {
+        getData: (type: string) => (type === 'text/plain' ? text : ''),
+        types: ['text/plain'],
+        items: [],
+        files: [],
+      },
+    });
+  }
+
+  test('paste replaces partial text selection within a single line', () => {
+    const ref = React.createRef<PromptInputProps.Ref>();
+    const onChange = jest.fn();
+    renderStatefulTokenMode({
+      props: { tokens: [{ type: 'text', value: 'hello world' }], onChange },
+      ref,
+    });
+    act(() => {
+      ref.current!.focus();
+    });
+    act(() => {
+      ref.current!.setSelectionRange(6, 11);
+    });
+    const el = document.querySelector('[role="textbox"]') as HTMLElement;
+    act(() => {
+      pasteText(el, 'universe');
+    });
+    expect(onChange).toHaveBeenCalled();
+    const lastValue = onChange.mock.calls[onChange.mock.calls.length - 1][0].detail.value;
+    expect(lastValue).toContain('hello');
+    expect(lastValue).toContain('universe');
+    expect(lastValue).not.toContain('world');
+  });
+
+  test('paste multiline over partial selection in multiline content', () => {
+    const ref = React.createRef<PromptInputProps.Ref>();
+    const onChange = jest.fn();
+    renderStatefulTokenMode({
+      props: {
+        tokens: [
+          { type: 'text', value: 'aaa' },
+          { type: 'break', value: '\n' },
+          { type: 'text', value: 'bbb' },
+          { type: 'break', value: '\n' },
+          { type: 'text', value: 'ccc' },
+        ],
+        onChange,
+      },
+      ref,
+    });
+    act(() => {
+      ref.current!.focus();
+    });
+    // Select middle line "bbb" (positions 4-7)
+    act(() => {
+      ref.current!.setSelectionRange(4, 7);
+    });
+    const el = document.querySelector('[role="textbox"]') as HTMLElement;
+    act(() => {
+      pasteText(el, 'xxx\nyyy');
+    });
+    expect(onChange).toHaveBeenCalled();
+    const lastTokens = onChange.mock.calls[onChange.mock.calls.length - 1][0].detail.tokens;
+    const texts = lastTokens.filter((t: any) => t.type === 'text').map((t: any) => t.value);
+    // "aaa" should remain, "bbb" replaced by "xxx\nyyy", "ccc" should remain
+    expect(texts.join(' ')).toContain('aaa');
+    expect(texts.join(' ')).toContain('ccc');
+    expect(texts.join(' ')).not.toContain('bbb');
+  });
+
+  test('paste is no-op when readOnly', () => {
+    const ref = React.createRef<PromptInputProps.Ref>();
+    const onChange = jest.fn();
+    renderStatefulTokenMode({
+      props: { tokens: [{ type: 'text', value: 'original' }], onChange, readOnly: true },
+      ref,
+    });
+    const callsBefore = onChange.mock.calls.length;
+    const el = document.querySelector('[role="textbox"]') as HTMLElement;
+    act(() => {
+      pasteText(el, 'injected');
+    });
+    expect(onChange.mock.calls.length).toBe(callsBefore);
+  });
+
+  test('paste empty string is no-op', () => {
+    const ref = React.createRef<PromptInputProps.Ref>();
+    const onChange = jest.fn();
+    renderStatefulTokenMode({
+      props: { tokens: [{ type: 'text', value: 'original' }], onChange },
+      ref,
+    });
+    act(() => {
+      ref.current!.focus();
+    });
+    const callsBefore = onChange.mock.calls.length;
+    const el = document.querySelector('[role="textbox"]') as HTMLElement;
+    act(() => {
+      pasteText(el, '');
+    });
+    expect(onChange.mock.calls.length).toBe(callsBefore);
+  });
+});