feat: use Ace's Flix mode (#109)

flix · Nov 5, 2023 · 40cbd58 · 40cbd58
1 parent 51b828b
commit 40cbd58
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 121 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,9 +5,8 @@
   "homepage": "https://flix.dev/",
   "dependencies": {
     "bootstrap": "^4.5.3",
-    "brace": "^0.11.1",
     "react": "^16.0.0",
-    "react-ace": "^7.0.5",
+    "react-ace": "^10.1.0",
     "react-dom": "^16.0.0",
     "react-fontawesome": "^1.7.1",
     "react-icons": "^4.1.0",

diff --git a/src/util/Editor.js b/src/util/Editor.js
@@ -1,24 +1,18 @@
 import React, {Component} from 'react';
 import AceEditor from 'react-ace'
-import 'brace/mode/scala'
 
-import FlixMode from './FlixMode'
-import 'brace/theme/chrome';
+import 'ace-builds/src-noconflict/mode-flix'
+import 'ace-builds/src-noconflict/theme-chrome'
 
 class Editor extends Component {
-    componentDidMount() {
-        let customMode = new FlixMode();
-        this.refs.aceEditor.editor.getSession().setMode(customMode);
-    }
-
     onChange(input) {
         this.props.notifyTextChanged(input)
     };
 
     render() {
         return (
             <AceEditor width="100%"
-                mode='text'
+                mode='flix'
                 theme='chrome'
                 ref="aceEditor"
                 showGutter={false}

diff --git a/src/util/FlixMode.js b/src/util/FlixMode.js
diff --git a/src/util/InlineEditor.js b/src/util/InlineEditor.js
@@ -1,9 +1,8 @@
 import React, {Component} from 'react';
 import AceEditor from 'react-ace'
-import 'brace/mode/scala'
 
-import FlixMode from './FlixMode'
-import 'brace/theme/chrome';
+import 'ace-builds/src-noconflict/mode-flix'
+import 'ace-builds/src-noconflict/theme-chrome'
 
 class InlineEditor extends Component {
     constructor(props) {
@@ -17,18 +16,13 @@ class InlineEditor extends Component {
         }
     }
 
-    componentDidMount() {
-        const customMode = new FlixMode();
-        this.refs.aceEditor.editor.getSession().setMode(customMode);
-    }
-
     render() {
         return (
             <div className="inline-editor-frame">
                 <div className="inline-editor-code">
                     <AceEditor
                         style={{"background": "inherit", "width": "95%"}}
-                        mode='text'
+                        mode='flix'
                         theme='chrome'
                         ref="aceEditor"
                         readOnly={true}