From fd3e79dc832b687a42f8215f6bf402d7ec73be0e Mon Sep 17 00:00:00 2001
From: Matthew Mogford <69457935+mattmogford-alcumus@users.noreply.github.com>
Date: Fri, 25 Sep 2020 16:35:43 +0100
Subject: [PATCH] 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 | 4 ++++
src/index.tsx | 2 ++
src/plugins/html/index.tsx | 49 ++++++++++++++++++++++++++++++++++++++
src/plugins/index.ts | 2 ++
src/plugins/msg/index.tsx | 35 ++++++++++++++++++++++-----
5 files changed, 86 insertions(+), 6 deletions(-)
create mode 100644 src/plugins/html/index.tsx
diff --git a/README.md b/README.md
index 3941dec..d34434c 100644
--- a/README.md
+++ b/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 | `✓` |
diff --git a/src/index.tsx b/src/index.tsx
index a3bc225..4e6f445 100644
--- a/src/index.tsx
+++ b/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,
diff --git a/src/plugins/html/index.tsx b/src/plugins/html/index.tsx
new file mode 100644
index 0000000..1da2a87
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+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};
+`;
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index 3eb4852..f49a300 100644
--- a/src/plugins/index.ts
+++ b/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,
diff --git a/src/plugins/msg/index.tsx b/src/plugins/msg/index.tsx
index 4f5f31b..65c2896 100644
--- a/src/plugins/msg/index.tsx
+++ b/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,
+ "
"
+ );
+
+ iframeDoc.open();
+ iframeDoc.write(`${body}`);
+ iframeDoc.close();
+ }, [fileData]);
+
if (!fileData || fileData.hasOwnProperty("error")) {
return {(fileData as MSGErrorResult)?.error};
}
@@ -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, "
");
-
return (
- {subject}
+
+ {subject}
+
@@ -48,7 +68,7 @@ const MSGRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
-
+
);
};
@@ -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};