A version of the sourcecode editor that pins / fixes the language of the editor as JSON

src/app/bulk-edit/bulk-edit-editor/bulk-edit-editor.component.ts

@@ -63,7 +63,8 @@ import { MatButton } from '@angular/material/button';
 import { MatToolbar } from '@angular/material/toolbar';
 import {
   decodeSourceCodeValue,
-  isSourceCodeProfileDataType
+  getSourceCodeEditorOptionsForDataType,
+  isCodeEditorProfileDataType
 } from '@mdm/shared/source-code/source-code-value';
 
 @Component({
@@ -361,14 +362,19 @@ export class BulkEditEditorComponent implements OnInit {
       };
     }
 
-    if (isSourceCodeProfileDataType(field.dataType as string)) {
+    if (isCodeEditorProfileDataType(field.dataType as string)) {
+      const sourceCodeEditorOptions = getSourceCodeEditorOptionsForDataType(
+        field.dataType as string
+      );
+
       column.cellEditor = 'sourceCodeCellEditor';
       column.cellEditorParams = {
+        ...sourceCodeEditorOptions,
         onFilePickerOpen: () => this.setStopEditingWhenCellsLoseFocus(false),
         onFilePickerClose: () => this.setStopEditingWhenCellsLoseFocus(true)
       };
       column.valueFormatter = (params) => {
-        const value = decodeSourceCodeValue(params.value);
+        const value = decodeSourceCodeValue(params.value, sourceCodeEditorOptions);
         return value.source ? `${value.language}: ${value.source}` : '';
       };
     }

src/app/bulk-edit/bulk-edit-editor/cell-editors/source-code-cell-editor/source-code-cell-editor.component.html

@@ -28,6 +28,7 @@
       <mat-label>Language</mat-label>
       <mat-select
         [(ngModel)]="language"
+        [disabled]="params.pinLanguage"
         panelClass="ag-custom-component-popup"
         (selectionChange)="onLanguageChange()"
       >

src/app/bulk-edit/bulk-edit-editor/cell-editors/source-code-cell-editor/source-code-cell-editor.component.ts

@@ -45,12 +45,16 @@ import {
 import {
   decodeSourceCodeValue,
   defaultSourceCodeLanguage,
-  encodeSourceCodeValue
+  encodeSourceCodeValue,
+  SourceCodeValueFormat
 } from '@mdm/shared/source-code/source-code-value';
 
 export type PopupPosition = 'under' | 'over';
 
 interface SourceCodeCellEditorParams {
+  fixedLanguage?: string
+  pinLanguage?: boolean
+  valueFormat?: SourceCodeValueFormat
   onFilePickerOpen?: () => void
   onFilePickerClose?: () => void
 }
@@ -82,7 +86,11 @@ export class SourceCodeCellEditorComponent implements ICellEditorAngularComp, On
   agInit(params: ICellEditorParams & SourceCodeCellEditorParams): void {
     this.params = params;
     this.originalValue = this.params.value ?? '';
-    const value = decodeSourceCodeValue(this.params.value);
+    const value = decodeSourceCodeValue(this.params.value, {
+      fixedLanguage: this.params.fixedLanguage,
+      pinLanguage: this.params.pinLanguage,
+      valueFormat: this.params.valueFormat
+    });
     this.language = value.language;
     this.source = value.source;
   }
@@ -107,7 +115,7 @@ export class SourceCodeCellEditorComponent implements ICellEditorAngularComp, On
     return encodeSourceCodeValue({
       language: this.language,
       source: this.source
-    });
+    }, this.params.valueFormat);
   }
 
   isPopup(): boolean {
@@ -119,11 +127,13 @@ export class SourceCodeCellEditorComponent implements ICellEditorAngularComp, On
   }
 
   onLanguageChange() {
+    this.applyPinnedLanguage();
     this.hasChanged = true;
   }
 
   onSourceChange(value: string) {
     this.source = value;
+    this.applyPinnedLanguage();
     this.hasChanged = true;
   }
 
@@ -139,23 +149,29 @@ export class SourceCodeCellEditorComponent implements ICellEditorAngularComp, On
 
     const file = target.files[0];
     const extension = file.name.split('.').pop();
-    const language = this.supportedLanguages.find(
-      lang => lang.fileExt === extension
-    );
 
-    if (!language) {
-      this.importFileName = '';
-      target.value = '';
-      return;
+    if (!this.params.pinLanguage) {
+      const language = this.supportedLanguages.find(
+        lang => lang.fileExt === extension
+      );
+
+      if (!language) {
+        this.importFileName = '';
+        target.value = '';
+        return;
+      }
+
+      this.language = language.value;
     }
 
     this.importFileName = file.name;
-    this.language = language.value;
+    this.applyPinnedLanguage();
     this.hasChanged = true;
 
     const reader = new FileReader();
     reader.onload = () => {
       this.source = reader.result?.toString() ?? '';
+      this.applyPinnedLanguage();
       this.hasChanged = true;
     };
     reader.readAsText(file);
@@ -196,4 +212,10 @@ export class SourceCodeCellEditorComponent implements ICellEditorAngularComp, On
   stopEvent(event: Event) {
     event.stopPropagation();
   }
+
+  private applyPinnedLanguage() {
+    if (this.params.pinLanguage && this.params.fixedLanguage) {
+      this.language = this.params.fixedLanguage;
+    }
+  }
 }

src/app/modals/edit-profile-section/edit-profile-section.component.html

@@ -43,12 +43,15 @@ <h2>{{ profileSection.label }}</h2>
           id="{{ field.fieldName }}"
           [inEditMode]="!field.uneditable"
           [rootElement]="data.catalogueItem"
-          *ngIf="field.dataType === 'text' && !isSourceCode(field)"
+          *ngIf="field.dataType === 'text' && !isCodeEditor(field)"
         ></mdm-content-editor>
         <mdm-source-code-editor
           [(value)]="field.currentValue"
           [inEditMode]="!field.readOnly"
-          *ngIf="isSourceCode(field)"
+          [fixedLanguage]="codeEditorFixedLanguage(field)"
+          [pinLanguage]="codeEditorPinLanguage(field)"
+          [valueFormat]="codeEditorValueFormat(field)"
+          *ngIf="isCodeEditor(field)"
         ></mdm-source-code-editor>
 
         <input
@@ -71,7 +74,7 @@ <h2>{{ profileSection.label }}</h2>
                   field.dataType !== 'folder' &&
                   field.dataType !== 'model' &&
                   field.dataType != 'text' &&
-                  !isSourceCode(field) &&
+                  !isCodeEditor(field) &&
                   field.dataType != 'date' &&
                   field.dataType != 'datetime' &&
                   field.dataType != 'boolean' &&

src/app/modals/edit-profile-section/edit-profile-section.component.ts

@@ -45,7 +45,11 @@ import { MatTooltip } from '@angular/material/tooltip';
 import { FormsModule } from '@angular/forms';
 import { NgIf, NgFor, NgClass } from '@angular/common';
 import { SourceCodeEditorComponent } from '@mdm/shared/source-code/source-code-editor.component';
-import { isSourceCodeProfileDataType } from '@mdm/shared/source-code/source-code-value';
+import {
+  getSourceCodeEditorOptionsForDataType,
+  isCodeEditorProfileDataType,
+  SourceCodeValueFormat
+} from '@mdm/shared/source-code/source-code-value';
 
 @Component({
     selector: '[mdm-edit-profile-section]',
@@ -147,8 +151,26 @@ export class EditProfileSectionComponent implements OnInit {
     return items.sort((a, b) => (a > b ? 1 : a === b ? 0 : -1));
   }
 
-  isSourceCode(field: ProfileField): boolean {
-    return isSourceCodeProfileDataType(field.dataType as string);
+  isCodeEditor(field: ProfileField): boolean {
+    return isCodeEditorProfileDataType(field.dataType as string);
+  }
+
+  codeEditorFixedLanguage(field: ProfileField): string | undefined {
+    return getSourceCodeEditorOptionsForDataType(
+      field.dataType as string
+    ).fixedLanguage;
+  }
+
+  codeEditorPinLanguage(field: ProfileField): boolean {
+    return !!getSourceCodeEditorOptionsForDataType(
+      field.dataType as string
+    ).pinLanguage;
+  }
+
+  codeEditorValueFormat(field: ProfileField): SourceCodeValueFormat {
+    return getSourceCodeEditorOptionsForDataType(
+      field.dataType as string
+    ).valueFormat ?? 'sourcecode';
   }
 
   showAddElementToMarkdown(field: ProfileField) {

src/app/shared/profile-section/profile-section.component.html

@@ -44,12 +44,15 @@
           id="{{ field.fieldName }}"
           [inEditMode]="false"
           [rootElement]="rootObject"
-          *ngIf="field.dataType === 'text' && !isSourceCode(field.dataType)"
+          *ngIf="field.dataType === 'text' && !isCodeEditor(field.dataType)"
         ></mdm-content-editor>
         <mdm-source-code-editor
           [(value)]="field.currentValue"
           [inEditMode]="false"
-          *ngIf="isSourceCode(field.dataType)"
+          [fixedLanguage]="codeEditorFixedLanguage(field.dataType)"
+          [pinLanguage]="codeEditorPinLanguage(field.dataType)"
+          [valueFormat]="codeEditorValueFormat(field.dataType)"
+          *ngIf="isCodeEditor(field.dataType)"
         ></mdm-source-code-editor>
         <input
           type="checkbox"
@@ -71,7 +74,7 @@
             field.dataType !== 'folder' &&
             field.dataType !== 'model' &&
             field.dataType != 'text' &&
-            !isSourceCode(field.dataType) &&
+            !isCodeEditor(field.dataType) &&
             field.dataType != 'date' &&
             field.dataType != 'datetime' &&
             field.dataType != 'boolean'

src/app/shared/profile-section/profile-section.component.ts

@@ -24,7 +24,11 @@ import { ContentEditorComponent } from '@mdm/content/content-editor/content-edit
 import { MatTooltip } from '@angular/material/tooltip';
 import { NgIf, NgFor } from '@angular/common';
 import { SourceCodeEditorComponent } from '@mdm/shared/source-code/source-code-editor.component';
-import { isSourceCodeProfileDataType } from '@mdm/shared/source-code/source-code-value';
+import {
+  getSourceCodeEditorOptionsForDataType,
+  isCodeEditorProfileDataType,
+  SourceCodeValueFormat
+} from '@mdm/shared/source-code/source-code-value';
 
 @Component({
     selector: '[mdm-profile-section]',
@@ -48,7 +52,19 @@ export class ProfileSectionComponent {
     decimal: 'number'
   };
 
-  isSourceCode(dataType: string): boolean {
-    return isSourceCodeProfileDataType(dataType);
+  isCodeEditor(dataType: string): boolean {
+    return isCodeEditorProfileDataType(dataType);
+  }
+
+  codeEditorFixedLanguage(dataType: string): string | undefined {
+    return getSourceCodeEditorOptionsForDataType(dataType).fixedLanguage;
+  }
+
+  codeEditorPinLanguage(dataType: string): boolean {
+    return !!getSourceCodeEditorOptionsForDataType(dataType).pinLanguage;
+  }
+
+  codeEditorValueFormat(dataType: string): SourceCodeValueFormat {
+    return getSourceCodeEditorOptionsForDataType(dataType).valueFormat ?? 'sourcecode';
   }
 }

src/app/shared/source-code/source-code-editor.component.html

@@ -43,7 +43,7 @@
       <mat-label>Language</mat-label>
       <mat-select
         [(ngModel)]="language"
-        [disabled]="!inEditMode"
+        [disabled]="!inEditMode || pinLanguage"
         (selectionChange)="onLanguageChange()"
       >
         <mat-option

src/app/shared/source-code/source-code-editor.component.ts

@@ -53,7 +53,8 @@ import {
 import {
   decodeSourceCodeValue,
   defaultSourceCodeLanguage,
-  encodeSourceCodeValue
+  encodeSourceCodeValue,
+  SourceCodeValueFormat
 } from './source-code-value';
 
 @Component({
@@ -68,6 +69,9 @@ export class SourceCodeEditorComponent implements OnChanges, OnDestroy {
   @Output() valueChange = new EventEmitter<string>();
 
   @Input() inEditMode = true;
+  @Input() fixedLanguage?: string;
+  @Input() pinLanguage = false;
+  @Input() valueFormat: SourceCodeValueFormat = 'sourcecode';
 
   language = defaultSourceCodeLanguage;
   source = '';
@@ -83,8 +87,17 @@ export class SourceCodeEditorComponent implements OnChanges, OnDestroy {
   private copiedTimeout?: ReturnType<typeof setTimeout>;
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.value) {
-      const decoded = decodeSourceCodeValue(this.value);
+    if (
+      changes.value
+      || changes.fixedLanguage
+      || changes.pinLanguage
+      || changes.valueFormat
+    ) {
+      const decoded = decodeSourceCodeValue(this.value, {
+        fixedLanguage: this.fixedLanguage,
+        pinLanguage: this.pinLanguage,
+        valueFormat: this.valueFormat
+      });
       this.language = decoded.language;
       this.source = decoded.source;
       this.highlightedSource = this.highlightSource();
@@ -113,12 +126,14 @@ export class SourceCodeEditorComponent implements OnChanges, OnDestroy {
   }
 
   onLanguageChange() {
+    this.applyPinnedLanguage();
     this.highlightedSource = this.highlightSource();
     this.emitValue();
   }
 
   onSourceChange(value: string) {
     this.source = value;
+    this.applyPinnedLanguage();
     this.highlightedSource = this.highlightSource();
     this.emitValue();
   }
@@ -132,22 +147,29 @@ export class SourceCodeEditorComponent implements OnChanges, OnDestroy {
 
     const file = target.files[0];
     const extension = file.name.split('.').pop();
-    const language = this.supportedLanguages.find(
-      lang => lang.fileExt === extension
-    );
 
-    if (!language) {
-      this.importFileName = '';
-      target.value = '';
-      return;
+    if (!this.pinLanguage) {
+      const language = this.supportedLanguages.find(
+        lang => lang.fileExt === extension
+      );
+
+      if (!language) {
+        this.importFileName = '';
+        target.value = '';
+        return;
+      }
+
+      this.language = language.value;
     }
 
     this.importFileName = file.name;
-    this.language = language.value;
+    this.applyPinnedLanguage();
 
     const reader = new FileReader();
     reader.onload = () => {
       this.source = reader.result?.toString() ?? '';
+      this.applyPinnedLanguage();
+      this.highlightedSource = this.highlightSource();
       this.emitValue();
     };
     reader.readAsText(file);
@@ -168,10 +190,17 @@ export class SourceCodeEditorComponent implements OnChanges, OnDestroy {
   }
 
   private emitValue() {
+    this.applyPinnedLanguage();
     this.valueChange.emit(encodeSourceCodeValue({
       language: this.language,
       source: this.source
-    }));
+    }, this.valueFormat));
+  }
+
+  private applyPinnedLanguage() {
+    if (this.pinLanguage && this.fixedLanguage) {
+      this.language = this.fixedLanguage;
+    }
   }
 
   private highlightSource(): string {