Develop (#42)

* docs: README - styled component example is missing a closing bracket after DocViewer
Fixes #31

* feat: Internal ImageProxyRenderer created, that can be used by all other Image renderers, and styled by them

* feat: BMP Image renderer added

* Create TIFF renderer
Fixes #33

* MSGRenderer - Use safe iframe for msg content display (#39)

* docs: README - styled component example is missing a closing bracket after DocViewer
Fixes #31

* feat: Internal ImageProxyRenderer created, that can be used by all other Image renderers, and styled by them

* feat: BMP Image renderer added

* Create TIFF renderer
Fixes #33

* updated CHANGELOG.md

* 0.0.40

* MSGRenderer - Use safe iframe for msg content display
Fixes #38

* Create HTMLRenderer
Fixes #40

README.md

@@ -28,14 +28,18 @@
 
 | Extension | MIME Type                                                                          | Available |
 | --------- | ---------------------------------------------------------------------------------- | --------- |
+| bmp       | image/bmp                                                                          | `✓`       |
 | doc       | application/msword                                                                 | `✓`       |
 | docx      | application/vnd.openxmlformats-officedocument.wordprocessingml.document            | `✓`       |
+| htm       | text/htm                                                                           | `✓`       |
+| html      | text/html                                                                          | `✓`       |
 | jpg       | image/jpg                                                                          | `✓`       |
 | jpeg      | image/jpeg                                                                         | `✓`       |
 | pdf       | application/pdf                                                                    | `✓`       |
 | png       | image/png                                                                          | `✓`       |
 | ppt       | application/vnd.ms-powerpoint                                                      | `✓`       |
 | pptx      | applicatiapplication/vnd.openxmlformats-officedocument.presentationml.presentation | `✓`       |
+| tiff      | image/tiff                                                                         | `✓`       |
 | xls       | application/vnd.ms-excel                                                           | `✓`       |
 | xlsx      | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet                  | `✓`       |
 

src/index.tsx

@@ -3,6 +3,7 @@ import styled, { ThemeProvider } from "styled-components";
 import { HeaderBar } from "./components/HeaderBar";
 import { ProxyRenderer } from "./components/ProxyRenderer";
 import BMPRenderer from "./plugins/bmp";
+import HTMLRenderer from "./plugins/html";
 import ImageProxyRenderer from "./plugins/image";
 import JPGRenderer from "./plugins/jpg";
 import MSDocRenderer from "./plugins/msdoc";
@@ -68,6 +69,7 @@ export { DocViewerRenderers } from "./plugins";
 export * from "./types";
 export {
   BMPRenderer,
+  HTMLRenderer,
   ImageProxyRenderer,
   JPGRenderer,
   MSDocRenderer,

src/plugins/html/index.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect } from "react";
+import styled from "styled-components";
+import { DocRenderer, IStyledProps } from "../../types";
+import { base64FileLoader } from "../../utils/fileLoaders";
+
+const HTMLRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
+  useEffect(() => {
+    const bodyBase64 =
+      currentDocument?.base64Data?.replace("data:text/html;base64,", "") || "";
+    const body: string = window.atob(bodyBase64);
+
+    let iframeCont = document.getElementById(
+      "html-body"
+    ) as HTMLIFrameElement | null;
+    let iframe = iframeCont?.contentWindow && iframeCont.contentWindow;
+    if (!iframe) return;
+
+    const iframeDoc = iframe.document;
+    iframeDoc.open();
+    iframeDoc.write(`${body}`);
+    iframeDoc.close();
+  }, []);
+
+  return (
+    <Container id="html-renderer">
+      <BodyIFrame id="html-body" sandbox="allow-same-origin" />
+    </Container>
+  );
+};
+
+export default HTMLRenderer;
+
+HTMLRenderer.fileTypes = ["htm", "html", "text/htm", "text/html"];
+HTMLRenderer.weight = 0;
+HTMLRenderer.fileLoader = base64FileLoader;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0 30px;
+`;
+
+const BodyIFrame = styled.iframe`
+  height: 100%;
+  padding: 15px;
+  margin: 20px 0 20px 0;
+  border: 1px solid ${(props: IStyledProps) => props.theme.secondary};
+`;

src/plugins/index.ts

@@ -1,4 +1,5 @@
 import BMPRenderer from "./bmp";
+import HTMLRenderer from "./html";
 import JPGRenderer from "./jpg";
 import MSDocRenderer from "./msdoc";
 import MSGRenderer from "./msg";
@@ -8,6 +9,7 @@ import TIFFRenderer from "./tiff";
 
 export const DocViewerRenderers = [
   BMPRenderer,
+  HTMLRenderer,
   JPGRenderer,
   MSDocRenderer,
   MSGRenderer,

src/plugins/msg/index.tsx

@@ -14,6 +14,27 @@ const MSGRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
     setFileData(_fd);
   }, [currentDocument?.arrayBuffer]);
 
+  useEffect(() => {
+    if (!fileData || fileData.hasOwnProperty("error")) return;
+
+    let iframeCont = document.getElementById(
+      "msg-body"
+    ) as HTMLIFrameElement | null;
+    let iframe = iframeCont?.contentWindow && iframeCont.contentWindow;
+    if (!iframe) return;
+
+    const iframeDoc = iframe.document;
+
+    let body = (fileData as MSGFileData).body.replace(
+      /(\r\n|\n|\r)/gm,
+      "<br />"
+    );
+
+    iframeDoc.open();
+    iframeDoc.write(`${body}`);
+    iframeDoc.close();
+  }, [fileData]);
+
   if (!fileData || fileData.hasOwnProperty("error")) {
     return <span>{(fileData as MSGErrorResult)?.error}</span>;
   }
@@ -21,16 +42,15 @@ const MSGRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
   let {
     recipients,
     subject,
-    body,
     senderEmail,
     senderName,
   } = fileData as MSGFileData;
 
-  body = body.replace(/(\r\n|\n|\r)/gm, "<br />");
-
   return (
     <Container id="msg-renderer">
-      <h2 id="msg-subject-title">{subject}</h2>
+      <h2 id="msg-subject-title" style={{ marginBottom: 0 }}>
+        {subject}
+      </h2>
 
       <Sender name={senderName} email={senderEmail} />
 
@@ -48,7 +68,7 @@ const MSGRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
         </ul>
       </RecipientContainer>
 
-      <BodyContainer id="msg-body" dangerouslySetInnerHTML={{ __html: body }} />
+      <BodyIFrame id="msg-body" sandbox="allow-same-origin" />
     </Container>
   );
 };
@@ -72,6 +92,8 @@ MSGRenderer.weight = 0;
 MSGRenderer.fileLoader = arrayBufferFileLoader;
 
 const Container = styled.div`
+  display: flex;
+  flex-direction: column;
   width: 100%;
   padding: 0 30px;
 `;
@@ -88,7 +110,8 @@ const RecipientContainer = styled.div`
   border: 1px solid ${(props: IStyledProps) => props.theme.secondary};
 `;
 
-const BodyContainer = styled.div`
+const BodyIFrame = styled.iframe`
+  height: 100%;
   padding: 15px;
   margin: 20px 0 20px 0;
   border: 1px solid ${(props: IStyledProps) => props.theme.secondary};