Update trix.blade.php

resources/views/components/trix.blade.php

@@ -1,12 +1,16 @@
-<x-form-group
-    {{ $attributes->whereStartsWith(['x-', 'wire:']) }}
-    :class="$groupClasses"
->
+@pushOnce ("css")
+    <link rel="stylesheet" href="https://unpkg.com/trix@2.0.0-alpha.1/dist/trix.css"></link>
+    <script src="https://unpkg.com/trix@2.0.0-alpha.1/dist/trix.umd.js"></script>
     <style>
         [data-trix-button-group="file-tools"] {
             display: none !important;
         }
     </style>
+@endpushOnce
+
+<x-form-group
+    :class="$groupClasses"
+>
 
     @if ($label)
         <x-form-label
@@ -16,21 +20,30 @@ class="{{ $labelClasses }}"
         />
     @endif
 
-    <input
-        id="trix-content-{{ $name }}"
-        name="{{ $name }}"
-        type="hidden"
-        value="{{ $value }}"
-    >
     <div
-        wire:ignore
-        x-data
-        x-on:trix-change="$dispatch('change', $event.target.value)"
+        {{ $attributes->whereStartsWith(['wire:', 'x-']) }}
+        class="max-w-2xl w-full"
+        x-data="{ value: '{!! $value !!}' }"
+        x-id="['{{ $name }}']"
+        x-init="$refs.trix.editor.loadHTML(value)"
+        x-on:trix-change="value = $refs.input.value; $dispatch('input', value)"
+        x-on:trix-file-accept.prevent
     >
-        <trix-editor
-            {{ $attributes->whereDoesntStartWith(['x-', 'wire:']) }}
-            input="trix-content-{{ $name }}"
-        ></trix-editor>
+        <input
+            type="hidden"
+            x-bind:id="$id('{{ $name }}')"
+            x-ref="input"
+        >
+        <div
+            wire:ignore
+        >
+            <trix-editor
+                {{ $attributes->whereDoesntStartWith(['x-', 'wire:']) }}
+                class="prose bg-white"
+                x-bind:input="$id('{{ $name }}')"
+                x-ref="trix"
+            ></trix-editor>
+        </div>
     </div>
 
     @error($nameInDotNotation)