From 98a68aeb30b8f97320e3d65b813f9af9ad703ee4 Mon Sep 17 00:00:00 2001
From: tanthammar <tinahammar@gmail.com>
Date: Sat, 27 Mar 2021 17:52:19 +0100
Subject: [PATCH] fix Trix: Alpine register style changes even if the text is
 not changed.

---
 resources/views/components/trix.blade.php | 43 +++++++++++++++--------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/resources/views/components/trix.blade.php b/resources/views/components/trix.blade.php
index 0183dd4..0e6ddb8 100644
--- a/resources/views/components/trix.blade.php
+++ b/resources/views/components/trix.blade.php
@@ -1,21 +1,34 @@
-<div class="w-full" x-data="{ trix: @entangle($field->key).defer }">
+<div class="w-full"
+     x-data="{
+        trix: @entangle($field->key).defer,
+        notFocused() { return document.activeElement !== this.$refs.trixInput },
+        setValue() {
+             {{-- replace content --}}
+             this.$refs.trixInput.editor.loadHTML(this.trix);
+            {{-- move cursor to the end--}}
+            this.$refs.trixInput.editor.setSelectedRange(this.$refs.trixInput.editor.getDocument().toString().length - 1);
+        },
+    }"
+    x-init="$watch('trix', () => notFocused() && setValue())"
+    x-on:trix-change.debounce.300ms="trix = $refs.trixInput.value"
+>
     <input value="{{ old($field->key) ?? $value }}" id="trix{{ md5($field->key) }}" name="trix{{ md5($field->key) }}" type="hidden" />
     <div wire:ignore x-on:trix-file-accept="return event.preventDefault()" class="no-upload">
-        <trix-editor x-model.debounce.500ms="trix" input="trix{{ md5($field->key) }}" {{ $attributes->merge(['class' => $errors->has($field->key) ? $error() : $class() ]) }}></trix-editor>
+        <trix-editor x-ref="trixInput" input="trix{{ md5($field->key) }}" {{ $attributes->merge(['class' => $errors->has($field->key) ? $error() : $class() ]) }}></trix-editor>
     </div>
 </div>
 @if($field->includeScript)
-@tfonce('styles:trix')
-<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.css" media="print" onload="this.media='all'">
-@endtfonce
-@tfonce('scripts:trix')
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.js"></script>
-@endtfonce
-@tfonce('styles:trix-no-upload')
-<style>
-    div.no-upload trix-toolbar span.trix-button-group.trix-button-group--file-tools {
-        display: none;
-    }
-</style>
-@endtfonce
+    @tfonce('styles:trix')
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.css" media="print" onload="this.media='all'">
+    @endtfonce
+    @tfonce('scripts:trix')
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.js"></script>
+    @endtfonce
+    @tfonce('styles:trix-no-upload')
+    <style>
+        div.no-upload trix-toolbar span.trix-button-group.trix-button-group--file-tools {
+            display: none;
+        }
+    </style>
+    @endtfonce
 @endif