Merge pull request #221 from awcodes/grid-layouts

Grid layouts
awcodes · Nov 27, 2023 · c881a32 · c881a32
2 parents a82915c + d47934b
commit c881a32
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -243,6 +243,28 @@ 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**

diff --git 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
@@ -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
@@ -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;
+    }
 }