Merge pull request #30 from AykutSarac/replace-editor-monaco

Replace Editor with monaco-editor
AykutSarac · May 2, 2022 · 1978862 · 1978862
2 parents 13af5f1 + 02bd1ff
commit 1978862
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -12,12 +12,12 @@
     "deploy": "gh-pages -d out -t true"
   },
   "dependencies": {
+    "@monaco-editor/react": "^4.4.4",
     "allotment": "^1.12.1",
     "next": "^12.1.5",
     "next-transpile-modules": "^9.0.0",
     "parse-json": "^6.0.2",
     "react": "^18.0.0",
-    "react-ace": "10.1.0",
     "react-dom": "^18.0.0",
     "react-hot-toast": "^2.2.0",
     "react-icons": "^4.3.1",

diff --git a/src/containers/JsonEditor/index.tsx b/src/containers/JsonEditor/index.tsx
@@ -1,13 +1,11 @@
 import React from "react";
-import AceEditor, { IAceOptions } from "react-ace";
+import Editor from "@monaco-editor/react";
 import parseJson from "parse-json";
 import styled from "styled-components";
 import { ErrorContainer } from "../../components/ErrorContainer/ErrorContainer";
 import { ConfigActionType } from "src/reducer/reducer";
 import { useConfig } from "src/hocs/config";
-require("ace-builds/src-noconflict/mode-json");
-require("ace-builds/src-noconflict/theme-tomorrow_night");
-require("ace-builds/src-noconflict/theme-github");
+import { Loading } from "src/components/Loading";
 
 const StyledEditorWrapper = styled.div`
   display: flex;
@@ -17,40 +15,25 @@ const StyledEditorWrapper = styled.div`
   user-select: none;
 `;
 
-const aceOptions: IAceOptions = {
-  useWorker: false,
-  fontSize: 12,
-  tabSize: 2,
-  showPrintMargin: false,
-  wrap: true,
+const editorOptions = {
+  minimap: {
+    enabled: false,
+  },
 };
 
-const JsonEditor: React.FC = () => {
+export const JsonEditor: React.FC = () => {
   const { json, settings, dispatch } = useConfig();
-  const [editorWidth, setEditorWidth] = React.useState("auto");
   const [value, setValue] = React.useState("");
   const [error, setError] = React.useState({
     message: "",
     isExpanded: true,
   });
 
   const editorTheme = React.useMemo(
-    () => (settings.lightmode ? "github" : "tomorrow_night"),
+    () => (settings.lightmode ? "light" : "vs-dark"),
     [settings.lightmode]
   );
 
-  React.useEffect(() => {
-    const resizeObserver = new ResizeObserver((observed) => {
-      const width = observed[0].contentRect.width;
-      setEditorWidth(width ? width.toString() : "auto");
-    });
-
-    const dom = document.querySelector(".ace_scroller");
-    if (dom) resizeObserver.observe(dom);
-
-    return () => resizeObserver.disconnect();
-  }, []);
-
   React.useEffect(() => {
     if (settings.autoformat) {
       return setValue(JSON.stringify(JSON.parse(json), null, 2));
@@ -60,45 +43,44 @@ const JsonEditor: React.FC = () => {
   }, [settings.autoformat, json]);
 
   React.useEffect(() => {
-    const formatTimer = setTimeout(() => {
-      try {
-        if (value) {
-          const parsedJson = parseJson(value);
-
-          if (settings.autoformat) {
-            setValue(JSON.stringify(parsedJson, null, 2));
-          } else {
-            setValue(value);
+    const formatTimer = setTimeout(
+      () => {
+        try {
+          if (value) {
+            const parsedJson = parseJson(value);
+
+            if (settings.autoformat) {
+              setValue(JSON.stringify(parsedJson, null, 2));
+            } else {
+              setValue(value);
+            }
+
+            dispatch({ type: ConfigActionType.SET_JSON, payload: value });
           }
 
-          dispatch({ type: ConfigActionType.SET_JSON, payload: value });
+          setError((err) => ({ ...err, message: "" }));
+        } catch (jsonError: any) {
+          setError((err) => ({ ...err, message: jsonError.message }));
         }
-
-        setError((err) => ({ ...err, message: "" }));
-      } catch (jsonError: any) {
-        setError((err) => ({ ...err, message: jsonError.message }));
-      }
-    }, 1800);
+      },
+      settings.autoformat ? 1200 : 1800
+    );
 
     return () => clearTimeout(formatTimer);
   }, [value, dispatch]);
 
   return (
     <StyledEditorWrapper>
       <ErrorContainer error={error} setError={setError} />
-      <AceEditor
+      <Editor
         height="100%"
-        mode="json"
+        defaultLanguage="json"
         value={value}
-        onChange={setValue}
+        options={editorOptions}
         theme={editorTheme}
-        width={editorWidth}
-        setOptions={aceOptions}
+        loading={<Loading message="Loading Editor..." />}
+        onChange={(value) => setValue(value as string)}
       />
     </StyledEditorWrapper>
   );
 };
-
-const memoizedJsonEditor = React.memo(JsonEditor);
-
-export { memoizedJsonEditor as JsonEditor };
diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx
@@ -5,17 +5,7 @@ import dynamic from "next/dynamic";
 
 const Editor = dynamic(() => import("src/containers/Editor"), { ssr: false });
 
-const StyledEditorWrapper = styled.div`
-  *::-webkit-scrollbar {
-    width: 8px;
-    background: ${({ theme }) => theme.BLACK_SECONDARY};
-  }
-
-  *::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background-color: ${({ theme }) => theme.SILVER_DARK};
-  }
-`;
+const StyledEditorWrapper = styled.div``;
 
 const EditorPage: React.FC = () => {
   return (

diff --git a/yarn.lock b/yarn.lock
@@ -1249,6 +1249,21 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
   integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==
 
+"@monaco-editor/loader@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.1.tgz#35d198fb13a983dd49e9e448a172b6a9da309411"
+  integrity sha512-LfpAO6e54SZQW0nnI1sWKO4XtAlNx3WHXYZixeVy0HhZ4txGPOok4rs2u4dSi2+iRWeL198cZ2FlFQKr8mH+cw==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.4.4":
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.4.tgz#8d6b0ac144e2b673f85408e30f1facafff9b7aab"
+  integrity sha512-yQsYnVkgP5RC5ZMoRVCXSBn4D4hLUOgoQK+AZJpVY57NDXmEb57OVaaYKh8/RTzxkpuLV278hKNw5DnuzlgQwg==
+  dependencies:
+    "@monaco-editor/loader" "^1.3.1"
+    prop-types "^15.7.2"
+
 "@next/env@12.1.5":
   version "12.1.5"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.5.tgz#a21ba6708022d630402ca2b340316e69a0296dfc"
@@ -1820,11 +1835,6 @@ abab@^2.0.5, abab@^2.0.6:
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
   integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
 
-ace-builds@^1.4.14:
-  version "1.4.14"
-  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.14.tgz#2c41ccbccdd09e665d3489f161a20baeb3a3c852"
-  integrity sha512-NBOQlm9+7RBqRqZwimpgquaLeTJFayqb9UEPtTkpC3TkkwDnlsT/TwsCC0svjt9kEZ6G9mH5AEOHSz6Q/HrzQQ==
-
 acorn-globals@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
@@ -2680,11 +2690,6 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
-diff-match-patch@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
-  integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
-
 diff-sequences@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
@@ -4643,11 +4648,6 @@ lodash.flattendeep@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
   integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=
 
-lodash.get@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
-  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
-
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
@@ -5312,17 +5312,6 @@ rdk@^6.0.1:
     popper.js "^1.16.1"
     react-scrolllock "^5.0.1"
 
-react-ace@10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-10.1.0.tgz#d348eac2b16475231779070b6cd16768deed565f"
-  integrity sha512-VkvUjZNhdYTuKOKQpMIZi7uzZZVgzCjM7cLYu6F64V0mejY8a2XTyPUIMszC6A4trbeMIHbK5fYFcT/wkP/8VA==
-  dependencies:
-    ace-builds "^1.4.14"
-    diff-match-patch "^1.0.5"
-    lodash.get "^4.4.2"
-    lodash.isequal "^4.5.0"
-    prop-types "^15.7.2"
-
 react-cool-dimensions@^2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/react-cool-dimensions/-/react-cool-dimensions-2.0.7.tgz#2fe6657608f034cd7c89f149ed14e79cf1cb2d50"
@@ -5784,6 +5773,11 @@ stack-utils@^2.0.3:
   dependencies:
     escape-string-regexp "^2.0.0"
 
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"