@prose-reader/core 1.131.0 → 1.133.0

package/dist/index.js

@@ -541,8 +541,8 @@ const layoutEnhancer = (next) => (options) => {
                 height: ${columnHeight}px !important;
               }
               img, video, audio, object, svg {
-                max-width: ${columnWidth}px !important;
-                max-height: ${columnHeight}px !important;
+                -max-width: ${columnWidth}px !important;
+                -max-height: ${columnHeight}px !important;
               }
               table {
                 max-width: ${columnWidth}px !important;
@@ -5674,11 +5674,6 @@ 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)),
@@ -5686,8 +5681,22 @@ class SpineItem extends DestroyableClass {
       distinctUntilChanged(),
       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;
@@ -8093,8 +8102,8 @@ const buildStyleWithMultiColumn = ({
   ``}
       img, video, audio, object, svg {
         max-width: 100%;
-        max-width: ${columnWidth}px !important;
-        max-height: ${columnHeight}px !important;
+        -max-width: ${columnWidth}px !important;
+        -max-height: ${columnHeight}px !important;
         -pointer-events: none;
         -webkit-column-break-inside: avoid;
         page-break-inside: avoid;