chore(docviewer): cleanup mammoth js

Author: gjulivan

packages/pluggableWidgets/document-viewer-web/components/DocxViewer.tsx

@@ -1,54 +1,9 @@
-import { createElement, Fragment, useCallback, useEffect, useState } from "react";
-import mammoth from "mammoth";
-import { DocumentViewerContainerProps } from "typings/DocumentViewerProps";
+import { createElement, Fragment } from "react";
+import { DocumentViewerContainerProps } from "../typings/DocumentViewerProps";
 import { DocRendererElement } from "./documentRenderer";
 
-const DocxViewer: DocRendererElement = (props: DocumentViewerContainerProps) => {
-    const { file } = props;
-    const [docxHtml, setDocxHtml] = useState<string | null>(null);
-
-    const loadContent = useCallback(async (arrayBuffer: any) => {
-        try {
-            mammoth
-                .convertToHtml(
-                    { arrayBuffer: arrayBuffer },
-                    {
-                        includeDefaultStyleMap: true
-                    }
-                )
-                .then(result => {
-                    if (result) {
-                        setDocxHtml(result.value);
-                    }
-                });
-        } catch (error) {}
-    }, []);
-
-    useEffect(() => {
-        const controller = new AbortController();
-        const { signal } = controller;
-        if (file.status === "available" && file.value.uri) {
-            fetch(file.value.uri, { method: "GET", signal })
-                .then(res => res.arrayBuffer())
-                .then(response => {
-                    loadContent(response);
-                });
-        }
-
-        return () => {
-            controller.abort();
-        };
-    }, [file, file?.status, file?.value?.uri]);
-
-    return (
-        <Fragment>
-            {docxHtml && (
-                <div className="widget-document-viewer-content" dangerouslySetInnerHTML={{ __html: docxHtml }}>
-                    {/* {docHtmlStr} */}
-                </div>
-            )}
-        </Fragment>
-    );
+const DocxViewer: DocRendererElement = (_props: DocumentViewerContainerProps) => {
+    return <Fragment>DOCX</Fragment>;
 };
 
 DocxViewer.contentTypes = [

packages/pluggableWidgets/document-viewer-web/components/ErrorViewer.tsx

@@ -1,5 +1,5 @@
 import { createElement, Fragment, useContext } from "react";
-import { DocumentContext } from "store";
+import { DocumentContext } from "../store";
 import { DocRendererElement } from "./documentRenderer";
 
 const ErrorViewer: DocRendererElement = () => {

packages/pluggableWidgets/document-viewer-web/components/documentRenderer.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { DocumentViewerContainerProps } from "typings/DocumentViewerProps";
+import { DocumentViewerContainerProps } from "../typings/DocumentViewerProps";
 
 export interface DocRendererElement extends FC<DocumentViewerContainerProps> {
     contentTypes: string[];

packages/pluggableWidgets/document-viewer-web/package.json

@@ -35,7 +35,6 @@
     },
     "dependencies": {
         "classnames": "^2.3.2",
-        "mammoth": "^1.9.0",
         "pdfjs-dist": "^5.0.375",
         "react-pdf": "^9.2.1"
     },

packages/pluggableWidgets/document-viewer-web/rollup.config.js

@@ -1,6 +1,29 @@
+import commonjs from "@rollup/plugin-commonjs";
+
 export default args => {
-    return args.configDefaultConfig.map((config, _index) => {
+    const result = args.configDefaultConfig;
+    return result.map((config, _index) => {
         config.output.inlineDynamicImports = true;
-        return config;
+        if (config.output.format !== "es") {
+            return config;
+        }
+        return {
+            ...config,
+            plugins: config.plugins.map(plugin => {
+                if (plugin && plugin.name === "commonjs") {
+                    // replace common js plugin that transforms
+                    // external requires to imports
+                    // this is needed in order to work with modern client
+                    return commonjs({
+                        extensions: [".js", ".jsx", ".tsx", ".ts"],
+                        transformMixedEsModules: true,
+                        requireReturnsDefault: "auto",
+                        esmExternals: true
+                    });
+                }
+
+                return plugin;
+            })
+        };
     });
 };