fix(deps): Bump React Ace to v12, fix broken syntax highlighting (#2905)

* Bump react-ace and ace-builds

* Remove some unneeded imports

* Bump ace dependencies

* Bump react-ace to v12

* Bump ace-builds version

* Deduplicate dependencies

* Fix syntax highlighting

Author: RichDom2185

package.json

@@ -40,7 +40,7 @@
     "@szhsin/react-menu": "^4.0.0",
     "@tanstack/react-table": "^8.9.3",
     "@tremor/react": "^1.8.2",
-    "ace-builds": "^1.4.14",
+    "ace-builds": "^1.36.3",
     "acorn": "^8.9.0",
     "ag-grid-community": "^32.0.2",
     "ag-grid-react": "^32.0.2",
@@ -68,7 +68,7 @@
     "query-string": "^9.0.0",
     "re-resizable": "^6.9.9",
     "react": "^18.3.1",
-    "react-ace": "^10.1.0",
+    "react-ace": "^12.0.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-debounce-render": "^8.0.2",
     "react-dom": "^18.3.1",

src/commons/utils/AceHelper.ts

@@ -31,6 +31,15 @@ export const selectMode = (chapter: Chapter, variant: Variant, library: string)
   ModeSelector(chapter, variant, library);
 };
 
+import 'ace-builds/src-noconflict/mode-c_cpp';
+import 'ace-builds/src-noconflict/mode-html';
+import 'ace-builds/src-noconflict/mode-java';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-python';
+import 'ace-builds/src-noconflict/mode-scheme';
+import 'ace-builds/src-noconflict/mode-typescript';
+import 'js-slang/dist/editors/ace/theme/source';
+
 export const getModeString = (chapter: Chapter, variant: Variant, library: string) => {
   // TODO: Create our own highlighting rules for the different sublanguages
   switch (chapter) {

src/pages/academy/gameSimulator/subcomponents/chapterSimulator/ChapterSimulatorTextLoader.tsx

@@ -1,5 +1,3 @@
-import 'ace-builds/webpack-resolver';
-
 import { Button, Classes, Tab, Tabs } from '@blueprintjs/core';
 import { useState } from 'react';
 import { toTxtPath } from 'src/features/game/assets/TextAssets';