@plannotator/ui 0.53.0 → 0.54.0

package/components/html-viewer/HtmlViewer.tsx

@@ -18,6 +18,7 @@ import {
 import type { Annotation, EditorMode, HostDraft, ImageAttachment, InputMethod } from "../../types";
 import { AnnotationType } from "../../types";
 import { copyTextPreservingFocus } from "../../utils/clipboard";
+import { getRichCopyEnabled } from "../../utils/richCopyPolicy";
 import { elementIdentityForAskAI } from "../../utils/parser";
 import { getIdentity } from "../../utils/identity";
 import { THUMBS_UP_LABEL } from "../../utils/quickLabels";
@@ -139,6 +140,14 @@ function parseVimBridgeHelp(value: unknown): boolean | null {
 
 const MAX_VIM_COPY_TEXT_LENGTH = 2 * 1024 * 1024;
 
+/**
+ * The srcdoc frame's sandbox. `allow-modals` lets the page's alert, confirm
+ * and prompt open (#2063: people's own pages and local sites). Never
+ * `allow-same-origin`: the page stays at an opaque origin, away from the
+ * session's API. Live-app mode is unsandboxed and does not use this.
+ */
+export const HTML_VIEWER_SANDBOX = "allow-scripts allow-modals";
+
 /** Default wait for the bridge's `ready` on the `bridgeScriptUrl` path. */
 export const DEFAULT_BRIDGE_READY_TIMEOUT_MS = 5000;
 
@@ -239,6 +248,13 @@ export interface HtmlViewerProps {
    *  key. Honored only while the frame holds focus, and at most once per
    *  STEP_MESSAGE_MIN_INTERVAL_MS. Absent: the message is ignored, as before. */
   onStep?: (dir: 1 | -1) => void;
+  /** Escape pressed inside the page in Interact that the page did not use
+   *  itself (no handler of the page cancelled it or stopped it, and focus was
+   *  not in one of its text fields): the host may close something of its own
+   *  (the Inbox leaves full screen). Never sent in Annotate, whose Escape is
+   *  `onAnnotateModeExit`. Honored only while the frame holds focus, and at
+   *  most once per STEP_MESSAGE_MIN_INTERVAL_MS. Absent: ignored, as before. */
+  onPageEscape?: () => void;
   /** Opt-in Vim-style keyboard selection. Default false for compatibility. */
   vimModeEnabled?: boolean;
   /** Replace the iframe-local compact badge with the shared live key HUD. */
@@ -384,6 +400,7 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
       onAnnotateModeToggle,
       onToolsToggle,
       onStep,
+      onPageEscape,
       vimModeEnabled = false,
       vimHudEnabled = false,
       vimHudKeyPanelEnabled = true,
@@ -452,6 +469,9 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
     const annotateModeActiveRef = useRef(annotateModeActive);
     annotateModeActiveRef.current = annotateModeActive;
     const lastStepAtRef = useRef(0);
+    const onPageEscapeRef = useRef(onPageEscape);
+    onPageEscapeRef.current = onPageEscape;
+    const lastPageEscapeAtRef = useRef(0);
 
     /** Single choke point for direct-to-bridge posts: live sessions get the
      *  token + concrete targetOrigin, srcdoc keeps "*" and no token. */
@@ -809,6 +829,17 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
           onStepRef.current?.(dir);
           return;
         }
+        if (isRecord(e.data) && e.data.type === `${PREFIX}page-escape`) {
+          // Like a step, the page could post this itself: honored only for a
+          // key pressed in the frame, in Interact, at most once per interval.
+          if (annotateModeActiveRef.current) return;
+          if (document.activeElement !== iframeRef.current) return;
+          const now = Date.now();
+          if (now - lastPageEscapeAtRef.current < STEP_MESSAGE_MIN_INTERVAL_MS) return;
+          lastPageEscapeAtRef.current = now;
+          onPageEscapeRef.current?.();
+          return;
+        }
         const vimCopy = parseVimBridgeCopy(e.data);
         if (vimCopy !== null) {
           const iframe = iframeRef.current;
@@ -879,9 +910,15 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
       return true;
     }, [readOnly, vimModeEnabled]);
 
+    // A composer hidden with its target (a slide the page hid) is not on
+    // screen: it neither blocks Vim's document focus nor counts as an open
+    // overlay. Escape still closes it, as its own rung (below).
+    const composerShown = !!hook.commentPopover && hook.pinVisible;
+    const composerHidden = !!hook.commentPopover && !hook.pinVisible;
+
     useVimDocumentFocus({
       enabled: !readOnly && vimModeEnabled,
-      blocked: !!hook.toolbarState || !!hook.commentPopover || !!hook.quickLabelPicker,
+      blocked: !!hook.toolbarState || composerShown || !!hook.quickLabelPicker,
       focusDocument: focusVimDocument,
     });
 
@@ -983,6 +1020,27 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
       postToBridge({ type: `${PREFIX}set-host-navigates`, active: true });
     }, [iframeReadyVersion, hostNavigates]);
 
+    // The hidden composer's Escape rung: with focus outside the iframe,
+    // Escape closes the hidden draft (its text stays in the draft store) and
+    // is used, so the next press reaches the rest of the ladder. Capture
+    // phase, so it runs before the Vim document-focus rung. Inside the
+    // iframe the bridge closes the draft and the hook closes the composer.
+    const handleCommentCloseRef = useRef(hook.handleCommentClose);
+    handleCommentCloseRef.current = hook.handleCommentClose;
+    useEffect(() => {
+      if (readOnly || !composerHidden) return;
+      const onKeyDown = (e: KeyboardEvent) => {
+        if (e.key !== 'Escape' || e.defaultPrevented || e.isComposing) return;
+        const target = e.target as HTMLElement | null;
+        if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) return;
+        if (document.querySelector('[data-plannotator-confirm-dialog="true"]')) return;
+        e.preventDefault();
+        handleCommentCloseRef.current();
+      };
+      window.addEventListener('keydown', onKeyDown, true);
+      return () => window.removeEventListener('keydown', onKeyDown, true);
+    }, [readOnly, composerHidden]);
+
     // Parent-side Esc rung: with focus outside the iframe the bridge never
     // sees the keydown. Any open composer/toolbar/picker still closes first —
     // their state is read from this render's closure, so an Esc that closed
@@ -993,6 +1051,7 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
         !!hook.toolbarState || !!hook.commentPopover || !!hook.quickLabelPicker || !!globalCommentPopover;
       const onKeyDown = (e: KeyboardEvent) => {
         if (e.key !== 'Escape' || e.defaultPrevented) return;
+        // A hidden composer is closed by its own rung above.
         if (overlayOpen) return;
         // A text field or dialog owns its own Escape.
         const target = e.target as HTMLElement | null;
@@ -1035,7 +1094,7 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
 
     const vimOverlayWasOpenRef = useRef(false);
     useEffect(() => {
-      const overlayOpen = !!hook.toolbarState || !!hook.commentPopover || !!hook.quickLabelPicker;
+      const overlayOpen = !!hook.toolbarState || composerShown || !!hook.quickLabelPicker;
       const wasOpen = vimOverlayWasOpenRef.current;
       vimOverlayWasOpenRef.current = overlayOpen;
       if (
@@ -1050,7 +1109,7 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
           { type: `${PREFIX}focus-vim` },
         );
       }
-    }, [hook.commentPopover, hook.quickLabelPicker, hook.toolbarState, readOnly, vimModeEnabled]);
+    }, [composerShown, hook.quickLabelPicker, hook.toolbarState, readOnly, vimModeEnabled]);
 
     useEffect(() => {
       if (iframeReadyVersion === 0) return;
@@ -1236,7 +1295,7 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
                 same-origin XHR) and no srcdoc. Srcdoc mode is unchanged. */}
             <iframe
               ref={iframeRef}
-              {...(src ? { src } : { srcDoc: srcdoc, sandbox: "allow-scripts" + (hostNavigates ? " allow-popups" : "") })}
+              {...(src ? { src } : { srcDoc: srcdoc, sandbox: HTML_VIEWER_SANDBOX + (hostNavigates ? " allow-popups" : "") })}
               style={{
                 width: "100%",
                 height: fullViewport ? "100%" : `${iframeHeight}px`,
@@ -1293,6 +1352,7 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
               positionMode="center-above"
               element={hook.toolbarState.element}
               copyText={hook.toolbarState.selectionText}
+              getRichCopy={getRichCopyEnabled() ? hook.toolbarState.getRichCopy : undefined}
               // HTML/live surfaces are comment-only: no Delete, no label
               // picker, no Alt+digit labels (commentOnly). Exactly ONE label
               // affordance is restored: the hardcoded 👍 "Looks good". The
@@ -1311,8 +1371,10 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
             document.body,
           )}
 
-        {/* Comment popover portal */}
-        {!readOnly && hook.commentPopover &&
+        {/* Hidden with its target (a slide the page hid): CommentPopover's draft
+            store keeps the text and images, and shown again it does not take
+            focus from where the person is. */}
+        {!readOnly && hook.pinVisible && hook.commentPopover &&
           createPortal(
             <CommentPopover
               anchorEl={hook.commentPopover.anchorEl}
@@ -1340,6 +1402,7 @@ export const HtmlViewer = forwardRef<ViewerHandle, HtmlViewerProps>(
               onRemoveTargetChip={targetChips ? hook.removeDraftTarget : undefined}
               onHoverTargetChip={targetChips ? hook.flashDraftTarget : undefined}
               refocusToken={targetChips ? hook.composerFocusToken : undefined}
+              autoFocus={hook.composerAutoFocus}
               captureStrayKeys={multiSelectActive}
               yieldState={multiSelectActive ? composerYield : undefined}
             />,