@doenet/doenetml-iframe 0.7.23-dev.472 → 0.7.23-dev.476

package/index.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import React__default, { createContext, useMemo, useCallback, useLayoutEffect, useEffect, useRef, useState, useContext, isValidElement } from "react";
 import { MathJaxBaseContext, MathJax } from "better-react-mathjax";
-import { createRoot } from "react-dom/client";
 import { createPortal } from "react-dom";
+import { createRoot } from "react-dom/client";
 const proxyMarker = /* @__PURE__ */ Symbol("Comlink.proxy");
 const createEndpoint = /* @__PURE__ */ Symbol("Comlink.endpoint");
 const releaseProxy = /* @__PURE__ */ Symbol("Comlink.releaseProxy");
@@ -41880,6 +41880,13 @@ function requireClassnames() {
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs$1(classnamesExports);
 const untranslated = (key, _args, fallback) => fallback ?? key;
+const VIRTUAL_KEYBOARD_TRAY_ID = "virtual-keyboard-tray";
+function getVirtualKeyboardTrayElement() {
+  return document.getElementById(VIRTUAL_KEYBOARD_TRAY_ID);
+}
+function isInVirtualKeyboardTray(node) {
+  return node instanceof Node && (getVirtualKeyboardTrayElement()?.contains(node) ?? false);
+}
 const KeyboardIcon = () => /* @__PURE__ */ React__default.createElement(
   "svg",
   {
@@ -41897,48 +41904,47 @@ const KeyboardIcon = () => /* @__PURE__ */ React__default.createElement(
 );
 function KeyboardTray({
   onClick,
+  open,
+  onOpenChange,
   theme,
   translate,
   direction
 }) {
-  const [open, setOpen] = React__default.useState(false);
   const t4 = translate ?? untranslated;
   const openLabel = t4("keyboard-open", void 0, "Open Keyboard");
   const closeLabel = t4("keyboard-close", void 0, "Close Keyboard");
+  const containerRef = React__default.useRef(null);
+  React__default.useLayoutEffect(() => {
+    if (open && containerRef.current) {
+      containerRef.current.scrollTop = 0;
+    }
+  }, [open]);
   return createPortal(
     /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        id: "virtual-keyboard-tray",
+        id: VIRTUAL_KEYBOARD_TRAY_ID,
         "data-theme": theme,
         dir: direction,
         className: classNames({ open }),
-        onMouseDown: () => {
-          onClick([
-            { type: "accessed", command: "", timestamp: +/* @__PURE__ */ new Date() }
-          ]);
-        },
-        onClick: () => {
-          onClick([
-            { type: "accessed", command: "", timestamp: +/* @__PURE__ */ new Date() }
-          ]);
-        }
+        onPointerDown: (e2) => e2.preventDefault(),
+        onMouseDown: (e2) => e2.preventDefault()
       },
       /* @__PURE__ */ React__default.createElement(
         "button",
         {
           className: "open-keyboard-button",
-          onClick: () => setOpen((old) => !old),
+          onClick: () => onOpenChange(!open),
           title: open ? closeLabel : openLabel,
           "aria-label": open ? closeLabel : openLabel
         },
         /* @__PURE__ */ React__default.createElement(KeyboardIcon, null)
       ),
-      /* @__PURE__ */ React__default.createElement("div", { className: "keyboard-container" }, /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React__default.createElement("div", { className: "keyboard-container", ref: containerRef }, /* @__PURE__ */ React__default.createElement(
         "button",
         {
           className: "close-keyboard-button",
-          onClick: () => setOpen(false),
+          onClick: () => onOpenChange(false),
           title: closeLabel,
           "aria-label": closeLabel
         },
@@ -67624,6 +67630,17 @@ function flatten_array(t4, n2) {
   for (var r2 = 0; r2 < t4.length; r2++) Array.isArray(t4[r2]) ? flatten_array(t4[r2], n2) : n2.push(t4[r2]);
   return n2;
 }
+const COARSE_POINTER_QUERY = "(pointer: coarse)";
+function getCoarsePointerQueryList() {
+  const matchMedia = globalThis.matchMedia;
+  if (typeof matchMedia !== "function") {
+    return null;
+  }
+  return matchMedia(COARSE_POINTER_QUERY);
+}
+function hasCoarsePrimaryPointer() {
+  return getCoarsePointerQueryList()?.matches ?? false;
+}
 var base32$1 = { exports: {} };
 var hasRequiredBase32;
 function requireBase32() {
@@ -68213,6 +68230,10 @@ requireCssesc();
 const globalThis$1 = Function("return this")() || {};
 const virtualKeyboardState = globalThis$1?.virtualKeyboardState || {
   count: 0,
+  open: false,
+  userClosedTray: false,
+  openListeners: /* @__PURE__ */ new Set(),
+  focusedMathInputSources: /* @__PURE__ */ new Set(),
   keyboardDomNode: null,
   keyboardReactRoot: null,
   registrations: [],
@@ -68228,9 +68249,6 @@ function getRegistrationById(id2) {
     (registration) => registration.id === id2
   ) ?? null;
 }
-function getTrayElement() {
-  return document.getElementById("virtual-keyboard-tray");
-}
 function getActiveRegistration() {
   const activeElement = document.activeElement;
   for (let i2 = virtualKeyboardState.registrations.length - 1; i2 >= 0; i2 -= 1) {
@@ -68241,7 +68259,7 @@ function getActiveRegistration() {
       return registration;
     }
   }
-  if (activeElement instanceof Node && getTrayElement()?.contains(activeElement)) {
+  if (isInVirtualKeyboardTray(activeElement)) {
     return getRegistrationById(
       virtualKeyboardState.lastActiveRegistrationId
     );
@@ -68262,12 +68280,63 @@ function getTrayRegistration() {
   const registrations = virtualKeyboardState.registrations;
   return registrations[registrations.length - 1];
 }
+function broadcastKeyboardChoice(open) {
+  const choice = [
+    { type: "keyboardChoice", command: open ? "virtual" : "system" }
+  ];
+  for (const registration of virtualKeyboardState.registrations) {
+    registration.onClick(choice);
+  }
+}
+function getTrayOpen() {
+  return virtualKeyboardState.open;
+}
+function subscribeToTrayOpen(listener) {
+  virtualKeyboardState.openListeners.add(listener);
+  return () => {
+    virtualKeyboardState.openListeners.delete(listener);
+  };
+}
+function setTrayOpen(open, { byUser }) {
+  if (byUser) {
+    virtualKeyboardState.userClosedTray = !open;
+    broadcastKeyboardChoice(open);
+  }
+  if (virtualKeyboardState.open === open) {
+    return;
+  }
+  virtualKeyboardState.open = open;
+  for (const listener of virtualKeyboardState.openListeners) {
+    listener();
+  }
+}
+function reportMathInputFocus(source, mathInputFocused) {
+  if (!hasCoarsePrimaryPointer()) {
+    return;
+  }
+  const focusedSources = virtualKeyboardState.focusedMathInputSources;
+  if (mathInputFocused) {
+    focusedSources.add(source);
+    if (!virtualKeyboardState.userClosedTray) {
+      setTrayOpen(true, { byUser: false });
+    }
+    return;
+  }
+  if (isInVirtualKeyboardTray(document.activeElement)) {
+    return;
+  }
+  focusedSources.delete(source);
+  if (focusedSources.size > 0) {
+    return;
+  }
+  setTrayOpen(false, { byUser: false });
+}
 function rerenderTray() {
   const registration = getTrayRegistration();
   const theme = registration?.theme;
   const translate = registration?.translate;
   const direction = registration?.direction;
-  const trayEl = getTrayElement();
+  const trayEl = getVirtualKeyboardTrayElement();
   if (trayEl) {
     const currentTheme = trayEl.getAttribute("data-theme") ?? void 0;
     const currentDirection = trayEl.getAttribute("dir") ?? void 0;
@@ -68280,17 +68349,38 @@ function rerenderTray() {
     renderTray(theme, translate, direction)
   );
 }
-function renderTray(theme, translate, direction) {
-  return /* @__PURE__ */ React__default.createElement(MathJaxContext, { config: mathjaxConfig, version: 4 }, /* @__PURE__ */ React__default.createElement(
+function TrayWithSharedOpenState({
+  theme,
+  translate,
+  direction
+}) {
+  const open = React__default.useSyncExternalStore(
+    subscribeToTrayOpen,
+    getTrayOpen,
+    getTrayOpen
+  );
+  return /* @__PURE__ */ React__default.createElement(
     KeyboardTray,
     {
       theme,
       translate,
       direction,
+      open,
+      onOpenChange: (nextOpen) => setTrayOpen(nextOpen, { byUser: true }),
       onClick: (e2) => {
         getActiveRegistration()?.onClick(e2);
       }
     }
+  );
+}
+function renderTray(theme, translate, direction) {
+  return /* @__PURE__ */ React__default.createElement(MathJaxContext, { config: mathjaxConfig, version: 4 }, /* @__PURE__ */ React__default.createElement(
+    TrayWithSharedOpenState,
+    {
+      theme,
+      translate,
+      direction
+    }
   ));
 }
 function UniqueKeyboardTray({
@@ -68361,6 +68451,9 @@ function UniqueKeyboardTray({
           );
           virtualKeyboardState.keyboardDomNode = null;
         }
+        virtualKeyboardState.open = false;
+        virtualKeyboardState.userClosedTray = false;
+        virtualKeyboardState.focusedMathInputSources.clear();
       } else {
         rerenderTray();
       }
@@ -68383,6 +68476,23 @@ function ExternalVirtualKeyboard({
   theme,
   ownerRef
 }) {
+  React__default.useEffect(() => {
+    let reportedFocused = false;
+    function listener(event) {
+      if (event.source !== ownerRef.current?.contentWindow || event.data?.subject !== "keyboard-focus") {
+        return;
+      }
+      reportedFocused = event.data.mathInputFocused;
+      reportMathInputFocus(ownerRef, reportedFocused);
+    }
+    window.addEventListener("message", listener);
+    return () => {
+      window.removeEventListener("message", listener);
+      if (reportedFocused) {
+        reportMathInputFocus(ownerRef, false);
+      }
+    };
+  }, [ownerRef]);
   return /* @__PURE__ */ React__default.createElement(
     UniqueKeyboardTray,
     {
@@ -68408,7 +68518,7 @@ function ExternalVirtualKeyboard({
     }
   );
 }
-const version = "0.7.23-dev.472";
+const version = "0.7.23-dev.476";
 const latestDoenetmlVersion = version;
 function subscribeToPinnedTheme() {
   return () => {