2021-07-29 11:04:30 +00:00
|
|
|
import React, { useCallback, useEffect, useRef, useState } from "react";
|
2021-03-30 11:03:43 +00:00
|
|
|
|
2021-03-05 18:15:48 +00:00
|
|
|
import Toast from "@appserver/components/toast";
|
2021-03-29 16:31:11 +00:00
|
|
|
import toastr from "studio/toastr";
|
2021-03-30 11:03:43 +00:00
|
|
|
import { toast } from "react-toastify";
|
|
|
|
|
2021-03-05 18:15:48 +00:00
|
|
|
import Box from "@appserver/components/box";
|
|
|
|
import { regDesktop } from "@appserver/common/desktop";
|
|
|
|
import Loaders from "@appserver/common/components/Loaders";
|
|
|
|
import {
|
2021-03-22 09:12:34 +00:00
|
|
|
combineUrl,
|
2021-03-05 18:15:48 +00:00
|
|
|
getObjectByLocation,
|
|
|
|
//showLoader,
|
|
|
|
//hideLoader,
|
|
|
|
} from "@appserver/common/utils";
|
|
|
|
import {
|
|
|
|
getDocServiceUrl,
|
|
|
|
openEdit,
|
|
|
|
setEncryptionKeys,
|
|
|
|
getEncryptionAccess,
|
2021-03-29 16:31:11 +00:00
|
|
|
getFileInfo,
|
2021-07-29 11:04:30 +00:00
|
|
|
copyToFolder,
|
2021-07-27 06:51:56 +00:00
|
|
|
getRecentFolderList,
|
|
|
|
getFolderInfo,
|
2021-07-27 07:36:21 +00:00
|
|
|
updateFile,
|
2021-07-27 15:55:59 +00:00
|
|
|
removeFromFavorite,
|
|
|
|
markAsFavorite,
|
2021-08-13 11:50:24 +00:00
|
|
|
getPresignedUri,
|
2021-03-05 18:15:48 +00:00
|
|
|
} from "@appserver/common/api/files";
|
|
|
|
import { checkIsAuthenticated } from "@appserver/common/api/user";
|
|
|
|
import { getUser } from "@appserver/common/api/people";
|
2021-03-29 16:31:11 +00:00
|
|
|
import FilesFilter from "@appserver/common/api/files/filter";
|
2021-03-30 11:03:43 +00:00
|
|
|
|
2021-03-05 18:15:48 +00:00
|
|
|
import throttle from "lodash/throttle";
|
2021-03-06 15:50:06 +00:00
|
|
|
import { isIOS, deviceType } from "react-device-detect";
|
|
|
|
import { homepage } from "../package.json";
|
2021-03-28 14:49:51 +00:00
|
|
|
|
2021-03-22 09:12:34 +00:00
|
|
|
import { AppServerConfig } from "@appserver/common/constants";
|
2021-03-31 13:49:14 +00:00
|
|
|
import SharingDialog from "files/SharingDialog";
|
2021-08-11 06:59:57 +00:00
|
|
|
import { getDefaultFileName, SaveAs } from "files/utils";
|
2021-07-08 11:13:00 +00:00
|
|
|
import SelectFileDialog from "files/SelectFileDialog";
|
2021-07-09 07:49:57 +00:00
|
|
|
import SelectFolderDialog from "files/SelectFolderDialog";
|
2021-08-04 09:42:59 +00:00
|
|
|
import { StyledSelectFolder, StyledSelectFile } from "./StyledEditor";
|
2021-03-28 18:38:48 +00:00
|
|
|
import i18n from "./i18n";
|
2021-07-27 13:00:30 +00:00
|
|
|
import { FolderType } from "@appserver/common/constants";
|
2021-07-29 11:04:30 +00:00
|
|
|
import Text from "@appserver/components/text";
|
|
|
|
import TextInput from "@appserver/components/text-input";
|
2021-07-29 11:35:27 +00:00
|
|
|
import Checkbox from "@appserver/components/checkbox";
|
|
|
|
|
2021-03-05 18:15:48 +00:00
|
|
|
let documentIsReady = false;
|
|
|
|
|
2021-07-27 16:05:18 +00:00
|
|
|
const text = "text";
|
|
|
|
const spreadSheet = "spreadsheet";
|
|
|
|
const presentation = "presentation";
|
2021-08-04 08:32:14 +00:00
|
|
|
const insertImageAction = "imageType";
|
|
|
|
const mailMergeAction = "mailMergeType";
|
2021-07-27 16:05:18 +00:00
|
|
|
|
2021-03-05 18:15:48 +00:00
|
|
|
let docTitle = null;
|
|
|
|
let fileType = null;
|
2021-03-26 12:05:41 +00:00
|
|
|
let config;
|
2021-03-05 18:15:48 +00:00
|
|
|
let docSaved = null;
|
2021-03-26 12:05:41 +00:00
|
|
|
let docEditor;
|
2021-03-29 16:31:11 +00:00
|
|
|
let fileInfo;
|
2021-07-28 08:02:44 +00:00
|
|
|
let successAuth;
|
2021-07-29 11:04:30 +00:00
|
|
|
let defaultFileName;
|
2021-03-28 14:49:51 +00:00
|
|
|
const url = window.location.href;
|
|
|
|
const filesUrl = url.substring(0, url.indexOf("/doceditor"));
|
|
|
|
|
2021-03-30 11:03:43 +00:00
|
|
|
toast.configure();
|
|
|
|
|
2021-04-01 08:50:30 +00:00
|
|
|
const Editor = () => {
|
2021-03-06 15:50:06 +00:00
|
|
|
const urlParams = getObjectByLocation(window.location);
|
|
|
|
const fileId = urlParams
|
|
|
|
? urlParams.fileId || urlParams.fileid || null
|
|
|
|
: null;
|
2021-04-23 15:00:05 +00:00
|
|
|
const version = urlParams ? urlParams.version || null : null;
|
2021-03-06 15:50:06 +00:00
|
|
|
const doc = urlParams ? urlParams.doc || null : null;
|
|
|
|
const isDesktop = window["AscDesktopEditor"] !== undefined;
|
|
|
|
|
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const [isAuthenticated, setIsAuthenticated] = useState(true);
|
2021-07-29 11:35:27 +00:00
|
|
|
const [titleSelectorFolder, setTitleSelectorFolder] = useState("");
|
2021-08-03 07:09:08 +00:00
|
|
|
const [extension, setExtension] = useState();
|
2021-07-29 11:35:27 +00:00
|
|
|
const [urlSelectorFolder, setUrlSelectorFolder] = useState("");
|
|
|
|
const [openNewTab, setNewOpenTab] = useState(false);
|
2021-03-05 18:15:48 +00:00
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
const throttledChangeTitle = throttle(
|
|
|
|
() => changeTitle(docSaved, docTitle),
|
|
|
|
500
|
|
|
|
);
|
2021-03-26 15:27:30 +00:00
|
|
|
|
2021-03-26 12:05:41 +00:00
|
|
|
useEffect(() => {
|
2021-03-26 14:18:43 +00:00
|
|
|
init();
|
2021-03-26 12:05:41 +00:00
|
|
|
}, []);
|
|
|
|
|
2021-03-28 16:21:08 +00:00
|
|
|
const updateUsersRightsList = () => {
|
2021-03-31 13:49:14 +00:00
|
|
|
SharingDialog.getSharingSettings(fileId).then((sharingSettings) => {
|
|
|
|
docEditor.setSharingSettings({
|
|
|
|
sharingSettings,
|
|
|
|
});
|
|
|
|
});
|
2021-03-26 15:27:30 +00:00
|
|
|
};
|
2021-08-13 11:50:24 +00:00
|
|
|
|
|
|
|
const insertImage = (link) => {
|
2021-07-29 11:04:30 +00:00
|
|
|
docEditor.insertImage({
|
|
|
|
c: "add",
|
2021-08-13 11:50:24 +00:00
|
|
|
fileType: link.filetype,
|
|
|
|
url: link.url,
|
2021-07-29 11:04:30 +00:00
|
|
|
});
|
|
|
|
};
|
2021-08-13 11:50:24 +00:00
|
|
|
|
|
|
|
const mailMerge = (link) => {
|
2021-08-04 08:32:14 +00:00
|
|
|
docEditor.setMailMergeRecipients({
|
2021-08-13 11:50:24 +00:00
|
|
|
fileType: link.filetype,
|
|
|
|
url: link.url,
|
2021-08-04 08:32:14 +00:00
|
|
|
});
|
|
|
|
};
|
2021-07-27 15:55:59 +00:00
|
|
|
const updateFavorite = (favorite) => {
|
|
|
|
docEditor.setFavorite(favorite);
|
|
|
|
};
|
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
const init = async () => {
|
|
|
|
try {
|
2021-03-05 18:15:48 +00:00
|
|
|
if (!fileId) return;
|
|
|
|
|
2021-04-23 15:00:05 +00:00
|
|
|
console.log(
|
|
|
|
`Editor componentDidMount fileId=${fileId}, version=${version}, doc=${doc}`
|
|
|
|
);
|
2021-03-05 18:15:48 +00:00
|
|
|
|
|
|
|
if (isIPad()) {
|
|
|
|
const vh = window.innerHeight * 0.01;
|
|
|
|
document.documentElement.style.setProperty("--vh", `${vh}px`);
|
|
|
|
}
|
|
|
|
|
|
|
|
//showLoader();
|
|
|
|
|
|
|
|
const docApiUrl = await getDocServiceUrl();
|
2021-07-28 08:02:44 +00:00
|
|
|
successAuth = await checkIsAuthenticated();
|
2021-03-05 18:15:48 +00:00
|
|
|
|
2021-07-28 08:02:44 +00:00
|
|
|
if (!doc && !successAuth) {
|
2021-04-30 15:01:16 +00:00
|
|
|
window.open(
|
|
|
|
combineUrl(AppServerConfig.proxyURL, "/login"),
|
|
|
|
"_self",
|
|
|
|
"",
|
|
|
|
true
|
|
|
|
);
|
|
|
|
return;
|
2021-04-27 10:48:32 +00:00
|
|
|
}
|
2021-03-05 18:15:48 +00:00
|
|
|
|
2021-07-28 08:02:44 +00:00
|
|
|
if (successAuth) {
|
2021-04-27 10:48:32 +00:00
|
|
|
try {
|
|
|
|
fileInfo = await getFileInfo(fileId);
|
|
|
|
} catch (err) {
|
|
|
|
console.error(err);
|
2021-03-06 15:50:06 +00:00
|
|
|
}
|
2021-04-27 10:48:32 +00:00
|
|
|
|
2021-07-28 08:02:44 +00:00
|
|
|
setIsAuthenticated(successAuth);
|
2021-03-05 18:15:48 +00:00
|
|
|
}
|
2021-03-30 12:48:08 +00:00
|
|
|
|
2021-04-23 15:00:05 +00:00
|
|
|
config = await openEdit(fileId, version, doc);
|
2021-07-29 11:04:30 +00:00
|
|
|
defaultFileName = config;
|
2021-03-05 18:15:48 +00:00
|
|
|
|
|
|
|
if (isDesktop) {
|
|
|
|
const isEncryption =
|
|
|
|
config.editorConfig["encryptionKeys"] !== undefined;
|
|
|
|
const user = await getUser();
|
|
|
|
|
|
|
|
regDesktop(
|
|
|
|
user,
|
|
|
|
isEncryption,
|
|
|
|
config.editorConfig.encryptionKeys,
|
|
|
|
(keys) => {
|
|
|
|
setEncryptionKeys(keys);
|
|
|
|
},
|
|
|
|
true,
|
|
|
|
(callback) => {
|
|
|
|
getEncryptionAccess(fileId)
|
|
|
|
.then((keys) => {
|
|
|
|
var data = {
|
|
|
|
keys,
|
|
|
|
};
|
|
|
|
|
|
|
|
callback(data);
|
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.log(error);
|
|
|
|
toastr.error(
|
|
|
|
typeof error === "string" ? error : error.message,
|
|
|
|
null,
|
|
|
|
0,
|
|
|
|
true
|
|
|
|
);
|
|
|
|
});
|
2021-06-02 07:59:07 +00:00
|
|
|
},
|
|
|
|
i18n.t
|
2021-03-05 18:15:48 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-07-28 08:02:44 +00:00
|
|
|
if (successAuth) {
|
2021-07-27 06:51:56 +00:00
|
|
|
const recentFolderList = await getRecentFolderList();
|
|
|
|
|
|
|
|
let recentFilesArray = [];
|
|
|
|
|
|
|
|
const filesArray = recentFolderList.files;
|
|
|
|
|
|
|
|
for (let i = 0; i < filesArray.length; i++) {
|
2021-07-27 13:00:30 +00:00
|
|
|
if (
|
2021-07-27 16:05:18 +00:00
|
|
|
config.documentType === text &&
|
2021-07-27 13:00:30 +00:00
|
|
|
filesArray[i].fileType === 7 &&
|
|
|
|
filesArray[i].rootFolderType !== FolderType.SHARE
|
|
|
|
) {
|
2021-07-27 06:51:56 +00:00
|
|
|
const folderInfo = await getFolderInfo(filesArray[i].folderId);
|
|
|
|
|
|
|
|
const convertedData = convertRecentData(filesArray[i], folderInfo);
|
|
|
|
|
|
|
|
if (Object.keys(convertedData).length !== 0)
|
|
|
|
recentFilesArray.push(convertedData);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (
|
2021-07-27 16:05:18 +00:00
|
|
|
config.documentType === spreadSheet &&
|
2021-07-27 13:00:30 +00:00
|
|
|
filesArray[i].fileType === 5 &&
|
|
|
|
filesArray[i].rootFolderType !== FolderType.SHARE
|
2021-07-27 06:51:56 +00:00
|
|
|
) {
|
|
|
|
const folderInfo = await getFolderInfo(filesArray[i].folderId);
|
|
|
|
|
|
|
|
const convertedData = convertRecentData(filesArray[i], folderInfo);
|
|
|
|
|
|
|
|
if (Object.keys(convertedData).length !== 0)
|
|
|
|
recentFilesArray.push(convertedData);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (
|
2021-07-27 16:05:18 +00:00
|
|
|
config.documentType === presentation &&
|
2021-07-27 13:00:30 +00:00
|
|
|
filesArray[i].fileType === 6 &&
|
|
|
|
filesArray[i].rootFolderType !== FolderType.SHARE
|
2021-07-27 06:51:56 +00:00
|
|
|
) {
|
|
|
|
const folderInfo = await getFolderInfo(filesArray[i].folderId);
|
|
|
|
|
|
|
|
const convertedData = convertRecentData(filesArray[i], folderInfo);
|
|
|
|
|
|
|
|
if (Object.keys(convertedData).length !== 0)
|
|
|
|
recentFilesArray.push(convertedData);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
config.editorConfig = {
|
|
|
|
...config.editorConfig,
|
|
|
|
recent: recentFilesArray,
|
|
|
|
};
|
|
|
|
}
|
2021-03-05 18:15:48 +00:00
|
|
|
|
2021-03-28 19:59:36 +00:00
|
|
|
if (
|
|
|
|
config &&
|
|
|
|
config.document.permissions.edit &&
|
2021-04-27 10:48:32 +00:00
|
|
|
config.document.permissions.modifyFilter &&
|
|
|
|
fileInfo
|
2021-03-28 19:59:36 +00:00
|
|
|
) {
|
2021-03-31 13:49:14 +00:00
|
|
|
const sharingSettings = await SharingDialog.getSharingSettings(fileId);
|
|
|
|
config.document.info = {
|
|
|
|
...config.document.info,
|
|
|
|
sharingSettings,
|
|
|
|
};
|
2021-03-26 15:27:30 +00:00
|
|
|
}
|
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
setIsLoading(false);
|
|
|
|
|
|
|
|
loadDocApi(docApiUrl, () => onLoad(config));
|
2021-03-05 18:15:48 +00:00
|
|
|
} catch (error) {
|
|
|
|
console.log(error);
|
|
|
|
toastr.error(
|
|
|
|
typeof error === "string" ? error : error.message,
|
|
|
|
null,
|
|
|
|
0,
|
|
|
|
true
|
|
|
|
);
|
|
|
|
}
|
2021-03-06 15:50:06 +00:00
|
|
|
};
|
|
|
|
|
2021-07-27 06:51:56 +00:00
|
|
|
const convertRecentData = (file, folder) => {
|
|
|
|
let obj = {};
|
|
|
|
const folderName = folder.title;
|
|
|
|
const fileName = file.title;
|
|
|
|
const url = file.webUrl;
|
2021-07-28 08:02:44 +00:00
|
|
|
if (fileId !== file.id)
|
2021-07-27 06:51:56 +00:00
|
|
|
obj = {
|
|
|
|
folder: folderName,
|
|
|
|
title: fileName,
|
|
|
|
url: url,
|
|
|
|
};
|
|
|
|
return obj;
|
|
|
|
};
|
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
const isIPad = () => {
|
|
|
|
return isIOS && deviceType === "tablet";
|
|
|
|
};
|
|
|
|
|
|
|
|
const setFavicon = (fileType) => {
|
|
|
|
const favicon = document.getElementById("favicon");
|
|
|
|
if (!favicon) return;
|
|
|
|
let icon = null;
|
|
|
|
switch (fileType) {
|
|
|
|
case "docx":
|
|
|
|
icon = "text.ico";
|
|
|
|
break;
|
|
|
|
case "pptx":
|
|
|
|
icon = "presentation.ico";
|
|
|
|
break;
|
|
|
|
case "xlsx":
|
|
|
|
icon = "spreadsheet.ico";
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (icon) favicon.href = `${homepage}/images/${icon}`;
|
|
|
|
};
|
|
|
|
|
|
|
|
const changeTitle = (docSaved, docTitle) => {
|
|
|
|
docSaved ? setDocumentTitle(docTitle) : setDocumentTitle(`*${docTitle}`);
|
|
|
|
};
|
|
|
|
|
|
|
|
const setDocumentTitle = (subTitle = null) => {
|
|
|
|
//const { isAuthenticated, settingsStore, product: currentModule } = auth;
|
|
|
|
//const { organizationName } = settingsStore;
|
|
|
|
const organizationName = "ONLYOFFICE"; //TODO: Replace to API variant
|
|
|
|
const moduleTitle = "Documents"; //TODO: Replace to API variant
|
|
|
|
|
|
|
|
let title;
|
|
|
|
if (subTitle) {
|
|
|
|
if (isAuthenticated && moduleTitle) {
|
|
|
|
title = subTitle + " - " + moduleTitle;
|
|
|
|
} else {
|
|
|
|
title = subTitle + " - " + organizationName;
|
|
|
|
}
|
|
|
|
} else if (moduleTitle && organizationName) {
|
|
|
|
title = moduleTitle + " - " + organizationName;
|
|
|
|
} else {
|
|
|
|
title = organizationName;
|
|
|
|
}
|
|
|
|
|
|
|
|
document.title = title;
|
|
|
|
};
|
|
|
|
|
|
|
|
const loadDocApi = (docApiUrl, onLoadCallback) => {
|
2021-03-05 18:15:48 +00:00
|
|
|
const script = document.createElement("script");
|
|
|
|
script.setAttribute("type", "text/javascript");
|
|
|
|
script.setAttribute("id", "scripDocServiceAddress");
|
|
|
|
|
|
|
|
script.onload = onLoadCallback;
|
|
|
|
|
|
|
|
script.src = docApiUrl;
|
|
|
|
script.async = true;
|
|
|
|
|
|
|
|
console.log("PureEditor componentDidMount: added script");
|
|
|
|
document.body.appendChild(script);
|
|
|
|
};
|
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
const onLoad = (config) => {
|
2021-03-05 18:15:48 +00:00
|
|
|
console.log("Editor config: ", config);
|
2021-03-26 12:05:41 +00:00
|
|
|
|
2021-03-05 18:15:48 +00:00
|
|
|
try {
|
|
|
|
console.log(config);
|
|
|
|
|
|
|
|
docTitle = config.document.title;
|
|
|
|
fileType = config.document.fileType;
|
|
|
|
|
|
|
|
setFavicon(fileType);
|
|
|
|
setDocumentTitle(docTitle);
|
|
|
|
|
|
|
|
if (window.innerWidth < 720) {
|
|
|
|
config.type = "mobile";
|
|
|
|
}
|
|
|
|
|
2021-04-27 10:48:32 +00:00
|
|
|
let goback;
|
2021-03-31 13:49:14 +00:00
|
|
|
|
2021-04-27 10:48:32 +00:00
|
|
|
if (fileInfo) {
|
|
|
|
const filterObj = FilesFilter.getDefault();
|
|
|
|
filterObj.folder = fileInfo.folderId;
|
|
|
|
const urlFilter = filterObj.toUrlParams();
|
|
|
|
|
|
|
|
goback = {
|
2021-03-28 14:49:51 +00:00
|
|
|
blank: true,
|
|
|
|
requestClose: false,
|
|
|
|
text: i18n.t("FileLocation"),
|
2021-03-29 16:31:11 +00:00
|
|
|
url: `${combineUrl(filesUrl, `/filter?${urlFilter}`)}`,
|
2021-04-27 10:48:32 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
config.editorConfig.customization = {
|
|
|
|
...config.editorConfig.customization,
|
|
|
|
goback,
|
2021-03-28 14:49:51 +00:00
|
|
|
};
|
|
|
|
|
2021-08-05 11:05:09 +00:00
|
|
|
if (url.indexOf("anchor") !== -1) {
|
|
|
|
const splitUrl = url.split("anchor=");
|
|
|
|
const decodeURI = decodeURIComponent(splitUrl[1]);
|
|
|
|
const obj = JSON.parse(decodeURI);
|
|
|
|
|
|
|
|
config.editorConfig.actionLink = {
|
|
|
|
action: obj.action,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2021-08-05 16:10:08 +00:00
|
|
|
if (successAuth) {
|
|
|
|
const documentType = config.documentType;
|
|
|
|
const fileExt =
|
|
|
|
documentType === text
|
|
|
|
? "docx"
|
|
|
|
: documentType === presentation
|
|
|
|
? "pptx"
|
|
|
|
: "xlsx";
|
|
|
|
|
|
|
|
const defaultFileName = getDefaultFileName(fileExt);
|
|
|
|
|
|
|
|
config.editorConfig.createUrl = combineUrl(
|
|
|
|
window.location.origin,
|
|
|
|
AppServerConfig.proxyURL,
|
|
|
|
"products/files/",
|
|
|
|
`/httphandlers/filehandler.ashx?action=create&doctype=text&title=${encodeURIComponent(
|
|
|
|
defaultFileName
|
|
|
|
)}`
|
|
|
|
);
|
|
|
|
}
|
2021-07-30 12:16:53 +00:00
|
|
|
let onRequestSharingSettings,
|
|
|
|
onRequestRename,
|
2021-08-02 08:05:30 +00:00
|
|
|
onRequestSaveAs,
|
2021-08-04 08:32:14 +00:00
|
|
|
onRequestInsertImage,
|
|
|
|
onRequestMailMergeRecipients;
|
2021-04-27 10:48:32 +00:00
|
|
|
|
|
|
|
if (
|
|
|
|
fileInfo &&
|
|
|
|
config.document.permissions.edit &&
|
|
|
|
config.document.permissions.modifyFilter
|
|
|
|
) {
|
|
|
|
onRequestSharingSettings = onSDKRequestSharingSettings;
|
2021-07-27 07:36:21 +00:00
|
|
|
onRequestRename = onSDKRequestRename;
|
2021-04-27 10:48:32 +00:00
|
|
|
}
|
|
|
|
|
2021-07-28 08:02:44 +00:00
|
|
|
if (successAuth) {
|
2021-07-30 12:13:10 +00:00
|
|
|
onRequestSaveAs = onSDKRequestSaveAs;
|
2021-08-02 08:05:30 +00:00
|
|
|
onRequestInsertImage = onSDKRequestInsertImage;
|
2021-08-04 08:32:14 +00:00
|
|
|
onRequestMailMergeRecipients = onSDKRequestMailMergeRecipients;
|
2021-04-27 10:48:32 +00:00
|
|
|
}
|
|
|
|
|
2021-03-05 18:15:48 +00:00
|
|
|
const events = {
|
|
|
|
events: {
|
2021-03-06 15:50:06 +00:00
|
|
|
onAppReady: onSDKAppReady,
|
|
|
|
onDocumentStateChange: onDocumentStateChange,
|
|
|
|
onMetaChange: onMetaChange,
|
|
|
|
onDocumentReady: onDocumentReady,
|
|
|
|
onInfo: onSDKInfo,
|
|
|
|
onWarning: onSDKWarning,
|
|
|
|
onError: onSDKError,
|
2021-04-27 10:48:32 +00:00
|
|
|
onRequestSharingSettings,
|
2021-07-27 07:36:21 +00:00
|
|
|
onRequestRename,
|
2021-08-05 11:05:09 +00:00
|
|
|
onMakeActionLink: onMakeActionLink,
|
2021-07-08 10:57:53 +00:00
|
|
|
onRequestInsertImage,
|
2021-07-09 07:49:57 +00:00
|
|
|
onRequestSaveAs,
|
2021-08-04 08:32:14 +00:00
|
|
|
onRequestMailMergeRecipients,
|
2021-03-05 18:15:48 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
const newConfig = Object.assign(config, events);
|
|
|
|
|
|
|
|
if (!window.DocsAPI) throw new Error("DocsAPI is not defined");
|
|
|
|
|
2021-03-26 12:05:41 +00:00
|
|
|
docEditor = window.DocsAPI.DocEditor("editor", newConfig);
|
2021-03-05 18:15:48 +00:00
|
|
|
} catch (error) {
|
|
|
|
console.log(error);
|
|
|
|
toastr.error(error.message, null, 0, true);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
const onSDKAppReady = () => {
|
2021-03-26 14:35:44 +00:00
|
|
|
console.log("ONLYOFFICE Document Editor is ready");
|
2021-08-05 16:10:08 +00:00
|
|
|
|
|
|
|
const index = url.indexOf("#message/");
|
|
|
|
if (index > -1) {
|
|
|
|
const splitUrl = url.split("#message/");
|
|
|
|
const message = decodeURIComponent(splitUrl[1]).replaceAll("+", " ");
|
|
|
|
history.pushState({}, null, url.substring(0, index));
|
2021-08-16 08:21:14 +00:00
|
|
|
docEditor.showMessage(message);
|
2021-08-05 16:10:08 +00:00
|
|
|
}
|
2021-03-05 18:15:48 +00:00
|
|
|
};
|
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
const onSDKInfo = (event) => {
|
2021-03-05 18:15:48 +00:00
|
|
|
console.log(
|
|
|
|
"ONLYOFFICE Document Editor is opened in mode " + event.data.mode
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2021-03-31 13:49:14 +00:00
|
|
|
const [isVisible, setIsVisible] = useState(false);
|
2021-07-09 07:51:26 +00:00
|
|
|
const [isFileDialogVisible, setIsFileDialogVisible] = useState(false);
|
2021-07-09 07:49:57 +00:00
|
|
|
const [isFolderDialogVisible, setIsFolderDialogVisible] = useState(false);
|
2021-08-04 09:42:59 +00:00
|
|
|
const [filesType, setFilesType] = useState("");
|
2021-03-31 13:49:14 +00:00
|
|
|
|
2021-03-26 12:05:41 +00:00
|
|
|
const onSDKRequestSharingSettings = () => {
|
2021-03-31 13:49:14 +00:00
|
|
|
setIsVisible(true);
|
|
|
|
};
|
|
|
|
|
2021-07-27 07:36:21 +00:00
|
|
|
const onSDKRequestRename = (event) => {
|
|
|
|
const title = event.data;
|
|
|
|
updateFile(fileInfo.id, title);
|
|
|
|
};
|
|
|
|
|
2021-08-05 11:05:09 +00:00
|
|
|
const onMakeActionLink = (event) => {
|
|
|
|
var ACTION_DATA = event.data;
|
|
|
|
|
|
|
|
const link = generateLink(ACTION_DATA);
|
|
|
|
|
|
|
|
const urlFormation = !config.editorConfig.actionLink
|
|
|
|
? url
|
|
|
|
: url.split("&anchor=")[0];
|
|
|
|
|
|
|
|
const linkFormation = `${urlFormation}&anchor=${link}`;
|
|
|
|
|
|
|
|
docEditor.setActionLink(linkFormation);
|
|
|
|
};
|
|
|
|
|
|
|
|
const generateLink = (actionData) => {
|
|
|
|
return encodeURIComponent(JSON.stringify(actionData));
|
|
|
|
};
|
|
|
|
|
2021-03-31 13:49:14 +00:00
|
|
|
const onCancel = () => {
|
|
|
|
setIsVisible(false);
|
2021-03-26 12:05:41 +00:00
|
|
|
};
|
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
const onSDKWarning = (event) => {
|
2021-03-05 18:15:48 +00:00
|
|
|
console.log(
|
|
|
|
"ONLYOFFICE Document Editor reports a warning: code " +
|
|
|
|
event.data.warningCode +
|
|
|
|
", description " +
|
|
|
|
event.data.warningDescription
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
const onSDKError = (event) => {
|
2021-03-05 18:15:48 +00:00
|
|
|
console.log(
|
|
|
|
"ONLYOFFICE Document Editor reports an error: code " +
|
|
|
|
event.data.errorCode +
|
|
|
|
", description " +
|
|
|
|
event.data.errorDescription
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
const onDocumentStateChange = (event) => {
|
2021-03-05 18:15:48 +00:00
|
|
|
if (!documentIsReady) return;
|
|
|
|
|
|
|
|
docSaved = !event.data;
|
|
|
|
throttledChangeTitle();
|
|
|
|
};
|
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
const onDocumentReady = () => {
|
2021-03-05 18:15:48 +00:00
|
|
|
documentIsReady = true;
|
|
|
|
};
|
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
const onMetaChange = (event) => {
|
2021-03-05 18:15:48 +00:00
|
|
|
const newTitle = event.data.title;
|
2021-07-27 15:55:59 +00:00
|
|
|
const favorite = event.data.favorite;
|
|
|
|
|
2021-03-05 18:15:48 +00:00
|
|
|
if (newTitle && newTitle !== docTitle) {
|
|
|
|
setDocumentTitle(newTitle);
|
|
|
|
docTitle = newTitle;
|
|
|
|
}
|
2021-07-27 15:55:59 +00:00
|
|
|
|
|
|
|
if (!newTitle)
|
|
|
|
favorite
|
|
|
|
? markAsFavorite([+fileId])
|
|
|
|
.then(() => updateFavorite(favorite))
|
|
|
|
.catch((error) => console.log("error", error))
|
|
|
|
: removeFromFavorite([+fileId])
|
|
|
|
.then(() => updateFavorite(favorite))
|
|
|
|
.catch((error) => console.log("error", error));
|
2021-03-05 18:15:48 +00:00
|
|
|
};
|
|
|
|
|
2021-08-02 08:05:30 +00:00
|
|
|
const onSDKRequestInsertImage = (event) => {
|
2021-08-04 08:32:14 +00:00
|
|
|
setFilesType(insertImageAction);
|
|
|
|
setIsFileDialogVisible(true);
|
|
|
|
};
|
|
|
|
|
|
|
|
const onSDKRequestMailMergeRecipients = (event) => {
|
|
|
|
setFilesType(mailMergeAction);
|
2021-07-09 07:51:26 +00:00
|
|
|
setIsFileDialogVisible(true);
|
2021-07-08 10:57:53 +00:00
|
|
|
};
|
|
|
|
|
2021-08-13 11:50:24 +00:00
|
|
|
const onSelectFile = async (file) => {
|
2021-07-29 11:04:30 +00:00
|
|
|
console.log("onSelectFile", file);
|
2021-08-13 11:50:24 +00:00
|
|
|
|
|
|
|
const link = await getPresignedUri(file.id);
|
|
|
|
|
|
|
|
if (filesType === insertImageAction) insertImage(link);
|
|
|
|
if (filesType === mailMergeAction) mailMerge(link);
|
2021-07-08 10:57:53 +00:00
|
|
|
};
|
|
|
|
|
2021-07-09 07:51:26 +00:00
|
|
|
const onCloseFileDialog = () => {
|
|
|
|
setIsFileDialogVisible(false);
|
2021-07-08 10:57:53 +00:00
|
|
|
};
|
|
|
|
|
2021-07-30 12:13:10 +00:00
|
|
|
const onSDKRequestSaveAs = (event) => {
|
2021-07-29 11:35:27 +00:00
|
|
|
setTitleSelectorFolder(event.data.title);
|
|
|
|
setUrlSelectorFolder(event.data.url);
|
2021-08-03 07:09:08 +00:00
|
|
|
setExtension(event.data.title.split(".").pop());
|
2021-07-09 07:49:57 +00:00
|
|
|
|
2021-07-29 11:35:27 +00:00
|
|
|
setIsFolderDialogVisible(true);
|
2021-07-09 07:49:57 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const onCloseFolderDialog = () => {
|
|
|
|
setIsFolderDialogVisible(false);
|
2021-07-29 11:35:27 +00:00
|
|
|
setNewOpenTab(false);
|
2021-07-09 07:49:57 +00:00
|
|
|
};
|
|
|
|
|
2021-07-29 11:35:27 +00:00
|
|
|
const onClickSaveSelectFolder = (e, folderId) => {
|
|
|
|
console.log(
|
|
|
|
"onClickSave editor",
|
|
|
|
e,
|
|
|
|
"folderId",
|
|
|
|
folderId,
|
|
|
|
"titleSelectorFolder",
|
|
|
|
titleSelectorFolder,
|
|
|
|
"urlSelectorFolder",
|
|
|
|
urlSelectorFolder,
|
|
|
|
"openNewTab",
|
|
|
|
openNewTab
|
|
|
|
);
|
2021-08-03 09:04:18 +00:00
|
|
|
|
|
|
|
SaveAs(titleSelectorFolder, urlSelectorFolder, folderId, openNewTab);
|
2021-07-29 11:04:30 +00:00
|
|
|
};
|
2021-07-29 11:35:27 +00:00
|
|
|
|
2021-07-29 11:04:30 +00:00
|
|
|
const onChangeInput = (e) => {
|
2021-07-29 11:35:27 +00:00
|
|
|
setTitleSelectorFolder(e.target.value);
|
|
|
|
};
|
2021-08-04 08:32:14 +00:00
|
|
|
|
2021-07-29 11:35:27 +00:00
|
|
|
const onClickCheckbox = () => {
|
|
|
|
setNewOpenTab(!openNewTab);
|
2021-07-29 11:04:30 +00:00
|
|
|
};
|
2021-08-04 08:32:14 +00:00
|
|
|
|
|
|
|
const insertImageActionProps = {
|
|
|
|
isImageOnly: true,
|
|
|
|
};
|
|
|
|
|
|
|
|
const mailMergeActionProps = {
|
|
|
|
isTablesOnly: true,
|
|
|
|
searchParam: "xlsx",
|
|
|
|
};
|
|
|
|
|
|
|
|
const SelectFileHeader = () => (
|
2021-08-04 09:42:59 +00:00
|
|
|
<StyledSelectFile>
|
|
|
|
<Text className="editor-select-file_text">
|
|
|
|
{filesType === insertImageAction
|
|
|
|
? i18n.t("ImageFileType")
|
|
|
|
: i18n.t("MailMergeFileType")}
|
|
|
|
</Text>
|
|
|
|
</StyledSelectFile>
|
2021-08-04 08:32:14 +00:00
|
|
|
);
|
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
return (
|
|
|
|
<Box
|
|
|
|
widthProp="100vw"
|
|
|
|
heightProp={isIPad() ? "calc(var(--vh, 1vh) * 100)" : "100vh"}
|
|
|
|
>
|
|
|
|
<Toast />
|
2021-03-30 11:03:43 +00:00
|
|
|
|
2021-03-06 15:50:06 +00:00
|
|
|
{!isLoading ? (
|
2021-03-26 14:18:43 +00:00
|
|
|
<>
|
|
|
|
<div id="editor"></div>
|
2021-04-27 10:48:32 +00:00
|
|
|
{fileInfo && (
|
|
|
|
<SharingDialog
|
|
|
|
isVisible={isVisible}
|
|
|
|
sharingObject={fileInfo}
|
|
|
|
onCancel={onCancel}
|
|
|
|
onSuccess={updateUsersRightsList}
|
|
|
|
/>
|
|
|
|
)}
|
2021-07-08 10:57:53 +00:00
|
|
|
|
2021-07-30 16:23:23 +00:00
|
|
|
{isFileDialogVisible && (
|
|
|
|
<SelectFileDialog
|
|
|
|
onSelectFile={onSelectFile}
|
|
|
|
isPanelVisible={isFileDialogVisible}
|
|
|
|
onClose={onCloseFileDialog}
|
|
|
|
foldersType="editor"
|
2021-08-04 08:32:14 +00:00
|
|
|
{...(filesType === insertImageAction
|
|
|
|
? insertImageActionProps
|
|
|
|
: mailMergeActionProps)}
|
|
|
|
header={<SelectFileHeader />}
|
2021-07-30 16:23:23 +00:00
|
|
|
headerName={i18n.t("SelectFileTitle")}
|
|
|
|
modalHeightContent="252px"
|
|
|
|
/>
|
|
|
|
)}
|
2021-07-09 07:49:57 +00:00
|
|
|
|
2021-07-29 16:41:49 +00:00
|
|
|
{isFolderDialogVisible && (
|
|
|
|
<SelectFolderDialog
|
|
|
|
showButtons
|
|
|
|
isPanelVisible={isFolderDialogVisible}
|
2021-08-03 09:04:18 +00:00
|
|
|
isSetFolderImmediately
|
2021-07-30 16:23:23 +00:00
|
|
|
asideHeightContent="calc(100% - 50px)"
|
2021-07-29 16:41:49 +00:00
|
|
|
onClose={onCloseFolderDialog}
|
|
|
|
foldersType="editor"
|
|
|
|
onSave={onClickSaveSelectFolder}
|
|
|
|
header={
|
2021-08-04 09:42:59 +00:00
|
|
|
<StyledSelectFolder>
|
|
|
|
<Text className="editor-select-folder_text">
|
2021-07-29 16:41:49 +00:00
|
|
|
{i18n.t("FileName")}
|
|
|
|
</Text>
|
|
|
|
<TextInput
|
2021-08-04 09:42:59 +00:00
|
|
|
className="editor-select-folder_text-input"
|
2021-07-29 16:41:49 +00:00
|
|
|
scale
|
|
|
|
onChange={onChangeInput}
|
|
|
|
value={titleSelectorFolder}
|
|
|
|
/>
|
2021-08-04 09:42:59 +00:00
|
|
|
</StyledSelectFolder>
|
2021-07-29 16:41:49 +00:00
|
|
|
}
|
|
|
|
headerName={i18n.t("FolderForSave")}
|
2021-08-03 07:09:08 +00:00
|
|
|
{...(extension !== "fb2" && {
|
|
|
|
footer: (
|
2021-08-04 09:42:59 +00:00
|
|
|
<StyledSelectFolder>
|
|
|
|
<Checkbox
|
|
|
|
className="editor-select-folder_checkbox"
|
|
|
|
label={i18n.t("OpenSavedDocument")}
|
|
|
|
onChange={onClickCheckbox}
|
|
|
|
isChecked={openNewTab}
|
|
|
|
/>
|
|
|
|
</StyledSelectFolder>
|
2021-08-03 07:09:08 +00:00
|
|
|
),
|
|
|
|
})}
|
2021-07-29 16:41:49 +00:00
|
|
|
/>
|
|
|
|
)}
|
2021-03-26 14:18:43 +00:00
|
|
|
</>
|
2021-03-06 15:50:06 +00:00
|
|
|
) : (
|
|
|
|
<Box paddingProp="16px">
|
|
|
|
<Loaders.Rectangle height="96vh" />
|
|
|
|
</Box>
|
|
|
|
)}
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|
2021-03-05 18:15:48 +00:00
|
|
|
|
2021-03-31 13:49:14 +00:00
|
|
|
export default Editor;
|