Merge pull request #43 from airgap-it/fix/add_back_monaco

Fix/add back monaco

.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

@@ -17,9 +17,10 @@
     "prettier": "npx prettier --write './sidebars.js' 'docusaurus.config.js' && npm run pretty-source",
     "pretty-source": "npx prettier --ignore-unknown --write 'src/**/*'",
     "pretty-docs": "npx prettier --ignore-unknown --write 'docs/**/*'",
+    "generate-monaco-types": "node scripts/generate-monaco-types.js",
     "remove-folders": "rm -rf build-docs && rm -rf docs",
     "clear-folders": "npm run remove-folders && mkdir build-docs && mkdir docs",
-    "embed-code": "npm run prettier && tsc --module es2015 --target es2015 --moduleResolution node --esModuleInterop true src/examples/*.ts && node scripts/copy-examples.js && npm run clear-folders && cp -r src/docs/* build-docs/ && rm -r docs && mv build-docs docs && npm run pretty-docs"
+    "embed-code": "npm run generate-monaco-types && npm run prettier && tsc --module es2015 --target es2015 --moduleResolution node --esModuleInterop true src/examples/*.ts && node scripts/copy-examples.js && npm run clear-folders && cp -r src/docs/* build-docs/ && rm -r docs && mv build-docs docs && npm run pretty-docs"
   },
   "dependencies": {
     "@airgap/beacon-sdk": "4.0.10",
@@ -28,14 +29,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",

scripts/generate-monaco-types.js

@@ -2,7 +2,7 @@ const fs = require("fs");
 const getFilesRecursively = require("./get-files-in-folder");
 
 const files = getFilesRecursively(
-  "./node_modules/@airgap/beacon-sdk/dist/cjs/"
+  "./node_modules/@airgap/"
 ).filter((file) => file.endsWith(".d.ts"));
 files.push(
   ...getFilesRecursively("./node_modules/@taquito/").filter((file) =>

src/components/Monaco.tsx

@@ -0,0 +1,66 @@
+import React, { Suspense, lazy } from "react";
+import { useColorMode } from "@docusaurus/theme-common";
+import { libs } from "./monaco-types";
+
+import Editor from "@monaco-editor/react";
+
+function Monaco(props) {
+  let monacoRef;
+  const { colorMode } = useColorMode();
+
+  function onEditorWillMount(monaco) {
+    monacoRef = monaco;
+    const vsDarkTheme = {
+      base: "vs-dark",
+      inherit: true,
+      rules: [{ background: "121212" }],
+      colors: {
+        "editor.background": "#121212",
+      },
+    };
+
+    monaco.editor.defineTheme("vs-dark", vsDarkTheme);
+
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.ES2017,
+      allowNonTsExtensions: true,
+      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+      module: monaco.languages.typescript.ModuleKind.ESNext,
+      typeRoots: ["node_modules/@types"],
+    });
+
+    libs.forEach((lib) => {
+      const MONACO_LIB_PREFIX = "file:///node_modules/";
+      const path = `${MONACO_LIB_PREFIX}${lib.name}`;
+      monaco.languages.typescript.typescriptDefaults.addExtraLib(lib.dts, path);
+    });
+
+    if (props.editorWillMount) {
+      props.editorWillMount(monaco);
+    }
+  }
+
+  function onEditorDidMount(editor) {
+    editor.setModel(
+      monacoRef.editor.createModel(
+        props.value,
+        props.language,
+        monacoRef.Uri.parse(`file:///main-${Math.random()}.ts`),
+      ),
+    );
+  }
+
+  return (
+    <Suspense fallback={<div>Loading</div>}>
+      <Editor
+        {...props}
+        defaultLanguage="typescript"
+        beforeMount={onEditorWillMount}
+        onMount={onEditorDidMount}
+        theme={colorMode === "dark" ? "vs-dark" : "light"}
+      />
+    </Suspense>
+  );
+}
+
+export default Monaco;