feat(content-editor) allow pass field variables to Monaco Editor in b…

…inary-field and JSON field
dotCMS · Jan 25, 2024 · dda8cb2 · dda8cb2
1 parent 023007d
commit dda8cb2
Show file tree

Hide file tree

Showing 15 changed files with 426 additions and 132,070 deletions.
diff --git a/core-web/apps/dotcms-binary-field-builder/project.json b/core-web/apps/dotcms-binary-field-builder/project.json
@@ -41,6 +41,11 @@
                 ]
             },
             "configurations": {
+                "localhost": {
+                    "sourceMap": true,
+                    "optimization": false,
+                    "watch": true
+                },
                 "production": {
                     "budgets": [
                         {
@@ -83,7 +88,7 @@
                     "buildTarget": "dotcms-binary-field-builder:build:development"
                 }
             },
-            "defaultConfiguration": "development"
+            "defaultConfiguration": "production"
         },
         "extract-i18n": {
             "executor": "@angular-devkit/build-angular:extract-i18n",

diff --git a/...t-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html b/...t-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
@@ -1,77 +1,77 @@
 <label
     [attr.data-testId]="'label-' + field.variable"
-    [for]="field.variable"
     [checkIsRequiredControl]="field.variable"
+    [for]="field.variable"
     dotFieldRequired
     >{{ field.name }}</label
 >
 
 <ng-container [ngSwitch]="field.fieldType">
     <dot-edit-content-select-field
         *ngSwitchCase="fieldTypes.SELECT"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-radio-field
         *ngSwitchCase="fieldTypes.RADIO"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-text-field
         *ngSwitchCase="fieldTypes.TEXT"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-text-area
         *ngSwitchCase="fieldTypes.TEXTAREA"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-checkbox-field
         *ngSwitchCase="fieldTypes.CHECKBOX"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-multi-select-field
         *ngSwitchCase="fieldTypes.MULTI_SELECT"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-calendar-field
         *ngSwitchCase="calendarTypes.includes(field.fieldType) ? field.fieldType : ''"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable">
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field">
     </dot-edit-content-calendar-field>
 
     <dot-edit-content-tag-field
         *ngSwitchCase="fieldTypes.TAG"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-json-field
         *ngSwitchCase="fieldTypes.JSON"
-        [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [attr.data-testId]="'field-' + field.variable"
+        [field]="field" />
 
     <dot-edit-content-binary-field
         *ngSwitchCase="fieldTypes.BINARY"
-        [formControlName]="field.variable"
+        [attr.data-testId]="'field-' + field.variable"
         [contentlet]="contentlet"
         [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [formControlName]="field.variable" />
 
     <dot-edit-content-custom-field
         *ngSwitchCase="fieldTypes.CUSTOM_FIELD"
-        [field]="field"
+        [attr.data-testId]="'field-' + field.variable"
         [contentType]="contentType"
-        [attr.data-testId]="'field-' + field.variable" />
+        [field]="field" />
 
     <dot-block-editor
         *ngSwitchCase="fieldTypes.BLOCK_EDITOR"
-        [formControlName]="field.variable"
+        [attr.data-testId]="'field-' + field.variable"
         [contentlet]="contentlet"
         [field]="field"
-        [attr.data-testId]="'field-' + field.variable" />
+        [formControlName]="field.variable" />
 </ng-container>
 
 <small *ngIf="field.hint" [attr.data-testId]="'hint-' + field.variable">{{ field.hint }}</small>
diff --git a/...nt-binary-field/components/dot-binary-field-editor/dot-binary-field-editor.component.html b/...nt-binary-field/components/dot-binary-field-editor/dot-binary-field-editor.component.html
@@ -5,16 +5,15 @@
         }}</label>
         <input
             id="file-name"
-            type="text"
-            pInputText
-            formControlName="name"
             autocomplete="off"
+            formControlName="name"
             pInputText
-            placeholder="Ex. template.html" />
+            placeholder="Ex. template.html"
+            type="text" />
         <div class="error-message">
             <dot-field-validation-message
-                [patternErrorMessage]="'dot.binary.field.error.type.file.not.extension'"
                 [field]="form.get('name')"
+                [patternErrorMessage]="'dot.binary.field.error.type.file.not.extension'"
                 data-testId="error-message"></dot-field-validation-message>
         </div>
     </div>
@@ -23,10 +22,10 @@
             class="binary-field__code-editor"
             #editorRef
             [ngClass]="{ 'binary-field__code-editor--disabled': form.disabled }"
-            [options]="editorOptions"
+            [options]="monacoOptions()"
             (init)="onEditorInit()"
-            formControlName="content"
-            data-testId="code-editor"></ngx-monaco-editor>
+            data-testId="code-editor"
+            formControlName="content"></ngx-monaco-editor>
 
         <div class="editor-mode__helper" [ngClass]="{ 'editor-mode__helper--visible': mimeType }">
             <i class="pi pi-info-circle"></i>
@@ -37,15 +36,15 @@
         <p-button
             [label]="'dot.common.cancel' | dm"
             (click)="cancel.emit()"
-            styleClass="p-button-outlined"
-            type="button"
             aria-label="Cancel button"
-            data-testId="cancel-button"></p-button>
+            data-testId="cancel-button"
+            styleClass="p-button-outlined"
+            type="button"></p-button>
 
         <p-button
             [label]="'dot.common.save' | dm"
-            type="submit"
             aria-label="Import button"
-            data-testId="import-button"></p-button>
+            data-testId="import-button"
+            type="submit"></p-button>
     </div>
 </form>
diff --git a/...tent-binary-field/components/dot-binary-field-editor/dot-binary-field-editor.component.ts b/...tent-binary-field/components/dot-binary-field-editor/dot-binary-field-editor.component.ts
@@ -10,13 +10,15 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    computed,
     EventEmitter,
     HostListener,
+    inject,
     Input,
     OnInit,
     Output,
-    ViewChild,
-    inject
+    signal,
+    ViewChild
 } from '@angular/core';
 import {
     FormControl,
@@ -37,21 +39,7 @@ import { DotFieldValidationMessageComponent, DotMessagePipe } from '@dotcms/ui';
 
 import { DotBinaryFieldValidatorService } from '../../service/dot-binary-field-validator/dot-binary-field-validator.service';
 
-const EDITOR_CONFIG: MonacoEditorConstructionOptions = {
-    theme: 'vs',
-    minimap: {
-        enabled: false
-    },
-    cursorBlinking: 'solid',
-    overviewRulerBorder: false,
-    mouseWheelZoom: false,
-    lineNumbers: 'on',
-    roundedSelection: false,
-    automaticLayout: true,
-    language: 'text',
-    fontSize: 14
-};
-
+const DEFAULT_FILE_TYPE = 'text';
 @Component({
     selector: 'dot-dot-binary-field-editor',
     standalone: true,
@@ -73,28 +61,38 @@ export class DotBinaryFieldEditorComponent implements OnInit {
     @Input() fileName = '';
     @Input() fileContent = '';
 
+    languageType = signal(DEFAULT_FILE_TYPE);
     @Output() readonly tempFileUploaded = new EventEmitter<DotCMSTempFile>();
     @Output() readonly cancel = new EventEmitter<void>();
-
     @ViewChild('editorRef', { static: true }) editorRef!: MonacoEditorComponent;
-
+    readonly form = new FormGroup({
+        name: new FormControl('', [Validators.required, Validators.pattern(/^[^.]+\.[^.]+$/)]),
+        content: new FormControl('')
+    });
+    mimeType = '';
     private readonly cd: ChangeDetectorRef = inject(ChangeDetectorRef);
     private readonly dotUploadService: DotUploadService = inject(DotUploadService);
     private readonly dotMessageService: DotMessageService = inject(DotMessageService);
     private readonly dotBinaryFieldValidatorService: DotBinaryFieldValidatorService = inject(
         DotBinaryFieldValidatorService
     );
-
     private extension = '';
     private invalidFileMessage = '';
     private editor: monaco.editor.IStandaloneCodeEditor;
-    readonly form = new FormGroup({
-        name: new FormControl('', [Validators.required, Validators.pattern(/^[^.]+\.[^.]+$/)]),
-        content: new FormControl('')
+
+    private _customMonacoOptions = signal<MonacoEditorConstructionOptions>({});
+
+    monacoOptions = computed(() => {
+        return {
+            ...this._customMonacoOptions(),
+            language: this.languageType()
+        };
     });
 
-    editorOptions = EDITOR_CONFIG;
-    mimeType = '';
+    @Input()
+    set customMonacoOptions(customMonacoOptions: MonacoEditorConstructionOptions) {
+        this._customMonacoOptions.set(customMonacoOptions);
+    }
 
     get name(): FormControl {
         return this.form.get('name') as FormControl;
@@ -198,10 +196,7 @@ export class DotBinaryFieldEditorComponent implements OnInit {
     }
 
     private updateEditorLanguage(languageId: string = 'text') {
-        this.editorOptions = {
-            ...this.editorOptions,
-            language: languageId
-        };
+        this.languageType.set(languageId);
     }
 
     private disableEditor() {

diff --git a/...ield/components/dot-binary-field-ui-message/dot-binary-field-ui-message.component.spec.ts b/...ield/components/dot-binary-field-ui-message/dot-binary-field-ui-message.component.spec.ts
@@ -1,5 +1,6 @@
 import { byTestId, createHostFactory, SpectatorHost } from '@ngneat/spectator';
 import { mockProvider } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
 
 import { CommonModule } from '@angular/common';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
@@ -8,12 +9,19 @@ import { DotMessagePipe } from '@dotcms/ui';
 
 import { DotBinaryFieldUiMessageComponent } from './dot-binary-field-ui-message.component';
 
+import { DotBinaryFieldEditorComponent } from '../dot-binary-field-editor/dot-binary-field-editor.component';
+
 describe('DotBinaryFieldUiMessageComponent', () => {
     let spectator: SpectatorHost<DotBinaryFieldUiMessageComponent>;
 
     const createHost = createHostFactory({
         component: DotBinaryFieldUiMessageComponent,
-        imports: [CommonModule, DotMessagePipe, HttpClientTestingModule],
+        imports: [
+            CommonModule,
+            DotMessagePipe,
+            HttpClientTestingModule,
+            MockComponent(DotBinaryFieldEditorComponent)
+        ],
         providers: [mockProvider(DotMessagePipe)]
     });