src/hooks/useScale.tsx

@@ -1,29 +1,12 @@
 import { useEffect, useState } from 'react'
 import { singletonHook } from 'react-singleton-hook'
+import { getInnerContentWidth } from '../utils/pdf'
 
 const noScaleInit = {
   to: (_: number, v: number) => v,
   from: (_: number, v: number) => v
 }
 
-const getInnerContentWidth = () => {
-  // Fetch the first container element we find
-  const element = document.querySelector('#content-preview')
-
-  if (element) {
-    const style = getComputedStyle(element)
-
-    // Calculate width without padding
-    const widthWithoutPadding =
-      element.clientWidth - parseFloat(style.padding) * 2
-
-    return widthWithoutPadding
-  }
-
-  // Default value
-  return 620
-}
-
 const useScaleImpl = () => {
   const [width, setWidth] = useState(getInnerContentWidth())
 

src/utils/pdf.ts

@@ -60,6 +60,24 @@ export const readPdf = (file: File): Promise<string | ArrayBuffer> => {
   })
 }
 
+export const getInnerContentWidth = () => {
+  // Fetch the first container element we find
+  const element = document.querySelector('#content-preview')
+
+  if (element) {
+    const style = getComputedStyle(element)
+
+    // Calculate width without padding
+    const widthWithoutPadding =
+      element.clientWidth - parseFloat(style.padding) * 2
+
+    return widthWithoutPadding
+  }
+
+  // Default value
+  return 620
+}
+
 /**
  * Converts pdf to the images
  * @param data pdf file bytes
@@ -70,7 +88,7 @@ export const pdfToImages = async (
   const pages: PdfPage[] = []
   const pdf = await PDFJS.getDocument(data).promise
   const canvas = document.createElement('canvas')
-  const width = document.querySelector('#content-preview > *')?.clientWidth || 1
+  const width = getInnerContentWidth()
 
   for (let i = 0; i < pdf.numPages; i++) {
     const page = await pdf.getPage(i + 1)