@arbidocs/blocks 0.4.117 → 0.4.119

package/dist/{chunk-NL7M7VQ2.cjs → chunk-JSH43QMZ.cjs}

@@ -4514,6 +4514,7 @@ function CompactToolbar() {
   ] });
 }
 var fixedZoomMode = { type: "fixed" };
+var ZOOM_LEVELS = [50, 75, 100, 125, 150, 200];
 function NativeDocxEditor({
   documentId,
   title,
@@ -4529,7 +4530,9 @@ function NativeDocxEditor({
   const [ready, setReady] = React4.useState(), [error, setError] = React4.useState(""), [retry, setRetry] = React4.useState(0);
   const [status, setStatus] = React4.useState("Connecting\u2026"), [dirty, setDirty] = React4.useState(false), [saving, setSaving] = React4.useState(false), [offline, setOffline] = React4.useState(false);
   const revision = React4.useRef(0);
-  const stageRef = React4.useRef(null), fitCleanup = React4.useRef(void 0);
+  const stageRef = React4.useRef(null), fitCleanup = React4.useRef(void 0), refit = React4.useRef(void 0);
+  const fitting = React4.useRef(true), fitted = React4.useRef(void 0);
+  const [fitWidth, setFitWidth] = React4.useState(true), [zoomPercent, setZoomPercent] = React4.useState(100);
   const ref = React4.useRef(null), dirtyRef = React4.useRef(false), draftTimer = React4.useRef(void 0);
   const isDraft = draftContent !== void 0;
   const streamRef = React4.useRef(stream);
@@ -4779,16 +4782,29 @@ function NativeDocxEditor({
       updateStream();
     }
     fitCleanup.current?.();
+    fitted.current = void 0;
     const viewport = stageRef.current?.querySelector(".native-docx-viewport");
     if (!viewport) return;
+    let surface = null;
     const fit = () => {
+      const page = viewport.querySelector(".docx-paginated-surface");
+      if (page && page !== surface) resize.observe(surface = page);
+      const current = editor.getZoom();
+      if (fitting.current && fitted.current !== void 0 && Math.abs(current - fitted.current) > 1e-3)
+        fitting.current = false;
+      setFitWidth(fitting.current);
+      setZoomPercent(Math.round(current * 100));
+      if (!fitting.current) return;
       const pageWidth = editor.getPageGeometry()[0]?.box.width;
       if (!pageWidth) return;
       const style = getComputedStyle(viewport);
       const available = viewport.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
-      const zoom = Math.max(0.1, Math.min(compact ? 1 : 2.5, available / pageWidth));
-      if (Math.abs(editor.getZoom() - zoom) > 1e-3) editor.setZoom(zoom);
+      const zoom = Math.max(0.1, Math.min(compact ? 1 : 5, available / pageWidth));
+      if (Math.abs(current - zoom) > 1e-3) editor.setZoom(zoom);
+      fitted.current = editor.getZoom();
+      setZoomPercent(Math.round(fitted.current * 100));
     };
+    refit.current = fit;
     const resize = new ResizeObserver(fit);
     const chrome = new MutationObserver(fit);
     resize.observe(viewport);
@@ -4796,12 +4812,30 @@ function NativeDocxEditor({
       attributes: true,
       attributeFilter: ["style", "data-review-pane", "data-review-margin"]
     });
+    const mount = viewport.querySelector(".docx-content-mount");
+    if (mount) chrome.observe(mount, { childList: true });
+    if (!fitting.current) editor.setZoom(zoomPercent / 100);
     fit();
     fitCleanup.current = () => {
       resize.disconnect();
       chrome.disconnect();
+      refit.current = void 0;
     };
   }
+  function pickZoom(value) {
+    const editor = ref.current;
+    if (!editor) return;
+    if (value === "fit") {
+      fitting.current = true;
+      fitted.current = void 0;
+      refit.current?.();
+      return;
+    }
+    fitting.current = false;
+    setFitWidth(false);
+    setZoomPercent(Number(value));
+    editor.setZoom(Number(value) / 100);
+  }
   function changed() {
     if (snapshot) return;
     revision.current += 1;
@@ -4965,6 +4999,24 @@ function NativeDocxEditor({
             status
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(DocxParticipants, { session: ready?.room?.session }),
+          !compact && /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              className: "native-docx-zoom",
+              "aria-label": "Zoom",
+              "data-testid": "native-docx-zoom",
+              disabled: !ready,
+              value: fitWidth ? "fit" : String(zoomPercent),
+              onChange: (event) => pickZoom(event.target.value),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "fit", children: "Fit width" }),
+                [.../* @__PURE__ */ new Set([...ZOOM_LEVELS, ...fitWidth ? [] : [zoomPercent]])].sort((a, b) => a - b).map((level) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: String(level), children: [
+                  level,
+                  "%"
+                ] }, level))
+              ]
+            }
+          ),
           !compact && /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
@@ -5056,5 +5108,5 @@ exports.useReview = useReview;
 exports.useReviewItem = useReviewItem;
 exports.useTrackedOrNoted = useTrackedOrNoted;
 exports.withDirectEditing = withDirectEditing;
-//# sourceMappingURL=chunk-NL7M7VQ2.cjs.map
-//# sourceMappingURL=chunk-NL7M7VQ2.cjs.map
+//# sourceMappingURL=chunk-JSH43QMZ.cjs.map
+//# sourceMappingURL=chunk-JSH43QMZ.cjs.map