diff --git a/examples/advanced/grading-papers-comments-annotations/package.json b/examples/advanced/grading-papers-comments-annotations/package.json index e11d3c67b..f3c9b0150 100644 --- a/examples/advanced/grading-papers-comments-annotations/package.json +++ b/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", diff --git a/examples/advanced/grading-papers-comments-annotations/src/App.jsx b/examples/advanced/grading-papers-comments-annotations/src/App.jsx index 9542114e0..72a4693a2 100644 --- a/examples/advanced/grading-papers-comments-annotations/src/App.jsx +++ b/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 = () => {

Document Viewer

- {whiteboardReady && ( + {whiteboardInitialized && (
{toolButtons.map((tool) => ( diff --git a/packages/superdoc/src/core/SuperDoc.js b/packages/superdoc/src/core/SuperDoc.js index 21ef32cbf..a20c8d872 100644 --- a/packages/superdoc/src/core/SuperDoc.js +++ b/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 }); } /** diff --git a/packages/superdoc/src/core/whiteboard/README.md b/packages/superdoc/src/core/whiteboard/README.md index 5b7544fe7..6e6b1db5e 100644 --- a/packages/superdoc/src/core/whiteboard/README.md +++ b/packages/superdoc/src/core/whiteboard/README.md @@ -14,14 +14,12 @@ 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 @@ -29,15 +27,21 @@ const superdoc = new SuperDoc({ 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 @@ -45,6 +49,7 @@ 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 }, },