feat: adds monaco editor

near-everything · Nov 9, 2023 · 1448610 · 1448610
1 parent ad9684e
commit 1448610
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "private": true,
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.2",
-    "@monaco-editor/react": "^4.4.6",
+    "@monaco-editor/react": "^4.6.0",
     "@near-wallet-selector/core": "^8.5.0",
     "@near-wallet-selector/here-wallet": "^8.5.0",
     "@near-wallet-selector/meteor-wallet": "^8.5.0",

diff --git a/src/App.js b/src/App.js
@@ -26,17 +26,18 @@ import "react-bootstrap-typeahead/css/Typeahead.bs5.css";
 import "react-bootstrap-typeahead/css/Typeahead.css";
 import { Link, Route, BrowserRouter as Router, Switch } from "react-router-dom";
 import { BosLoaderBanner } from "./components/BosLoaderBanner";
+import EverythingCanvas from "./components/custom/Canvas";
+import { MonacoEditor } from "./components/custom/MonacoEditor";
 import { NavigationWrapper } from "./components/navigation/NavigationWrapper";
 import { useEthersProviderContext } from "./data/web3";
 import { NetworkId, Widgets } from "./data/widgets";
 import { useBosLoaderInitializer } from "./hooks/useBosLoaderInitializer";
 import EditorPage from "./pages/EditorPage";
 import EmbedPage from "./pages/EmbedPage";
 import Flags from "./pages/Flags";
+import HomePage from "./pages/Home";
 import SignInPage from "./pages/SignInPage";
 import ViewPage from "./pages/ViewPage";
-import EverythingCanvas from "./components/custom/Canvas";
-import HomePage from "./pages/Home";
 
 export const refreshAllowanceObj = {};
 const documentationHref = "https://github.com/NearBuilders/docs";
@@ -92,6 +93,9 @@ function App() {
           Canvas: (props) => {
             return <EverythingCanvas {...props} />;
           },
+          MonacoEditor: (props) => {
+            return <MonacoEditor {...props} />;
+          },
         },
         config: {
           defaultFinality: undefined,

diff --git a/src/components/custom/MonacoEditor.js b/src/components/custom/MonacoEditor.js
@@ -0,0 +1,45 @@
+import Editor from "@monaco-editor/react";
+import prettier from "prettier";
+import parserBabel from "prettier/parser-babel";
+import React, { useCallback, useState } from "react";
+
+export const MonacoEditor = (props) => {
+  const { defaultValue, path, language, onChange } = props;
+  const [code, setCode] = useState(defaultValue);
+
+  const reformat = useCallback(
+    (path, code) => {
+      try {
+        const formattedCode = prettier.format(code, {
+          parser: language === "json" ? "json" : "babel",
+          plugins: [parserBabel],
+        });
+        updateCode(path, formattedCode);
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    [updateCode]
+  );
+
+  const updateCode = useCallback(
+    (path, code) => {
+      setCode(code);
+      onChange(code);
+    },
+    [setCode]
+  );
+
+  return (
+    <Editor
+      value={code}
+      path={path}
+      height={"100%"}
+      defaultLanguage={language}
+      onChange={(code) => updateCode(path, code)}
+      wrapperProps={{
+        onBlur: () => reformat(path, code),
+      }}
+    />
+  );
+};
diff --git a/yarn.lock b/yarn.lock
@@ -2025,20 +2025,19 @@
     nanoid "3.3.4"
     query-string "^7.1.1"
 
-"@monaco-editor/loader@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.2.tgz#04effbb87052d19cd7d3c9d81c0635490f9bb6d8"
-  integrity sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==
+"@monaco-editor/loader@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"
+  integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
   dependencies:
     state-local "^1.0.6"
 
-"@monaco-editor/react@^4.4.6":
-  version "4.4.6"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.6.tgz#8ae500b0edf85276d860ed702e7056c316548218"
-  integrity sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==
+"@monaco-editor/react@^4.6.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
+  integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
   dependencies:
-    "@monaco-editor/loader" "^1.3.2"
-    prop-types "^15.7.2"
+    "@monaco-editor/loader" "^1.4.0"
 
 "@motionone/animation@^10.15.1":
   version "10.15.1"