@prose-reader/core 1.140.0 → 1.142.0

package/dist/index.umd.cjs

@@ -89,6 +89,15 @@
   function deferIdle(callback) {
     return rxjs.defer(() => idle().pipe(operators.switchMap(callback)));
   }
+  const observeMutation = (target, options) => {
+    return new rxjs.Observable((subscriber) => {
+      const observer = new MutationObserver((mutations) => {
+        subscriber.next(mutations);
+      });
+      observer.observe(target, options);
+      return () => observer.disconnect();
+    });
+  };
   class SettingsManagerOverload {
     constructor(initialSettings, settingsManager) {
       this.settingsManager = settingsManager;
@@ -194,7 +203,7 @@
   };
   const injectCSS = (frameElement, id, style, prepend) => {
     if (frameElement && frameElement.contentDocument && frameElement.contentDocument.head) {
-      const userStyle = document.createElement(`style`);
+      const userStyle = frameElement.contentDocument.createElement(`style`);
       userStyle.id = id;
       userStyle.innerHTML = style;
       if (prepend) {
@@ -212,7 +221,7 @@
       }
     }
   };
-  const upsertCSS = (frameElement, id, style, prepend) => {
+  const upsertCSSToFrame = (frameElement, id, style, prepend) => {
     if (!frameElement) return;
     removeCSS(frameElement, id);
     injectCSS(frameElement, id, style, prepend);
@@ -293,7 +302,7 @@
         if (item.renditionLayout !== `pre-paginated`) {
           const frame = item.renderer.getDocumentFrame();
           if (frame) {
-            upsertCSS(frame, `prose-reader-fonts`, getStyle());
+            upsertCSSToFrame(frame, `prose-reader-fonts`, getStyle());
           }
         }
       });
@@ -306,7 +315,7 @@
       if ((item == null ? void 0 : item.renditionLayout) !== `pre-paginated`) {
         const frame = item == null ? void 0 : item.renderer.getDocumentFrame();
         if (frame) {
-          upsertCSS(frame, `prose-reader-fonts`, getStyle());
+          upsertCSSToFrame(frame, `prose-reader-fonts`, getStyle());
         }
       }
     });
@@ -531,7 +540,7 @@
         }
         const frame = spineItem == null ? void 0 : spineItem.renderer.getDocumentFrame();
         if (frame) {
-          upsertCSS(
+          upsertCSSToFrame(
             frame,
             `prose-layout-enhancer-css`,
             `
@@ -1695,7 +1704,7 @@
       reader.spineItemsManager.items.forEach((item) => {
         const frame = item.renderer.getDocumentFrame();
         if (frame) {
-          upsertCSS(frame, `prose-reader-theme`, getStyle());
+          upsertCSSToFrame(frame, `prose-reader-theme`, getStyle());
         }
         applyChangeToSpineItemElement({ container: item.element });
       });
@@ -1705,7 +1714,7 @@
       if ((item == null ? void 0 : item.renditionLayout) !== "pre-paginated") {
         const frame = item == null ? void 0 : item.renderer.getDocumentFrame();
         if (frame) {
-          upsertCSS(frame, `prose-reader-theme`, getStyle());
+          upsertCSSToFrame(frame, `prose-reader-theme`, getStyle());
         }
       }
     });
@@ -5561,10 +5570,25 @@
     layout(params) {
       return rxjs.defer(() => this.onLayout(params)).pipe(
         rxjs.map((dims) => {
-          const { height, width } = dims ?? this.lastLayoutDims ?? { height: 0, width: 0 };
-          const minHeight = Math.max(height, this.context.getPageSize().height);
-          const minWidth = Math.max(width, params.minimumWidth);
-          this.lastLayoutDims = { height: minHeight, width: minWidth };
+          var _a, _b;
+          const isPrepaginated = this.item.renditionLayout === `pre-paginated` || !((_a = this.context.manifest) == null ? void 0 : _a.renditionLayout) && ((_b = this.context.manifest) == null ? void 0 : _b.renditionLayout) === `pre-paginated`;
+          if (dims) {
+            const { height, width } = dims;
+            this.lastLayoutDims = { height, width };
+            return this.lastLayoutDims;
+          }
+          if (isPrepaginated) {
+            this.lastLayoutDims = {
+              height: this.context.getPageSize().height,
+              width: this.context.getPageSize().width
+            };
+          } else {
+            this.lastLayoutDims = {
+              height: this.context.getPageSize().height,
+              width: this.context.getPageSize().width,
+              ...this.lastLayoutDims
+            };
+          }
           return this.lastLayoutDims;
         })
       );
@@ -6514,7 +6538,7 @@
           layoutInProgress.next(true);
           const manifest = this.context.manifest;
           const newItemLayoutInformation = [];
-          const isGloballyPrePaginated = (manifest == null ? void 0 : manifest.renditionLayout) === `pre-paginated`;
+          const isGloballyPrePaginated = isFullyPrePaginated(manifest) ?? false;
           return rxjs.from(this.spineItemsManager.items).pipe(
             rxjs.reduce(
               (acc$, item, index) => acc$.pipe(
@@ -7403,7 +7427,7 @@
         if (!item) return;
         const frame = item.renderer.getDocumentFrame();
         if (!frame) return;
-        upsertCSS(
+        upsertCSSToFrame(
           frame,
           `prose-reader-accessibility`,
           `
@@ -7965,7 +7989,7 @@
         },
         viewportDimensions
       );
-      upsertCSS(frameElement, `prose-reader-css`, cssLink);
+      upsertCSSToFrame(frameElement, `prose-reader-css`, cssLink);
       if (viewportDimensions) {
         staticLayout$1(frameElement, {
           width: viewportDimensions.width ?? 1,
@@ -8246,7 +8270,7 @@
       let contentWidth = pageWidth;
       let contentHeight = pageHeight;
       if (viewportDimensions == null ? void 0 : viewportDimensions.hasViewport) {
-        upsertCSS(
+        upsertCSSToFrame(
           frameElement,
           `prose-reader-html-renderer-framce-css`,
           buildStyleForViewportFrame()
@@ -8281,7 +8305,7 @@
             pageWidth
           })
         );
-        upsertCSS(frameElement, `prose-reader-css`, frameStyle, true);
+        upsertCSSToFrame(frameElement, `prose-reader-css`, frameStyle, true);
         if (isUsingVerticalWriting) {
           const pages = Math.ceil(
             frameElement.contentDocument.documentElement.scrollHeight / pageHeight
@@ -8597,92 +8621,136 @@
       return void 0;
     }
   };
-  class SelectionTracker extends DestroyableClass {
-    constructor(document2) {
+  class FrameSelectionTracker extends DestroyableClass {
+    constructor(frame) {
+      var _a;
       super();
-      this.selectionChange$ = rxjs.fromEvent(document2, "selectionchange").pipe(
-        rxjs.map(() => document2.getSelection())
-      );
-      this.selectionOver$ = rxjs.fromEvent(document2, "pointerdown").pipe(
-        rxjs.switchMap(
-          () => rxjs.merge(
-            rxjs.fromEvent(document2, "pointerup"),
-            rxjs.fromEvent(document2, "pointercancel"),
-            rxjs.fromEvent(document2, "contextmenu")
-          ).pipe(
-            rxjs.first(),
-            /**
-             * The selection is still valid during the event even if it will
-             * be discarded. The timeout make sure to detect this edge case.
-             */
-            rxjs.delay(0),
-            rxjs.map((event) => {
-              const selection = document2.getSelection();
-              return selection && !selection.isCollapsed ? [event, selection] : void 0;
-            }),
-            rxjs.filter(isDefined)
+      const frameDoc = frame.contentDocument || ((_a = frame.contentWindow) == null ? void 0 : _a.document);
+      if (!frameDoc) {
+        this.selectionChange$ = rxjs.NEVER;
+        this.selectionOver$ = rxjs.NEVER;
+      } else {
+        const frameDocMutation$ = observeMutation(frameDoc.body, {
+          childList: true,
+          subtree: true
+        }).pipe(
+          rxjs.filter(
+            (mutations) => !!mutations.find((mutation) => {
+              return mutation.type === "childList" && mutation.removedNodes.length;
+            })
           )
-        )
-      );
+        );
+        const iframeDestroyed$ = !frame.parentElement ? rxjs.of(null) : observeMutation(frame.parentElement, {
+          childList: true
+        }).pipe(
+          rxjs.filter(
+            (mutation) => !!mutation.find(
+              (mutation2) => Array.from(mutation2.removedNodes).includes(frame)
+            )
+          )
+        );
+        this.selectionChange$ = rxjs.merge(
+          rxjs.fromEvent(frameDoc, "selectionchange"),
+          frameDocMutation$
+        ).pipe(
+          rxjs.map(() => frameDoc.getSelection()),
+          rxjs.takeUntil(rxjs.merge(iframeDestroyed$, this.destroy$)),
+          rxjs.endWith(null)
+        );
+        this.selectionOver$ = rxjs.fromEvent(frameDoc, "pointerdown").pipe(
+          rxjs.switchMap(
+            () => rxjs.merge(
+              rxjs.fromEvent(frameDoc, "pointerup"),
+              rxjs.fromEvent(frameDoc, "pointercancel"),
+              rxjs.fromEvent(frameDoc, "contextmenu")
+            ).pipe(
+              rxjs.first(),
+              /**
+               * The selection is still valid during the event even if it will
+               * be discarded. The timeout make sure to detect this edge case.
+               */
+              rxjs.delay(0),
+              rxjs.map((event) => {
+                const selection = frameDoc.getSelection();
+                return selection && !selection.isCollapsed ? [event, selection] : void 0;
+              }),
+              rxjs.filter(isDefined)
+            )
+          ),
+          rxjs.takeUntil(rxjs.merge(iframeDestroyed$, this.destroy$))
+        );
+      }
     }
   }
+  const trackSpineItemSelection = (spineItem) => spineItem.loaded$.pipe(
+    rxjs.switchMap(() => {
+      var _a;
+      const frame = spineItem.renderer.getDocumentFrame();
+      const frameDoc = (frame == null ? void 0 : frame.contentDocument) || ((_a = frame == null ? void 0 : frame.contentWindow) == null ? void 0 : _a.document);
+      if (!frame || !frameDoc) return rxjs.NEVER;
+      const selectionTracker = new FrameSelectionTracker(frame);
+      return rxjs.merge(
+        selectionTracker.selectionChange$.pipe(
+          rxjs.map((selection) => {
+            if (selection == null ? void 0 : selection.toString()) {
+              return {
+                type: "change",
+                selection
+              };
+            } else {
+              return void 0;
+            }
+          })
+        ),
+        selectionTracker.selectionOver$.pipe(
+          rxjs.map(([event, selection]) => {
+            return {
+              type: "over",
+              event,
+              selection
+            };
+          })
+        )
+      ).pipe(
+        rxjs.takeUntil(spineItem.unloaded$),
+        rxjs.endWith(void 0),
+        rxjs.finalize(() => {
+          selectionTracker.destroy();
+        })
+      );
+    }),
+    rxjs.distinctUntilChanged()
+  );
   const selectionEnhancer = (next) => (options) => {
     const reader = next(options);
-    const selectionSubject = new rxjs.BehaviorSubject(
-      void 0
-    );
-    const selectionOverSubject = new rxjs.Subject();
-    reader.hookManager.register(
-      `item.onDocumentLoad`,
-      ({ itemId, destroy$, destroy }) => {
-        var _a;
-        const item = reader.spineItemsManager.get(itemId);
-        const frame = item == null ? void 0 : item.renderer.getDocumentFrame();
-        const itemIndex = reader.spineItemsManager.getSpineItemIndex(itemId) ?? 0;
-        if (frame) {
-          const frameDoc = frame.contentDocument || ((_a = frame.contentWindow) == null ? void 0 : _a.document);
-          if (frameDoc) {
-            const selectionTracker = new SelectionTracker(frameDoc);
-            rxjs.merge(
-              selectionTracker.selectionChange$.pipe(
-                rxjs.tap((selection) => {
-                  if (selection == null ? void 0 : selection.toString()) {
-                    selectionSubject.next({
-                      document: frameDoc,
-                      selection,
-                      itemIndex
-                    });
-                  } else {
-                    selectionSubject.next(void 0);
-                  }
-                })
-              ),
-              selectionTracker.selectionOver$.pipe(
-                rxjs.tap(([event, selection]) => {
-                  selectionOverSubject.next([
-                    event,
-                    {
-                      document: frameDoc,
-                      selection,
-                      itemIndex
-                    }
-                  ]);
-                })
-              )
-            ).pipe(rxjs.takeUntil(destroy$)).subscribe();
-            destroy(() => {
-              selectionTracker.destroy();
-            });
-          }
-        }
-      }
-    );
-    const selection$ = selectionSubject.pipe(
+    let lasSelection = void 0;
+    const trackedSelection$ = reader.spineItemsManager.items$.pipe(
+      rxjs.switchMap((spineItems) => {
+        const instances = spineItems.map((spineItem) => {
+          const itemIndex = reader.spineItemsManager.getSpineItemIndex(spineItem) ?? 0;
+          return trackSpineItemSelection(spineItem).pipe(
+            rxjs.map((entry) => {
+              if (!entry) return void 0;
+              return {
+                ...entry,
+                itemIndex
+              };
+            })
+          );
+        });
+        return rxjs.merge(...instances);
+      }),
       rxjs.distinctUntilChanged(),
-      rxjs.shareReplay(1),
-      rxjs.takeUntil(reader.$.destroy$)
+      rxjs.tap((value) => {
+        lasSelection = value;
+      }),
+      rxjs.shareReplay({ refCount: true, bufferSize: 1 })
     );
-    const selectionStart$ = selectionSubject.pipe(
+    const selection$ = trackedSelection$.pipe(
+      rxjs.filter((selection) => (selection == null ? void 0 : selection.type) === "change" || !selection),
+      rxjs.share()
+    );
+    const selectionStart$ = trackedSelection$.pipe(
       rxjs.map((selection) => !!selection),
       rxjs.distinctUntilChanged(),
       rxjs.filter((isSelecting) => isSelecting),
@@ -8694,15 +8762,18 @@
       rxjs.filter((selection) => !selection),
       rxjs.share()
     );
-    const selectionOver$ = selectionOverSubject.asObservable();
+    const selectionOver$ = trackedSelection$.pipe(
+      rxjs.filter((selection) => (selection == null ? void 0 : selection.type) === "over"),
+      rxjs.share()
+    );
     const lastSelectionOnPointerdown$ = reader.context.containerElement$.pipe(
       rxjs.switchMap((container) => rxjs.fromEvent(container, "pointerdown")),
       rxjs.withLatestFrom(selection$),
       rxjs.map(([, selection]) => selection),
       rxjs.startWith(void 0),
-      rxjs.shareReplay(1),
-      rxjs.takeUntil(reader.$.destroy$)
+      rxjs.shareReplay({ refCount: true, bufferSize: 1 })
     );
+    rxjs.merge(selection$, lastSelectionOnPointerdown$).pipe(rxjs.takeUntil(reader.$.destroy$)).subscribe();
     return {
       ...reader,
       selection: {
@@ -8711,12 +8782,8 @@
         selectionEnd$,
         selectionOver$,
         lastSelectionOnPointerdown$,
-        getSelection: () => selectionSubject.getValue(),
+        getSelection: () => lasSelection,
         createOrderedRangeFromSelection
-      },
-      destroy: () => {
-        selectionSubject.complete();
-        reader.destroy();
       }
     };
   };
@@ -8783,9 +8850,10 @@
   exports2.injectCSS = injectCSS;
   exports2.isHtmlElement = isHtmlElement;
   exports2.mapKeysTo = mapKeysTo;
+  exports2.observeMutation = observeMutation;
   exports2.observeResize = observeResize;
   exports2.removeCSS = removeCSS;
-  exports2.upsertCSS = upsertCSS;
+  exports2.upsertCSSToFrame = upsertCSSToFrame;
   exports2.waitForFrameLoad = waitForFrameLoad;
   exports2.waitForFrameReady = waitForFrameReady;
   exports2.waitForSwitch = waitForSwitch;