feat: improve gallery

Author: mbret

packages/core/src/enhancers/html/renderer/HtmlRenderer.ts

@@ -25,7 +25,7 @@ export class HtmlRenderer extends DocumentRenderer {
   onCreateDocument() {
     const frameElement = createFrameElement()
 
-    this.documentContainer = frameElement
+    this.setDocumentContainer(frameElement)
 
     return of(frameElement)
   }

packages/core/src/spineItem/renderer/DocumentRenderer.ts

@@ -46,6 +46,8 @@ type LayoutParams = {
 }
 
 export abstract class DocumentRenderer extends DestroyableClass {
+  static readonly DOCUMENT_CONTAINER_CLASS_NAME =
+    `prose-reader-document-container`
   private triggerSubject = new Subject<{ type: `load` } | { type: `unload` }>()
 
   protected context: Context
@@ -78,7 +80,7 @@ export abstract class DocumentRenderer extends DestroyableClass {
     share(),
   )
 
-  public documentContainer: HTMLElement | undefined
+  private _documentContainer: HTMLElement | undefined
 
   constructor(params: {
     context: Context
@@ -179,15 +181,22 @@ export abstract class DocumentRenderer extends DestroyableClass {
     merge(unload$).pipe(takeUntil(this.destroy$)).subscribe()
   }
 
+  protected setDocumentContainer(element: HTMLElement) {
+    this._documentContainer = element
+    this._documentContainer.classList.add(
+      DocumentRenderer.DOCUMENT_CONTAINER_CLASS_NAME,
+    )
+  }
+
   protected attach() {
     if (this.documentContainer) {
       this.containerElement.appendChild(this.documentContainer)
     }
   }
 
   protected detach() {
-    this.documentContainer?.remove()
-    this.documentContainer = undefined
+    this._documentContainer?.remove()
+    this._documentContainer = undefined
   }
 
   public get state$() {
@@ -278,6 +287,10 @@ export abstract class DocumentRenderer extends DestroyableClass {
    */
   abstract getDocumentFrame(): HTMLIFrameElement | undefined
 
+  get documentContainer() {
+    return this._documentContainer
+  }
+
   get writingMode(): `vertical-rl` | `horizontal-tb` | undefined {
     return undefined
   }

packages/demo/src/reader/useCreateReader.ts

@@ -1,26 +1,29 @@
-import { useEffect } from "react"
-import { readerSignal } from "./useReader"
-import { SIGNAL_RESET } from "reactjrx"
+import { createReader } from "@prose-reader/core"
+import { annotationsEnhancer } from "@prose-reader/enhancer-annotations"
 import { bookmarksEnhancer } from "@prose-reader/enhancer-bookmarks"
-import { searchEnhancer } from "@prose-reader/enhancer-search"
+import { galleryEnhancer } from "@prose-reader/enhancer-gallery"
 import { gesturesEnhancer } from "@prose-reader/enhancer-gestures"
 import { pdfEnhancer } from "@prose-reader/enhancer-pdf"
-import { createReader } from "@prose-reader/core"
-import { webStreamer } from "../streamer/webStreamer"
-import { getFileKeyFromUrl } from "../streamer/utils.shared"
-import { of } from "rxjs"
-import { annotationsEnhancer } from "@prose-reader/enhancer-annotations"
+import { searchEnhancer } from "@prose-reader/enhancer-search"
 import pdfjsViewerInlineCss from "pdfjs-dist/web/pdf_viewer.css?inline"
+import { useEffect } from "react"
+import { SIGNAL_RESET } from "reactjrx"
+import { of } from "rxjs"
+import { getFileKeyFromUrl } from "../streamer/utils.shared"
+import { webStreamer } from "../streamer/webStreamer"
+import { readerSignal } from "./useReader"
 
 export type ReaderInstance = ReturnType<typeof createAppReader>
 
-export const createAppReader = pdfEnhancer(
-  annotationsEnhancer(
-    gesturesEnhancer(
-      bookmarksEnhancer(
-        searchEnhancer(
-          // __
-          createReader,
+export const createAppReader = galleryEnhancer(
+  pdfEnhancer(
+    annotationsEnhancer(
+      gesturesEnhancer(
+        bookmarksEnhancer(
+          searchEnhancer(
+            // __
+            createReader,
+          ),
         ),
       ),
     ),