Merge pull request #553 from sibizwolle/add-debounce

Make live debounce work
awcodes · Feb 6, 2025 · 6f03531 · 6f03531
2 parents 34c8dcf + 44ebb1c
commit 6f03531
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 27 deletions.
diff --git a/resources/dist/filament-tiptap-editor.js b/resources/dist/filament-tiptap-editor.js
diff --git a/resources/js/plugin.js b/resources/js/plugin.js
@@ -163,6 +163,7 @@ export default function tiptap({
    customDocument = null,
    nodePlaceholders = [],
    showOnlyCurrentPlaceholder = true,
+   debounce = null,
 }) {
     let editor = null;
 
@@ -370,8 +371,11 @@ export default function tiptap({
                         }
                     },
                     onUpdate({editor}) {
-                        _this.state = editor.isEmpty ? null : editor.getJSON();
                         _this.updatedAt = Date.now();
+                        clearTimeout(_this.timeOut);
+                        _this.timeOut = setTimeout(function(){
+                            _this.state = editor.isEmpty ? null : editor.getJSON();
+                        },debounce ?? 0);
                     },
                     onSelectionUpdate() {
                         _this.updatedAt = Date.now();

diff --git a/resources/views/tiptap-editor.blade.php b/resources/views/tiptap-editor.blade.php
@@ -38,7 +38,7 @@
                     class="relative z-0 tiptap-wrapper rounded-md bg-white dark:bg-gray-900 focus-within:ring focus-within:ring-primary-500 focus-within:z-10"
                     x-bind:class="{ 'tiptap-fullscreen': fullScreenMode }"
                     x-data="tiptap({
-                        state: $wire.{{ $applyStateBindingModifiers("entangle('{$statePath}')", isOptimisticallyLive: true) }},
+                        state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')", isOptimisticallyLive: true) }},
                         statePath: '{{ $statePath }}',
                         tools: @js($tools),
                         disabled: @js($isDisabled),
@@ -49,7 +49,8 @@ class="relative z-0 tiptap-wrapper rounded-md bg-white dark:bg-gray-900 focus-wi
                         mergeTags: @js($mergeTags),
                         customDocument: @js($customDocument),
                         nodePlaceholders: @js($nodePlaceholders),
-                        showOnlyCurrentPlaceholder: @js($showOnlyCurrentPlaceholder)
+                        showOnlyCurrentPlaceholder: @js($showOnlyCurrentPlaceholder),
+                        debounce: @js($getLiveDebounce()),
                     })"
                     x-init="$nextTick(() => { init() })"
                     x-on:click.away="blur()"