@atlaskit/media-document-viewer 0.6.10 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/media-document-viewer
 
+## 0.7.0
+
+### Minor Changes
+
+- [`34c40eb233aa4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/34c40eb233aa4) -
+  isUxChange: true
+
+  Lazy-append document pages for MS Excel previews behind platform_media_excel_lazy_load gate to fix
+  initial-render freeze on very large documents
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.6.11
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.6.10
 
 ### Patch Changes

package/dist/cjs/documentLinks.js

@@ -20,7 +20,8 @@ var anchorStyles = {
 };
 var DocumentLink = function DocumentLink(_ref) {
   var link = _ref.link,
-    dataTestId = _ref.dataTestId;
+    dataTestId = _ref.dataTestId,
+    appendUpTo = _ref.appendUpTo;
   return /*#__PURE__*/_react.default.createElement("foreignObject", {
     x: link.x,
     y: -link.y,
@@ -34,15 +35,20 @@ var DocumentLink = function DocumentLink(_ref) {
     style: anchorStyles
   })) : /*#__PURE__*/_react.default.createElement(_anchor.default, (0, _extends2.default)({}, foreignObjectProps, {
     href: "#page-".concat(link.p_num + 1),
-    style: anchorStyles
+    style: anchorStyles,
+    onClick: appendUpTo ? function () {
+      return appendUpTo(link.p_num + 1);
+    } : undefined
   })));
 };
 var DocumentLinks = exports.DocumentLinks = function DocumentLinks(_ref2) {
-  var links = _ref2.links;
+  var links = _ref2.links,
+    appendUpTo = _ref2.appendUpTo;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, links.map(function (link, i) {
     return /*#__PURE__*/_react.default.createElement(DocumentLink, {
       link: link,
       dataTestId: "document-link-".concat(i),
+      appendUpTo: appendUpTo,
       key: i
     });
   }));

package/dist/cjs/documentViewer.js

@@ -11,7 +11,9 @@ require("./documentViewer.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _browserApis = require("@atlaskit/browser-apis");
 var _mediaCommon = require("@atlaskit/media-common");
 var _page = require("./page");
 var _usePageContent2 = require("./usePageContent");
@@ -20,22 +22,178 @@ var _useCachedGetImage = require("./utils/useCachedGetImage");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var documentViewerStyles = null;
 var DEFAULT_PAGINATION_SIZE = 50;
-var DEFAULT_MAX_PAGE_IMAGE_ZOOM = 6;
-var DocumentViewer = exports.DocumentViewer = function DocumentViewer(_ref) {
+var INITIAL_PAGE_COUNT = 50;
+var APPEND_STEP = 50;
+
+/**
+ * TAIL-APPEND PATTERN FOR LAZY LOADING:
+ *
+ * The <Page> component has an `onVisible: () => void` prop that is called when the page
+ * enters the viewport (via useIntersectionObserver with a 300% rootMargin). This callback
+ * is currently used to load page content via `loadPageContent(i)`.
+ *
+ * For the LazyAppendPages feature (T2.3), the parent component can leverage this same
+ * mechanism by:
+ * 1. Rendering only a subset of pages (lazyPageCount instead of all documentMetadata.pageCount)
+ * 2. Passing onVisible={handleAppend} ONLY to the last rendered page (i === lazyPageCount - 1)
+ * 3. For all other pages, passing onVisible={() => loadPageContent(i)} as usual
+ *
+ * When the last page enters the viewport, handleAppend will be triggered, which can:
+ * - Fetch the next batch of pages
+ * - Append them to the rendered page list
+ * - This effectively creates a tail-append/infinite-scroll behavior without any changes to <Page>
+ *
+ * No changes to the <Page> signature are required. The onVisible callback is already
+ * properly wired and can be overridden by parent components for different behaviors.
+ */
+
+var LegacyPages = function LegacyPages(_ref) {
   var _documentMetadata$pag;
-  var onSuccess = _ref.onSuccess,
-    getContent = _ref.getContent,
-    getPageImageUrl = _ref.getPageImageUrl,
-    _ref$paginationSize = _ref.paginationSize,
-    paginationSize = _ref$paginationSize === void 0 ? DEFAULT_PAGINATION_SIZE : _ref$paginationSize,
-    _ref$maxPageImageZoom = _ref.maxPageImageZoom,
-    maxPageImageZoom = _ref$maxPageImageZoom === void 0 ? DEFAULT_MAX_PAGE_IMAGE_ZOOM : _ref$maxPageImageZoom,
-    zoom = _ref.zoom;
+  var documentMetadata = _ref.documentMetadata,
+    getPageContent = _ref.getPageContent,
+    loadPageContent = _ref.loadPageContent,
+    getImageUrl = _ref.getImageUrl,
+    zoom = _ref.zoom,
+    onSuccess = _ref.onSuccess,
+    style = _ref.style,
+    onTouchStart = _ref.onTouchStart,
+    onTouchMove = _ref.onTouchMove,
+    onTouchEnd = _ref.onTouchEnd;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "document-viewer",
+    style: style,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    className: (0, _runtime.ax)(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _1bsb1ris"])
+  }, (0, _toConsumableArray2.default)(Array((_documentMetadata$pag = documentMetadata.pageCount) !== null && _documentMetadata$pag !== void 0 ? _documentMetadata$pag : 4)).map(function (_, i) {
+    var _getPageContent = getPageContent(i),
+      page = _getPageContent.page,
+      fonts = _getPageContent.fonts;
+    return /*#__PURE__*/React.createElement(_page.Page, {
+      key: i,
+      getPageSrc: getImageUrl,
+      pageIndex: i,
+      zoom: zoom,
+      defaultDimensions: documentMetadata.defaultDimensions,
+      onVisible: loadPageContent,
+      onLoad: i === 0 ? onSuccess : undefined,
+      fonts: fonts,
+      content: page
+    });
+  }));
+};
+var LazyAppendPages = function LazyAppendPages(_ref2) {
+  var _documentMetadata$pag2;
+  var documentMetadata = _ref2.documentMetadata,
+    getPageContent = _ref2.getPageContent,
+    loadPageContent = _ref2.loadPageContent,
+    getImageUrl = _ref2.getImageUrl,
+    zoom = _ref2.zoom,
+    onSuccess = _ref2.onSuccess,
+    style = _ref2.style,
+    onTouchStart = _ref2.onTouchStart,
+    onTouchMove = _ref2.onTouchMove,
+    onTouchEnd = _ref2.onTouchEnd;
+  var totalPages = (_documentMetadata$pag2 = documentMetadata.pageCount) !== null && _documentMetadata$pag2 !== void 0 ? _documentMetadata$pag2 : 4;
+  var _useState = (0, _react.useState)(function () {
+      return Math.min(INITIAL_PAGE_COUNT, totalPages);
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    lazyPageCount = _useState2[0],
+    setLazyPageCount = _useState2[1];
+
+  // lastAppendTriggerIndex deduplicates: only append when a strictly-larger
+  // tail page fires onVisible. This prevents double-append on scroll-up-then-down.
+  var lastAppendTriggerIndex = (0, _react.useRef)(-1);
+
+  // Handle #page-N URL hash on first load: fast-forward lazyPageCount to include the target page.
+  // Capture totalPages in a ref so the one-shot effect can read it without being re-run when
+  // totalPages changes (the effect must only fire once, on mount).
+  var totalPagesRef = (0, _react.useRef)(totalPages);
+  (0, _react.useEffect)(function () {
+    var total = totalPagesRef.current;
+    var hash = window.location.hash;
+    var match = hash.match(/^#page-(\d+)$/);
+    if (match) {
+      var targetPage = parseInt(match[1], 10);
+      if (targetPage >= 1 && targetPage <= total) {
+        // Update dedup ref BEFORE setLazyPageCount so handleAppend does not
+        // cascade when the new tail page enters the viewport via IntersectionObserver.
+        lastAppendTriggerIndex.current = targetPage - 1;
+        // Fast-forward lazyPageCount to include the target page
+        setLazyPageCount(function (prev) {
+          return Math.max(prev, targetPage);
+        });
+        // After the pages are mounted (next animation frame), scroll to the target
+        requestAnimationFrame(function () {
+          var _getDocument;
+          var el = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.getElementById("page-".concat(targetPage));
+          if (el) {
+            el.scrollIntoView();
+          }
+        });
+      }
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps -- intentionally one-shot; totalPages read via ref
+
+  var handleAppendAndLoadPageContent = (0, _react.useCallback)(function (pageIndex) {
+    if (pageIndex > lastAppendTriggerIndex.current) {
+      lastAppendTriggerIndex.current = pageIndex;
+      setLazyPageCount(function (c) {
+        return Math.min(c + APPEND_STEP, totalPages);
+      });
+    }
+    loadPageContent(pageIndex);
+  }, [totalPages, loadPageContent]);
+  var appendUpTo = (0, _react.useCallback)(function (targetPage) {
+    var clamped = Math.min(Math.max(targetPage, 0), totalPages);
+    if (clamped > lastAppendTriggerIndex.current) {
+      lastAppendTriggerIndex.current = clamped - 1;
+      setLazyPageCount(function (prev) {
+        return Math.max(prev, clamped);
+      });
+    }
+  }, [totalPages]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "document-viewer",
+    style: style,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    className: (0, _runtime.ax)(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _1bsb1ris"])
+  }, (0, _toConsumableArray2.default)(Array(lazyPageCount)).map(function (_, i) {
+    var _getPageContent2 = getPageContent(i),
+      page = _getPageContent2.page,
+      fonts = _getPageContent2.fonts;
+    return /*#__PURE__*/React.createElement(_page.Page, {
+      key: i,
+      getPageSrc: getImageUrl,
+      pageIndex: i,
+      zoom: zoom,
+      defaultDimensions: documentMetadata.defaultDimensions,
+      onVisible: i === lazyPageCount - 1 ? handleAppendAndLoadPageContent : loadPageContent,
+      onLoad: i === 0 ? onSuccess : undefined,
+      fonts: fonts,
+      content: page,
+      appendUpTo: appendUpTo
+    });
+  }));
+};
+var DocumentViewer = exports.DocumentViewer = function DocumentViewer(_ref3) {
+  var onSuccess = _ref3.onSuccess,
+    getContent = _ref3.getContent,
+    getPageImageUrl = _ref3.getPageImageUrl,
+    _ref3$paginationSize = _ref3.paginationSize,
+    paginationSize = _ref3$paginationSize === void 0 ? DEFAULT_PAGINATION_SIZE : _ref3$paginationSize,
+    zoom = _ref3.zoom,
+    _ref3$enableLazyPageR = _ref3.enableLazyPageRendering,
+    enableLazyPageRendering = _ref3$enableLazyPageR === void 0 ? false : _ref3$enableLazyPageR;
   var _usePageContent = (0, _usePageContent2.usePageContent)(getContent, paginationSize),
     getPageContent = _usePageContent.getPageContent,
     loadPageContent = _usePageContent.loadPageContent,
     documentMetadata = _usePageContent.documentMetadata;
-  var getImageUrl = (0, _useCachedGetImage.useCachedGetImage)(getPageImageUrl, maxPageImageZoom);
+  var getImageUrl = (0, _useCachedGetImage.useCachedGetImage)(getPageImageUrl);
   var style = {
     '--document-viewer-zoom': zoom
   };
@@ -105,30 +263,17 @@ var DocumentViewer = exports.DocumentViewer = function DocumentViewer(_ref) {
   var onTouchEnd = (0, _react.useCallback)(function () {
     touchStartRef.current = null;
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "document-viewer",
+  var sharedProps = {
+    documentMetadata: documentMetadata,
+    getPageContent: getPageContent,
+    loadPageContent: loadPageContent,
+    getImageUrl: getImageUrl,
+    zoom: zoom,
+    onSuccess: onSuccess,
     style: style,
     onTouchStart: onTouchStart,
     onTouchMove: onTouchMove,
-    onTouchEnd: onTouchEnd,
-    className: (0, _runtime.ax)(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _1bsb1ris"])
-  }, (0, _toConsumableArray2.default)(Array((_documentMetadata$pag = documentMetadata.pageCount) !== null && _documentMetadata$pag !== void 0 ? _documentMetadata$pag : 4)).map(function (_, i) {
-    var _getPageContent = getPageContent(i),
-      page = _getPageContent.page,
-      fonts = _getPageContent.fonts;
-    return /*#__PURE__*/React.createElement(_page.Page, {
-      key: i,
-      getPageSrc: getImageUrl,
-      maxPageImageZoom: maxPageImageZoom,
-      pageIndex: i,
-      zoom: zoom,
-      defaultDimensions: documentMetadata.defaultDimensions,
-      onVisible: function onVisible() {
-        return loadPageContent(i);
-      },
-      onLoad: i === 0 ? onSuccess : undefined,
-      fonts: fonts,
-      content: page
-    });
-  }));
+    onTouchEnd: onTouchEnd
+  };
+  return enableLazyPageRendering ? /*#__PURE__*/React.createElement(LazyAppendPages, sharedProps) : /*#__PURE__*/React.createElement(LegacyPages, sharedProps);
 };

package/dist/cjs/page.js

@@ -14,12 +14,10 @@ var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _mediaCommon = require("@atlaskit/media-common");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _annotations = require("./annotations");
 var _documentLinks = require("./documentLinks");
 var _getDocumentRoot = require("./utils/getDocumentRoot");
-var _useCachedGetImage = require("./utils/useCachedGetImage");
 var _useIntersectionObserver = require("./utils/useIntersectionObserver");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var Span = function Span(_ref) {
@@ -83,7 +81,8 @@ var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
     fonts = _ref4.fonts,
     pageIndex = _ref4.pageIndex,
     zoom = _ref4.zoom,
-    onImageLoad = _ref4.onImageLoad;
+    onImageLoad = _ref4.onImageLoad,
+    appendUpTo = _ref4.appendUpTo;
   var style = {};
   if (dimensions) {
     // contents endpoint has loaded so dimensions are available
@@ -115,7 +114,7 @@ var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
     src: imageSrc,
     alt: "",
     onLoad: onImageLoad,
-    className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw", !(0, _platformFeatureFlags.fg)('media-document-viewer-clear-render') && "_1kemd8h4"])
+    className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw", "_1kemd8h4"])
   }), content && /*#__PURE__*/React.createElement("svg", {
     "data-testid": "page-".concat(pageIndex, "-text-layer"),
     style: style,
@@ -132,20 +131,21 @@ var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
   }), content.annotations && /*#__PURE__*/React.createElement(_annotations.Annotations, {
     annotations: content.annotations
   }), content.links && /*#__PURE__*/React.createElement(_documentLinks.DocumentLinks, {
-    links: content.links
+    links: content.links,
+    appendUpTo: appendUpTo
   })));
 });
 var Page = exports.Page = function Page(_ref5) {
   var _ref6;
   var getPageSrc = _ref5.getPageSrc,
-    maxPageImageZoom = _ref5.maxPageImageZoom,
     content = _ref5.content,
     fonts = _ref5.fonts,
     pageIndex = _ref5.pageIndex,
     zoom = _ref5.zoom,
     defaultDimensions = _ref5.defaultDimensions,
     onVisible = _ref5.onVisible,
-    onLoad = _ref5.onLoad;
+    onLoad = _ref5.onLoad,
+    appendUpTo = _ref5.appendUpTo;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     imageSrc = _useState2[0],
@@ -157,7 +157,7 @@ var Page = exports.Page = function Page(_ref5) {
       rootMargin: '300%',
       threshold: 0.1
     }, function () {
-      onVisible();
+      onVisible(pageIndex);
       getPageSrc(pageIndex, zoom).then(setImageSrc);
     }),
     observedRef = _useIntersectionObser.observedRef,
@@ -171,7 +171,7 @@ var Page = exports.Page = function Page(_ref5) {
     onLoad === null || onLoad === void 0 || onLoad();
     if (!content) {
       var _zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
-      var imageZoom = (0, _useCachedGetImage.getImageZoom)(_zoom, maxPageImageZoom);
+      var imageZoom = _zoom;
       var contentWidth = image.naturalWidth / imageZoom;
       var contentHeight = image.naturalHeight / imageZoom;
       setDimensions({
@@ -193,6 +193,7 @@ var Page = exports.Page = function Page(_ref5) {
     fonts: fonts,
     pageIndex: pageIndex,
     zoom: zoom,
-    onImageLoad: onImageLoad
+    onImageLoad: onImageLoad,
+    appendUpTo: appendUpTo
   });
 };

package/dist/cjs/utils/useCachedGetImage.js

@@ -4,14 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getImageZoom = getImageZoom;
 exports.useCachedGetImage = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
 var _mediaCommon = require("@atlaskit/media-common");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var useCachedGetImage = exports.useCachedGetImage = function useCachedGetImage(getPageImageUrl, maxPageImageZoom) {
+var useCachedGetImage = exports.useCachedGetImage = function useCachedGetImage(getPageImageUrl) {
   var imageUrlRefs = (0, _react.useRef)({});
   (0, _react.useEffect)(function () {
     return function () {
@@ -24,38 +22,37 @@ var useCachedGetImage = exports.useCachedGetImage = function useCachedGetImage(g
   }, []);
   var getImageUrl = (0, _mediaCommon.useStaticCallback)( /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(pageNumber, zoom) {
-      var imageZoom, key, url, isBlobUrl, blob;
+      var key, url, isBlobUrl, blob;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            imageZoom = getImageZoom(zoom, maxPageImageZoom);
-            key = "".concat(pageNumber, "-").concat(imageZoom);
+            key = "".concat(pageNumber, "-").concat(zoom);
             if (!imageUrlRefs.current[key]) {
-              _context.next = 4;
+              _context.next = 3;
               break;
             }
             return _context.abrupt("return", imageUrlRefs.current[key]);
-          case 4:
-            _context.next = 6;
-            return getPageImageUrl(pageNumber, imageZoom);
-          case 6:
+          case 3:
+            _context.next = 5;
+            return getPageImageUrl(pageNumber, zoom);
+          case 5:
             url = _context.sent;
             isBlobUrl = url.startsWith('blob:');
             if (isBlobUrl) {
-              _context.next = 13;
+              _context.next = 12;
               break;
             }
-            _context.next = 11;
+            _context.next = 10;
             return fetch(url).then(function (res) {
               return res.blob();
             });
-          case 11:
+          case 10:
             blob = _context.sent;
             url = URL.createObjectURL(blob);
-          case 13:
+          case 12:
             imageUrlRefs.current[key] = url;
             return _context.abrupt("return", url);
-          case 15:
+          case 14:
           case "end":
             return _context.stop();
         }
@@ -66,21 +63,4 @@ var useCachedGetImage = exports.useCachedGetImage = function useCachedGetImage(g
     };
   }());
   return getImageUrl;
-};
-
-/**
- * The actual zoom that will be requested from the image service.
- *
- * This is different from the 'zoom' prop because it is adjusted for the device pixel ratio.
- * We're achieving the same result as a srcset, crisp images for high DPI screens.
- *
- * We also reduce impact of excessively slow rendering by setting a max zoom level.
- * If the user is zoomed past this level, the image will just be scaled-up client side.
- */
-function getImageZoom(zoom, maxPageImageZoom) {
-  if (!(0, _platformFeatureFlags.fg)('media-document-viewer-clear-render')) {
-    return zoom;
-  }
-  var dpiAdjustedZoom = zoom * (window.devicePixelRatio || 1);
-  return Math.min(dpiAdjustedZoom, maxPageImageZoom);
-}
+};

package/dist/es2019/documentLinks.js

@@ -12,7 +12,8 @@ const anchorStyles = {
 };
 const DocumentLink = ({
   link,
-  dataTestId
+  dataTestId,
+  appendUpTo
 }) => {
   return /*#__PURE__*/React.createElement("foreignObject", {
     x: link.x,
@@ -27,15 +28,18 @@ const DocumentLink = ({
     style: anchorStyles
   })) : /*#__PURE__*/React.createElement(Anchor, _extends({}, foreignObjectProps, {
     href: `#page-${link.p_num + 1}`,
-    style: anchorStyles
+    style: anchorStyles,
+    onClick: appendUpTo ? () => appendUpTo(link.p_num + 1) : undefined
   })));
 };
 export const DocumentLinks = ({
-  links
+  links,
+  appendUpTo
 }) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, links.map((link, i) => /*#__PURE__*/React.createElement(DocumentLink, {
     link: link,
     dataTestId: `document-link-${i}`,
+    appendUpTo: appendUpTo,
     key: i
   })));
 };