fix: monaco-editor

.gitignore

@@ -9,6 +9,7 @@
 # Generated files
 .docusaurus
 .cache-loader
+.yarn
 
 # Misc
 .DS_Store

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

docusaurus.config.js

@@ -90,11 +90,7 @@ const config = {
             docId: "wallet/getting-started/web/getting-started",
             label: "Wallets",
           },
-          {
-            href: "https://stackblitz.com/edit/vitejs-vite-71wsul?file=src%2Fmain.ts&terminal=dev",
-            label: "Playground",
-            position: "right",
-          },
+          { to: "playground/", label: "Playground", position: "right" },
           {
             href: "https://debug.walletbeacon.io",
             label: "Debug Wallet",

package.json

@@ -28,14 +28,14 @@
     "@docusaurus/preset-classic": "2.4.3",
     "@docusaurus/theme-live-codeblock": "^2.4.3",
     "@mdx-js/react": "^1.6.22",
+    "@monaco-editor/react": "^4.6.0",
     "@taquito/beacon-wallet": "^17.3.1",
     "@taquito/taquito": "^17.3.1",
     "clsx": "^1.2.1",
     "mermaid": "^10.4.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-monaco-editor": "^0.54.0"
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.3",

src/components/Monaco.tsx

@@ -2,7 +2,7 @@ import React, { Suspense, lazy } from "react";
 import { useColorMode } from "@docusaurus/theme-common";
 import { libs } from "./monaco-types";
 
-const MonacoEditor = lazy(() => import("react-monaco-editor"));
+import Editor from "@monaco-editor/react";
 
 function Monaco(props) {
   let monacoRef;
@@ -45,18 +45,20 @@ function Monaco(props) {
       monacoRef.editor.createModel(
         props.value,
         "typescript",
-        monacoRef.Uri.parse(`file:///main-${Math.random()}.ts`),
-      ),
+        monacoRef.Uri.parse(`file:///main-${Math.random()}.ts`)
+      )
     );
   }
 
   return (
     <Suspense fallback={<div>Loading</div>}>
-      <MonacoEditor
-        {...props}
-        editorWillMount={onEditorWillMount}
-        editorDidMount={onEditorDidMount}
-        theme={colorMode === "dark" ? "vs-dark" : "vs-light"}
+      <Editor
+        height="90vh"
+        defaultLanguage="typescript"
+        defaultValue="// some comment"
+        beforeMount={onEditorWillMount}
+        onMount={onEditorDidMount}
+        theme={colorMode === "dark" ? "vs-dark" : "light"}
       />
     </Suspense>
   );

src/components/RunnableCode.tsx

@@ -9,7 +9,7 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 const Child = ({ code }) => {
   const { DAppClient } = require("../node_modules/beacon-sdk/dist/cjs");
 
-  const Monaco = require("./Monaco");
+  const Monaco = require("./Monaco").default;
 
   const { copyShareUrl, runBeaconCode } = require("../utils");
 

src/pages/playground.tsx

@@ -74,7 +74,7 @@ function Playground() {
     <BrowserOnly fallback={<></>}>
       {() => {
         const { DAppClient } = require("@airgap/beacon-sdk");
-        const { Monaco } = require("@site/src/components/Monaco");
+        const Monaco = require("@site/src/components/Monaco").default;
         const { copyShareUrl, runBeaconCode } = require("../utils");
 
         const execute = async () => {