add monaco-editor as option to textarea component

app/View/Components/Forms/Textarea.php

@@ -19,6 +19,8 @@ public function __construct(
         public ?string $value = null,
         public ?string $label = null,
         public ?string $placeholder = null,
+        public ?string $monacoEditorLanguage = '',
+        public bool $useMonacoEditor = false,
         public bool $required = false,
         public bool $disabled = false,
         public bool $readonly = false,

resources/views/components/forms/textarea.blade.php

@@ -24,6 +24,17 @@ function handleKeydown(e) {
             @endif
         </label>
     @endif
+    @if($useMonacoEditor)
+        <x-forms.monaco-editor
+            id="{{ $id }}"
+            language="{{$monacoEditorLanguage }}"
+            name="{{ $name }}"
+            name="{{ $id }}"
+            model="{{ $value ?? $id }}"
+            wire:model="{{ $value ?? $id }}"
+            label="dockerfile"
+        />
+    @else
     @if ($type === 'password')
         <div class="relative" x-data="{ type: 'password' }">
             @if ($allowToPeak)
@@ -64,7 +75,7 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
             @disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
             name="{{ $name }}" name={{ $id }}></textarea>
     @endif
-
+    @endif
     @error($id)
         <label class="label">
             <span class="text-red-500 label-text-alt">{{ $message }}</span>