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
   );