From 85799c8dd08004d8a171abb769b6b063a8624d06 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Mon, 18 Mar 2024 14:44:33 +0300 Subject: [PATCH] Client: PortalSettings: JavascriptSDK: Added style for CodeBlock component --- package.json | 6 +- packages/client/package.json | 4 ++ .../JavascriptSDK/presets/DocSpace.js | 27 ++------ .../JavascriptSDK/presets/Editor.js | 27 ++------ .../JavascriptSDK/presets/FileSelector.js | 27 ++------ .../JavascriptSDK/presets/Manager.js | 27 ++------ .../JavascriptSDK/presets/RoomSelector.js | 27 ++------ .../JavascriptSDK/presets/SimpleRoom.js | 28 ++------- .../JavascriptSDK/presets/Viewer.js | 27 ++------ .../JavascriptSDK/sub-components/CodeBlock.js | 63 +++++++++++++++++++ yarn.lock | 35 ++++++++--- 11 files changed, 136 insertions(+), 162 deletions(-) create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js diff --git a/package.json b/package.json index 5a906db344..15e92a24e2 100644 --- a/package.json +++ b/package.json @@ -44,9 +44,5 @@ "shx": "^0.3.4", "terser": "^5.16.6" }, - "packageManager": "yarn@4.0.2", - "dependencies": { - "@codemirror/lang-javascript": "^6.2.2", - "@uiw/react-codemirror": "^4.21.24" - } + "packageManager": "yarn@4.0.2" } diff --git a/packages/client/package.json b/packages/client/package.json index 67b7f4e991..df7eef967c 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -42,6 +42,10 @@ "test:ui:mobile": "cross-env DEVICE_TYPE=mobile npx codecept-ui" }, "dependencies": { + "@codemirror/lang-javascript": "^6.2.2", + "@lezer/highlight": "^1.2.0", + "@uiw/codemirror-themes": "^4.21.24", + "@uiw/react-codemirror": "^4.21.24", "copy-to-clipboard": "^3.3.3", "element-resize-detector": "^1.2.4", "file-saver": "^2.0.5", diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js index 323d188082..e5fd5a62f4 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js @@ -14,11 +14,9 @@ import { inject, observer } from "mobx-react"; import { isTablet, isMobile } from "@docspace/shared/utils/device"; import GetCodeDialog from "../sub-components/GetCodeDialog"; +import CodeBlock from "../sub-components/CodeBlock"; import { Button } from "@docspace/shared/components/button"; -import CodeMirror from "@uiw/react-codemirror"; -import { javascript } from "@codemirror/lang-javascript"; - const showPreviewThreshold = 720; import { @@ -197,35 +195,22 @@ const DocSpace = (props) => { ); - 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 codeMirror = ( - - - - ); - const dataTabs = [ { key: "preview", title: t("Common:Preview"), content: preview, }, + { + key: "js", + title: "JavaScript", + content: , + }, { key: "code", title: t("Code"), content: code, }, - { - key: "yolo", - title: "Code block", - content: codeMirror, - }, ]; return ( diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js index 07e99129d0..882e6d3c38 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js @@ -19,11 +19,9 @@ import { isTablet, isMobile } from "@docspace/shared/utils/device"; import EmptyIframeContainer from "../sub-components/EmptyIframeContainer"; import GetCodeDialog from "../sub-components/GetCodeDialog"; +import CodeBlock from "../sub-components/CodeBlock"; import { Button } from "@docspace/shared/components/button"; -import CodeMirror from "@uiw/react-codemirror"; -import { javascript } from "@codemirror/lang-javascript"; - const showPreviewThreshold = 720; import { @@ -208,35 +206,22 @@ const Editor = (props) => { ); - 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 codeMirror = ( - - - - ); - const dataTabs = [ { key: "preview", title: t("Common:Preview"), content: preview, }, + { + key: "js", + title: "JavaScript", + content: , + }, { key: "code", title: t("Code"), content: code, }, - { - key: "yolo", - title: "Code block", - content: codeMirror, - }, ]; return ( diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js index e835c5b562..005ffb8300 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js @@ -22,6 +22,7 @@ import { HelpButton } from "@docspace/shared/components/help-button"; import { Button } from "@docspace/shared/components/button"; import GetCodeDialog from "../sub-components/GetCodeDialog"; +import CodeBlock from "../sub-components/CodeBlock"; import { FilesSelectorFilterTypes } from "@docspace/shared/enums"; import { TooltipContent } from "../sub-components/TooltipContent"; @@ -29,9 +30,6 @@ import { TooltipContent } from "../sub-components/TooltipContent"; import SubtitleUrl from "PUBLIC_DIR/images/sdk-presets_subtitle.react.svg?url"; import SearchUrl from "PUBLIC_DIR/images/sdk-presets_files-search.react.svg?url"; -import CodeMirror from "@uiw/react-codemirror"; -import { javascript } from "@codemirror/lang-javascript"; - import { toastr } from "@docspace/shared/components/toast"; const showPreviewThreshold = 720; @@ -395,35 +393,22 @@ const FileSelector = (props) => { ); - 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 codeMirror = ( - - - - ); - const dataTabs = [ { key: "preview", title: t("Common:Preview"), content: preview, }, + { + key: "js", + title: "JavaScript", + content: , + }, { key: "code", title: t("Code"), content: code, }, - { - key: "yolo", - title: "Code block", - content: codeMirror, - }, ]; return ( diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js index 92914f0018..d672c8157f 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js @@ -20,6 +20,7 @@ import { isTablet, isMobile } from "@docspace/shared/utils/device"; import { HelpButton } from "@docspace/shared/components/help-button"; import GetCodeDialog from "../sub-components/GetCodeDialog"; +import CodeBlock from "../sub-components/CodeBlock"; import { Button } from "@docspace/shared/components/button"; import { TooltipContent } from "../sub-components/TooltipContent"; import { useNavigate } from "react-router-dom"; @@ -39,9 +40,6 @@ import ActionButtonDarkUrl from "PUBLIC_DIR/images/sdk-presets_action-button_dar import SearchDarkUrl from "PUBLIC_DIR/images/sdk-presets_search_dark.react.svg?url"; import HeaderDarkUrl from "PUBLIC_DIR/images/sdk-presets_header_dark.react.svg?url"; -import CodeMirror from "@uiw/react-codemirror"; -import { javascript } from "@codemirror/lang-javascript"; - const showPreviewThreshold = 720; // import { FilterType, RoomsType } from "@docspace/shared/enums"; @@ -721,35 +719,22 @@ const Manager = (props) => { ); - 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 codeMirror = ( - - - - ); - const dataTabs = [ { key: "preview", title: t("Common:Preview"), content: preview, }, + { + key: "js", + title: "JavaScript", + content: , + }, { key: "code", title: t("Code"), content: code, }, - { - key: "yolo", - title: "Code block", - content: codeMirror, - }, ]; return ( diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js index 12550e28ab..0025871480 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js @@ -17,15 +17,13 @@ import { inject, observer } from "mobx-react"; import { isTablet, isMobile } from "@docspace/shared/utils/device"; import GetCodeDialog from "../sub-components/GetCodeDialog"; +import CodeBlock from "../sub-components/CodeBlock"; import { Button } from "@docspace/shared/components/button"; import { RoomsType } from "@docspace/shared/enums"; import { toastr } from "@docspace/shared/components/toast"; -import CodeMirror from "@uiw/react-codemirror"; -import { javascript } from "@codemirror/lang-javascript"; - const showPreviewThreshold = 720; import { @@ -298,35 +296,22 @@ const RoomSelector = (props) => { ); - 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 codeMirror = ( - - - - ); - const dataTabs = [ { key: "preview", title: t("Common:Preview"), content: preview, }, + { + key: "js", + title: "JavaScript", + content: , + }, { key: "code", title: t("Code"), content: code, }, - { - key: "yolo", - title: "Code block", - content: codeMirror, - }, ]; return ( diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js index d0f36aea55..6814edefca 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js @@ -21,6 +21,7 @@ import GetCodeDialog from "../sub-components/GetCodeDialog"; import { Button } from "@docspace/shared/components/button"; import EmptyIframeContainer from "../sub-components/EmptyIframeContainer"; +import CodeBlock from "../sub-components/CodeBlock"; import { TooltipContent } from "../sub-components/TooltipContent"; import { useNavigate } from "react-router-dom"; @@ -35,9 +36,6 @@ import SearchUrl from "PUBLIC_DIR/images/sdk-presets_search.react.svg?url"; import TitleDarkUrl from "PUBLIC_DIR/images/sdk-presets_title_dark.react.svg?url"; import SearchDarkUrl from "PUBLIC_DIR/images/sdk-presets_search_dark.react.svg?url"; -import CodeMirror from "@uiw/react-codemirror"; -import { javascript } from "@codemirror/lang-javascript"; - const showPreviewThreshold = 720; import { @@ -164,7 +162,6 @@ const SimpleRoom = (props) => { }; const onChangeFolderId = async (rooms) => { - const publicRoom = rooms[0]; let newConfig = { @@ -313,35 +310,22 @@ const SimpleRoom = (props) => { ); - 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 codeMirror = ( - - - - ); - const dataTabs = [ { key: "preview", title: t("Common:Preview"), content: preview, }, + { + key: "js", + title: "JavaScript", + content: , + }, { key: "code", title: t("Code"), content: code, }, - { - key: "yolo", - title: "Code block", - content: codeMirror, - }, ]; return ( diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js index 3e81716da0..47841208e9 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js @@ -20,11 +20,9 @@ import { isTablet, isMobile } from "@docspace/shared/utils/device"; import EmptyIframeContainer from "../sub-components/EmptyIframeContainer"; import GetCodeDialog from "../sub-components/GetCodeDialog"; +import CodeBlock from "../sub-components/CodeBlock"; import { Button } from "@docspace/shared/components/button"; -import CodeMirror from "@uiw/react-codemirror"; -import { javascript } from "@codemirror/lang-javascript"; - const showPreviewThreshold = 720; import { @@ -211,35 +209,22 @@ const Viewer = (props) => { ); - 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 codeMirror = ( - - - - ); - const dataTabs = [ { key: "preview", title: t("Common:Preview"), content: preview, }, + { + key: "js", + title: "JavaScript", + content: , + }, { key: "code", title: t("Code"), content: code, }, - { - key: "yolo", - title: "Code block", - content: codeMirror, - }, ]; return ( diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js new file mode 100644 index 0000000000..afe543f7de --- /dev/null +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js @@ -0,0 +1,63 @@ +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 { 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);`; + + return ( + + + + ); +}; + +export default CodeBlock; diff --git a/yarn.lock b/yarn.lock index 3dd7e4d6b3..629daf301a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2636,8 +2636,8 @@ __metadata: linkType: hard "@codemirror/autocomplete@npm:^6.0.0": - version: 6.14.0 - resolution: "@codemirror/autocomplete@npm:6.14.0" + version: 6.15.0 + resolution: "@codemirror/autocomplete@npm:6.15.0" dependencies: "@codemirror/language": "npm:^6.0.0" "@codemirror/state": "npm:^6.0.0" @@ -2648,7 +2648,7 @@ __metadata: "@codemirror/state": ^6.0.0 "@codemirror/view": ^6.0.0 "@lezer/common": ^1.0.0 - checksum: 203ed79336ad3594f86c59814b280f870af2209c48218f458e463623d0e3b8a50ee7829ea33fcbaa106126d484466e846278ac34ee42c87ac03cb02c4b6a71fd + checksum: 5ef009826113459532b836347afd73759588edb1cbe507834b2b06de665c8b36fdf6de0685bcae4b1204fbb0ba4294af732da57a44b57b350339228164ba49e1 languageName: node linkType: hard @@ -3027,13 +3027,13 @@ __metadata: linkType: hard "@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0": - version: 6.25.1 - resolution: "@codemirror/view@npm:6.25.1" + version: 6.26.0 + resolution: "@codemirror/view@npm:6.26.0" dependencies: "@codemirror/state": "npm:^6.4.0" style-mod: "npm:^4.1.0" w3c-keyname: "npm:^2.2.4" - checksum: bbf26984a095ea3a96be3af1f34ce7880a1cb94e287f4a46ffbdc5d5a84d6293e257619d82b23e930f26c11e80d704a6c8b39f10c209fae5117a21420412ab92 + checksum: d4ef249044cbc293a7267c83e08671a68646fd7bbe1efb8d205c01385f157c93918eabeaedb62a4cc10598ab63818ac749cec4f6355fe0404d9d4beb7857c31f languageName: node linkType: hard @@ -3100,10 +3100,14 @@ __metadata: "@babel/preset-env": "npm:^7.20.2" "@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/react-codemirror": "npm:^4.21.24" babel-loader: "npm:^8.3.0" clean-webpack-plugin: "npm:^4.0.0" copy-to-clipboard: "npm:^3.3.3" @@ -4949,7 +4953,7 @@ __metadata: languageName: node linkType: hard -"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.1.3": +"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.1.3, @lezer/highlight@npm:^1.2.0": version: 1.2.0 resolution: "@lezer/highlight@npm:1.2.0" dependencies: @@ -9632,6 +9636,21 @@ __metadata: languageName: node linkType: hard +"@uiw/codemirror-themes@npm:^4.21.24": + version: 4.21.24 + resolution: "@uiw/codemirror-themes@npm:4.21.24" + dependencies: + "@codemirror/language": "npm:^6.0.0" + "@codemirror/state": "npm:^6.0.0" + "@codemirror/view": "npm:^6.0.0" + peerDependencies: + "@codemirror/language": ">=6.0.0" + "@codemirror/state": ">=6.0.0" + "@codemirror/view": ">=6.0.0" + checksum: f4e04c304f195f36b99a2f596dfa74cf04ada1038fe64629ac6655e97a670793a6c65af8e2c8ddd543faa87a042e3be70e22bacee778d776bb0300500860e281 + languageName: node + linkType: hard + "@uiw/react-codemirror@npm:^4.21.24": version: 4.21.24 resolution: "@uiw/react-codemirror@npm:4.21.24" @@ -14101,9 +14120,7 @@ __metadata: version: 0.0.0-use.local resolution: "docspace@workspace:." dependencies: - "@codemirror/lang-javascript": "npm:^6.2.2" "@types/react-text-mask": "npm:^5.4.14" - "@uiw/react-codemirror": "npm:^4.21.24" he: "npm:^1.2.0" madge: "npm:^6.1.0" shx: "npm:^0.3.4"