Client: PortalSettings: Change code block for JS SDK

packages/client/package.json

@@ -43,8 +43,7 @@
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.2",
-    "@lezer/highlight": "^1.2.0",
+    "@uiw/codemirror-theme-github": "^4.21.25",
-    "@uiw/codemirror-themes": "^4.21.24",
     "@uiw/react-codemirror": "^4.21.24",
     "copy-to-clipboard": "^3.3.3",
     "element-resize-detector": "^1.2.4",

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

@@ -102,5 +102,8 @@
   "SubtitleDescription": "Subtitle with additional comments or descriptions for the current directory.",
   "TabPlugins": "Tab Plugins",
   "Viewer": "Viewer",
-  "ViewerDescription": "Embed a viewer to allow users to open a file for viewing from the corresponding room."
+  "ViewerDescription": "Embed a viewer to allow users to open a file for viewing from the corresponding room.",
+  "CodeTitle": "code",
+  "HtmlCodeDescription": "Embedding DocSpace or its part using the <script> tag. Copy the HTML code below and insert it into your HTML file.",
+  "JavaScriptCodeDescription": "Embedding DocSpace or its part using JavaScript. Copy the JavaScript code below."
 }

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

@@ -213,11 +213,21 @@ const DocSpace = (props) => {
   );
 
   const code = (
-    <CodeWrapper>
+    <CodeWrapper height="fit-content">
       <CategorySubHeader className="copy-window-code">
-        {t("CopyWindowCode")}
+        {`HTML ${t("CodeTitle")}`}
       </CategorySubHeader>
+      <Text lineHeight="20px" color={"#A3A9AE"}>
+        {t("HtmlCodeDescription")}
+      </Text>
       <Textarea value={codeBlock} heightTextArea={153} />
+      <CategorySubHeader className="copy-window-code">
+        {`JavaScript ${t("CodeTitle")}`}
+      </CategorySubHeader>
+      <Text lineHeight="20px" color={"#A3A9AE"}>
+        {t("JavaScriptCodeDescription")}
+      </Text>
+      <CodeBlock config={config} />
     </CodeWrapper>
   );
 
@@ -227,11 +237,6 @@ const DocSpace = (props) => {
       title: t("Common:Preview"),
       content: preview,
     },
-    {
-      key: "js",
-      title: "JavaScript",
-      content: <CodeBlock config={config} />,
-    },
     {
       key: "code",
       title: t("Code"),

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

@@ -303,5 +303,6 @@ export const CodeWrapper = styled.div`
   margin-top: 16px;
 
   width: calc(${(props) => (props.width ? props.width : "100%")} + 2px);
+  max-width: 800px;
   height: calc(${(props) => (props.height ? props.height : "400px")} + 2px);
 `;

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

@@ -2,56 +2,53 @@ import React from "react";
 import styled from "styled-components";
 
 import CodeMirror from "@uiw/react-codemirror";
-import { createTheme } from "@uiw/codemirror-themes";
 import { javascript } from "@codemirror/lang-javascript";
-import { tags as t } from "@lezer/highlight";
+import { githubLightInit, githubDarkInit } from "@uiw/codemirror-theme-github";
-
 import { Base } from "@docspace/shared/themes";
 
 const StyledContainer = styled.div`
   border: 1px solid ${(props) => props.theme.plugins.borderColor};
   border-radius: 6px;
   width: 800px;
-  margin-top: 16px;
-
   overflow: hidden;
-
   background-color: ${(props) => props.theme.sdkPresets.previewBackgroundColor};
 `;
 
 StyledContainer.defaultProps = { theme: Base };
 
-const baseTheme = createTheme({
-  theme: "light",
-  settings: {
-    background: "#ffffff",
-    foreground: "#333333",
-    caret: "#333333",
-    selection: "#036dd626",
-    selectionMatch: "#036dd626",
-    lineHighlight: "#8a91991a",
-    gutterBackground: "#ffffff",
-    gutterForeground: "#A3A9AE",
-    gutterBorder: "#ffffff",
-  },
-  styles: [
-    { tag: t.variableName, color: "#EA7F3B" },
-    { tag: [t.string, t.special(t.brace)], color: "#EA7F3B" },
-    { tag: [t.null, t.bool], color: "#456FA0" },
-  ],
-});
-
-const extensions = [javascript({ jsx: true })];
-
 const CodeBlock = ({ config }) => {
   const codeString = `const config = ${JSON.stringify(config, null, "\t")}\n\nconst script = document.createElement("script");\n\nscript.setAttribute("src", "${new URL(window.location).origin}/static/scripts/api.js");\nscript.onload = () => window.DocSpace.SDK.initFrame(config);\n\ndocument.body.appendChild(script);`;
 
+  const extensions = [javascript({ jsx: true })];
+
+  const baseTheme = githubLightInit({
+    settings: {
+      background: "#FFFFFF",
+      caret: "#000000",
+      lineHighlight: "#F3F4F4",
+      gutterBorder: "#F8F9F9",
+      gutterBackground: "#F8F9F9",
+      gutterForeground: "#333333",
+    },
+  });
+
+  const darkTheme = githubDarkInit({
+    settings: {
+      background: "#282828",
+      caret: "#FFFFFF",
+      lineHighlight: "#3D3D3D",
+      gutterBorder: "#242424",
+      gutterBackground: "#242424",
+      gutterForeground: "#ADADAD",
+    },
+  });
+
   return (
     <StyledContainer>
       <CodeMirror
         value={codeString}
-        width="800px"
+        maxWidth="800px"
-        theme={baseTheme}
+        theme={theme.isBase ? baseTheme : darkTheme}
         extensions={extensions}
         editable={true}
         readOnly={true}

yarn.lock

@@ -3101,12 +3101,11 @@ __metadata:
     "@babel/preset-react": "npm:^7.18.6"
     "@babel/preset-typescript": "npm:^7.21.0"
     "@codemirror/lang-javascript": "npm:^6.2.2"
-    "@lezer/highlight": "npm:^1.2.0"
     "@svgr/webpack": "npm:^5.5.0"
     "@types/eslint": "npm:^8.44.7"
     "@typescript-eslint/eslint-plugin": "npm:^6.12.0"
     "@typescript-eslint/parser": "npm:^6.12.0"
-    "@uiw/codemirror-themes": "npm:^4.21.24"
+    "@uiw/codemirror-theme-github": "npm:^4.21.25"
     "@uiw/react-codemirror": "npm:^4.21.24"
     babel-loader: "npm:^8.3.0"
     clean-webpack-plugin: "npm:^4.0.0"
@@ -4954,7 +4953,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.1.3, @lezer/highlight@npm:^1.2.0":
+"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.1.3":
   version: 1.2.0
   resolution: "@lezer/highlight@npm:1.2.0"
   dependencies:
@@ -9637,9 +9636,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@uiw/codemirror-themes@npm:^4.21.24":
+"@uiw/codemirror-theme-github@npm:^4.21.25":
-  version: 4.21.24
+  version: 4.21.25
-  resolution: "@uiw/codemirror-themes@npm:4.21.24"
+  resolution: "@uiw/codemirror-theme-github@npm:4.21.25"
+  dependencies:
+    "@uiw/codemirror-themes": "npm:4.21.25"
+  checksum: a427babb824c75b88694a60cb23179fb1d4abb2592e38d104567fbd52689d0b6cf9fc6a71ac6436268bc8d97b2d0082272c1d39536cd9a69d6be7f20c925141b
+  languageName: node
+  linkType: hard
+
+"@uiw/codemirror-themes@npm:4.21.25":
+  version: 4.21.25
+  resolution: "@uiw/codemirror-themes@npm:4.21.25"
   dependencies:
     "@codemirror/language": "npm:^6.0.0"
     "@codemirror/state": "npm:^6.0.0"
@@ -9648,7 +9656,7 @@ __metadata:
     "@codemirror/language": ">=6.0.0"
     "@codemirror/state": ">=6.0.0"
     "@codemirror/view": ">=6.0.0"
-  checksum: f4e04c304f195f36b99a2f596dfa74cf04ada1038fe64629ac6655e97a670793a6c65af8e2c8ddd543faa87a042e3be70e22bacee778d776bb0300500860e281
+  checksum: 4c35d63d5491da064d0eca721ceb8af96997e907f545ef4955680f4d29fed99613b53afe6f5cb805177c9add1160f7dcb552cf6c1471d934afd42949cc6e805d
   languageName: node
   linkType: hard