fix(internal): remove pdfjs from build (#843)

* fix(internal): remove pdfjs from build

Author: artem-harbour

package-lock.json

@@ -64,7 +64,7 @@
   },
   "peerDependencies": {
     "@hocuspocus/provider": "^2.13.6",
-    "pdfjs-dist": "4.3.136",
+    "pdfjs-dist": ">=4.3.136 <=4.6.82",
     "y-prosemirror": "^1.2.12",
     "yjs": "13.6.19"
   },
@@ -77,6 +77,7 @@
     "pdfjs-dist": "4.3.136",
     "postcss-nested": "^6.0.1",
     "postcss-nested-import": "^1.3.0",
+    "postcss-prefixwrap": "^1.56.2",
     "typescript": "^5.7.3",
     "vite": "^6.3.5",
     "vitest": "^3.2.4",

packages/superdoc/package.json

@@ -1,6 +1,15 @@
+// packages/superdoc/src/components/PdfViewer/PdfViewer.vue
+const PDF_VIEWER_CLASS = '.superdoc-pdf-viewer';
+
 module.exports = {
   plugins: [
     require('postcss-nested'),
-    require('postcss-nested-import'),
+    // https://github.com/dbtedman/postcss-prefixwrap
+    // This is necessary for pdf.js style scoping.
+    require('postcss-prefixwrap')(PDF_VIEWER_CLASS, {
+      whitelist: ['pdf-viewer.css'],
+      ignoredSelectors: [],
+      prefixRootTags: false,
+    }),
   ]
 }

packages/superdoc/postcss.config.cjs

@@ -13,11 +13,11 @@ import {
   computed,
   reactive,
   watch,
+  defineAsyncComponent,
 } from 'vue';
 import { NMessageProvider } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 
-import PdfViewer from './components/PdfViewer/PdfViewer.vue';
 import CommentsLayer from './components/CommentsLayer/CommentsLayer.vue';
 import CommentDialog from '@superdoc/components/CommentsLayer/CommentDialog.vue';
 import FloatingComments from '@superdoc/components/CommentsLayer/FloatingComments.vue';
@@ -35,6 +35,9 @@ import AiLayer from './components/AiLayer/AiLayer.vue';
 import { useSelectedText } from './composables/use-selected-text';
 import { useAi } from './composables/use-ai';
 import { useHighContrastMode } from './composables/use-high-contrast-mode';
+
+const PdfViewer = defineAsyncComponent(() => import('./components/PdfViewer/PdfViewer.vue'));
+
 // Stores
 const superdocStore = useSuperdocStore();
 const commentsStore = useCommentsStore();
@@ -104,6 +107,8 @@ const {
 // Hrbr Fields
 const hrbrFieldsLayer = ref(null);
 
+const pdfConfig = proxy.$superdoc.config.modules?.pdf || {};
+
 const handleDocumentReady = (documentId, container) => {
   const doc = getDocument(documentId);
   doc.isReady = true;
@@ -622,6 +627,7 @@ watch(getFloatingComments, () => {
           <PdfViewer
             v-if="doc.type === PDF"
             :document-data="doc"
+            :config="pdfConfig"
             @selection-change="handleSelectionChange"
             @ready="handleDocumentReady"
             @page-loaded="handlePageReady"