@atlaskit/editor-plugin-table 7.25.22 → 7.25.23

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.25.23
+
+### Patch Changes
+
+- [#139279](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139279)
+  [`70db87daa2f22`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/70db87daa2f22) -
+  [ux] Fix for column resizing for table that were resized to full-width in comment editor.
+
 ## 7.25.22
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -636,7 +636,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
       }
-      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
         this.removeInlineTableWidth();
       }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {

package/dist/cjs/nodeviews/TableResizer.js

@@ -294,6 +294,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     var _node$attrs$localId2, _node$attrs2;
     isResizing.current = false;
     var newWidth = originalState.width + delta.width;
+    var originalNewWidth = newWidth;
     var state = editorView.state,
       dispatch = editorView.dispatch;
     var pos = getPos();
@@ -329,7 +330,10 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
         node: newNode,
         prevNode: node,
         start: pos + 1,
-        parentWidth: newWidth
+        // We use originalNewWidth in comment editor, because in comment editor
+        // newWidth can be underined when table is resized to 'full-width'
+        // scaleTable function needs number value to work correctly.
+        parentWidth: isCommentEditor ? originalNewWidth : newWidth
       }, editorView.domAtPos.bind(editorView), pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent || false, isCommentEditor)(tr);
       var scaledNode = tr.doc.nodeAt(pos);
       (_attachAnalyticsEvent2 = attachAnalyticsEvent((0, _analytics2.generateResizedPayload)({

package/dist/cjs/pm-plugins/table-resizing/event-handlers.js

@@ -307,7 +307,6 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     } else {
       var _table$attrs2;
       var scalePercent = isTableScalingEnabled && isCommentEditor && !((_table$attrs2 = table.attrs) !== null && _table$attrs2 !== void 0 && _table$attrs2.width) ? (0, _misc2.getScalingPercentForTableWithoutWidth)(table, dom) : (0, _misc2.getTableScalingPercent)(originalTable, dom, shouldUseIncreasedScalingPercent);
-      // This function is called for Full-page/Fixed-page tables and table that have width attr value in Comment editor
       (0, _utils3.resizeColumn)(resizeState, colIndex, resizedDelta, dom, table, undefined, shouldScale, scalePercent);
     }
     (0, _utils3.updateControls)()(state);

package/dist/es2019/nodeviews/TableComponent.js

@@ -616,7 +616,7 @@ class TableComponent extends React.Component {
     if (isInDanger && !table) {
       clearHoverSelection()(view.state, view.dispatch);
     }
-    if ((_this$props$options11 = this.props.options) !== null && _this$props$options11 !== void 0 && _this$props$options11.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+    if ((_this$props$options11 = this.props.options) !== null && _this$props$options11 !== void 0 && _this$props$options11.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
       this.removeInlineTableWidth();
     }
     if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {

package/dist/es2019/nodeviews/TableResizer.js

@@ -287,6 +287,7 @@ export const TableResizer = ({
     var _node$attrs$localId2, _node$attrs2;
     isResizing.current = false;
     let newWidth = originalState.width + delta.width;
+    const originalNewWidth = newWidth;
     const {
       state,
       dispatch
@@ -325,7 +326,10 @@ export const TableResizer = ({
         node: newNode,
         prevNode: node,
         start: pos + 1,
-        parentWidth: newWidth
+        // We use originalNewWidth in comment editor, because in comment editor
+        // newWidth can be underined when table is resized to 'full-width'
+        // scaleTable function needs number value to work correctly.
+        parentWidth: isCommentEditor ? originalNewWidth : newWidth
       }, editorView.domAtPos.bind(editorView), pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent || false, isCommentEditor)(tr);
       const scaledNode = tr.doc.nodeAt(pos);
       (_attachAnalyticsEvent2 = attachAnalyticsEvent(generateResizedPayload({

package/dist/es2019/pm-plugins/table-resizing/event-handlers.js

@@ -318,7 +318,6 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     } else {
       var _table$attrs2;
       const scalePercent = isTableScalingEnabled && isCommentEditor && !((_table$attrs2 = table.attrs) !== null && _table$attrs2 !== void 0 && _table$attrs2.width) ? getScalingPercentForTableWithoutWidth(table, dom) : getTableScalingPercent(originalTable, dom, shouldUseIncreasedScalingPercent);
-      // This function is called for Full-page/Fixed-page tables and table that have width attr value in Comment editor
       resizeColumn(resizeState, colIndex, resizedDelta, dom, table, undefined, shouldScale, scalePercent);
     }
     updateControls()(state);

package/dist/esm/nodeviews/TableComponent.js

@@ -629,7 +629,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         clearHoverSelection()(view.state, view.dispatch);
       }
-      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
         this.removeInlineTableWidth();
       }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {

package/dist/esm/nodeviews/TableResizer.js

@@ -284,6 +284,7 @@ export var TableResizer = function TableResizer(_ref) {
     var _node$attrs$localId2, _node$attrs2;
     isResizing.current = false;
     var newWidth = originalState.width + delta.width;
+    var originalNewWidth = newWidth;
     var state = editorView.state,
       dispatch = editorView.dispatch;
     var pos = getPos();
@@ -319,7 +320,10 @@ export var TableResizer = function TableResizer(_ref) {
         node: newNode,
         prevNode: node,
         start: pos + 1,
-        parentWidth: newWidth
+        // We use originalNewWidth in comment editor, because in comment editor
+        // newWidth can be underined when table is resized to 'full-width'
+        // scaleTable function needs number value to work correctly.
+        parentWidth: isCommentEditor ? originalNewWidth : newWidth
       }, editorView.domAtPos.bind(editorView), pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent || false, isCommentEditor)(tr);
       var scaledNode = tr.doc.nodeAt(pos);
       (_attachAnalyticsEvent2 = attachAnalyticsEvent(generateResizedPayload({

package/dist/esm/pm-plugins/table-resizing/event-handlers.js

@@ -300,7 +300,6 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     } else {
       var _table$attrs2;
       var scalePercent = isTableScalingEnabled && isCommentEditor && !((_table$attrs2 = table.attrs) !== null && _table$attrs2 !== void 0 && _table$attrs2.width) ? getScalingPercentForTableWithoutWidth(table, dom) : getTableScalingPercent(originalTable, dom, shouldUseIncreasedScalingPercent);
-      // This function is called for Full-page/Fixed-page tables and table that have width attr value in Comment editor
       resizeColumn(resizeState, colIndex, resizedDelta, dom, table, undefined, shouldScale, scalePercent);
     }
     updateControls()(state);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.25.22",
+	"version": "7.25.23",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"

package/src/nodeviews/TableComponent.tsx

@@ -575,7 +575,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			clearHoverSelection()(view.state, view.dispatch);
 		}
 
-		if (this.props.options?.isCommentEditor && options?.isTableResizingEnabled) {
+		if (
+			this.props.options?.isCommentEditor &&
+			options?.isTableResizingEnabled &&
+			!options?.isTableScalingEnabled
+		) {
 			this.removeInlineTableWidth();
 		}
 

package/src/nodeviews/TableResizer.tsx

@@ -540,6 +540,7 @@ export const TableResizer = ({
 		(originalState, delta) => {
 			isResizing.current = false;
 			let newWidth: number | undefined = originalState.width + delta.width;
+			const originalNewWidth = newWidth;
 			const { state, dispatch } = editorView;
 			const pos = getPos();
 			const currentTableNodeLocalId = node?.attrs?.localId ?? '';
@@ -585,7 +586,10 @@ export const TableResizer = ({
 						node: newNode,
 						prevNode: node,
 						start: pos + 1,
-						parentWidth: newWidth,
+						// We use originalNewWidth in comment editor, because in comment editor
+						// newWidth can be underined when table is resized to 'full-width'
+						// scaleTable function needs number value to work correctly.
+						parentWidth: isCommentEditor ? originalNewWidth : newWidth,
 					},
 					editorView.domAtPos.bind(editorView),
 					pluginInjectionApi,

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -397,7 +397,7 @@ export const handleMouseDown = (
 				isTableScalingEnabled && isCommentEditor && !table.attrs?.width
 					? getScalingPercentForTableWithoutWidth(table, dom)
 					: getTableScalingPercent(originalTable, dom, shouldUseIncreasedScalingPercent);
-			// This function is called for Full-page/Fixed-page tables and table that have width attr value in Comment editor
+
 			resizeColumn(
 				resizeState,
 				colIndex,