feat!: change from annotation store to plugin store, and sync entire anno state

Author: optimalcharb

app/page-client-side.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import AnnotationStoreTable from "../components/annotation-store/annotation-store-table"
 import PDFContainer from "../components/pdf-container/pdf-container-dynamic"
+import PluginStoreTable from "../components/plugin-store/components/plugin-store-table"
 
 export default function ClientSideHomePage() {
   return (
     <div className="space-y-4">
-      <AnnotationStoreTable />
+      <PluginStoreTable />
       <PDFContainer url="https://snippet.embedpdf.com/ebook.pdf" />
     </div>
   )

components/annotation-store/annotation-store-sync.tsx

@@ -10,16 +10,17 @@ import {
 } from "@embedpdf/plugin-interaction-manager/react"
 import { LoaderPluginPackage } from "@embedpdf/plugin-loader/react"
 import { RenderLayer, RenderPluginPackage } from "@embedpdf/plugin-render/react"
-import { Scroller, ScrollPluginPackage, ScrollStrategy } from "@embedpdf/plugin-scroll/react"
+import { ScrollPluginPackage, ScrollStrategy, Scroller } from "@embedpdf/plugin-scroll/react"
 import { SearchLayer, SearchPluginPackage } from "@embedpdf/plugin-search/react"
-import { SelectionLayer, SelectionPluginPackage } from "./plugin-selection-2"
+import { ThumbnailPluginPackage } from "@embedpdf/plugin-thumbnail/react"
 import { TilingLayer, TilingPluginPackage } from "@embedpdf/plugin-tiling/react"
 import { Viewport, ViewportPluginPackage } from "@embedpdf/plugin-viewport/react"
 import { PinchWrapper, ZoomMode, ZoomPluginPackage } from "@embedpdf/plugin-zoom/react"
 import { useRef } from "react"
-import AnnotationStoreSync from "../annotation-store/annotation-store-sync"
+import PluginStoreSync from "../plugin-store/components/plugin-store-sync"
 import { Spinner } from "../shadcn-ui/spinner"
 import { AnnotationLayer, AnnotationPluginPackage } from "./plugin-annotation-2"
+import { SelectionLayer, SelectionPluginPackage } from "./plugin-selection-2"
 import Toolbar from "./toolbar"
 
 const logger = new ConsoleLogger()
@@ -78,6 +79,8 @@ export default function PDFContainer({ url }: PDFContainerProps) {
               overlapPx: 2.5,
               extraRings: 0,
             }),
+            // register Thumbnail after Scroll, Render
+            createPluginRegistration(ThumbnailPluginPackage, { width: 100 }),
             createPluginRegistration(SelectionPluginPackage),
             // register Annotation after InteractionManager, Seletion
             createPluginRegistration(AnnotationPluginPackage),
@@ -87,15 +90,16 @@ export default function PDFContainer({ url }: PDFContainerProps) {
             createPluginRegistration(ZoomPluginPackage, {
               defaultZoomLevel: ZoomMode.Automatic,
             }),
+            // register Search after Scroll, Selection
             createPluginRegistration(SearchPluginPackage),
           ]}
         >
           {({ pluginsReady }) => {
             return (
               <GlobalPointerProvider>
-                <AnnotationStoreSync />
+                <PluginStoreSync />
                 <Toolbar data-testid="annotation-toolbar" />
-                <Viewport className="h-full w-full flex-1 overflow-auto bg-gray-100 select-none">
+                <Viewport className="h-full w-full flex-1 overflow-hidden bg-gray-100 select-none">
                   {!pluginsReady && (
                     <div className="flex h-full w-full items-center justify-center">
                       <Spinner data-testid="spinner1" />

components/annotation-store/annotation-store-table.tsx

@@ -1,6 +1,5 @@
-import useAnnotationStore from "@/hooks/annotation-store/use-annotation-store"
 import { useExportCapability } from "@embedpdf/plugin-export/react"
-import { useZoom } from "@embedpdf/plugin-zoom/react"
+import { useZoomCapability } from "@embedpdf/plugin-zoom/react"
 import {
   Download,
   Highlighter,
@@ -11,22 +10,17 @@ import {
   ZoomIn,
   ZoomOut,
 } from "lucide-react"
+import usePluginStore from "../plugin-store/hooks/use-plugin-store"
 
 const Toolbar = () => {
-  const { provides: exportApi } = useExportCapability()
-  const { provides: zoom } = useZoom()
+  const { provides: exportCapability } = useExportCapability()
+  const { provides: zoomCapability } = useZoomCapability()
 
-  const {
-    capability: annotationApi,
-    activeToolId,
-    selectedUid,
-    canUndo,
-    canRedo,
-  } = useAnnotationStore()
+  const { annoCapability, annoState } = usePluginStore()
 
   const handleDelete = () => {
-    if (selectedUid) {
-      annotationApi?.deleteAnnotation(selectedUid)
+    if (annoState?.selectedUid) {
+      annoCapability?.deleteAnnotation(annoState.selectedUid)
     }
   }
 
@@ -41,10 +35,12 @@ const Toolbar = () => {
         <button
           key={tool.id}
           onClick={() => {
-            annotationApi?.activateTool(tool.id === activeToolId ? null : tool.id)
+            annoCapability?.activateTool(tool.id === annoState?.activeToolId ? null : tool.id)
           }}
           className={`rounded-md px-3 py-1 text-sm font-medium transition-colors ${
-            tool.id === activeToolId ? "bg-blue-500 text-white" : "bg-gray-100 hover:bg-gray-200"
+            tool.id === annoState?.activeToolId
+              ? "bg-blue-500 text-white"
+              : "bg-gray-100 hover:bg-gray-200"
           }`}
           title={tool.id}
         >
@@ -55,16 +51,16 @@ const Toolbar = () => {
       <div className="h-6 w-px bg-gray-200" />
 
       <button
-        onClick={() => zoom?.zoomOut()}
-        disabled={!zoom}
+        onClick={() => zoomCapability?.zoomOut()}
+        disabled={!zoomCapability}
         className="rounded-md bg-gray-500 px-3 py-1 text-sm font-medium text-white transition-colors hover:bg-gray-600 disabled:cursor-not-allowed disabled:bg-gray-300"
         title="Zoom out"
       >
         <ZoomOut size={18} />
       </button>
       <button
-        onClick={() => zoom?.zoomIn()}
-        disabled={!zoom}
+        onClick={() => zoomCapability?.zoomIn()}
+        disabled={!zoomCapability}
         className="rounded-md bg-gray-500 px-3 py-1 text-sm font-medium text-white transition-colors hover:bg-gray-600 disabled:cursor-not-allowed disabled:bg-gray-300"
         title="Zoom in"
       >
@@ -74,16 +70,16 @@ const Toolbar = () => {
       <div className="h-6 w-px bg-gray-200" />
 
       <button
-        onClick={() => annotationApi?.undo()}
-        disabled={!canUndo}
+        onClick={() => annoCapability?.undo()}
+        disabled={!annoState?.canUndo}
         className="rounded-md bg-gray-100 px-3 py-1 text-sm font-medium transition-colors hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50"
         title="Undo"
       >
         <Undo2 size={18} />
       </button>
       <button
-        onClick={() => annotationApi?.redo()}
-        disabled={!canRedo}
+        onClick={() => annoCapability?.redo()}
+        disabled={!annoState?.canRedo}
         className="rounded-md bg-gray-100 px-3 py-1 text-sm font-medium transition-colors hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50"
         title="Redo"
       >
@@ -93,23 +89,23 @@ const Toolbar = () => {
       <div className="h-6 w-px bg-gray-200" />
 
       <button
-        onClick={() => annotationApi?.exportAnnotationsToJSON?.()}
+        onClick={() => annoCapability?.exportAnnotationsToJSON?.()}
         className="rounded-md bg-blue-500 px-3 py-1 text-sm font-medium text-white transition-colors hover:bg-blue-600"
         title="Export Annotations to JSON"
       >
         Export JSON
       </button>
       <button
-        onClick={() => exportApi?.download()}
-        disabled={!exportApi}
+        onClick={() => exportCapability?.download()}
+        disabled={!exportCapability}
         className="rounded-md bg-green-500 px-3 py-1 text-sm font-medium text-white transition-colors hover:bg-green-600 disabled:cursor-not-allowed disabled:bg-green-300"
         title="Download Annotated PDF"
       >
         <Download size={18} />
       </button>
       <button
         onClick={handleDelete}
-        disabled={!selectedUid}
+        disabled={!annoState?.selectedUid}
         className="rounded-md bg-red-500 px-3 py-1 text-sm font-medium text-white transition-colors hover:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-300"
         title="Delete Selected Annotation"
       >

components/pdf-container/pdf-container.tsx

@@ -0,0 +1,40 @@
+import usePluginStore from "@/components/plugin-store/hooks/use-plugin-store"
+import { useScrollCapability } from "@embedpdf/plugin-scroll/react"
+import { useEffect } from "react"
+import { useAnnotationCapability } from "../../pdf-container/plugin-annotation-2"
+import { useSelectionCapability } from "../../pdf-container/plugin-selection-2"
+
+const PluginStoreSync = () => {
+  const { provides: annoCapability } = useAnnotationCapability()
+  const { provides: selectCapability } = useSelectionCapability()
+  const { provides: scrollCapability } = useScrollCapability()
+
+  useEffect(() => {
+    if (!annoCapability || !selectCapability || !scrollCapability) return
+
+    const store = usePluginStore.getState()
+
+    // initialize capabilities (which are static)
+    store.setAnnoCapability(annoCapability)
+    store.setSelectCapability(selectCapability)
+    store.setScrollCapability(scrollCapability)
+
+    // sync store with changes
+    const syncState = annoCapability.onStateChange((state) => {
+      store.setAnnoState(state)
+    })
+
+    return () => {
+      syncState()
+      // clear capabilities when unmounting
+      store.setAnnoCapability(null)
+      store.setAnnoState(null)
+      store.setSelectCapability(null)
+      store.setScrollCapability(null)
+    }
+  }, [annoCapability, selectCapability, scrollCapability])
+
+  return null
+}
+
+export default PluginStoreSync