Merge branch 'develop' into bugfix/login

packages/common/constants/index.js

@@ -334,3 +334,5 @@ export const PortalFeaturesLimitations = Object.freeze({
   Limitless: -1,
   Unavailable: 0,
 });
+
+export const EDITOR_ID = "docspace_editor";

packages/editor/package.json

@@ -63,6 +63,7 @@
   "title": "ONLYOFFICE",
   "socketPath": "/doceditor/ws",
   "dependencies": {
+    "@onlyoffice/document-editor-react": "1.0.1",
     "bufferutil": "^4.0.6",
     "compression": "^1.7.4",
     "express": "^4.18.1",

packages/editor/src/client/components/Editor.js

@@ -1,7 +1,11 @@
 import React, { useEffect } from "react";
 import { isMobile, isIOS, deviceType } from "react-device-detect";
 import combineUrl from "@docspace/common/utils/combineUrl";
-import { AppServerConfig, FolderType } from "@docspace/common/constants";
+import {
+  AppServerConfig,
+  FolderType,
+  EDITOR_ID,
+} from "@docspace/common/constants";
 import throttle from "lodash/throttle";
 import Toast from "@docspace/components/toast";
 import { toast } from "react-toastify";
@@ -21,6 +25,7 @@ import withDialogs from "../helpers/withDialogs";
 import { canConvert } from "../helpers/utils";
 import { assign } from "@docspace/common/utils";
 import toastr from "@docspace/components/toast/toastr";
+import { DocumentEditor } from "@onlyoffice/document-editor-react";
 
 toast.configure();
 
@@ -54,6 +59,9 @@ let documentIsReady = false;
 let docSaved = null;
 let docTitle = null;
 let docEditor;
+let newConfig;
+let documentserverUrl =
+  typeof window !== "undefined" && window?.location?.origin;
 
 function Editor({
   config,
@@ -97,33 +105,34 @@ function Editor({
   }, [mfReady, error]);
 
   useEffect(() => {
-    if (config) {
-      document.getElementById("scripDocServiceAddress").onload = onLoad();
-      setDocumentTitle(config?.document?.title);
+    if (!config) return;
 
-      if (isIOS && deviceType === "tablet") {
-        const vh = window.innerHeight * 0.01;
-        document.documentElement.style.setProperty("--vh", `${vh}px`);
-      }
+    setDocumentTitle(config?.document?.title);
 
-      if (
-        !view &&
-        fileInfo &&
-        fileInfo.canWebRestrictedEditing &&
-        fileInfo.canFillForms &&
-        !fileInfo.canEdit
-      ) {
-        try {
-          initForm();
-        } catch (err) {
-          console.error(err);
-        }
-      }
+    if (isIOS && deviceType === "tablet") {
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty("--vh", `${vh}px`);
+    }
 
-      if (view) {
-        config.editorConfig.mode = "view";
+    if (
+      !view &&
+      fileInfo &&
+      fileInfo.canWebRestrictedEditing &&
+      fileInfo.canFillForms &&
+      !fileInfo.canEdit
+    ) {
+      try {
+        initForm();
+      } catch (err) {
+        console.error(err);
       }
     }
+
+    if (view) {
+      config.editorConfig.mode = "view";
+    }
+
+    init();
   }, []);
 
   useEffect(() => {
@@ -342,11 +351,14 @@ function Editor({
   };
 
   const onDocumentReady = () => {
+    console.log("onDocumentReady", arguments);
     documentIsReady = true;
 
     if (isSharingAccess) {
       loadUsersRightsList(docEditor);
     }
+
+    assign(window, ["ASC", "Files", "Editor", "docEditor"], docEditor); //Do not remove: it's for Back button on Mobile App
   };
 
   const updateFavorite = (favorite) => {
@@ -411,7 +423,9 @@ function Editor({
   };
 
   const onSDKAppReady = () => {
-    console.log("ONLYOFFICE Document Editor is ready");
+    docEditor = window.DocEditor.instances[EDITOR_ID];
+
+    console.log("ONLYOFFICE Document Editor is ready", docEditor);
     const url = window.location.href;
 
     const index = url.indexOf("#message/");
@@ -428,10 +442,8 @@ function Editor({
     }
   };
 
-  const onLoad = () => {
+  const init = () => {
     try {
-      if (!window.DocsAPI) throw new Error("DocsAPI is not defined");
-
       if (isMobile) {
         config.type = "mobile";
       }
@@ -549,14 +561,7 @@ function Editor({
         },
       };
 
-      const newConfig = Object.assign(config, events);
-
-      docEditor = window.docEditor = window.DocsAPI.DocEditor(
-        "editor",
-        newConfig
-      );
-
-      assign(window, ["ASC", "Files", "Editor", "docEditor"], docEditor); //Do not remove: it's for Back button on Mobile App
+      newConfig = Object.assign(config, events);
     } catch (error) {
       toastr.error(error.message, null, 0, true);
     }
@@ -564,7 +569,17 @@ function Editor({
 
   return (
     <EditorWrapper isVisibleSharingDialog={isVisible}>
-      <div id="editor"></div>
+      {newConfig && (
+        <DocumentEditor
+          id={EDITOR_ID}
+          documentServerUrl={documentserverUrl}
+          config={newConfig}
+          height="100%"
+          width="100%"
+          events_onDocumentReady={onDocumentReady}
+        ></DocumentEditor>
+      )}
+
       {sharingDialog}
       {selectFileDialog}
       {selectFolderDialog}

packages/editor/src/client/helpers/withDialogs.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { getPresignedUri } from "@docspace/common/api/files";
+import { EDITOR_ID } from "@docspace/common/constants";
 import { useTranslation } from "react-i18next";
 import SharingDialog from "../components/SharingDialog";
 import SelectFileDialog from "../components/SelectFileDialog";
@@ -42,7 +43,11 @@ const withDialogs = (WrappedComponent) => {
       });
       socketHelper.on("restore-backup", () => {
         const message = t("Common:PreparationPortalTitle");
-        window.docEditor.showMessage(message);
+        const docEditor =
+          typeof window !== "undefined" &&
+          window.DocEditor?.instances[EDITOR_ID];
+
+        docEditor?.showMessage(message);
       });
     };
 
@@ -54,10 +59,10 @@ const withDialogs = (WrappedComponent) => {
       setIsVisible(false);
     };
 
-    const loadUsersRightsList = () => {
+    const loadUsersRightsList = (docEditor) => {
       window.SharingDialog.convertSharingUsers(sharingSettings).then(
         (sharingSettings) => {
-          window.docEditor.setSharingSettings({
+          docEditor.setSharingSettings({
             sharingSettings,
           });
         }
@@ -87,7 +92,10 @@ const withDialogs = (WrappedComponent) => {
     const insertImage = (link) => {
       const token = link.token;
 
-      window.docEditor.insertImage({
+      const docEditor =
+        typeof window !== "undefined" && window.DocEditor?.instances[EDITOR_ID];
+
+      docEditor?.insertImage({
         ...typeInsertImageAction,
         fileType: link.filetype,
         ...(token && { token }),
@@ -98,7 +106,10 @@ const withDialogs = (WrappedComponent) => {
     const mailMerge = (link) => {
       const token = link.token;
 
-      window.docEditor.setMailMergeRecipients({
+      const docEditor =
+        typeof window !== "undefined" && window.DocEditor?.instances[EDITOR_ID];
+
+      docEditor?.setMailMergeRecipients({
         fileType: link.filetype,
         ...(token && { token }),
         url: link.url,
@@ -108,7 +119,10 @@ const withDialogs = (WrappedComponent) => {
     const compareFiles = (link) => {
       const token = link.token;
 
-      window.docEditor.setRevisedFile({
+      const docEditor =
+        typeof window !== "undefined" && window.DocEditor?.instances[EDITOR_ID];
+
+      docEditor?.setRevisedFile({
         fileType: link.filetype,
         ...(token && { token }),
         url: link.url,
@@ -191,8 +205,13 @@ const withDialogs = (WrappedComponent) => {
       );
 
       if (savingInfo) {
+        const docEditor =
+          typeof window !== "undefined" &&
+          window.DocEditor?.instances[EDITOR_ID];
+
         const convertedInfo = savingInfo.split(": ").pop();
-        window.docEditor.showMessage(convertedInfo);
+
+        docEditor?.showMessage(convertedInfo);
       }
     };
 

packages/editor/src/server/lib/helpers/index.js

@@ -95,7 +95,7 @@ export const initDocEditor = async (req) => {
 
     const sharingSettings = await getShareFiles([+fileId], []);
 
-    const isSharingAccess = config?.file && config?.file?.canShare;
+    const isSharingAccess = false; //TODO: temporary disable sharing (many errors). Restore => config?.file && config?.file?.canShare;
 
     if (view) {
       config.editorConfig.mode = "view";

packages/editor/src/server/lib/template.js

@@ -22,7 +22,7 @@ export default function template(
   const editorApiScript =
     error || !editorUrl
       ? ""
-      : `<script type='text/javascript' id='scripDocServiceAddress' src="${editorUrl}" async></script>`;
+      : `<script type='text/javascript' id='onlyoffice-api-script' src="${editorUrl}" async></script>`;
 
   if (!IS_DEVELOPMENT) {
     const productionBundleKeys = getScripts(assets);