@atlaskit/editor-plugin-table 9.0.0 → 9.0.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 9.0.1
+
+### Patch Changes
+
+- [#98104](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98104)
+  [`7c7c2dc094742`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7c7c2dc094742) -
+  [ux] [ED-25529] This change adds padding to nested tables when active, to allow space for the row
+  and column controls. It also prevents the Insert Row/ Insert Column buttons from being hidden too
+  early.
+
 ## 9.0.0
 
 ### Major Changes

package/dist/cjs/nodeviews/TableRow.js

@@ -413,6 +413,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "onTablePluginState",
     value: function onTablePluginState(state) {
+      var _parentContainer$pare, _parentContainer$pare2;
       var tableRef = state.tableRef;
       var tree = (0, _dom2.getTree)(this.dom);
       if (!tree) {
@@ -437,22 +438,31 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
       var wrapper = tree.wrapper;
       var tableContainer = wrapper.parentElement;
       var tableContentWrapper = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.parentElement;
-      var layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
-      if (isCurrentTableSelected) {
-        this.colControlsOffset = _consts.tableControlsSpacing;
-        if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
+      var parentContainer = tableContentWrapper && tableContentWrapper.parentElement;
+      var isTableInsideLayout = parentContainer && parentContainer.getAttribute('data-layout-content');
+      var isNestedTable = parentContainer && (parentContainer.className === 'pm-table-header-content-wrap' || parentContainer.className === 'pm-table-cell-content-wrap');
+      var isNestedDataTable = parentContainer && parentContainer.getAttribute('data-mark-type') === 'fragment' && (((_parentContainer$pare = parentContainer.parentElement) === null || _parentContainer$pare === void 0 ? void 0 : _parentContainer$pare.className) === 'pm-table-header-content-wrap' || ((_parentContainer$pare2 = parentContainer.parentElement) === null || _parentContainer$pare2 === void 0 ? void 0 : _parentContainer$pare2.className) === 'pm-table-cell-content-wrap');
+      var isTableInsideTable = isNestedTable || isNestedDataTable;
+      if (tableContentWrapper) {
+        if (isCurrentTableSelected) {
+          this.colControlsOffset = _consts.tableControlsSpacing;
+
           // move table a little out of the way
           // to provide spacing for table controls
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          tableContentWrapper.style.paddingLeft = '11px';
-        }
-      } else {
-        this.colControlsOffset = 0;
-        if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          tableContentWrapper.style.removeProperty('padding-left');
+          if (isTableInsideLayout) {
+            tableContentWrapper.style.paddingLeft = '11px';
+          } else if (isTableInsideTable) {
+            tableContentWrapper.style.paddingLeft = '15px';
+            tableContentWrapper.style.paddingRight = '4px';
+          }
+        } else {
+          this.colControlsOffset = 0;
+          if (isTableInsideLayout) {
+            tableContentWrapper.style.removeProperty('padding-left');
+          } else if (isTableInsideTable) {
+            tableContentWrapper.style.removeProperty('padding-left');
+            tableContentWrapper.style.removeProperty('padding-right');
+          }
         }
       }
 

package/dist/cjs/ui/TableFullWidthLabel/index.js

@@ -15,6 +15,7 @@ var tableFullWidthLabelWrapperStyles = (0, _primitives.xcss)({
   backgroundColor: 'elevation.surface.overlay',
   borderRadius: 'border.radius',
   boxShadow: 'elevation.shadow.overlay',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1,
   boxSizing: 'border-box',
   alignItems: 'center'

package/dist/cjs/ui/event-handlers.js

@@ -10,11 +10,13 @@ exports.withCellTracking = exports.whenTableInFocus = exports.isTableInFocus = v
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _nesting = require("@atlaskit/editor-common/nesting");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state5 = require("@atlaskit/editor-prosemirror/state");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
-var _utils2 = require("@atlaskit/editor-tables/utils");
+var _utils3 = require("@atlaskit/editor-tables/utils");
 var _commands = require("../pm-plugins/commands");
 var _pluginFactory = require("../pm-plugins/drag-and-drop/plugin-factory");
 var _pluginFactory2 = require("../pm-plugins/plugin-factory");
@@ -66,7 +68,7 @@ var handleClick = exports.handleClick = function handleClick(view, event) {
   var element = event.target;
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  var table = (0, _utils2.findTable)(view.state.selection);
+  var table = (0, _utils3.findTable)(view.state.selection);
 
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -149,7 +151,16 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, m
       _dispatch2 = view.dispatch;
     return (0, _commands.hoverColumns)([_startIndex], false)(_state, _dispatch2);
   }
-  if (((0, _dom.isCell)(target) || (0, _dom.isCornerButton)(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
+  var isNestedTable = (0, _nesting.getParentOfTypeCount)(state.schema.nodes.table)(state.selection.$from) > 1;
+  if (isNestedTable) {
+    // if the table is nested inside a table, we only call hideInsertColumnOrRowButton if the table nearest to the mouse target is NOT the parent table
+    var nearestTable = (0, _utils.closestElement)(target, 'table');
+    var nestedTable = (0, _utils2.findParentNodeOfTypeClosestToPos)(state.doc.resolve(state.selection.from), [state.schema.nodes.table]);
+    var parentTable = (0, _utils2.findParentNodeOfTypeClosestToPos)(state.doc.resolve((nestedTable === null || nestedTable === void 0 ? void 0 : nestedTable.pos) || 0), [state.schema.nodes.table]);
+    if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId)) {
+      return (0, _commands.hideInsertColumnOrRowButton)()(state, dispatch);
+    }
+  } else if (((0, _dom.isCell)(target) || (0, _dom.isCornerButton)(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
     return (0, _commands.hideInsertColumnOrRowButton)()(state, dispatch);
   }
   if ((0, _dom.isResizeHandleDecoration)(target)) {
@@ -319,7 +330,7 @@ var handleMouseMoveDebounce = function handleMouseMoveDebounce(nodeViewPortalPro
         var isKeyboardResize = (0, _pluginFactory2.getPluginState)(_state4).isKeyboardResize;
         var tableCell = (0, _utils.closestElement)(element, 'td, th');
         var cellStartPosition = view.posAtDOM(tableCell, 0);
-        var rect = (0, _utils2.findCellRectClosestToPos)(_state4.doc.resolve(cellStartPosition));
+        var rect = (0, _utils3.findCellRectClosestToPos)(_state4.doc.resolve(cellStartPosition));
         if (rect) {
           var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
           var rowIndexTarget = rect.top;
@@ -354,7 +365,7 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(nodeVie
 function handleTripleClick(view, pos) {
   var state = view.state,
     dispatch = view.dispatch;
-  var $cellPos = (0, _utils2.cellAround)(state.doc.resolve(pos));
+  var $cellPos = (0, _utils3.cellAround)(state.doc.resolve(pos));
   if (!$cellPos) {
     return false;
   }
@@ -381,7 +392,7 @@ var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState
     var cellSelection = new _cellSelection.CellSelection($anchorCell, $headCell);
     tr.setSelection(cellSelection);
     if (tr.selection instanceof _cellSelection.CellSelection) {
-      var rect = (0, _utils2.getSelectionRect)(cellSelection);
+      var rect = (0, _utils3.getSelectionRect)(cellSelection);
       if (rect) {
         var _getSelectedCellInfo = (0, _analytics2.getSelectedCellInfo)(tr.selection),
           verticalCells = _getSelectedCellInfo.verticalCells,
@@ -409,7 +420,7 @@ var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState
         if (tr.selection instanceof _cellSelection.CellSelection) {
           var isTableSelected = tr.selection.isRowSelection() && tr.selection.isColSelection();
           if (isTableSelected) {
-            tr = (0, _utils2.removeTable)(tr);
+            tr = (0, _utils3.removeTable)(tr);
           } else if (tr.selection.isRowSelection()) {
             var _getPluginState9 = (0, _pluginFactory2.getPluginState)(newState),
               isHeaderRowRequired = _getPluginState9.pluginConfig.isHeaderRowRequired;

package/dist/es2019/nodeviews/TableRow.js

@@ -379,6 +379,7 @@ export default class TableRow extends TableNodeView {
   /* receive external events */
 
   onTablePluginState(state) {
+    var _parentContainer$pare, _parentContainer$pare2;
     const tableRef = state.tableRef;
     const tree = getTree(this.dom);
     if (!tree) {
@@ -405,22 +406,31 @@ export default class TableRow extends TableNodeView {
     } = tree;
     const tableContainer = wrapper.parentElement;
     const tableContentWrapper = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.parentElement;
-    const layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
-    if (isCurrentTableSelected) {
-      this.colControlsOffset = tableControlsSpacing;
-      if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
+    const parentContainer = tableContentWrapper && tableContentWrapper.parentElement;
+    const isTableInsideLayout = parentContainer && parentContainer.getAttribute('data-layout-content');
+    const isNestedTable = parentContainer && (parentContainer.className === 'pm-table-header-content-wrap' || parentContainer.className === 'pm-table-cell-content-wrap');
+    const isNestedDataTable = parentContainer && parentContainer.getAttribute('data-mark-type') === 'fragment' && (((_parentContainer$pare = parentContainer.parentElement) === null || _parentContainer$pare === void 0 ? void 0 : _parentContainer$pare.className) === 'pm-table-header-content-wrap' || ((_parentContainer$pare2 = parentContainer.parentElement) === null || _parentContainer$pare2 === void 0 ? void 0 : _parentContainer$pare2.className) === 'pm-table-cell-content-wrap');
+    const isTableInsideTable = isNestedTable || isNestedDataTable;
+    if (tableContentWrapper) {
+      if (isCurrentTableSelected) {
+        this.colControlsOffset = tableControlsSpacing;
+
         // move table a little out of the way
         // to provide spacing for table controls
-        // Ignored via go/ees005
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        tableContentWrapper.style.paddingLeft = '11px';
-      }
-    } else {
-      this.colControlsOffset = 0;
-      if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        tableContentWrapper.style.removeProperty('padding-left');
+        if (isTableInsideLayout) {
+          tableContentWrapper.style.paddingLeft = '11px';
+        } else if (isTableInsideTable) {
+          tableContentWrapper.style.paddingLeft = '15px';
+          tableContentWrapper.style.paddingRight = '4px';
+        }
+      } else {
+        this.colControlsOffset = 0;
+        if (isTableInsideLayout) {
+          tableContentWrapper.style.removeProperty('padding-left');
+        } else if (isTableInsideTable) {
+          tableContentWrapper.style.removeProperty('padding-left');
+          tableContentWrapper.style.removeProperty('padding-right');
+        }
       }
     }
 

package/dist/es2019/ui/TableFullWidthLabel/index.js

@@ -8,6 +8,7 @@ const tableFullWidthLabelWrapperStyles = xcss({
   backgroundColor: 'elevation.surface.overlay',
   borderRadius: 'border.radius',
   boxShadow: 'elevation.shadow.overlay',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1,
   boxSizing: 'border-box',
   alignItems: 'center'

package/dist/es2019/ui/event-handlers.js

@@ -1,7 +1,9 @@
 import rafSchedule from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { browser, closestElement, isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '@atlaskit/editor-common/utils';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
@@ -140,7 +142,16 @@ export const handleMouseOver = (view, mouseEvent) => {
     } = view;
     return hoverColumns([startIndex], false)(state, dispatch);
   }
-  if ((isCell(target) || isCornerButton(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
+  const isNestedTable = getParentOfTypeCount(state.schema.nodes.table)(state.selection.$from) > 1;
+  if (isNestedTable) {
+    // if the table is nested inside a table, we only call hideInsertColumnOrRowButton if the table nearest to the mouse target is NOT the parent table
+    const nearestTable = closestElement(target, 'table');
+    const nestedTable = findParentNodeOfTypeClosestToPos(state.doc.resolve(state.selection.from), [state.schema.nodes.table]);
+    const parentTable = findParentNodeOfTypeClosestToPos(state.doc.resolve((nestedTable === null || nestedTable === void 0 ? void 0 : nestedTable.pos) || 0), [state.schema.nodes.table]);
+    if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId)) {
+      return hideInsertColumnOrRowButton()(state, dispatch);
+    }
+  } else if ((isCell(target) || isCornerButton(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
     return hideInsertColumnOrRowButton()(state, dispatch);
   }
   if (isResizeHandleDecoration(target)) {

package/dist/esm/nodeviews/TableRow.js

@@ -406,6 +406,7 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "onTablePluginState",
     value: function onTablePluginState(state) {
+      var _parentContainer$pare, _parentContainer$pare2;
       var tableRef = state.tableRef;
       var tree = getTree(this.dom);
       if (!tree) {
@@ -430,22 +431,31 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
       var wrapper = tree.wrapper;
       var tableContainer = wrapper.parentElement;
       var tableContentWrapper = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.parentElement;
-      var layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
-      if (isCurrentTableSelected) {
-        this.colControlsOffset = tableControlsSpacing;
-        if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
+      var parentContainer = tableContentWrapper && tableContentWrapper.parentElement;
+      var isTableInsideLayout = parentContainer && parentContainer.getAttribute('data-layout-content');
+      var isNestedTable = parentContainer && (parentContainer.className === 'pm-table-header-content-wrap' || parentContainer.className === 'pm-table-cell-content-wrap');
+      var isNestedDataTable = parentContainer && parentContainer.getAttribute('data-mark-type') === 'fragment' && (((_parentContainer$pare = parentContainer.parentElement) === null || _parentContainer$pare === void 0 ? void 0 : _parentContainer$pare.className) === 'pm-table-header-content-wrap' || ((_parentContainer$pare2 = parentContainer.parentElement) === null || _parentContainer$pare2 === void 0 ? void 0 : _parentContainer$pare2.className) === 'pm-table-cell-content-wrap');
+      var isTableInsideTable = isNestedTable || isNestedDataTable;
+      if (tableContentWrapper) {
+        if (isCurrentTableSelected) {
+          this.colControlsOffset = tableControlsSpacing;
+
           // move table a little out of the way
           // to provide spacing for table controls
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          tableContentWrapper.style.paddingLeft = '11px';
-        }
-      } else {
-        this.colControlsOffset = 0;
-        if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          tableContentWrapper.style.removeProperty('padding-left');
+          if (isTableInsideLayout) {
+            tableContentWrapper.style.paddingLeft = '11px';
+          } else if (isTableInsideTable) {
+            tableContentWrapper.style.paddingLeft = '15px';
+            tableContentWrapper.style.paddingRight = '4px';
+          }
+        } else {
+          this.colControlsOffset = 0;
+          if (isTableInsideLayout) {
+            tableContentWrapper.style.removeProperty('padding-left');
+          } else if (isTableInsideTable) {
+            tableContentWrapper.style.removeProperty('padding-left');
+            tableContentWrapper.style.removeProperty('padding-right');
+          }
         }
       }
 

package/dist/esm/ui/TableFullWidthLabel/index.js

@@ -8,6 +8,7 @@ var tableFullWidthLabelWrapperStyles = xcss({
   backgroundColor: 'elevation.surface.overlay',
   borderRadius: 'border.radius',
   boxShadow: 'elevation.shadow.overlay',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1,
   boxSizing: 'border-box',
   alignItems: 'center'

package/dist/esm/ui/event-handlers.js

@@ -1,8 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import rafSchedule from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { browser, closestElement, isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '@atlaskit/editor-common/utils';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
@@ -140,7 +142,16 @@ export var handleMouseOver = function handleMouseOver(view, mouseEvent) {
       _dispatch2 = view.dispatch;
     return hoverColumns([_startIndex], false)(_state, _dispatch2);
   }
-  if ((isCell(target) || isCornerButton(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
+  var isNestedTable = getParentOfTypeCount(state.schema.nodes.table)(state.selection.$from) > 1;
+  if (isNestedTable) {
+    // if the table is nested inside a table, we only call hideInsertColumnOrRowButton if the table nearest to the mouse target is NOT the parent table
+    var nearestTable = closestElement(target, 'table');
+    var nestedTable = findParentNodeOfTypeClosestToPos(state.doc.resolve(state.selection.from), [state.schema.nodes.table]);
+    var parentTable = findParentNodeOfTypeClosestToPos(state.doc.resolve((nestedTable === null || nestedTable === void 0 ? void 0 : nestedTable.pos) || 0), [state.schema.nodes.table]);
+    if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId)) {
+      return hideInsertColumnOrRowButton()(state, dispatch);
+    }
+  } else if ((isCell(target) || isCornerButton(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
     return hideInsertColumnOrRowButton()(state, dispatch);
   }
   if (isResizeHandleDecoration(target)) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "9.0.0",
+	"version": "9.0.1",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"@atlaskit/adf-schema": "^46.1.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/custom-steps": "^0.9.0",
-		"@atlaskit/editor-common": "^98.0.0",
+		"@atlaskit/editor-common": "^98.2.0",
 		"@atlaskit/editor-palette": "1.6.3",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/editor-prosemirror": "6.2.1",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^23.1.0",
+		"@atlaskit/icon": "^23.2.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.31.0",
+		"@atlaskit/tmp-editor-statsig": "^2.32.0",
 		"@atlaskit/toggle": "^14.0.0",
 		"@atlaskit/tokens": "^2.5.0",
 		"@atlaskit/tooltip": "^19.0.0",

package/src/nodeviews/TableComponent.tsx

@@ -908,7 +908,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		const topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
 		const topOffset = fg('platform_editor_breakout_use_css')
 			? 0
-			: (this.state.stickyHeader?.top ?? 0);
+			: this.state.stickyHeader?.top ?? 0;
 
 		const topStickyShadowPosition =
 			this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;

package/src/nodeviews/TableRow.ts

@@ -493,24 +493,44 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 		const tableContainer = wrapper.parentElement;
 		const tableContentWrapper = tableContainer?.parentElement;
 
-		const layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
+		const parentContainer = tableContentWrapper && tableContentWrapper.parentElement;
 
-		if (isCurrentTableSelected) {
-			this.colControlsOffset = tableControlsSpacing;
+		const isTableInsideLayout =
+			parentContainer && parentContainer.getAttribute('data-layout-content');
+
+		const isNestedTable =
+			parentContainer &&
+			(parentContainer.className === 'pm-table-header-content-wrap' ||
+				parentContainer.className === 'pm-table-cell-content-wrap');
+
+		const isNestedDataTable =
+			parentContainer &&
+			parentContainer.getAttribute('data-mark-type') === 'fragment' &&
+			(parentContainer.parentElement?.className === 'pm-table-header-content-wrap' ||
+				parentContainer.parentElement?.className === 'pm-table-cell-content-wrap');
+
+		const isTableInsideTable = isNestedTable || isNestedDataTable;
+
+		if (tableContentWrapper) {
+			if (isCurrentTableSelected) {
+				this.colControlsOffset = tableControlsSpacing;
 
-			if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
 				// move table a little out of the way
 				// to provide spacing for table controls
-				// Ignored via go/ees005
-				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				tableContentWrapper!.style.paddingLeft = '11px';
-			}
-		} else {
-			this.colControlsOffset = 0;
-			if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
-				// Ignored via go/ees005
-				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				tableContentWrapper!.style.removeProperty('padding-left');
+				if (isTableInsideLayout) {
+					tableContentWrapper.style.paddingLeft = '11px';
+				} else if (isTableInsideTable) {
+					tableContentWrapper.style.paddingLeft = '15px';
+					tableContentWrapper.style.paddingRight = '4px';
+				}
+			} else {
+				this.colControlsOffset = 0;
+				if (isTableInsideLayout) {
+					tableContentWrapper.style.removeProperty('padding-left');
+				} else if (isTableInsideTable) {
+					tableContentWrapper.style.removeProperty('padding-left');
+					tableContentWrapper.style.removeProperty('padding-right');
+				}
 			}
 		}
 

package/src/pm-plugins/commands/hover.ts

@@ -221,8 +221,8 @@ export const hoverCell = (rowIndex?: number, colIndex?: number) =>
 			// If no arguments have been passed then the intention it to reset the hover cell data
 			const clear = rowIndex === undefined && colIndex === undefined;
 
-			const nextRowIndex = clear ? undefined : (rowIndex ?? prevHoveredCell.rowIndex);
-			const nextColIndex = clear ? undefined : (colIndex ?? prevHoveredCell.colIndex);
+			const nextRowIndex = clear ? undefined : rowIndex ?? prevHoveredCell.rowIndex;
+			const nextColIndex = clear ? undefined : colIndex ?? prevHoveredCell.colIndex;
 
 			if (nextRowIndex === prevHoveredCell.rowIndex && nextColIndex === prevHoveredCell.colIndex) {
 				return false;

package/src/pm-plugins/drag-and-drop/commands-with-analytics.ts

@@ -16,7 +16,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
 
 import type { DraggableData, DraggableType } from '../../types';
-import { getSelectedTableInfo , withEditorAnalyticsAPI } from '../utils/analytics';
+import { getSelectedTableInfo, withEditorAnalyticsAPI } from '../utils/analytics';
 import { canMove, getTargetIndex } from '../utils/drag-menu';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../utils/selection';
 

package/src/pm-plugins/drag-and-drop/commands.ts

@@ -5,7 +5,11 @@ import { cloneColumn, cloneRow, moveColumn, moveRow } from '@atlaskit/editor-tab
 
 import type { DraggableType, TableDirection } from '../../types';
 import { TableDecorations } from '../../types';
-import { createColumnInsertLine , createRowInsertLine , updateDecorations } from '../utils/decoration';
+import {
+	createColumnInsertLine,
+	createRowInsertLine,
+	updateDecorations,
+} from '../utils/decoration';
 
 import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';

package/src/pm-plugins/table-resizing/utils/colgroup.ts

@@ -105,7 +105,7 @@ export const insertColgroupFromNode = (
 
 	colgroup = renderColgroupFromNode(
 		table,
-		isTableScalingEnabled ? (tableRef ?? undefined) : undefined,
+		isTableScalingEnabled ? tableRef ?? undefined : undefined,
 		shouldUseIncreasedScalingPercent,
 		isCommentEditor,
 	);

package/src/pm-plugins/transforms/column-width.ts

@@ -9,7 +9,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { fg } from '@atlaskit/platform-feature-flags';
 
 import type { PluginInjectionAPI } from '../../types';
-import { isMinCellWidthTable , hasTableBeenResized } from '../table-resizing/utils/colgroup';
+import { isMinCellWidthTable, hasTableBeenResized } from '../table-resizing/utils/colgroup';
 import { getTableContainerElementWidth, getTableElementWidth } from '../table-resizing/utils/misc';
 import { getResizeState } from '../table-resizing/utils/resize-state';
 import { scaleTableTo } from '../table-resizing/utils/scale-table';

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -98,7 +98,7 @@ export const ColumnControls = ({
 	const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
 
 	const rowControlStickyTop = fg('platform_editor_breakout_use_css') ? 45 : rowHeights?.[0];
-	const marginTop = hasHeaderRow && stickyTop !== undefined ? (rowControlStickyTop ?? 0) : 0;
+	const marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop ?? 0 : 0;
 
 	const handleClick = useCallback(
 		(event: MouseEvent) => {

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -102,7 +102,7 @@ const TableFloatingColumnControls = ({
 
 	if (stickyTop) {
 		const columnControlTopOffsetFromParent = '-12px';
-		const headerRowHeight = hasHeaderRow && stickyTop !== undefined ? (rowHeights?.[0] ?? 0) : 0;
+		const headerRowHeight = hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
 		containerRef?.current?.style.setProperty(
 			'top',
 			fg('platform_editor_breakout_use_css')

package/src/ui/TableFullWidthLabel/index.tsx

@@ -12,6 +12,7 @@ const tableFullWidthLabelWrapperStyles = xcss({
 	backgroundColor: 'elevation.surface.overlay',
 	borderRadius: 'border.radius',
 	boxShadow: 'elevation.shadow.overlay',
+	// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
 	lineHeight: 1,
 	boxSizing: 'border-box',
 	alignItems: 'center',

package/src/ui/event-handlers.ts

@@ -2,6 +2,7 @@ import rafSchedule from 'raf-schd';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import {
 	browser,
@@ -13,6 +14,7 @@ import {
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -224,7 +226,23 @@ export const handleMouseOver = (view: EditorView, mouseEvent: Event): boolean =>
 		return hoverColumns([startIndex], false)(state, dispatch);
 	}
 
-	if (
+	const isNestedTable = getParentOfTypeCount(state.schema.nodes.table)(state.selection.$from) > 1;
+
+	if (isNestedTable) {
+		// if the table is nested inside a table, we only call hideInsertColumnOrRowButton if the table nearest to the mouse target is NOT the parent table
+		const nearestTable = closestElement(target, 'table');
+		const nestedTable = findParentNodeOfTypeClosestToPos(state.doc.resolve(state.selection.from), [
+			state.schema.nodes.table,
+		]);
+		
+		const parentTable = findParentNodeOfTypeClosestToPos(state.doc.resolve(nestedTable?.pos || 0), [
+			state.schema.nodes.table,
+		]);
+
+		if (nearestTable?.dataset.tableLocalId !== parentTable?.node.attrs.localId) {
+			return hideInsertColumnOrRowButton()(state, dispatch);
+		}
+	} else if (
 		(isCell(target) || isCornerButton(target)) &&
 		(typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')
 	) {