feat: allow tab in textarea

app/View/Components/Forms/Textarea.php

@@ -22,6 +22,7 @@ public function __construct(
         public bool    $required = false,
         public bool    $disabled = false,
         public bool    $readonly = false,
+        public bool    $allowTab = false,
         public ?string $helper = null,
         public bool    $realtimeValidation = false,
         public bool    $allowToPeak = true,

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

@@ -1,3 +1,18 @@
+<script>
+    function handleKeydown(e) {
+        if (e.keyCode === 9) {
+            e.preventDefault();
+
+            e.target.setRangeText(
+                '\t',
+                e.target.selectionStart,
+                e.target.selectionStart,
+                'end'
+            );
+        }
+    }
+</script>
+
 <div class="flex-1 form-control">
     @if ($label)
         <label class="flex items-center gap-1 mb-1 text-sm font-medium">{{ $label }}
@@ -41,7 +56,7 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
 
         </div>
     @else
-        <textarea placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
+        <textarea @keydown.tab="{{ $allowTab }} && handleKeydown" placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
             @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
         @else
     wire:model={{ $value ?? $id }}

resources/views/livewire/project/service/edit-compose.blade.php

@@ -4,7 +4,7 @@
         name collision. <br>To see the actual volume names, check the Deployable Compose file, or go to Storage
         menu.</div>
     <div x-cloak x-show="raw" class="font-mono">
-        <x-forms.textarea rows="20" id="service.docker_compose_raw">
+        <x-forms.textarea allowTab rows="20" id="service.docker_compose_raw">
         </x-forms.textarea>
     </div>
     <div x-cloak x-show="raw === false" class="font-mono">

resources/views/livewire/server/proxy/new-dynamic-configuration.blade.php

@@ -1,5 +1,5 @@
 <form wire:submit.prevent="addDynamicConfiguration" class="flex flex-col w-full gap-4">
     <x-forms.input autofocus id="fileName" label="Filename" required />
-    <x-forms.textarea id="value" label="Configuration" required rows="20" />
+    <x-forms.textarea allowTab id="value" label="Configuration" required rows="20" />
     <x-forms.button type="submit" @click="slideOverOpen=false">Save</x-forms.button>
 </form>