Edit Contentlet: Allow User Write Code

core-web/apps/contenttype-fields-builder/src/app/app.module.ts

@@ -1,3 +1,5 @@
+import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
+
 import { DoBootstrap, Injector, NgModule, Type } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 import { BrowserModule } from '@angular/platform-browser';
@@ -22,7 +24,7 @@ const CONTENTTYPE_FIELDS: ContenttypeFieldElement[] = [
 
 @NgModule({
     declarations: [AppComponent],
-    imports: [BrowserModule, BrowserAnimationsModule, DotBinaryFieldComponent],
+    imports: [BrowserModule, BrowserAnimationsModule, DotBinaryFieldComponent, MonacoEditorModule],
     providers: [DotMessageService, DotUploadService]
 })
 export class AppModule implements DoBootstrap {

core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.html

@@ -79,19 +79,26 @@
         [header]="dialogHeaderMap[vm.mode] | dm"
         [draggable]="false"
         [resizable]="false"
+        [closeOnEscape]="false"
+        [styleClass]="isEditorMode(vm.mode) ? 'screen-cover' : ''"
         (onHide)="afterDialogClose()">
-        <div [ngSwitch]="vm.mode">
-            <div *ngSwitchCase="BINARY_FIELD_MODE.URL" data-testId="url">
+        <ng-container [ngSwitch]="vm.mode">
+            <ng-container *ngSwitchCase="BINARY_FIELD_MODE.URL" data-testId="url">
                 <dot-dot-binary-field-url-mode
                     [accept]="accept"
                     [maxFileSize]="maxFileSize"
                     (tempFileUploaded)="setTempFile($event)"
-                    (cancel)="closeDialog()"></dot-dot-binary-field-url-mode>
-            </div>
-            <div *ngSwitchCase="BINARY_FIELD_MODE.EDITOR" data-testId="editor">
-                TODO: Implement Write Code
-            </div>
-        </div>
+                    (cancel)="closeDialog()"
+                    data-testId="url-mode"></dot-dot-binary-field-url-mode>
+            </ng-container>
+            <ng-container *ngSwitchCase="BINARY_FIELD_MODE.EDITOR" data-testId="editor">
+                <dot-dot-binary-field-editor
+                    [accept]="accept"
+                    (tempFileUploaded)="setTempFile($event)"
+                    (cancel)="closeDialog()"
+                    data-testId="editor-mode"></dot-dot-binary-field-editor>
+            </ng-container>
+        </ng-container>
     </p-dialog>
 </div>
 

core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.scss

@@ -1,5 +1,14 @@
 @use "variables" as *;
 
+::ng-deep {
+    .screen-cover {
+        width: 80vw;
+        height: 80vh;
+        min-width: 40rem;
+        min-height: 40rem;
+    }
+}
+
 .binary-field__container {
     display: flex;
     justify-content: center;

core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.spec.ts

@@ -262,7 +262,7 @@ describe('DotBinaryFieldComponent', () => {
             spectator.detectChanges();
             await spectator.fixture.whenStable();
 
-            const editorElement = spectator.query(byTestId('editor'));
+            const editorElement = spectator.query(byTestId('editor-mode'));
             const isDialogOpen = spectator.fixture.componentInstance.openDialog;
 
             expect(editorElement).toBeTruthy();
@@ -278,7 +278,7 @@ describe('DotBinaryFieldComponent', () => {
             spectator.detectChanges();
             await spectator.fixture.whenStable();
 
-            const urlElement = spectator.query(byTestId('url'));
+            const urlElement = spectator.query(byTestId('url-mode'));
             const isDialogOpen = spectator.fixture.componentInstance.openDialog;
 
             expect(urlElement).toBeTruthy();

core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.stories.ts

@@ -50,21 +50,18 @@ export default {
                     provide: DotUploadService,
                     useValue: {
                         uploadFile: () => {
-                            return new Promise((resolve, reject) => {
+                            return new Promise((resolve, _reject) => {
                                 setTimeout(() => {
-                                    reject({
-                                        message: 'error URL'
+                                    resolve({
+                                        fileName: 'Image.jpg',
+                                        folder: 'folder',
+                                        id: 'tempFileId',
+                                        image: true,
+                                        length: 10000,
+                                        mimeType: 'mimeType',
+                                        referenceUrl: 'referenceUrl',
+                                        thumbnailUrl: 'thumbnailUrl'
                                     });
-                                    // resolve({
-                                    //     fileName: 'Image.jpg',
-                                    //     folder: 'folder',
-                                    //     id: 'tempFileId',
-                                    //     image: true,
-                                    //     length: 10000,
-                                    //     mimeType: 'mimeType',
-                                    //     referenceUrl: 'referenceUrl',
-                                    //     thumbnailUrl: 'thumbnailUrl'
-                                    // });
                                 }, 4000);
                             });
                         }
@@ -78,7 +75,7 @@ export default {
         })
     ],
     args: {
-        accept: ['image/*'],
+        accept: ['image/*', '.ts'],
         maxFileSize: 1000000,
         helperText: 'This field accepts only images with a maximum size of 1MB.'
     },

core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.ts

@@ -29,6 +29,7 @@ import {
     DropZoneFileValidity
 } from '@dotcms/ui';
 
+import { DotBinaryFieldEditorComponent } from './components/dot-binary-field-editor/dot-binary-field-editor.component';
 import { DotBinaryFieldUiMessageComponent } from './components/dot-binary-field-ui-message/dot-binary-field-ui-message.component';
 import { DotBinaryFieldUrlModeComponent } from './components/dot-binary-field-url-mode/dot-binary-field-url-mode.component';
 import {
@@ -62,6 +63,7 @@ const initialState: BinaryFieldState = {
         DotBinaryFieldUiMessageComponent,
         DotSpinnerModule,
         HttpClientModule,
+        DotBinaryFieldEditorComponent,
         InputTextModule,
         DotBinaryFieldUrlModeComponent
     ],
@@ -198,15 +200,15 @@ export class DotBinaryFieldComponent implements OnInit {
         this.dotBinaryFieldStore.removeFile();
     }
 
-    handleCreateFile(_event) {
-        // TODO: Implement - Write Code
-    }
-
     setTempFile(tempFile: DotCMSTempFile) {
         this.dotBinaryFieldStore.setTempFile(tempFile);
         this.dialogOpen = false;
     }
 
+    isEditorMode(mode: BINARY_FIELD_MODE): boolean {
+        return mode === BINARY_FIELD_MODE.EDITOR;
+    }
+
     /**
      *  Handle file drop error
      *

core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-editor/dot-binary-field-editor.component.html

@@ -0,0 +1,49 @@
+<form class="editor-mode__form" [formGroup]="form" (ngSubmit)="onSubmit()">
+    <div class="editor-mode__input-container">
+        <label class="editor-mode__label" for="file-name">
+            <span class="editor-mode__label-text">File Name</span>
+        </label>
+        <input
+            id="file-name"
+            type="text"
+            pInputText
+            formControlName="name"
+            autocomplete="off"
+            pInputText
+            placeholder="Ex. template.html" />
+        <div class="error-message">
+            <dot-field-validation-message
+                [field]="form.get('name')"
+                data-testId="error-message"></dot-field-validation-message>
+        </div>
+    </div>
+    <div class="binary-field__editor-container">
+        <ngx-monaco-editor
+            class="binary-field__code-editor"
+            #editorRef
+            [ngClass]="{ 'binary-field__code-editor--disabled': form.disabled }"
+            [options]="editorOptions"
+            formControlName="content"
+            data-testId="code-editor"></ngx-monaco-editor>
+
+        <div class="editor-mode__helper" [ngClass]="{ 'editor-mode__helper--visible': mimeType }">
+            <i class="pi pi-info-circle"></i>
+            <small>Mime Type: {{ mimeType }}</small>
+        </div>
+    </div>
+    <div class="editor-mode__actions">
+        <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>
+
+        <p-button
+            [label]="'dot.common.save' | dm"
+            type="submit"
+            aria-label="Import button"
+            data-testId="import-button"></p-button>
+    </div>
+</form>

core-web/libs/contenttype-fields/src/lib/fields/binary-field/components/dot-binary-field-editor/dot-binary-field-editor.component.scss

@@ -0,0 +1,81 @@
+@use "variables" as *;
+
+.binary-field__editor-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    gap: $spacing-1;
+}
+
+.binary-field__code-editor {
+    border: 1px solid $color-palette-gray-400; // Input
+    display: block;
+    flex-grow: 1;
+    width: 100%;
+    min-height: 20rem;
+    border-radius: $border-radius-md;
+    overflow: auto;
+}
+
+.binary-field__code-editor--disabled {
+    background-color: $color-palette-gray-200;
+    opacity: 0.5;
+
+    &::ng-deep {
+        .monaco-mouse-cursor-text,
+        .overflow-guard {
+            cursor: not-allowed;
+        }
+    }
+}
+
+.editor-mode__form {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-1;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.editor-mode__input-container {
+    width: 100%;
+    display: flex;
+    gap: $spacing-1;
+    flex-direction: column;
+}
+
+.editor-mode__input {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.editor-mode__actions {
+    width: 100%;
+    display: flex;
+    gap: $spacing-1;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.editor-mode__helper {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: $spacing-1;
+    color: $color-palette-gray-700;
+    font-weight: $font-size-sm;
+    visibility: hidden;
+}
+
+.editor-mode__helper--visible {
+    visibility: visible;
+}
+
+.error-message {
+    min-height: $spacing-4; // Fix height to avoid jumping
+}