reworked ace editor theme

angular.json

@@ -36,7 +36,7 @@
                             "apps/red-ui/src/manifest.webmanifest"
                         ],
                         "styles": ["apps/red-ui/src/styles.scss"],
-                        "scripts": ["node_modules/@pdftron/webviewer/webviewer.min.js"]
+                        "scripts": ["node_modules/@pdftron/webviewer/webviewer.min.js", "node_modules/ace-builds/src-min/ace.js"]
                     },
                     "configurations": {
                         "production": {

apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html

@@ -67,7 +67,7 @@
                 <ace-editor
                     #editorComponent
                     [mode]="'text'"
-                    [theme]="'tomorrow'"
+                    [theme]="'redaction'"
                     [options]="aceOptions"
                     [readOnly]="!permissionsService.isAdmin()"
                     (textChanged)="textChanged($event)"

apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts

@@ -5,8 +5,6 @@ import { AppStateService } from '../../../state/app-state.service';
 import { PermissionsService } from '../../../common/service/permissions.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AceEditorComponent } from 'ng2-ace-editor';
-import * as aceModule from 'ace-builds/src-noconflict/ace';
-import { reference } from '../../../utils/functions';
 import { debounce } from '../../../utils/debounce';
 import { NotificationService, NotificationType } from '../../../notification/notification.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -62,7 +60,6 @@ export class DictionaryOverviewScreenComponent {
                 this._initialize();
             }
         });
-        reference(aceModule);
     }
 
     private _initialize() {
@@ -109,7 +106,7 @@ export class DictionaryOverviewScreenComponent {
         });
         this.activeSearchMarkers = [];
 
-        const Range = ace.acequire('ace/range').Range;
+        const Range = ace.require('ace/range').Range;
         for (const position of this.searchPositions) {
             this.activeSearchMarkers.push(
                 this.editorComponent
@@ -148,7 +145,7 @@ export class DictionaryOverviewScreenComponent {
             }
         }
 
-        const Range = ace.acequire('ace/range').Range;
+        const Range = ace.require('ace/range').Range;
         for (const i of this.changedLines) {
             const entry = this.currentDictionaryEntries[i];
             if (entry?.trim().length > 0) {

apps/red-ui/src/assets/ace-editor/theme-redaction.js

@@ -0,0 +1,3 @@
+ace.define('ace/theme/redaction', [], function (exports, object) {
+    object.cssClass = 'ace-redaction';
+});

apps/red-ui/src/assets/styles/red-editor.scss

@@ -18,3 +18,42 @@
     background: rgba($yellow-1, 0.3);
     z-index: 40;
 }
+
+.ace-redaction {
+    background-color: $white;
+    color: $accent;
+
+    .ace_gutter {
+        background: $grey-2;
+        color: $grey-7;
+    }
+
+    .ace_print-margin {
+        width: 0;
+        background: $white;
+    }
+
+    .ace_cursor {
+        color: $grey-5;
+    }
+
+    .ace_marker-layer .ace_selection {
+        background: $grey-4;
+    }
+
+    .ace_multiselect .ace_selection.ace_start {
+        box-shadow: 0 0 3px 0 $white;
+    }
+
+    .ace_gutter-active-line {
+        background-color: $grey-4;
+    }
+
+    .ace_marker-layer .ace_selected-word {
+        border: 1px solid $grey-4;
+    }
+
+    .ace_invisible {
+        color: $grey-4;
+    }
+}