Merge pull request #835 from europeana/feat/MET-5782-Metis-Editor-Behaviour-Chrome

MET-5782 Codemirror Chrome / reactify config

Author: andyjmaclean

projects/metis/cypress/e2e/preview.cy.ts

@@ -126,7 +126,7 @@ context('metis-ui', () => {
       const selIndicatorActiveBlack = '.editor-ctrl.black.active';
       const selIndicatorActiveWhite = '.editor-ctrl.active:not(.black)';
 
-      const selLinkThemeBlack = '[data-e2e=set-theme-white]';
+      const selLinkThemeBlack = '[data-e2e=set-theme-black]';
       const selLinkThemeWhite = '[data-e2e=set-theme-white]';
 
       cy.get(selEditorOps).should('have.length', 6);

projects/metis/src/app/_services/editor-pref.service.ts

@@ -1,10 +1,11 @@
 import { Injectable } from '@angular/core';
 import { EditorConfiguration } from 'codemirror';
+import { BehaviorSubject } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class EditorPrefService {
   altTheme: string;
-  editorConfig: EditorConfiguration = {
+  baseConf: EditorConfiguration = {
     mode: 'application/xml',
     lineNumbers: true,
     indentUnit: 2,
@@ -16,9 +17,11 @@ export class EditorPrefService {
     gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
     theme: this.getEditorPref()
   };
+  editorConfig: BehaviorSubject<EditorConfiguration>;
 
   constructor() {
     this.altTheme = 'midnight';
+    this.editorConfig = new BehaviorSubject<EditorConfiguration>(this.baseConf);
   }
 
   /** getEditorPref
@@ -32,12 +35,16 @@ export class EditorPrefService {
   /** setEditorPref
    *
    * locally-stores the specified editor preference
-   * updates the local editorConfig variable
+   * updates the editorConfig subect
    * @param { string } theme - the theme to store
    **/
   setEditorPref(theme: string): void {
-    this.editorConfig.theme = theme;
     localStorage.setItem('editor-pref', theme);
+    this.editorConfig.next(
+      Object.assign(this.baseConf, {
+        theme: theme
+      })
+    );
   }
 
   /** currentThemeIsDefault
@@ -58,12 +65,4 @@ export class EditorPrefService {
     this.setEditorPref(newTheme);
     return newTheme;
   }
-
-  /** getEditorConfig
-   *
-   * returns a configuration for the CodeMirror editor
-   **/
-  getEditorConfig(): EditorConfiguration {
-    return this.editorConfig;
-  }
 }

projects/metis/src/app/dataset/editor/editor.component.html

@@ -1,6 +1,6 @@
 <div class="view-sample" [ngClass]="extraClasses">
   <div class="view-sample-title">
-    <div class="title-controls">
+    <div *ngIf="editorConfig" class="title-controls">
       <ng-template #defaultTitle>
         <h3>
           {{ title }}
@@ -37,7 +37,9 @@ <h3>
       ><span>{{ step }}</span> <span *ngIf="stepCompare"> {{ stepCompare }}</span></span
     >
   </div>
-  <ng-content></ng-content>
+  <div [ngClass]="{ 'theme-midnight' : editorConfig.theme !== 'default' }">
+    <ng-content></ng-content>
+  </div>
   <div *ngIf="expandable" class="btns-set btns-set-right">
     <a class="load-more-btn" (click)="toggle()" *ngIf="!expanded">{{ 'expandInfo' | translate }}</a>
   </div>

projects/metis/src/app/dataset/editor/editor.component.spec.ts

@@ -38,6 +38,15 @@ describe('EditorComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should set the readOnly flag in the editorConfig', () => {
+    component.ngOnInit();
+    expect(component.editorConfig.readOnly).toBeTruthy();
+
+    component.isReadOnly = false;
+    component.ngOnInit();
+    expect(component.editorConfig.readOnly).toBeFalsy();
+  });
+
   it('should allow extra classes', () => {
     const testClass = 'myClass';
     const extraClasses = {} as ClassMap;

projects/metis/src/app/dataset/editor/editor.component.ts

@@ -16,7 +16,7 @@ import { EditorConfiguration } from 'codemirror';
 import { CodemirrorComponent } from '@ctrl/ngx-codemirror';
 
 // sonar-disable-next-statement (sonar doesn't read tsconfig paths entry)
-import { ClassMap } from 'shared';
+import { ClassMap, SubscriptionManager } from 'shared';
 import { XmlDownload } from '../../_models';
 import { EditorPrefService } from '../../_services';
 
@@ -25,7 +25,7 @@ import { EditorPrefService } from '../../_services';
   templateUrl: './editor.component.html',
   styleUrls: ['./editor.component.scss']
 })
-export class EditorComponent implements AfterContentInit {
+export class EditorComponent extends SubscriptionManager implements AfterContentInit {
   private readonly editorPrefs = inject(EditorPrefService);
 
   @ViewChildren(CodemirrorComponent) allEditors: QueryList<CodemirrorComponent>;
@@ -59,6 +59,7 @@ export class EditorComponent implements AfterContentInit {
   @Input() themeDisabled = false;
   @Input() title: string;
   @Input() isSearchEditor = false;
+  @Input() isReadOnly = true;
   @Input() searchTerm: string;
 
   _xmlDownloads?: Array<XmlDownload>;
@@ -80,21 +81,20 @@ export class EditorComponent implements AfterContentInit {
   @Output() onSearch = new EventEmitter<string>();
   @Output() onToggle = new EventEmitter<number>();
 
-  ngOnInit(): void {
-    this.editorConfig = this.editorPrefs.getEditorConfig();
-  }
-
-  /** getEditorConfig
-   * returns this.editorConfig copied to incorporate readOnly overrides
-   * @param { boolean } readOnly - override the default conf
+  /**
+   * subscribe to config / override readOnly
    **/
-  getEditorConfig(readOnly = true): EditorConfiguration {
-    const copyConfig = structuredClone(this.editorConfig);
-    copyConfig.readOnly = readOnly;
-    return copyConfig;
+  ngOnInit(): void {
+    this.subs.push(
+      this.editorPrefs.editorConfig.subscribe((config: EditorConfiguration) => {
+        config.readOnly = this.isReadOnly;
+        this.editorConfig = config;
+      })
+    );
   }
 
   /** ngAfterContentInit
+   * animation utility for search
    * set initialised flag
    **/
   ngAfterContentInit(): void {

projects/metis/src/app/dataset/mapping/mapping.component.html

@@ -34,14 +34,15 @@
       label: 'Custom'
     }
   ]"
+  [isReadOnly]="false"
   #editor
 >
   <div class="view-sample-editor">
     <div class="view-sample-editor-codemirror">
       <ngx-codemirror
         [ngModel]="xslt | beautifyXML"
         (ngModelChange)="xsltToSave = $event"
-        [options]="editor.getEditorConfig(false)"
+        [options]="editor.editorConfig"
       ></ngx-codemirror>
     </div>
   </div>

projects/metis/src/app/dataset/preview/preview.component.html

@@ -127,7 +127,7 @@
         <ngx-codemirror
           [ngModel]="searchedXMLSample.xmlRecord | beautifyXML"
           (ngModelChange)="searchedXMLSample = $event"
-          [options]="editorSearch.getEditorConfig()"
+          [options]="editorSearch.editorConfig"
         ></ngx-codemirror>
       </div>
       <div
@@ -140,7 +140,7 @@
         <ngx-codemirror
           [ngModel]="searchedXMLSampleCompare.xmlRecord | beautifyXML"
           (ngModelChange)="searchedXMLSampleCompare.xmlRecord = $event"
-          [options]="editorSearch.getEditorConfig()"
+          [options]="editorSearch.editorConfig"
         ></ngx-codemirror>
       </div>
     </div>
@@ -179,7 +179,7 @@
           <ngx-codemirror
             [ngModel]="sample.xmlRecord | beautifyXML"
             (ngModelChange)="sample.xmlRecord = $event"
-            [options]="editorAll.getEditorConfig()"
+            [options]="editorAll.editorConfig"
           ></ngx-codemirror>
         </div>
         <div
@@ -192,7 +192,7 @@
           <ngx-codemirror
             [ngModel]="comparison.xmlRecord | beautifyXML"
             (ngModelChange)="comparison.xmlRecord = $event"
-            [options]="editorAll.getEditorConfig()"
+            [options]="editorAll.editorConfig"
           ></ngx-codemirror>
         </div>
       </div>
@@ -216,7 +216,7 @@
         <ngx-codemirror
           [ngModel]="nosample | beautifyXML"
           (ngModelChange)="(nosample)"
-          [options]="editorNone.getEditorConfig()"
+          [options]="editorNone.editorConfig"
         ></ngx-codemirror>
       </div>
     </app-editor>
@@ -269,7 +269,7 @@
             <ngx-codemirror
               [ngModel]="sample.xmlRecord | beautifyXML"
               (ngModelChange)="sample.xmlRecord = $event"
-              [options]="editorTransformed.getEditorConfig()"
+              [options]="editorTransformed.editorConfig"
             ></ngx-codemirror>
           </div>
 
@@ -283,7 +283,7 @@
               *ngIf="allTransformedSamples[i] && allTransformedSamples[i].xmlRecord"
               [ngModel]="allTransformedSamples[i].xmlRecord | beautifyXML"
               (ngModelChange)="allTransformedSamples[i].xmlRecord = $event"
-              [options]="editorTransformed.getEditorConfig()"
+              [options]="editorTransformed.editorConfig"
             ></ngx-codemirror>
           </div>
 

shared-styles/assets/sass/pandora/components/_viewxmlsamples.scss

@@ -208,6 +208,14 @@ codemirror {
   }
 }
 
+.view-sample.no-sample .theme-midnight .view-sample-editor,
+.view-sample .theme-midnight .view-sample-editor-codemirror {
+  // colour taken from CodeMirror
+  $midnight: #0F192A;
+  background-color: $midnight;
+  scrollbar-color: $eu-jade $midnight;
+}
+
 .search-editor {
   $input-padding-left: 0.65rem;
   transition: margin-bottom 0.5s;