Skip to content

Instantly share code, notes, and snippets.

@webnitros
Created March 2, 2024 06:26
Show Gist options
  • Save webnitros/6e93179bb4f052ff1cbc976f2a24b102 to your computer and use it in GitHub Desktop.
Save webnitros/6e93179bb4f052ff1cbc976f2a24b102 to your computer and use it in GitHub Desktop.
@php
use Illuminate\Support\Str;
$language = $getLanguage();
$value = $getState();
$validJson = !is_string($value) && Str::isJson(json_encode($value));
@endphp
<x-dynamic-component class="filament-syntax-entry-component" :component="$getEntryWrapperView()" :entry="$entry" wire:ignore>
<div
class="filament-syntax-entry"
x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc(
id: 'filament-syntax-entry-scripts',
package: 'parallax/filament-syntax-entry'
))]"
x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref(
id: 'filament-syntax-entry-styles',
package: 'parallax/filament-syntax-entry'
))]"
>
<div
x-data="{
init() {
this.updateTheme();
const observer = new MutationObserver(() => this.updateTheme());
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
});
this.$watch('theme', () => this.updateTheme());
this.cleanup = () => observer.disconnect();
},
updateTheme() {
this.$el.className = document.documentElement.classList.contains('dark')
? 'syntax-entry-theme-{{ $getDarkModeTheme() ?? $getTheme() }}'
: 'syntax-entry-theme-{{ $getTheme() }}';
document.querySelectorAll('.filament-syntax-entry pre code').forEach(el => {
B.highlightElement(el);
});
},
cleanup: () => {}
}"
x-init="init()"
x-on:destroyed="cleanup"
>
<pre><code class="language-{{$language}}">{{ $validJson ? json_encode($value, JSON_PRETTY_PRINT) : $value }}</code></pre>
</div>
</div>
</x-dynamic-component>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment