fix: update table stuffs

The-Code-Monkey · May 3, 2024 · 72523f1 · 72523f1
1 parent 5dab38c
commit 72523f1
Show file tree

Hide file tree

Showing 5 changed files with 234 additions and 168 deletions.
diff --git a/packages/lexical/package.json b/packages/lexical/package.json
@@ -13,15 +13,18 @@
   "dependencies": {
     "@lexical/react": "0.14.2",
     "@techstack/react-feather": "workspace:*",
-    "lexical": "0.14.2",
+    "lexical": "0.14.5",
     "react": "18.2.0",
+    "react-dom": "18.2.0",
     "styled-components": "6.1.1",
     "typescript": "5.4.5"
   },
   "devDependencies": {
     "@techstack/tcm-cli": "workspace:*",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
     "prop-types": "15.8.1",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
     "storybook": "7.6.17"
   },
   "main": "./dist/esm/index.js",

diff --git a/packages/lexical/src/index.tsx b/packages/lexical/src/index.tsx
@@ -75,26 +75,25 @@ function EditorContainer({ value, onChange, name }: EditorProps) {
     useState<boolean>(false);
 
   useEffect(() => {
-    if (typeof window === 'undefined' || !window?.matchMedia) return;
-    const updateViewPortWidth = () => {
-      const isNextSmallWidthViewport = window.matchMedia(
-        '(max-width: 1025px)'
-      ).matches;
-
-      if (isNextSmallWidthViewport !== isSmallWidthViewport) {
-        setIsSmallWidthViewport(isNextSmallWidthViewport);
-      }
-    };
-    updateViewPortWidth();
-    window.addEventListener('resize', updateViewPortWidth);
-
-    return () => {
-      window.removeEventListener('resize', updateViewPortWidth);
-    };
+    if (typeof window !== 'undefined' && window?.matchMedia) {
+      const updateViewPortWidth = () => {
+        const isNextSmallWidthViewport = window.matchMedia(
+          '(max-width: 1025px)'
+        ).matches;
+
+        if (isNextSmallWidthViewport !== isSmallWidthViewport) {
+          setIsSmallWidthViewport(isNextSmallWidthViewport);
+        }
+      };
+      updateViewPortWidth();
+      window.addEventListener('resize', updateViewPortWidth);
+
+      return () => {
+        window.removeEventListener('resize', updateViewPortWidth);
+      };
+    }
   }, [isSmallWidthViewport, window]);
 
-  if (typeof window === 'undefined') return null;
-
   const onChangeFn = (v: string) => {
     onChange(v);
   };
@@ -121,6 +120,8 @@ function EditorContainer({ value, onChange, name }: EditorProps) {
     });
   };
 
+  if (typeof window === 'undefined') return null;
+
   return (
     <LexicalComposer
       initialConfig={{

diff --git a/packages/lexical/src/plugins/TableActionMenuPlugin.tsx b/packages/lexical/src/plugins/TableActionMenuPlugin.tsx
@@ -69,6 +69,9 @@ function isTableSelectionRectangular(selection: TableSelection): boolean {
     const node = nodes[i];
     if ($isTableCellNode(node)) {
       const row = node.getParentOrThrow();
+      if ($isTableRowNode(row)) {
+        throw new Error('Expected CellNode to have a RowNode parent');
+      }
       if (currentRow !== row) {
         if (expectedColumns !== null && currentColumns !== expectedColumns) {
           return false;
@@ -506,139 +509,147 @@ function TableActionMenu({
     }
   }
 
-  return createPortal(
-    <div
-      className='dropdown'
-      ref={dropDownRef}
-      onClick={e => {
-        e.stopPropagation();
-      }}
-    >
-      {mergeCellButton}
-      <button
-        type='button'
-        className='item'
-        onClick={() =>
-          showColorPickerModal('Cell background color', () => (
-            <ColorPicker
-              color={backgroundColor}
-              onChange={handleCellBackgroundColor}
-            />
-          ))
-        }
-        data-test-id='table-background-color'
-      >
-        <span className='text'>Background color</span>
-      </button>
-      <hr />
-      <button
-        type='button'
-        className='item'
-        onClick={() => insertTableRowAtSelection(false)}
-        data-test-id='table-insert-row-above'
-      >
-        <span className='text'>
-          Insert{' '}
-          {selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`}{' '}
-          above
-        </span>
-      </button>
-      <button
-        type='button'
-        className='item'
-        onClick={() => insertTableRowAtSelection(true)}
-        data-test-id='table-insert-row-below'
-      >
-        <span className='text'>
-          Insert{' '}
-          {selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`}{' '}
-          below
-        </span>
-      </button>
-      <hr />
-      <button
-        type='button'
-        className='item'
-        onClick={() => insertTableColumnAtSelection(false)}
-        data-test-id='table-insert-column-before'
-      >
-        <span className='text'>
-          Insert{' '}
-          {selectionCounts.columns === 1
-            ? 'column'
-            : `${selectionCounts.columns} columns`}{' '}
-          left
-        </span>
-      </button>
-      <button
-        type='button'
-        className='item'
-        onClick={() => insertTableColumnAtSelection(true)}
-        data-test-id='table-insert-column-after'
-      >
-        <span className='text'>
-          Insert{' '}
-          {selectionCounts.columns === 1
-            ? 'column'
-            : `${selectionCounts.columns} columns`}{' '}
-          right
-        </span>
-      </button>
-      <hr />
-      <button
-        type='button'
-        className='item'
-        onClick={() => deleteTableColumnAtSelection()}
-        data-test-id='table-delete-columns'
-      >
-        <span className='text'>Delete column</span>
-      </button>
-      <button
-        type='button'
-        className='item'
-        onClick={() => deleteTableRowAtSelection()}
-        data-test-id='table-delete-rows'
-      >
-        <span className='text'>Delete row</span>
-      </button>
-      <button
-        type='button'
-        className='item'
-        onClick={() => deleteTableAtSelection()}
-        data-test-id='table-delete'
-      >
-        <span className='text'>Delete table</span>
-      </button>
-      <hr />
-      <button
-        type='button'
-        className='item'
-        onClick={() => toggleTableRowIsHeader()}
-      >
-        <span className='text'>
-          {(tableCellNode.__headerState & TableCellHeaderStates.ROW) ===
-          TableCellHeaderStates.ROW
-            ? 'Remove'
-            : 'Add'}{' '}
-          row header
-        </span>
-      </button>
-      <button
-        type='button'
-        className='item'
-        onClick={() => toggleTableColumnIsHeader()}
-        data-test-id='table-column-header'
-      >
-        <span className='text'>
-          {(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) ===
-          TableCellHeaderStates.COLUMN
-            ? 'Remove'
-            : 'Add'}{' '}
-          column header
-        </span>
-      </button>
-    </div>,
-    document.body
+  return (
+    <>
+      {createPortal(
+        <div
+          className='dropdown'
+          ref={dropDownRef}
+          onClick={e => {
+            e.stopPropagation();
+          }}
+        >
+          {mergeCellButton}
+          <button
+            type='button'
+            className='item'
+            onClick={() =>
+              showColorPickerModal('Cell background color', () => (
+                <ColorPicker
+                  color={backgroundColor}
+                  onChange={handleCellBackgroundColor}
+                />
+              ))
+            }
+            data-test-id='table-background-color'
+          >
+            <span className='text'>Background color</span>
+          </button>
+          <hr />
+          <button
+            type='button'
+            className='item'
+            onClick={() => insertTableRowAtSelection(false)}
+            data-test-id='table-insert-row-above'
+          >
+            <span className='text'>
+              Insert{' '}
+              {selectionCounts.rows === 1
+                ? 'row'
+                : `${selectionCounts.rows} rows`}{' '}
+              above
+            </span>
+          </button>
+          <button
+            type='button'
+            className='item'
+            onClick={() => insertTableRowAtSelection(true)}
+            data-test-id='table-insert-row-below'
+          >
+            <span className='text'>
+              Insert{' '}
+              {selectionCounts.rows === 1
+                ? 'row'
+                : `${selectionCounts.rows} rows`}{' '}
+              below
+            </span>
+          </button>
+          <hr />
+          <button
+            type='button'
+            className='item'
+            onClick={() => insertTableColumnAtSelection(false)}
+            data-test-id='table-insert-column-before'
+          >
+            <span className='text'>
+              Insert{' '}
+              {selectionCounts.columns === 1
+                ? 'column'
+                : `${selectionCounts.columns} columns`}{' '}
+              left
+            </span>
+          </button>
+          <button
+            type='button'
+            className='item'
+            onClick={() => insertTableColumnAtSelection(true)}
+            data-test-id='table-insert-column-after'
+          >
+            <span className='text'>
+              Insert{' '}
+              {selectionCounts.columns === 1
+                ? 'column'
+                : `${selectionCounts.columns} columns`}{' '}
+              right
+            </span>
+          </button>
+          <hr />
+          <button
+            type='button'
+            className='item'
+            onClick={() => deleteTableColumnAtSelection()}
+            data-test-id='table-delete-columns'
+          >
+            <span className='text'>Delete column</span>
+          </button>
+          <button
+            type='button'
+            className='item'
+            onClick={() => deleteTableRowAtSelection()}
+            data-test-id='table-delete-rows'
+          >
+            <span className='text'>Delete row</span>
+          </button>
+          <button
+            type='button'
+            className='item'
+            onClick={() => deleteTableAtSelection()}
+            data-test-id='table-delete'
+          >
+            <span className='text'>Delete table</span>
+          </button>
+          <hr />
+          <button
+            type='button'
+            className='item'
+            onClick={() => toggleTableRowIsHeader()}
+          >
+            <span className='text'>
+              {(tableCellNode.__headerState & TableCellHeaderStates.ROW) ===
+              TableCellHeaderStates.ROW
+                ? 'Remove'
+                : 'Add'}{' '}
+              row header
+            </span>
+          </button>
+          <button
+            type='button'
+            className='item'
+            onClick={() => toggleTableColumnIsHeader()}
+            data-test-id='table-column-header'
+          >
+            <span className='text'>
+              {(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) ===
+              TableCellHeaderStates.COLUMN
+                ? 'Remove'
+                : 'Add'}{' '}
+              column header
+            </span>
+          </button>
+        </div>,
+        document.body
+      )}
+    </>
   );
 }
 
@@ -764,15 +775,18 @@ function TableCellActionMenuContainer({
             </i>
           </button>
           {colorPickerModal}
-          {isMenuOpen &&
-            TableActionMenu({
-              contextRef: menuRootRef,
-              onClose: () => setIsMenuOpen(false),
-              setIsMenuOpen,
-              showColorPickerModal,
-              tableCellNode,
-              cellMerge,
-            })}
+          {isMenuOpen && (
+            <>
+              <TableActionMenu
+                contextRef={menuRootRef}
+                onClose={() => setIsMenuOpen(false)}
+                setIsMenuOpen={setIsMenuOpen}
+                showColorPickerModal={showColorPickerModal}
+                tableCellNode={tableCellNode}
+                cellMerge={cellMerge}
+              />
+            </>
+          )}
         </>
       )}
     </div>