mkrieger/byos_laravel
1
0
Fork 0
mirror of https://github.com/usetrmnl/byos_laravel.git synced 2026-01-13 23:18:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: add codemirror

Browse source
This commit is contained in:
Benjamin Nussbaum 2025-10-07 21:31:12 +02:00
parent 4c65c015b9
commit b18d561361
8 changed files with 958 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

64
resources/views/livewire/codemirror.blade.php Normal file
View file

@ -0,0 +1,64 @@
<?php
use Livewire\Volt\Component;
use Livewire\Attributes\Modelable;
new class extends Component
{
#[Modelable]
public $model = '';
public $language = 'html';
public $theme = 'auto';
public $readonly = false;
public $placeholder = '';
public $height = '200px';
public $id = '';
public function mount($language = 'html', $theme = 'auto', $readonly = false, $placeholder = '', $height = '200px', $id = '')
{
$this->language = $language;
$this->theme = $theme;
$this->readonly = $readonly;
$this->placeholder = $placeholder;
$this->height = $height;
$this->id = $id;
}
public function toJSON()
{
return json_encode([
'model' => $this->model,
'language' => $this->language,
'theme' => $this->theme,
'readonly' => $this->readonly,
'placeholder' => $this->placeholder,
'height' => $this->height,
'id' => $this->id,
]);
}
} ?>
<div
x-data="codeMirrorComponent(@js($language), @js($theme), @js($readonly), @js($placeholder), @js($height), @js($id ?: uniqid()))"
x-init="init()"
wire:ignore
class="codemirror-container"
@if($id) id="{{ $id }}" @endif
autocomplete="off"
>
<!-- Loading state -->
<div x-show="isLoading" class="flex items-center justify-center p-4 border border-gray-300 rounded-md" style="height: {{ $height }};">
<div class="flex items-center space-x-2 text-gray-500">
<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Loading editor...</span>
</div>
</div>
<!-- Editor container -->
<div x-show="!isLoading" x-ref="editor" style="height: {{ $height }};"></div>
</div>