@atlaskit/editor-plugin-table 7.16.13 → 7.16.14

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-table
 
+## 7.16.14
+
+### Patch Changes
+
+- [#107290](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107290)
+  [`9b3d2881e8d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9b3d2881e8d5) -
+  Set table width when alignment changes if not set, as layout attribute can be used to determine
+  width
+
 ## 7.16.13
 
 ### Patch Changes

package/dist/cjs/commands/misc.js

@@ -8,6 +8,7 @@ exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.tr
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
@@ -597,6 +598,13 @@ var setTableAlignment = exports.setTableAlignment = function setTableAlignment(n
     var nextTableAttrs = _objectSpread(_objectSpread({}, tableObject.node.attrs), {}, {
       layout: newAlignment
     });
+
+    // table uses old breakout values in layout attribute to determine width
+    // but that information is lost when alignment changes, so we need to ensure we retain that info
+    if (!tableObject.node.attrs.width) {
+      var tableWidth = (0, _nodeWidth.getTableContainerWidth)(tableObject.node);
+      nextTableAttrs.width = tableWidth;
+    }
     tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
     return tr;
   };
@@ -604,9 +612,17 @@ var setTableAlignment = exports.setTableAlignment = function setTableAlignment(n
 var setTableAlignmentWithTableContentWithPos = exports.setTableAlignmentWithTableContentWithPos = function setTableAlignmentWithTableContentWithPos(newAlignment, tableNodeWithPos) {
   return function (_ref3) {
     var tr = _ref3.tr;
-    var nextTableAttrs = _objectSpread(_objectSpread({}, tableNodeWithPos.node.attrs), {}, {
+    var table = tableNodeWithPos.node;
+    var nextTableAttrs = _objectSpread(_objectSpread({}, table.attrs), {}, {
       layout: newAlignment
     });
+
+    // table uses old breakout values in layout attribute to determine width
+    // but that information is lost when alignment changes, so we need to ensure we retain that info
+    if (!table.attrs.width) {
+      var tableWidth = (0, _nodeWidth.getTableContainerWidth)(table);
+      nextTableAttrs.width = tableWidth;
+    }
     tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
     return tr;
   };

package/dist/cjs/toolbar.js

@@ -14,6 +14,7 @@ var _customSteps = require("@atlaskit/custom-steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -661,7 +662,8 @@ var getSelectedAlignmentIcon = exports.getSelectedAlignmentIcon = function getSe
 };
 var isLayoutOptionDisabled = exports.isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth) {
   var lineLength = getEditorContainerWidth().lineLength;
-  if (selectedNode && lineLength && selectedNode.attrs.width > lineLength) {
+  var tableWidth = (0, _nodeWidth.getTableContainerWidth)(selectedNode);
+  if (selectedNode && lineLength && tableWidth > lineLength) {
     return true;
   }
   return false;

package/dist/es2019/commands/misc.js

@@ -1,4 +1,5 @@
 import isEqual from 'lodash/isEqual';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { closestElement, isParagraph, isTextSelection, mapSlice } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -561,16 +562,31 @@ export const setTableAlignment = newAlignment => ({
     ...tableObject.node.attrs,
     layout: newAlignment
   };
+
+  // table uses old breakout values in layout attribute to determine width
+  // but that information is lost when alignment changes, so we need to ensure we retain that info
+  if (!tableObject.node.attrs.width) {
+    const tableWidth = getTableContainerWidth(tableObject.node);
+    nextTableAttrs.width = tableWidth;
+  }
   tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
   return tr;
 };
 export const setTableAlignmentWithTableContentWithPos = (newAlignment, tableNodeWithPos) => ({
   tr
 }) => {
+  const table = tableNodeWithPos.node;
   const nextTableAttrs = {
-    ...tableNodeWithPos.node.attrs,
+    ...table.attrs,
     layout: newAlignment
   };
+
+  // table uses old breakout values in layout attribute to determine width
+  // but that information is lost when alignment changes, so we need to ensure we retain that info
+  if (!table.attrs.width) {
+    const tableWidth = getTableContainerWidth(table);
+    nextTableAttrs.width = tableWidth;
+  }
   tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
   return tr;
 };

package/dist/es2019/toolbar.js

@@ -5,6 +5,7 @@ import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { closestElement, getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -629,7 +630,8 @@ export const getSelectedAlignmentIcon = (alignmentIcons, selectedNode) => {
 };
 export const isLayoutOptionDisabled = (selectedNode, getEditorContainerWidth) => {
   const lineLength = getEditorContainerWidth().lineLength;
-  if (selectedNode && lineLength && selectedNode.attrs.width > lineLength) {
+  const tableWidth = getTableContainerWidth(selectedNode);
+  if (selectedNode && lineLength && tableWidth > lineLength) {
     return true;
   }
   return false;

package/dist/esm/commands/misc.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import isEqual from 'lodash/isEqual';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { closestElement, isParagraph, isTextSelection, mapSlice } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -590,6 +591,13 @@ export var setTableAlignment = function setTableAlignment(newAlignment) {
     var nextTableAttrs = _objectSpread(_objectSpread({}, tableObject.node.attrs), {}, {
       layout: newAlignment
     });
+
+    // table uses old breakout values in layout attribute to determine width
+    // but that information is lost when alignment changes, so we need to ensure we retain that info
+    if (!tableObject.node.attrs.width) {
+      var tableWidth = getTableContainerWidth(tableObject.node);
+      nextTableAttrs.width = tableWidth;
+    }
     tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
     return tr;
   };
@@ -597,9 +605,17 @@ export var setTableAlignment = function setTableAlignment(newAlignment) {
 export var setTableAlignmentWithTableContentWithPos = function setTableAlignmentWithTableContentWithPos(newAlignment, tableNodeWithPos) {
   return function (_ref3) {
     var tr = _ref3.tr;
-    var nextTableAttrs = _objectSpread(_objectSpread({}, tableNodeWithPos.node.attrs), {}, {
+    var table = tableNodeWithPos.node;
+    var nextTableAttrs = _objectSpread(_objectSpread({}, table.attrs), {}, {
       layout: newAlignment
     });
+
+    // table uses old breakout values in layout attribute to determine width
+    // but that information is lost when alignment changes, so we need to ensure we retain that info
+    if (!table.attrs.width) {
+      var tableWidth = getTableContainerWidth(table);
+      nextTableAttrs.width = tableWidth;
+    }
     tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
     return tr;
   };

package/dist/esm/toolbar.js

@@ -9,6 +9,7 @@ import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { closestElement, getChildrenInfo as _getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -652,7 +653,8 @@ export var getSelectedAlignmentIcon = function getSelectedAlignmentIcon(alignmen
 };
 export var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth) {
   var lineLength = getEditorContainerWidth().lineLength;
-  if (selectedNode && lineLength && selectedNode.attrs.width > lineLength) {
+  var tableWidth = getTableContainerWidth(selectedNode);
+  if (selectedNode && lineLength && tableWidth > lineLength) {
     return true;
   }
   return false;

package/package.json

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

package/src/commands/misc.ts

@@ -1,6 +1,7 @@
 import isEqual from 'lodash/isEqual';
 
-import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes, TableAttributes, TableLayout } from '@atlaskit/adf-schema';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import {
 	closestElement,
@@ -735,7 +736,14 @@ export const setTableAlignment =
 		const nextTableAttrs = {
 			...tableObject.node.attrs,
 			layout: newAlignment,
-		};
+		} as TableAttributes;
+
+		// table uses old breakout values in layout attribute to determine width
+		// but that information is lost when alignment changes, so we need to ensure we retain that info
+		if (!tableObject.node.attrs.width) {
+			const tableWidth = getTableContainerWidth(tableObject.node);
+			nextTableAttrs.width = tableWidth;
+		}
 
 		tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
 
@@ -745,10 +753,18 @@ export const setTableAlignment =
 export const setTableAlignmentWithTableContentWithPos =
 	(newAlignment: TableLayout, tableNodeWithPos: NodeWithPos): EditorCommand =>
 	({ tr }) => {
+		const table = tableNodeWithPos.node;
 		const nextTableAttrs = {
-			...tableNodeWithPos.node.attrs,
+			...table.attrs,
 			layout: newAlignment,
-		};
+		} as TableAttributes;
+
+		// table uses old breakout values in layout attribute to determine width
+		// but that information is lost when alignment changes, so we need to ensure we retain that info
+		if (!table.attrs.width) {
+			const tableWidth = getTableContainerWidth(table);
+			nextTableAttrs.width = tableWidth;
+		}
 
 		tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta(
 			'scrollIntoView',

package/src/toolbar.tsx

@@ -6,6 +6,7 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import type { typeOption } from '@atlaskit/editor-common/src/types/floating-toolbar';
 import type {
 	Command,
@@ -910,8 +911,9 @@ export const isLayoutOptionDisabled = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 ) => {
 	const lineLength = getEditorContainerWidth().lineLength;
+	const tableWidth = getTableContainerWidth(selectedNode);
 
-	if (selectedNode && lineLength && selectedNode.attrs.width > lineLength) {
+	if (selectedNode && lineLength && tableWidth > lineLength) {
 		return true;
 	}