diff --git a/web/ASC.Web.Editor/src/Editor.js b/web/ASC.Web.Editor/src/Editor.js index ebeefa3482..ef50aa1729 100644 --- a/web/ASC.Web.Editor/src/Editor.js +++ b/web/ASC.Web.Editor/src/Editor.js @@ -117,10 +117,11 @@ function Editor({ actionLink, error, needLoader, + isReadyFilesRemote, }) { const [isLoaded, setIsLoaded] = useState(false); const [documentTitle, setNewDocumentTitle] = useState("Loading..."); - useFilesUtils(); + useFilesUtils(isReadyFilesRemote); const { t } = useTranslation(); const [ @@ -137,7 +138,10 @@ function Editor({ onSDKRequestCompareFile, ] = useSelectFileDialog(docEditor, t); - const [selectFolderDialog, onSDKRequestSaveAs] = useSelectFolderDialog(t); + const [selectFolderDialog, onSDKRequestSaveAs] = useSelectFolderDialog( + t, + docEditor + ); useEffect(() => { if (error) { diff --git a/web/ASC.Web.Editor/src/client/index.js b/web/ASC.Web.Editor/src/client/index.js index f0fd2b9b92..0c60f54161 100644 --- a/web/ASC.Web.Editor/src/client/index.js +++ b/web/ASC.Web.Editor/src/client/index.js @@ -1,13 +1,15 @@ -import React, { Suspense } from "react"; +import React, { Suspense, useState, useEffect } from "react"; import { hydrate } from "react-dom"; import { registerSW } from "@appserver/common/sw/helper"; import App from "../App.js"; import { useSSR } from "react-i18next"; import "../i18n"; +import { FILES_SCOPE } from "../helpers/constants.js"; const propsObj = window.__ASC_INITIAL_STATE__; const initialI18nStore = window.initialI18nStore; const initialLanguage = window.initialLanguage; +const remoteScript = document.getElementById(FILES_SCOPE); delete window.__ASC_INITIAL_STATE__; delete window.initialI18nStore; @@ -17,10 +19,16 @@ const stateJS = document.getElementById("__ASC_INITIAL_STATE__"); stateJS.parentNode.removeChild(stateJS); const AppWrapper = () => { + const [isReadyFilesRemote, setIsReadyFilesRemote] = useState(false); useSSR(initialI18nStore, initialLanguage); + + useEffect(() => { + remoteScript.onload = () => setIsReadyFilesRemote(true); + }, []); + return ( }> - + ); }; diff --git a/web/ASC.Web.Editor/src/hooks/useFilesUtils.js b/web/ASC.Web.Editor/src/hooks/useFilesUtils.js index 37376613f4..9e90ca585f 100644 --- a/web/ASC.Web.Editor/src/hooks/useFilesUtils.js +++ b/web/ASC.Web.Editor/src/hooks/useFilesUtils.js @@ -1,9 +1,9 @@ import React from "react"; import { loadComponent } from "../components/dynamic"; import { FILES_SCOPE } from "../helpers/constants"; -function useFilesUtils() { +function useFilesUtils(isReadyFilesRemote) { React.useEffect(() => { - if (document.getElementById(FILES_SCOPE)) { + if (isReadyFilesRemote) { loadComponent(FILES_SCOPE, "./utils", "filesUtils")(); } }, []); diff --git a/web/ASC.Web.Editor/src/hooks/useSelectFolderDialog.js b/web/ASC.Web.Editor/src/hooks/useSelectFolderDialog.js index 31222e94d4..167993259a 100644 --- a/web/ASC.Web.Editor/src/hooks/useSelectFolderDialog.js +++ b/web/ASC.Web.Editor/src/hooks/useSelectFolderDialog.js @@ -6,7 +6,7 @@ import Checkbox from "@appserver/components/checkbox"; import { StyledSelectFolder } from "../StyledEditor"; import { FILES_REMOTE_ENTRY_URL, FILES_SCOPE } from "../helpers/constants"; -function useSelectFolderDialog(t) { +function useSelectFolderDialog(t, docEditor) { const [isFolderDialogVisible, setIsFolderDialogVisible] = useState(false); const [titleSelectorFolder, setTitleSelectorFolder] = useState(""); const [urlSelectorFolder, setUrlSelectorFolder] = useState(""); @@ -27,7 +27,7 @@ function useSelectFolderDialog(t) { }; const getSavingInfo = async (title, folderId) => { - const savingInfo = await SaveAs( + const savingInfo = await window.filesUtils.SaveAs( title, urlSelectorFolder, folderId, @@ -49,7 +49,7 @@ function useSelectFolderDialog(t) { : titleSelectorFolder; if (openNewTab) { - SaveAs(title, urlSelectorFolder, folderId, openNewTab); + window.filesUtils.SaveAs(title, urlSelectorFolder, folderId, openNewTab); } else { getSavingInfo(title, folderId); } @@ -60,6 +60,7 @@ function useSelectFolderDialog(t) { }; const onChangeInput = (e) => { + console.log(e.target.value); setTitleSelectorFolder(e.target.value); };