use textarea for code editor (#151)

resources/js/app.js

@@ -23,12 +23,10 @@ window.htmx.defineExtension('disable-element', {
 });
 document.body.addEventListener('htmx:configRequest', (event) => {
     event.detail.headers['X-CSRF-TOKEN'] = document.head.querySelector('meta[name="csrf-token"]').content;
-    if (window.getSelection) { window.getSelection().removeAllRanges(); }
-    else if (document.selection) { document.selection.empty(); }
+    // if (window.getSelection) { window.getSelection().removeAllRanges(); }
+    // else if (document.selection) { document.selection.empty(); }
 });
-let activeElement = null;
 document.body.addEventListener('htmx:beforeRequest', (event) => {
-    activeElement = document.activeElement;
     let targetElements = event.target.querySelectorAll('[hx-disable]');
     for (let i = 0; i < targetElements.length; i++) {
         targetElements[i].disabled = true;
@@ -46,11 +44,6 @@ document.body.addEventListener('htmx:afterSwap', (event) => {
             return reference.getAttribute('data-tooltip');
         },
     });
-    if (activeElement) {
-        activeElement.blur();
-        activeElement.focus();
-        activeElement = null;
-    }
 });
 
 import toastr from 'toastr';

resources/views/application/deployment-script.blade.php

@@ -14,9 +14,9 @@ class="p-6"
 
             <div class="mt-6">
                 <x-input-label for="script" :value="__('Script')" />
-                <x-code-editor id="script" name="script" lang="sh" class="mt-1 w-full">
+                <x-textarea id="script" name="script" class="mt-1 min-h-[400px] w-full">
                     {{ old("script", $site->deploymentScript?->content) }}
-                </x-code-editor>
+                </x-textarea>
                 @error("script")
                     <x-input-error class="mt-2" :messages="$message" />
                 @enderror

resources/views/application/env.blade.php

@@ -21,9 +21,9 @@ class="mt-6"
             >
                 <x-input-label for="env" :value="__('.env')" />
                 <div id="env-content">
-                    <x-code-editor id="env" name="env" rows="10" class="mt-1 block w-full">
+                    <x-textarea id="env" name="env" rows="10" class="mt-1 block min-h-[400px] w-full">
                         {{ old("env", session()->get("env") ?? "Loading...") }}
-                    </x-code-editor>
+                    </x-textarea>
                 </div>
                 @error("env")
                     <x-input-error class="mt-2" :messages="$message" />

resources/views/components/code-editor.blade.php

@@ -1,45 +0,0 @@
-@props([
-    "id",
-    "name",
-    "disabled" => false,
-    "lang" => "text",
-])
-
-<div
-    x-data="{
-        editorId: @js($id),
-        disabled: @js($disabled),
-        lang: @js($lang),
-        init() {
-            document.body.addEventListener('htmx:afterSettle', (event) => {
-                let editor = null
-                let theme =
-                    document.documentElement.className === 'dark'
-                        ? 'one-dark'
-                        : 'github'
-                editor = window.ace.edit(this.editorId, {})
-                let contentElement = document.getElementById(
-                    `text-${this.editorId}`,
-                )
-                editor.setValue(contentElement.innerText, 1)
-                if (this.disabled) {
-                    editor.setReadOnly(true)
-                }
-                editor.getSession().setMode(`ace/mode/${this.lang}`)
-                editor.setTheme(`ace/theme/${theme}`)
-                editor.setFontSize('15px')
-                editor.setShowPrintMargin(false)
-                editor.on('change', () => {
-                    contentElement.innerHTML = editor.getValue()
-                })
-                document.body.addEventListener('color-scheme-changed', (event) => {
-                    theme = event.detail.theme === 'dark' ? 'one-dark' : 'github'
-                    editor.setTheme(`ace/theme/${theme}`)
-                })
-            })
-        },
-    }"
->
-    <div id="{{ $id }}" class="min-h-[400px] w-full rounded-md border border-gray-200 dark:border-gray-700"></div>
-    <textarea id="text-{{ $id }}" name="{{ $name }}" class="hidden">{{ $slot }}</textarea>
-</div>

resources/views/layouts/app.blade.php

@@ -21,8 +21,6 @@
         <link rel="preconnect" href="https://fonts.bunny.net" />
         <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
 
-        <script src="{{ asset("static/libs/ace/ace.js") }}"></script>
-
         @include("layouts.partials.favicon")
 
         <!-- Scripts -->

resources/views/site-settings/partials/update-v-host.blade.php

@@ -22,9 +22,9 @@ class="space-y-6"
             hx-swap="outerHTML"
         >
             <div id="vhost-container">
-                <x-code-editor id="vhost" name="vhost" rows="10" class="mt-1 block w-full">
+                <x-textarea id="vhost" name="vhost" rows="10" class="mt-1 block min-h-[400px] w-full">
                     {{ session()->has("vhost") ? session()->get("vhost") : "Loading..." }}
-                </x-code-editor>
+                </x-textarea>
             </div>
             @error("vhost")
                 <x-input-error class="mt-2" :messages="$message" />