add react editor

software-mansion · Aug 21, 2024 · fa9cf49 · fa9cf49
1 parent 2278ff1
commit fa9cf49
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 84 deletions.
diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json
@@ -20,9 +20,7 @@
         "prettier/prettier": [
             "error"
         ],
-        "@typescript-eslint/no-explicit-any": [
-            0
-        ],
+        "@typescript-eslint/no-explicit-any": 0,
         "no-constant-condition": [
             0
         ],

diff --git a/docs/src/components/PlaygroundCodeEditor.module.css b/docs/src/components/PlaygroundCodeEditor.module.css
diff --git a/docs/src/components/PlaygroundReactEditor.tsx b/docs/src/components/PlaygroundReactEditor.tsx
@@ -2,7 +2,6 @@ import Editor, { Monaco } from '@monaco-editor/react';
 import React, { useCallback, useLayoutEffect, useRef } from 'react';
 import { useColorMode } from '@docusaurus/theme-common';
 import { tsCompilerOptions } from '../monacoEditorConfig';
-import BrowserOnly from '@docusaurus/BrowserOnly';
 
 function useEvent<TFunction extends (...params: any[]) => any>(handler: TFunction) {
   const handlerRef = useRef(handler);
@@ -19,29 +18,29 @@ function useEvent<TFunction extends (...params: any[]) => any>(handler: TFunctio
   }, []) as TFunction;
 }
 
-function handleEditorWillMount(monaco: Monaco) {
+async function handleEditorWillMount(monaco: Monaco) {
   const tsDefaults = monaco?.languages.typescript.typescriptDefaults;
 
-  fetch('https://unpkg.com/@types/react/index.d.ts')
+  await fetch('https://unpkg.com/@types/react/index.d.ts')
     .then(response => response.text())
     .then(reactTypes => {
       tsDefaults.addExtraLib(reactTypes, 'react/index.d.ts');
     });
 
-  fetch('https://unpkg.com/@types/react/jsx-runtime.d.ts')
+  await fetch('https://unpkg.com/@types/react/jsx-runtime.d.ts')
     .then(response => response.text())
     .then(reactTypes => {
       tsDefaults.addExtraLib(reactTypes, 'react/jsx-runtime.d.ts');
     });
 
-  fetch('https://unpkg.com/@types/react-dom/index.d.ts')
+  await fetch('https://unpkg.com/@types/react-dom/index.d.ts')
     .then(response => response.text())
     .then(reactDOMTypes => {
       tsDefaults.addExtraLib(reactDOMTypes, 'react-dom/index.d.ts');
     });
 
   tsDefaults.setCompilerOptions({
-    ...tsCompilerOptions,
+    ...tsCompilerOptions(),
   });
 }
 
@@ -52,27 +51,23 @@ type Props = {
 
 export default function PlaygroundReactEditor(props: Props) {
   const { code, onCodeChange } = props;
-  const { colorMode, setColorMode } = useColorMode();
+  const { colorMode } = useColorMode();
 
   const handleChange = useEvent((value: string | undefined) => {
     onCodeChange(value ?? '');
   });
 
   return (
-    <BrowserOnly>
-      {() => (
-        <div style={{ height: '100%', border: 'solid', borderColor: 'grey' }}>
-          <Editor
-            height="93%"
-            defaultLanguage="typescript"
-            value={code}
-            onChange={handleChange}
-            beforeMount={handleEditorWillMount}
-            defaultPath="file:///main.tsx"
-            theme={colorMode === 'dark' ? 'vs-dark' : 'light'}
-          />
-        </div>
-      )}
-    </BrowserOnly>
+    <Editor
+      height="100%"
+      width="100%"
+      className="monacoEditor"
+      defaultLanguage="typescript"
+      value={code}
+      onChange={handleChange}
+      beforeMount={handleEditorWillMount}
+      defaultPath="file:///main.tsx"
+      theme={colorMode === 'dark' ? 'vs-dark' : 'light'}
+    />
   );
 }
diff --git a/docs/src/monacoEditorConfig.ts b/docs/src/monacoEditorConfig.ts
@@ -1,17 +1,19 @@
-import { languages } from 'monaco-editor';
+import { languages } from './reactEditor';
 
-export const tsCompilerOptions: languages.typescript.CompilerOptions = {
-  target: languages.typescript.ScriptTarget.ESNext,
-  allowNonTsExtensions: true,
-  strict: true,
-  esModuleInterop: true,
-  moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs,
-  jsx: languages.typescript.JsxEmit.React,
-  skipLibCheck: true,
-  exactOptionalPropertyTypes: true,
-  baseUrl: '.',
-  lib: ['dom', 'es2021'],
-  allowJs: true,
-  isolatedModules: true,
-  noEmit: true,
-};
+export function tsCompilerOptions() {
+  return {
+    target: languages.typescript.ScriptTarget.ESNext,
+    allowNonTsExtensions: true,
+    strict: true,
+    esModuleInterop: true,
+    moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs,
+    jsx: languages.typescript.JsxEmit.React,
+    skipLibCheck: true,
+    exactOptionalPropertyTypes: true,
+    baseUrl: '.',
+    lib: ['dom', 'es2021'],
+    allowJs: true,
+    isolatedModules: true,
+    noEmit: true,
+  };
+}
diff --git a/docs/src/pages/playground.module.css b/docs/src/pages/playground.module.css
@@ -24,6 +24,8 @@
   min-width: 300px;
   min-height: 120px;
   justify-content: center;
+  border: solid;
+  border-color: grey;
 }
 
 .preview,

diff --git a/docs/src/pages/playground.tsx b/docs/src/pages/playground.tsx
@@ -11,7 +11,6 @@ import { ApiError, renderImage } from '../api';
 import 'react-tooltip/dist/react-tooltip.css';
 import PlaygroundReactEditor from '../components/PlaygroundReactEditor';
 import playgroundReactRunner from '../playgroundReactRunner';
-import BrowserOnly from '@docusaurus/BrowserOnly';
 
 const INITIAL_SCENE = {
   type: 'view',
@@ -23,7 +22,7 @@ const INITIAL_REACT_CODE = [
   'function View() {',
   '    return null;',
   '}',
-  'function a() {',
+  'function a(): JSX.Element {',
   '    return (',
   '        <div>',
   '            <View/>',
@@ -75,44 +74,37 @@ function Homepage() {
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
-    const codeEditorParam = params.get('code');
-    if (codeEditorParam === 'react') {
+    const codeEditorMode = params.get('mode');
+    if (codeEditorMode === 'react') {
       setShowReactEditor(true);
     } else {
       setShowReactEditor(false);
     }
   }, []);
 
   return (
-    <BrowserOnly>
-      {() => (
-        <div className={styles.page}>
-          <div className={styles.leftSide}>
-            <div className={styles.codeEditorBox}>
-              {showReactEditor ? (
-                <PlaygroundReactEditor code={code} onCodeChange={setCode} />
-              ) : (
-                <PlaygroundCodeEditor
-                  onChange={setScene}
-                  initialCodeEditorContent={INITIAL_SCENE}
-                />
-              )}
-            </div>
-          </div>
-          <div className={styles.rightSide}>
-            <div className={styles.preview}>
-              <PlaygroundPreview {...responseData} />
-            </div>
-            <div className={styles.settingsBox}>
-              <PlaygroundRenderSettings
-                onSubmit={handleSubmit}
-                readyToSubmit={!(scene instanceof Error)}
-              />
-            </div>
-          </div>
+    <div className={styles.page}>
+      <div className={styles.leftSide}>
+        <div className={styles.codeEditorBox}>
+          {showReactEditor ? (
+            <PlaygroundReactEditor code={code} onCodeChange={setCode} />
+          ) : (
+            <PlaygroundCodeEditor onChange={setScene} initialCodeEditorContent={INITIAL_SCENE} />
+          )}
         </div>
-      )}
-    </BrowserOnly>
+      </div>
+      <div className={styles.rightSide}>
+        <div className={styles.preview}>
+          <PlaygroundPreview {...responseData} />
+        </div>
+        <div className={styles.settingsBox}>
+          <PlaygroundRenderSettings
+            onSubmit={handleSubmit}
+            readyToSubmit={!(scene instanceof Error) || showReactEditor}
+          />
+        </div>
+      </div>
+    </div>
   );
 }
 

diff --git a/docs/src/playgroundReactRunner.ts b/docs/src/playgroundReactRunner.ts
@@ -7,7 +7,7 @@ import { tsCompilerOptions } from './monacoEditorConfig';
 
 function tsToJs(code: string): string {
   return transpileModule(code, {
-    compilerOptions: tsCompilerOptions,
+    compilerOptions: tsCompilerOptions(),
   }).outputText;
 }
 
@@ -113,8 +113,6 @@ export default async function playgroundReactRunner(code: string) {
         plugins: [staticToDynamicImports, preventInfiniteLoops],
       }).code ?? jsCode;
 
-    console.log(transformedCode);
-
     const mod = Function(`
         return async (_import) => {
         ${transformedCode}

diff --git a/docs/src/reactEditor.d.ts b/docs/src/reactEditor.d.ts
@@ -0,0 +1 @@
+export { languages } from 'monaco-editor';
diff --git a/docs/src/reactEditor.js b/docs/src/reactEditor.js
@@ -0,0 +1,4 @@
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+export const languages = ExecutionEnvironment.canUseDOM ? require('monaco-editor').languages : null;