From d82be931cda525dcf45d6739ea45a52ed7e61b3a Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Sat, 22 Feb 2025 13:04:46 +0100
Subject: [PATCH] feat(ui): add textarea switching option in service compose
 editor

---
 .../project/service/edit-compose.blade.php    | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/resources/views/livewire/project/service/edit-compose.blade.php b/resources/views/livewire/project/service/edit-compose.blade.php
index a99c117fb..beaccac91 100644
--- a/resources/views/livewire/project/service/edit-compose.blade.php
+++ b/resources/views/livewire/project/service/edit-compose.blade.php
@@ -1,22 +1,33 @@
-<div x-data="{ raw: true }">
+<div x-data="{ raw: true, showNormalTextarea: false }">
     <div class="pb-4">Volume names are updated upon save. The service UUID will be added as a prefix to all volumes, to
         prevent
         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 allowTab useMonacoEditor monacoEditorLanguage="yaml" rows="20"
-            id="service.docker_compose_raw">
-        </x-forms.textarea>
+        <div x-cloak x-show="showNormalTextarea">
+            <x-forms.textarea rows="20" id="service.docker_compose_raw">
+            </x-forms.textarea>
+        </div>
+        <div x-cloak x-show="!showNormalTextarea">
+            <x-forms.textarea allowTab useMonacoEditor monacoEditorLanguage="yaml" rows="20"
+                id="service.docker_compose_raw">
+            </x-forms.textarea>
+        </div>
     </div>
     <div x-cloak x-show="raw === false" class="font-mono">
         <x-forms.textarea rows="20" readonly id="service.docker_compose">
         </x-forms.textarea>
     </div>
-    <div class="pt-2 w-96">
+    <div class="pt-2 flex gap-2">
         <x-forms.checkbox label="Escape special characters in labels?"
             helper="By default, $ (and other chars) is escaped. So if you write $ in the labels, it will be saved as $$.<br><br>If you want to use env variables inside the labels, turn this off."
             id="service.is_container_label_escape_enabled" instantSave></x-forms.checkbox>
+        <div class="flex-1"></div>
+        <div x-cloak x-show="raw">
+            <x-forms.button class="w-32" @click.prevent="showNormalTextarea = !showNormalTextarea">Switch
+                Textarea</x-forms.button>
+        </div>
     </div>
     <div class="flex justify-end w-full gap-2 pt-4">
         <div class="flex items-end gap-2">