fix: remove react-pdf

components/core/SlateMediaObject.js

@@ -3,7 +3,6 @@ import * as Constants from "~/common/constants";
 import * as Validations from "~/common/validations";
 
 import UnityFrame from "~/components/core/UnityFrame";
-import PDFViewer from "~/components/system/components/PDFViewer";
 
 import { css } from "@emotion/react";
 
@@ -65,10 +64,12 @@ export default class SlateMediaObject extends React.Component {
 
     if (type.startsWith("application/pdf")) {
       return (
-        <PDFViewer
-          file={url}
-          key={url}
+        <object
+          css={STYLES_OBJECT}
           style={{ width: "calc(100% - 64px)" }}
+          data={url}
+          type={type}
+          key={url}
           onClick={(e) => {
             e.stopPropagation();
           }}

components/system/SystemPage.js

@@ -190,7 +190,6 @@ export default class SystemPage extends React.Component {
           <SidebarLink url={url} href="/_/system/toggles" title="Toggles" />
           <SidebarLink url={url} href="/_/system/tooltips" title="Tooltips" />
           <SidebarLink url={url} href="/_/system/typography" title="Typography" />
-          <SidebarLink url={url} href="/_/system/pdf-viewer" title="Pdf Viewer" />
 
           <div
             css={STYLES_SMALL_LINK}

components/system/components/PDFViewer.js

@@ -1,57 +0,0 @@
-import * as React from "react";
-import { Document, Page, pdfjs } from "react-pdf";
-
-import { css } from "@emotion/react";
-
-pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
-
-const STYLES_DOCUMENT = css`
-  display: grid;
-  place-items: center;
-  margin: 0;
-  padding: 20px 0 0;
-  width: 100%;
-  min-height: 10%;
-  height: 100%;
-  user-select: none;
-  overflow-y: scroll;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  ::-webkit-scrollbar {
-    display: none;
-  }
-`;
-
-const STYLES_PAGE = css`
-  margin-bottom: 20px;
-`;
-
-export default class PDFViewer extends React.Component {
-  state = {
-    numPages: 0,
-  };
-
-  onDocumentLoadSuccess({ numPages }) {
-    this.setState({
-      numPages,
-    });
-  }
-
-  render() {
-    const { numPages } = this.state;
-
-    return (
-      <Document
-        file={this.props.file}
-        onLoadSuccess={this.onDocumentLoadSuccess.bind(this)}
-        {...this.props}
-        css={STYLES_DOCUMENT}
-      >
-        {Array.from(new Array(numPages), (el, index) => (
-          <Page key={`page_${index + 1}`} pageNumber={index + 1} css={STYLES_PAGE} />
-        ))}
-      </Document>
-    );
-  }
-}

components/system/index.js

@@ -62,7 +62,6 @@ import { Table } from "~/components/system/components/Table";
 import { Textarea } from "~/components/system/components/Textarea";
 import { Toggle } from "~/components/system/components/Toggle";
 import { H1, H2, H3, H4, P, UL, OL, LI } from "~/components/system/components/Typography";
-import PDFViewer from "~/components/system/components/PDFViewer";
 
 // NOTE(jim): Fragments
 import { Boundary } from "~/components/system/components/fragments/Boundary";
@@ -141,7 +140,6 @@ export {
   UL,
   OL,
   LI,
-  PDFViewer,
   // NOTE(jim): Fragments, not meant to be used.
   Boundary,
   DescriptionGroup,

package.json

@@ -53,7 +53,6 @@
     "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",

pages/_/system/pdf-viewer.js

@@ -1,55 +0,0 @@
-import * as React from "react";
-import * as System from "~/components/system";
-
-import SystemPage from "~/components/system/SystemPage";
-import CodeBlock from "~/components/system/CodeBlock";
-
-export default class SystemPDFViewer extends React.Component {
-  render() {
-    return (
-      <SystemPage
-        title="SDS: Pdf Viewer"
-        description="..."
-        url="https://slate.host/_/system/pdf-viewer"
-      >
-        <System.H1>PDF Viewer</System.H1>
-        <br />
-        <br />
-        <System.P>
-          The PDFViewer component is a way to render PDF files consistently across browsers.
-        </System.P>
-        <br />
-        <br />
-        <br />
-        <System.H2>Imports</System.H2>
-        <hr />
-        <br />
-        <System.P>Import React and the PDFViewer Component.</System.P>
-        <br />
-        <br />
-        <CodeBlock>
-          {`import * as React from "react"; 
-import PDFViewer from "~/components/system/components/PDFViewer";`}
-        </CodeBlock>
-        <br />
-        <br />
-        <System.H2>Usage</System.H2>
-        <hr />
-        <br />
-        <System.P>
-          Declare the PDFViewer component and pass the url of the PDF file to the PDFViewer
-          component as file prop.
-        </System.P>
-        <br />
-        <CodeBlock>{`<PDFViewer file={url} />`}</CodeBlock>
-
-        <br />
-        <br />
-        <System.H2>Output</System.H2>
-        <hr />
-        <br />
-        <System.PDFViewer file="https://slate.textile.io/ipfs/bafybeibyeaznm4iaungi6cfxpy75mnkpn64c3zw2kgq7qkpvecvqlrpw6u" />
-      </SystemPage>
-    );
-  }
-}