@prose-reader/core 1.130.0 → 1.132.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { takeUntil, Subject, combineLatest, switchMap, fromEvent, take, map as map$1, from, of, merge, EMPTY, withLatestFrom, NEVER, Observable, scheduled, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1, throttleTime, finalize, startWith as startWith$1, debounceTime as debounceTime$1, BehaviorSubject, combineLatestWith, shareReplay as shareReplay$1, ReplaySubject, filter as filter$1, share, mergeMap, delay as delay$1, identity, timer, skip as skip$1, exhaustMap, first as first$1, lastValueFrom, endWith, defer, reduce, concatMap, forkJoin, catchError as catchError$1 } from "rxjs";
-import { startWith, map, shareReplay, tap, pairwise, switchMap as switchMap$1, take as take$1, distinctUntilChanged, takeUntil as takeUntil$1, first, filter, delay, debounceTime, skip, withLatestFrom as withLatestFrom$1, share as share$1, mergeMap as mergeMap$1, catchError } from "rxjs/operators";
-import { shallowMergeIfDefined, isShallowEqual, detectMimeTypeFromName, parseContentType } from "@prose-reader/shared";
+import { takeUntil, Subject, combineLatest, switchMap, fromEvent, take, map as map$1, from, of, merge, EMPTY, withLatestFrom, NEVER, Observable, scheduled, animationFrameScheduler, defer, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1, throttleTime, finalize, startWith as startWith$1, debounceTime as debounceTime$1, BehaviorSubject, combineLatestWith, shareReplay as shareReplay$1, switchScan, forkJoin, scan, ReplaySubject, filter as filter$1, share, mergeMap, delay, identity, timer, skip as skip$1, exhaustMap, first as first$1, lastValueFrom, endWith, catchError, reduce, concatMap } from "rxjs";
+import { startWith, map, shareReplay, tap, pairwise, switchMap as switchMap$1, take as take$1, distinctUntilChanged, takeUntil as takeUntil$1, first, filter, debounceTime, skip, withLatestFrom as withLatestFrom$1, share as share$1, mergeMap as mergeMap$1, catchError as catchError$1 } from "rxjs/operators";
+import { shallowMergeIfDefined, isShallowEqual, detectMimeTypeFromName, parseContentType, getParentPath } from "@prose-reader/shared";
 import { isShallowEqual as isShallowEqual2 } from "@prose-reader/shared";
 const chromeEnhancer = (next) => (options) => {
   const reader = next(options);
@@ -406,6 +406,25 @@ const deferNextResult = (stream) => {
     return stream;
   };
 };
+function idle() {
+  return new Observable((observer) => {
+    if (window.requestIdleCallback) {
+      const handle = window.requestIdleCallback(() => {
+        observer.next();
+        observer.complete();
+      });
+      return () => cancelIdleCallback(handle);
+    }
+    const timeout = setTimeout(() => {
+      observer.next();
+      observer.complete();
+    }, 1);
+    return () => clearTimeout(timeout);
+  });
+}
+function deferIdle(callback) {
+  return defer(() => idle().pipe(switchMap$1(callback)));
+}
 const fixReflowable = (reader) => {
   reader.hookManager.register(
     `item.onAfterLayout`,
@@ -449,6 +468,8 @@ let SettingsManager$1 = class SettingsManager2 extends SettingsManagerOverload {
       pageHorizontalMargin,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       pageVerticalMargin,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      layoutLayerTransition,
       ...rest
     } = settings;
     return rest;
@@ -457,18 +478,25 @@ let SettingsManager$1 = class SettingsManager2 extends SettingsManagerOverload {
     return {
       layoutAutoResize: "container",
       pageHorizontalMargin: 24,
-      pageVerticalMargin: 24
+      pageVerticalMargin: 24,
+      layoutLayerTransition: true
     };
   }
 };
 const layoutEnhancer = (next) => (options) => {
-  const { pageHorizontalMargin, pageVerticalMargin, layoutAutoResize } = options;
+  const {
+    pageHorizontalMargin,
+    pageVerticalMargin,
+    layoutAutoResize,
+    layoutLayerTransition
+  } = options;
   const reader = next(options);
   const settingsManager = new SettingsManager$1(
     {
       pageHorizontalMargin,
       pageVerticalMargin,
-      layoutAutoResize
+      layoutAutoResize,
+      layoutLayerTransition
     },
     reader.settings
   );
@@ -532,7 +560,9 @@ const layoutEnhancer = (next) => (options) => {
   reader.hookManager.register(`item.onDocumentCreated`, ({ layers }) => {
     layers.forEach(({ element }) => {
       element.style.opacity = `0`;
-      element.style.transition = `opacity 300ms`;
+      if (settingsManager.values.layoutLayerTransition) {
+        element.style.transition = `opacity 300ms`;
+      }
     });
   });
   reader.hookManager.register(`item.onBeforeLayout`, ({ item }) => {
@@ -545,11 +575,6 @@ const layoutEnhancer = (next) => (options) => {
   });
   const revealItemOnReady$ = reader.spineItemsObserver.itemIsReady$.pipe(
     filter(({ isReady }) => isReady),
-    /**
-     * Make sure that even if the document was loaded instantly, the layout is applied first
-     * and therefore the transition played. eg: pdf are loaded before attached to the dom.
-     */
-    delay(1, animationFrameScheduler),
     tap(({ item }) => {
       item.renderer.layers.forEach(({ element }) => {
         element.style.opacity = `1`;
@@ -585,7 +610,22 @@ const layoutEnhancer = (next) => (options) => {
     }),
     takeUntil$1(reader.$.destroy$)
   ).subscribe();
-  merge(revealItemOnReady$, movingSafePan$, layoutOnContainerResize$).pipe(takeUntil$1(reader.$.destroy$)).subscribe();
+  const updateSpineItemClassName$ = reader.spineItemsObserver.itemIsReady$.pipe(
+    tap(({ item, isReady }) => {
+      const className = `prose-spineItem-ready`;
+      if (isReady) {
+        item.containerElement.classList.add(className);
+      } else {
+        item.containerElement.classList.remove(className);
+      }
+    })
+  );
+  merge(
+    updateSpineItemClassName$,
+    revealItemOnReady$,
+    movingSafePan$,
+    layoutOnContainerResize$
+  ).pipe(takeUntil$1(reader.$.destroy$)).subscribe();
   return {
     ...reader,
     destroy: () => {
@@ -1474,17 +1514,116 @@ const trackPaginationInfo = (reader) => {
   return { paginationInfo$, getPaginationInfo: () => currentValue.value };
 };
 const NAMESPACE$6 = `paginationEnhancer`;
+const consolidate = (item, reader) => {
+  var _a;
+  let itemPageIndex = (_a = item.meta) == null ? void 0 : _a.itemPageIndex;
+  const { itemIndex } = reader.cfi.parseCfi(item.cfi);
+  const spineItem = reader.spineItemsManager.get(itemIndex);
+  if (!spineItem) return of({ ...item, meta: { ...item.meta, itemIndex } });
+  if (spineItem.item.renditionLayout === `pre-paginated`) {
+    itemPageIndex = 0;
+  }
+  return idle().pipe(
+    withLatestFrom(spineItem.isReady$),
+    map$1(([, isSpineItemReady]) => {
+      var _a2, _b, _c;
+      let range = void 0;
+      const { node: startNode, offset: startOffset } = reader.cfi.resolveCfi({ cfi: item.cfi }) ?? {};
+      if (spineItem.item.renditionLayout !== `pre-paginated` && startNode) {
+        itemPageIndex = reader.spine.locator.spineItemLocator.getSpineItemPageIndexFromNode(
+          startNode,
+          startOffset ?? 0,
+          spineItem
+        ) ?? itemPageIndex;
+      }
+      if (startNode && item.endCfi) {
+        const { node: endNode, offset: endOffset } = reader.cfi.resolveCfi({ cfi: item.cfi }) ?? {};
+        if (endNode && isSpineItemReady) {
+          range = (_a2 = startNode == null ? void 0 : startNode.ownerDocument) == null ? void 0 : _a2.createRange();
+          range == null ? void 0 : range.setStart(startNode, startOffset ?? 0);
+          range == null ? void 0 : range.setEnd(endNode, endOffset ?? 0);
+        }
+      }
+      let absolutePageIndex = (_b = item.meta) == null ? void 0 : _b.absolutePageIndex;
+      if (itemPageIndex !== void 0) {
+        absolutePageIndex = reader.spine.locator.getAbsolutePageIndexFromPageIndex({
+          pageIndex: itemPageIndex,
+          spineItemOrId: spineItem
+        }) ?? ((_c = item.meta) == null ? void 0 : _c.absolutePageIndex);
+      }
+      return {
+        ...item,
+        meta: {
+          ...item.meta,
+          range,
+          itemIndex,
+          startNode,
+          startOffset,
+          absolutePageIndex,
+          itemPageIndex
+        }
+      };
+    })
+  );
+};
+const createLocator = (reader) => (resources) => {
+  return deferIdle(() => {
+    if (!resources.length)
+      return of({ isStale: false, data: resources });
+    const StaleSymbol = Symbol("stale");
+    const markStale$ = reader.layout$.pipe(
+      startWith$1(null),
+      map$1(() => StaleSymbol)
+    );
+    const consolidate$ = reader.layout$.pipe(
+      debounceTime$1(10),
+      startWith$1(null),
+      switchScan((acc$) => {
+        return forkJoin(
+          acc$.map(
+            (resource) => deferIdle(() => consolidate(resource, reader)).pipe(
+              map$1((value) => value)
+            )
+          )
+        );
+      }, resources)
+    );
+    const run$ = merge(markStale$, consolidate$).pipe(
+      scan(
+        (acc, value) => {
+          if (value === StaleSymbol) {
+            return {
+              ...acc,
+              isStale: true
+            };
+          }
+          return {
+            isStale: false,
+            data: value
+          };
+        },
+        {
+          isStale: true,
+          data: resources
+        }
+      )
+    );
+    return run$;
+  });
+};
 Report.namespace(NAMESPACE$6);
 const paginationEnhancer = (next) => (options) => {
   const reader = next(options);
   const { paginationInfo$, getPaginationInfo } = trackPaginationInfo(reader);
   paginationInfo$.pipe(takeUntil(reader.$.destroy$)).subscribe();
+  const locate = createLocator(reader);
   return {
     ...reader,
     pagination: {
       ...reader.pagination,
       getState: () => getPaginationInfo(),
-      state$: paginationInfo$
+      state$: paginationInfo$,
+      locate
     }
   };
 };
@@ -3753,7 +3892,7 @@ class ViewportNavigator extends DestroyableClass {
                  * anything for x ms while we effectively adjust. We want it to be immediate.
                  * However when user is repeatedly turning page, we can improve smoothness by delaying a bit the adjustment
                  */
-                currentEvent.shouldAnimate ? delay$1(1, animationFrameScheduler) : identity,
+                currentEvent.shouldAnimate ? delay(1, animationFrameScheduler) : identity,
                 tap$1((data) => {
                   const element2 = this.viewportElement$.getValue();
                   const noAdjustmentNeeded = false;
@@ -3789,7 +3928,7 @@ class ViewportNavigator extends DestroyableClass {
                     this.setViewportPosition(data.position);
                   }
                 }),
-                currentEvent.shouldAnimate ? delay$1(animationDuration / 2, animationFrameScheduler) : identity,
+                currentEvent.shouldAnimate ? delay(animationDuration / 2, animationFrameScheduler) : identity,
                 tap$1((data) => {
                   const element2 = this.viewportElement$.getValue();
                   if (pageTurnAnimation === `fade`) {
@@ -3797,7 +3936,7 @@ class ViewportNavigator extends DestroyableClass {
                     element2.style.setProperty(`opacity`, `1`);
                   }
                 }),
-                currentEvent.shouldAnimate ? delay$1(animationDuration / 2, animationFrameScheduler) : identity,
+                currentEvent.shouldAnimate ? delay(animationDuration / 2, animationFrameScheduler) : identity,
                 tap$1((data) => {
                   if (pageTurnAnimation === `fade`) {
                     this.setViewportPosition(data.position);
@@ -4382,19 +4521,6 @@ const withUrlInfo = ({ navigationResolver }) => (stream) => {
     })
   );
 };
-const withPaginationInfo = () => (stream) => {
-  return stream.pipe(
-    map$1(({ navigation, pagination, ...rest }) => {
-      return {
-        navigation: {
-          ...navigation,
-          paginationBeginCfi: pagination.beginCfi
-        },
-        ...rest
-      };
-    })
-  );
-};
 const withCfiPosition = ({ navigationResolver }) => (stream) => {
   return stream.pipe(
     map$1((params) => {
@@ -4490,6 +4616,52 @@ const withSpineItem = ({
     })
   );
 };
+const withPaginationInfo = () => (stream) => {
+  return stream.pipe(
+    map$1(({ navigation, pagination, ...rest }) => {
+      return {
+        navigation: {
+          ...navigation,
+          paginationBeginCfi: pagination.beginCfi
+        },
+        ...rest
+      };
+    })
+  );
+};
+const consolidateWithPagination = (context, navigation$, spine) => context.bridgeEvent.pagination$.pipe(
+  withLatestFrom(navigation$),
+  filter$1(
+    ([pagination, navigation]) => pagination.navigationId === navigation.id
+  ),
+  /**
+   * We only register the pagination cfi IF the spine item is ready.
+   * Otherwise we might save something incomplete and thus restore
+   * the user to an invalid location.
+   */
+  switchMap(([pagination, navigation]) => {
+    const spineItem = spine.spineItemsManager.get(navigation.spineItem);
+    return ((spineItem == null ? void 0 : spineItem.isReady$.pipe(first$1())) ?? of(false)).pipe(
+      filter$1((isReady) => isReady),
+      map$1(() => ({
+        pagination,
+        navigation
+      }))
+    );
+  }),
+  withPaginationInfo(),
+  distinctUntilChanged$1(
+    (prev, curr) => prev.navigation.paginationBeginCfi === curr.navigation.paginationBeginCfi
+  ),
+  map$1(
+    ({ navigation }) => ({
+      ...navigation,
+      meta: {
+        triggeredBy: "pagination"
+      }
+    })
+  )
+);
 const NAMESPACE$1 = `navigation/InternalNavigator`;
 const report = Report.namespace(NAMESPACE$1);
 class InternalNavigator extends DestroyableClass {
@@ -4613,7 +4785,12 @@ class InternalNavigator extends DestroyableClass {
     const navigationUpateFromLayout$ = layoutHasChanged$.pipe(
       switchMap(() => {
         return of(null).pipe(
-          switchMap(() => isUserLocked$.pipe(filter$1((isLocked) => !isLocked))),
+          switchMap(
+            () => isUserLocked$.pipe(
+              filter$1((isLocked) => !isLocked),
+              first$1()
+            )
+          ),
           map$1(
             () => ({
               ...this.navigationSubject.getValue(),
@@ -4678,29 +4855,10 @@ class InternalNavigator extends DestroyableClass {
       map$1(({ navigation }) => navigation),
       share()
     );
-    const navigationUpdateOnPaginationUpdate$ = context.bridgeEvent.pagination$.pipe(
-      withLatestFrom(this.navigationSubject),
-      filter$1(
-        ([pagination, navigation]) => pagination.navigationId === navigation.id
-      ),
-      map$1(([pagination, navigation]) => ({
-        pagination,
-        navigation: {
-          ...navigation
-        }
-      })),
-      withPaginationInfo(),
-      distinctUntilChanged$1(
-        (prev, curr) => prev.navigation.paginationBeginCfi === curr.navigation.paginationBeginCfi
-      ),
-      map$1(
-        ({ navigation }) => ({
-          ...navigation,
-          meta: {
-            triggeredBy: "pagination"
-          }
-        })
-      )
+    const navigationUpdateOnPaginationUpdate$ = consolidateWithPagination(
+      context,
+      this.navigationSubject,
+      spine
     );
     const navigationUpdate$ = merge(
       navigationRestored$,
@@ -5173,9 +5331,7 @@ class PaginationController extends DestroyableClass {
       })
     );
     const updateCfi$ = updatePagination$.pipe(
-      switchMap(() => this.context.bridgeEvent.viewportState$),
-      filter$1((state) => state === "free"),
-      switchMap(() => timer(500, animationFrameScheduler)),
+      waitForSwitch(this.context.bridgeEvent.viewportFree$),
       tap$1(() => {
         const {
           beginSpineItemIndex,
@@ -5205,14 +5361,9 @@ class PaginationController extends DestroyableClass {
     merge(updatePagination$, updateCfi$).pipe(takeUntil(this.destroy$)).subscribe();
   }
 }
-const generateCfiFromRange = ({
-  startNode,
-  start,
-  end,
-  endNode
-}, item) => {
-  const startCFI = generateCfi(startNode, start, item);
-  const endCFI = generateCfi(endNode, end, item);
+const generateCfiFromRange = (range, item) => {
+  const startCFI = generateCfi(range.startContainer, range.startOffset, item);
+  const endCFI = generateCfi(range.endContainer, range.endOffset, item);
   return { start: startCFI, end: endCFI };
 };
 const defaultGetResource = (item) => new URL(item.href);
@@ -5342,6 +5493,29 @@ class DocumentRenderer extends DestroyableClass {
   unload() {
     this.triggerSubject.next({ type: `unload` });
   }
+  renderHeadless() {
+    const releaseSubject = new Subject();
+    return defer(() => this.onRenderHeadless({ release: releaseSubject })).pipe(
+      endWith(void 0),
+      first$1(),
+      map$1((doc) => {
+        if (!doc) return void 0;
+        return {
+          doc,
+          release: () => {
+            releaseSubject.next(void 0);
+          }
+        };
+      }),
+      finalize(() => {
+        releaseSubject.complete();
+      }),
+      catchError((e) => {
+        Report.error(e);
+        return of(void 0);
+      })
+    );
+  }
   destroy() {
     super.destroy();
     this.stateSubject.complete();
@@ -5366,6 +5540,9 @@ class DefaultRenderer extends DocumentRenderer {
   onLayout() {
     return of(void 0);
   }
+  onRenderHeadless() {
+    return EMPTY;
+  }
 }
 class SpineItem extends DestroyableClass {
   constructor(item, parentElement, context, settings, hookManager, index) {
@@ -5497,20 +5674,29 @@ class SpineItem extends DestroyableClass {
       }),
       share$1()
     );
-    this.layout$ = layoutProcess$.pipe(
-      filter((event) => event.type === `end`),
-      map((event) => event.data),
-      share$1()
-    );
     this.isReady$ = layoutProcess$.pipe(
       withLatestFrom$1(this.renderer.isLoaded$),
       map(([event, loaded]) => !!(event.type === `end` && loaded)),
       startWith(false),
       distinctUntilChanged(),
-      shareReplay({ refCount: true })
+      shareReplay({ refCount: true, bufferSize: 1 })
+    );
+    this.layout$ = layoutProcess$.pipe(
+      filter((event) => event.type === `end`),
+      map((event) => event.data),
+      share$1()
     );
     this.needsLayout$ = merge(this.unloaded$, this.loaded$);
-    merge(this.layout$, this.isReady$).pipe(takeUntil$1(this.destroy$)).subscribe();
+    merge(
+      /**
+       * @important
+       * The order is important here. We want to ensure the isReady value
+       * is set before dispatching the layout event. Elements reacting
+       * to layout changes may rely on the isReady value.
+       */
+      this.isReady$,
+      this.layout$
+    ).pipe(takeUntil$1(this.destroy$)).subscribe();
   }
   get element() {
     return this.containerElement;
@@ -6359,7 +6545,9 @@ class SpineLayout extends DestroyableClass {
       }),
       share()
     );
-    this.info$ = this.layout$.pipe(shareReplay$1({ refCount: true }));
+    this.info$ = this.layout$.pipe(
+      shareReplay$1({ refCount: true, bufferSize: 1 })
+    );
     merge(this.layout$, this.info$).pipe(takeUntil(this.destroy$)).subscribe();
   }
   layout() {
@@ -6835,7 +7023,7 @@ const createResourcesManager = (context) => {
         switchMap$1(([db, blob]) => {
           return from(db.put(`${uniqueID}_${item.id}`, blob));
         }),
-        catchError((error) => {
+        catchError$1((error) => {
           Report.error(error);
           return EMPTY;
         })
@@ -6863,7 +7051,7 @@ const createResourcesManager = (context) => {
             })
           )
         ),
-        catchError((error) => {
+        catchError$1((error) => {
           Report.error(error);
           return EMPTY;
         })
@@ -6971,6 +7159,9 @@ class ImageRenderer extends DocumentRenderer {
       height
     });
   }
+  onRenderHeadless() {
+    return EMPTY;
+  }
 }
 const mediaEnhancer = (next) => (options) => {
   const reader = next({
@@ -7209,6 +7400,7 @@ const createLoadingElementContainer = (containerElement, context) => {
       top: 0;
       color: rgb(202, 202, 202);
       background-color: white;
+      z-index: 1;
     `;
   return loadingElement;
 };
@@ -7277,11 +7469,15 @@ const loadingEnhancer = (next) => (options) => {
   );
   const updateEntriesVisibility$ = (entries) => reader.spineItemsObserver.itemIsReady$.pipe(
     tap(({ item, isReady }) => {
-      var _a;
+      var _a, _b;
       (_a = entries[item.item.id]) == null ? void 0 : _a.style.setProperty(
         `visibility`,
         isReady ? `hidden` : `visible`
       );
+      (_b = entries[item.item.id]) == null ? void 0 : _b.style.setProperty(
+        `z-index`,
+        isReady ? `0` : `1`
+      );
     })
   );
   const loadingItems$ = reader.spineItemsManager.items$.pipe(
@@ -7574,7 +7770,7 @@ const attachFrameSrc = ({
                 }
               }),
               map$1(() => frameElement),
-              catchError$1((e) => {
+              catchError((e) => {
                 Report.error(
                   `Error while trying to fetch or load resource for item ${item.id}`
                 );
@@ -7997,8 +8193,6 @@ const renderReflowable = ({
   if ((frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow)) {
     let contentWidth = pageWidth;
     let contentHeight = pageHeight;
-    frameElement == null ? void 0 : frameElement.style.setProperty(`visibility`, `visible`);
-    frameElement == null ? void 0 : frameElement.style.setProperty(`opacity`, `1`);
     if (viewportDimensions == null ? void 0 : viewportDimensions.hasViewport) {
       upsertCSS(
         frameElement,
@@ -8094,6 +8288,51 @@ const renderReflowable = ({
     latestContentHeightWhenLoaded: newLatestContentHeightWhenLoaded
   };
 };
+const loadMedias = ({
+  settings,
+  item,
+  context
+}) => (stream) => stream.pipe(
+  switchMap((frameElement) => {
+    var _a;
+    const images = ((_a = frameElement.contentDocument) == null ? void 0 : _a.getElementsByTagName("img")) || [];
+    const imageObservables = Array.from(images).map((img) => {
+      var _a2;
+      const originalSrc = img.getAttribute("src");
+      const spineItemUriParentPath = getParentPath(item.href);
+      const foundItem = (_a2 = context.manifest) == null ? void 0 : _a2.items.find(({ href }) => {
+        return `${spineItemUriParentPath}/${originalSrc}`.endsWith(
+          `${href}`
+        );
+      });
+      if (!foundItem) return of(null);
+      const resourceHandler = new ResourceHandler(foundItem, settings);
+      return from(resourceHandler.getResource()).pipe(
+        mergeMap(
+          (resource) => resource instanceof Response ? from(resource.blob()) : of(void 0)
+        ),
+        tap$1((blob) => {
+          if (blob) {
+            const blobUrl = URL.createObjectURL(blob);
+            img.src = blobUrl;
+          }
+        })
+      );
+    });
+    return combineLatest(imageObservables).pipe(map$1(() => frameElement));
+  })
+);
+const unloadMedias = (frameElement) => {
+  var _a;
+  const images = Array.from(
+    ((_a = frameElement == null ? void 0 : frameElement.contentDocument) == null ? void 0 : _a.getElementsByTagName("img")) || []
+  );
+  images.forEach((img) => {
+    if (img.src.startsWith("blob:")) {
+      URL.revokeObjectURL(img.src);
+    }
+  });
+};
 class HtmlRenderer extends DocumentRenderer {
   constructor() {
     super(...arguments);
@@ -8125,10 +8364,16 @@ class HtmlRenderer extends DocumentRenderer {
         this.containerElement.appendChild(frameElement2);
       }),
       waitForFrameLoad,
+      loadMedias({
+        context: this.context,
+        item: this.item,
+        settings: this.settings
+      }),
       waitForFrameReady
     );
   }
   onUnload() {
+    unloadMedias(this.getFrameElement());
     this.layers.forEach((layer) => layer.element.remove());
     this.layers = [];
     return EMPTY;
@@ -8172,6 +8417,34 @@ class HtmlRenderer extends DocumentRenderer {
     this.latestContentHeightWhenLoaded = latestContentHeightWhenLoaded;
     return of(rest);
   }
+  onRenderHeadless() {
+    return from(this.resourcesHandler.fetchResource()).pipe(
+      switchMap((resource) => {
+        if (resource instanceof Response) {
+          const contentType = resource.headers.get("content-type") ?? "";
+          const parsableContentTypes = [
+            `application/xhtml+xml`,
+            `application/xml`,
+            `text/html`,
+            `text/xml`
+          ];
+          if (parsableContentTypes.includes(contentType)) {
+            return from(resource.text()).pipe(
+              map$1((text) => {
+                const domParser = new DOMParser();
+                const doc = domParser.parseFromString(
+                  text,
+                  contentType
+                );
+                return doc;
+              })
+            );
+          }
+        }
+        return of(void 0);
+      })
+    );
+  }
   getFrameElement() {
     var _a;
     const frame = (_a = this.layers[0]) == null ? void 0 : _a.element;
@@ -8248,7 +8521,7 @@ const getRangeFromSelection = (anchor, focus) => {
   }
   return range;
 };
-const createRangeFromSelection = ({
+const createOrderedRangeFromSelection = ({
   selection,
   spineItem
 }) => {
@@ -8280,7 +8553,7 @@ class SelectionTracker extends DestroyableClass {
        * The selection is still valid during the event even if it will
        * be discarded. The timeout make sure to detect this edge case.
        */
-      delay$1(0),
+      delay(0),
       map$1((event) => {
         const selection = document2.getSelection();
         return selection && !selection.isCollapsed ? [event, selection] : void 0;
@@ -8374,7 +8647,7 @@ const selectionEnhancer = (next) => (options) => {
       selectionAfterPointerUp$,
       lastSelectionOnPointerdown$,
       getSelection: () => selectionSubject.getValue(),
-      createRangeFromSelection
+      createOrderedRangeFromSelection
     },
     destroy: () => {
       selectionSubject.complete();
@@ -8434,11 +8707,16 @@ export {
   SettingsManager3 as SettingsManager,
   SpineItem,
   createReaderWithEnhancers as createReader,
+  deferIdle,
+  deferNextResult,
   getAttributeValueFromString,
   getFrameViewportInfo,
+  idle,
   injectCSS,
   isHtmlElement,
   isShallowEqual2 as isShallowEqual,
+  mapKeysTo,
+  observeResize,
   removeCSS,
   upsertCSS,
   waitForFrameLoad,