Merge pull request #359 from awcodes/fix/modals-with-proxy

Fix: nested from component actions
awcodes · Apr 6, 2024 · 70a574d · 70a574d
2 parents 5d51368 + 9aadccc
commit 70a574d
Show file tree

Hide file tree

Showing 12 changed files with 1,272 additions and 827 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/resources/dist/filament-tiptap-editor.css b/resources/dist/filament-tiptap-editor.css
diff --git a/resources/dist/filament-tiptap-editor.js b/resources/dist/filament-tiptap-editor.js
diff --git a/resources/js/extensions/TiptapBlock.js b/resources/js/extensions/TiptapBlock.js
@@ -195,13 +195,13 @@ export const TiptapBlock = Node.create({
                 const { selection } = state
                 const { $from, $to } = selection
                 const range = $from.blockRange($to)
+                const currentChain = chain()
 
                 if (!range) {
+                    currentChain.insertContentAt({ from: $from.pos, to: $from.pos + 1 }, { type: this.name, attrs: attributes })
                     return false
                 }
 
-                const currentChain = chain()
-
                 currentChain.insertContentAt({ from: range.start, to: range.end }, { type: this.name, attrs: attributes })
 
                 return currentChain.focus(range.end + 1)

diff --git a/resources/js/plugin.js b/resources/js/plugin.js
@@ -1,4 +1,4 @@
-import {Editor, getHTMLFromFragment, isActive} from "@tiptap/core";
+import {Editor, isActive} from "@tiptap/core";
 import Blockquote from "@tiptap/extension-blockquote";
 import Bold from "@tiptap/extension-bold";
 import BulletList from "@tiptap/extension-bullet-list";
@@ -114,6 +114,27 @@ if (localeSwitcher) {
     });
 }
 
+Livewire.on('insertFromAction', (event) => {
+    setTimeout(() => {
+        const proxyEvent = new CustomEvent('insert-content', { bubble: true, detail: event})
+        window.dispatchEvent(proxyEvent);
+    }, 100)
+})
+
+Livewire.on('insertBlockFromAction', (event) => {
+    setTimeout(() => {
+        const proxyEvent = new CustomEvent('insert-block', { bubble: true, detail: event})
+        window.dispatchEvent(proxyEvent);
+    }, 100)
+})
+
+Livewire.on('updateBlockFromAction', (event) => {
+    setTimeout(() => {
+        const proxyEvent = new CustomEvent('update-block', { bubble: true, detail: event})
+        window.dispatchEvent(proxyEvent);
+    }, 100)
+})
+
 export default function tiptap({
    state,
    statePath,
@@ -128,6 +149,7 @@ export default function tiptap({
 
     return {
         id: null,
+        modalId: null,
         tools: tools,
         state: state,
         statePath: statePath,
@@ -266,13 +288,10 @@ export default function tiptap({
             return exts;
         },
         init: async function () {
-
-            if (editors[this.statePath]) {
-                editors[this.statePath].destroy();
-            }
-
             this.initEditor(this.state);
 
+            this.modalId = this.$el.closest('[x-ref="modalContainer"]')?.getAttribute('wire:key');
+
             window.filamentTiptapEditors = editors;
 
             document.addEventListener("dblclick", function (e) {
@@ -315,23 +334,36 @@ export default function tiptap({
             }
 
             this.$watch('state', (newState, oldState) => {
-                if (this.editor().isEmpty) {
-                    this.editor().destroy();
-                    this.initEditor(newState);
-                }
-
-                if (! isEqual(oldState, this.editor().state.doc.toJSON())) {
-                    this.updateEditorContent(newState)
+                if (typeof newState !== "undefined") {
+                    if (! isEqual(oldState, Alpine.raw(newState))) {
+                        this.updateEditorContent(newState)
+                    }
                 }
             });
         },
-        destroy() {
-            this.editor().destroy();
+        destroyEditor(event) {
+            let id = event.detail.id.split('-')[0];
+
+            if (!this.modalId || id + '.' + this.statePath === this.modalId) return
+
+            if (editors[this.statePath]) {
+                editors[this.statePath].destroy();
+                delete editors[this.statePath];
+            }
         },
         editor() {
             return editors[this.statePath];
         },
         initEditor(content) {
+            let selection = null;
+
+            if (editors[this.statePath]) {
+                content = this.editor().getJSON();
+                selection = this.editor().state.selection;
+                editors[this.statePath].destroy();
+                delete editors[this.statePath];
+            }
+
             let _this = this;
 
             editors[this.statePath] = new Editor({
@@ -349,6 +381,12 @@ export default function tiptap({
                         });
                     }
                 },
+                onCreate({editor}) {
+                    if (selection && _this.modalId) {
+                        _this.updatedAt = Date.now();
+                        editor.chain().focus().setTextSelection(selection).run();
+                    }
+                },
                 onUpdate({editor}) {
                     _this.updatedAt = Date.now();
                     _this.state = editor.isEmpty ? null : editor.getJSON();

diff --git a/resources/views/tiptap-editor.blade.php b/resources/views/tiptap-editor.blade.php
@@ -59,6 +59,7 @@ class="relative z-0 tiptap-wrapper rounded-md bg-white dark:bg-gray-900 focus-wi
                     x-on:update-block.window="updateBlock($event)"
                     x-on:open-block-settings.window="openBlockSettings($event)"
                     x-on:delete-block.window="deleteBlock()"
+                    x-on:close-modal.window="destroyEditor($event)"
                     x-trap.noscroll="fullScreenMode"
                 >
                     @if (! $isDisabled && ! $isToolbarMenusDisabled() && $tools)

diff --git a/src/Actions/GridBuilderAction.php b/src/Actions/GridBuilderAction.php
@@ -85,7 +85,7 @@ protected function setUp(): void
 
         $this->action(function (TiptapEditor $component, $data) {
             $component->getLivewire()->dispatch(
-                'insert-content',
+                event: 'insertFromAction',
                 type: 'grid',
                 statePath: $component->getStatePath(),
                 data: $data,

diff --git a/src/Actions/LinkAction.php b/src/Actions/LinkAction.php
@@ -80,7 +80,7 @@ protected function setUp(): void
                     ]),
             ])->action(function (TiptapEditor $component, $data) {
                 $component->getLivewire()->dispatch(
-                    'insert-content',
+                    event: 'insertFromAction',
                     type: 'link',
                     statePath: $component->getStatePath(),
                     href: $data['href'],

diff --git a/src/Actions/MediaAction.php b/src/Actions/MediaAction.php
@@ -134,7 +134,7 @@ protected function setUp(): void
                 }
 
                 $component->getLivewire()->dispatch(
-                    'insert-content',
+                    event: 'insertFromAction',
                     type: 'media',
                     statePath: $component->getStatePath(),
                     media: [

diff --git a/src/Actions/OEmbedAction.php b/src/Actions/OEmbedAction.php
@@ -117,7 +117,7 @@ protected function setUp(): void
             ])
             ->action(function (TiptapEditor $component, $data) {
                 $component->getLivewire()->dispatch(
-                    'insert-content',
+                    event: 'insertFromAction',
                     type: 'video',
                     statePath: $component->getStatePath(),
                     video: $data,

diff --git a/src/Actions/SourceAction.php b/src/Actions/SourceAction.php
@@ -38,7 +38,7 @@ protected function setUp(): void
                 }
 
                 $component->getLivewire()->dispatch(
-                    'insert-content',
+                    event: 'insertFromAction',
                     type: 'source',
                     statePath: $component->getStatePath(),
                     source: $content,

diff --git a/src/TiptapEditor.php b/src/TiptapEditor.php
@@ -285,7 +285,7 @@ public function getInsertBlockAction(): Action
                 $block = $component->getBlock($arguments['type']);
 
                 $livewire->dispatch(
-                    event: 'insert-block',
+                    event: 'insertBlockFromAction',
                     statePath: $component->getStatePath(),
                     type: $arguments['type'],
                     data: Js::from($data)->toHtml(),
@@ -318,7 +318,7 @@ public function getUpdateBlockAction(): Action
                 $block = $component->getBlock($arguments['type']);
 
                 $livewire->dispatch(
-                    event: 'update-block',
+                    event: 'updateBlockFromAction',
                     statePath: $component->getStatePath(),
                     type: $arguments['type'],
                     data: Js::from($data)->toHtml(),