feat(edit-content) add to json-field use custom FieldVariable of Mona…

…co Editor
dotCMS · Jan 23, 2024 · 9a32e07 · 9a32e07
1 parent 5625ebf
commit 9a32e07
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 131,921 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/...ent/src/lib/fields/dot-edit-content-json-field/dot-edit-content-json-field.component.html b/...ent/src/lib/fields/dot-edit-content-json-field/dot-edit-content-json-field.component.html
@@ -1 +1,3 @@
-<ngx-monaco-editor [formControlName]="field.variable" [options]="editorOptions"></ngx-monaco-editor>
+<ngx-monaco-editor
+    [formControlName]="field().variable"
+    [options]="monacoEditorOptions()"></ngx-monaco-editor>
diff --git a/...ntent/src/lib/fields/dot-edit-content-json-field/dot-edit-content-json-field.component.ts b/...ntent/src/lib/fields/dot-edit-content-json-field/dot-edit-content-json-field.component.ts
@@ -1,25 +1,36 @@
 import { MonacoEditorConstructionOptions, MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { Subject } from 'rxjs';
 
+import { JsonPipe } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
-    Input,
+    computed,
+    inject,
+    input,
     OnDestroy,
     OnInit,
-    inject
+    Signal
 } from '@angular/core';
 import { ControlContainer, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { takeUntil } from 'rxjs/operators';
 
-import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
+import { DotCMSContentTypeField, DotCMSContentTypeFieldVariable } from '@dotcms/dotcms-models';
+
+import { DEFAULT_MONACO_CONFIG } from '../../models/dot-edit-content-field.constant';
+import { getFieldVariablesParsed, stringToJson } from '../../utils/functions.util';
+
+export const DEFAULT_JSON_FIELD_EDITOR_CONFIG: MonacoEditorConstructionOptions = {
+    ...DEFAULT_MONACO_CONFIG,
+    language: 'json'
+};
 
 @Component({
     selector: 'dot-edit-content-json-field',
     standalone: true,
-    imports: [FormsModule, ReactiveFormsModule, MonacoEditorModule],
+    imports: [FormsModule, ReactiveFormsModule, MonacoEditorModule, JsonPipe],
     templateUrl: './dot-edit-content-json-field.component.html',
     styleUrls: ['./dot-edit-content-json-field.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -31,30 +42,23 @@ import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
     ]
 })
 export class DotEditContentJsonFieldComponent implements OnInit, OnDestroy {
-    @Input() field!: DotCMSContentTypeField;
+    field = input.required<DotCMSContentTypeField>();
+
+    // Monaco options
+    monacoEditorOptions: Signal<MonacoEditorConstructionOptions> = computed(() => {
+        return {
+            ...DEFAULT_JSON_FIELD_EDITOR_CONFIG,
+            ...this.parseCustomMonacoOptions(this.field().fieldVariables)
+        };
+    });
 
     private readonly cd = inject(ChangeDetectorRef);
     private readonly controlContainer = inject(ControlContainer);
     private readonly destroy$: Subject<boolean> = new Subject<boolean>();
 
-    public readonly editorOptions: MonacoEditorConstructionOptions = {
-        theme: 'vs',
-        minimap: {
-            enabled: false
-        },
-        fixedOverflowWidgets: true,
-        cursorBlinking: 'solid',
-        overviewRulerBorder: false,
-        mouseWheelZoom: false,
-        lineNumbers: 'on',
-        roundedSelection: false,
-        automaticLayout: true,
-        language: 'json'
-    };
-
     ngOnInit(): void {
         const form = this.controlContainer.control;
-        const control = form.get(this.field.variable);
+        const control = form.get(this.field().variable);
 
         /*
          * This is a workaround to force the change detection to run when the value of the control changes.
@@ -67,4 +71,21 @@ export class DotEditContentJsonFieldComponent implements OnInit, OnDestroy {
         this.destroy$.next(true);
         this.destroy$.complete();
     }
+
+    /**
+     * Parses the custom Monaco options for a given field of a DotCMSContentTypeField.
+     *
+     * @returns {Record<string, string>} Returns the parsed custom Monaco options as a key-value pair object.
+     * @private
+     * @param fieldVariables
+     */
+    private parseCustomMonacoOptions(
+        fieldVariables: DotCMSContentTypeFieldVariable[]
+    ): Record<string, string> {
+        const { monacoOptions } = getFieldVariablesParsed<{ monacoOptions: string }>(
+            fieldVariables
+        );
+
+        return stringToJson(monacoOptions);
+    }
 }