Editor/Markdow: allow to change contents on the fly (robsontenorio#572)

* Fixes: robsontenorio#564 Add refreshEditor method to Editor component Introduce a new `refreshEditor` method in the Editor component and enhance the editor initialization with a watcher for content updates, ensuring synchronization between the editor content and the Livewire model. This update improves the component's reactivity and handling of dynamic content changes. * Fixes: robsontenorio#564 Add refreshEditor method to Editor component Introduce a new `refreshEditor` method in the Editor component and enhance the editor initialization with a watcher for content updates, ensuring synchronization between the editor content and the Livewire model. This update improves the component's reactivity and handling of dynamic content changes. * Fixes: robsontenorio#564 Add refreshEditor method to Editor component Introduce a new `refreshEditor` method in the Editor component and enhance the editor initialization with a watcher for content updates, ensuring synchronization between the editor content and the Livewire model. This update improves the component's reactivity and handling of dynamic content changes. * WIP --------- Co-authored-by: Robson Tenório <[email protected]>
fabmade · Aug 17, 2024 · d36a966 · d36a966
1 parent fbf24e1
commit d36a966
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/View/Components/Editor.php b/src/View/Components/Editor.php
@@ -104,6 +104,13 @@ public function render(): View|Closure|string
                                     editor.on('change', (e) => value = editor.getContent())
                                     editor.on('init', () =>  editor.setContent(value ?? ''))
                                     editor.on('OpenWindow', (e) => tinymce.activeEditor.topLevelWindow = e.dialog)
+
+                                    // Handles a case where people try to change contents on the fly from Livewire methods
+                                    $watch('value', function (newValue) {
+                                        if (newValue !== editor.getContent()) {
+                                            editor.resetContent(newValue || '');
+                                        }
+                                    })
                                 },
                                 file_picker_callback: function(cb, value, meta) {
                                     const formData = new FormData()

diff --git a/src/View/Components/Markdown.php b/src/View/Components/Markdown.php
@@ -89,6 +89,22 @@ public function render(): View|Closure|string
                             uploadUrl: '{{ $uploadUrl }}?disk={{ $disk }}&folder={{ $folder }}&_token={{ csrf_token() }}',
                             uploading: false,
                             init() {
+                                this.initEditor()
+
+                                // Handles a case where people try to change contents on the fly from Livewire methods
+                                this.$watch('value', (newValue) => {
+                                    if (newValue !== this.editor.value()) {
+                                        this.value = newValue || ''
+                                        this.destroyEditor()
+                                        this.initEditor()
+                                    }
+                                })
+                            },
+                            destroyEditor() {
+                                this.editor.toTextArea();
+                                this.editor = null
+                            },
+                            initEditor() {
                                 this.editor = new EasyMDE({
                                         {{ $setup() }},
                                         element: $refs.markdown{{ $uuid }},
@@ -115,7 +131,7 @@ public function render(): View|Closure|string
                             }
                         }"
                     wire:ignore
-                    x-on:livewire:navigating.window="editor.toTextArea(); editor = null"
+                    x-on:livewire:navigating.window="destroyEditor()"
                 >
                     <div class="relative disabled" :class="uploading && 'pointer-events-none opacity-50'">
                         <textarea id="{{ $uuid }}" x-ref="markdown{{ $uuid }}"></textarea>