From 40cbd58629ddd49592ae6bf004d45df2eebb81f2 Mon Sep 17 00:00:00 2001 From: Holger Dal Mogensen <61235930+sockmaster27@users.noreply.github.com> Date: Sun, 5 Nov 2023 21:01:01 +0100 Subject: [PATCH] feat: use Ace's Flix mode (#109) --- package-lock.json | 47 ++++++++++++------------ package.json | 3 +- src/util/Editor.js | 12 ++----- src/util/FlixMode.js | 77 ---------------------------------------- src/util/InlineEditor.js | 12 ++----- 5 files changed, 30 insertions(+), 121 deletions(-) delete mode 100644 src/util/FlixMode.js diff --git a/package-lock.json b/package-lock.json index d7a18bf..29761c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,8 @@ "version": "0.1.0", "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", @@ -4402,6 +4401,11 @@ "node": ">= 0.6" } }, + "node_modules/ace-builds": { + "version": "1.31.1", + "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.31.1.tgz", + "integrity": "sha512-3DnE5bZF6Ji+l4F5acoLk+rV7mxrUt1C4r61Xy9owp5rVM4lj5NL8GJfoX6Jnnbhx6kKV7Vdpb+Tco+0ORTvhg==" + }, "node_modules/acorn": { "version": "8.10.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", @@ -5326,11 +5330,6 @@ "popper.js": "^1.16.1" } }, - "node_modules/brace": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz", - "integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg=" - }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -14242,19 +14241,19 @@ } }, "node_modules/react-ace": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-7.0.5.tgz", - "integrity": "sha512-3iI+Rg2bZXCn9K984ll2OF4u9SGcJH96Q1KsUgs9v4M2WePS4YeEHfW2nrxuqJrAkE5kZbxaCE79k6kqK0YBjg==", + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-10.1.0.tgz", + "integrity": "sha512-VkvUjZNhdYTuKOKQpMIZi7uzZZVgzCjM7cLYu6F64V0mejY8a2XTyPUIMszC6A4trbeMIHbK5fYFcT/wkP/8VA==", "dependencies": { - "brace": "^0.11.1", - "diff-match-patch": "^1.0.4", + "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" }, "peerDependencies": { - "react": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0", - "react-dom": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0" + "react": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, "node_modules/react-app-polyfill": { @@ -20779,6 +20778,11 @@ "negotiator": "0.6.3" } }, + "ace-builds": { + "version": "1.31.1", + "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.31.1.tgz", + "integrity": "sha512-3DnE5bZF6Ji+l4F5acoLk+rV7mxrUt1C4r61Xy9owp5rVM4lj5NL8GJfoX6Jnnbhx6kKV7Vdpb+Tco+0ORTvhg==" + }, "acorn": { "version": "8.10.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", @@ -21476,11 +21480,6 @@ "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==", "requires": {} }, - "brace": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz", - "integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg=" - }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -27714,12 +27713,12 @@ } }, "react-ace": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-7.0.5.tgz", - "integrity": "sha512-3iI+Rg2bZXCn9K984ll2OF4u9SGcJH96Q1KsUgs9v4M2WePS4YeEHfW2nrxuqJrAkE5kZbxaCE79k6kqK0YBjg==", + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-10.1.0.tgz", + "integrity": "sha512-VkvUjZNhdYTuKOKQpMIZi7uzZZVgzCjM7cLYu6F64V0mejY8a2XTyPUIMszC6A4trbeMIHbK5fYFcT/wkP/8VA==", "requires": { - "brace": "^0.11.1", - "diff-match-patch": "^1.0.4", + "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" diff --git a/package.json b/package.json index 0cc3204..681ca92 100644 --- 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 index fd8816a..c7f0ec7 100644 --- a/src/util/Editor.js +++ b/src/util/Editor.js @@ -1,16 +1,10 @@ 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) }; @@ -18,7 +12,7 @@ class Editor extends Component { render() { return ( |@>|<@|&|\\^|~|<|>|<=|=>|==|!=|<>|=" - }, { - token : "paren.lparen", - regex : "[\\(]" - }, { - token : "paren.rparen", - regex : "[\\)]" - }, { - token : "text", - regex : "\\s+" - } ] - }; - this.normalizeRules(); - } -} - -export default class FlixMode extends window.ace.acequire('ace/mode/java').Mode { - constructor() { - super(); - this.HighlightRules = CustomHighlightRules; - } -} - diff --git a/src/util/InlineEditor.js b/src/util/InlineEditor.js index c067512..62bdc18 100644 --- 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 (