Add PDF previews using react pdf

components/core/SlateMediaObject.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Document, Page } from "react-pdf";
 import * as Constants from "~/common/constants";
 import * as Validations from "~/common/validations";
 
@@ -55,7 +56,18 @@ const typeMap = {
 };
 
 export default class SlateMediaObject extends React.Component {
+  state = {
+    numPages: 0,
+  }
+
+  onDocumentLoadSuccess({ numPages }) {
+    this.setState({
+      numPages
+    })
+  }
+
   render() {
+    const { numPages } = this.state;
     const url = this.props.data.url;
     const type = this.props.data.type ? this.props.data.type : "LEGACY_NO_TYPE";
     const playType = typeMap[type] ? typeMap[type] : type;
@@ -64,16 +76,28 @@ export default class SlateMediaObject extends React.Component {
 
     if (type.startsWith("application/pdf")) {
       return (
-        <object
-          css={STYLES_OBJECT}
-          style={{ width: "calc(100% - 64px)" }}
-          data={url}
-          type={type}
+        <div css={STYLES_ASSET} style={{ width: "calc(100% - 64px)" }>
+          <Document
+            file={url}
             key={url}
+            onLoadSuccess={this.onDocumentLoadSuccess}
             onClick={(e) => {
               e.stopPropagation();
             }}
+          >
+            {
+              Array.from(
+                new Array(numPages),
+                (el, index) => (
+                  <Page
+                    key={`page_${index + 1}`}
+                    pageNumber={index + 1}
                   />
+                ),
+              )
+            }
+          </Document>
+        </div>
       );
     }
 

package.json

@@ -53,6 +53,7 @@
     "react-blurhash": "github:zeroxme/react-blurhash#master",
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",
+    "react-pdf": "^5.1.0",
     "remark-emoji": "^2.1.0",
     "remark-gfm": "^1.0.0",
     "remark-linkify-regex": "^1.0.0",