patch: simplify docs editor

Author: pelikhan

website/package.json

@@ -22,8 +22,7 @@
         "prism-react-renderer": "^1.3.5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-split-pane": "^0.1.92",
-        "use-editable": "^2.3.3"
+        "react-split-pane": "^0.1.92"
     },
     "devDependencies": {
         "@docusaurus/module-type-aliases": "2.2.0",

website/src/components/TutorialComponents/index.tsx

@@ -18,9 +18,7 @@ interface CodeBlockProps {
     code: string
     result: { [key: string]: string }
     githubRepo: string | undefined
-    editable: boolean
     showLineNumbers: boolean
-    readonly: boolean
     langVersion?: string
     tool?: string
     prefix?: string
@@ -32,66 +30,22 @@ interface CodeBlockProps {
 
 function RunButton(props: {
     onClick: () => Promise<void>
-    runFinished: boolean
 }) {
-    const { onClick, runFinished } = props
-    const text = "Run"
+    const { onClick } = props
     return (
         <button className="button button--primary" onClick={onClick}>
-            {runFinished ? text : "Running..."}
+            Run
         </button>
     )
 }
 
-function Output(props: {
-    language: string
-    result: { [key: string]: string | Array<string> }
-    codeChanged: boolean
-    statusCodes: { [key: string]: string }
-}) {
-    const { language, result, codeChanged, statusCodes } = props
-    const success = result.status === statusCodes.success
-    const timeout = result.status === statusCodes.timeout
-    const emptyOutput = result.output === ""
-
-    if (emptyOutput) return null
-
-    const regularOutput = (
-        <pre className={codeChanged ? styles.outdated : ""}>
-            {success ? (
-                ""
-            ) : timeout ? (
-                <span style={{ color: "red" }}>
-                    {`--${language} timeout--`}
-                </span>
-            ) : (
-                <span style={{ color: "red" }}>
-                    <b>Script contains one or more errors: </b>
-                    <br />
-                </span>
-            )}
-            {success ? result.output : !timeout && result.error}
-        </pre>
-    )
-
-    return (
-        <div>
-            <b>Output{codeChanged ? " (outdated)" : ""}:</b>
-            <br />
-            {regularOutput}
-        </div>
-    )
-}
-
 function CustomCodeEditor(props: {
     id: string
     input: string
     showLineNumbers?: boolean
     language?: string
-    editable?: boolean
     onChange?: (code: string) => void
     githubRepo: string | undefined
-    readonly: boolean
     prefix?: string
     sandbox?: {
         files: Record<string, { content: string }>
@@ -102,10 +56,8 @@ function CustomCodeEditor(props: {
         input,
         language,
         showLineNumbers,
-        editable,
         githubRepo,
         onChange,
-        readonly,
         sandbox,
         prefix,
     } = props
@@ -119,7 +71,6 @@ function CustomCodeEditor(props: {
         <Container
             as="div"
             className={clsx(
-                editable ? styles.editable : "",
                 codeBlockContainerStyles.codeBlockContainer,
                 ThemeClassNames.common.codeBlock,
                 language && `language-${language}`
@@ -128,13 +79,13 @@ function CustomCodeEditor(props: {
             <CodeEditor
                 code={input}
                 theme={prismTheme}
-                disabled={!editable}
+                disabled={false}
                 key={String(isBrowser)}
                 className={codeBlockContentStyles.codeBlockContent}
                 onChange={onChange}
                 language={language}
                 prism={Prism}
-                readonly={readonly}
+                readonly={true}
                 showLineNumbers={showLineNumbers}
                 sandbox={sandbox}
                 prefix={prefix}
@@ -154,18 +105,12 @@ export default function CustomCodeBlock(props: { input: CodeBlockProps }) {
         code,
         result,
         githubRepo,
-        editable,
         showLineNumbers,
-        readonly,
         sandbox,
         prefix,
     } = input
-    const [currCode, setCurrCode] = useState(code)
+    const currCode = code
     const [outputRendered, setOutputRendered] = useState(false)
-    const [runFinished, setRunFinished] = useState(true)
-    const [output, setOutput] = useState(result)
-    const [lastSnippet, setLastSnippet] = useState(code)
-    const codeChanged = lastSnippet !== currCode
     const { setSource } = useContext(DevToolsContext)
     const clientConfig = {
         ts: input => {
@@ -176,7 +121,6 @@ export default function CustomCodeBlock(props: { input: CodeBlockProps }) {
 
     // bypassing server-side rendering
     const onDidClickRun = async () => {
-        setRunFinished(false)
         const newResult = { ...result }
         let errorMsg: string
 
@@ -216,50 +160,29 @@ export default function CustomCodeBlock(props: { input: CodeBlockProps }) {
             newResult.status = `${lang}-web-failed`
             throw new Error(errorMsg)
         } finally {
-            setLastSnippet(input)
-            setOutput(newResult)
-            setRunFinished(true)
             if (!outputRendered) {
                 setOutputRendered(true) // hack for the playground editor
             }
         }
     }
 
-    const onDidChangeCode = (code: string) => {
-        setCurrCode(code)
-    }
-
     return (
         <div>
             <CustomCodeEditor
                 input={code}
                 id={result.hash}
                 showLineNumbers={showLineNumbers}
-                onChange={onDidChangeCode}
-                editable={editable || outputRendered}
                 language={highlight}
                 githubRepo={githubRepo}
-                readonly={readonly}
                 sandbox={sandbox}
                 prefix={prefix}
             />
             <>
                 <div className={styles.buttons}>
                     <RunButton
                         onClick={onDidClickRun}
-                        runFinished={runFinished}
                     />
                 </div>
-                {outputRendered ? (
-                    <Output
-                        language={lang}
-                        codeChanged={codeChanged}
-                        result={output}
-                        statusCodes={statusCodes}
-                    />
-                ) : (
-                    <div />
-                )}
             </>
         </div>
     )

website/src/components/TutorialComponents/styles.module.css

@@ -1,15 +1,5 @@
 @import '../../css/custom.css';
 
-.editable {
-    border-color: var(--ifm-color-primary-light);
-    border-width: 2px;
-    border-style: solid;
-}
-
-.outdated {
-    color: grey;
-}
-
 .buttons {
     display: flex;
     align-items: center;

website/src/remark/render-code-blocks.mjs

@@ -222,8 +222,6 @@ export default function plugin() {
                     statusCodes: langConfig.statusCodes ?? {},
                     code,
                     result: result,
-                    editable: true,
-                    readonly: langConfig.readonly ?? true,
                     showLineNumbers: showLineNumbers,
                     sandbox: langConfig.sandbox,
                     prefix: langConfig.prefix,
@@ -254,7 +252,6 @@ export default function plugin() {
                         statusCodes: buildConfig.statusCodes,
                         code: value,
                         result: result,
-                        readonly: false,
                         showLineNumbers: showLineNumbers,
                         langVersion: buildConfig.langVersion,
                         tool: buildConfig.npmPackage,

website/yarn.lock

@@ -7834,11 +7834,6 @@ use-composed-ref@^1.3.0:
   resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
   integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
 
-use-editable@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/use-editable/-/use-editable-2.3.3.tgz#a292fe9ba4c291cd28d1cc2728c75a5fc8d9a33f"
-  integrity sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==
-
 use-isomorphic-layout-effect@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"