Frontend: replacing brace by ace-builds

frontend/package.json

@@ -5,8 +5,8 @@
   "description": "",
   "private": true,
   "dependencies": {
+    "ace-builds": "^1.36.4",
     "acorn": "^8.14.0",
-    "brace": "^0.11.1",
     "file-saver": "^2.0.5",
     "js-cookie": "^3.0.5",
     "jszip": "^3.10.1",

frontend/src/ts/editor.ts

@@ -1,8 +1,10 @@
-import ace from 'brace';
-import 'brace/mode/ada';
-import 'brace/mode/c_cpp';
-import 'brace/theme/tomorrow';
-import 'brace/theme/tomorrow_night';
+import * as Ace from 'ace-builds';
+
+import 'ace-builds/src-noconflict/mode-ada';
+import 'ace-builds/src-noconflict/mode-c_cpp';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+import 'ace-builds/src-noconflict/theme-tomorrow_night';
+
 
 /* eslint-disable no-unused-vars */
 export enum EditorTheme {
@@ -18,15 +20,15 @@ export enum EditorLanguage {
 
 interface SessionData {
   initialContents: string;
-  session: ace.IEditSession;
+  session: Ace.Ace.EditSession;
 }
 
 type SessionMap = Map<string, SessionData>;
 
 /** Class representing an Editor */
 export class Editor {
-  private readonly editor: ace.Editor;
-  private readonly nontabbedEditors : Array<ace.Editor>;
+  private readonly editor: Ace.Ace.Editor;
+  private readonly nontabbedEditors : Array<Ace.Ace.Editor>;
 
   private sessions: SessionMap = new Map();
   private maxLength = 0;
@@ -36,7 +38,7 @@ export class Editor {
    * @param {HTMLDivElement} elem - The element that will contain the editor
    */
   constructor(elem: HTMLDivElement) {
-    this.editor = ace.edit(elem);
+    this.editor = Ace.edit(elem);
     this.initACEEditor(this.editor);
     this.nontabbedEditors = [];
   }
@@ -50,14 +52,15 @@ export class Editor {
 
   /**
    * Configures the ACE editor
-   * @param {ace.Editor} editor - The ACE editor
+   * @param {Ace.Editor} editor - The ACE editor
    */
-  private initACEEditor(editor: ace.Editor) {
-    editor.$blockScrolling = Infinity;
+  private initACEEditor(editor: Ace.Ace.Editor) {
+    //editor.$blockScrolling = Infinity;
 
     // ... and content options
     editor.setShowPrintMargin(false);
-    editor.gotoLine(1);
+    editor.gotoLine(1, 1, false);
+
 
     editor.setOptions({
       highlightActiveLine: false,
@@ -97,7 +100,7 @@ export class Editor {
   public addSession(basename: string, content: string): void {
     const data: SessionData = {
       initialContents: content,
-      session: new ace.EditSession(content),
+      session: new Ace.EditSession(content),
     };
 
     // Set the mode
@@ -116,7 +119,7 @@ export class Editor {
     }
 
     // clear undo stack to avoid undoing everything we just did
-    data.session.setUndoManager(new ace.UndoManager());
+    data.session.setUndoManager(new Ace.UndoManager());
 
     this.sessions.set(basename, data);
   }
@@ -129,7 +132,7 @@ export class Editor {
   public addNonTabbedEditor(basename: string, elem: HTMLDivElement): void {
     const data = this.getSession(basename);
 
-    const newEditor = ace.edit(elem);
+    const newEditor = Ace.edit(elem);
     this.initACEEditor(newEditor);
     newEditor.setSession(data.session);
 
@@ -190,7 +193,8 @@ export class Editor {
     for (const s of this.sessions.values()) {
       s.session.setValue(s.initialContents);
     }
-    this.editor.gotoLine(1);
+    this.editor.gotoLine(0, 0, false);
+
     this.clearGutterAnnotation();
   }
 

frontend/tests/ts/editor.spec.ts

@@ -4,15 +4,15 @@ import chaiDom from 'chai-dom';
 
 const chai = use(chaiDom);
 
-import ace from 'brace';
+import * as Ace from 'ace-builds';
 
 import {Editor, EditorTheme} from '../../src/ts/editor';
 import {Resource} from '../../src/ts/resource';
 
 describe('Editor', () => {
   let inTest: Editor;
   let parent: HTMLDivElement;
-  let editor: ace.Editor;
+  let editor: Ace.Ace.Editor;
 
   const resource: Resource = {
     basename: 'my_file.adb',
@@ -22,7 +22,7 @@ describe('Editor', () => {
   before(() => {
     parent = document.createElement('div');
     inTest = new Editor(parent);
-    editor = ace.edit(parent);
+    editor = Ace.edit(parent);
   });
 
   after(() => {
@@ -74,8 +74,7 @@ describe('Editor', () => {
     it('should modify the initial contents and move the cursor', () => {
       editor.getSession().doc.insert({row: 0, column: 0}, '\n');
       const row = editor.session.getLength() - 1;
-      const column = editor.session.getLine(row).length;
-      editor.gotoLine(row + 1, column);
+      editor.gotoLine(row + 1, 0, false);
 
       expect(editor.getValue()).not.to.equal(resource.contents);
       expect(editor.getCursorPosition()).not.to.deep.equal({row: 0, column: 0});

frontend/tests/ts/widget.spec.ts

@@ -10,7 +10,7 @@ const chai = use(chaiAsPromised);
 import {readFileSync} from 'fs';
 import {resolve} from 'path';
 
-import ace from 'brace';
+import * as Ace from 'ace-builds';
 
 import {OutputArea} from '../../src/ts/areas';
 import * as Strings from '../../src/ts/strings';
@@ -159,7 +159,7 @@ describe('Widget', () => {
       });
 
       describe('Normal Behavior', () => {
-        let editor: ace.Editor;
+        let editor: Ace.Ace.Editor;
         const consoleMsg = 'This is a console message';
         const clickableInfoMsg = 'test.adb:1:2: info: This is an info message';
         const clickableStdoutMsg = 'test.adb:2:3: Clickable stdout message';
@@ -195,7 +195,7 @@ describe('Widget', () => {
 
         before(async () => {
           const editorDiv = getElemById(root.id + '.editors.editor');
-          editor = ace.edit(editorDiv);
+          editor = Ace.edit(editorDiv);
 
           server.on('connection', (socket) => {
             socket.on('message', (event) => {
@@ -404,11 +404,11 @@ describe('Widget', () => {
 
     describe('Settings Bar', () => {
       let editorDiv: HTMLElement;
-      let editor: ace.Editor;
+      let editor: Ace.Ace.Editor;
 
       before(() => {
         editorDiv = getElemById(root.id + '.editors.editor');
-        editor = ace.edit(editorDiv);
+        editor = Ace.edit(editorDiv);
       });
 
       it('should have a button that resets the editor', () => {

frontend/yarn.lock

@@ -3059,6 +3059,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ace-builds@npm:^1.36.4":
+  version: 1.36.4
+  resolution: "ace-builds@npm:1.36.4"
+  checksum: 10c0/f36dacc2099559a1c3ba4622bfca627072b030c04776c96bcc482e4bccb32550d9631c225b174c4df127e1086c2e534669f8aad3bbe2fb1c48a10b9395f9f205
+  languageName: node
+  linkType: hard
+
 "acorn-jsx@npm:^3.0.0":
   version: 3.0.1
   resolution: "acorn-jsx@npm:3.0.1"
@@ -3755,13 +3762,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"brace@npm:^0.11.1":
-  version: 0.11.1
-  resolution: "brace@npm:0.11.1"
-  checksum: 10c0/c29e09016edb9da0ddba21c6a956b62a5de06a6ac243bcfe25fbbea5b16304933f2105904aa823932e0595f87449b3b935761fb454a822175f1e5e1582a9544d
-  languageName: node
-  linkType: hard
-
 "braces@npm:^3.0.3, braces@npm:~3.0.2":
   version: 3.0.3
   resolution: "braces@npm:3.0.3"
@@ -8602,11 +8602,11 @@ __metadata:
     "@types/node": "npm:^20.17.5"
     "@typescript-eslint/eslint-plugin": "npm:^8.12.2"
     "@typescript-eslint/parser": "npm:^8.12.2"
+    ace-builds: "npm:^1.36.4"
     acorn: "npm:^8.14.0"
     amd-loader: "npm:^0.0.8"
     autoprefixer: "npm:^10.4.20"
     babel-loader: "npm:^9.2.1"
-    brace: "npm:^0.11.1"
     chai: "npm:^5.1.2"
     chai-as-promised: "npm:^8.0.0"
     chai-dom: "npm:^1.12.0"