From 3ca0dc31478a076145d1bc3d43de0a3e5826f149 Mon Sep 17 00:00:00 2001
From: Lauren Davidson <32903719+1aurend@users.noreply.github.com>
Date: Thu, 1 Dec 2022 15:14:32 -0800
Subject: [PATCH] [WIP] Update react-ace

---
 client/package.json                           |  3 +-
 .../global/components/form/CodeArea/Ace.js    | 26 +++++++++++---
 .../global/components/form/CodeArea/index.js  |  7 ++--
 client/webpack/config/base.config.js          | 10 +++++-
 client/yarn.lock                              | 34 +++++++++++--------
 5 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/client/package.json b/client/package.json
index e4ae3f4871..9af6752b24 100644
--- a/client/package.json
+++ b/client/package.json
@@ -93,6 +93,7 @@
     "@emotion/react": "^11.5.0",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.3.0",
+    "ace-builds": "^1.14.0",
     "actioncable": "~5.0.2",
     "autolinker": "^1.x",
     "autoprefixer": "^9.0",
@@ -141,7 +142,7 @@
     "qs": "^6.0.0",
     "query-string": "^6.x",
     "react": "^16.13",
-    "react-ace": "^5.9.0",
+    "react-ace": "^10.1.0",
     "react-attr-converter": "^0.3.1",
     "react-beautiful-dnd": "^13.0.0",
     "react-collapse": "^5.0.0",
diff --git a/client/src/global/components/form/CodeArea/Ace.js b/client/src/global/components/form/CodeArea/Ace.js
index c5042226cd..210f937267 100644
--- a/client/src/global/components/form/CodeArea/Ace.js
+++ b/client/src/global/components/form/CodeArea/Ace.js
@@ -1,7 +1,23 @@
-import ace from "react-ace";
-import "brace/mode/css";
-import "brace/mode/javascript";
-import "brace/mode/html";
+import path from "path";
+import ace from "ace-builds/src-noconflict/ace";
+import editor from "react-ace";
 import "./theme";
 
-export default ace;
+/* We don't want to use this because it adds every build, but it does fix the basePath error. */
+// import "ace-builds/webpack-resolver";
+
+ace.config.set("basePath", path.resolve(__dirname, "../../../../.."));
+
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-css";
+import "ace-builds/src-noconflict/mode-javascript";
+
+// import jsWorkerUrl from "ace-builds/src-noconflict/worker-javascript";
+// import htmlWorkerUrl from "ace-builds/src-noconflict/worker-html";
+import cssWorkerUrl from "ace-builds/src-noconflict/worker-css";
+
+ace.config.setModuleUrl("ace/mode/css_worker", cssWorkerUrl);
+// ace.config.setModuleUrl("ace/mode/javascript_worker", jsWorkerUrl);
+// ace.config.setModuleUrl("ace/mode/html_worker", htmlWorkerUrl);
+
+export default editor;
diff --git a/client/src/global/components/form/CodeArea/index.js b/client/src/global/components/form/CodeArea/index.js
index 70707b0c63..bbdf851229 100644
--- a/client/src/global/components/form/CodeArea/index.js
+++ b/client/src/global/components/form/CodeArea/index.js
@@ -10,9 +10,10 @@ import Instructions from "../Instructions";
 /* eslint-disable react/prop-types */
 const CodeAreaInput = Loadable({
   loader: () =>
-    import(/* webpackChunkName: "ace-editor" */ "./Ace").then(
-      ace => ace.default
-    ),
+    import(/* webpackChunkName: "ace-editor" */ "./Ace").then(ace => {
+      console.log(ace);
+      return ace.default;
+    }),
   render(Editor, props) {
     return (
       <Errorable
diff --git a/client/webpack/config/base.config.js b/client/webpack/config/base.config.js
index 39ea8a02ec..475c6b0416 100644
--- a/client/webpack/config/base.config.js
+++ b/client/webpack/config/base.config.js
@@ -89,7 +89,15 @@ export default function buildWebpackConfiguration(target = "web") {
               }
             }
           ]
-        }
+        },
+        {
+        test: /ace-builds.*\/worker-.*$/,
+        loader: 'file-loader',
+        options: {
+          esModule: false,
+          name: '[name].[hash:8].[ext]',
+        },
+      },
       ]
     },
 
diff --git a/client/yarn.lock b/client/yarn.lock
index 8e1e17a5a6..e65072c246 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2903,6 +2903,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+ace-builds@^1.14.0, ace-builds@^1.4.14:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.14.0.tgz#85a6733b4fa17b0abc3dbfe38cd8d823cad79716"
+  integrity sha512-3q8LvawomApRCt4cC0OzxVjDsZ609lDbm8l0Xl9uqG06dKEq4RT0YXLUyk7J2SxmqIp5YXzZNw767Dr8GKUruw==
+
 acorn-globals@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
@@ -4048,11 +4053,6 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-brace@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
-  integrity sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg=
-
 braces@^1.8.2:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
@@ -5701,6 +5701,11 @@ detect-port@^1.3.0:
     address "^1.0.1"
     debug "^2.6.0"
 
+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@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
@@ -9933,7 +9938,7 @@ lodash.flattendeep@^4.4.0:
 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=
+  integrity sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==
 
 lodash.isarguments@^3.0.0:
   version "3.1.0"
@@ -9953,7 +9958,7 @@ lodash.isequal@^3.0:
     lodash._baseisequal "^3.0.0"
     lodash._bindcallback "^3.0.0"
 
-lodash.isequal@^4.1.1, lodash.isequal@^4.5.0:
+lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
@@ -12079,15 +12084,16 @@ rc@^1.0.1, rc@^1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-ace@^5.9.0:
-  version "5.10.0"
-  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-5.10.0.tgz#e328b37ac52759f700be5afdb86ada2f5ec84c5e"
-  integrity sha512-aEK/XZCowP8IXq91e2DYqOtGhabk1bbjt+fyeW0UBcIkzDzP/RX/MeJKeyW7wsZcwElACVwyy9nnwXBTqgky3A==
+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:
-    brace "^0.11.0"
+    ace-builds "^1.4.14"
+    diff-match-patch "^1.0.5"
     lodash.get "^4.4.2"
-    lodash.isequal "^4.1.1"
-    prop-types "^15.5.8"
+    lodash.isequal "^4.5.0"
+    prop-types "^15.7.2"
 
 react-attr-converter@^0.3.1:
   version "0.3.1"