Added ability to sync XFDF

Author: S0ulDrag0n

package.json

@@ -1,7 +1,7 @@
 {
   "name": "webviewer",
   "widgetName": "WebViewer",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "My widget description",
   "copyright": "2023 PDFTron",
   "author": "Andrey Safonov",

src/WebViewer.editorPreview.tsx

@@ -6,36 +6,16 @@ declare function require(name: string): string;
 
 export class preview extends Component<WebViewerPreviewProps> {
     render(): ReactNode {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const mx = window.mx;
         const viewerProps = {
-            containerHeight: this.props.containerHeight,
-            fileUrl: this.props.fileUrl,
-            fileUrlAttribute: this.props.fileUrlAttribute,
-            fileIdAttribute: this.props.fileIdAttribute,
-            enableFilePicker: this.props.enableFilePicker,
-            annotationUser: this.props.annotationUser,
-            accessibleMode: this.props.accessibleMode,
-            enableMeasurement: this.props.enableMeasurement,
-            enableRedaction: this.props.enableRedaction,
-            enableAnnotations: this.props.enableAnnotations,
-            xfdfAttribute: this.props.xfdfAttribute,
-            enableXfdfExportButton: this.props.enableXfdfExportButton,
-            enableAutoXfdfExport: this.props.enableAutoXfdfExport,
-            enableAutoXfdfImport: this.props.enableAutoXfdfImport,
-            loadAsPDF: this.props.loadAsPDF,
-            highContrastMode: this.props.highContrastMode,
-            notesInLeftPanel: this.props.notesInLeftPanel,
-            enabledElements: this.props.enabledElements,
-            disabledElements: this.props.disabledElements,
-            selectAnnotationOnCreation: this.props.selectAnnotationOnCreation,
+            ...this.props,
             isVisible: this.props.isVisible === "true",
-            enableDarkMode: this.props.enableDarkMode,
-            enableFullAPI: this.props.enableFullAPI,
-            customCss: this.props.customCss,
-            defaultLanguage: this.props.defaultLanguage,
-            l: this.props.l,
-            enableDocumentUpdates: this.props.enableDocumentUpdates,
-            enableSaveAsButton: this.props.enableSaveAsButton
+            mx
         };
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         return <PDFViewer {...viewerProps} />;
     }
 }

src/WebViewer.tsx

@@ -7,36 +7,14 @@ import "./ui/WebViewer.css";
 
 export default class WebViewer extends Component<WebViewerContainerProps> {
     render(): ReactNode {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const mx = window.mx;
         const viewerProps = {
-            containerHeight: this.props.containerHeight,
-            fileUrl: this.props.fileUrl,
-            fileUrlAttribute: this.props.fileUrlAttribute,
-            fileIdAttribute: this.props.fileIdAttribute,
-            enableFilePicker: this.props.enableFilePicker,
+            ...this.props,
             annotationUser: this.props.annotationUser?.value,
-            accessibleMode: this.props.accessibleMode,
-            enableMeasurement: this.props.enableMeasurement,
-            enableRedaction: this.props.enableRedaction,
-            enableAnnotations: this.props.enableAnnotations,
-            xfdfAttribute: this.props.xfdfAttribute,
-            enableXfdfExportButton: this.props.enableXfdfExportButton,
-            enableAutoXfdfExport: this.props.enableAutoXfdfExport,
-            enableAutoXfdfImport: this.props.enableAutoXfdfImport,
-            loadAsPDF: this.props.loadAsPDF,
-            highContrastMode: this.props.highContrastMode,
-            notesInLeftPanel: this.props.notesInLeftPanel,
-            enabledElements: this.props.enabledElements,
-            disabledElements: this.props.disabledElements,
-            selectAnnotationOnCreation: this.props.selectAnnotationOnCreation,
             isVisible: this.props.isVisible?.value,
-            enableDarkMode: this.props.enableDarkMode,
-            enableFullAPI: this.props.enableFullAPI,
-            customCss: this.props.customCss,
-            defaultLanguage: this.props.defaultLanguage,
-            l: this.props.l,
-            // Module props
-            enableDocumentUpdates: this.props.enableDocumentUpdates,
-            enableSaveAsButton: this.props.enableSaveAsButton
+            mx
         };
         return <PDFViewer {...viewerProps} />;
     }

src/WebViewer.xml

@@ -175,6 +175,14 @@
                 <caption>Enable save as</caption>
                 <description>Adds a button to the header to allow saving a document to the server as a new file. Requires WebViewer module.</description>
             </property>
+            <property key="continueAutoXfdfImport" type="boolean" defaultValue="false">
+                <caption>Continue Auto XFDF Import</caption>
+                <description>Continue to import XFDF from the server. This achieves real-time updates at specific intervals. Requires WebViewer module.</description>
+            </property>
+            <property key="autoXfdfImportInterval" type="integer" defaultValue="1000">
+                <caption>Auto Import Interval</caption>
+                <description>The interval in milliseconds to get XFDF updates from the server for the current file.</description>
+            </property>
         </propertyGroup>
         <propertyGroup caption="License">
             <property key="l" type="string" required="false">

src/clients/WebViewerModuleClient.tsx

@@ -1,14 +1,40 @@
 class WebViewerModuleClient {
+    private _mx: any;
+    constructor(mx: any) {
+        this._mx = mx;
+    }
+    getHeaders(): any {
+        return {
+            "X-Csrf-Token": this._mx.session.getConfig("csrftoken")
+        };
+    }
     async checkForModule(): Promise<boolean> {
         try {
-            const res = await fetch("/rest/version/v1/modules/webviewer");
+            const res = await fetch("/rest/version/v1/modules/webviewer", {
+                headers: this.getHeaders()
+            });
             console.info("[Module] Connected:", await res.text());
             return true;
         } catch (e) {
             console.info("[Module] Not detected.");
             return false;
         }
     }
+    async getFileInfo(fileId: string): Promise<any> {
+        if (!fileId) {
+            console.warn("Empty file ID was provided.");
+            return;
+        }
+        try {
+            const res = await fetch(`/rest/documentstore/v1/documents/${fileId}`, {
+                headers: this.getHeaders()
+            });
+            return await res.json();
+        } catch (e) {
+            console.info("[Module] Not detected.");
+            throw e;
+        }
+    }
     async updateFile(fileId: string, fileData: ArrayBuffer): Promise<void> {
         if (!fileId) {
             console.warn("Empty file ID was provided.");
@@ -17,25 +43,27 @@ class WebViewerModuleClient {
         try {
             await fetch(`/rest/documentstore/v1/documents/${fileId}`, {
                 method: "PUT",
+                headers: this.getHeaders(),
                 body: fileData
             });
         } catch (e) {
             console.info("[Module] Failed to save document.", e);
+            throw e;
         }
     }
     async saveFile(fileData: ArrayBuffer): Promise<string | null | undefined> {
         try {
             const res = await fetch(`/rest/documentstore/v1/documents`, {
                 method: "POST",
+                headers: this.getHeaders(),
                 body: fileData
             });
             return await res.text();
         } catch (e) {
             console.info("[Module] Failed to save document.", e);
+            throw e;
         }
-
-        return null;
     }
 }
 
-export default new WebViewerModuleClient();
+export default WebViewerModuleClient;