Overview:
In my Angular application, I have integrated the ACE editor () to allow users to write custom SQL statements. While there are existing modes and themes for SQL, I decided to create a customized mode and theme to suit my specific requirements.
Setup Process:
I followed a tutorial available at:
ng new ace-app(Angular 13.3.2)npm install ace-builds(ACE-Builds 1.4.14)
component.ts
import * as ace from 'ace-builds';
...
public aceEditor: ace.Ace.Editor;
@ViewChild('editor') private editor!: ElementRef<HTMLElement>;
...
ngAfterViewInit(): void {
// I don't understand why we don't set the "basePath" to our installed package
ace.config.set('basePath', 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6979593db94839f9a9285b6c7d8c2d8c7c4">[email protected]</a>/src-noconflict');
this.aceEditor = ace.edit(this.editor.nativeElement);
if (this.aceEditor) {
this.aceEditor.setOptions({
mode: 'ace/mode/sql',
theme: 'ace/theme/sqlserver',
});
}
component.html
<div #editor></div>
Outcome:
The ACE editor is functioning properly, but now I need to figure out how to incorporate a custom mode and theme.
https://i.sstatic.net/nnIVk.png
Challenges and Queries:
- Is it necessary to set the
basePathto an external URL when the package is already installed? (Answered in Edit 1) - Where should I integrate the custom mode.js and theme.js files?
- How can I instruct ACE to utilize the custom mode.js and theme.js?
Edit 1:
I was able to remove the following line of code:
ace.config.set('basePath', 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="600103054d0215090c041320514e544e5152">[email protected]</a>/src-noconflict');
by directly importing the theme and mode with:
import 'ace-builds/src-noconflict/mode-sql';
import 'ace-builds/src-noconflict/theme-sqlserver';
No other changes were required in the code.