working gap after insert of block

awcodes · Nov 9, 2023 · 399938b · 399938b
1 parent bf1da1c
commit 399938b
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 58 deletions.
diff --git a/resources/css/plugin.css b/resources/css/plugin.css
@@ -50,6 +50,10 @@
     width: 100%;
     color: theme('colors.black');
 
+    &.ProseMirror-focused .ProseMirror-selectednode {
+        @apply outline-2 outline-offset-2 outline-dashed outline-gray-700 dark:outline-gray-300;
+    }
+
     .tiptap-block-wrapper {
         @apply rounded-md overflow-hidden bg-gray-100 dark:bg-gray-800;
 
@@ -62,14 +66,14 @@
                 }
             }
 
+            .tiptap-block-actions {
+                @apply flex items-center gap-2;
+            }
+
             .preview {
                 @apply p-4;
             }
         }
-
-        &.ProseMirror-selectednode {
-            @apply outline-2 outline-offset-2 outline-dashed outline-gray-700 dark:outline-gray-300;
-        }
     }
 
     .filament-tiptap-hurdle {

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
@@ -2,12 +2,12 @@ import {mergeAttributes, Node} from "@tiptap/core"
 
 export const TiptapBlock = Node.create({
     name: 'tiptapBlock',
-    content: 'inline+',
+    content: 'inline',
     group: 'block',
     atom: true,
     draggable: true,
     selectable: true,
-    defining: true,
+    isolating: true,
     allowGapCursor: true,
     inline: false,
     addAttributes() {
@@ -65,16 +65,16 @@ export const TiptapBlock = Node.create({
     addNodeView() {
         return ({node, extension, getPos, editor}) => {
             const dom = document.createElement('div')
+            dom.contentEditable = 'false'
             dom.classList.add('tiptap-block-wrapper')
 
             dom.innerHTML = `
                 <div 
                     x-data='{
                         openSettings() {
-                            this.$dispatch("update-block", {
+                            this.$dispatch("open-block-settings", {
                                 type: "${node.attrs.type}", 
                                 data: JSON.parse(\`${JSON.stringify(node.attrs.data)}\`), 
-                                context: "update",
                             })
                         },
                         deleteBlock() {
@@ -115,11 +115,24 @@ export const TiptapBlock = Node.create({
     },
     addCommands() {
         return {
-            insertBlock: (attributes) => ({ commands }) => {
+            insertBlock: (attributes) => ({ chain, state }) => {
+                const { $to: $originTo } = state.selection
+
+                const currentChain = chain()
+
+                if ($originTo.parentOffset === 0) {
+                    currentChain.insertContentAt(Math.max($originTo.pos - 2, 0), { type: 'paragraph' })
+                } else {
+                    currentChain.insertContent({ type: 'paragraph' })
+                }
+
+                return currentChain.setNode(this.name, attributes).insertContent({ type: 'paragraph' })
+            },
+            updateBlock: (attributes) => ({commands}) => {
                 return commands.setNode(this.name, attributes)
             },
-            removeBlock: (attributes) => ({ commands }) => {
-                return commands.toggleNode(this.name, 'paragraph', attributes)
+            removeBlock: () => ({ commands }) => {
+                return commands.deleteSelection()
             }
         }
     },

diff --git a/resources/js/plugin.js b/resources/js/plugin.js
@@ -466,9 +466,17 @@ export default function tiptap({
                 label,
             });
         },
-        updateBlock(settings) {
+        openBlockSettings(settings) {
             this.$wire.dispatchFormEvent("tiptap::updateBlock", statePath, settings);
         },
+        updateBlock({type, data, preview, label}) {
+            this.editor().commands.updateBlock({
+                type,
+                data,
+                preview,
+                label,
+            });
+        },
         deleteBlock() {
             this.editor().commands.removeBlock();
         }

diff --git a/resources/views/components/dropdown-button.blade.php b/resources/views/components/dropdown-button.blade.php
@@ -48,7 +48,7 @@ class="text-[0.625rem] absolute top-0 right-0 font-mono text-gray-800 dark:text-
     >
         <div x-ref="arrow" class="absolute z-1 bg-inherit w-2 h-2 transform rotate-45"></div>
         @if ($list)
-            <ul class="relative z-2 text-sm divide-y divide-gray-300 dark:divide-gray-700 min-w-[144px] text-gray-800 dark:text-white">
+            <ul class="relative z-2 text-sm divide-y rounded-md overflow-hidden divide-gray-300 dark:divide-gray-700 min-w-[144px] text-gray-800 dark:text-white">
                 {{ $slot }}
             </ul>
         @else

diff --git a/resources/views/tiptap-editor.blade.php b/resources/views/tiptap-editor.blade.php
@@ -55,6 +55,7 @@ class="relative z-0 tiptap-wrapper rounded-md bg-white dark:bg-gray-900"
             x-on:refresh-tiptap-editors.window="refreshEditorContent()"
             x-on:insert-block.window="insertBlock($event.detail)"
             x-on:update-block.window="updateBlock($event.detail)"
+            x-on:open-block-settings.window="openBlockSettings($event.detail)"
             x-on:delete-block.window="deleteBlock($event.detail)"
             x-trap.noscroll="fullScreenMode"
         >

diff --git a/src/TiptapEditor.php b/src/TiptapEditor.php
@@ -39,26 +39,6 @@ class TiptapEditor extends Field
 
     protected string $view = 'filament-tiptap-editor::tiptap-editor';
 
-    public function renderBlockPreviews(array $document): array
-    {
-        $content = $document['content'];
-
-        foreach ($content as $k => $block) {
-            if ($block['type'] === 'tiptapBlock') {
-                $instance = $this->getBlocks()[$block['attrs']['type']];
-                $preview = view($instance->preview, $block['attrs']['data'])->render();
-                $content[$k]['attrs']['preview'] = $preview;
-                $content[$k]['attrs']['label'] = $instance->getLabel();
-            } elseif (array_key_exists('content', $block)) {
-                $content[$k] = $this->renderBlockPreviews($block);
-            }
-        }
-
-        $document['content'] = $content;
-
-        return $document;
-    }
-
     protected function setUp(): void
     {
         parent::setUp();
@@ -242,7 +222,7 @@ function(TiptapEditor $component) {
                             $preview = view(view: $block->preview, data: $data)->render();
 
                             $livewire->dispatch(
-                                event: 'insert-block',
+                                event: 'update-block',
                                 type: $arguments['type'],
                                 data: $data,
                                 preview: $preview,
@@ -254,6 +234,26 @@ function(TiptapEditor $component) {
         ));
     }
 
+    public function renderBlockPreviews(array $document): array
+    {
+        $content = $document['content'];
+
+        foreach ($content as $k => $block) {
+            if ($block['type'] === 'tiptapBlock') {
+                $instance = $this->getBlocks()[$block['attrs']['type']];
+                $preview = view($instance->preview, $block['attrs']['data'])->render();
+                $content[$k]['attrs']['preview'] = $preview;
+                $content[$k]['attrs']['label'] = $instance->getLabel();
+            } elseif (array_key_exists('content', $block)) {
+                $content[$k] = $this->renderBlockPreviews($block);
+            }
+        }
+
+        $document['content'] = $content;
+
+        return $document;
+    }
+
     public function maxContentWidth(string | Closure $width): static
     {
         $this->maxContentWidth = $width;