wip

awcodes · Nov 3, 2023 · 66814ab · 66814ab
1 parent 356d7cb
commit 66814ab
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 17 deletions.
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
@@ -51,18 +51,38 @@ export const TiptapBlock = Node.create({
             dom.setAttribute('wire:ignore.self', 'true')
             dom.classList.add('relative')
 
+            let dataRender = '';
+
+            for (const [key, value] of Object.entries(node.attrs.blockData)) {
+                dataRender = dataRender + (`<p>${key}: ${value}</p>`);
+            }
+
+            window.addEventListener('update-block', (event) => {
+                console.log(event);
+                setTimeout(() => {
+                    node.attrs.blockData = JSON.stringify(event.detail.data)
+                    editor.commands.focus()
+                }, 500)
+            })
+
             dom.innerHTML = `
-                <div class
+                <div x-data='{
+                    preview() {
+                        this.$dispatch("preview-block", {view: "${node.attrs.view}", data: ${JSON.stringify(node.attrs.blockData)}})
+                    },
+                    openSettings() {
+                        this.$dispatch("render-bus", {view: "${node.attrs.view}", data: ${JSON.stringify(node.attrs.blockData)}})
+                    }
+                }' class="relative p-4" style="min-height: 3rem;">
+                    <div class="absolute top-2 right-2 flex items-center gap-2">
+                        <button type="button" x-on:click="preview">Preview</button>
+                        <button type="button" x-on:click="openSettings">Settings</button>
+                    </div>
+                    <h3>${node.attrs.name ?? 'Custom Block'}</h3>
+                    ${dataRender}
+                </div>
             `;
 
-            // dom.addEventListener('update-block', (event) => {
-            //     setTimeout(() => {
-            //         console.log(event.detail.data)
-            //         editor.commands.updateAttributes('tiptapBlock', {blockData: JSON.stringify(event.detail.data)})
-            //         editor.commands.focus()
-            //     }, 500)
-            // })
-
             return {
                 dom,
             }

diff --git a/resources/js/plugin.js b/resources/js/plugin.js
@@ -457,9 +457,10 @@ export default function tiptap({
                 asymmetricRight
             }).run();
         },
-        insertBlock(data) {
+        insertBlock({view, data}) {
             this.editor().commands.insertBlock({
-                data: data
+                view,
+                blockData: data
             });
         }
     };

diff --git a/resources/views/tiptap-editor.blade.php b/resources/views/tiptap-editor.blade.php
@@ -52,7 +52,7 @@ class="relative z-0 tiptap-wrapper rounded-md bg-white dark:bg-gray-900"
             x-on:insert-grid-builder.window="$event.detail.statePath === '{{ $statePath }}' ? insertGridBuilder($event.detail.data) : null"
             x-on:update-editor-content.window="$event.detail.statePath === '{{ $statePath }}' ? updateEditorContent($event.detail.content) : null"
             x-on:refresh-tiptap-editors.window="refreshEditorContent()"
-            x-on:insert-block.window="insertBlock($event.detail.data)"
+            x-on:insert-block.window="insertBlock($event.detail)"
             x-trap.noscroll="fullScreenMode"
         >
 

diff --git a/src/Livewire/Bus.php b/src/Livewire/Bus.php
@@ -28,7 +28,12 @@ public function insertBlock($id, $data = null): void
         $data = $data ?? $this->data;
 
         if ($id === 'tiptap-bus') {
-            $this->dispatch('insert-block', data: $data);
+            if ($data !== $this->data) {
+                ray('update-block');
+                $this->dispatch('update-block', view: $this->view, data: $data);
+            } else {
+                $this->dispatch('insert-block', view: $this->view, data: $data);
+            }
         }
     }