@crystallize/design-system 1.7.0 → 1.8.0

package/src/rich-text-editor/plugins/TableActionMenuPlugin/index.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import * as React from 'react';
 import { ReactPortal, useCallback, useEffect, useRef, useState } from 'react';
 import { $getRoot, $getSelection, $isRangeSelection, DEPRECATED_$isGridSelection } from 'lexical';
 import { createPortal } from 'react-dom';
@@ -22,6 +21,7 @@ import {
   $insertTableColumn,
   $insertTableRow,
   $isTableCellNode,
+  $isTableNode,
   $isTableRowNode,
   $removeTableRowAtIndex,
   getTableSelectionFromTableElement,
@@ -30,24 +30,22 @@ import {
   TableCellNode,
 } from '@lexical/table';
 
+import { DropdownMenu } from '../../../dropdown-menu';
 import { IconButton } from '../../../icon-button';
 import { Icon } from '../../../iconography';
 
+type TableStats = {
+  rows: number;
+  columns: number;
+};
+
 type TableCellActionMenuProps = Readonly<{
-  contextRef: { current: null | HTMLElement };
-  onClose: () => void;
-  setIsMenuOpen: (isOpen: boolean) => void;
   tableCellNode: TableCellNode;
+  tableStats: TableStats;
 }>;
 
-function TableActionMenu({
-  onClose,
-  tableCellNode: _tableCellNode,
-  setIsMenuOpen,
-  contextRef,
-}: TableCellActionMenuProps) {
+function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }: TableCellActionMenuProps) {
   const [editor] = useLexicalComposerContext();
-  const dropDownRef = useRef<HTMLDivElement | null>(null);
   const [tableCellNode, updateTableCellNode] = useState(_tableCellNode);
   const [selectionCounts, updateSelectionCounts] = useState({
     columns: 1,
@@ -81,38 +79,6 @@ function TableActionMenu({
     });
   }, [editor]);
 
-  useEffect(() => {
-    const menuButtonElement = contextRef.current;
-    const dropDownElement = dropDownRef.current;
-
-    if (menuButtonElement != null && dropDownElement != null) {
-      const menuButtonRect = menuButtonElement.getBoundingClientRect();
-
-      dropDownElement.style.opacity = '1';
-
-      dropDownElement.style.left = `${menuButtonRect.left + menuButtonRect.width + window.pageXOffset + 5}px`;
-
-      dropDownElement.style.top = `${menuButtonRect.top + window.pageYOffset}px`;
-    }
-  }, [contextRef, dropDownRef]);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        dropDownRef.current != null &&
-        contextRef.current != null &&
-        !dropDownRef.current.contains(event.target as Node) &&
-        !contextRef.current.contains(event.target as Node)
-      ) {
-        setIsMenuOpen(false);
-      }
-    }
-
-    window.addEventListener('click', handleClickOutside);
-
-    return () => window.removeEventListener('click', handleClickOutside);
-  }, [setIsMenuOpen, contextRef]);
-
   const clearTableSelection = useCallback(() => {
     editor.update(() => {
       if (tableCellNode.isAttached()) {
@@ -158,11 +124,9 @@ function TableActionMenu({
         $insertTableRow(tableNode, tableRowIndex, shouldInsertAfter, selectionCounts.rows, grid);
 
         clearTableSelection();
-
-        onClose();
       });
     },
-    [editor, tableCellNode, selectionCounts.rows, clearTableSelection, onClose],
+    [editor, tableCellNode, selectionCounts.rows, clearTableSelection],
   );
 
   const insertTableColumnAtSelection = useCallback(
@@ -186,11 +150,9 @@ function TableActionMenu({
         $insertTableColumn(tableNode, tableColumnIndex, shouldInsertAfter, selectionCounts.columns, grid);
 
         clearTableSelection();
-
-        onClose();
       });
     },
-    [editor, tableCellNode, selectionCounts.columns, clearTableSelection, onClose],
+    [editor, tableCellNode, selectionCounts.columns, clearTableSelection],
   );
 
   const deleteTableRowAtSelection = useCallback(() => {
@@ -201,9 +163,8 @@ function TableActionMenu({
       $removeTableRowAtIndex(tableNode, tableRowIndex);
 
       clearTableSelection();
-      onClose();
     });
-  }, [editor, tableCellNode, clearTableSelection, onClose]);
+  }, [editor, tableCellNode, clearTableSelection]);
 
   const deleteTableAtSelection = useCallback(() => {
     editor.update(() => {
@@ -211,9 +172,8 @@ function TableActionMenu({
       tableNode.remove();
 
       clearTableSelection();
-      onClose();
     });
-  }, [editor, tableCellNode, clearTableSelection, onClose]);
+  }, [editor, tableCellNode, clearTableSelection]);
 
   const deleteTableColumnAtSelection = useCallback(() => {
     editor.update(() => {
@@ -224,9 +184,8 @@ function TableActionMenu({
       $deleteTableColumn(tableNode, tableColumnIndex);
 
       clearTableSelection();
-      onClose();
     });
-  }, [editor, tableCellNode, clearTableSelection, onClose]);
+  }, [editor, tableCellNode, clearTableSelection]);
 
   const toggleTableRowIsHeader = useCallback(() => {
     editor.update(() => {
@@ -255,9 +214,8 @@ function TableActionMenu({
       });
 
       clearTableSelection();
-      onClose();
     });
-  }, [editor, tableCellNode, clearTableSelection, onClose]);
+  }, [editor, tableCellNode, clearTableSelection]);
 
   const toggleTableColumnIsHeader = useCallback(() => {
     editor.update(() => {
@@ -290,79 +248,59 @@ function TableActionMenu({
       }
 
       clearTableSelection();
-      onClose();
     });
-  }, [editor, tableCellNode, clearTableSelection, onClose]);
-
-  return createPortal(
-    <div
-      className="dropdown"
-      ref={dropDownRef}
-      onClick={e => {
-        e.stopPropagation();
-      }}
-    >
-      <button className="item" onClick={() => insertTableRowAtSelection(false)}>
-        <span className="text-sm">
-          Insert {selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`} above
-        </span>
-      </button>
-      <button className="item" onClick={() => insertTableRowAtSelection(true)}>
-        <span className="text-sm">
-          Insert {selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`} below
-        </span>
-      </button>
-      <hr className="my-1" />
-      <button className="item" onClick={() => insertTableColumnAtSelection(false)}>
-        <span className="text-sm">
-          Insert {selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`} left
-        </span>
-      </button>
-      <button className="item" onClick={() => insertTableColumnAtSelection(true)}>
-        <span className="text-sm">
-          Insert {selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`} right
-        </span>
-      </button>
-      <hr className="my-1" />
-      <button className="item" onClick={() => deleteTableColumnAtSelection()}>
-        <span className="text-sm">Delete column</span>
-      </button>
-      <button className="item" onClick={() => deleteTableRowAtSelection()}>
-        <span className="text-sm">Delete row</span>
-      </button>
-      <button className="item" onClick={() => deleteTableAtSelection()}>
-        <span className="text-sm">Delete table</span>
-      </button>
-      <hr className="my-1" />
-      <button className="item" onClick={() => toggleTableRowIsHeader()}>
-        <span className="text-sm">
-          {(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? 'Remove' : 'Add'}{' '}
-          row header
-        </span>
-      </button>
-      <button className="item" onClick={() => toggleTableColumnIsHeader()}>
-        <span className="text-sm">
-          {(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN
-            ? 'Remove'
-            : 'Add'}{' '}
-          column header
-        </span>
-      </button>
-    </div>,
-    document.body,
+  }, [editor, tableCellNode, clearTableSelection]);
+
+  return (
+    <>
+      <DropdownMenu.Item onSelect={() => insertTableRowAtSelection(false)}>
+        Insert {selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`} above
+      </DropdownMenu.Item>
+      <DropdownMenu.Item onSelect={() => insertTableRowAtSelection(true)}>
+        Insert {selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`} below
+      </DropdownMenu.Item>
+      <DropdownMenu.Item onSelect={() => insertTableColumnAtSelection(false)}>
+        Insert {selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`} left
+      </DropdownMenu.Item>
+      <DropdownMenu.Item onSelect={() => insertTableColumnAtSelection(true)}>
+        Insert {selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`} right
+      </DropdownMenu.Item>
+      <DropdownMenu.Item onSelect={() => toggleTableRowIsHeader()}>
+        {(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? 'Remove' : 'Add'} row
+        header
+      </DropdownMenu.Item>
+      <DropdownMenu.Item onSelect={() => toggleTableColumnIsHeader()}>
+        {(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN
+          ? 'Remove'
+          : 'Add'}{' '}
+        column header
+      </DropdownMenu.Item>
+      <DropdownMenu.Separator />
+      {tableStats.columns > 1 && (
+        <DropdownMenu.Item onSelect={() => deleteTableColumnAtSelection()}>Delete column</DropdownMenu.Item>
+      )}
+      {tableStats.rows > 1 && (
+        <DropdownMenu.Item onSelect={() => deleteTableRowAtSelection()}>Delete row</DropdownMenu.Item>
+      )}
+      <DropdownMenu.Item onSelect={() => deleteTableAtSelection()}>Delete table</DropdownMenu.Item>
+    </>
   );
 }
 
-function TableCellActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement }): JSX.Element {
+function TableCellActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement }) {
   const [editor] = useLexicalComposerContext();
 
   const menuButtonRef = useRef(null);
-  const menuRootRef = useRef(null);
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [tableCellNode, setTableMenuCellNode] = useState<TableCellNode | null>(null);
+  const [tableStats, setTablestats] = useState<TableStats>({ rows: 1, columns: 1 });
 
   const moveMenu = useCallback(() => {
+    if (isMenuOpen) {
+      return;
+    }
+
     const menu = menuButtonRef.current;
     const selection = $getSelection();
     const nativeSelection = window.getSelection();
@@ -396,10 +334,26 @@ function TableCellActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement
       }
 
       setTableMenuCellNode(tableCellNodeFromSelection);
+
+      let rows = 1;
+      let columns = 1;
+      const parentRowNode = tableCellNodeFromSelection.getParent();
+      if ($isTableRowNode(parentRowNode)) {
+        const parentTableNode = parentRowNode.getParent();
+        if ($isTableNode(parentTableNode)) {
+          rows = parentTableNode.getChildrenSize();
+          columns = parentRowNode.getChildrenSize();
+        }
+      }
+
+      setTablestats({
+        rows,
+        columns,
+      });
     } else if (!activeElement) {
       setTableMenuCellNode(null);
     }
-  }, [editor]);
+  }, [editor, isMenuOpen]);
 
   useEffect(() => {
     return editor.registerUpdateListener(() => {
@@ -432,40 +386,17 @@ function TableCellActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement
     }
   }, [menuButtonRef, tableCellNode, editor, anchorElem]);
 
-  const prevTableCellDOM = useRef(tableCellNode);
-
-  useEffect(() => {
-    if (prevTableCellDOM.current !== tableCellNode) {
-      setIsMenuOpen(false);
-    }
-
-    prevTableCellDOM.current = tableCellNode;
-  }, [prevTableCellDOM, tableCellNode]);
-
   return (
     <div className="table-cell-action-button-container" ref={menuButtonRef}>
       {tableCellNode != null && (
-        <>
-          <IconButton
-            size="xs"
-            className="table-cell-action-button chevron-down"
-            onClick={e => {
-              e.stopPropagation();
-              setIsMenuOpen(!isMenuOpen);
-            }}
-            ref={menuRootRef}
-          >
+        <DropdownMenu.Root
+          onOpenChange={isOpen => setIsMenuOpen(isOpen)}
+          content={<TableActionMenu tableCellNode={tableCellNode} tableStats={tableStats} />}
+        >
+          <IconButton size="xs" className="table-cell-action-button">
             <Icon.Arrow />
           </IconButton>
-          {isMenuOpen && (
-            <TableActionMenu
-              contextRef={menuRootRef}
-              setIsMenuOpen={setIsMenuOpen}
-              onClose={() => setIsMenuOpen(false)}
-              tableCellNode={tableCellNode}
-            />
-          )}
-        </>
+        </DropdownMenu.Root>
       )}
     </div>
   );

package/src/rich-text-editor/plugins/ToolbarPlugin/index.tsx

@@ -62,8 +62,8 @@ import type { CrystallizeRichTextActionMenuItem } from '../../types/types';
 import { IS_APPLE } from '../../utils/environment';
 import { getSelectedNode } from '../../utils/getSelectedNode';
 import { sanitizeUrl } from '../../utils/url';
-import { InsertNewTableDialog } from '../TablePlugin';
 import ActionsPlugin from './../ActionsPlugin';
+import { InsertTableDialog } from './insert-table';
 
 const blockTypeToBlockName = {
   bullet: 'Bulleted List',
@@ -713,7 +713,7 @@ export default function ToolbarPlugin({
                   Define your starting point of a table, you can add and remove columns and rows after creation.
                 </Dialog.Description>
                 <div className="items-center justify-between">
-                  <InsertNewTableDialog activeEditor={activeEditor} />
+                  <InsertTableDialog activeEditor={activeEditor} />
                 </div>
               </Dialog.Content>
             </div>

package/src/rich-text-editor/plugins/ToolbarPlugin/insert-table.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import type { LexicalEditor } from 'lexical';
+import { INSERT_TABLE_COMMAND } from '@lexical/table';
+
+import { Button } from '../../../button';
+import { Dialog } from '../../../dialog';
+import { InputWithLabel } from '../../../input-with-label';
+
+export function InsertTableDialog({ activeEditor }: { activeEditor: LexicalEditor }) {
+  const [rows, setRows] = useState('5');
+  const [columns, setColumns] = useState('5');
+
+  const onClick = () => {
+    if (parseInt(rows) < 1 || parseInt(columns) < 1) {
+      return;
+    }
+    activeEditor.dispatchCommand(INSERT_TABLE_COMMAND, {
+      columns,
+      rows,
+      includeHeaders: {
+        columns: false,
+        rows: false,
+      },
+    });
+  };
+
+  return (
+    <>
+      <div className="grid grid-cols-[1fr_1px_1fr] border border-gray-100-800 border-solid shadow-sm rounded-md ">
+        <InputWithLabel
+          label="Rows"
+          value={rows}
+          placeholder="0"
+          type="text"
+          inputMode="numeric"
+          onChange={e => setRows(e.target.value)}
+        />
+        <span className="h-full bg-gray-100-800" />
+        <InputWithLabel
+          type="text"
+          label="Columns"
+          placeholder="0"
+          value={columns}
+          inputMode="numeric"
+          onChange={e => setColumns(e.target.value)}
+        />
+      </div>
+      <div className="flex justify-end mt-3">
+        <Button as={Dialog.Close} size="sm" intent="action" aria-label="Confirm" onClick={onClick}>
+          Confirm
+        </Button>
+      </div>
+    </>
+  );
+}