@atlaskit/editor-plugin-table 9.3.2 → 9.3.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 9.3.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.3.2
 
 ### Patch Changes

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

@@ -8,11 +8,13 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _styles = require("@atlaskit/editor-common/styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _columnResize = require("../commands/column-resize");
 var _misc = require("../commands/misc");
 var _pluginFactory = require("../plugin-factory");
 var _tableAnalytics = require("../table-analytics");
 var _columnWidth = require("../transforms/column-width");
+var _nodes = require("../utils/nodes");
 var _selection = require("../utils/selection");
 var _commands = require("./commands");
 var _pluginFactory2 = require("./plugin-factory");
@@ -153,10 +155,13 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     if (dragging) {
       var startX = dragging.startX;
 
-      // If the table has changed (via collab for example) don't apply column widths
-      // For example, if a table col is deleted we won't be able to reliably remap the new widths
-      // There may be a more elegant solution to this, to avoid a jarring experience.
-      if (table.eq(originalTable)) {
+      // If the dimensions of the table have changed through a remote modification by another
+      // person for example don't persist the new column widths as we couldn't reliably remap them
+      // For example, if a table col is deleted
+      // There may be a more elegant solution to this, to avoid a jarring experience. This used to
+      // be an equality check but that caused issues when a nested table would change (eg. when it
+      // dynamically updates its width on resize)
+      if ((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_resizing') ? !(0, _nodes.tablesHaveDifferentNoOfColumns)(originalTable, table) : table.eq(originalTable)) {
         var _table$attrs;
         var map = _tableMap.TableMap.get(table);
         var colIndex = map.colCount($cell.pos - start) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;

package/dist/cjs/pm-plugins/table-resizing/utils/scale-table.js

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _columnWidth = require("../../transforms/column-width");
 var _nodes = require("../../utils/nodes");
 var _misc = require("../utils/misc");
@@ -177,6 +178,11 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
     }
     if (resizeState) {
       tr = (0, _columnWidth.updateColumnWidths)(resizeState, node, start, api)(tr);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_resizing')) {
+        // Avoid adding this transaction separately to the history as these are automatic updates
+        // as a consequence of another action
+        tr.setMeta('addToHistory', false);
+      }
       if (tr.docChanged) {
         tr.setMeta('scrollIntoView', false);
         // TODO: ED-8995

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

@@ -2,11 +2,13 @@ import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_OVERFLOW_
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { stopKeyboardColumnResizing } from '../commands/column-resize';
 import { updateResizeHandleDecorations } from '../commands/misc';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { updateColumnWidths } from '../transforms/column-width';
+import { tablesHaveDifferentNoOfColumns } from '../utils/nodes';
 import { getSelectedColumnIndexes } from '../utils/selection';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
@@ -161,10 +163,13 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         startX
       } = dragging;
 
-      // If the table has changed (via collab for example) don't apply column widths
-      // For example, if a table col is deleted we won't be able to reliably remap the new widths
-      // There may be a more elegant solution to this, to avoid a jarring experience.
-      if (table.eq(originalTable)) {
+      // If the dimensions of the table have changed through a remote modification by another
+      // person for example don't persist the new column widths as we couldn't reliably remap them
+      // For example, if a table col is deleted
+      // There may be a more elegant solution to this, to avoid a jarring experience. This used to
+      // be an equality check but that caused issues when a nested table would change (eg. when it
+      // dynamically updates its width on resize)
+      if (fg('platform_editor_nested_tables_resizing') ? !tablesHaveDifferentNoOfColumns(originalTable, table) : table.eq(originalTable)) {
         var _table$attrs;
         const map = TableMap.get(table);
         const colIndex = map.colCount($cell.pos - start) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;

package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js

@@ -1,6 +1,7 @@
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { updateColumnWidths } from '../../transforms/column-width';
 import { getTableWidth } from '../../utils/nodes';
 import { getLayoutSize } from '../utils/misc';
@@ -163,6 +164,11 @@ export const scaleTable = (tableRef, options, domAtPos, api, isTableScalingEnabl
   }
   if (resizeState) {
     tr = updateColumnWidths(resizeState, node, start, api)(tr);
+    if (fg('platform_editor_nested_tables_resizing')) {
+      // Avoid adding this transaction separately to the history as these are automatic updates
+      // as a consequence of another action
+      tr.setMeta('addToHistory', false);
+    }
     if (tr.docChanged) {
       tr.setMeta('scrollIntoView', false);
       // TODO: ED-8995

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

@@ -2,11 +2,13 @@ import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_OVERFLOW_
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { stopKeyboardColumnResizing } from '../commands/column-resize';
 import { updateResizeHandleDecorations } from '../commands/misc';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { updateColumnWidths } from '../transforms/column-width';
+import { tablesHaveDifferentNoOfColumns } from '../utils/nodes';
 import { getSelectedColumnIndexes } from '../utils/selection';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
@@ -147,10 +149,13 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     if (dragging) {
       var startX = dragging.startX;
 
-      // If the table has changed (via collab for example) don't apply column widths
-      // For example, if a table col is deleted we won't be able to reliably remap the new widths
-      // There may be a more elegant solution to this, to avoid a jarring experience.
-      if (table.eq(originalTable)) {
+      // If the dimensions of the table have changed through a remote modification by another
+      // person for example don't persist the new column widths as we couldn't reliably remap them
+      // For example, if a table col is deleted
+      // There may be a more elegant solution to this, to avoid a jarring experience. This used to
+      // be an equality check but that caused issues when a nested table would change (eg. when it
+      // dynamically updates its width on resize)
+      if (fg('platform_editor_nested_tables_resizing') ? !tablesHaveDifferentNoOfColumns(originalTable, table) : table.eq(originalTable)) {
         var _table$attrs;
         var map = TableMap.get(table);
         var colIndex = map.colCount($cell.pos - start) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;

package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { updateColumnWidths } from '../../transforms/column-width';
 import { getTableWidth } from '../../utils/nodes';
 import { getLayoutSize } from '../utils/misc';
@@ -169,6 +170,11 @@ export var scaleTable = function scaleTable(tableRef, options, domAtPos, api) {
     }
     if (resizeState) {
       tr = updateColumnWidths(resizeState, node, start, api)(tr);
+      if (fg('platform_editor_nested_tables_resizing')) {
+        // Avoid adding this transaction separately to the history as these are automatic updates
+        // as a consequence of another action
+        tr.setMeta('addToHistory', false);
+      }
       if (tr.docChanged) {
         tr.setMeta('scrollIntoView', false);
         // TODO: ED-8995

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "9.3.2",
+	"version": "9.3.3",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,9 +43,9 @@
 		"@atlaskit/editor-prosemirror": "6.2.1",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^23.5.0",
+		"@atlaskit/icon": "^23.6.0",
 		"@atlaskit/menu": "^2.14.0",
-		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/platform-feature-flags": "^1.0.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",
@@ -140,6 +140,9 @@
 		},
 		"platform_editor_nested_tables_paste_dupe_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_nested_tables_resizing": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/toDOM.ts

@@ -136,16 +136,16 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): NodeSpec => {
 						{
 							class: 'resizer-item display-handle',
 							style: convertToInlineCss({
-										position: 'relative',
-										userSelect: 'auto',
-										boxSizing: 'border-box',
-										'--ak-editor-table-gutter-padding': `${gutterPadding}px`,
-										'--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
-										'--ak-editor-table-min-width': `${tableMinWidth}px`,
-										minWidth: 'var(--ak-editor-table-min-width)',
-										maxWidth: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
-										width: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width})`,
-									})
+								position: 'relative',
+								userSelect: 'auto',
+								boxSizing: 'border-box',
+								'--ak-editor-table-gutter-padding': `${gutterPadding}px`,
+								'--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
+								'--ak-editor-table-min-width': `${tableMinWidth}px`,
+								minWidth: 'var(--ak-editor-table-min-width)',
+								maxWidth: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
+								width: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width})`,
+							}),
 						},
 						[
 							'span',

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

@@ -13,6 +13,7 @@ import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/e
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import type { PluginInjectionAPI } from '../../types';
 import { stopKeyboardColumnResizing } from '../commands/column-resize';
@@ -20,6 +21,7 @@ import { updateResizeHandleDecorations } from '../commands/misc';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { updateColumnWidths } from '../transforms/column-width';
+import { tablesHaveDifferentNoOfColumns } from '../utils/nodes';
 import { getSelectedColumnIndexes } from '../utils/selection';
 
 import { evenColumns, setDragging, stopResizing } from './commands';
@@ -195,10 +197,17 @@ export const handleMouseDown = (
 		if (dragging) {
 			const { startX } = dragging;
 
-			// If the table has changed (via collab for example) don't apply column widths
-			// For example, if a table col is deleted we won't be able to reliably remap the new widths
-			// There may be a more elegant solution to this, to avoid a jarring experience.
-			if (table.eq(originalTable)) {
+			// If the dimensions of the table have changed through a remote modification by another
+			// person for example don't persist the new column widths as we couldn't reliably remap them
+			// For example, if a table col is deleted
+			// There may be a more elegant solution to this, to avoid a jarring experience. This used to
+			// be an equality check but that caused issues when a nested table would change (eg. when it
+			// dynamically updates its width on resize)
+			if (
+				fg('platform_editor_nested_tables_resizing')
+					? !tablesHaveDifferentNoOfColumns(originalTable, table)
+					: table.eq(originalTable)
+			) {
 				const map = TableMap.get(table);
 				const colIndex =
 					map.colCount($cell.pos - start) +

package/src/pm-plugins/table-resizing/utils/scale-table.ts

@@ -4,6 +4,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DomAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import type { PluginInjectionAPI } from '../../../types';
 import { updateColumnWidths } from '../../transforms/column-width';
@@ -267,6 +268,11 @@ export const scaleTable =
 
 		if (resizeState) {
 			tr = updateColumnWidths(resizeState, node, start, api)(tr);
+			if (fg('platform_editor_nested_tables_resizing')) {
+				// Avoid adding this transaction separately to the history as these are automatic updates
+				// as a consequence of another action
+				tr.setMeta('addToHistory', false);
+			}
 
 			if (tr.docChanged) {
 				tr.setMeta('scrollIntoView', false);

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -101,10 +101,7 @@ const TableFloatingColumnControls = ({
 
 	if (stickyTop) {
 		const columnControlTopOffsetFromParent = '-12px';
-		containerRef?.current?.style.setProperty(
-			'top',
-			columnControlTopOffsetFromParent
-		);
+		containerRef?.current?.style.setProperty('top', columnControlTopOffsetFromParent);
 	} else {
 		containerRef?.current?.style.removeProperty('top');
 	}

package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx

@@ -38,9 +38,7 @@ class CornerControlComponent extends Component<CornerControlProps & WrappedCompo
 				})}
 				style={{
 					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-					top: this.props.stickyTop !== undefined
-							? `0px`
-							: undefined
+					top: this.props.stickyTop !== undefined ? `0px` : undefined,
 				}}
 				contentEditable={false}
 			>

package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx

@@ -84,9 +84,7 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
 									// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 									marginTop: `${marginTop}px`,
 									// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-									top: thisRowSticky
-											? `3px`
-											: undefined,
+									top: thisRowSticky ? `3px` : undefined,
 									// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 									paddingTop: thisRowSticky ? `${tableControlsSpacing}px` : undefined,
 								}}