Web: Client: JavascriptSDK: translations were corrected

packages/client/public/locales/en/JavascriptSdk.json

@@ -13,19 +13,20 @@
   "Chat": "Chat",
   "Code": "Code to insert",
   "CopyWindowCode": "Copy window embed code",
-  "CreateSampleHeader": "Create sample DocSpace embed",
+  "CreateSampleHeader": "Select a mode for embedding your DocSpace",
-  "CSPDescription": "To safely embed DocSpace as an iframe in a website, add its URL to your allow list.",
+  "CSPDescription": "To start the embedding process, add the DocSpace URL to the allow list.",
-  "CSPHeader": "Embed DocSpace as iframe",
+  "CSPHeader": "Enter the address of DocSpace to embed",
   "CSPHelp": "This setting is a security mechanism that can be used to protect against content injection attacks. The CSP describes secure resource download sources. Downloading from resources not included in the `white list` is blocked. Specify the domains (together with the protocol) with which it will work.",
   "CSPInputPlaceholder": "Enter URL like this: https://example.com",
+  "CSPUrlHelp": "Enter the DocSpace domain name without URL paths or additional characters.",
   "CustomizingDisplay": "Customizing the display",
   "DataDisplay": "Data display settings",
   "DefaultColumnsOption": "Default (Quantity depends on screen width)",
   "Descending": "Descending",
   "DisplayColumns": "Displaying columns in a file row",
+  "DocspaceDescription": "Embed the whole DocSpace to allow users to interact with all rooms, files, and settings.",
   "Editor": "Editor",
-  "EditorDescription": "Allows you to open the SDK as a document editor for editing by specifying the id parameter for a file.",
+  "EditorDescription": "Embed an editor to allow users to edit a file from the corresponding room.",
-  "EditorPresetDescription": "This mode allows you to open the SDK as a document editor for editing by specifying the id parameter for a file.",
   "ElementCalledAfterClicking": "The element will be called after clicking",
   "ElementItself": "The element itself",
   "EmbedCodeSuccessfullyCopied": "Embed code successfully copied to clipboard",
@@ -37,8 +38,7 @@
   "FeedbackAndSupport": "Feedback&Support",
   "FileId": "File ID",
   "FileSelector": "File selector",
-  "FileSelectorDescription": "Opens the file selector and allows you to select a file from a list of available files.",
+  "FileSelectorDescription": "Embed a file selector to allow users to access any file from the list of the available ones.",
-  "FileSelectorPresetDescription": "Use this mode to display the file selector. It allows selecting a file from the list of the available ones.",
   "FilesSearchDescription": "File search within the opened folder/room.",
   "FileTypeDisplay": "File type display",
   "Filter": "Search, Filter and Sort",
@@ -46,16 +46,15 @@
   "GetCode": "Get code to insert",
   "Header": "Header",
   "HeaderDescription": "You can disable header in the mobile version to limit access to the DocSpace sections (just like disabling the left menu in the desktop version).",
-  "InitializeSDK": "Initialize the SDK in the following modes",
+  "InitializeSDK": "Select one of the suggested modes or use Custom to configure all the parameters manually.",
   "InLeftPanel": "in the left panel",
   "InterfaceElements": "Interface elements",
   "ItemsCount": "Items count on one page",
   "ItemsCountDescription": "You can specify the number of files / folders displayed on one page, as well as specify which page to start displaying",
   "JavascriptSdk": "Javascript SDK",
   "MainElementParameter": "Main element parameter",
-  "Manager": "Manager",
+  "Custom": "Custom",
-  "ManagerDescription": "Displays a list of entities depending on the specified rootPath. It allows you to create rooms, folders, and files and work with them.",
+  "CustomDescription": "Manually configure the parameters for embedding your DocSpace.",
-  "ManagerPresetDescription": "Use this mode to display a list of entities depending on the specified rootPath. It allows creating and working with rooms, folders and files.",
   "ManagerSearchBlockDescription": "You can disable the search, filter and sort options.",
   "ManagerTitleDescription": "You can disable the title of the current section/room/folder.",
   "Menu": "Left menu",
@@ -67,12 +66,11 @@
   "RoomOrFolder": "Room or Folder",
   "RoomOrFolderDescription": "You can select the section, room or folder you want to display",
   "RoomSelector": "Room selector",
-  "RoomSelectorDescription": "Opens the room selector and allows you to select a room from a list of the available rooms.",
+  "RoomSelectorDescription": "Embed a room selector to allow users to access any room from the list of the available ones. ",
-  "RoomSelectorPresetDescription": "Use this mode to display the room selector. It allows selecting a room from the list of the available ones.",
   "RoomTypeDisplay": "Room type display",
   "Rotate": "Rotate",
   "Scale": "Scale",
-  "SDKDescription": "Using JavaScript SDK, you can embed one of the available ONLYOFFICE DocSpace modes into your web interface as an iframe (file manager, room or file selector, editor and viewer). Here, you can find settings for creating a sample iframe using modes and configuring CSP. To use the complete SDK, please refer to the ",
+  "SDKDescription": "JavaScript SDK allows you to embed the whole DocSpace or its part into your web interface. Select ready-to-use modes with the pre-defined parameters or a custom one to configure it manually. To learn more about SDK, refer to the ",
   "SearchBlock": "Search block",
   "SearchTerm": "Search term",
   "SelectButtonText": "Select Button text",
@@ -85,16 +83,13 @@
   "SetItUp": "Set it up",
   "SettingUpColumns": "Setting up Columns",
   "SettingUpColumnsDescription": "You can disable the ability for users to manage and customize file information columns in list view.",
-  "SetUp": "SET UP",
+  "SetUp": "Start setting up",
-  "SimpleRoom": "Simple Room",
+  "PublicRoomDescription": "Embed a public room to allow users to view all the documents stored there without registration.",
-  "SimpleRoomDescription": "Opens the room selector and allows you to select a room from a list of the available rooms.",
-  "SimpleRoomPresetDescription": "Use this mode to display a list of entities depending on the specified rootPath. It allows creating and working with rooms, folders and files.",
   "SortOrder": "Sort order",
   "Subtitle": "Subtitle",
   "SubtitleDescription": "Subtitle with additional comments or descriptions for the current directory.",
   "TabPlugins": "Tab Plugins",
   "Title": "Navigate and Title",
   "Viewer": "Viewer",
-  "ViewerDescription": "Allows you to open the SDK as a document editor for viewing by specifying the id parameter for a file.",
+  "ViewerDescription": "Embed a viewer to allow users to open a file for viewing from the corresponding room."
-  "ViewerPresetDescription": "Allows you to open the SDK as a document editor for viewing by specifying the id parameter for a file."
 }

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js

@@ -101,14 +101,14 @@ const PortalIntegration = (props) => {
 
   const presetsData = [
     {
-      title: t("Common:Room"),
+      title: "DocSpace",
-      description: t("SimpleRoomDescription"),
+      description: t("DocspaceDescription"),
       image: theme.isBase ? DocspaceImg : DocspaceImgDark,
       handleOnClick: navigateToSimpleRoom,
     },
     {
-      title: t("Common:Room"),
+      title: t("Files:PublicRoom"),
-      description: t("SimpleRoomDescription"),
+      description: t("PublicRoomDescription"),
       image: theme.isBase ? PublicRoomImg : PublicRoomImgDark,
       handleOnClick: navigateToSimpleRoom,
     },
@@ -137,8 +137,8 @@ const PortalIntegration = (props) => {
       handleOnClick: navigateToFileSelector,
     },
     {
-      title: t("Manager"),
+      title: t("Custom"),
-      description: t("ManagerDescription"),
+      description: t("CustomDescription"),
       image: theme.isBase ? CustomImg : CustomImgDark,
       handleOnClick: navigateToManager,
     },

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js

@@ -202,7 +202,7 @@ const Editor = (props) => {
   return (
     <SDKContainer>
       <CategoryDescription>
-        <Text className="sdk-description">{t("EditorPresetDescription")}</Text>
+        <Text className="sdk-description">{t("EditorDescription")}</Text>
       </CategoryDescription>
       <CategoryHeader>{t("CreateSampleHeader")}</CategoryHeader>
       <Container>

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js

@@ -385,7 +385,7 @@ const FileSelector = (props) => {
   return (
     <SDKContainer>
       <CategoryDescription>
-        <Text className="sdk-description">{t("FileSelectorPresetDescription")}</Text>
+        <Text className="sdk-description">{t("FileSelectorDescription")}</Text>
       </CategoryDescription>
       <CategoryHeader>{t("CreateSampleHeader")}</CategoryHeader>
       <Container>

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js

@@ -668,7 +668,7 @@ const Manager = (props) => {
   return (
     <SDKContainer>
       <CategoryDescription>
-        <Text className="sdk-description">{t("ManagerPresetDescription")}</Text>
+        <Text className="sdk-description">{t("CustomDescription")}</Text>
       </CategoryDescription>
       <CategoryHeader>{t("CreateSampleHeader")}</CategoryHeader>
       <Container>

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js

@@ -291,7 +291,7 @@ const RoomSelector = (props) => {
   return (
     <SDKContainer>
       <CategoryDescription>
-        <Text className="sdk-description">{t("RoomSelectorPresetDescription")}</Text>
+        <Text className="sdk-description">{t("RoomSelectorDescription")}</Text>
       </CategoryDescription>
       <CategoryHeader>{t("CreateSampleHeader")}</CategoryHeader>
       <Container>

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js

@@ -56,9 +56,13 @@ const SimpleRoom = (props) => {
   const [widthDimension, setWidthDimension] = useState(dataDimensions[0]);
   const [heightDimension, setHeightDimension] = useState(dataDimensions[1]);
   const [width, setWidth] = useState("100");
-  const [height, setHeight] = useState(isTablet() ? "400" : isMobile() ? "206" : "600");
+  const [height, setHeight] = useState(
+    isTablet() ? "400" : isMobile() ? "206" : "600",
+  );
   const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false);
-  const [showPreview, setShowPreview] = useState(window.innerWidth > showPreviewThreshold);
+  const [showPreview, setShowPreview] = useState(
+    window.innerWidth > showPreviewThreshold,
+  );
   const [sharedLinks, setSharedLinks] = useState(null);
 
   const [config, setConfig] = useState({
@@ -100,7 +104,9 @@ const SimpleRoom = (props) => {
 
     const params = objectToGetParams(config);
 
-    loadScript(`${scriptUrl}${params}`, "integration", () => window.DocSpace.SDK.initFrame(config));
+    loadScript(`${scriptUrl}${params}`, "integration", () =>
+      window.DocSpace.SDK.initFrame(config),
+    );
   }, 500);
 
   useEffect(() => {
@@ -193,7 +199,8 @@ const SimpleRoom = (props) => {
 
   const onResize = () => {
     const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold;
-    if (isEnoughWidthForPreview !== showPreview) setShowPreview(isEnoughWidthForPreview);
+    if (isEnoughWidthForPreview !== showPreview)
+      setShowPreview(isEnoughWidthForPreview);
   };
 
   useEffect(() => {
@@ -227,7 +234,9 @@ const SimpleRoom = (props) => {
 
   const code = (
     <CodeWrapper>
-      <CategorySubHeader className="copy-window-code">{t("CopyWindowCode")}</CategorySubHeader>
+      <CategorySubHeader className="copy-window-code">
+        {t("CopyWindowCode")}
+      </CategorySubHeader>
       <Textarea value={codeBlock} heightTextArea={153} />
     </CodeWrapper>
   );
@@ -248,7 +257,7 @@ const SimpleRoom = (props) => {
   return (
     <SDKContainer>
       <CategoryDescription>
-        <Text className="sdk-description">{t("SimpleRoomPresetDescription")}</Text>
+        <Text className="sdk-description">{t("PublicRoomDescription")}</Text>
       </CategoryDescription>
       <CategoryHeader>{t("CreateSampleHeader")}</CategoryHeader>
       <Container>
@@ -270,22 +279,33 @@ const SimpleRoom = (props) => {
                 <HelpButton
                   offsetRight={0}
                   size={12}
-                  tooltipContent={<Text fontSize="12px">{t("RoomOrFolderDescription")}</Text>}
+                  tooltipContent={
+                    <Text fontSize="12px">{t("RoomOrFolderDescription")}</Text>
+                  }
                 />
               </LabelGroup>
               <FilesSelectorInputWrapper>
-                <FilesSelectorInput onSelectFolder={onChangeFolderId} isSelect isRoomsOnly />
+                <FilesSelectorInput
+                  onSelectFolder={onChangeFolderId}
+                  isSelect
+                  isRoomsOnly
+                />
               </FilesSelectorInputWrapper>
             </ControlsGroup>
             {sharedLinks && (
               <ControlsGroup>
                 <LabelGroup>
-                  <Label className="label" text={t("SharingPanel:ExternalLink")} />
+                  <Label
+                    className="label"
+                    text={t("SharingPanel:ExternalLink")}
+                  />
                   <HelpButton
                     offsetRight={0}
                     size={12}
                     tooltipContent={
-                      <Text fontSize="12px">{t("CreateEditRoomDialog:PublicRoomDescription")}</Text>
+                      <Text fontSize="12px">
+                        {t("CreateEditRoomDialog:PublicRoomDescription")}
+                      </Text>
                     }
                   />
                 </LabelGroup>

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js

@@ -60,7 +60,9 @@ const Viewer = (props) => {
   const [width, setWidth] = useState("100");
   const [height, setHeight] = useState("100");
   const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false);
-  const [showPreview, setShowPreview] = useState(window.innerWidth > showPreviewThreshold);
+  const [showPreview, setShowPreview] = useState(
+    window.innerWidth > showPreviewThreshold,
+  );
 
   const [config, setConfig] = useState({
     mode: "viewer",
@@ -87,7 +89,9 @@ const Viewer = (props) => {
 
     const params = objectToGetParams(config);
 
-    loadScript(`${scriptUrl}${params}`, "integration", () => window.DocSpace.SDK.initFrame(config));
+    loadScript(`${scriptUrl}${params}`, "integration", () =>
+      window.DocSpace.SDK.initFrame(config),
+    );
   }, 500);
 
   useEffect(() => {
@@ -149,7 +153,8 @@ const Viewer = (props) => {
 
   const onResize = () => {
     const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold;
-    if (isEnoughWidthForPreview !== showPreview) setShowPreview(isEnoughWidthForPreview);
+    if (isEnoughWidthForPreview !== showPreview)
+      setShowPreview(isEnoughWidthForPreview);
   };
 
   useEffect(() => {
@@ -183,7 +188,9 @@ const Viewer = (props) => {
 
   const code = (
     <CodeWrapper>
-      <CategorySubHeader className="copy-window-code">{t("CopyWindowCode")}</CategorySubHeader>
+      <CategorySubHeader className="copy-window-code">
+        {t("CopyWindowCode")}
+      </CategorySubHeader>
       <Textarea value={codeBlock} heightTextArea={153} />
     </CodeWrapper>
   );
@@ -204,7 +211,7 @@ const Viewer = (props) => {
   return (
     <SDKContainer>
       <CategoryDescription>
-        <Text className="sdk-description">{t("ViewerPresetDescription")}</Text>
+        <Text className="sdk-description">{t("ViewerDescription")}</Text>
       </CategoryDescription>
       <CategoryHeader>{t("CreateSampleHeader")}</CategoryHeader>
       <Container>
@@ -389,7 +396,11 @@ export default inject(({ authStore, settingsStore }) => {
     setDocumentTitle,
   };
 })(
-  withTranslation(["JavascriptSdk", "Files", "EmbeddingPanel", "Common", "CreateEditRoomDialog"])(
+  withTranslation([
-    observer(Viewer),
+    "JavascriptSdk",
-  ),
+    "Files",
+    "EmbeddingPanel",
+    "Common",
+    "CreateEditRoomDialog",
+  ])(observer(Viewer)),
 );

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js

@@ -20,11 +20,12 @@ const CategoryHeader = styled.div`
 `;
 
 const Container = styled.div`
-  margin-bottom: 16px;
+  margin-bottom: 4px;
 
   &.description-holder {
     display: block;
     color: ${(props) => props.theme.sdkPresets.secondaryColor};
+    margin-bottom: 16px;
   }
 
   &.description-holder > div {
@@ -49,6 +50,7 @@ const ChipsContainer = styled.div`
   display: flex;
   align-items: center;
   gap: 8px 4px;
+  margin-top: 8px;
   margin-bottom: 16px;
   flex-wrap: wrap;
 `;
@@ -132,6 +134,9 @@ const CSP = ({ t, cspDomains, getCSPSettings, setCSPSettings }) => {
         />
         <SelectorAddButton onClick={addDomain} />
       </Container>
+      <Text lineHeight="20px" color="#A3A9AE">
+        {t("CSPUrlHelp")}
+      </Text>
       <ChipsContainer>{getChips(cspDomains)}</ChipsContainer>
     </>
   );