@prose-reader/core 1.140.0 → 1.142.0

package/dist/createReaderWithEnhancer.d.ts

@@ -175,27 +175,43 @@ export declare const createReaderWithEnhancers: (options: Partial<import('./sett
 } & {
     selection: {
         selection$: import('rxjs').Observable<{
-            document: Document;
+            itemIndex: number;
+            type: "change";
             selection: Selection;
+        } | {
             itemIndex: number;
+            type: "over";
+            event: Event;
+            selection: Selection;
         } | undefined>;
         selectionStart$: import('rxjs').Observable<boolean>;
         selectionEnd$: import('rxjs').Observable<void>;
-        selectionOver$: import('rxjs').Observable<[Event, {
-            document: Document;
+        selectionOver$: import('rxjs').Observable<{
+            itemIndex: number;
+            type: "over";
+            event: Event;
+            selection: Selection;
+        }>;
+        lastSelectionOnPointerdown$: import('rxjs').Observable<{
+            itemIndex: number;
+            type: "change";
             selection: Selection;
+        } | {
             itemIndex: number;
-        } | undefined]>;
-        lastSelectionOnPointerdown$: import('rxjs').Observable<({
-            document: Document;
+            type: "over";
+            event: Event;
             selection: Selection;
+        } | undefined>;
+        getSelection: () => {
             itemIndex: number;
-        } | undefined) | undefined>;
-        getSelection: () => ({
-            document: Document;
+            type: "change";
             selection: Selection;
+        } | {
             itemIndex: number;
-        } | undefined) | undefined;
+            type: "over";
+            event: Event;
+            selection: Selection;
+        } | undefined;
         createOrderedRangeFromSelection: (params: {
             selection: {
                 anchorNode?: Node | null;

package/dist/enhancers/selection/{SelectionTracker.d.ts → FrameSelectionTracker.d.ts}

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import { DestroyableClass } from '../../utils/DestroyableClass';
-export declare class SelectionTracker extends DestroyableClass {
+export declare class FrameSelectionTracker extends DestroyableClass {
     selectionChange$: Observable<Selection | null>;
     selectionOver$: Observable<readonly [Event, Selection]>;
-    constructor(document: Document);
+    constructor(frame: HTMLIFrameElement);
 }

package/dist/enhancers/selection/selectionEnhancer.d.ts

@@ -1,19 +1,26 @@
 import { Observable } from 'rxjs';
 import { EnhancerOutput, RootEnhancer } from '../types/enhancer';
 import { SpineItem } from '../..';
-type SelectionValue = {
-    document: Document;
+type SelectionChange = {
+    itemIndex: number;
+    type: "change";
     selection: Selection;
+};
+type SelectionOver = {
     itemIndex: number;
-} | undefined;
+    type: "over";
+    event: Event;
+    selection: Selection;
+};
+type SelectionValue = SelectionChange | SelectionOver | undefined;
 export declare const selectionEnhancer: <InheritOptions, InheritOutput extends EnhancerOutput<RootEnhancer>>(next: (options: InheritOptions) => InheritOutput) => (options: InheritOptions) => InheritOutput & {
     selection: {
         selection$: Observable<SelectionValue>;
         selectionStart$: Observable<boolean>;
         selectionEnd$: Observable<void>;
-        selectionOver$: Observable<[Event, SelectionValue]>;
-        lastSelectionOnPointerdown$: Observable<SelectionValue | undefined>;
-        getSelection: () => SelectionValue | undefined;
+        selectionOver$: Observable<SelectionOver>;
+        lastSelectionOnPointerdown$: Observable<SelectionValue>;
+        getSelection: () => SelectionValue;
         createOrderedRangeFromSelection: (params: {
             selection: {
                 anchorNode?: Node | null;

package/dist/enhancers/selection/trackSpineItemSelection.d.ts

@@ -0,0 +1,9 @@
+import { SpineItem } from '../../spineItem/SpineItem';
+export declare const trackSpineItemSelection: (spineItem: SpineItem) => import('rxjs').Observable<{
+    type: "change";
+    selection: Selection;
+} | {
+    type: "over";
+    event: Event;
+    selection: Selection;
+} | undefined>;

package/dist/index.js

@@ -89,6 +89,15 @@ function idle() {
 function deferIdle(callback) {
   return defer(() => idle().pipe(switchMap(callback)));
 }
+const observeMutation = (target, options) => {
+  return new 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 getAttributeValueFromString = (string, key) => {
 };
 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 removeCSS = (frameElement, id) => {
     }
   }
 };
-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 @@ const fontsEnhancer = (next) => (options) => {
       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 @@ const fontsEnhancer = (next) => (options) => {
     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 layoutEnhancer = (next) => (options) => {
       }
       const frame = spineItem == null ? void 0 : spineItem.renderer.getDocumentFrame();
       if (frame) {
-        upsertCSS(
+        upsertCSSToFrame(
           frame,
           `prose-layout-enhancer-css`,
           `
@@ -1695,7 +1704,7 @@ const themeEnhancer = (next) => (options) => {
     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 @@ const themeEnhancer = (next) => (options) => {
     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 @@ class DocumentRenderer extends DestroyableClass {
   layout(params) {
     return defer(() => this.onLayout(params)).pipe(
       map$1((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 @@ class SpineLayout extends DestroyableClass {
         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 from(this.spineItemsManager.items).pipe(
           reduce(
             (acc$, item, index) => acc$.pipe(
@@ -7403,7 +7427,7 @@ const accessibilityEnhancer = (next) => (options) => {
       if (!item) return;
       const frame = item.renderer.getDocumentFrame();
       if (!frame) return;
-      upsertCSS(
+      upsertCSSToFrame(
         frame,
         `prose-reader-accessibility`,
         `
@@ -7965,7 +7989,7 @@ const renderPrePaginated = ({
       },
       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 @@ const renderReflowable = ({
     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 @@ const renderReflowable = ({
           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 @@ const createOrderedRangeFromSelection = ({
     return void 0;
   }
 };
-class SelectionTracker extends DestroyableClass {
-  constructor(document2) {
+class FrameSelectionTracker extends DestroyableClass {
+  constructor(frame) {
+    var _a;
     super();
-    this.selectionChange$ = fromEvent(document2, "selectionchange").pipe(
-      map$1(() => document2.getSelection())
-    );
-    this.selectionOver$ = fromEvent(document2, "pointerdown").pipe(
-      switchMap$1(
-        () => merge(
-          fromEvent(document2, "pointerup"),
-          fromEvent(document2, "pointercancel"),
-          fromEvent(document2, "contextmenu")
-        ).pipe(
-          first$1(),
-          /**
-           * The selection is still valid during the event even if it will
-           * be discarded. The timeout make sure to detect this edge case.
-           */
-          delay(0),
-          map$1((event) => {
-            const selection = document2.getSelection();
-            return selection && !selection.isCollapsed ? [event, selection] : void 0;
-          }),
-          filter$1(isDefined)
+    const frameDoc = frame.contentDocument || ((_a = frame.contentWindow) == null ? void 0 : _a.document);
+    if (!frameDoc) {
+      this.selectionChange$ = NEVER;
+      this.selectionOver$ = NEVER;
+    } else {
+      const frameDocMutation$ = observeMutation(frameDoc.body, {
+        childList: true,
+        subtree: true
+      }).pipe(
+        filter$1(
+          (mutations) => !!mutations.find((mutation) => {
+            return mutation.type === "childList" && mutation.removedNodes.length;
+          })
         )
-      )
-    );
+      );
+      const iframeDestroyed$ = !frame.parentElement ? of(null) : observeMutation(frame.parentElement, {
+        childList: true
+      }).pipe(
+        filter$1(
+          (mutation) => !!mutation.find(
+            (mutation2) => Array.from(mutation2.removedNodes).includes(frame)
+          )
+        )
+      );
+      this.selectionChange$ = merge(
+        fromEvent(frameDoc, "selectionchange"),
+        frameDocMutation$
+      ).pipe(
+        map$1(() => frameDoc.getSelection()),
+        takeUntil(merge(iframeDestroyed$, this.destroy$)),
+        endWith(null)
+      );
+      this.selectionOver$ = fromEvent(frameDoc, "pointerdown").pipe(
+        switchMap$1(
+          () => merge(
+            fromEvent(frameDoc, "pointerup"),
+            fromEvent(frameDoc, "pointercancel"),
+            fromEvent(frameDoc, "contextmenu")
+          ).pipe(
+            first$1(),
+            /**
+             * The selection is still valid during the event even if it will
+             * be discarded. The timeout make sure to detect this edge case.
+             */
+            delay(0),
+            map$1((event) => {
+              const selection = frameDoc.getSelection();
+              return selection && !selection.isCollapsed ? [event, selection] : void 0;
+            }),
+            filter$1(isDefined)
+          )
+        ),
+        takeUntil(merge(iframeDestroyed$, this.destroy$))
+      );
+    }
   }
 }
+const trackSpineItemSelection = (spineItem) => spineItem.loaded$.pipe(
+  switchMap$1(() => {
+    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 NEVER;
+    const selectionTracker = new FrameSelectionTracker(frame);
+    return merge(
+      selectionTracker.selectionChange$.pipe(
+        map$1((selection) => {
+          if (selection == null ? void 0 : selection.toString()) {
+            return {
+              type: "change",
+              selection
+            };
+          } else {
+            return void 0;
+          }
+        })
+      ),
+      selectionTracker.selectionOver$.pipe(
+        map$1(([event, selection]) => {
+          return {
+            type: "over",
+            event,
+            selection
+          };
+        })
+      )
+    ).pipe(
+      takeUntil(spineItem.unloaded$),
+      endWith(void 0),
+      finalize(() => {
+        selectionTracker.destroy();
+      })
+    );
+  }),
+  distinctUntilChanged$1()
+);
 const selectionEnhancer = (next) => (options) => {
   const reader = next(options);
-  const selectionSubject = new BehaviorSubject(
-    void 0
-  );
-  const selectionOverSubject = new 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);
-          merge(
-            selectionTracker.selectionChange$.pipe(
-              tap$1((selection) => {
-                if (selection == null ? void 0 : selection.toString()) {
-                  selectionSubject.next({
-                    document: frameDoc,
-                    selection,
-                    itemIndex
-                  });
-                } else {
-                  selectionSubject.next(void 0);
-                }
-              })
-            ),
-            selectionTracker.selectionOver$.pipe(
-              tap$1(([event, selection]) => {
-                selectionOverSubject.next([
-                  event,
-                  {
-                    document: frameDoc,
-                    selection,
-                    itemIndex
-                  }
-                ]);
-              })
-            )
-          ).pipe(takeUntil(destroy$)).subscribe();
-          destroy(() => {
-            selectionTracker.destroy();
-          });
-        }
-      }
-    }
-  );
-  const selection$ = selectionSubject.pipe(
+  let lasSelection = void 0;
+  const trackedSelection$ = reader.spineItemsManager.items$.pipe(
+    switchMap$1((spineItems) => {
+      const instances = spineItems.map((spineItem) => {
+        const itemIndex = reader.spineItemsManager.getSpineItemIndex(spineItem) ?? 0;
+        return trackSpineItemSelection(spineItem).pipe(
+          map$1((entry) => {
+            if (!entry) return void 0;
+            return {
+              ...entry,
+              itemIndex
+            };
+          })
+        );
+      });
+      return merge(...instances);
+    }),
     distinctUntilChanged$1(),
-    shareReplay$1(1),
-    takeUntil(reader.$.destroy$)
+    tap$1((value) => {
+      lasSelection = value;
+    }),
+    shareReplay$1({ refCount: true, bufferSize: 1 })
   );
-  const selectionStart$ = selectionSubject.pipe(
+  const selection$ = trackedSelection$.pipe(
+    filter$1((selection) => (selection == null ? void 0 : selection.type) === "change" || !selection),
+    share()
+  );
+  const selectionStart$ = trackedSelection$.pipe(
     map$1((selection) => !!selection),
     distinctUntilChanged$1(),
     filter$1((isSelecting) => isSelecting),
@@ -8694,15 +8762,18 @@ const selectionEnhancer = (next) => (options) => {
     filter$1((selection) => !selection),
     share()
   );
-  const selectionOver$ = selectionOverSubject.asObservable();
+  const selectionOver$ = trackedSelection$.pipe(
+    filter$1((selection) => (selection == null ? void 0 : selection.type) === "over"),
+    share()
+  );
   const lastSelectionOnPointerdown$ = reader.context.containerElement$.pipe(
     switchMap$1((container) => fromEvent(container, "pointerdown")),
     withLatestFrom(selection$),
     map$1(([, selection]) => selection),
     startWith$1(void 0),
-    shareReplay$1(1),
-    takeUntil(reader.$.destroy$)
+    shareReplay$1({ refCount: true, bufferSize: 1 })
   );
+  merge(selection$, lastSelectionOnPointerdown$).pipe(takeUntil(reader.$.destroy$)).subscribe();
   return {
     ...reader,
     selection: {
@@ -8711,12 +8782,8 @@ const selectionEnhancer = (next) => (options) => {
       selectionEnd$,
       selectionOver$,
       lastSelectionOnPointerdown$,
-      getSelection: () => selectionSubject.getValue(),
+      getSelection: () => lasSelection,
       createOrderedRangeFromSelection
-    },
-    destroy: () => {
-      selectionSubject.complete();
-      reader.destroy();
     }
   };
 };
@@ -8781,9 +8848,10 @@ export {
   isHtmlElement,
   isShallowEqual2 as isShallowEqual,
   mapKeysTo,
+  observeMutation,
   observeResize,
   removeCSS,
-  upsertCSS,
+  upsertCSSToFrame,
   waitForFrameLoad,
   waitForFrameReady,
   waitForSwitch