direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-02 14:36:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

use textarea for code editor (#151)

Browse Source
This commit is contained in:
Saeed Vaziry
2024-04-03 22:38:28 +02:00
committed by GitHub
parent ca93b521ec
commit 2d566b853f
10 changed files with 8 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/views/application/deployment-script.blade.php
View File

@ -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

4
resources/views/application/env.blade.php
View File

@ -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" />

45
resources/views/components/code-editor.blade.php
View File

@ -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>

2
resources/views/layouts/app.blade.php
View File

@ -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 -->

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

@ -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" />