From bbc6c52c291d3fe2b4afe18dfaa3968460b8eb27 Mon Sep 17 00:00:00 2001
From: muhammedjafer <mohammadjafer990@gmail.com>
Date: Wed, 1 May 2024 10:23:28 +0300
Subject: [PATCH 1/4] fixed constant request to server as the user types into
 the editor, aso added toolbar option for snow theme

---
 .../livewire/quill-text-editor.blade.php      | 45 +++++++++++++++++--
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/resources/views/livewire/quill-text-editor.blade.php b/resources/views/livewire/quill-text-editor.blade.php
index 10261e6..66a866f 100644
--- a/resources/views/livewire/quill-text-editor.blade.php
+++ b/resources/views/livewire/quill-text-editor.blade.php
@@ -4,15 +4,54 @@
 
 @script
 <script>
+    let toolbarOptions = [
+        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+        [{ 'font': [] }],
+        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+
+        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
+        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+        [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
+        [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
+        [{ 'direction': 'rtl' }],                         // text direction
+
+        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+        [{ 'align': [] }],
+
+        ['image', 'video'],
+        ['clean']                                         // remove formatting button
+    ];
+
     const quill = new Quill('#' + @js($quillId), {
+        modules: {
+            toolbar: toolbarOptions
+        },
         theme: @js($theme)
     });
     
     quill.root.innerHTML = $wire.get('value');
     
-    quill.on('text-change', function () {
-        let value = quill.root.innerHTML;
-        @this.set('value', value);
+    let timeout = null;
+
+    function handleTextChange() {
+        if (timeout !== null) {
+            clearTimeout(timeout);
+        }
+
+        timeout = setTimeout(function() {
+            let value = quill.root.innerHTML;
+            @this.set('value', value);
+        }, 1000);
+    }
+
+    quill.on('text-change', function() {
+        handleTextChange();
+    });
+
+    quill.on('selection-change', function() {
+        if (quill.hasFocus()) {
+            handleTextChange();
+        }
     });
 </script>
 @endscript

From 94e05a0b514ee97e76be827e23a166fc80a5a86a Mon Sep 17 00:00:00 2001
From: Muhammed <56185049+muhammedjafer@users.noreply.github.com>
Date: Wed, 1 May 2024 11:42:38 +0300
Subject: [PATCH 2/4] removed the toolbar option for the editor

---
 .../livewire/quill-text-editor.blade.php      | 21 -------------------
 1 file changed, 21 deletions(-)

diff --git a/resources/views/livewire/quill-text-editor.blade.php b/resources/views/livewire/quill-text-editor.blade.php
index 66a866f..3708a36 100644
--- a/resources/views/livewire/quill-text-editor.blade.php
+++ b/resources/views/livewire/quill-text-editor.blade.php
@@ -4,28 +4,7 @@
 
 @script
 <script>
-    let toolbarOptions = [
-        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-        [{ 'font': [] }],
-        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
-
-        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
-        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
-        [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
-        [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
-        [{ 'direction': 'rtl' }],                         // text direction
-
-        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
-        [{ 'align': [] }],
-
-        ['image', 'video'],
-        ['clean']                                         // remove formatting button
-    ];
-
     const quill = new Quill('#' + @js($quillId), {
-        modules: {
-            toolbar: toolbarOptions
-        },
         theme: @js($theme)
     });
     

From 665aac6adb9c1418096dd76c3566e0920f06b308 Mon Sep 17 00:00:00 2001
From: muhammedjafer <mohammadjafer990@gmail.com>
Date: Wed, 15 May 2024 11:38:28 +0300
Subject: [PATCH 3/4] Added readonly option for the editor

---
 .../livewire/quill-text-editor.blade.php      | 25 +++----------------
 src/Http/Livewire/QuillTextEditor.php         |  1 +
 2 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/resources/views/livewire/quill-text-editor.blade.php b/resources/views/livewire/quill-text-editor.blade.php
index 3708a36..eb89b1d 100644
--- a/resources/views/livewire/quill-text-editor.blade.php
+++ b/resources/views/livewire/quill-text-editor.blade.php
@@ -5,32 +5,15 @@
 @script
 <script>
     const quill = new Quill('#' + @js($quillId), {
+        readOnly: @js($readOnly),
         theme: @js($theme)
     });
     
     quill.root.innerHTML = $wire.get('value');
     
-    let timeout = null;
-
-    function handleTextChange() {
-        if (timeout !== null) {
-            clearTimeout(timeout);
-        }
-
-        timeout = setTimeout(function() {
-            let value = quill.root.innerHTML;
-            @this.set('value', value);
-        }, 1000);
-    }
-
-    quill.on('text-change', function() {
-        handleTextChange();
-    });
-
-    quill.on('selection-change', function() {
-        if (quill.hasFocus()) {
-            handleTextChange();
-        }
+    quill.on('text-change', function () {
+        let value = quill.root.innerHTML;
+        @this.set('value', value);
     });
 </script>
 @endscript
diff --git a/src/Http/Livewire/QuillTextEditor.php b/src/Http/Livewire/QuillTextEditor.php
index da974ce..0a72505 100644
--- a/src/Http/Livewire/QuillTextEditor.php
+++ b/src/Http/Livewire/QuillTextEditor.php
@@ -19,6 +19,7 @@ class QuillTextEditor extends Component
     public string $quillId;
 
     public string $theme;
+    public bool $readOnly = false;
 
     public function mount(string $theme = 'snow'): void
     {

From 25aae13f035922d2c3858897b8a88e0664ec2d57 Mon Sep 17 00:00:00 2001
From: muhammedjafer <mohammadjafer990@gmail.com>
Date: Wed, 15 May 2024 11:42:08 +0300
Subject: [PATCH 4/4] Adding readonly option for the editor

---
 resources/views/livewire/quill-text-editor.blade.php | 2 +-
 src/Http/Livewire/QuillTextEditor.php                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/livewire/quill-text-editor.blade.php b/resources/views/livewire/quill-text-editor.blade.php
index eb89b1d..eaa543c 100644
--- a/resources/views/livewire/quill-text-editor.blade.php
+++ b/resources/views/livewire/quill-text-editor.blade.php
@@ -5,7 +5,7 @@
 @script
 <script>
     const quill = new Quill('#' + @js($quillId), {
-        readOnly: @js($readOnly),
+        readOnly: @js($readOnly), 
         theme: @js($theme)
     });
     
diff --git a/src/Http/Livewire/QuillTextEditor.php b/src/Http/Livewire/QuillTextEditor.php
index 0a72505..a877a27 100644
--- a/src/Http/Livewire/QuillTextEditor.php
+++ b/src/Http/Livewire/QuillTextEditor.php
@@ -19,7 +19,7 @@ class QuillTextEditor extends Component
     public string $quillId;
 
     public string $theme;
-    public bool $readOnly = false;
+    public bool $readOnly = false; 
 
     public function mount(string $theme = 'snow'): void
     {