diff --git a/frontend/package.json b/frontend/package.json index 655ee9d02..fdebc55be 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/ts/editor.ts b/frontend/src/ts/editor.ts index 2e03ba34c..8eb1dc950 100644 --- a/frontend/src/ts/editor.ts +++ b/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; /** Class representing an Editor */ export class Editor { - private readonly editor: ace.Editor; - private readonly nontabbedEditors : Array; + private readonly editor: Ace.Ace.Editor; + private readonly nontabbedEditors : Array; 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(); } diff --git a/frontend/tests/ts/editor.spec.ts b/frontend/tests/ts/editor.spec.ts index fa83796d8..f64e31eb9 100644 --- a/frontend/tests/ts/editor.spec.ts +++ b/frontend/tests/ts/editor.spec.ts @@ -4,7 +4,7 @@ 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'; @@ -12,7 +12,7 @@ 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}); diff --git a/frontend/tests/ts/widget.spec.ts b/frontend/tests/ts/widget.spec.ts index f9d519d49..2806bef0b 100644 --- a/frontend/tests/ts/widget.spec.ts +++ b/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', () => { diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 63e9bce7d..88b8d91e9 100644 --- a/frontend/yarn.lock +++ b/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"