@atlaskit/editor-plugin-table 9.5.9 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/editor-plugin-table
 
+## 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
+
+- [#116555](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116555)
+  [`ee0cb1bc42e39`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ee0cb1bc42e39) -
+  [ux] ED-26663 Bugfix for a regression introduced by nested tables - when nested table nodes are
+  enabled but the nested table experiment is disabled, copying table content inside a bodied
+  extension and pasting it in the table results in the content being pasted under the table and
+  wrapped in a table
+
 ## 9.5.9
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -193,11 +193,21 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         // This needs to go before `transformSliceToRemoveOpenTable`
         slice = (0, _transforms.transformSliceToRemoveOpenExpand)(slice, schema);
 
-        /** If a partial paste of table, paste only table's content */
-        slice = (0, _paste.transformSliceToRemoveOpenTable)(slice, schema);
+        // transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
+        // Bodied extensions will contribute to the depth of the table selection so we need to remove them first
+        if ((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_bodied_extension_fix')) {
+          /** If a partial paste of bodied extension, paste only text */
+          slice = (0, _transforms.transformSliceToRemoveOpenBodiedExtension)(slice, schema);
 
-        /** If a partial paste of bodied extension, paste only text */
-        slice = (0, _transforms.transformSliceToRemoveOpenBodiedExtension)(slice, schema);
+          /** If a partial paste of table, paste only table's content */
+          slice = (0, _paste.transformSliceToRemoveOpenTable)(slice, schema);
+        } else {
+          /** If a partial paste of table, paste only table's content */
+          slice = (0, _paste.transformSliceToRemoveOpenTable)(slice, schema);
+
+          /** If a partial paste of bodied extension, paste only text */
+          slice = (0, _transforms.transformSliceToRemoveOpenBodiedExtension)(slice, schema);
+        }
 
         /** If a partial paste of multi bodied extension, paste only children */
         slice = (0, _transforms.transformSliceToRemoveOpenMultiBodiedExtension)(slice, schema);

package/dist/cjs/pm-plugins/utils/paste.js

@@ -195,8 +195,8 @@ var containsNonTableBlockChildren = function containsNonTableBlockChildren(fragm
 var transformSliceToRemoveOpenTable = exports.transformSliceToRemoveOpenTable = function transformSliceToRemoveOpenTable(slice, schema) {
   var _slice$content$firstC4;
   if ((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_paste_wrap_fix')) {
-    // Case 1: A slice of a textblock selection inside a nested table
-    // Prosemirror wraps nested textblock selections in their respective tables
+    // Case 1: A slice of a block selection inside a nested table
+    // Prosemirror wraps nested block selections in their respective tables
     // We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
 
     // slice starts and ends inside a nested table at the same depth
@@ -208,7 +208,7 @@ var transformSliceToRemoveOpenTable = exports.transformSliceToRemoveOpenTable =
       // if the slice is a single cell table and contains cells with single cell tables, descend into it until we find textblock children
       if (isFragmentSingleCellTable(slice.content, schema)) {
         var _slice$content$firstC2;
-        (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 || _slice$content$firstC2.descendants(function (node, _pos, parent) {
+        (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 || _slice$content$firstC2.descendants(function (node) {
           if (isNodeSingleCellTable(node, schema)) {
             descendedDepth += tableDepthDecrement;
           } else if (node.type === schema.nodes.table) {

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/pm-plugins/main.js

@@ -185,11 +185,21 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         // This needs to go before `transformSliceToRemoveOpenTable`
         slice = transformSliceToRemoveOpenExpand(slice, schema);
 
-        /** If a partial paste of table, paste only table's content */
-        slice = transformSliceToRemoveOpenTable(slice, schema);
+        // transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
+        // Bodied extensions will contribute to the depth of the table selection so we need to remove them first
+        if (fg('platform_editor_nested_tables_bodied_extension_fix')) {
+          /** If a partial paste of bodied extension, paste only text */
+          slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
 
-        /** If a partial paste of bodied extension, paste only text */
-        slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+          /** If a partial paste of table, paste only table's content */
+          slice = transformSliceToRemoveOpenTable(slice, schema);
+        } else {
+          /** If a partial paste of table, paste only table's content */
+          slice = transformSliceToRemoveOpenTable(slice, schema);
+
+          /** If a partial paste of bodied extension, paste only text */
+          slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+        }
 
         /** If a partial paste of multi bodied extension, paste only children */
         slice = transformSliceToRemoveOpenMultiBodiedExtension(slice, schema);

package/dist/es2019/pm-plugins/utils/paste.js

@@ -187,8 +187,8 @@ const containsNonTableBlockChildren = (fragment, schema) => {
 export const transformSliceToRemoveOpenTable = (slice, schema) => {
   var _slice$content$firstC8;
   if (fg('platform_editor_nested_tables_paste_wrap_fix')) {
-    // Case 1: A slice of a textblock selection inside a nested table
-    // Prosemirror wraps nested textblock selections in their respective tables
+    // Case 1: A slice of a block selection inside a nested table
+    // Prosemirror wraps nested block selections in their respective tables
     // We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
 
     // slice starts and ends inside a nested table at the same depth
@@ -200,7 +200,7 @@ export const transformSliceToRemoveOpenTable = (slice, schema) => {
       // if the slice is a single cell table and contains cells with single cell tables, descend into it until we find textblock children
       if (isFragmentSingleCellTable(slice.content, schema)) {
         var _slice$content$firstC2;
-        (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.descendants((node, _pos, parent) => {
+        (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.descendants(node => {
           if (isNodeSingleCellTable(node, schema)) {
             descendedDepth += tableDepthDecrement;
           } else if (node.type === schema.nodes.table) {

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/pm-plugins/main.js

@@ -186,11 +186,21 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         // This needs to go before `transformSliceToRemoveOpenTable`
         slice = transformSliceToRemoveOpenExpand(slice, schema);
 
-        /** If a partial paste of table, paste only table's content */
-        slice = transformSliceToRemoveOpenTable(slice, schema);
+        // transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
+        // Bodied extensions will contribute to the depth of the table selection so we need to remove them first
+        if (fg('platform_editor_nested_tables_bodied_extension_fix')) {
+          /** If a partial paste of bodied extension, paste only text */
+          slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
 
-        /** If a partial paste of bodied extension, paste only text */
-        slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+          /** If a partial paste of table, paste only table's content */
+          slice = transformSliceToRemoveOpenTable(slice, schema);
+        } else {
+          /** If a partial paste of table, paste only table's content */
+          slice = transformSliceToRemoveOpenTable(slice, schema);
+
+          /** If a partial paste of bodied extension, paste only text */
+          slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+        }
 
         /** If a partial paste of multi bodied extension, paste only children */
         slice = transformSliceToRemoveOpenMultiBodiedExtension(slice, schema);

package/dist/esm/pm-plugins/utils/paste.js

@@ -188,8 +188,8 @@ var containsNonTableBlockChildren = function containsNonTableBlockChildren(fragm
 export var transformSliceToRemoveOpenTable = function transformSliceToRemoveOpenTable(slice, schema) {
   var _slice$content$firstC4;
   if (fg('platform_editor_nested_tables_paste_wrap_fix')) {
-    // Case 1: A slice of a textblock selection inside a nested table
-    // Prosemirror wraps nested textblock selections in their respective tables
+    // Case 1: A slice of a block selection inside a nested table
+    // Prosemirror wraps nested block selections in their respective tables
     // We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
 
     // slice starts and ends inside a nested table at the same depth
@@ -201,7 +201,7 @@ export var transformSliceToRemoveOpenTable = function transformSliceToRemoveOpen
       // if the slice is a single cell table and contains cells with single cell tables, descend into it until we find textblock children
       if (isFragmentSingleCellTable(slice.content, schema)) {
         var _slice$content$firstC2;
-        (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 || _slice$content$firstC2.descendants(function (node, _pos, parent) {
+        (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 || _slice$content$firstC2.descendants(function (node) {
           if (isNodeSingleCellTable(node, schema)) {
             descendedDepth += tableDepthDecrement;
           } else if (node.type === schema.nodes.table) {

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.9",
+	"version": "10.0.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.0.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.0.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.0.0",
+		"@atlaskit/toggle": "^15.0.0",
+		"@atlaskit/tokens": "^4.0.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": {
@@ -164,6 +164,9 @@
 		},
 		"platform_editor_react18_stickyheaders_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_nested_tables_bodied_extension_fix": {
+			"type": "boolean"
 		}
 	}
 }

package/src/pm-plugins/main.ts

@@ -287,11 +287,21 @@ export const createPlugin = (
 				// This needs to go before `transformSliceToRemoveOpenTable`
 				slice = transformSliceToRemoveOpenExpand(slice, schema);
 
-				/** If a partial paste of table, paste only table's content */
-				slice = transformSliceToRemoveOpenTable(slice, schema);
-
-				/** If a partial paste of bodied extension, paste only text */
-				slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+				// transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
+				// Bodied extensions will contribute to the depth of the table selection so we need to remove them first
+				if (fg('platform_editor_nested_tables_bodied_extension_fix')) {
+					/** If a partial paste of bodied extension, paste only text */
+					slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+
+					/** If a partial paste of table, paste only table's content */
+					slice = transformSliceToRemoveOpenTable(slice, schema);
+				} else {
+					/** If a partial paste of table, paste only table's content */
+					slice = transformSliceToRemoveOpenTable(slice, schema);
+
+					/** If a partial paste of bodied extension, paste only text */
+					slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+				}
 
 				/** If a partial paste of multi bodied extension, paste only children */
 				slice = transformSliceToRemoveOpenMultiBodiedExtension(slice, schema);

package/src/pm-plugins/utils/paste.ts

@@ -244,8 +244,8 @@ const containsNonTableBlockChildren = (fragment: Fragment, schema: Schema): bool
 
 export const transformSliceToRemoveOpenTable = (slice: Slice, schema: Schema): Slice => {
 	if (fg('platform_editor_nested_tables_paste_wrap_fix')) {
-		// Case 1: A slice of a textblock selection inside a nested table
-		// Prosemirror wraps nested textblock selections in their respective tables
+		// Case 1: A slice of a block selection inside a nested table
+		// Prosemirror wraps nested block selections in their respective tables
 		// We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
 
 		// slice starts and ends inside a nested table at the same depth
@@ -256,7 +256,7 @@ export const transformSliceToRemoveOpenTable = (slice: Slice, schema: Schema): S
 
 			// if the slice is a single cell table and contains cells with single cell tables, descend into it until we find textblock children
 			if (isFragmentSingleCellTable(slice.content, schema)) {
-				slice.content.firstChild?.descendants((node, _pos, parent) => {
+				slice.content.firstChild?.descendants((node) => {
 					if (isNodeSingleCellTable(node, schema)) {
 						descendedDepth += tableDepthDecrement;
 					} else if (node.type === schema.nodes.table) {

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"