npm - @doenet/doenetml-iframe - Versions diffs - 0.7.21-dev.360 → 0.7.21-dev.362 - Mend

@doenet/doenetml-iframe 0.7.21-dev.360 → 0.7.21-dev.362

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -80,8 +80,8 @@ the inner viewer applies them with the same semantics as the in-process
 | Prop change                                                                | Effect                                                                                                      |
 | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| `render`, `darkMode`, `styleOverrides`, `flags`, `answerResponseCounts`, callbacks, … | applied live, no reload (flipping `render` false→true starts the document in the already-loaded realm)       |
-| `doenetML`, `activityId`, `docId`, `attemptNumber`, `requestedVariantIndex` | the document's core re-initializes **inside the same iframe realm** — the multi-MB bundle is not re-parsed   |
+| `render`, `darkMode`, `styleOverrides`, `uiLocale`, `flags`, `answerResponseCounts`, callbacks, … | applied live, no reload (flipping `render` false→true starts the document in the already-loaded realm)       |
+| `doenetML`, `activityId`, `docId`, `attemptNumber`, `requestedVariantIndex`, `documentLocale`, `localeResources` | the document's core re-initializes **inside the same iframe realm** — the multi-MB bundle is not re-parsed   |
 | `initialState`, `forceDisable` and the other `force*` props, `userId`       | read at (re-)initialization only, exactly like the in-process viewer — change `docId`/`attemptNumber` or remount via `key=` to apply |
 | `standaloneUrl`, `cssUrl`, `doenetmlVersion` (or a version change detected in `doenetML`), `useSharedCoreWorker` | a different bundle/realm is required, so the iframe reloads                                                   |
@@ -183,6 +183,32 @@ inner viewer.
 > document's `xmlns`), the wrapper falls back to its historical behavior of
 > reloading the iframe on any prop change.
+### Language (`documentLocale` / `uiLocale`)
+Doenet keeps the language of the **content** apart from the language of the
+**chrome** (buttons, panel headers, diagnostics), because they genuinely
+differ — a Spanish-speaking student may work a French physics problem.
+- `documentLocale` — BCP-47 tag for the content's language (`"es"`,
+  `"es-MX"`). Defaults to `"en"`. An authored `<document lang="es-MX">`
+  overrides it: the author knows what language they wrote in, the host only
+  knows what it would prefer to receive.
+- `uiLocale` — BCP-47 tag for the chrome's language. Defaults to following
+  `documentLocale`, so a fully Spanish activity is fully Spanish without the
+  host configuring anything.
+- `localeResources` — FTL message catalogs keyed by locale, for locales other
+  than English. English is bundled, so a host that only needs English passes
+  nothing. Nothing is translated yet, so there are no catalogs to supply today.
+When a language is declared — by either route — the rendered container carries
+a matching `lang` attribute, so screen readers pronounce the content with the
+right voice and rules. When neither declares one it carries no `lang` at all
+and inherits the embedding page's, a better guess than asserting English over
+a page that said `<html lang="es">`.
+Passing `null` (or dropping the prop) clears any of the three, exactly as with
+`styleOverrides`.
 ### Windowed mounting (`mountPolicy`)
 Pages that embed many viewers (assignment pages, textbook chapters) pay

package/index.js CHANGED Viewed

@@ -39023,6 +39023,7 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs$1(classnamesExports);
+const untranslated = (key, _args, fallback) => fallback ?? key;
 const KeyboardIcon = () => /* @__PURE__ */ React__default.createElement(
   "svg",
   {
@@ -39040,9 +39041,13 @@ const KeyboardIcon = () => /* @__PURE__ */ React__default.createElement(
 );
 function KeyboardTray({
   onClick,
-  theme
+  theme,
+  translate
 }) {
   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");
   return createPortal(
     /* @__PURE__ */ React__default.createElement(
       "div",
@@ -39066,8 +39071,8 @@ function KeyboardTray({
         {
           className: "open-keyboard-button",
           onClick: () => setOpen((old) => !old),
-          title: open ? "Close Keyboard" : "Open Keyboard",
-          "aria-label": open ? "Close Keyboard" : "Open Keyboard"
+          title: open ? closeLabel : openLabel,
+          "aria-label": open ? closeLabel : openLabel
         },
         /* @__PURE__ */ React__default.createElement(KeyboardIcon, null)
       ),
@@ -39076,8 +39081,8 @@ function KeyboardTray({
         {
           className: "close-keyboard-button",
           onClick: () => setOpen(false),
-          title: "Close Keyboard",
-          "aria-label": "Close Keyboard"
+          title: closeLabel,
+          "aria-label": closeLabel
         },
         "×"
       ), /* @__PURE__ */ React__default.createElement(ManagedKeyboard, { onClick }))
@@ -65384,36 +65389,42 @@ function getActiveRegistration() {
   }
   return null;
 }
-function getTrayTheme() {
+function getTrayRegistration() {
   const activeRegistration = getActiveRegistration();
   if (activeRegistration) {
-    return activeRegistration.theme;
+    return activeRegistration;
   }
   const lastActiveRegistration = getRegistrationById(
     virtualKeyboardState.lastActiveRegistrationId
   );
   if (lastActiveRegistration) {
-    return lastActiveRegistration.theme;
+    return lastActiveRegistration;
   }
   const registrations = virtualKeyboardState.registrations;
-  return registrations[registrations.length - 1]?.theme;
+  return registrations[registrations.length - 1];
 }
 function rerenderTray() {
-  const theme = getTrayTheme();
+  const registration = getTrayRegistration();
+  const theme = registration?.theme;
+  const translate = registration?.translate;
   const trayEl = getTrayElement();
   if (trayEl) {
     const currentTheme = trayEl.getAttribute("data-theme") ?? void 0;
-    if (currentTheme === theme) {
+    if (currentTheme === theme && virtualKeyboardState.lastRenderedTranslate === translate) {
       return;
     }
   }
-  virtualKeyboardState.keyboardReactRoot?.render(renderTray(theme));
+  virtualKeyboardState.lastRenderedTranslate = translate;
+  virtualKeyboardState.keyboardReactRoot?.render(
+    renderTray(theme, translate)
+  );
 }
-function renderTray(theme) {
+function renderTray(theme, translate) {
   return /* @__PURE__ */ React__default.createElement(MathJaxContext, { config: mathjaxConfig, version: 4 }, /* @__PURE__ */ React__default.createElement(
     KeyboardTray,
     {
       theme,
+      translate,
       onClick: (e2) => {
         getActiveRegistration()?.onClick(e2);
       }
@@ -65423,6 +65434,7 @@ function renderTray(theme) {
 function UniqueKeyboardTray({
   onClick,
   theme,
+  translate,
   ownerRef
 }) {
   const [id2] = React__default.useState(() => {
@@ -65451,6 +65463,7 @@ function UniqueKeyboardTray({
       id: id2,
       onClick,
       theme,
+      translate,
       ownerRef
     });
     rerenderTray();
@@ -65494,10 +65507,11 @@ function UniqueKeyboardTray({
     if (registration) {
       registration.onClick = onClick;
       registration.theme = theme;
+      registration.translate = translate;
       registration.ownerRef = ownerRef;
       rerenderTray();
     }
-  }, [onClick, ownerRef, theme]);
+  }, [onClick, ownerRef, theme, translate]);
   return null;
 }
 function ExternalVirtualKeyboard({
@@ -65529,7 +65543,7 @@ function ExternalVirtualKeyboard({
     }
   );
 }
-const version = "0.7.21-dev.360";
+const version = "0.7.21-dev.362";
 const latestDoenetmlVersion = version;
 function subscribeToPinnedTheme() {
   return () => {
@@ -66160,6 +66174,12 @@ function DoenetViewer({
   }
   return /* @__PURE__ */ React__default.createElement("div", { ref: containerRef, style: { width: "100%" } }, viewerContent);
 }
+const PROPS_PINNED_TO_NULL = [
+  "styleOverrides",
+  "documentLocale",
+  "uiLocale",
+  "localeResources"
+];
 function serializePropsSnapshot(seed, props) {
   const snapshot = { ...seed };
   for (const [key, val] of Object.entries(props)) {
@@ -66167,8 +66187,10 @@ function serializePropsSnapshot(seed, props) {
       snapshot[key] = val;
     }
   }
-  if (snapshot.styleOverrides === void 0) {
-    snapshot.styleOverrides = null;
+  for (const key of PROPS_PINNED_TO_NULL) {
+    if (snapshot[key] === void 0) {
+      snapshot[key] = null;
+    }
   }
   return JSON.stringify(snapshot);
 }