awcodes · awcodes · Apr 30, 2024 · Apr 30, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,10 @@
         "@tiptap/extension-strike": "^2.2.0",
         "@tiptap/extension-subscript": "^2.2.0",
         "@tiptap/extension-superscript": "^2.2.0",
+        "@tiptap/extension-table": "^2.3.0",
+        "@tiptap/extension-table-cell": "^2.3.0",
+        "@tiptap/extension-table-header": "^2.3.0",
+        "@tiptap/extension-table-row": "^2.3.0",
         "@tiptap/extension-text": "^2.2.0",
         "@tiptap/extension-text-style": "^2.2.0",
         "@tiptap/extension-underline": "^2.2.0",

diff --git a/resources/css/editor.css b/resources/css/editor.css
@@ -359,7 +359,62 @@
                     }
                 }
 
+                table {
+                    @apply border-collapse m-0 overflow-hidden w-full relative table-fixed;
+                }
+
+                table td,
+                table th {
+                    @apply border border-gray-400 py-2 px-3 align-top min-w-4 bg-clip-padding dark:border-gray-600;
+                }
+
+                table td > *,
+                table th > * {
+                    @apply mb-0;
+                }
 
+                table th {
+                    @apply font-bold text-left bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-100;
+                }
+
+                table .selectedCell {
+                    position: relative;
+                }
+
+                table .selectedCell:after {
+                    background: rgba(200, 200, 255, 0.4);
+                    content: "";
+                    left: 0;
+                    right: 0;
+                    top: 0;
+                    bottom: 0;
+                    pointer-events: none;
+                    position: absolute;
+                    z-index: 2;
+                }
+
+                table .column-resize-handle {
+                    background-color: #adf;
+                    bottom: -2px;
+                    position: absolute;
+                    right: -2px;
+                    pointer-events: none;
+                    top: 0;
+                    width: 4px;
+                }
+
+                table p {
+                    margin: 0;
+                }
+
+                .tableWrapper {
+                    padding: 1rem 0;
+                    overflow-x: auto;
+                }
+
+                &.resize-cursor {
+                    cursor: col-resize;
+                }
             }
         }
     }

diff --git a/resources/dist/scribble.js b/resources/dist/scribble.js
diff --git a/resources/js/Scribble.svelte b/resources/js/Scribble.svelte
@@ -22,6 +22,10 @@
     import SlashExtension from './extensions/SlashExtension.js'
     import Subscript from '@tiptap/extension-subscript'
     import Superscript from '@tiptap/extension-superscript'
+    import Table from '@tiptap/extension-table'
+    import TableCell from '@tiptap/extension-table-cell'
+    import TableHeader from '@tiptap/extension-table-header'
+    import TableRow from '@tiptap/extension-table-row'
     import TextAlign from './extensions/TextAlignExtension.js'
     import TextStyle from '@tiptap/extension-text-style'
     import {Underline} from '@tiptap/extension-underline'
@@ -67,6 +71,12 @@
             Superscript,
             MediaExtension,
             Underline,
+            Table.configure({
+                resizable: true,
+            }),
+            TableRow,
+            TableHeader,
+            TableCell,
             TextAlign.configure({
                 types: ['heading', 'paragraph']
             }),

diff --git a/src/Livewire/TableModal.php b/src/Livewire/TableModal.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace Awcodes\Scribble\Livewire;
+
+use Filament\Forms;
+use Illuminate\Contracts\View\View;
+
+class TableModal extends ScribbleModal
+{
+    public ?string $header = 'Table';
+
+    public function mount(): void
+    {
+        $this->form->fill([
+            'rows' => 2,
+            'cols' => 3,
+            'withHeaderRow' => true,
+        ]);
+    }
+
+    public function getFormFields(): array
+    {
+        return [
+            Forms\Components\TextInput::make('rows')
+                ->label('Rows')
+                ->numeric()
+                ->required()
+                ->dehydrateStateUsing(function (Forms\Get $get, $state) {
+                    if ($get('withHeaderRow')) {
+                        return $state + 1;
+                    }
+
+                    return $state;
+                }),
+            Forms\Components\TextInput::make('cols')
+                ->label('Columns')
+                ->numeric()
+                ->required(),
+            Forms\Components\Checkbox::make('withHeaderRow'),
+        ];
+    }
+
+    public function render(): View
+    {
+        return view('scribble::components.form');
+    }
+}
diff --git a/src/Tools/Table.php b/src/Tools/Table.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace Awcodes\Scribble\Tools;
+
+use Awcodes\Scribble\Enums\ToolType;
+use Awcodes\Scribble\Livewire\TableModal;
+use Awcodes\Scribble\ScribbleTool;
+use Tiptap\Nodes\Table as TableExtension;
+use Tiptap\Nodes\TableCell;
+use Tiptap\Nodes\TableHeader;
+use Tiptap\Nodes\TableRow;
+
+class Table extends ScribbleTool
+{
+    protected function setUp(): void
+    {
+        $this
+            ->icon('scribble-table')
+            ->label('Table')
+            ->type(ToolType::Modal)
+            ->extension('table')
+            ->active(extension: 'table')
+            ->commands([
+                $this->makeCommand(command: 'insertTable'),
+            ])
+            ->optionsModal(TableModal::class)
+            ->converterExtensions([
+                new TableExtension(),
+                new TableRow(),
+                new TableCell(),
+                new TableHeader(),
+            ]);
+    }
+}