feat: SQL Editor - Syntax Coloring (#3317)

Co-authored-by: i18n Sync Bot <[email protected]>
Co-authored-by: Helias <[email protected]>

Author: 3 people

apps/keira/src/assets/i18n/de.json

@@ -255,7 +255,7 @@
       "DETECTION_RANGE": "Steuert den Bereich, in dem Kreaturen Spieler erkennen und sehen.",
       "ITEMID1": "Dies ist die Gegenstandsnummer der Ausrüstung, die in der rechten Hand aus Item.dbc verwendet wird.",
       "ITEMID2": "Dies ist die Gegenstandsnummer der Ausrüstung, die in der linken Hand aus Item.dbc verwendet wird.",
-      "ITEMID3": "Dies ist die Gegenstandsnummer der Ausrüstung, die im Fernkampf-Slot aus Item.dbc verwendet wird.",
+      "ItemID3": "This is the item number of the equipment used in the ranged slot from Item.dbc.",
       "FactionHint": "When refering to the Creature's Faction ID it's the column on the left 'ID' in the selector, more information check 'faction' in the wiki."
     },
     "TEMPLATE_ADDON": {

libs/features/sql-editor/src/sql-editor.component.html

@@ -13,7 +13,16 @@
       </div>
     </div>
 
-    <textarea id="code" class="mb-1" [(ngModel)]="service.code" (keydown.f9)="execute()" rows="6" spellcheck="false"></textarea>
+    <code-editor
+      id="code"
+      [extensions]="extensions"
+      [lineWrapping]="true"
+      (keydown.f9)="execute()"
+      [languages]="languages"
+      [language]="'MySQL'"
+      [setup]="'basic'"
+      [(ngModel)]="service.code"
+    />
 
     <div class="row">
       <div class="col-sm-7">

libs/features/sql-editor/src/sql-editor.component.scss

@@ -1,11 +1,14 @@
 #code {
-  width: 100%;
-  padding: 9.5px;
-  word-break: break-all;
-  word-wrap: break-word;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  overflow: auto;
+  resize: vertical;
+  min-height: calc(1.5em * 6);
+  margin-bottom: 1rem;
+  border: 1px solid #e49649;
+  border-radius: 0.25rem;
+}
+
+#code ::ng-deep .cm-editor {
+  outline: none; // remove the default outline
 }
 
 .select-limit {

libs/features/sql-editor/src/sql-editor.component.spec.ts

@@ -6,6 +6,8 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { ClipboardService } from 'ngx-clipboard';
 import { of, throwError } from 'rxjs';
 import { SqlEditorComponent } from './sql-editor.component';
+import { By } from '@angular/platform-browser';
+import { CodeEditor } from '@acrodata/code-editor';
 import Spy = jasmine.Spy;
 
 export class SqlEditorPage extends PageObject<SqlEditorComponent> {
@@ -14,8 +16,8 @@ export class SqlEditorPage extends PageObject<SqlEditorComponent> {
   get affectedRows(): HTMLTextAreaElement {
     return this.query<HTMLTextAreaElement>('#affected-rows-box');
   }
-  get code(): HTMLTextAreaElement {
-    return this.query<HTMLTextAreaElement>('textarea#code');
+  get code(): HTMLElement {
+    return this.query<HTMLElement>('code-editor');
   }
   get copyBtn(): HTMLButtonElement {
     return this.query<HTMLButtonElement>('#copy-btn');
@@ -47,9 +49,12 @@ describe('SqlEditorComponent', () => {
     const mysqlQueryService = TestBed.inject(MysqlQueryService);
     spyOn(mysqlQueryService, 'query').and.returnValue(of(mockRows));
 
+    const codeEditorDebugElement = fixture.debugElement.query(By.directive(CodeEditor));
+    const codeEditorInstance = codeEditorDebugElement.componentInstance as CodeEditor;
+
     fixture.detectChanges();
 
-    return { page, mysqlQueryService, component };
+    return { page, mysqlQueryService, component, codeEditorInstance };
   };
 
   it('should correctly query', () => {
@@ -68,10 +73,10 @@ describe('SqlEditorComponent', () => {
   });
 
   it('should allow the user to insert a custom query', () => {
-    const { page, mysqlQueryService } = setup();
+    const { page, mysqlQueryService, codeEditorInstance } = setup();
     const customQuery = 'SELECT col FROM table WHERE col > 10';
 
-    page.setInputValue(page.code, customQuery);
+    codeEditorInstance.writeValue(customQuery);
     page.clickElement(page.executeBtn);
 
     expect(mysqlQueryService.query).toHaveBeenCalledWith(customQuery);
@@ -102,7 +107,7 @@ describe('SqlEditorComponent', () => {
 
     page.clickElement(page.executeBtn);
 
-    expect(component.columns.length).toBe(0);
+    expect(component['columns'].length).toBe(0);
   });
 
   it('should display the affected rows box when necessary', () => {
@@ -149,15 +154,15 @@ describe('SqlEditorComponent', () => {
 
     page.clickElement(page.executeBtn);
 
-    expect(component.columns.length).toBe(20);
+    expect(component['columns'].length).toBe(20);
   });
 
   it('clicking the copy button should copy the query', () => {
-    const { page } = setup();
+    const { page, codeEditorInstance } = setup();
     const spy = spyOn(TestBed.inject(ClipboardService), 'copyFromContent');
     const customQuery = '-- some text that will be copied';
 
-    page.setInputValue(page.code, customQuery);
+    codeEditorInstance.writeValue(customQuery);
     page.clickElement(page.copyBtn);
 
     expect(spy).toHaveBeenCalledWith(customQuery);

libs/features/sql-editor/src/sql-editor.component.ts

@@ -13,58 +13,61 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { QueryErrorComponent } from '@keira/shared/base-editor-components';
 import { MysqlQueryService } from '@keira/shared/db-layer';
 
+import { CodeEditor } from '@acrodata/code-editor';
+import { LanguageDescription } from '@codemirror/language';
+import { MySQL, sql } from '@codemirror/lang-sql';
+import { githubLight } from '@uiw/codemirror-theme-github';
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'keira-sql-editor',
   templateUrl: './sql-editor.component.html',
   styleUrls: ['./sql-editor.component.scss'],
-  imports: [TooltipModule, FormsModule, QueryErrorComponent, NgxDatatableModule, TranslateModule],
+  imports: [CodeEditor, TooltipModule, FormsModule, QueryErrorComponent, NgxDatatableModule, TranslateModule],
 })
 export class SqlEditorComponent extends SubscriptionHandler {
   private readonly mysqlQueryService = inject(MysqlQueryService);
   private readonly clipboardService = inject(ClipboardService);
-  readonly service = inject(SqlEditorService);
+  protected readonly service = inject(SqlEditorService);
   private readonly changeDetectorRef = inject(ChangeDetectorRef);
 
-  readonly DTCFG = DTCFG;
-  readonly docUrl = 'https://www.w3schools.com/sql/sql_intro.asp';
+  protected readonly DTCFG = DTCFG;
+  protected readonly docUrl = 'https://www.w3schools.com/sql/sql_intro.asp';
   private readonly MAX_COL_SHOWN = 20;
 
-  // displayLimit = 10;
-  // get displayLimitOptions() {
-  //   return [10, 20, 50, 100, 200, 500, 1000];
-  // }
+  protected readonly languages = [LanguageDescription.of({ name: 'MySQL', support: sql({ dialect: MySQL, upperCaseKeywords: true }) })];
+  protected readonly extensions = [githubLight];
 
   private _error: QueryError | undefined;
-  get error(): QueryError | undefined {
+  protected get error(): QueryError | undefined {
     return this._error;
   }
 
   private _rows: TableRow[] = [];
-  get rows(): TableRow[] {
+  protected get rows(): TableRow[] {
     return this._rows;
   }
 
   private _columns!: string[];
-  get columns(): string[] {
+  protected get columns(): string[] {
     return this._columns;
   }
 
   private _affectedRows!: number;
-  get affectedRows(): number {
+  protected get affectedRows(): number {
     return this._affectedRows;
   }
 
   private _message!: string;
-  get message(): string {
+  protected get message(): string {
     return this._message;
   }
 
-  copy(): void {
+  protected copy(): void {
     this.clipboardService.copyFromContent(this.service.code);
   }
 
-  execute(): void {
+  protected execute(): void {
     this.subscriptions.push(
       this.mysqlQueryService.query(this.service.code).subscribe({
         next: (rows: TableRow[] | { affectedRows: number; message: string }) => {