IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client: PortalSettings: JavascriptSDK: Added style for CodeBlock component

Browse Source
This commit is contained in:
Ilya Oleshko 2024-03-18 14:44:33 +03:00
parent 342bd424ee
commit 85799c8dd0
11 changed files with 136 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -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"
}

4
packages/client/package.json
View File

@ -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",

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

@ -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) => {
</CodeWrapper>
);
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 = (
<CodeWrapper>
<CodeMirror
value={codeString}
width="800px"
theme="dark"
extensions={[javascript({ jsx: true })]}
/>
</CodeWrapper>
);
const dataTabs = [
{
key: "preview",
title: t("Common:Preview"),
content: preview,
},
{
key: "js",
title: "JavaScript",
content: <CodeBlock config={config} />,
},
{
key: "code",
title: t("Code"),
content: code,
},
{
key: "yolo",
title: "Code block",
content: codeMirror,
},
];
return (

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

@ -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) => {
</CodeWrapper>
);
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 = (
<CodeWrapper>
<CodeMirror
value={codeString}
width="800px"
theme="dark"
extensions={[javascript({ jsx: true })]}
/>
</CodeWrapper>
);
const dataTabs = [
{
key: "preview",
title: t("Common:Preview"),
content: preview,
},
{
key: "js",
title: "JavaScript",
content: <CodeBlock config={config} />,
},
{
key: "code",
title: t("Code"),
content: code,
},
{
key: "yolo",
title: "Code block",
content: codeMirror,
},
];
return (

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

@ -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) => {
</CodeWrapper>
);
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 = (
<CodeWrapper>
<CodeMirror
value={codeString}
width="800px"
theme="dark"
extensions={[javascript({ jsx: true })]}
/>
</CodeWrapper>
);
const dataTabs = [
{
key: "preview",
title: t("Common:Preview"),
content: preview,
},
{
key: "js",
title: "JavaScript",
content: <CodeBlock config={config} />,
},
{
key: "code",
title: t("Code"),
content: code,
},
{
key: "yolo",
title: "Code block",
content: codeMirror,
},
];
return (

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

@ -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) => {
</CodeWrapper>
);
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 = (
<CodeWrapper>
<CodeMirror
value={codeString}
width="800px"
theme="dark"
extensions={[javascript({ jsx: true })]}
/>
</CodeWrapper>
);
const dataTabs = [
{
key: "preview",
title: t("Common:Preview"),
content: preview,
},
{
key: "js",
title: "JavaScript",
content: <CodeBlock config={config} />,
},
{
key: "code",
title: t("Code"),
content: code,
},
{
key: "yolo",
title: "Code block",
content: codeMirror,
},
];
return (

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

@ -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) => {
</CodeWrapper>
);
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 = (
<CodeWrapper>
<CodeMirror
value={codeString}
width="800px"
theme="dark"
extensions={[javascript({ jsx: true })]}
/>
</CodeWrapper>
);
const dataTabs = [
{
key: "preview",
title: t("Common:Preview"),
content: preview,
},
{
key: "js",
title: "JavaScript",
content: <CodeBlock config={config} />,
},
{
key: "code",
title: t("Code"),
content: code,
},
{
key: "yolo",
title: "Code block",
content: codeMirror,
},
];
return (

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

@ -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) => {
</CodeWrapper>
);
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 = (
<CodeWrapper>
<CodeMirror
value={codeString}
width="800px"
theme="dark"
extensions={[javascript({ jsx: true })]}
/>
</CodeWrapper>
);
const dataTabs = [
{
key: "preview",
title: t("Common:Preview"),
content: preview,
},
{
key: "js",
title: "JavaScript",
content: <CodeBlock config={config} />,
},
{
key: "code",
title: t("Code"),
content: code,
},
{
key: "yolo",
title: "Code block",
content: codeMirror,
},
];
return (

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

@ -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) => {
</CodeWrapper>
);
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 = (
<CodeWrapper>
<CodeMirror
value={codeString}
width="800px"
theme="dark"
extensions={[javascript({ jsx: true })]}
/>
</CodeWrapper>
);
const dataTabs = [
{
key: "preview",
title: t("Common:Preview"),
content: preview,
},
{
key: "js",
title: "JavaScript",
content: <CodeBlock config={config} />,
},
{
key: "code",
title: t("Code"),
content: code,
},
{
key: "yolo",
title: "Code block",
content: codeMirror,
},
];
return (

63
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/CodeBlock.js Normal file
View File

@ -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 (
<StyledContainer>
<CodeMirror
value={codeString}
width="800px"
theme={baseTheme}
extensions={extensions}
editable={true}
readOnly={true}
/>
</StyledContainer>
);
};
export default CodeBlock;

35
yarn.lock
View File

@ -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"