Migrate MorphemeEditor to Platform.Bible popover, clean up analysisSlice, other minor improvements

Author: alex-rawlings-yyc

__mocks__/platform-bible-react.tsx

@@ -3,8 +3,8 @@
  * without extra transform configuration. This stub provides the subset used by the extension.
  */
 
-import { forwardRef } from 'react';
-import type { ReactElement, ReactNode } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
+import type { MouseEventHandler, ReactElement, ReactNode } from 'react';
 
 export interface MenuItemContainingCommand {
   label: `%${string}%`;
@@ -323,6 +323,104 @@ export function Switch({
   );
 }
 
+/**
+ * Stub popover root that renders its children unconditionally. The extension conditionally mounts
+ * the content component while open (so its draft state re-initializes per open), so visibility
+ * needs no simulation here.
+ *
+ * @param props - Component props.
+ * @param props.children - Anchor and (while open) content elements.
+ * @returns The children unchanged.
+ */
+export function Popover({
+  children,
+}: Readonly<{ children?: ReactNode; open?: boolean; modal?: boolean }>): ReactElement {
+  return <>{children}</>;
+}
+
+/**
+ * Stub popover anchor that renders its children as-is, matching the real component's `asChild`
+ * pass-through behavior.
+ *
+ * @param props - Component props.
+ * @param props.children - The element the popover is anchored to.
+ * @returns The children unchanged.
+ */
+export function PopoverAnchor({
+  children,
+}: Readonly<{ children?: ReactNode; asChild?: boolean }>): ReactElement {
+  return <>{children}</>;
+}
+
+/**
+ * Stub popover content rendered as a plain `<div data-testid="popover-content">`. The real
+ * component implements positioning, portaling, and dismissal internally; this stub exposes the
+ * dismissal callbacks so tests can simulate them:
+ *
+ * - `onOpenAutoFocus` is invoked once on mount (mirroring Radix's open auto-focus event).
+ * - An Escape keydown anywhere inside the content invokes `onEscapeKeyDown`.
+ * - A sentinel `data-testid="popover-outside"` button invokes `onInteractOutside` on click,
+ *   simulating a pointer interaction outside the popover.
+ *
+ * @param props - Component props.
+ * @param props.children - Panel content.
+ * @param props.className - CSS class names forwarded to the div.
+ * @param props.onEscapeKeyDown - Called when Escape is pressed inside the content.
+ * @param props.onInteractOutside - Called when the sentinel outside button is clicked.
+ * @param props.onOpenAutoFocus - Called once on mount with a plain `Event`.
+ * @param props.onClick - Click handler forwarded to the div.
+ * @param props.onMouseDown - Mouse-down handler forwarded to the div.
+ * @returns A `<div data-testid="popover-content">` with the panel content and sentinel controls.
+ */
+export function PopoverContent({
+  children,
+  className,
+  onEscapeKeyDown,
+  onInteractOutside,
+  onOpenAutoFocus,
+  onClick,
+  onMouseDown,
+}: Readonly<{
+  children?: ReactNode;
+  className?: string;
+  align?: 'start' | 'center' | 'end';
+  sideOffset?: number;
+  onEscapeKeyDown?: () => void;
+  onInteractOutside?: () => void;
+  onOpenAutoFocus?: (event: Event) => void;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  onMouseDown?: MouseEventHandler<HTMLDivElement>;
+}>): ReactElement {
+  // Capture the mount-time callback so the simulation fires exactly once, like the real event.
+  const openAutoFocusRef = useRef(onOpenAutoFocus);
+  useEffect(() => {
+    openAutoFocusRef.current?.(new Event('openAutoFocus'));
+  }, []);
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      className={className}
+      data-testid="popover-content"
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') onEscapeKeyDown?.();
+      }}
+      onMouseDown={onMouseDown}
+    >
+      {children}
+      {onInteractOutside && (
+        <button
+          data-testid="popover-outside"
+          type="button"
+          onClick={() => onInteractOutside()}
+        >
+          outside
+        </button>
+      )}
+    </div>
+  );
+}
+
 /**
  * Stub label rendered as a native `<label>` element.
  *

src/__tests__/components/MorphemeEditor.test.tsx

@@ -2,7 +2,7 @@
 /// <reference types="jest" />
 /// <reference types="@testing-library/jest-dom" />
 
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as AnalysisStore from '../../components/AnalysisStore';
 import { MorphemeBreakdownPopover, MorphemeGlossInput } from '../../components/MorphemeEditor';
@@ -105,43 +105,29 @@ describe('MorphemeBreakdownPopover', () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  it('closes when the backdrop is clicked', async () => {
+  it('closes without saving when interacting outside with unchanged text', async () => {
+    const onSave = jest.fn();
     const onClose = jest.fn();
-    render(<MorphemeBreakdownPopover initialValue="test" onSave={jest.fn()} onClose={onClose} />);
-    // The backdrop is the fixed full-screen div; getByRole won't find it, so query the DOM.
-    const backdrop = document.querySelector('.tw\\:fixed.tw\\:inset-0');
-    if (!backdrop) throw new Error('Backdrop not found');
-    await userEvent.click(backdrop);
+    render(<MorphemeBreakdownPopover initialValue="test" onSave={onSave} onClose={onClose} />);
+    // The platform-bible-react mock exposes a sentinel button that fires onInteractOutside,
+    // simulating a pointer interaction outside the popover.
+    await userEvent.click(screen.getByTestId('popover-outside'));
+    expect(onSave).not.toHaveBeenCalled();
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  it('saves on backdrop click when the text was edited', async () => {
+  it('saves on outside interaction when the text was edited', async () => {
     const onSave = jest.fn();
     render(<MorphemeBreakdownPopover initialValue="test" onSave={onSave} onClose={jest.fn()} />);
     await userEvent.type(screen.getByRole('textbox'), ' -er');
-    const backdrop = document.querySelector('.tw\\:fixed.tw\\:inset-0');
-    if (!backdrop) throw new Error('Backdrop not found');
-    await userEvent.click(backdrop);
+    await userEvent.click(screen.getByTestId('popover-outside'));
     expect(onSave).toHaveBeenCalledWith('test -er');
   });
 
-  it('does not save on backdrop click when the text is unchanged', async () => {
-    const onSave = jest.fn();
-    const onClose = jest.fn();
-    render(<MorphemeBreakdownPopover initialValue="test" onSave={onSave} onClose={onClose} />);
-    const backdrop = document.querySelector('.tw\\:fixed.tw\\:inset-0');
-    if (!backdrop) throw new Error('Backdrop not found');
-    await userEvent.click(backdrop);
-    expect(onSave).not.toHaveBeenCalled();
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not save on backdrop click when the input is only whitespace', async () => {
+  it('does not save on outside interaction when the input is only whitespace', async () => {
     const onSave = jest.fn();
     render(<MorphemeBreakdownPopover initialValue="   " onSave={onSave} onClose={jest.fn()} />);
-    const backdrop = document.querySelector('.tw\\:fixed.tw\\:inset-0');
-    if (!backdrop) throw new Error('Backdrop not found');
-    await userEvent.click(backdrop);
+    await userEvent.click(screen.getByTestId('popover-outside'));
     expect(onSave).not.toHaveBeenCalled();
   });
 
@@ -153,6 +139,32 @@ describe('MorphemeBreakdownPopover', () => {
     expect(onClose).not.toHaveBeenCalled();
   });
 
+  it('stops clicks inside the panel from reaching ancestor click handlers', async () => {
+    // The panel is portaled to document.body, but React synthetic events bubble through the React
+    // tree to the token chip and its phrase-selection click handlers; the panel must contain them.
+    const ancestorClick = jest.fn();
+    render(
+      <div role="presentation" onClick={ancestorClick}>
+        <MorphemeBreakdownPopover initialValue="test" onSave={jest.fn()} onClose={jest.fn()} />
+      </div>,
+    );
+    await userEvent.click(screen.getByText('Split into morphemes'));
+    expect(ancestorClick).not.toHaveBeenCalled();
+  });
+
+  it('stops mouse-downs inside the panel from reaching ancestor mouse-down handlers', () => {
+    // A mouse-down that escaped the panel would reach the chip label's mouse-down handler, which
+    // focuses the gloss input behind the popover and blurs the editor mid-edit.
+    const ancestorMouseDown = jest.fn();
+    render(
+      <div role="presentation" onMouseDown={ancestorMouseDown}>
+        <MorphemeBreakdownPopover initialValue="test" onSave={jest.fn()} onClose={jest.fn()} />
+      </div>,
+    );
+    fireEvent.mouseDown(screen.getByText('Split into morphemes'));
+    expect(ancestorMouseDown).not.toHaveBeenCalled();
+  });
+
   it('does not call onSave when the input is empty', async () => {
     const onSave = jest.fn();
     render(<MorphemeBreakdownPopover initialValue="" onSave={onSave} onClose={jest.fn()} />);
@@ -190,35 +202,12 @@ describe('MorphemeBreakdownPopover', () => {
     expect(onSave).not.toHaveBeenCalled();
   });
 
-  it('portals the panel to document.body so segment rows cannot stack above it', () => {
-    render(<MorphemeBreakdownPopover initialValue="test" onSave={jest.fn()} onClose={jest.fn()} />);
-    const panel = screen.getByText('Split into morphemes').closest('div');
-    expect(panel?.parentElement).toBe(document.body);
-  });
-
-  it('positions the panel below the anchor when there is room under the viewport bottom', () => {
-    // The layout effect measures the anchor (panel's DOM parent) first, then the panel itself.
-    jest
-      .spyOn(Element.prototype, 'getBoundingClientRect')
-      .mockReturnValueOnce(new DOMRect(50, 100, 40, 20))
-      .mockReturnValueOnce(new DOMRect(0, 0, 200, 100));
-    render(<MorphemeBreakdownPopover initialValue="test" onSave={jest.fn()} onClose={jest.fn()} />);
-    const panel = screen.getByText('Split into morphemes').closest('div');
-    // Anchor bottom (120) plus the 4px margin.
-    expect(panel).toHaveStyle({ top: '124px', left: '50px' });
-  });
-
-  it('flips the panel above the anchor when the viewport bottom is too close', () => {
-    // Anchor bottom at 720 leaves only 48px below in jsdom's 768px-tall window — not enough for
-    // the 100px-tall panel, so it flips above the anchor.
-    jest
-      .spyOn(Element.prototype, 'getBoundingClientRect')
-      .mockReturnValueOnce(new DOMRect(50, 700, 40, 20))
-      .mockReturnValueOnce(new DOMRect(0, 0, 200, 100));
+  it('renders inside the popover content panel', () => {
+    // Positioning, portaling, and flipping are owned by the platform-bible-react Popover; this
+    // only verifies the editor renders as the popover's content.
     render(<MorphemeBreakdownPopover initialValue="test" onSave={jest.fn()} onClose={jest.fn()} />);
-    const panel = screen.getByText('Split into morphemes').closest('div');
-    // Anchor top (700) minus panel height (100) minus the 4px margin.
-    expect(panel).toHaveStyle({ top: '596px', left: '50px' });
+    const content = screen.getByTestId('popover-content');
+    expect(content).toContainElement(screen.getByText('Split into morphemes'));
   });
 });
 

src/__tests__/components/PhraseBox.test.tsx

@@ -59,7 +59,9 @@ jest.mock('../../components/TokenChip', () => {
    * @param props.isSplitFree - When true, marks the chip as a would-be-free token.
    * @param props.onRemove - Called when the remove button is clicked; omitted for edge tokens.
    * @param props.showMorphology - Exposed as a data attribute so tests can verify every PhraseBox
-   *   render path forwards the strip-wide morphology toggle.
+   *   render path forwards the strip-wide morphology toggle. When true, also renders a
+   *   `data-morpheme-gloss` input before the main gloss input, mirroring the real chip's DOM order
+   *   so focus-routing tests exercise the morpheme-exclusion selector.
    * @returns A span containing the surface text, a gloss input, and an optional remove button.
    */
   function MockTokenChip({
@@ -84,6 +86,12 @@ jest.mock('../../components/TokenChip', () => {
         data-show-morphology={showMorphology ? 'true' : 'false'}
       >
         {token.surfaceText}
+        {showMorphology && (
+          <input
+            aria-label={`Gloss for morpheme ${token.surfaceText}`}
+            data-morpheme-gloss="true"
+          />
+        )}
         <input
           aria-label={`Gloss for ${token.surfaceText}`}
           onChange={(e) => dispatch(token.ref, token.surfaceText, e.target.value)}
@@ -300,6 +308,37 @@ describe('PhraseBox', () => {
     expect(onFocusPhrase).toHaveBeenCalledWith('test-group');
   });
 
+  it('clicking the box with morphology shown focuses the token gloss input, not the preceding morpheme gloss input', async () => {
+    const onFocusPhrase = jest.fn();
+    renderBox(
+      <PhraseBox
+        {...requiredProps()}
+        onFocusPhrase={onFocusPhrase}
+        tokens={[TEST_TOKEN, TEST_TOKEN_2]}
+      />,
+      { showMorphology: true },
+    );
+
+    const phraseBox = document.querySelector('[data-phrase-box="true"]');
+    await userEvent.click(phraseBox ?? document.body);
+
+    // Morpheme gloss inputs precede the token gloss input in DOM order; the box-click handler must
+    // skip them — only the token gloss input fires onFocus → onFocusPhrase.
+    expect(screen.getByRole('textbox', { name: 'Gloss for Hello' })).toHaveFocus();
+    expect(onFocusPhrase).toHaveBeenCalledWith('test-group');
+  });
+
+  it('Enter on the box container with morphology shown focuses the token gloss input, not the morpheme gloss input', async () => {
+    renderBox(<PhraseBox {...requiredProps()} />, { showMorphology: true });
+
+    const box = document.querySelector('[data-phrase-box="true"]');
+    expect(box).not.toBeNull();
+    if (box instanceof HTMLElement) box.focus();
+    await userEvent.keyboard('{Enter}');
+
+    expect(screen.getByRole('textbox', { name: 'Gloss for morpheme Hello' })).not.toHaveFocus();
+  });
+
   it('applies focused border and background when isFocused is true', () => {
     renderBox(<PhraseBox {...requiredProps()} isFocused />);