@atlaskit/editor-plugin-table 8.2.0 → 8.2.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 8.2.2
+
+### Patch Changes
+
+- [#170442](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/170442)
+  [`14b1ff1b28958`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/14b1ff1b28958) -
+  ED-25803 Update to not pass mountPoint into dropdown menu popup so that dropdown menu will be
+  nested inside DragMenu pop up
+
+## 8.2.1
+
+### Patch Changes
+
+- [#169304](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169304)
+  [`305b55f6ac586`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/305b55f6ac586) -
+  Set alignment to center for tables during resizing, this fixes issues with tables in comment
+  editor where the width attribute defaults to inherit even if a table has been resized
+
 ## 8.2.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/TableResizer.js

@@ -22,6 +22,7 @@ var _resizer = require("@atlaskit/editor-common/resizer");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commandsWithAnalytics = require("../commands-with-analytics");
 var _misc = require("../commands/misc");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
@@ -322,9 +323,16 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     }
     if (typeof pos === 'number') {
       var _attachAnalyticsEvent2;
-      tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
-        width: newWidth
-      }));
+      if ((0, _platformFeatureFlags.fg)('platform_editor_set_alignment_when_resized')) {
+        tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+          width: newWidth,
+          layout: node.attrs.layout !== _alignment.ALIGN_START && node.attrs.layout !== _alignment.ALIGN_CENTER ? _alignment.ALIGN_CENTER : node.attrs.layout
+        }));
+      } else {
+        tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+          width: newWidth
+        }));
+      }
       var newNode = tr.doc.nodeAt(pos);
       tr = (0, _utils2.scaleTable)(tableRef, {
         node: newNode,
@@ -363,7 +371,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
+  }, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, attachAnalyticsEvent, tableRef, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
   var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -23,6 +23,7 @@ var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _paintBucketEditorBackgroundColor = _interopRequireDefault(require("@atlaskit/icon/core/migration/paint-bucket--editor-background-color"));
 var _paintBucket = _interopRequireDefault(require("@atlaskit/icon/core/paint-bucket"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
 var _commands = require("../../commands");
@@ -506,7 +507,7 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
     fitHeight: fitHeight,
     fitWidth: fitWidth,
     direction: direction,
-    mountPoint: mountPoint,
+    mountPoint: (0, _platformFeatureFlags.fg)('platform_editor_table_drag_menu_mount_point_fix') ? undefined : mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement
   });

package/dist/es2019/nodeviews/TableResizer.js

@@ -12,6 +12,7 @@ import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
 import { updateWidthToWidest } from '../commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -317,10 +318,18 @@ export const TableResizer = ({
     }
     if (typeof pos === 'number') {
       var _attachAnalyticsEvent2;
-      tr = tr.setNodeMarkup(pos, undefined, {
-        ...node.attrs,
-        width: newWidth
-      });
+      if (fg('platform_editor_set_alignment_when_resized')) {
+        tr = tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          width: newWidth,
+          layout: node.attrs.layout !== ALIGN_START && node.attrs.layout !== ALIGN_CENTER ? ALIGN_CENTER : node.attrs.layout
+        });
+      } else {
+        tr = tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          width: newWidth
+        });
+      }
       const newNode = tr.doc.nodeAt(pos);
       tr = scaleTable(tableRef, {
         node: newNode,
@@ -359,7 +368,7 @@ export const TableResizer = ({
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
+  }, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, attachAnalyticsEvent, tableRef, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -21,6 +21,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import EditorBackgroundColorIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
 import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import Toggle from '@atlaskit/toggle';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
@@ -505,7 +506,7 @@ const DragMenu = /*#__PURE__*/React.memo(({
     fitHeight: fitHeight,
     fitWidth: fitWidth,
     direction: direction,
-    mountPoint: mountPoint,
+    mountPoint: fg('platform_editor_table_drag_menu_mount_point_fix') ? undefined : mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement
   });

package/dist/esm/nodeviews/TableResizer.js

@@ -16,6 +16,7 @@ import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
 import { updateWidthToWidest } from '../commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -312,9 +313,16 @@ export var TableResizer = function TableResizer(_ref) {
     }
     if (typeof pos === 'number') {
       var _attachAnalyticsEvent2;
-      tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
-        width: newWidth
-      }));
+      if (fg('platform_editor_set_alignment_when_resized')) {
+        tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+          width: newWidth,
+          layout: node.attrs.layout !== ALIGN_START && node.attrs.layout !== ALIGN_CENTER ? ALIGN_CENTER : node.attrs.layout
+        }));
+      } else {
+        tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+          width: newWidth
+        }));
+      }
       var newNode = tr.doc.nodeAt(pos);
       tr = scaleTable(tableRef, {
         node: newNode,
@@ -353,7 +361,7 @@ export var TableResizer = function TableResizer(_ref) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
+  }, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, attachAnalyticsEvent, tableRef, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
   var handleTableSizeChangeOnKeypress = useCallback(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/esm/ui/FloatingDragMenu/DragMenu.js

@@ -23,6 +23,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import EditorBackgroundColorIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
 import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import Toggle from '@atlaskit/toggle';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
@@ -495,7 +496,7 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     fitHeight: fitHeight,
     fitWidth: fitWidth,
     direction: direction,
-    mountPoint: mountPoint,
+    mountPoint: fg('platform_editor_table_drag_menu_mount_point_fix') ? undefined : mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "8.2.0",
+	"version": "8.2.2",
 	"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": "^95.8.0",
+		"@atlaskit/editor-common": "^95.10.0",
 		"@atlaskit/editor-palette": "1.6.3",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
@@ -40,10 +40,10 @@
 		"@atlaskit/editor-plugin-guideline": "^1.2.0",
 		"@atlaskit/editor-plugin-selection": "^1.5.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
-		"@atlaskit/editor-prosemirror": "6.0.0",
+		"@atlaskit/editor-prosemirror": "6.2.1",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.26.0",
+		"@atlaskit/icon": "^22.28.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.21.0",
 		"@atlaskit/toggle": "^13.4.0",
-		"@atlaskit/tokens": "^2.3.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -124,6 +124,12 @@
 		},
 		"platform_editor_use_nested_table_pm_nodes": {
 			"type": "boolean"
+		},
+		"platform_editor_set_alignment_when_resized": {
+			"type": "boolean"
+		},
+		"platform_editor_table_drag_menu_mount_point_fix": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableResizer.tsx

@@ -25,6 +25,7 @@ import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/stat
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { token } from '@atlaskit/tokens';
 
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
@@ -574,10 +575,21 @@ export const TableResizer = ({
 			}
 
 			if (typeof pos === 'number') {
-				tr = tr.setNodeMarkup(pos, undefined, {
-					...node.attrs,
-					width: newWidth,
-				});
+				if (fg('platform_editor_set_alignment_when_resized')) {
+					tr = tr.setNodeMarkup(pos, undefined, {
+						...node.attrs,
+						width: newWidth,
+						layout:
+							node.attrs.layout !== ALIGN_START && node.attrs.layout !== ALIGN_CENTER
+								? ALIGN_CENTER
+								: node.attrs.layout,
+					});
+				} else {
+					tr = tr.setNodeMarkup(pos, undefined, {
+						...node.attrs,
+						width: newWidth,
+					});
+				}
 
 				const newNode = tr.doc.nodeAt(pos)!;
 				tr = scaleTable(
@@ -636,23 +648,23 @@ export const TableResizer = ({
 			return newWidth;
 		},
 		[
-			displayGapCursor,
-			updateWidth,
 			editorView,
 			getPos,
 			node,
-			tableRef,
-			scheduleResize,
-			displayGuideline,
-			attachAnalyticsEvent,
+			isCommentEditor,
+			widthToWidest,
 			endMeasure,
+			displayGapCursor,
+			displayGuideline,
+			updateWidth,
+			scheduleResize,
 			onResizeStop,
+			attachAnalyticsEvent,
+			tableRef,
+			pluginInjectionApi,
 			isTableScalingEnabled,
 			shouldUseIncreasedScalingPercent,
-			widthToWidest,
 			formatMessage,
-			pluginInjectionApi,
-			isCommentEditor,
 		],
 	);
 

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -43,6 +43,7 @@ import {
 } from '@atlaskit/editor-tables/utils';
 import EditorBackgroundColorIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
 import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import Toggle from '@atlaskit/toggle';
 
@@ -628,7 +629,7 @@ const DragMenu = React.memo(
 				fitHeight={fitHeight}
 				fitWidth={fitWidth}
 				direction={direction}
-				mountPoint={mountPoint}
+				mountPoint={fg('platform_editor_table_drag_menu_mount_point_fix') ? undefined : mountPoint}
 				boundariesElement={boundariesElement}
 				scrollableElement={scrollableElement}
 			/>