oasis-editor 0.0.24 → 0.0.25

package/dist/{OasisEditorApp-Ckv1Glbw.js → OasisEditorApp-y3iUL8-k.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { n as normalizeSelection, g as getParagraphs, c as createEditorParagraphFromRuns, a as getParagraphLength, b as createEditorRun, d as getDocumentSections, e as createEditorStyledRun, f as getParagraphText, h as getActiveZone, i as getActiveSectionIndex, p as positionToParagraphOffset, j as paragraphOffsetToPosition, k as clampPosition, l as findParagraphIndex, m as createCollapsedSelection, o as isSelectionCollapsed, q as createEditorParagraph, r as getBlockParagraphs, s as findParagraphTableLocation, t as buildTableCellLayout, u as createEditorTableCell, v as createEditorTable, w as createEditorTableRow, x as underlineStyleToCssDecorationStyle, y as resolveImageSrc, z as createEditorFootnote, A as createFootnoteReferenceRun, B as renumberFootnotes, C as iterateFootnoteReferenceRuns, D as getFootnoteDisplayMarker, E as createSignal, F as createEffect, G as onCleanup, H as buildCanvasLayoutSnapshot, I as on, J as onMount, K as debounce, L as unwrap, M as getDocumentParagraphs, N as getDocumentSectionsCanonical, O as createEditorDocument, P as getPageContentWidth, Q as getDocumentPageSettings, R as getTableCellContentWidthForParagraph, S as resolveResizedDimensions, T as resolveTextBoxRenderHeight, U as resolveEffectiveParagraphStyle, V as resolveEffectiveTextStyleForParagraph, W as iterateEndnoteReferenceRuns, X as JSZip, Y as imageContentTypeDefaults, Z as imageExtensionFromMime, _ as pxToPt$1, $ as buildSegmentTable, a0 as buildCanvasTableLayout, a1 as resolveFloatingObjectRect, a2 as getTextBoxFloatingGeometry, a3 as getPresetPathSegments, a4 as projectBlocksLayout, a5 as textStyleToFontSizePt, a6 as PX_PER_POINT, a7 as DEFAULT_FONT_SIZE_PX, a8 as isDoubleUnderlineStyle, a9 as isWavyUnderlineStyle, aa as underlineStyleLineWidthPx, ab as underlineStyleDashArray, ac as getListLabelInset, ad as getParagraphBorderInsets, ae as normalizeFamily, af as ROBOTO_FONT_FILES, ag as loadFontAsset, ah as OFFICE_COMPAT_FONT_FAMILIES, ai as buildSfnt, aj as defaultFontDecoderRegistry, ak as SfntFontProgram, al as collectPdfFontFamilies, am as projectDocumentLayout, an as getPageHeaderZoneTop, ao as getPageBodyTop, ap as getPageColumnRects, aq as findFootnoteReference, ar as FOOTNOTE_MARKER_GUTTER_PX, as as resolveImporterForFile, at as createEditorStateFromDocument, au as getDocumentParagraphsCanonical, av as getToolbarStyleState, aw as STANDARD_FONT_SIZES_PT, ax as fontSizePxToPt, ay as probeLocalFontFamilies, az as createInitialEditorState, aA as parseFontSizePtToPx, aB as formatFontSizePt, aC as listKindForTag, aD as isParagraphTag, aE as collectInlineRuns, aF as parseParagraphStyle, aG as t, aH as preciseFontModeVersion, aI as isPreciseFontModeEnabled, aJ as togglePreciseFontMode, aK as nextFontSizePt, aL as previousFontSizePt, aM as fontSizePtToPx, aN as createDefaultToolbarPreset, aO as defaultMenuItems, aP as MenuRegistry, aQ as createToolbarRegistry, aR as Editor, aS as resolveCommandRef, aT as commandRefName, aU as InlineShell, aV as BalloonShell, aW as DocumentShell, aX as createMemo, aY as getCaretRectFromSnapshot, aZ as getParagraphRectFromSnapshot, a_ as createComponent, a$ as CaretOverlay, b0 as Show, b1 as createRenderEffect, b2 as style, b3 as setAttribute, b4 as setStyleProperty, b5 as memo, b6 as template, b7 as insert, b8 as use, b9 as addEventListener, ba as Dialog, bb as delegateEvents, bc as className, bd as For, be as UNDERLINE_STYLE_OPTIONS, bf as Tabs, bg as measureParagraphMinContentWidthPx, bh as getEditableBlocksForZone, bi as findParagraphLocation, bj as createSectionBoundaryParagraph, bk as normalizePageSettings, bl as DEFAULT_EDITOR_PAGE_SETTINGS, bm as markStart, bn as markEnd, bo as getParagraphEntries, bp as getParagraphById, bq as PluginUiHost, br as OasisEditorEditor, bs as perfTimer, bt as OasisBrandMark, bu as setPreciseFontPreference, bv as setWelcomeSeen, bw as enablePreciseFontMode, bx as createOasisEditorClient, by as setLocale, bz as startLongTaskObserver, bA as installGlobalReport, bB as applyStoredPreciseFontPreference, bC as getWelcomeSeen, bD as isLocalFontAccessSupported, bE as EDITOR_SCROLL_PADDING_PX, bF as Toolbar, bG as OasisEditorLoading, bH as createEditorLogger, bI as getCachedCanvasImage, bJ as registerDomStatsSurface } from "./index-WKT6eKMj.js";
+import { n as normalizeSelection, g as getParagraphs, c as createEditorParagraphFromRuns, a as getParagraphLength, b as createEditorRun, d as getDocumentSections, e as createEditorStyledRun, f as getParagraphText, h as getActiveZone, i as getActiveSectionIndex, p as positionToParagraphOffset, j as paragraphOffsetToPosition, k as clampPosition, l as findParagraphIndex, m as createCollapsedSelection, o as isSelectionCollapsed, q as createEditorParagraph, r as getBlockParagraphs, s as findParagraphTableLocation, t as buildTableCellLayout, u as createEditorTableCell, v as createEditorTable, w as createEditorTableRow, x as underlineStyleToCssDecorationStyle, y as resolveImageSrc, z as createEditorFootnote, A as createFootnoteReferenceRun, B as renumberFootnotes, C as iterateFootnoteReferenceRuns, D as getFootnoteDisplayMarker, E as createSignal, F as createEffect, G as onCleanup, H as buildCanvasLayoutSnapshot, I as on, J as onMount, K as debounce, L as unwrap, M as getDocumentParagraphs, N as getDocumentSectionsCanonical, O as createEditorDocument, P as getPageContentWidth, Q as getDocumentPageSettings, R as getTableCellContentWidthForParagraph, S as resolveResizedDimensions, T as resolveTextBoxRenderHeight, U as resolveEffectiveParagraphStyle, V as resolveEffectiveTextStyleForParagraph, W as iterateEndnoteReferenceRuns, X as JSZip, Y as imageContentTypeDefaults, Z as imageExtensionFromMime, _ as pxToPt$1, $ as buildSegmentTable, a0 as buildCanvasTableLayout, a1 as resolveFloatingObjectRect, a2 as getTextBoxFloatingGeometry, a3 as getPresetPathSegments, a4 as projectBlocksLayout, a5 as textStyleToFontSizePt, a6 as PX_PER_POINT, a7 as DEFAULT_FONT_SIZE_PX, a8 as isDoubleUnderlineStyle, a9 as isWavyUnderlineStyle, aa as underlineStyleLineWidthPx, ab as underlineStyleDashArray, ac as getListLabelInset, ad as getParagraphBorderInsets, ae as normalizeFamily, af as ROBOTO_FONT_FILES, ag as loadFontAsset, ah as OFFICE_COMPAT_FONT_FAMILIES, ai as buildSfnt, aj as defaultFontDecoderRegistry, ak as SfntFontProgram, al as collectPdfFontFamilies, am as projectDocumentLayout, an as getPageHeaderZoneTop, ao as getPageBodyTop, ap as getPageColumnRects, aq as findFootnoteReference, ar as FOOTNOTE_MARKER_GUTTER_PX, as as resolveImporterForFile, at as createEditorStateFromDocument, au as getDocumentParagraphsCanonical, av as getToolbarStyleState, aw as STANDARD_FONT_SIZES_PT, ax as fontSizePxToPt, ay as probeLocalFontFamilies, az as createInitialEditorState, aA as parseFontSizePtToPx, aB as formatFontSizePt, aC as listKindForTag, aD as isParagraphTag, aE as collectInlineRuns, aF as parseParagraphStyle, aG as t, aH as preciseFontModeVersion, aI as isPreciseFontModeEnabled, aJ as togglePreciseFontMode, aK as nextFontSizePt, aL as previousFontSizePt, aM as fontSizePtToPx, aN as createDefaultToolbarPreset, aO as defaultMenuItems, aP as MenuRegistry, aQ as createToolbarRegistry, aR as Editor, aS as resolveCommandRef, aT as commandRefName, aU as InlineShell, aV as BalloonShell, aW as DocumentShell, aX as createMemo, aY as getCaretRectFromSnapshot, aZ as getParagraphRectFromSnapshot, a_ as createComponent, a$ as CaretOverlay, b0 as Show, b1 as createRenderEffect, b2 as style, b3 as setAttribute, b4 as setStyleProperty, b5 as memo, b6 as template, b7 as insert, b8 as use, b9 as addEventListener, ba as Dialog, bb as delegateEvents, bc as className, bd as For, be as UNDERLINE_STYLE_OPTIONS, bf as Tabs, bg as measureParagraphMinContentWidthPx, bh as getEditableBlocksForZone, bi as findParagraphLocation, bj as createSectionBoundaryParagraph, bk as normalizePageSettings, bl as DEFAULT_EDITOR_PAGE_SETTINGS, bm as markStart, bn as markEnd, bo as getParagraphEntries, bp as getParagraphById, bq as PluginUiHost, br as OasisEditorEditor, bs as perfTimer, bt as OasisBrandMark, bu as setPreciseFontPreference, bv as setWelcomeSeen, bw as enablePreciseFontMode, bx as createOasisEditorClient, by as setLocale, bz as createEditorZoom, bA as startLongTaskObserver, bB as installGlobalReport, bC as applyStoredPreciseFontPreference, bD as getWelcomeSeen, bE as isLocalFontAccessSupported, bF as EDITOR_SCROLL_PADDING_PX, bG as Toolbar, bH as OasisEditorLoading, bI as createEditorLogger, bJ as getCachedCanvasImage, bK as registerDomStatsSurface } from "./index-Df7Ob0Ek.js";
 function getSelectedObjectRun(state, predicate) {
   const normalized = normalizeSelection(state);
   if (normalized.isCollapsed || normalized.startIndex !== normalized.endIndex || normalized.endParagraphOffset - normalized.startParagraphOffset !== 1) {
@@ -5488,6 +5488,7 @@ function useEditorLayout(props) {
   );
   let syncRequestId = 0;
   const syncInputBox = (_reason = "selection") => {
+    var _a;
     const surface = props.surfaceRef();
     if (!surface) {
       setSelectionBoxes([]);
@@ -5501,7 +5502,8 @@ function useEditorLayout(props) {
       surface,
       state: props.state,
       measuredBlockHeights: measuredBlockHeights(),
-      measuredParagraphLayouts: measuredParagraphLayouts()
+      measuredParagraphLayouts: measuredParagraphLayouts(),
+      zoomFactor: (_a = props.zoomFactor) == null ? void 0 : _a.call(props)
     });
     if (!snapshot) {
       setSelectionBoxes([]);
@@ -39822,8 +39824,12 @@ function resolveImageAtPoint(snapshot, pageIndex, zone, clientX, clientY, pierce
 }
 function resolveCanvasSurfaceHitAtPoint(options) {
   var _a, _b, _c;
-  const { snapshot, state, clientX, clientY } = options;
+  const { snapshot, state } = options;
   const pierce = options.pierce ?? false;
+  const zoomFactor = options.zoomFactor && options.zoomFactor > 0 ? options.zoomFactor : 1;
+  const surfaceRect = snapshot.surfaceRect;
+  const clientX = surfaceRect.left + (options.clientX - surfaceRect.left) / zoomFactor;
+  const clientY = surfaceRect.top + (options.clientY - surfaceRect.top) / zoomFactor;
   const page = resolveNearestPage(snapshot.pages, clientX, clientY);
   if (!page) {
     return null;
@@ -39982,12 +39988,14 @@ function createCanvasSurfaceHitResolver(deps) {
     const viewportScrollLeft = (currentViewportRef == null ? void 0 : currentViewportRef.scrollLeft) ?? 0;
     const windowWidth = window.innerWidth;
     const windowHeight = window.innerHeight;
-    const shouldReuseSnapshot = canvasSnapshotCache && canvasSnapshotCache.documentRef === currentState.document && canvasSnapshotCache.measuredBlockHeightsRef === currentMeasuredBlockHeights && canvasSnapshotCache.measuredParagraphLayoutsRef === currentMeasuredParagraphLayouts && canvasSnapshotCache.surfaceRef === currentSurfaceRef && canvasSnapshotCache.viewportScrollTop === viewportScrollTop && canvasSnapshotCache.viewportScrollLeft === viewportScrollLeft && canvasSnapshotCache.surfaceClientWidth === currentSurfaceRef.clientWidth && canvasSnapshotCache.surfaceClientHeight === currentSurfaceRef.clientHeight && canvasSnapshotCache.windowWidth === windowWidth && canvasSnapshotCache.windowHeight === windowHeight;
+    const zoomFactor = deps.zoomFactor();
+    const shouldReuseSnapshot = canvasSnapshotCache && canvasSnapshotCache.documentRef === currentState.document && canvasSnapshotCache.measuredBlockHeightsRef === currentMeasuredBlockHeights && canvasSnapshotCache.measuredParagraphLayoutsRef === currentMeasuredParagraphLayouts && canvasSnapshotCache.surfaceRef === currentSurfaceRef && canvasSnapshotCache.viewportScrollTop === viewportScrollTop && canvasSnapshotCache.viewportScrollLeft === viewportScrollLeft && canvasSnapshotCache.surfaceClientWidth === currentSurfaceRef.clientWidth && canvasSnapshotCache.surfaceClientHeight === currentSurfaceRef.clientHeight && canvasSnapshotCache.windowWidth === windowWidth && canvasSnapshotCache.windowHeight === windowHeight && canvasSnapshotCache.zoomFactor === zoomFactor;
     const snapshot = shouldReuseSnapshot ? canvasSnapshotCache.snapshot : buildCanvasLayoutSnapshot({
       surface: currentSurfaceRef,
       state: currentState,
       measuredBlockHeights: currentMeasuredBlockHeights,
-      measuredParagraphLayouts: currentMeasuredParagraphLayouts
+      measuredParagraphLayouts: currentMeasuredParagraphLayouts,
+      zoomFactor
     });
     if (!shouldReuseSnapshot) {
       canvasSnapshotCache = {
@@ -40001,7 +40009,8 @@ function createCanvasSurfaceHitResolver(deps) {
         surfaceClientWidth: currentSurfaceRef.clientWidth,
         surfaceClientHeight: currentSurfaceRef.clientHeight,
         windowWidth,
-        windowHeight
+        windowHeight,
+        zoomFactor
       };
     }
     recordCanvasDebugLayoutSnapshot(snapshot);
@@ -40014,7 +40023,8 @@ function createCanvasSurfaceHitResolver(deps) {
       state: currentState,
       clientX,
       clientY,
-      pierce: context.pierce ?? false
+      pierce: context.pierce ?? false,
+      zoomFactor
     });
     recordCanvasDebugHit(hit);
     return hit;
@@ -45736,7 +45746,7 @@ function createEditorNavigation(deps) {
     return moveVerticalSelection(direction, false);
   };
   const moveVerticalSelection = (direction, extend) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const state = deps.state();
     const paragraphs = getParagraphs(state);
     const currentIndex = paragraphs.findIndex(
@@ -45751,7 +45761,8 @@ function createEditorNavigation(deps) {
     const desiredX = preferredX === null ? deps.caretBox().left + ((surfaceRect == null ? void 0 : surfaceRect.left) ?? 0) : preferredX;
     const snapshot = surfaceRef ? buildCanvasLayoutSnapshot({
       surface: surfaceRef,
-      state
+      state,
+      zoomFactor: (_a = deps.zoomFactor) == null ? void 0 : _a.call(deps)
     }) : null;
     let targetIndex = currentIndex + direction;
     const tableLocation = findParagraphTableLocation(
@@ -45793,7 +45804,7 @@ function createEditorNavigation(deps) {
               const distance = desiredX < left ? left - desiredX : desiredX > right ? desiredX - right : 0;
               return { entry, distance };
             }).sort((left, right) => left.distance - right.distance);
-            const candidate = (_a = scoredCandidates[0]) == null ? void 0 : _a.entry;
+            const candidate = (_b = scoredCandidates[0]) == null ? void 0 : _b.entry;
             if (!candidate) {
               continue;
             }
@@ -45803,14 +45814,14 @@ function createEditorNavigation(deps) {
           }
         } else {
           if (direction < 0) {
-            const firstParaId = (_d = (_c = (_b = block.rows[0]) == null ? void 0 : _b.cells[0]) == null ? void 0 : _c.blocks[0]) == null ? void 0 : _d.id;
+            const firstParaId = (_e = (_d = (_c = block.rows[0]) == null ? void 0 : _c.cells[0]) == null ? void 0 : _d.blocks[0]) == null ? void 0 : _e.id;
             if (firstParaId) {
               targetIndex = paragraphs.findIndex((p) => p.id === firstParaId) - 1;
             }
           } else {
             const lastRow = block.rows[block.rows.length - 1];
             const lastCell = lastRow == null ? void 0 : lastRow.cells[lastRow.cells.length - 1];
-            const lastParaId = (_e = lastCell == null ? void 0 : lastCell.blocks[lastCell.blocks.length - 1]) == null ? void 0 : _e.id;
+            const lastParaId = (_f = lastCell == null ? void 0 : lastCell.blocks[lastCell.blocks.length - 1]) == null ? void 0 : _f.id;
             if (lastParaId) {
               targetIndex = paragraphs.findIndex((p) => p.id === lastParaId) + 1;
             }
@@ -45959,7 +45970,8 @@ function useEditorInteractionWiring(ctx) {
     setPreferredColumnX: ctx.setPreferredColumnX,
     clearPreferredColumn: ctx.clearPreferredColumn,
     resetTransactionGrouping: ctx.resetTransactionGrouping,
-    focusInput: ctx.focusInput
+    focusInput: ctx.focusInput,
+    zoomFactor: ctx.zoomFactor
   });
   const { handleCopy, handleCut, handlePaste, handleDrop } = createEditorClipboardController({
     state,
@@ -45992,7 +46004,10 @@ function buildEditorViewProps(ctx) {
   const layout = {
     viewportHeight: ctx.viewportHeight,
     class: ctx.className,
-    style: ctx.style
+    style: ctx.style,
+    zoomPercent: ctx.zoomPercent,
+    setZoomPercent: ctx.setZoomPercent,
+    zoomFactor: ctx.zoomFactor
   };
   const overlays = {
     selectionBoxes: ctx.selectionBoxes,
@@ -46397,6 +46412,7 @@ function OasisEditorApp(props = {}) {
   const focusInput = focusController.focusInput;
   const focusInputAfterPointerSelection = focusController.focusInputAfterPointerSelection;
   const [initialLoading, setInitialLoading] = createSignal(ui().loading !== false);
+  const zoom = createEditorZoom();
   const {
     linkDialog,
     setLinkDialog,
@@ -46456,7 +46472,8 @@ function OasisEditorApp(props = {}) {
     state,
     surfaceRef,
     viewportRef,
-    isImporting: isImportInProgress
+    isImporting: isImportInProgress,
+    zoomFactor: zoom.zoomFactor
   });
   const {
     status: persistenceStatus
@@ -46579,7 +46596,8 @@ function OasisEditorApp(props = {}) {
     surfaceRef: () => surfaceRef() ?? null,
     viewportRef: () => viewportRef() ?? null,
     measuredBlockHeights,
-    measuredParagraphLayouts
+    measuredParagraphLayouts,
+    zoomFactor: zoom.zoomFactor
   });
   const resolveSurfaceHitAtPoint = canvasHitResolver.resolveSurfaceHitAtPoint;
   const fr = useEditorFindReplace({
@@ -46664,6 +46682,7 @@ function OasisEditorApp(props = {}) {
     caretBox: () => caretBox(),
     preferredColumnX: () => preferredColumnX(),
     setPreferredColumnX,
+    zoomFactor: zoom.zoomFactor,
     resolveSurfaceHitAtPoint,
     resolvePositionAtSurfacePoint,
     tableOps,
@@ -46960,6 +46979,9 @@ function OasisEditorApp(props = {}) {
     viewportHeight: ui().viewportHeight,
     className: ui().class,
     style: ui().style,
+    zoomPercent: zoom.zoomPercent,
+    setZoomPercent: zoom.setZoomPercent,
+    zoomFactor: zoom.zoomFactor,
     selectionBoxes,
     commentHighlights,
     selectedImageBox,

package/dist/app/controllers/useEditorLayout.d.ts

@@ -7,6 +7,8 @@ interface UseEditorLayoutProps {
     surfaceRef: () => HTMLDivElement | undefined;
     viewportRef: () => HTMLDivElement | undefined;
     isImporting?: () => boolean;
+    /** Current visual zoom factor; the snapshot stays zoom-invariant. */
+    zoomFactor?: () => number;
 }
 type LayoutSyncReason = "selection" | "scroll" | "content-change" | "resize" | "import";
 export interface LayoutInvalidation {

package/dist/app/controllers/useEditorNavigation.d.ts

@@ -12,6 +12,12 @@ export interface UseEditorNavigationProps {
     clearPreferredColumn: () => void;
     resetTransactionGrouping: () => void;
     focusInput: () => void;
+    /**
+     * Current visual zoom factor. `desiredX` and the snapshot slots both live in
+     * "screen-anchored local" space, so the comparison stays correct once the
+     * snapshot is built zoom-aware.
+     */
+    zoomFactor?: () => number;
 }
 export declare function createEditorNavigation(deps: UseEditorNavigationProps): {
     moveSelectionToParagraphBoundary: (boundary: "start" | "end", extend: boolean) => boolean;

package/dist/{index-WKT6eKMj.js → index-Df7Ob0Ek.js}

@@ -2438,7 +2438,7 @@ function OasisEditorAppLazy(props = {}) {
     onCleanup(() => {
       cancelled = true;
     });
-    import("./OasisEditorApp-Ckv1Glbw.js").then((m) => {
+    import("./OasisEditorApp-y3iUL8-k.js").then((m) => {
       cancelled = true;
       setProgress(1);
       setTimeout(() => setApp(() => m.OasisEditorApp), 180);
@@ -18088,6 +18088,7 @@ function buildVerticalCellSnapshotLines(options) {
 }
 function buildCanvasLayoutSnapshot(options) {
   const { surface, state } = options;
+  const zoomFactor = options.zoomFactor && options.zoomFactor > 0 ? options.zoomFactor : 1;
   const documentLayout = projectDocumentLayout(
     state.document,
     void 0,
@@ -18117,7 +18118,13 @@ function buildCanvasLayoutSnapshot(options) {
     if (!pageElement) {
       continue;
     }
-    const pageRect = pageElement.getBoundingClientRect();
+    const rawPageRect = pageElement.getBoundingClientRect();
+    const pageRect = {
+      left: surfaceRect.left + (rawPageRect.left - surfaceRect.left) / zoomFactor,
+      top: surfaceRect.top + (rawPageRect.top - surfaceRect.top) / zoomFactor,
+      width: rawPageRect.width / zoomFactor,
+      height: rawPageRect.height / zoomFactor
+    };
     const bodyTop = page.bodyTop ?? getPageBodyTop(page.pageSettings);
     const bodyBottom = page.bodyBottom ?? getPageBodyBottom(page.pageSettings);
     const headerTop = page.headerTop ?? getPageHeaderZoneTop(page.pageSettings);
@@ -36497,14 +36504,22 @@ function ResizeHandlesOverlay(props) {
   })();
 }
 delegateEvents(["mousedown"]);
-var _tmpl$$m = /* @__PURE__ */ template(`<div data-testid=editor-editor-shell><div class=oasis-editor-editor data-testid=editor-editor><div class=oasis-editor-editor-zoom-sizer><div class=oasis-editor-editor-scroll-content data-testid=editor-editor-scroll-content style="position:absolute;top:0px;transform-origin:top left"><textarea aria-label="Editor input"autocomplete=off autocapitalize=off class=oasis-editor-input data-testid=editor-input value style=pointer-events:none></textarea><input data-testid=editor-import-docx-input type=file style=display:none><input accept="image/png, image/jpeg, image/gif"data-testid=editor-insert-image-input type=file style=display:none></div></div></div><div class=oasis-editor-statusbar data-testid=editor-statusbar><span class=oasis-editor-statusbar-item data-testid=editor-statusbar-word-count></span><span class=oasis-editor-statusbar-item data-testid=editor-statusbar-character-count></span><span class=oasis-editor-statusbar-item></span><div class=oasis-editor-statusbar-zoom data-testid=editor-statusbar-zoom-control><button type=button class=oasis-editor-zoom-button>−</button><input class=oasis-editor-zoom-slider type=range min=50 max=200 step=10><button type=button class=oasis-editor-zoom-button>+</button><span class="oasis-editor-statusbar-item oasis-editor-zoom-value"data-testid=editor-statusbar-zoom>%`), _tmpl$2$g = /* @__PURE__ */ template(`<div class=oasis-editor-import-overlay data-testid=editor-import-overlay role=status aria-live=polite><div class=oasis-editor-import-card><div class=oasis-editor-import-title></div><div class=oasis-editor-import-phase data-testid=editor-import-phase></div><div class=oasis-editor-import-progress-track><div class=oasis-editor-import-progress-bar data-testid=editor-import-progress-bar></div></div><div class=oasis-editor-import-progress-label>`), _tmpl$3$a = /* @__PURE__ */ template(`<span class=oasis-editor-import-done-icon>`), _tmpl$4$8 = /* @__PURE__ */ template(`<span class=oasis-editor-import-error-icon>`), _tmpl$5$7 = /* @__PURE__ */ template(`<span>`);
 const ZOOM_MIN = 50;
 const ZOOM_MAX = 200;
 const ZOOM_STEP = 10;
+const ZOOM_DEFAULT = 100;
 function clampZoom(value) {
-  if (!Number.isFinite(value)) return 100;
+  if (!Number.isFinite(value)) return ZOOM_DEFAULT;
   return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(value)));
 }
+function createEditorZoom(initial = ZOOM_DEFAULT) {
+  const [zoomPercent, setZoomPercentRaw] = createSignal(clampZoom(initial));
+  const setZoomPercent = (value) => setZoomPercentRaw(clampZoom(value));
+  const adjustZoom = (delta) => setZoomPercentRaw((current) => clampZoom(current + delta));
+  const zoomFactor = createMemo(() => zoomPercent() / 100);
+  return { zoomPercent, setZoomPercent, adjustZoom, zoomFactor };
+}
+var _tmpl$$m = /* @__PURE__ */ template(`<div data-testid=editor-editor-shell><div class=oasis-editor-editor data-testid=editor-editor><div class=oasis-editor-editor-zoom-sizer><div class=oasis-editor-editor-scroll-content data-testid=editor-editor-scroll-content style="position:absolute;top:0px;transform-origin:top left"><textarea aria-label="Editor input"autocomplete=off autocapitalize=off class=oasis-editor-input data-testid=editor-input value style=pointer-events:none></textarea><input data-testid=editor-import-docx-input type=file style=display:none><input accept="image/png, image/jpeg, image/gif"data-testid=editor-insert-image-input type=file style=display:none></div></div></div><div class=oasis-editor-statusbar data-testid=editor-statusbar><span class=oasis-editor-statusbar-item data-testid=editor-statusbar-word-count></span><span class=oasis-editor-statusbar-item data-testid=editor-statusbar-character-count></span><span class=oasis-editor-statusbar-item></span><div class=oasis-editor-statusbar-zoom data-testid=editor-statusbar-zoom-control><button type=button class=oasis-editor-zoom-button>−</button><input class=oasis-editor-zoom-slider type=range><button type=button class=oasis-editor-zoom-button>+</button><span class="oasis-editor-statusbar-item oasis-editor-zoom-value"data-testid=editor-statusbar-zoom>%`), _tmpl$2$g = /* @__PURE__ */ template(`<div class=oasis-editor-import-overlay data-testid=editor-import-overlay role=status aria-live=polite><div class=oasis-editor-import-card><div class=oasis-editor-import-title></div><div class=oasis-editor-import-phase data-testid=editor-import-phase></div><div class=oasis-editor-import-progress-track><div class=oasis-editor-import-progress-bar data-testid=editor-import-progress-bar></div></div><div class=oasis-editor-import-progress-label>`), _tmpl$3$a = /* @__PURE__ */ template(`<span class=oasis-editor-import-done-icon>`), _tmpl$4$8 = /* @__PURE__ */ template(`<span class=oasis-editor-import-error-icon>`), _tmpl$5$7 = /* @__PURE__ */ template(`<span>`);
 function OasisEditorEditor(props) {
   const layout = () => props.layout ?? {};
   const overlays = () => props.overlays;
@@ -36539,11 +36554,23 @@ function OasisEditorEditor(props) {
   const documentForStats = createMemo(() => props.state().document);
   const characterCount = createMemo(() => getDocumentCharacterCount(documentForStats()));
   const wordCount = createMemo(() => getDocumentWordCount(documentForStats()));
-  const [zoomPercent, setZoomPercent] = createSignal(100);
-  const adjustZoom = (delta) => {
-    setZoomPercent((current) => clampZoom(current + delta));
+  const [localZoomPercent, setLocalZoomPercent] = createSignal(100);
+  const zoomPercent = () => {
+    var _a, _b;
+    return ((_b = (_a = layout()).zoomPercent) == null ? void 0 : _b.call(_a)) ?? localZoomPercent();
+  };
+  const setZoomPercent = (value) => {
+    const clamped = clampZoom(value);
+    const lift = layout().setZoomPercent;
+    if (lift) lift(clamped);
+    else setLocalZoomPercent(clamped);
+  };
+  const adjustZoom = (delta) => setZoomPercent(zoomPercent() + delta);
+  const fallbackZoomFactor = createMemo(() => clampZoom(zoomPercent()) / 100);
+  const zoomFactor = () => {
+    var _a, _b;
+    return ((_b = (_a = layout()).zoomFactor) == null ? void 0 : _b.call(_a)) ?? fallbackZoomFactor();
   };
-  const zoomFactor = createMemo(() => clampZoom(zoomPercent()) / 100);
   const [measuredContentHeight, setMeasuredContentHeight] = createSignal(0);
   const [viewportSize, setViewportSize] = createSignal({
     width: 0,
@@ -36925,6 +36952,9 @@ function OasisEditorEditor(props) {
     insert(_el$1, () => t("status.page", [currentPage(), totalPages()]));
     _el$11.$$click = () => adjustZoom(-ZOOM_STEP);
     _el$12.$$input = (event) => setZoomPercent(clampZoom(event.currentTarget.valueAsNumber));
+    setAttribute(_el$12, "min", ZOOM_MIN);
+    setAttribute(_el$12, "max", ZOOM_MAX);
+    setAttribute(_el$12, "step", ZOOM_STEP);
     _el$13.$$click = () => adjustZoom(ZOOM_STEP);
     insert(_el$14, zoomPercent, _el$15);
     insert(_el$8, createComponent(Show, {
@@ -40150,7 +40180,7 @@ export {
   probeLocalFontFamilies as ay,
   createInitialEditorState as az,
   createEditorRun as b,
-  RIBBON_TABS as b$,
+  Popover as b$,
   Show as b0,
   createRenderEffect as b1,
   style as b2,
@@ -40161,33 +40191,33 @@ export {
   insert as b7,
   use as b8,
   addEventListener as b9,
-  installGlobalReport as bA,
-  applyStoredPreciseFontPreference as bB,
-  getWelcomeSeen as bC,
-  isLocalFontAccessSupported as bD,
-  EDITOR_SCROLL_PADDING_PX as bE,
-  Toolbar as bF,
-  OasisEditorLoading as bG,
-  createEditorLogger as bH,
-  getCachedCanvasImage as bI,
-  registerDomStatsSurface as bJ,
-  Button as bK,
-  Checkbox as bL,
-  ColorPicker as bM,
-  CommandRegistry as bN,
-  DEFAULT_PALETTE as bO,
-  DialogFooter as bP,
-  FloatingActionButton as bQ,
-  GridPicker as bR,
-  IconButton as bS,
-  Menu as bT,
-  OASIS_BUILTIN_COMMANDS as bU,
-  OASIS_MENU_ITEMS as bV,
-  OASIS_TOOLBAR_ITEMS as bW,
-  OasisEditorAppLazy as bX,
-  OasisEditorContainer as bY,
-  PluginCollection as bZ,
-  Popover as b_,
+  startLongTaskObserver as bA,
+  installGlobalReport as bB,
+  applyStoredPreciseFontPreference as bC,
+  getWelcomeSeen as bD,
+  isLocalFontAccessSupported as bE,
+  EDITOR_SCROLL_PADDING_PX as bF,
+  Toolbar as bG,
+  OasisEditorLoading as bH,
+  createEditorLogger as bI,
+  getCachedCanvasImage as bJ,
+  registerDomStatsSurface as bK,
+  Button as bL,
+  Checkbox as bM,
+  ColorPicker as bN,
+  CommandRegistry as bO,
+  DEFAULT_PALETTE as bP,
+  DialogFooter as bQ,
+  FloatingActionButton as bR,
+  GridPicker as bS,
+  IconButton as bT,
+  Menu as bU,
+  OASIS_BUILTIN_COMMANDS as bV,
+  OASIS_MENU_ITEMS as bW,
+  OASIS_TOOLBAR_ITEMS as bX,
+  OasisEditorAppLazy as bY,
+  OasisEditorContainer as bZ,
+  PluginCollection as b_,
   Dialog as ba,
   delegateEvents as bb,
   className as bc,
@@ -40213,24 +40243,25 @@ export {
   enablePreciseFontMode as bw,
   createOasisEditorClient as bx,
   setLocale as by,
-  startLongTaskObserver as bz,
+  createEditorZoom as bz,
   createEditorParagraphFromRuns as c,
-  RIBBON_TAB_DEFINITIONS as c0,
-  Select as c1,
-  SelectField as c2,
-  Separator as c3,
-  SidePanel as c4,
-  SidePanelBody as c5,
-  SidePanelFooter as c6,
-  SidePanelHeader as c7,
-  SplitButton as c8,
-  TextField as c9,
-  Button$1 as ca,
-  createEditorCommandBus as cb,
-  createOasisEditor as cc,
-  createOasisEditorContainer as cd,
-  mount as ce,
-  registerToolbarRenderer as cf,
+  RIBBON_TABS as c0,
+  RIBBON_TAB_DEFINITIONS as c1,
+  Select as c2,
+  SelectField as c3,
+  Separator as c4,
+  SidePanel as c5,
+  SidePanelBody as c6,
+  SidePanelFooter as c7,
+  SidePanelHeader as c8,
+  SplitButton as c9,
+  TextField as ca,
+  Button$1 as cb,
+  createEditorCommandBus as cc,
+  createOasisEditor as cd,
+  createOasisEditorContainer as ce,
+  mount as cf,
+  registerToolbarRenderer as cg,
   getDocumentSections as d,
   createEditorStyledRun as e,
   getParagraphText as f,

package/dist/oasis-editor.js

@@ -1,56 +1,56 @@
-import { aV, bK, bL, bM, bN, bO, ba, bP, aW, aR, bQ, bR, bS, aU, bT, aP, bU, bV, bW, bX, bY, bG, bZ, b_, b$, c0, c1, c2, c3, c4, c5, c6, c7, c8, bf, c9, bF, ca, bM as bM2, bR as bR2, bT as bT2, c1 as c12, c3 as c32, c8 as c82, aT, aN, cb, cc, cd, aQ, ce, cf, aS } from "./index-WKT6eKMj.js";
+import { aV, bL, bM, bN, bO, bP, ba, bQ, aW, aR, bR, bS, bT, aU, bU, aP, bV, bW, bX, bY, bZ, bH, b_, b$, c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, bf, ca, bG, cb, bN as bN2, bS as bS2, bU as bU2, c2 as c22, c4 as c42, c9 as c92, aT, aN, cc, cd, ce, aQ, cf, cg, aS } from "./index-Df7Ob0Ek.js";
 export {
   aV as BalloonShell,
-  bK as Button,
-  bL as Checkbox,
-  bM as ColorPicker,
-  bN as CommandRegistry,
-  bO as DEFAULT_PALETTE,
+  bL as Button,
+  bM as Checkbox,
+  bN as ColorPicker,
+  bO as CommandRegistry,
+  bP as DEFAULT_PALETTE,
   ba as Dialog,
-  bP as DialogFooter,
+  bQ as DialogFooter,
   aW as DocumentShell,
   aR as Editor,
-  bQ as FloatingActionButton,
-  bR as GridPicker,
-  bS as IconButton,
+  bR as FloatingActionButton,
+  bS as GridPicker,
+  bT as IconButton,
   aU as InlineShell,
-  bT as Menu,
+  bU as Menu,
   aP as MenuRegistry,
-  bU as OASIS_BUILTIN_COMMANDS,
-  bV as OASIS_MENU_ITEMS,
-  bW as OASIS_TOOLBAR_ITEMS,
-  bX as OasisEditorAppLazy,
-  bY as OasisEditorContainer,
-  bG as OasisEditorLoading,
-  bZ as PluginCollection,
-  b_ as Popover,
-  b$ as RIBBON_TABS,
-  c0 as RIBBON_TAB_DEFINITIONS,
-  c1 as Select,
-  c2 as SelectField,
-  c3 as Separator,
-  c4 as SidePanel,
-  c5 as SidePanelBody,
-  c6 as SidePanelFooter,
-  c7 as SidePanelHeader,
-  c8 as SplitButton,
+  bV as OASIS_BUILTIN_COMMANDS,
+  bW as OASIS_MENU_ITEMS,
+  bX as OASIS_TOOLBAR_ITEMS,
+  bY as OasisEditorAppLazy,
+  bZ as OasisEditorContainer,
+  bH as OasisEditorLoading,
+  b_ as PluginCollection,
+  b$ as Popover,
+  c0 as RIBBON_TABS,
+  c1 as RIBBON_TAB_DEFINITIONS,
+  c2 as Select,
+  c3 as SelectField,
+  c4 as Separator,
+  c5 as SidePanel,
+  c6 as SidePanelBody,
+  c7 as SidePanelFooter,
+  c8 as SidePanelHeader,
+  c9 as SplitButton,
   bf as Tabs,
-  c9 as TextField,
-  bF as Toolbar,
-  ca as ToolbarButton,
-  bM2 as ToolbarColorPicker,
-  bR2 as ToolbarGridPicker,
-  bT2 as ToolbarMenu,
-  c12 as ToolbarSelect,
-  c32 as ToolbarSeparator,
-  c82 as ToolbarSplitButton,
+  ca as TextField,
+  bG as Toolbar,
+  cb as ToolbarButton,
+  bN2 as ToolbarColorPicker,
+  bS2 as ToolbarGridPicker,
+  bU2 as ToolbarMenu,
+  c22 as ToolbarSelect,
+  c42 as ToolbarSeparator,
+  c92 as ToolbarSplitButton,
   aT as commandRefName,
   aN as createDefaultToolbarPreset,
-  cb as createEditorCommandBus,
-  cc as createOasisEditor,
-  cd as createOasisEditorContainer,
+  cc as createEditorCommandBus,
+  cd as createOasisEditor,
+  ce as createOasisEditorContainer,
   aQ as createToolbarRegistry,
-  ce as mount,
-  cf as registerToolbarRenderer,
+  cf as mount,
+  cg as registerToolbarRenderer,
   aS as resolveCommandRef
 };