switch to simple pdf embed

src/main/frontend/extensions/tldraw.cljs

@@ -114,6 +114,7 @@
    :isMobile util/mobile?
    :saveAsset save-asset-handler
    :makeAssetUrl editor-handler/make-asset-url
+   :inflateAsset (fn [src] (clj->js (pdf-assets/inflate-asset src)))
    :setCurrentPdf (fn [src] (state/set-current-pdf! (if src (pdf-assets/inflate-asset src) nil)))
    :copyToClipboard (fn [text, html] (util/copy-to-clipboard! text :html html))
    :getRedirectPageName (fn [page-name-or-uuid] (model/get-redirect-page-name page-name-or-uuid))

tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts

@@ -61,6 +61,7 @@ export interface LogseqContextValue {
     isMobile: () => boolean
     saveAsset: (file: File) => Promise<string>
     makeAssetUrl: (relativeUrl: string | null) => string
+    inflateAsset: (src: string) => object
     setCurrentPdf: (src: string | null) => void
     sidebarAddBlock: (uuid: string, type: 'block' | 'page') => void
     redirectToPage: (uuidOrPageName: string) => void

tldraw/apps/tldraw-logseq/src/lib/shapes/PdfShape.tsx

@@ -20,7 +20,7 @@ export class PdfShape extends TLBoxShape<PdfShapeProps> {
     type: 'pdf',
     parentId: 'page',
     point: [0, 0],
-    size: [853, 480],
+    size: [595, 842],
     assetId: '',
   }
 
@@ -28,7 +28,7 @@ export class PdfShape extends TLBoxShape<PdfShapeProps> {
   canFlip = true
   canEdit = true
 
-  ReactComponent = observer(({ events, asset, isErasing, isEditing, isSelected }: TLComponentProps) => {
+  ReactComponent = observer(({ events, asset, isErasing, isEditing }: TLComponentProps) => {
     const ref = React.useRef<HTMLElement>(null)
     const {
       renderers: { Pdf },
@@ -38,12 +38,6 @@ export class PdfShape extends TLBoxShape<PdfShapeProps> {
 
     const isMoving = useCameraMovingRef()
 
-    React.useEffect(() => {
-      if (asset && isEditing) {
-        // handlers.setCurrentPdf(handlers.makeAssetUrl(asset.src))
-      }
-    }, [isEditing])
-
     return (
       <HTMLContainer
         style={{
@@ -53,21 +47,20 @@ export class PdfShape extends TLBoxShape<PdfShapeProps> {
         }}
         {...events}
       >
-        <div
-        className="relative tl-pdf-container"
-          onWheelCapture={stop}
-          onPointerDown={stop}
-          onPointerUp={stop}
-          style={{
-            width: '100%',
-            height: '100%',
-            pointerEvents: !isMoving && (isEditing || isSelected) ? 'all' : 'none',
-          }}
-        >
-          {asset ? (
-            <Pdf src={handlers ? handlers.makeAssetUrl(asset.src) : asset.src} />
-          ) : null}
-        </div>
+        {asset ? (
+          <embed
+            src={handlers ? handlers.inflateAsset(asset.src).url : asset.src + '#toolbar=0&navpanes=0&scrollbar=0'}
+            className="relative tl-pdf-container hide-scrollbar"
+            onWheelCapture={stop}
+            onPointerDown={stop}
+            onPointerUp={stop}
+            style={{
+              width: '100%',
+              height: '100%',
+              pointerEvents: !isMoving && isEditing ? 'all' : 'none',
+            }}
+          />
+        ) : null}
       </HTMLContainer>
     )
   })

tldraw/apps/tldraw-logseq/src/styles.css

@@ -1187,15 +1187,3 @@ button.tl-shape-links-panel-item-remove-button {
     opacity: 1;
   }
 }
-
-.tl-pdf-container {
-  .extensions__pdf-container {
-    position: static !important;
-    width: 100% !important;
-    height: 100% !important;
-  }
-
-  .extensions__pdf-header {
-    display: none;
-  }
-}