Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

add monaco editor to rule sets

Browse Source
This commit is contained in:
Dan Percic 2021-05-25 12:50:15 +03:00
parent 0a457a64e6
commit 4c3add97f0
12 changed files with 81 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
angular.json
View File

@ -48,20 +48,10 @@
"input": "apps/red-ui/src/assets/",
"output": "/assets/"
},
{
"glob": "**/*",
"input": "node_modules/ace-builds/src-min/",
"output": "/assets/ace-builds"
},
"apps/red-ui/src/manifest.webmanifest"
],
"styles": ["apps/red-ui/src/styles.scss"],
"scripts": [
"node_modules/@pdftron/webviewer/webviewer.min.js",
"node_modules/ace-builds/src-min/ace.js",
"node_modules/ace-builds/src-min/mode-java.js",
"node_modules/ace-builds/src-min/theme-eclipse.js"
],
"scripts": ["node_modules/@pdftron/webviewer/webviewer.min.js"],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,

10
apps/red-ui/src/app/app.module.ts
View File

@ -29,8 +29,6 @@ import { PlatformLocation } from '@angular/common';
import { BASE_HREF } from './tokens';
import { MONACO_PATH, MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
// declare let ace;
export function httpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
}
@ -112,14 +110,8 @@ const components = [
bootstrap: [AppComponent]
})
export class AppModule {
constructor(
// @Inject(BASE_HREF) private readonly _baseHref: string,
private readonly _router: Router,
private readonly _route: ActivatedRoute
) {
constructor(private readonly _router: Router, private readonly _route: ActivatedRoute) {
this._configureKeyCloakRouteHandling();
// ace.config.set('basePath', _baseHref + '/assets/ace-builds/');
}
private _configureKeyCloakRouteHandling() {

6
apps/red-ui/src/app/modules/admin/admin.module.ts
View File

@ -15,7 +15,6 @@ import { UserListingScreenComponent } from './screens/user-listing/user-listing-
import { WatermarkScreenComponent } from './screens/watermark/watermark-screen.component';
import { AdminBreadcrumbsComponent } from './components/breadcrumbs/admin-breadcrumbs.component';
import { RuleSetActionsComponent } from './components/rule-set-actions/rule-set-actions.component';
import { AceEditorModule } from 'ng2-ace-editor';
import { ColorPickerModule } from 'ngx-color-picker';
import { AddEditFileAttributeDialogComponent } from './dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component';
import { AddEditRuleSetDialogComponent } from './dialogs/add-edit-rule-set-dialog/add-edit-rule-set-dialog.component';
@ -33,6 +32,7 @@ import { ConfirmDeleteUsersDialogComponent } from './dialogs/confirm-delete-user
import { FileAttributesCsvImportDialogComponent } from './dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component';
import { ActiveFieldsListingComponent } from './dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component';
import { AdminSideNavComponent } from './admin-side-nav/admin-side-nav.component';
import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
const dialogs = [
AddEditRuleSetDialogComponent,
@ -81,9 +81,9 @@ const components = [
CommonModule,
SharedModule,
AdminRoutingModule,
AceEditorModule,
NgxChartsModule,
ColorPickerModule
ColorPickerModule,
MonacoEditorModule
]
})
export class AdminModule {}

17
apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
View File

@ -20,18 +20,11 @@
<redaction-admin-side-nav type="project-templates"></redaction-admin-side-nav>
<div class="editor-container">
<ace-editor
#editorComponent
(textChanged)="textChanged($event)"
[autoUpdateContent]="true"
[mode]="'java'"
[options]="aceOptions"
[readOnly]="!permissionsService.isAdmin()"
[text]="rules"
[theme]="'eclipse'"
class="ace-redaction"
>
</ace-editor>
<ngx-monaco-editor
[options]="editorOptions"
[(ngModel)]="codeEditorText"
(init)="onCodeEditorInit($event)"
></ngx-monaco-editor>
</div>
<div *ngIf="hasChanges && permissionsService.isAdmin()" class="changes-box">
<redaction-icon-button

5
apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.scss
View File

@ -9,3 +9,8 @@
display: flex;
justify-content: flex-end;
}
ngx-monaco-editor {
height: 100%;
width: 100%;
}

108
apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts
View File

@ -1,6 +1,5 @@
import { Component, ElementRef, ViewChild } from '@angular/core';
import { PermissionsService } from '@services/permissions.service';
import { AceEditorComponent } from 'ng2-ace-editor';
import { RulesControllerService } from '@redaction/red-ui-http';
import { NotificationService, NotificationType } from '@services/notification.service';
import { TranslateService } from '@ngx-translate/core';
@ -8,8 +7,10 @@ import { saveAs } from 'file-saver';
import { ComponentHasChanges } from '@guards/can-deactivate.guard';
import { ActivatedRoute } from '@angular/router';
import { AppStateService } from '@state/app-state.service';
declare let ace;
import { debounce } from '../../../../utils/debounce';
import ICodeEditor = monaco.editor.ICodeEditor;
import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;
@Component({
selector: 'redaction-rules-screen',
@ -17,21 +18,23 @@ declare let ace;
styleUrls: ['./rules-screen.component.scss']
})
export class RulesScreenComponent extends ComponentHasChanges {
aceOptions = { showPrintMargin: false };
rules: string;
editorOptions: IStandaloneEditorConstructionOptions = {
theme: 'vs',
language: 'java',
automaticLayout: true,
readOnly: !this.permissionsService.isAdmin()
};
processing = true;
initialLines: string[] = [];
currentLines: string[] = [];
changedLines: number[] = [];
activeEditMarkers: any[] = [];
@ViewChild('editorComponent', { static: true })
editorComponent: AceEditorComponent;
@ViewChild('fileInput')
private _fileInput: ElementRef;
private _codeEditor: ICodeEditor;
private _decorations: string[] = [];
constructor(
readonly permissionsService: PermissionsService,
private readonly _rulesControllerService: RulesControllerService,
@ -45,45 +48,59 @@ export class RulesScreenComponent extends ComponentHasChanges {
this._initialize();
}
get hasChanges(): boolean {
return this.activeEditMarkers.length > 0;
onCodeEditorInit(editor: ICodeEditor) {
this._codeEditor = editor;
(window as any).monaco.editor.defineTheme('redaction', {
base: 'vs',
inherit: true,
rules: [],
colors: {
'editor.lineHighlightBackground': '#f4f5f7'
}
});
(window as any).monaco.editor.setTheme('redaction');
}
textChanged($event: any) {
get hasChanges(): boolean {
return this._decorations.length > 0;
}
get codeEditorText() {
return this.currentLines.join('\n');
}
set codeEditorText($event: any) {
this.currentLines = $event.split('\n');
this.changedLines = [];
this.activeEditMarkers.forEach((am) => {
this.editorComponent.getEditor().getSession().removeMarker(am);
});
this.activeEditMarkers = [];
this.codeEditorTextChanged();
}
for (let i = 0; i < this.currentLines.length; i++) {
const currentEntry = this.currentLines[i];
if (this.initialLines.indexOf(currentEntry) < 0) {
this.changedLines.push(i);
}
}
@debounce()
codeEditorTextChanged() {
const newDecorations = this.currentLines
.filter((entry) => this._isNew(entry))
.map((entry) => this._makeDecorationFor(entry));
const range = ace.require('ace/range').Range;
for (const i of this.changedLines) {
const entry = this.currentLines[i];
if (entry?.trim().length > 0) {
// only mark non-empty lines
this.activeEditMarkers.push(
this.editorComponent
.getEditor()
.getSession()
.addMarker(new range(i, 0, i, 1), 'changed-row-marker', 'fullLine')
);
}
}
this._decorations = this._codeEditor.deltaDecorations(this._decorations, newDecorations);
}
private _isNew(entry: string): boolean {
return this.initialLines.indexOf(entry) < 0 && entry?.trim().length > 0;
}
private _makeDecorationFor(entry: string): IModelDeltaDecoration {
const line = this.currentLines.indexOf(entry) + 1;
return {
range: new monaco.Range(line, 1, line, 1),
options: { isWholeLine: true, className: 'changed-row-marker' }
} as IModelDeltaDecoration;
}
async save(): Promise<void> {
this.processing = true;
this._rulesControllerService
.uploadRules({
rules: this.editorComponent.getEditor().getValue(),
rules: this._codeEditor.getModel().getValue(),
ruleSetId: this._appStateService.activeRuleSetId
})
.subscribe(
@ -107,14 +124,13 @@ export class RulesScreenComponent extends ComponentHasChanges {
}
revert(): void {
this.initialLines = this.rules.split('\n');
this.editorComponent.getEditor().setValue(this.rules);
this.editorComponent.getEditor().clearSelection();
this.currentLines = this.initialLines;
this._decorations = this._codeEditor?.deltaDecorations(this._decorations, []) || [];
this.processing = false;
}
download(): void {
const content = this.editorComponent.getEditor().getValue();
const content = this._codeEditor.getModel().getValue();
const blob = new Blob([content], {
type: 'text/plain;charset=utf-8'
});
@ -127,7 +143,7 @@ export class RulesScreenComponent extends ComponentHasChanges {
if (file) {
fileReader.onload = () => {
this.editorComponent.getEditor().setValue(fileReader.result);
this._codeEditor.getModel().setValue(fileReader.result as string);
this._fileInput.nativeElement.value = null;
};
fileReader.readAsText(file);
@ -137,12 +153,10 @@ export class RulesScreenComponent extends ComponentHasChanges {
private _initialize() {
this._rulesControllerService.downloadRules(this._appStateService.activeRuleSetId).subscribe(
(rules) => {
this.rules = rules.rules;
this.currentLines = this.initialLines = rules.rules.split('\n');
this.revert();
},
() => {
this.processing = false;
}
() => (this.processing = false)
);
}
}

2
apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
View File

@ -153,7 +153,7 @@ export class DictionaryManagerComponent implements OnChanges {
private _getMatches(text: string): FindMatch[] {
const model = this._codeEditor?.getModel();
return model.findMatches(text, false, false, false, null, false) || [];
return model?.findMatches(text, false, false, false, null, false) || [];
}
get codeEditorText(): string {

8
apps/red-ui/src/app/modules/shared/shared.module.ts
View File

@ -33,7 +33,6 @@ import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { SelectComponent } from './components/select/select.component';
import { NavigateLastProjectsScreenDirective } from './directives/navigate-last-projects-screen.directive';
import { DictionaryManagerComponent } from './components/dictionary-manager/dictionary-manager.component';
import { AceEditorModule } from 'ng2-ace-editor';
import { SideNavComponent } from '@shared/components/side-nav/side-nav.component';
import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
@ -63,6 +62,7 @@ const components = [
RoundCheckboxComponent,
SelectComponent,
SideNavComponent,
DictionaryManagerComponent,
...buttons
];
@ -84,9 +84,9 @@ const modules = [
];
@NgModule({
declarations: [...components, ...utils, DictionaryManagerComponent],
imports: [CommonModule, ...modules, AceEditorModule, MonacoEditorModule],
exports: [...modules, ...components, ...utils, DictionaryManagerComponent],
declarations: [...components, ...utils],
imports: [CommonModule, ...modules, MonacoEditorModule],
exports: [...modules, ...components, ...utils],
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{

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

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

64
apps/red-ui/src/assets/styles/red-editor.scss
View File

@ -16,72 +16,8 @@
z-index: 40;
}
.ace-redaction {
color: $accent;
.ace_gutter {
background: $grey-2;
color: $grey-7;
border-right: none;
}
.ace_gutter-cell:after {
content: '.';
}
.ace_active-line {
background: $grey-6;
}
.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-6;
}
.ace_marker-layer .ace_selected-word {
border: 1px solid $grey-4;
}
.ace_invisible {
color: $grey-4;
}
&[ng-reflect-read-only='true'] {
background-color: $grey-2;
*:not(.ace_scrollbar) {
pointer-events: none;
}
}
}
.editor-container {
width: 100%;
ace-editor {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 1px solid $grey-5;
border-radius: 8px;
background-color: $white;
}
}
.changes-box {

1
package.json
View File

@ -59,7 +59,6 @@
"keycloak-js": "13.0.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"ng2-ace-editor": "^0.3.9",
"ngx-color-picker": "^11.0.0",
"ngx-toastr": "^13.2.1",
"papaparse": "^5.3.0",

18
yarn.lock
View File

@ -3354,11 +3354,6 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
mime-types "~2.1.24"
negotiator "0.6.2"
ace-builds@^1.4.2:
version "1.4.12"
resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.12.tgz#888efa386e36f4345f40b5233fcc4fe4c588fae7"
integrity sha512-G+chJctFPiiLGvs3+/Mly3apXTcfgE45dT5yp12BcWZ1kUs+gm0qd3/fv4gsz6fVag4mM0moHVpjHDIgph6Psg==
acorn-globals@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
@ -4078,11 +4073,6 @@ brace-expansion@^1.1.7:
balanced-match "^1.0.0"
concat-map "0.0.1"
brace@^0.11.1:
version "0.11.1"
resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
integrity sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg=
braces@^2.3.1, braces@^2.3.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@ -9563,14 +9553,6 @@ ng-packagr@12.0.0:
sass "^1.32.8"
stylus "^0.54.8"
ng2-ace-editor@^0.3.9:
version "0.3.9"
resolved "https://registry.yarnpkg.com/ng2-ace-editor/-/ng2-ace-editor-0.3.9.tgz#5ae68712e9ca49591eda31df8fe02eca1c3634e1"
integrity sha512-e8Q4YCirlL/OEiekewmzupG+zV3prYsiYmQnRzQzd0wNgsPjOLOdb0it7cCbzFfIXKGyIIHKTW5584WxPr2LnQ==
dependencies:
ace-builds "^1.4.2"
brace "^0.11.1"
ngx-color-picker@^11.0.0:
version "11.0.0"
resolved "https://registry.yarnpkg.com/ngx-color-picker/-/ngx-color-picker-11.0.0.tgz#c1e5468505953bc579bf21014a135808820ea753"