chore: update grading papers demo

examples/advanced/grading-papers-comments-annotations/package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "pdfjs-dist": "4.3.136",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "superdoc": "../../../packages/superdoc"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.0.4",

examples/advanced/grading-papers-comments-annotations/src/App.jsx

@@ -1,13 +1,15 @@
-import '@harbour-enterprises/superdoc/style.css';
+import 'superdoc/style.css';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Header from './components/Header.jsx';
 import AssignmentHeader from './components/AssignmentHeader.jsx';
 import Drawer from './components/Drawer.jsx';
-import { SuperDoc } from '@harbour-enterprises/superdoc';
+import { SuperDoc } from 'superdoc';
 import NickPDF from '/nick.pdf?url';
 import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs';
 import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer.mjs';
 
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url,).toString();
+
 const defaultWhiteboardOpacity = 1;
 const disabledWhiteboardOpacity = 0.5;
 
@@ -16,7 +18,7 @@ const App = () => {
   const docFileRef = useRef(null);
 
   // UI state only (do not store SuperDoc instance in state).
-  const [whiteboardReady, setWhiteboardReady] = useState(false);
+  const [whiteboardInitialized, setWhiteboardInit] = useState(false);
   const [whiteboardEnabled, setWhiteboardEnabled] = useState(true);
   const [activeTool, setActiveTool] = useState('select');
 
@@ -51,15 +53,15 @@ const App = () => {
     const superdoc = superdocRef.current;
     if (!superdoc) return;
     superdoc.on('whiteboard:change', (data) => {
-      console.log('whiteboard:change', { data });
+      console.log('whiteboard:change', data);
     });
     superdoc.on('whiteboard:tool', (tool) => {
       setActiveTool(tool);
     });
   }, []);
 
-  const onWhiteboardReady = useCallback((whiteboard) => {
-    setWhiteboardReady(true);
+  const onWhiteboardInit = useCallback((whiteboard) => {
+    setWhiteboardInit(true);
     setActiveTool(whiteboard?.getTool?.() ?? 'select');
     registerStickers();
     registerComments();
@@ -94,7 +96,8 @@ const App = () => {
         pdf: {
           pdfLib: pdfjsLib,
           pdfViewer: pdfjsViewer,
-          setWorker: true,
+          setWorker: false,
+          // workerSrc: '',
           textLayerMode: 0,
         },
         whiteboard: {
@@ -113,10 +116,10 @@ const App = () => {
     superdocRef.current = superdocInstance;
     window.superdoc = superdocInstance;
 
-    superdocInstance.on('whiteboard:ready', ({ whiteboard }) => {
-      onWhiteboardReady(whiteboard);
+    superdocInstance.on('whiteboard:init', ({ whiteboard }) => {
+      onWhiteboardInit(whiteboard);
     });
-  }, [onWhiteboardReady]);
+  }, [onWhiteboardInit]);
 
   // Load selected file and boot SuperDoc.
   const handleNewFile = useCallback(async (fileName) => {
@@ -163,7 +166,7 @@ const App = () => {
   const exportWhiteboard = useCallback(() => {
     const data = superdocRef.current?.whiteboard?.getWhiteboardData();
     if (!data) return;
-    console.log('[Whiteboard] export', { data });
+    console.log('[Whiteboard] export', data);
     console.log('[Whiteboard] export json:', JSON.stringify(data, null, 2));
   }, []);
 
@@ -202,7 +205,7 @@ const App = () => {
               <div className="document-viewer">
                 <div className="viewer-header">
                   <h3>Document Viewer</h3>
-                  {whiteboardReady && (
+                  {whiteboardInitialized && (
                     <div className="whiteboard-toolbar">
                       <div className="whiteboard-tools">
                         {toolButtons.map((tool) => (

packages/superdoc/src/core/SuperDoc.js

@@ -289,7 +289,7 @@ export class SuperDoc extends EventEmitter {
       superdoc: this,
       enabled,
     });
-    this.emit('whiteboard:ready', { whiteboard: this.whiteboard });
+    this.emit('whiteboard:init', { whiteboard: this.whiteboard });
   }
 
   /**

packages/superdoc/src/core/whiteboard/README.md

@@ -14,37 +14,42 @@ const superdoc = new SuperDoc({
   // ...
   modules: {
     whiteboard: {
-      enabled: true,
+      enabled: true, // shows the whiteboard layer by default
     },
   },
 });
 ```
 
-`enabled: true` shows the whiteboard layer by default.
-
 ---
 
 ## Public API
 
 All APIs are exposed via `superdoc.whiteboard`.
 
 ### register(type, items)
+
 Register palette items (e.g. stickers, comments).
 
 ```js
 superdoc.whiteboard.register('stickers', [
   { id: 'check-mark', label: 'Check', src: '/stickers/check-mark.svg', width: 100, height: 83 },
 ]);
+
+superdoc.whiteboard.register('comments', [
+  { id: 'great-job', text: 'Great job!' },
+]);
 ```
 
 ### getType(type)
+
 Returns the registered items for a given type.
 
 ```js
 const stickers = superdoc.whiteboard.getType('stickers');
 ```
 
 ### getWhiteboardData()
+
 Returns JSON for all pages (strokes/text/images).
 
 ```js
@@ -59,19 +64,19 @@ superdoc.whiteboard.setWhiteboardData(saved);
 ```
 
 ### Events
-`whiteboard:change` fires on any change.\
-`whiteboard:tool` fires when the active tool changes.\
-`whiteboard:enabled` fires when interactivity is toggled.
 
 ```js
+// fires on any change
 superdoc.on('whiteboard:change', (data) => {
   console.log(data);
 });
 
+// fires when the active tool changes
 superdoc.on('whiteboard:tool', (tool) => {
   console.log(tool);
 });
 
+// fires when interactivity is toggled
 superdoc.on('whiteboard:enabled', (enabled) => {
   console.log(enabled);
 });
@@ -113,23 +118,26 @@ Install a compatible pdfjs-dist version:
 npm install pdfjs-dist@4.3.136
 ```
 
-Supported range: `>=4.3.136 <=4.6.82`  
+Supported range now: `>=4.3.136 <=4.6.82`  
 Recommended: `4.3.136` (more tested in our flows).
 
 Example configuration:
 
 ```js
-import { SuperDoc } from '@harbour-enterprises/superdoc';
+import { SuperDoc } from 'superdoc';
 import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs';
 import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer.mjs';
 
+// Example of global worker registration
+// pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url,).toString();
+
 const config = {
   modules: {
     pdf: {
       pdfLib: pdfjsLib,
       pdfViewer: pdfjsViewer,
-      setWorker: true, // or set to 'false' and register the worker globally outside the component.
-      workerSrc: pathToWorker, // If omitted, it will fall back to the CDN worker.
+      setWorker: true, // or set to 'false' and register the worker globally outside the component
+      workerSrc: pathToWorker, // If omitted, it will fall back to the CDN worker
       textLayerMode: 0, // 0 or 1
     },
   },