feat(react-tables): expose split and merge in the dropdown menu (#1897)

remirror · Oct 6, 2022 · 64fa279 · 64fa279 · github-actions · Oct 6, 2022
1 parent 8e33d89
commit 64fa279
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 2 deletions.
diff --git a/.changeset/thick-badgers-allow.md b/.changeset/thick-badgers-allow.md
@@ -0,0 +1,7 @@
+---
+'@remirror/extension-react-tables': patch
+'@remirror/styles': patch
+'@remirror/theme': patch
+---
+
+Expose the ability to split and merge cells in the default React tables menu
diff --git a/packages/remirror__extension-react-tables/src/components/table-cell-menu.tsx b/packages/remirror__extension-react-tables/src/components/table-cell-menu.tsx
@@ -50,9 +50,10 @@ const DefaultTableCellMenuButton: React.FC<TableCellMenuComponentProps> = ({ set
 interface DefaultTableCellMenuItemProps {
   label: string;
   onClick: () => void;
+  disabled?: boolean;
 }
 const DefaultTableCellMenuItem: React.FC<DefaultTableCellMenuItemProps> = (props) => (
-  <button onClick={props.onClick} className={ComponentsTheme.MENU_ITEM}>
+  <button disabled={props.disabled} onClick={props.onClick} className={ComponentsTheme.MENU_ITEM}>
     {props.label}
   </button>
 );
@@ -114,7 +115,16 @@ const DefaultTableCellMenuPopup: React.FC<TableCellMenuComponentProps> = ({
         label='Add column after'
         onClick={handleClick(commands.addTableColumnAfter)}
       />
-
+      <DefaultTableCellMenuItem
+        label='Merge cells'
+        onClick={handleClick(commands.mergeTableCells)}
+        disabled={!commands.mergeTableCells.enabled()}
+      />
+      <DefaultTableCellMenuItem
+        label='Split cells'
+        onClick={handleClick(commands.splitTableCell)}
+        disabled={!commands.splitTableCell.enabled()}
+      />
       <DefaultTableCellMenuItem
         label='Remove column'
         onClick={handleClick(commands.deleteTableColumn)}

diff --git a/packages/remirror__styles/all.css b/packages/remirror__styles/all.css
@@ -329,6 +329,10 @@ button:active .remirror-menu-pane-shortcut,
   color: var(--rmr-color-active-primary-text) !important;
 }
 
+.remirror-menu-item:disabled {
+  opacity: 0.5;
+}
+
 .remirror-menu-item-row {
   padding: 0 var(--rmr-space-2);
 }

diff --git a/packages/remirror__styles/components.css b/packages/remirror__styles/components.css
@@ -329,6 +329,10 @@ button:active .remirror-menu-pane-shortcut,
   color: var(--rmr-color-active-primary-text) !important;
 }
 
+.remirror-menu-item:disabled {
+  opacity: 0.5;
+}
+
 .remirror-menu-item-row {
   padding: 0 var(--rmr-space-2);
 }

diff --git a/packages/remirror__styles/src/dom.tsx b/packages/remirror__styles/src/dom.tsx
@@ -338,6 +338,10 @@ export const componentsStyledCss: ReturnType<typeof css> = css`
     color: var(--rmr-color-active-primary-text) !important;
   }
 
+  .remirror-menu-item:disabled {
+    opacity: 0.5;
+  }
+
   .remirror-menu-item-row {
     padding: 0 var(--rmr-space-2);
   }

diff --git a/packages/remirror__styles/src/emotion.tsx b/packages/remirror__styles/src/emotion.tsx
@@ -340,6 +340,10 @@ export const componentsStyledCss: ReturnType<typeof css> = css`
     color: var(--rmr-color-active-primary-text) !important;
   }
 
+  .remirror-menu-item:disabled {
+    opacity: 0.5;
+  }
+
   .remirror-menu-item-row {
     padding: 0 var(--rmr-space-2);
   }

diff --git a/packages/remirror__styles/src/styled-components.tsx b/packages/remirror__styles/src/styled-components.tsx
@@ -339,6 +339,10 @@ export const componentsStyledCss: ReturnType<typeof css> = css`
     color: var(--rmr-color-active-primary-text) !important;
   }
 
+  .remirror-menu-item:disabled {
+    opacity: 0.5;
+  }
+
   .remirror-menu-item-row {
     padding: 0 var(--rmr-space-2);
   }

diff --git a/packages/remirror__theme/src/components-theme.ts b/packages/remirror__theme/src/components-theme.ts
@@ -339,6 +339,10 @@ export const MENU_ITEM = css`
     background-color: ${primaryActive} !important;
     color: ${primaryActiveText} !important;
   }
+
+  &:disabled {
+    opacity: 0.5;
+  }
 `;
 
 export const MENU_ITEM_ROW = css`