Client: PortalSettings: Change code block for JS SDK
This commit is contained in:
parent
7274ec5f61
commit
7690966367
@ -43,8 +43,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/lang-javascript": "^6.2.2",
|
||||
"@lezer/highlight": "^1.2.0",
|
||||
"@uiw/codemirror-themes": "^4.21.24",
|
||||
"@uiw/codemirror-theme-github": "^4.21.25",
|
||||
"@uiw/react-codemirror": "^4.21.24",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"element-resize-detector": "^1.2.4",
|
||||
|
||||
@ -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."
|
||||
}
|
||||
|
||||
@ -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"),
|
||||
|
||||
@ -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);
|
||||
`;
|
||||
|
||||
@ -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"
|
||||
theme={baseTheme}
|
||||
maxWidth="800px"
|
||||
theme={theme.isBase ? baseTheme : darkTheme}
|
||||
extensions={extensions}
|
||||
editable={true}
|
||||
readOnly={true}
|
||||
|
||||
22
yarn.lock
22
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":
|
||||
version: 4.21.24
|
||||
resolution: "@uiw/codemirror-themes@npm:4.21.24"
|
||||
"@uiw/codemirror-theme-github@npm:^4.21.25":
|
||||
version: 4.21.25
|
||||
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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user