@atlaskit/editor-plugin-table 9.5.10 → 10.1.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/editor-plugin-table
 
+## 10.1.0
+
+### Minor Changes
+
+- [#116320](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116320)
+  [`53a3a2613a2ea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/53a3a2613a2ea) -
+  ED-26488 disable table dnd in live pages
+
+### Patch Changes
+
+- [#117960](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117960)
+  [`0e8738357b54c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0e8738357b54c) -
+  [ux] ED-26725 Bugfix to bring back the blue highlighted border when resizing columns in nested
+  tables
+- Updated dependencies
+
+## 10.0.0
+
+### Major Changes
+
+- [#117363](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117363)
+  [`10a0f7f6c2027`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10a0f7f6c2027) -
+  This package's `peerDependencies` have been adjusted for `react` and/or `react-dom` to reflect the
+  status of only supporting React 18 going forward. No explicit breaking change to React support has
+  been made in this release, but this is to signify going forward, breaking changes for React 16 or
+  React 17 may come via non-major semver releases.
+
+  Please refer this community post for more details:
+  https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.5.10
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponentWithSharedState.js

@@ -29,11 +29,13 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     forwardRef = _ref.forwardRef,
     allowTableAlignment = _ref.allowTableAlignment,
     allowTableResizing = _ref.allowTableResizing;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media', 'selection']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media', 'selection', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     tableState = _useSharedPluginState.tableState,
     mediaState = _useSharedPluginState.mediaState,
-    selectionState = _useSharedPluginState.selectionState;
+    selectionState = _useSharedPluginState.selectionState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   if (!tableState) {
     return null;
   }
@@ -73,7 +75,7 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     allowControls: allowControls,
     isHeaderRowEnabled: isHeaderRowEnabled,
     isHeaderColumnEnabled: isHeaderColumnEnabled,
-    isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
+    isDragAndDropEnabled: (options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled) && !isLivePageViewMode,
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
     allowTableAlignment: allowTableAlignment,
     allowTableResizing: allowTableResizing,

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

@@ -17,6 +17,7 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils3 = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../pm-plugins/commands");
 var _pluginFactory = require("../pm-plugins/drag-and-drop/plugin-factory");
 var _pluginFactory2 = require("../pm-plugins/plugin-factory");
@@ -157,8 +158,14 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, m
     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);
+    if ((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_resize_border_fix')) {
+      if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId) && ((0, _dom.isCell)(target) || (0, _dom.isCornerButton)(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
+        return (0, _commands.hideInsertColumnOrRowButton)()(state, dispatch);
+      }
+    } else {
+      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);

package/dist/cjs/ui/toolbar.js

@@ -22,13 +22,13 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils3 = require("@atlaskit/editor-tables/utils");
-var _contentAlignCenter = _interopRequireDefault(require("@atlaskit/icon/core/content-align-center"));
-var _contentAlignLeft = _interopRequireDefault(require("@atlaskit/icon/core/content-align-left"));
+var _alignImageCenter = _interopRequireDefault(require("@atlaskit/icon/core/align-image-center"));
+var _alignImageLeft = _interopRequireDefault(require("@atlaskit/icon/core/align-image-left"));
 var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
-var _alignImageCenter = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-center"));
-var _alignImageLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-left"));
+var _alignImageCenter2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-center"));
+var _alignImageLeft2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-left"));
 var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
@@ -625,22 +625,22 @@ var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState,
     id: 'editor.table.alignLeft',
     value: 'align-start',
     icon: function icon() {
-      return (0, _react.jsx)(_contentAlignLeft.default, {
+      return (0, _react.jsx)(_alignImageLeft.default, {
         color: "currentColor",
         spacing: "spacious",
         label: "table-align-start-icon",
-        LEGACY_fallbackIcon: _alignImageLeft.default
+        LEGACY_fallbackIcon: _alignImageLeft2.default
       });
     }
   }, {
     id: 'editor.table.alignCenter',
     value: 'center',
     icon: function icon() {
-      return (0, _react.jsx)(_contentAlignCenter.default, {
+      return (0, _react.jsx)(_alignImageCenter.default, {
         color: "currentColor",
         spacing: "spacious",
         label: "table-align-center-icon",
-        LEGACY_fallbackIcon: _alignImageCenter.default
+        LEGACY_fallbackIcon: _alignImageCenter2.default
       });
     }
   }];

package/dist/es2019/nodeviews/TableComponentWithSharedState.js

@@ -28,8 +28,10 @@ export const TableComponentWithSharedState = ({
     widthState,
     tableState,
     mediaState,
-    selectionState
-  } = useSharedPluginState(api, ['width', 'table', 'media', 'selection']);
+    selectionState,
+    editorViewModeState
+  } = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']);
+  const isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   if (!tableState) {
     return null;
   }
@@ -70,7 +72,7 @@ export const TableComponentWithSharedState = ({
     allowControls: allowControls,
     isHeaderRowEnabled: isHeaderRowEnabled,
     isHeaderColumnEnabled: isHeaderColumnEnabled,
-    isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
+    isDragAndDropEnabled: (options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled) && !isLivePageViewMode,
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
     allowTableAlignment: allowTableAlignment,
     allowTableResizing: allowTableResizing,

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

@@ -7,6 +7,7 @@ import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/u
 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';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, setTableHovered, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from '../pm-plugins/commands';
 import { getPluginState as getDragDropPluginState } from '../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -148,8 +149,14 @@ export const handleMouseOver = (view, mouseEvent) => {
     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);
+    if (fg('platform_editor_nested_tables_resize_border_fix')) {
+      if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId) && (isCell(target) || isCornerButton(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
+        return hideInsertColumnOrRowButton()(state, dispatch);
+      }
+    } else {
+      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);

package/dist/es2019/ui/toolbar.js

@@ -17,8 +17,8 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType, splitCell } from '@atlaskit/editor-tables/utils';
-import ContentAlignCenterIcon from '@atlaskit/icon/core/content-align-center';
-import ContentAlignLeftIcon from '@atlaskit/icon/core/content-align-left';
+import AlignImageCenterIcon from '@atlaskit/icon/core/align-image-center';
+import AlignImageLeftIcon from '@atlaskit/icon/core/align-image-left';
 import CustomizeIcon from '@atlaskit/icon/core/customize';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
@@ -579,7 +579,7 @@ const getAlignmentOptionsConfig = (editorState, {
   const alignmentIcons = [{
     id: 'editor.table.alignLeft',
     value: 'align-start',
-    icon: () => jsx(ContentAlignLeftIcon, {
+    icon: () => jsx(AlignImageLeftIcon, {
       color: "currentColor",
       spacing: "spacious",
       label: "table-align-start-icon",
@@ -588,7 +588,7 @@ const getAlignmentOptionsConfig = (editorState, {
   }, {
     id: 'editor.table.alignCenter',
     value: 'center',
-    icon: () => jsx(ContentAlignCenterIcon, {
+    icon: () => jsx(AlignImageCenterIcon, {
       color: "currentColor",
       spacing: "spacious",
       label: "table-align-center-icon",

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -23,11 +23,13 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     forwardRef = _ref.forwardRef,
     allowTableAlignment = _ref.allowTableAlignment,
     allowTableResizing = _ref.allowTableResizing;
-  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection']),
+  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     tableState = _useSharedPluginState.tableState,
     mediaState = _useSharedPluginState.mediaState,
-    selectionState = _useSharedPluginState.selectionState;
+    selectionState = _useSharedPluginState.selectionState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   if (!tableState) {
     return null;
   }
@@ -67,7 +69,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     allowControls: allowControls,
     isHeaderRowEnabled: isHeaderRowEnabled,
     isHeaderColumnEnabled: isHeaderColumnEnabled,
-    isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
+    isDragAndDropEnabled: (options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled) && !isLivePageViewMode,
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
     allowTableAlignment: allowTableAlignment,
     allowTableResizing: allowTableResizing,

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

@@ -8,6 +8,7 @@ import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/u
 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';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, setTableHovered, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from '../pm-plugins/commands';
 import { getPluginState as getDragDropPluginState } from '../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -148,8 +149,14 @@ export var handleMouseOver = function handleMouseOver(view, mouseEvent) {
     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);
+    if (fg('platform_editor_nested_tables_resize_border_fix')) {
+      if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId) && (isCell(target) || isCornerButton(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
+        return hideInsertColumnOrRowButton()(state, dispatch);
+      }
+    } else {
+      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);

package/dist/esm/ui/toolbar.js

@@ -21,8 +21,8 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType, splitCell } from '@atlaskit/editor-tables/utils';
-import ContentAlignCenterIcon from '@atlaskit/icon/core/content-align-center';
-import ContentAlignLeftIcon from '@atlaskit/icon/core/content-align-left';
+import AlignImageCenterIcon from '@atlaskit/icon/core/align-image-center';
+import AlignImageLeftIcon from '@atlaskit/icon/core/align-image-left';
 import CustomizeIcon from '@atlaskit/icon/core/customize';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
@@ -617,7 +617,7 @@ var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState,
     id: 'editor.table.alignLeft',
     value: 'align-start',
     icon: function icon() {
-      return jsx(ContentAlignLeftIcon, {
+      return jsx(AlignImageLeftIcon, {
         color: "currentColor",
         spacing: "spacious",
         label: "table-align-start-icon",
@@ -628,7 +628,7 @@ var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState,
     id: 'editor.table.alignCenter',
     value: 'center',
     icon: function icon() {
-      return jsx(ContentAlignCenterIcon, {
+      return jsx(AlignImageCenterIcon, {
         color: "currentColor",
         spacing: "spacious",
         label: "table-align-center-icon",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "9.5.10",
+	"version": "10.1.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,33 +28,33 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.2.1",
-		"@atlaskit/button": "^20.5.0",
+		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/custom-steps": "^0.10.0",
-		"@atlaskit/editor-common": "^99.18.0",
-		"@atlaskit/editor-palette": "1.7.0",
-		"@atlaskit/editor-plugin-accessibility-utils": "^1.4.0",
-		"@atlaskit/editor-plugin-analytics": "^1.12.0",
-		"@atlaskit/editor-plugin-batch-attribute-updates": "1.3.1",
-		"@atlaskit/editor-plugin-content-insertion": "^1.13.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^2.2.0",
-		"@atlaskit/editor-plugin-guideline": "^1.4.0",
-		"@atlaskit/editor-plugin-selection": "^1.8.0",
-		"@atlaskit/editor-plugin-width": "^2.1.0",
+		"@atlaskit/editor-common": "^100.1.0",
+		"@atlaskit/editor-palette": "2.0.0",
+		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
+		"@atlaskit/editor-plugin-analytics": "^2.0.0",
+		"@atlaskit/editor-plugin-batch-attribute-updates": "2.0.0",
+		"@atlaskit/editor-plugin-content-insertion": "^2.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
+		"@atlaskit/editor-plugin-guideline": "^2.0.0",
+		"@atlaskit/editor-plugin-selection": "^2.0.0",
+		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.3.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^23.10.0",
-		"@atlaskit/menu": "^2.14.0",
+		"@atlaskit/icon": "^24.0.0",
+		"@atlaskit/menu": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-		"@atlaskit/primitives": "^13.6.0",
-		"@atlaskit/theme": "^16.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.47.0",
-		"@atlaskit/toggle": "^14.2.0",
-		"@atlaskit/tokens": "^3.3.0",
-		"@atlaskit/tooltip": "^19.2.0",
+		"@atlaskit/primitives": "^14.0.0",
+		"@atlaskit/theme": "^17.0.0",
+		"@atlaskit/tmp-editor-statsig": "^3.1.0",
+		"@atlaskit/toggle": "^15.0.0",
+		"@atlaskit/tokens": "^4.1.0",
+		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"classnames": "^2.2.5",
@@ -64,8 +64,8 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0 || ^17.0.0 || ~18.2.0",
-		"react-dom": "^16.8.0 || ^17.0.0 || ~18.2.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {
@@ -167,6 +167,9 @@
 		},
 		"platform_editor_nested_tables_bodied_extension_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_nested_tables_resize_border_fix": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -51,12 +51,10 @@ export const TableComponentWithSharedState = ({
 	allowTableAlignment,
 	allowTableResizing,
 }: TableComponentWithSharedStateProps) => {
-	const { widthState, tableState, mediaState, selectionState } = useSharedPluginState(api, [
-		'width',
-		'table',
-		'media',
-		'selection',
-	]);
+	const { widthState, tableState, mediaState, selectionState, editorViewModeState } =
+		useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']);
+
+	const isLivePageViewMode = editorViewModeState?.mode === 'view';
 
 	if (!tableState) {
 		return null;
@@ -108,7 +106,7 @@ export const TableComponentWithSharedState = ({
 			allowControls={allowControls}
 			isHeaderRowEnabled={isHeaderRowEnabled}
 			isHeaderColumnEnabled={isHeaderColumnEnabled}
-			isDragAndDropEnabled={options?.isDragAndDropEnabled}
+			isDragAndDropEnabled={options?.isDragAndDropEnabled && !isLivePageViewMode}
 			isTableScalingEnabled={options?.isTableScalingEnabled}
 			allowTableAlignment={allowTableAlignment}
 			allowTableResizing={allowTableResizing}

package/src/ui/event-handlers.ts

@@ -25,6 +25,7 @@ import {
 	getSelectionRect,
 	removeTable,
 } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import {
 	addResizeHandleDecorations,
@@ -239,8 +240,18 @@ export const handleMouseOver = (view: EditorView, mouseEvent: Event): boolean =>
 			state.schema.nodes.table,
 		]);
 
-		if (nearestTable?.dataset.tableLocalId !== parentTable?.node.attrs.localId) {
-			return hideInsertColumnOrRowButton()(state, dispatch);
+		if (fg('platform_editor_nested_tables_resize_border_fix')) {
+			if (
+				nearestTable?.dataset.tableLocalId !== parentTable?.node.attrs.localId &&
+				(isCell(target) || isCornerButton(target)) &&
+				(typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')
+			) {
+				return hideInsertColumnOrRowButton()(state, dispatch);
+			}
+		} else {
+			if (nearestTable?.dataset.tableLocalId !== parentTable?.node.attrs.localId) {
+				return hideInsertColumnOrRowButton()(state, dispatch);
+			}
 		}
 	} else if (
 		(isCell(target) || isCornerButton(target)) &&

package/src/ui/toolbar.tsx

@@ -46,8 +46,8 @@ import {
 	isSelectionType,
 	splitCell,
 } from '@atlaskit/editor-tables/utils';
-import ContentAlignCenterIcon from '@atlaskit/icon/core/content-align-center';
-import ContentAlignLeftIcon from '@atlaskit/icon/core/content-align-left';
+import AlignImageCenterIcon from '@atlaskit/icon/core/align-image-center';
+import AlignImageLeftIcon from '@atlaskit/icon/core/align-image-left';
 import CustomizeIcon from '@atlaskit/icon/core/customize';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
@@ -901,7 +901,7 @@ const getAlignmentOptionsConfig = (
 			id: 'editor.table.alignLeft',
 			value: 'align-start',
 			icon: () => (
-				<ContentAlignLeftIcon
+				<AlignImageLeftIcon
 					color="currentColor"
 					spacing="spacious"
 					label="table-align-start-icon"
@@ -913,7 +913,7 @@ const getAlignmentOptionsConfig = (
 			id: 'editor.table.alignCenter',
 			value: 'center',
 			icon: () => (
-				<ContentAlignCenterIcon
+				<AlignImageCenterIcon
 					color="currentColor"
 					spacing="spacious"
 					label="table-align-center-icon"