diff --git a/README.md b/README.md index 89e1c7a7..9cdc5cfe 100644 --- 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 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 + - - {{ __('filament-tiptap-editor::editor.grid.two_columns') }} - + @if (in_array('two-columns', $layouts)) + + {{ __('filament-tiptap-editor::editor.grid.two_columns') }} + + @endif + + @if (in_array('three-columns', $layouts)) + + {{ __('filament-tiptap-editor::editor.grid.three_columns') }} + + @endif + + @if (in_array('four-columns', $layouts)) + + {{ __('filament-tiptap-editor::editor.grid.four_columns') }} + + @endif - - {{ __('filament-tiptap-editor::editor.grid.three_columns') }} - + @if (in_array('five-columns', $layouts)) + + {{ __('filament-tiptap-editor::editor.grid.five_columns') }} + + @endif - - {{ __('filament-tiptap-editor::editor.grid.four_columns') }} - - - {{ __('filament-tiptap-editor::editor.grid.five_columns') }} - + @if (in_array('fixed-two-columns', $layouts)) + + {{ __('filament-tiptap-editor::editor.grid.fixed_two_columns') }} + + @endif - - {{ __('filament-tiptap-editor::editor.grid.fixed_two_columns') }} - + @if (in_array('fixed-three-columns', $layouts)) + + {{ __('filament-tiptap-editor::editor.grid.fixed_three_columns') }} + + @endif - - {{ __('filament-tiptap-editor::editor.grid.fixed_three_columns') }} - - - {{ __('filament-tiptap-editor::editor.grid.fixed_four_columns') }} - - - {{ __('filament-tiptap-editor::editor.grid.fixed_five_columns') }} - + @if (in_array('fixed-four-columns', $layouts)) + + {{ __('filament-tiptap-editor::editor.grid.fixed_four_columns') }} + + @endif - - {{ __('filament-tiptap-editor::editor.grid.asymmetric_left_thirds') }} - + @if (in_array('fixed-five-columns', $layouts)) + + {{ __('filament-tiptap-editor::editor.grid.fixed_five_columns') }} + + @endif - - {{ __('filament-tiptap-editor::editor.grid.asymmetric_right_thirds') }} - + @if (in_array('asymmetric-left-thirds', $layouts)) + + {{ __('filament-tiptap-editor::editor.grid.asymmetric_left_thirds') }} + + @endif - - {{ __('filament-tiptap-editor::editor.grid.asymmetric_left_fourths') }} - + @if (in_array('asymmetric-right-thirds', $layouts)) + + {{ __('filament-tiptap-editor::editor.grid.asymmetric_right_thirds') }} + + @endif - - {{ __('filament-tiptap-editor::editor.grid.asymmetric_right_fourths') }} - + @if (in_array('asymmetric-left-fourths', $layouts)) + + {{ __('filament-tiptap-editor::editor.grid.asymmetric_left_fourths') }} + + @endif + @if (in_array('asymmetric-right-fourths', $layouts)) + + {{ __('filament-tiptap-editor::editor.grid.asymmetric_right_fourths') }} + + @endif 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 @endif @else - + @endif @endforeach 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; + } }