add react editor, error connected with client-side only code

demos/.eslintrc.json

@@ -17,6 +17,7 @@
   "rules": {
     "prettier/prettier": ["error"],
     "@typescript-eslint/no-explicit-any": [0, {}],
-    "no-constant-condition": [0]
+    "no-constant-condition": [0],
+    "@typescript-eslint/no-floating-promises": ["error"]
   }
 }

docs/.eslintrc.json

@@ -26,6 +26,9 @@
         "no-constant-condition": [
             0
         ],
+        "@typescript-eslint/no-floating-promises": [
+            "error"
+        ],
         "import/no-unresolved": [
             2,
             {

docs/package.json

@@ -16,20 +16,24 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@babel/standalone": "^7.25.3",
     "@docusaurus/core": "^3.1.1",
     "@docusaurus/plugin-client-redirects": "3.1.1",
     "@docusaurus/preset-classic": "^3.1.1",
     "@mdx-js/react": "^3.0.0",
+    "@monaco-editor/react": "^4.6.0",
     "@types/jsoneditor": "^9.9.5",
     "ajv": "^6.12.6",
     "clsx": "^1.2.1",
     "jsoneditor": "^10.1.0",
+    "monaco-editor": "^0.50.0",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.12.0",
     "react-tooltip": "^5.28.0",
+    "remeda": "^2.11.0",
     "typewriter-effect": "^2.21.0"
   },
   "devDependencies": {

docs/src/components/PlaygroundReactEditor.tsx

@@ -0,0 +1,89 @@
+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);
+
+  // In a real implementation, this would run before layout effects
+  useLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+
+  return useCallback((...args: Parameters<TFunction>) => {
+    // In a real implementation, this would throw if called during render
+    const fn = handlerRef.current;
+    return fn(...args);
+  }, []) as TFunction;
+}
+
+function handleEditorWillMount(monaco: Monaco) {
+  const tsDefaults = monaco?.languages.typescript.typescriptDefaults;
+
+  const source = `
+				declare module 'my-lib' {
+					export function func(param: string): number;
+					export interface SomeInterface {
+						field: string;
+					}
+				}
+			`;
+  const libUri = 'my-lib/index.d.ts';
+  tsDefaults.addExtraLib(source, libUri);
+
+  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')
+    .then(response => response.text())
+    .then(reactTypes => {
+      tsDefaults.addExtraLib(reactTypes, 'react/jsx-runtime.d.ts');
+    });
+
+  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,
+  });
+}
+
+type Props = {
+  code: string;
+  onCodeChange: (value: string) => unknown;
+};
+
+export default function PlaygroundReactEditor(props: Props) {
+  const { code, onCodeChange } = props;
+  const { colorMode, setColorMode } = 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>
+  );
+}

docs/src/monacoEditorConfig.ts

@@ -0,0 +1,17 @@
+import { languages } from 'monaco-editor';
+
+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,
+};