From 8b21fab168874806e565aa47dfc76aec46a007f9 Mon Sep 17 00:00:00 2001
From: zbeyens <zbeyens@udecode.dev>
Date: Wed, 25 Dec 2024 19:19:40 +0100
Subject: [PATCH] refactor

---
 .../default/plate-ui/table-dropdown-menu.tsx  | 208 +++++++++---------
 1 file changed, 107 insertions(+), 101 deletions(-)

diff --git a/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx
index 081e02fc75..8195bcebeb 100644
--- a/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 
 import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 
@@ -18,10 +18,9 @@ import {
   ArrowRight,
   ArrowUp,
   Combine,
-  RectangleHorizontalIcon,
-  RectangleVerticalIcon,
+  Grid3x3Icon,
   Table,
-  Trash,
+  Trash2Icon,
   Ungroup,
   XIcon,
 } from 'lucide-react';
@@ -39,8 +38,6 @@ import {
 } from './dropdown-menu';
 import { ToolbarButton } from './toolbar';
 
-const COLS = 8;
-
 export function TableDropdownMenu(props: DropdownMenuProps) {
   const tableSelected = useEditorSelector(
     (editor) => someNode(editor, { match: { type: TablePlugin.key } }),
@@ -51,33 +48,6 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
   const openState = useOpenState();
   const mergeState = useTableMergeState();
 
-  const [table, setTable] = useState(
-    Array.from({ length: COLS }, () => Array.from({ length: COLS }).fill(0))
-  );
-  const [size, setSize] = useState({ colCount: 0, rowCount: 0 });
-
-  const onCellMove = useCallback(
-    (rowIndex: number, colIndex: number) => {
-      const newTables = [...table];
-
-      for (let i = 0; i < newTables.length; i++) {
-        for (let j = 0; j < newTables[i].length; j++) {
-          newTables[i][j] =
-            i >= 0 && i <= rowIndex && j >= 0 && j <= colIndex ? 1 : 0;
-        }
-      }
-
-      setSize({ colCount: colIndex + 1, rowCount: rowIndex + 1 });
-      setTable(newTables);
-    },
-    [table]
-  );
-
-  const onInsertTable = useCallback(() => {
-    insertTable(editor, size);
-    focusEditor(editor);
-  }, [editor, size]);
-
   return (
     <DropdownMenu modal={false} {...openState} {...props}>
       <DropdownMenuTrigger asChild>
@@ -93,82 +63,48 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
         <DropdownMenuGroup>
           <DropdownMenuSub>
             <DropdownMenuSubTrigger>
-              <Table />
+              <Grid3x3Icon />
               <span>Table</span>
             </DropdownMenuSubTrigger>
             <DropdownMenuSubContent className="m-0 p-0">
-              <div className="m-0 !flex flex-col p-0" onClick={onInsertTable}>
-                <div className="grid size-[130px] grid-cols-8 gap-0.5 p-1">
-                  {table.map((rows, rowIndex) =>
-                    rows.map((value, columIndex) => {
-                      return (
-                        <div
-                          key={`(${rowIndex},${columIndex})`}
-                          className={cn(
-                            'col-span-1 size-3 border border-solid bg-secondary',
-                            !!value && 'border-current'
-                          )}
-                          onMouseMove={() => {
-                            onCellMove(rowIndex, columIndex);
-                          }}
-                        />
-                      );
-                    })
-                  )}
-                </div>
-
-                <div className="text-center text-xs text-current">
-                  {size.rowCount} x {size.colCount}
-                </div>
-              </div>
+              <TablePicker />
             </DropdownMenuSubContent>
           </DropdownMenuSub>
 
           <DropdownMenuSub>
             <DropdownMenuSubTrigger disabled={!tableSelected}>
-              <RectangleVerticalIcon className="rotate-90" />
-              <span>Column</span>
+              <div className="size-4" />
+              <span>Cell</span>
             </DropdownMenuSubTrigger>
             <DropdownMenuSubContent>
               <DropdownMenuItem
                 className="min-w-[180px]"
-                disabled={!tableSelected}
-                onSelect={() => {
-                  tf.insert.tableColumn({ before: true });
-                  focusEditor(editor);
-                }}
-              >
-                <ArrowLeft />
-                Insert column before
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                className="min-w-[180px]"
-                disabled={!tableSelected}
+                disabled={!mergeState.canMerge}
                 onSelect={() => {
-                  tf.insert.tableColumn();
+                  tf.table.merge();
                   focusEditor(editor);
                 }}
               >
-                <ArrowRight />
-                Insert column after
+                <Combine />
+                Merge cells
               </DropdownMenuItem>
               <DropdownMenuItem
                 className="min-w-[180px]"
-                disabled={!tableSelected}
+                disabled={!mergeState.canSplit}
                 onSelect={() => {
-                  tf.remove.tableColumn();
+                  tf.table.split();
                   focusEditor(editor);
                 }}
               >
-                <XIcon />
-                Delete column
+                <Ungroup />
+                Split cell
               </DropdownMenuItem>
             </DropdownMenuSubContent>
           </DropdownMenuSub>
 
           <DropdownMenuSub>
             <DropdownMenuSubTrigger disabled={!tableSelected}>
-              <RectangleHorizontalIcon />
+              <div className="size-4" />
               <span>Row</span>
             </DropdownMenuSubTrigger>
             <DropdownMenuSubContent>
@@ -206,51 +142,121 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
                 Delete row
               </DropdownMenuItem>
             </DropdownMenuSubContent>
-            <DropdownMenuItem
-              className="min-w-[180px]"
-              disabled={!tableSelected}
-              onSelect={() => {
-                tf.remove.table();
-                focusEditor(editor);
-              }}
-            >
-              <Trash />
-              Delete table
-            </DropdownMenuItem>
           </DropdownMenuSub>
 
           <DropdownMenuSub>
             <DropdownMenuSubTrigger disabled={!tableSelected}>
-              <Combine />
-              <span>Merge</span>
+              <div className="size-4" />
+              <span>Column</span>
             </DropdownMenuSubTrigger>
             <DropdownMenuSubContent>
               <DropdownMenuItem
                 className="min-w-[180px]"
-                disabled={!mergeState.canMerge}
+                disabled={!tableSelected}
                 onSelect={() => {
-                  tf.table.merge();
+                  tf.insert.tableColumn({ before: true });
                   focusEditor(editor);
                 }}
               >
-                <Combine />
-                Merge cells
+                <ArrowLeft />
+                Insert column before
               </DropdownMenuItem>
               <DropdownMenuItem
                 className="min-w-[180px]"
-                disabled={!mergeState.canSplit}
+                disabled={!tableSelected}
                 onSelect={() => {
-                  tf.table.split();
+                  tf.insert.tableColumn();
                   focusEditor(editor);
                 }}
               >
-                <Ungroup />
-                Split cell
+                <ArrowRight />
+                Insert column after
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="min-w-[180px]"
+                disabled={!tableSelected}
+                onSelect={() => {
+                  tf.remove.tableColumn();
+                  focusEditor(editor);
+                }}
+              >
+                <XIcon />
+                Delete column
               </DropdownMenuItem>
             </DropdownMenuSubContent>
           </DropdownMenuSub>
+
+          <DropdownMenuItem
+            className="min-w-[180px]"
+            disabled={!tableSelected}
+            onSelect={() => {
+              tf.remove.table();
+              focusEditor(editor);
+            }}
+          >
+            <Trash2Icon />
+            Delete table
+          </DropdownMenuItem>
         </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );
 }
+
+export function TablePicker() {
+  const { editor, tf } = useEditorPlugin(TablePlugin);
+
+  const [tablePicker, setTablePicker] = useState({
+    grid: Array.from({ length: 8 }, () => Array.from({ length: 8 }).fill(0)),
+    size: { colCount: 0, rowCount: 0 },
+  });
+
+  const onCellMove = (rowIndex: number, colIndex: number) => {
+    const newGrid = [...tablePicker.grid];
+
+    for (let i = 0; i < newGrid.length; i++) {
+      for (let j = 0; j < newGrid[i].length; j++) {
+        newGrid[i][j] =
+          i >= 0 && i <= rowIndex && j >= 0 && j <= colIndex ? 1 : 0;
+      }
+    }
+
+    setTablePicker({
+      grid: newGrid,
+      size: { colCount: colIndex + 1, rowCount: rowIndex + 1 },
+    });
+  };
+
+  return (
+    <div
+      className="m-0 !flex flex-col p-0"
+      onClick={() => {
+        tf.insert.table(tablePicker.size);
+        focusEditor(editor);
+      }}
+    >
+      <div className="grid size-[130px] grid-cols-8 gap-0.5 p-1">
+        {tablePicker.grid.map((rows, rowIndex) =>
+          rows.map((value, columIndex) => {
+            return (
+              <div
+                key={`(${rowIndex},${columIndex})`}
+                className={cn(
+                  'col-span-1 size-3 border border-solid bg-secondary',
+                  !!value && 'border-current'
+                )}
+                onMouseMove={() => {
+                  onCellMove(rowIndex, columIndex);
+                }}
+              />
+            );
+          })
+        )}
+      </div>
+
+      <div className="text-center text-xs text-current">
+        {tablePicker.size.rowCount} x {tablePicker.size.colCount}
+      </div>
+    </div>
+  );
+}