From aea185b2a67587b2eab22de2dd6974eea3036b4a Mon Sep 17 00:00:00 2001
From: Dan Harrin <git@danharrin.com>
Date: Mon, 27 Nov 2023 15:37:41 +0000
Subject: [PATCH 1/2] Grid layouts

---
 README.md                                     |  24 ++-
 .../views/components/tools/grid.blade.php     | 152 +++++++++++-------
 resources/views/tiptap-editor.blade.php       |   2 +-
 src/TiptapEditor.php                          |  27 ++++
 4 files changed, 144 insertions(+), 61 deletions(-)

diff --git a/README.md b/README.md
index 89e1c7a7..85053883 100644
--- a/README.md
+++ b/README.md
@@ -243,10 +243,32 @@ TiptapEditor::make('content')
 'floating_menu_tools' => ['media', 'grid-builder', 'details', 'table', 'oembed', 'code-block']
 ```
 
+## Grid layouts
+
+When using the `grid` tool, you can customize the available layouts in the dropdown by passing them to the `gridLayouts()` method:
+
+```php
+TiptapEditor::make('content')
+    ->gridLayouts([
+        'two-columns',
+        'three-columns',
+        'four-columns',
+        'five-columns',
+        'fixed-two-columns',
+        'fixed-three-columns',
+        'fixed-four-columns',
+        'fixed-five-columns',
+        'asymmetric-left-thirds',
+        'asymmetric-right-thirds',
+        'asymmetric-left-fourths',
+        'asymmetric-right-fourths',
+    ]);
+```
+
 ## Custom Blocks
 
 > **Note**
-> To use custom blocks you must store your content as JSON.
+> To use customuse FilamentTiptapEditor\TiptapEditor; blocks you must store your content as JSON.
 
 There are 3 components you need to create a custom block for Tiptap Editor.
 
diff --git a/resources/views/components/tools/grid.blade.php b/resources/views/components/tools/grid.blade.php
index 9c1ac621..af15416d 100644
--- a/resources/views/components/tools/grid.blade.php
+++ b/resources/views/components/tools/grid.blade.php
@@ -1,74 +1,108 @@
+@props([
+    'editor' => null,
+])
+
+@php
+    $layouts = $editor->getGridLayouts();
+@endphp
+
 <x-filament-tiptap-editor::dropdown-button
     label="{{ __('filament-tiptap-editor::editor.grid.label') }}"
     active="grid"
     icon="grid"
 >
-    <x-filament-tiptap-editor::dropdown-button-item
-        action="editor().chain().focus().insertGrid({ cols: 2 }).run()"
-    >
-        {{ __('filament-tiptap-editor::editor.grid.two_columns') }}
-    </x-filament-tiptap-editor::dropdown-button-item>
+    @if (in_array('two-columns', $layouts))
+        <x-filament-tiptap-editor::dropdown-button-item
+            action="editor().chain().focus().insertGrid({ cols: 2 }).run()"
+        >
+            {{ __('filament-tiptap-editor::editor.grid.two_columns') }}
+        </x-filament-tiptap-editor::dropdown-button-item>
+    @endif
+
+    @if (in_array('three-columns', $layouts))
+        <x-filament-tiptap-editor::dropdown-button-item
+            action="editor().chain().focus().insertGrid({ cols: 3 }).run()"
+        >
+            {{ __('filament-tiptap-editor::editor.grid.three_columns') }}
+        </x-filament-tiptap-editor::dropdown-button-item>
+    @endif
+
+    @if (in_array('four-columns', $layouts))
+        <x-filament-tiptap-editor::dropdown-button-item
+            action="editor().chain().focus().insertGrid({ cols: 4 }).run()"
+        >
+            {{ __('filament-tiptap-editor::editor.grid.four_columns') }}
+        </x-filament-tiptap-editor::dropdown-button-item>
+    @endif
 
-    <x-filament-tiptap-editor::dropdown-button-item
-        action="editor().chain().focus().insertGrid({ cols: 3 }).run()"
-    >
-        {{ __('filament-tiptap-editor::editor.grid.three_columns') }}
-    </x-filament-tiptap-editor::dropdown-button-item>
+    @if (in_array('five-columns', $layouts))
+        <x-filament-tiptap-editor::dropdown-button-item
+            action="editor().chain().focus().insertGrid({ cols: 5 }).run()"
+        >
+            {{ __('filament-tiptap-editor::editor.grid.five_columns') }}
+        </x-filament-tiptap-editor::dropdown-button-item>
+    @endif
 
-    <x-filament-tiptap-editor::dropdown-button-item
-        action="editor().chain().focus().insertGrid({ cols: 4 }).run()"
-    >
-        {{ __('filament-tiptap-editor::editor.grid.four_columns') }}
-    </x-filament-tiptap-editor::dropdown-button-item>
-    <x-filament-tiptap-editor::dropdown-button-item
-        action="editor().chain().focus().insertGrid({ cols: 5 }).run()"
-    >
-        {{ __('filament-tiptap-editor::editor.grid.five_columns') }}
-    </x-filament-tiptap-editor::dropdown-button-item>
+    @if (in_array('fixed-two-columns', $layouts))
+        <x-filament-tiptap-editor::dropdown-button-item
+            action="editor().chain().focus().insertGrid({ cols: 2, type: 'fixed' }).run()"
+        >
+            {{ __('filament-tiptap-editor::editor.grid.fixed_two_columns') }}
+        </x-filament-tiptap-editor::dropdown-button-item>
+    @endif
 
-    <x-filament-tiptap-editor::dropdown-button-item
-        action="editor().chain().focus().insertGrid({ cols: 2, type: 'fixed' }).run()"
-    >
-        {{ __('filament-tiptap-editor::editor.grid.fixed_two_columns') }}
-    </x-filament-tiptap-editor::dropdown-button-item>
+    @if (in_array('fixed-three-columns', $layouts))
+        <x-filament-tiptap-editor::dropdown-button-item
+            action="editor().chain().focus().insertGrid({ cols: 3, type: 'fixed' }).run()"
+        >
+            {{ __('filament-tiptap-editor::editor.grid.fixed_three_columns') }}
+        </x-filament-tiptap-editor::dropdown-button-item>
+    @endif
 
-    <x-filament-tiptap-editor::dropdown-button-item
-        action="editor().chain().focus().insertGrid({ cols: 3, type: 'fixed' }).run()"
-    >
-        {{ __('filament-tiptap-editor::editor.grid.fixed_three_columns') }}
-    </x-filament-tiptap-editor::dropdown-button-item>
-    <x-filament-tiptap-editor::dropdown-button-item
-        action="editor().chain().focus().insertGrid({ cols: 4, type: 'fixed' }).run()">
-        {{ __('filament-tiptap-editor::editor.grid.fixed_four_columns') }}
-    </x-filament-tiptap-editor::dropdown-button-item>
-    <x-filament-tiptap-editor::dropdown-button-item
-        action="editor().chain().focus().insertGrid({ cols: 5, type: 'fixed' }).run()"
-    >
-        {{ __('filament-tiptap-editor::editor.grid.fixed_five_columns') }}
-    </x-filament-tiptap-editor::dropdown-button-item>
+    @if (in_array('fixed-four-columns', $layouts))
+        <x-filament-tiptap-editor::dropdown-button-item
+            action="editor().chain().focus().insertGrid({ cols: 4, type: 'fixed' }).run()">
+            {{ __('filament-tiptap-editor::editor.grid.fixed_four_columns') }}
+        </x-filament-tiptap-editor::dropdown-button-item>
+    @endif
 
-    <x-filament-tiptap-editor::dropdown-button-item
-        action="editor().chain().focus().insertGrid({ cols: 2, type: 'asymetric-left-thirds' }).run()"
-    >
-        {{ __('filament-tiptap-editor::editor.grid.asymmetric_left_thirds') }}
-    </x-filament-tiptap-editor::dropdown-button-item>
+    @if (in_array('fixed-five-columns', $layouts))
+        <x-filament-tiptap-editor::dropdown-button-item
+            action="editor().chain().focus().insertGrid({ cols: 5, type: 'fixed' }).run()"
+        >
+            {{ __('filament-tiptap-editor::editor.grid.fixed_five_columns') }}
+        </x-filament-tiptap-editor::dropdown-button-item>
+    @endif
 
-    <x-filament-tiptap-editor::dropdown-button-item
-        action="editor().chain().focus().insertGrid({ cols: 2, type: 'asymetric-right-thirds' }).run()"
-    >
-        {{ __('filament-tiptap-editor::editor.grid.asymmetric_right_thirds') }}
-    </x-filament-tiptap-editor::dropdown-button-item>
+    @if (in_array('asymmetric-left-thirds', $layouts))
+        <x-filament-tiptap-editor::dropdown-button-item
+            action="editor().chain().focus().insertGrid({ cols: 2, type: 'asymetric-left-thirds' }).run()"
+        >
+            {{ __('filament-tiptap-editor::editor.grid.asymmetric_left_thirds') }}
+        </x-filament-tiptap-editor::dropdown-button-item>
+    @endif
 
-    <x-filament-tiptap-editor::dropdown-button-item
-        action="editor().chain().focus().insertGrid({ cols: 2, type: 'asymetric-left-fourths' }).run()"
-    >
-        {{ __('filament-tiptap-editor::editor.grid.asymmetric_left_fourths') }}
-    </x-filament-tiptap-editor::dropdown-button-item>
+    @if (in_array('asymmetric-right-thirds', $layouts))
+        <x-filament-tiptap-editor::dropdown-button-item
+            action="editor().chain().focus().insertGrid({ cols: 2, type: 'asymetric-right-thirds' }).run()"
+        >
+            {{ __('filament-tiptap-editor::editor.grid.asymmetric_right_thirds') }}
+        </x-filament-tiptap-editor::dropdown-button-item>
+    @endif
 
-    <x-filament-tiptap-editor::dropdown-button-item
-        action="editor().chain().focus().insertGrid({ cols: 2, type: 'asymetric-right-fourths' }).run()"
-    >
-        {{ __('filament-tiptap-editor::editor.grid.asymmetric_right_fourths') }}
-    </x-filament-tiptap-editor::dropdown-button-item>
+    @if (in_array('asymmetric-left-fourths', $layouts))
+        <x-filament-tiptap-editor::dropdown-button-item
+            action="editor().chain().focus().insertGrid({ cols: 2, type: 'asymetric-left-fourths' }).run()"
+        >
+            {{ __('filament-tiptap-editor::editor.grid.asymmetric_left_fourths') }}
+        </x-filament-tiptap-editor::dropdown-button-item>
+    @endif
 
+    @if (in_array('asymmetric-right-fourths', $layouts))
+        <x-filament-tiptap-editor::dropdown-button-item
+            action="editor().chain().focus().insertGrid({ cols: 2, type: 'asymetric-right-fourths' }).run()"
+        >
+            {{ __('filament-tiptap-editor::editor.grid.asymmetric_right_fourths') }}
+        </x-filament-tiptap-editor::dropdown-button-item>
+    @endif
 </x-filament-tiptap-editor::dropdown-button>
diff --git a/resources/views/tiptap-editor.blade.php b/resources/views/tiptap-editor.blade.php
index e3c6daf2..f54ae8ce 100644
--- a/resources/views/tiptap-editor.blade.php
+++ b/resources/views/tiptap-editor.blade.php
@@ -80,7 +80,7 @@ class="relative z-0 tiptap-wrapper rounded-md bg-white dark:bg-gray-900 focus-wi
                                             <x-filament-tiptap-editor::tools.blocks :blocks="$blocks" :state-path="$statePath" />
                                         @endif
                                     @else
-                                        <x-dynamic-component component="filament-tiptap-editor::tools.{{ $tool }}" :state-path="$statePath" />
+                                        <x-dynamic-component component="filament-tiptap-editor::tools.{{ $tool }}" :state-path="$statePath" :editor="$field" />
                                     @endif
                                 @endforeach
                             </div>
diff --git a/src/TiptapEditor.php b/src/TiptapEditor.php
index b77ab386..ca6d91c4 100644
--- a/src/TiptapEditor.php
+++ b/src/TiptapEditor.php
@@ -45,6 +45,21 @@ class TiptapEditor extends Field
 
     protected bool $shouldCollapseBlocksPanel = false;
 
+    protected array $gridLayouts = [
+        'two-columns',
+        'three-columns',
+        'four-columns',
+        'five-columns',
+        'fixed-two-columns',
+        'fixed-three-columns',
+        'fixed-four-columns',
+        'fixed-five-columns',
+        'asymmetric-left-thirds',
+        'asymmetric-right-thirds',
+        'asymmetric-left-fourths',
+        'asymmetric-right-fourths',
+    ];
+
     protected function setUp(): void
     {
         parent::setUp();
@@ -400,4 +415,16 @@ public function shouldCollapseBlocksPanel(): bool
     {
         return $this->shouldCollapseBlocksPanel;
     }
+
+    public function gridLayouts(array $layouts): static
+    {
+        $this->gridLayouts = $layouts;
+
+        return $this;
+    }
+
+    public function getGridLayouts(): array
+    {
+        return $this->gridLayouts;
+    }
 }

From d47934bbc60d1d5831d39c3ea2821c1921a94b3e Mon Sep 17 00:00:00 2001
From: Dan Harrin <git@danharrin.com>
Date: Mon, 27 Nov 2023 17:17:47 +0000
Subject: [PATCH 2/2] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 85053883..9cdc5cfe 100644
--- a/README.md
+++ b/README.md
@@ -268,7 +268,7 @@ TiptapEditor::make('content')
 ## Custom Blocks
 
 > **Note**
-> To use customuse FilamentTiptapEditor\TiptapEditor; blocks you must store your content as JSON.
+> To use custom blocks you must store your content as JSON.
 
 There are 3 components you need to create a custom block for Tiptap Editor.