@atlaskit/media-document-viewer 0.1.0

package/dist/es2019/page.js

@@ -0,0 +1,146 @@
+/* page.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./page.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef, useEffect, useState } from 'react';
+import { getDocumentRoot } from './utils/getDocumentRoot';
+import { useIntersectionObserver } from './utils/useIntersectionObserver';
+import { useStaticCallback } from './utils/useStaticCallback';
+const Span = ({
+  span,
+  font
+}) => {
+  const width = span.l;
+  const height = span.h;
+  if (width <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("tspan", {
+    lengthAdjust: "spacingAndGlyphs",
+    x: span.x,
+    y: `-${span.y}`,
+    height: height,
+    textLength: width,
+    style: {
+      ['fontFamily']: `${font.name}`,
+      ['fontSize']: `${font.size === 1 ? height : font.size}px`
+    }
+  }, span.text);
+};
+const textStyles = null;
+const Line = ({
+  spans,
+  rotation,
+  fonts,
+  dataTestId
+} = {
+  spans: [],
+  rotation: 0,
+  fonts: []
+}) => /*#__PURE__*/React.createElement("text", {
+  opacity: "0.5",
+  // eslint-disable-next-line react/no-unknown-property
+  "transform-origin": `${spans[0].x} -${spans[0].y}`,
+  style: {
+    transform: `rotate(${rotation}rad)`
+  },
+  "data-testid": dataTestId,
+  className: ax(["_o572qvpr"])
+}, spans.map((span, i) => /*#__PURE__*/React.createElement(Span, {
+  span: span,
+  font: fonts[span.fi],
+  key: i
+})));
+const pageSvgStyles = null;
+const pageImageStyles = null;
+const pageWrapperStyles = null;
+const PageView = /*#__PURE__*/forwardRef(({
+  dimensions,
+  imageSrc,
+  content,
+  fonts,
+  pageIndex,
+  zoom,
+  onImageLoad
+}, ref) => {
+  const style = {
+    width: dimensions ? `calc(var(--document-viewer-zoom) * ${dimensions.width}px)` : 'initial',
+    height: dimensions ? `calc(var(--document-viewer-zoom) * ${dimensions.height}px)` : 'initial'
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: style,
+    "data-testid": `page-${pageIndex}`,
+    className: ax(["_kqswh2mm _bfhku67f"])
+  }, imageSrc && /*#__PURE__*/React.createElement("img", {
+    style: style,
+    "data-testid": `page-${pageIndex}-image`,
+    "data-zoom": zoom,
+    src: imageSrc,
+    alt: "",
+    onLoad: onImageLoad,
+    className: ax(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw _1kemd8h4"])
+  }), content && /*#__PURE__*/React.createElement("svg", {
+    "data-testid": `page-${pageIndex}-text-layer`,
+    style: style,
+    viewBox: `0 -${content.height} ${content.width} ${content.height}`,
+    className: ax(["_kqswstnw _154iidpf _1ltvidpf _uizt1kdv _80om1kdv _lswu1j28"])
+  }, content.lines.map((line, i) => /*#__PURE__*/React.createElement(Line, {
+    dataTestId: `page-${pageIndex}-line-${i}`,
+    spans: line.spans,
+    rotation: line.r,
+    fonts: fonts,
+    key: i
+  }))));
+});
+export const Page = ({
+  getPageSrc,
+  content,
+  fonts,
+  pageIndex,
+  zoom,
+  defaultDimensions,
+  onVisible
+}) => {
+  var _ref;
+  const [imageSrc, setImageSrc] = useState();
+  const {
+    observedRef,
+    isVisibleRef
+  } = useIntersectionObserver({
+    root: getDocumentRoot(),
+    // this will load the page 3 pages before or after the current page
+    // ensuring that the page is loaded before the user scrolls to it
+    rootMargin: '300%',
+    threshold: 0.1
+  }, () => {
+    onVisible();
+    getPageSrc(pageIndex, zoom).then(setImageSrc);
+  });
+  const [dimensions, setDimensions] = useState();
+  const onImageLoad = useStaticCallback(event => {
+    const image = event.currentTarget;
+    if (!content) {
+      const zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
+      setDimensions({
+        width: image.width / zoom,
+        height: image.height / zoom
+      });
+    }
+  });
+  useEffect(() => {
+    if (isVisibleRef.current) {
+      getPageSrc(pageIndex, zoom).then(setImageSrc);
+    }
+  }, [isVisibleRef, pageIndex, zoom, getPageSrc]);
+  return /*#__PURE__*/React.createElement(PageView, {
+    ref: observedRef,
+    dimensions: (_ref = content !== null && content !== void 0 ? content : dimensions) !== null && _ref !== void 0 ? _ref : defaultDimensions,
+    imageSrc: imageSrc,
+    content: content,
+    fonts: fonts,
+    pageIndex: pageIndex,
+    zoom: zoom,
+    onImageLoad: onImageLoad
+  });
+};

package/dist/es2019/usePageContent.js

@@ -0,0 +1,47 @@
+import { useMemo, useRef, useState } from "react";
+import { useStaticCallback } from "./utils/useStaticCallback";
+export function usePageContent(getContent, paginationSize) {
+  const [contentRanges, setContentRanges] = useState([]);
+  const contentRangesRequestRef = useRef({});
+  const loadPageContent = useStaticCallback(async pageInd => {
+    const contentRangeInd = Math.floor(pageInd / paginationSize);
+    // Content already loaded for this page range
+    if (contentRanges[contentRangeInd]) {
+      return;
+    }
+    const startIndex = contentRangeInd * paginationSize;
+    const endIndex = startIndex + paginationSize;
+    contentRangesRequestRef.current[contentRangeInd] ??= getContent(startIndex, endIndex);
+    const content = await contentRangesRequestRef.current[contentRangeInd];
+    setContentRanges(prev => {
+      const newRanges = [...prev];
+      newRanges[contentRangeInd] = content;
+      return newRanges;
+    });
+  });
+  function getPageContent(pageInd) {
+    var _contentRanges$conten, _contentRanges$conten2;
+    const contentRangeInd = Math.floor(pageInd / paginationSize);
+    const page = (_contentRanges$conten = contentRanges[contentRangeInd]) === null || _contentRanges$conten === void 0 ? void 0 : _contentRanges$conten.pages[pageInd % paginationSize];
+    const fonts = (_contentRanges$conten2 = contentRanges[contentRangeInd]) === null || _contentRanges$conten2 === void 0 ? void 0 : _contentRanges$conten2.fonts;
+    return {
+      page,
+      fonts
+    };
+  }
+  const documentMetadata = useMemo(() => {
+    var _contentRanges$, _contentRanges$0$tota, _contentRanges$2;
+    return {
+      defaultDimensions: (_contentRanges$ = contentRanges[0]) !== null && _contentRanges$ !== void 0 && _contentRanges$.pages[0] ? {
+        height: contentRanges[0].pages[0].height,
+        width: contentRanges[0].pages[0].width
+      } : undefined,
+      pageCount: (_contentRanges$0$tota = (_contentRanges$2 = contentRanges[0]) === null || _contentRanges$2 === void 0 ? void 0 : _contentRanges$2.total_pages) !== null && _contentRanges$0$tota !== void 0 ? _contentRanges$0$tota : 4
+    };
+  }, [contentRanges]);
+  return {
+    getPageContent,
+    loadPageContent,
+    documentMetadata
+  };
+}

package/dist/es2019/utils/getDocumentRoot.js

@@ -0,0 +1,14 @@
+export const DOCUMENT_SCROLL_ROOT_ID = 'document-scroll-root';
+export const getDocumentRoot = () => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  if (typeof window.document === 'undefined') {
+    return;
+  }
+  const root = document.getElementById(DOCUMENT_SCROLL_ROOT_ID);
+  if (root) {
+    return root;
+  }
+  return window.document;
+};

package/dist/es2019/utils/useCachedGetImage.js

@@ -0,0 +1,20 @@
+import { useRef } from "react";
+import { useStaticCallback } from "./useStaticCallback";
+export const useCachedGetImage = getPageImageUrl => {
+  const imageUrlRefs = useRef({});
+  const getImageUrl = useStaticCallback(async (pageNumber, zoom) => {
+    const key = `${pageNumber}-${zoom}`;
+    if (imageUrlRefs.current[key]) {
+      return imageUrlRefs.current[key];
+    }
+    let url = await getPageImageUrl(pageNumber, zoom);
+    const isBlobUrl = url.startsWith('blob:');
+    if (!isBlobUrl) {
+      const blob = await fetch(url).then(res => res.blob());
+      url = URL.createObjectURL(blob);
+    }
+    imageUrlRefs.current[key] = url;
+    return url;
+  });
+  return getImageUrl;
+};

package/dist/es2019/utils/useIntersectionObserver.js

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from "react";
+import { useStaticCallback } from "./useStaticCallback";
+export const useIntersectionObserver = (options, onVisible) => {
+  const staticOnVisible = useStaticCallback(onVisible);
+  const observerRef = useRef(null);
+  const timeoutRef = useRef(null);
+  const isVisibleRef = useRef(false);
+  const currentNodeRef = useRef(null);
+  const observedRef = useStaticCallback(node => {
+    currentNodeRef.current = node;
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+    }
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (node) {
+      observerRef.current = new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting && !isVisibleRef.current) {
+          isVisibleRef.current = true;
+          timeoutRef.current = setTimeout(() => {
+            if (isVisibleRef.current) {
+              staticOnVisible();
+              timeoutRef.current = null;
+            }
+          }, 100);
+        }
+        if (!entry.isIntersecting && isVisibleRef.current) {
+          isVisibleRef.current = false;
+        }
+        if (!entry.isIntersecting && isVisibleRef.current && timeoutRef.current) {
+          isVisibleRef.current = false;
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
+      }, options);
+      observerRef.current.observe(node);
+    }
+  });
+  useEffect(() => {
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    observedRef,
+    isVisibleRef
+  };
+};

package/dist/es2019/utils/useStaticCallback.js

@@ -0,0 +1,6 @@
+import { useCallback, useRef } from "react";
+export const useStaticCallback = callback => {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  return useCallback((...args) => callbackRef.current(...args), []);
+};

package/dist/esm/documentViewer.compiled.css

@@ -0,0 +1,9 @@
+
+._zulputpp{gap:var(--ds-space-150,9pt)}._18m91wug{overflow-y:auto}
+._19pkxncg{margin-top:var(--ds-space-800,4pc)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1reo1wug{overflow-x:auto}
+._1ul91osq{min-width:100%}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}

package/dist/esm/documentViewer.js

@@ -0,0 +1,47 @@
+/* documentViewer.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import "./documentViewer.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Page } from './page';
+import { usePageContent } from './usePageContent';
+import { useCachedGetImage } from './utils/useCachedGetImage';
+var documentViewerStyles = null;
+var DEFAULT_PAGINATION_SIZE = 50;
+export var DocumentViewer = function DocumentViewer(_ref) {
+  var _documentMetadata$pag;
+  var getContent = _ref.getContent,
+    getPageImageUrl = _ref.getPageImageUrl,
+    _ref$paginationSize = _ref.paginationSize,
+    paginationSize = _ref$paginationSize === void 0 ? DEFAULT_PAGINATION_SIZE : _ref$paginationSize,
+    zoom = _ref.zoom;
+  var _usePageContent = usePageContent(getContent, paginationSize),
+    getPageContent = _usePageContent.getPageContent,
+    loadPageContent = _usePageContent.loadPageContent,
+    documentMetadata = _usePageContent.documentMetadata;
+  var getImageUrl = useCachedGetImage(getPageImageUrl);
+  var style = {
+    '--document-viewer-zoom': zoom
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "document-viewer",
+    style: style,
+    className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o"])
+  }, _toConsumableArray(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, {
+      key: i,
+      getPageSrc: getImageUrl,
+      pageIndex: i,
+      zoom: zoom,
+      defaultDimensions: documentMetadata.defaultDimensions,
+      onVisible: function onVisible() {
+        return loadPageContent(i);
+      },
+      fonts: fonts,
+      content: page
+    });
+  }));
+};

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export { DocumentViewer } from './documentViewer';
+export { DOCUMENT_SCROLL_ROOT_ID } from './utils/getDocumentRoot';

package/dist/esm/page.compiled.css

@@ -0,0 +1,11 @@
+._154iidpf{top:0}
+._1kemd8h4{image-rendering:pixelated}
+._1ltvidpf{left:0}
+._80om1kdv{cursor:text}
+._bfhku67f{background-color:#fff}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lswu1j28{fill:transparent}
+._o572qvpr{white-space:pre}
+._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}

package/dist/esm/page.js

@@ -0,0 +1,153 @@
+/* page.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./page.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef, useEffect, useState } from 'react';
+import { getDocumentRoot } from './utils/getDocumentRoot';
+import { useIntersectionObserver } from './utils/useIntersectionObserver';
+import { useStaticCallback } from './utils/useStaticCallback';
+var Span = function Span(_ref) {
+  var span = _ref.span,
+    font = _ref.font;
+  var width = span.l;
+  var height = span.h;
+  if (width <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("tspan", {
+    lengthAdjust: "spacingAndGlyphs",
+    x: span.x,
+    y: "-".concat(span.y),
+    height: height,
+    textLength: width,
+    style: _defineProperty(_defineProperty({}, 'fontFamily', "".concat(font.name)), 'fontSize', "".concat(font.size === 1 ? height : font.size, "px"))
+  }, span.text);
+};
+var textStyles = null;
+var Line = function Line() {
+  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      spans: [],
+      rotation: 0,
+      fonts: []
+    },
+    spans = _ref3.spans,
+    rotation = _ref3.rotation,
+    fonts = _ref3.fonts,
+    dataTestId = _ref3.dataTestId;
+  return /*#__PURE__*/React.createElement("text", {
+    opacity: "0.5",
+    // eslint-disable-next-line react/no-unknown-property
+    "transform-origin": "".concat(spans[0].x, " -").concat(spans[0].y),
+    style: {
+      transform: "rotate(".concat(rotation, "rad)")
+    },
+    "data-testid": dataTestId,
+    className: ax(["_o572qvpr"])
+  }, spans.map(function (span, i) {
+    return /*#__PURE__*/React.createElement(Span, {
+      span: span,
+      font: fonts[span.fi],
+      key: i
+    });
+  }));
+};
+var pageSvgStyles = null;
+var pageImageStyles = null;
+var pageWrapperStyles = null;
+var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var dimensions = _ref4.dimensions,
+    imageSrc = _ref4.imageSrc,
+    content = _ref4.content,
+    fonts = _ref4.fonts,
+    pageIndex = _ref4.pageIndex,
+    zoom = _ref4.zoom,
+    onImageLoad = _ref4.onImageLoad;
+  var style = {
+    width: dimensions ? "calc(var(--document-viewer-zoom) * ".concat(dimensions.width, "px)") : 'initial',
+    height: dimensions ? "calc(var(--document-viewer-zoom) * ".concat(dimensions.height, "px)") : 'initial'
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: style,
+    "data-testid": "page-".concat(pageIndex),
+    className: ax(["_kqswh2mm _bfhku67f"])
+  }, imageSrc && /*#__PURE__*/React.createElement("img", {
+    style: style,
+    "data-testid": "page-".concat(pageIndex, "-image"),
+    "data-zoom": zoom,
+    src: imageSrc,
+    alt: "",
+    onLoad: onImageLoad,
+    className: ax(["_kqswstnw _154iidpf _1ltvidpf _uiztglyw _1kemd8h4"])
+  }), content && /*#__PURE__*/React.createElement("svg", {
+    "data-testid": "page-".concat(pageIndex, "-text-layer"),
+    style: style,
+    viewBox: "0 -".concat(content.height, " ").concat(content.width, " ").concat(content.height),
+    className: ax(["_kqswstnw _154iidpf _1ltvidpf _uizt1kdv _80om1kdv _lswu1j28"])
+  }, content.lines.map(function (line, i) {
+    return /*#__PURE__*/React.createElement(Line, {
+      dataTestId: "page-".concat(pageIndex, "-line-").concat(i),
+      spans: line.spans,
+      rotation: line.r,
+      fonts: fonts,
+      key: i
+    });
+  })));
+});
+export var Page = function Page(_ref5) {
+  var _ref6;
+  var getPageSrc = _ref5.getPageSrc,
+    content = _ref5.content,
+    fonts = _ref5.fonts,
+    pageIndex = _ref5.pageIndex,
+    zoom = _ref5.zoom,
+    defaultDimensions = _ref5.defaultDimensions,
+    onVisible = _ref5.onVisible;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    imageSrc = _useState2[0],
+    setImageSrc = _useState2[1];
+  var _useIntersectionObser = useIntersectionObserver({
+      root: getDocumentRoot(),
+      // this will load the page 3 pages before or after the current page
+      // ensuring that the page is loaded before the user scrolls to it
+      rootMargin: '300%',
+      threshold: 0.1
+    }, function () {
+      onVisible();
+      getPageSrc(pageIndex, zoom).then(setImageSrc);
+    }),
+    observedRef = _useIntersectionObser.observedRef,
+    isVisibleRef = _useIntersectionObser.isVisibleRef;
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dimensions = _useState4[0],
+    setDimensions = _useState4[1];
+  var onImageLoad = useStaticCallback(function (event) {
+    var image = event.currentTarget;
+    if (!content) {
+      var _zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
+      setDimensions({
+        width: image.width / _zoom,
+        height: image.height / _zoom
+      });
+    }
+  });
+  useEffect(function () {
+    if (isVisibleRef.current) {
+      getPageSrc(pageIndex, zoom).then(setImageSrc);
+    }
+  }, [isVisibleRef, pageIndex, zoom, getPageSrc]);
+  return /*#__PURE__*/React.createElement(PageView, {
+    ref: observedRef,
+    dimensions: (_ref6 = content !== null && content !== void 0 ? content : dimensions) !== null && _ref6 !== void 0 ? _ref6 : defaultDimensions,
+    imageSrc: imageSrc,
+    content: content,
+    fonts: fonts,
+    pageIndex: pageIndex,
+    zoom: zoom,
+    onImageLoad: onImageLoad
+  });
+};

package/dist/esm/usePageContent.js

@@ -0,0 +1,74 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useMemo, useRef, useState } from "react";
+import { useStaticCallback } from "./utils/useStaticCallback";
+export function usePageContent(getContent, paginationSize) {
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    contentRanges = _useState2[0],
+    setContentRanges = _useState2[1];
+  var contentRangesRequestRef = useRef({});
+  var loadPageContent = useStaticCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(pageInd) {
+      var _contentRangesRequest, _contentRangesRequest2;
+      var contentRangeInd, startIndex, endIndex, content;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            contentRangeInd = Math.floor(pageInd / paginationSize); // Content already loaded for this page range
+            if (!contentRanges[contentRangeInd]) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            startIndex = contentRangeInd * paginationSize;
+            endIndex = startIndex + paginationSize;
+            (_contentRangesRequest2 = (_contentRangesRequest = contentRangesRequestRef.current)[contentRangeInd]) !== null && _contentRangesRequest2 !== void 0 ? _contentRangesRequest2 : _contentRangesRequest[contentRangeInd] = getContent(startIndex, endIndex);
+            _context.next = 8;
+            return contentRangesRequestRef.current[contentRangeInd];
+          case 8:
+            content = _context.sent;
+            setContentRanges(function (prev) {
+              var newRanges = _toConsumableArray(prev);
+              newRanges[contentRangeInd] = content;
+              return newRanges;
+            });
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+  function getPageContent(pageInd) {
+    var _contentRanges$conten, _contentRanges$conten2;
+    var contentRangeInd = Math.floor(pageInd / paginationSize);
+    var page = (_contentRanges$conten = contentRanges[contentRangeInd]) === null || _contentRanges$conten === void 0 ? void 0 : _contentRanges$conten.pages[pageInd % paginationSize];
+    var fonts = (_contentRanges$conten2 = contentRanges[contentRangeInd]) === null || _contentRanges$conten2 === void 0 ? void 0 : _contentRanges$conten2.fonts;
+    return {
+      page: page,
+      fonts: fonts
+    };
+  }
+  var documentMetadata = useMemo(function () {
+    var _contentRanges$, _contentRanges$0$tota, _contentRanges$2;
+    return {
+      defaultDimensions: (_contentRanges$ = contentRanges[0]) !== null && _contentRanges$ !== void 0 && _contentRanges$.pages[0] ? {
+        height: contentRanges[0].pages[0].height,
+        width: contentRanges[0].pages[0].width
+      } : undefined,
+      pageCount: (_contentRanges$0$tota = (_contentRanges$2 = contentRanges[0]) === null || _contentRanges$2 === void 0 ? void 0 : _contentRanges$2.total_pages) !== null && _contentRanges$0$tota !== void 0 ? _contentRanges$0$tota : 4
+    };
+  }, [contentRanges]);
+  return {
+    getPageContent: getPageContent,
+    loadPageContent: loadPageContent,
+    documentMetadata: documentMetadata
+  };
+}

package/dist/esm/utils/getDocumentRoot.js

@@ -0,0 +1,14 @@
+export var DOCUMENT_SCROLL_ROOT_ID = 'document-scroll-root';
+export var getDocumentRoot = function getDocumentRoot() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  if (typeof window.document === 'undefined') {
+    return;
+  }
+  var root = document.getElementById(DOCUMENT_SCROLL_ROOT_ID);
+  if (root) {
+    return root;
+  }
+  return window.document;
+};

package/dist/esm/utils/useCachedGetImage.js

@@ -0,0 +1,50 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useRef } from "react";
+import { useStaticCallback } from "./useStaticCallback";
+export var useCachedGetImage = function useCachedGetImage(getPageImageUrl) {
+  var imageUrlRefs = useRef({});
+  var getImageUrl = useStaticCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(pageNumber, zoom) {
+      var key, url, isBlobUrl, blob;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            key = "".concat(pageNumber, "-").concat(zoom);
+            if (!imageUrlRefs.current[key]) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return", imageUrlRefs.current[key]);
+          case 3:
+            _context.next = 5;
+            return getPageImageUrl(pageNumber, zoom);
+          case 5:
+            url = _context.sent;
+            isBlobUrl = url.startsWith('blob:');
+            if (isBlobUrl) {
+              _context.next = 12;
+              break;
+            }
+            _context.next = 10;
+            return fetch(url).then(function (res) {
+              return res.blob();
+            });
+          case 10:
+            blob = _context.sent;
+            url = URL.createObjectURL(blob);
+          case 12:
+            imageUrlRefs.current[key] = url;
+            return _context.abrupt("return", url);
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+  return getImageUrl;
+};