Add configuration editor for messages, monaco editor to string type

src/app/editor/proto-field/proto-field.component.ts

@@ -17,11 +17,14 @@ import {
   MapMessage,
   MessageConfiguration,
   MessageTypeEnum,
+  NumericMessage,
   ObjectMessage,
+  StringMessage,
 } from '../../model/proto-message.model';
 import { ListFieldComponent } from '../list-field/list-field.component';
 import { MapFieldComponent } from '../map-field/map-field.component';
 import { ObjectFieldComponent } from '../object-field/object-field.component';
+import { StringFieldComponent } from '../string-field/string-field.component';
 
 @Component({
   selector: 'app-proto-field',
@@ -36,16 +39,33 @@ import { ObjectFieldComponent } from '../object-field/object-field.component';
     MatSelectModule,
     MatInputModule,
     ObjectFieldComponent,
+    StringFieldComponent,
   ],
   template: `@switch (configuration().type) { @case (MessageTypeEnum.String) {
-    <mat-form-field>
-      <mat-label>{{ label() }}</mat-label>
-      <input matInput [(ngModel)]="value" />
-    </mat-form-field>
+    <app-string-field
+      [label]="label()"
+      [configuration]="stringConfiguration()"
+      [(value)]="value"
+    ></app-string-field>
     } @case (MessageTypeEnum.Numeric) {
     <mat-form-field>
       <mat-label>{{ label() }}</mat-label>
-      <input matInput type="number" [(ngModel)]="value" />
+      <input
+        #number="ngModel"
+        matInput
+        type="number"
+        [(ngModel)]="value"
+        [min]="numericConfiguration().min ?? null"
+        [max]="numericConfiguration().max ?? null"
+      />
+      <mat-hint *ngIf="number.hasError('min')"
+        >Number should not be less than
+        {{ numericConfiguration().min }}</mat-hint
+      >
+      <mat-hint *ngIf="number.hasError('max')"
+        >Number should not greater than
+        {{ numericConfiguration().max }}</mat-hint
+      >
     </mat-form-field>
     } @case (MessageTypeEnum.Boolean) {
     <p>
@@ -89,6 +109,14 @@ export class ProtoFieldComponent {
   configuration = input.required<MessageConfiguration>();
   value = model<any>();
 
+  protected stringConfiguration = computed(
+    () => this.configuration() as StringMessage
+  );
+
+  protected numericConfiguration = computed(
+    () => this.configuration() as NumericMessage
+  );
+
   protected enumConfiguration = computed(
     () => this.configuration() as EnumMessage
   );

src/app/editor/string-field/string-field.component.css

@@ -0,0 +1,3 @@
+mat-form-field {
+  width: 100%;
+}

src/app/editor/string-field/string-field.component.ts

@@ -0,0 +1,57 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { StringMessage } from '../../model/proto-message.model';
+import { MatInputModule } from '@angular/material/input';
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
+
+@Component({
+  selector: 'app-string-field',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MonacoEditorModule,
+  ],
+  template: ` @if(configuration().textType === 'text') {
+    <mat-form-field>
+      <mat-label>{{ label() }}</mat-label>
+      <input
+        #text="ngModel"
+        matInput
+        [(ngModel)]="value"
+        [maxlength]="configuration().maxLength ?? null"
+      />
+      <mat-hint *ngIf="text.hasError('maxlength')"
+        >Text should be less than
+        {{ configuration().maxLength }} characters</mat-hint
+      >
+    </mat-form-field>
+    } @else {
+    <ngx-monaco-editor
+      [(ngModel)]="value"
+      [options]="editorOptions"
+    ></ngx-monaco-editor>
+    }`,
+  styleUrl: './string-field.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StringFieldComponent {
+  label = input();
+  configuration = input.required<StringMessage>();
+  value = model<string>();
+
+  protected editorOptions = {
+    theme: 'vs-dark',
+    language: 'sql',
+    automaticLayout: true,
+  };
+}