chore(doc-viewer): reintroduce mammoth

Author: gjulivan

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

@@ -1,9 +1,54 @@
-import { createElement, Fragment } from "react";
-import { DocumentViewerContainerProps } from "../typings/DocumentViewerProps";
+import { createElement, Fragment, useCallback, useEffect, useState } from "react";
+import mammoth from "mammoth";
+import { DocumentViewerContainerProps } from "typings/DocumentViewerProps";
 import { DocRendererElement } from "./documentRenderer";
 
-const DocxViewer: DocRendererElement = (_props: DocumentViewerContainerProps) => {
-    return <Fragment>DOCX</Fragment>;
+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>
+    );
 };
 
 DocxViewer.contentTypes = [

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

@@ -4,7 +4,6 @@ import { DocRendererElement } from "./documentRenderer";
 
 const ErrorViewer: DocRendererElement = () => {
     const props = useContext(DocumentContext);
-    console.log("ErrorViewer", props);
     return (
         <Fragment>
             <div className="widget-document-viewer-content">No document selected</div>

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

@@ -42,6 +42,7 @@
         "@babel/plugin-transform-class-properties": "^7.23.3",
         "@babel/plugin-transform-private-methods": "^7.23.3",
         "@babel/plugin-transform-private-property-in-object": "^7.23.4",
-        "@mendix/pluggable-widgets-tools": "^10.0.0"
+        "@mendix/pluggable-widgets-tools": "^10.0.0",
+        "@rollup/plugin-replace": "^6.0.2"
     }
 }

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

@@ -1,4 +1,5 @@
 import commonjs from "@rollup/plugin-commonjs";
+import replace from "@rollup/plugin-replace";
 
 export default args => {
     const result = args.configDefaultConfig;
@@ -9,21 +10,39 @@ export default args => {
         }
         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
-                    });
-                }
+            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;
-            })
+                    return plugin;
+                }),
+                // rollup config for pdfjs-dist copying from https://github.com/unjs/unpdf/blob/main/pdfjs.rollup.config.ts
+                replace({
+                    delimiters: ["", ""],
+                    preventAssignment: true,
+                    values: {
+                        // Disable the `window` check (for requestAnimationFrame).
+                        "typeof window": '"undefined"',
+                        // Imitate the Node.js environment for all serverless environments, unenv will
+                        // take care of the remaining Node.js polyfills. Keep support for browsers.
+                        "const isNodeJS = typeof": 'const isNodeJS = typeof document === "undefined" // typeof',
+                        // Force inlining the PDF.js worker.
+                        "await import(/*webpackIgnore: true*/this.workerSrc)": "__pdfjsWorker__",
+                        // Tree-shake client worker initialization logic.
+                        "!PDFWorkerUtil.isWorkerDisabled && !PDFWorker.#mainThreadWorkerMessageHandler": "false"
+                    }
+                })
+            ]
         };
     });
 };