@atlaskit/editor-plugin-table 7.24.2 → 7.24.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 7.24.4
+
+### Patch Changes
+
+- [#125830](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125830)
+  [`0886d04fff5e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0886d04fff5e6) -
+  [ux] Fix bug in dark mode for table header pasted from light mode.
+
+## 7.24.3
+
+### Patch Changes
+
+- [#125536](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125536)
+  [`bf49379d856ff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bf49379d856ff) -
+  hide element drag handle during column resize
+
 ## 7.24.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableCell.js

@@ -8,21 +8,77 @@ exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _TableNodeViewBase = _interopRequireDefault(require("./TableNodeViewBase"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var DEFAULT_COL_SPAN = 1;
 var DEFAULT_ROW_SPAN = 1;
+
+/**
+ * For performance reasons we do this in the background - it shouldn't block the main thread
+ */
+function delayUntilIdle(cb) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  // eslint-disable-next-line compat/compat
+  if (window.requestIdleCallback !== undefined) {
+    // eslint-disable-next-line compat/compat
+    return window.requestIdleCallback(function () {
+      return cb();
+    }, {
+      timeout: 500
+    });
+  }
+  return window.requestAnimationFrame(function () {
+    return cb();
+  });
+}
+var cssVariablePattern = /^VAR\(--.*\)$/;
 var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
   (0, _inherits2.default)(TableCell, _TableNodeView);
   var _super = _createSuper(TableCell);
   function TableCell(node, view, getPos, eventDispatcher) {
+    var _this;
     (0, _classCallCheck2.default)(this, TableCell);
-    return _super.call(this, node, view, getPos, eventDispatcher);
+    _this = _super.call(this, node, view, getPos, eventDispatcher);
+
+    // CONFCLOUD-78239: Previously we had a bug which tried to invert the heading colour of a table
+    // Obviously design tokens can't be inverted and so it would result in `VAR(--DS-BACKGROUND-ACCENT-GRAY-SUBTLEST, #F4F5F7)`
+    // which is not a valid CSS variable.
+    //
+    // We should follow-up and remove this in TODO-xx in 6 months once we're confident
+    // that this has fixed most of the cases in the wild.
+    //
+    // This is a workaround to fix those cases on the fly. Note it is super specific on purpose
+    // so that it just fixes the heading token (other tokens should be unaffected)
+    // At some point in the future
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "destroy", function () {
+      if (_this.delayHandle && typeof window !== 'undefined') {
+        var _window, _window$cancelIdleCal, _window2, _window2$cancelAnimat;
+        // eslint-disable-next-line compat/compat
+        (_window = window) === null || _window === void 0 || (_window$cancelIdleCal = _window.cancelIdleCallback) === null || _window$cancelIdleCal === void 0 || _window$cancelIdleCal.call(_window, _this.delayHandle);
+        (_window2 = window) === null || _window2 === void 0 || (_window2$cancelAnimat = _window2.cancelAnimationFrame) === null || _window2$cancelAnimat === void 0 || _window2$cancelAnimat.call(_window2, _this.delayHandle);
+      }
+    });
+    if (cssVariablePattern.test(node.attrs.background) && (0, _platformFeatureFlags.fg)('platform_editor_dark_mode_cell_header_color_fix')) {
+      _this.delayHandle = delayUntilIdle(function () {
+        var pos = getPos();
+        if (pos) {
+          view.dispatch(view.state.tr.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
+          // Ensures dispatch does not contribute to undo history (otherwise user requires multiple undo's to revert table)
+          .setMeta('addToHistory', false));
+        }
+      });
+    }
+    return _this;
   }
   (0, _createClass2.default)(TableCell, [{
     key: "update",
@@ -36,7 +92,7 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "updateNodeView",
     value: function updateNodeView(node) {
-      var _this = this;
+      var _this2 = this;
       if (this.node.type !== node.type) {
         return false;
       }
@@ -67,10 +123,10 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
           var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
             key = _ref4[0],
             value = _ref4[1];
-          return _this.dom.setAttribute(key, value || '');
+          return _this2.dom.setAttribute(key, value || '');
         });
         removedAttrs.forEach(function (key) {
-          return _this.dom.removeAttribute(key);
+          return _this2.dom.removeAttribute(key);
         });
         return true;
       }

package/dist/cjs/pm-plugins/table-resizing/commands.js

@@ -64,7 +64,7 @@ var stopResizing = exports.stopResizing = function stopResizing(tr) {
   return (0, _pluginFactory.createCommand)({
     type: 'STOP_RESIZING'
   }, function (originalTr) {
-    return (tr || originalTr).setMeta('scrollIntoView', false);
+    return (tr || originalTr).setMeta('scrollIntoView', false).setMeta('is-resizer-resizing', false);
   });
 };
 var setDragging = exports.setDragging = function setDragging(dragging, tr) {
@@ -74,7 +74,7 @@ var setDragging = exports.setDragging = function setDragging(dragging, tr) {
       dragging: dragging
     }
   }, function (originalTr) {
-    return tr || originalTr;
+    return (tr || originalTr).setMeta('is-resizer-resizing', true);
   });
 };
 var setLastClick = exports.setLastClick = function setLastClick(lastClick, transform) {

package/dist/es2019/nodeviews/TableCell.js

@@ -1,10 +1,59 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
 import TableNodeView from './TableNodeViewBase';
 const DEFAULT_COL_SPAN = 1;
 const DEFAULT_ROW_SPAN = 1;
+
+/**
+ * For performance reasons we do this in the background - it shouldn't block the main thread
+ */
+function delayUntilIdle(cb) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  // eslint-disable-next-line compat/compat
+  if (window.requestIdleCallback !== undefined) {
+    // eslint-disable-next-line compat/compat
+    return window.requestIdleCallback(() => cb(), {
+      timeout: 500
+    });
+  }
+  return window.requestAnimationFrame(() => cb());
+}
+const cssVariablePattern = /^VAR\(--.*\)$/;
 export default class TableCell extends TableNodeView {
   constructor(node, view, getPos, eventDispatcher) {
     super(node, view, getPos, eventDispatcher);
+
+    // CONFCLOUD-78239: Previously we had a bug which tried to invert the heading colour of a table
+    // Obviously design tokens can't be inverted and so it would result in `VAR(--DS-BACKGROUND-ACCENT-GRAY-SUBTLEST, #F4F5F7)`
+    // which is not a valid CSS variable.
+    //
+    // We should follow-up and remove this in TODO-xx in 6 months once we're confident
+    // that this has fixed most of the cases in the wild.
+    //
+    // This is a workaround to fix those cases on the fly. Note it is super specific on purpose
+    // so that it just fixes the heading token (other tokens should be unaffected)
+    // At some point in the future
+    _defineProperty(this, "destroy", () => {
+      if (this.delayHandle && typeof window !== 'undefined') {
+        var _window, _window$cancelIdleCal, _window2, _window2$cancelAnimat;
+        // eslint-disable-next-line compat/compat
+        (_window = window) === null || _window === void 0 ? void 0 : (_window$cancelIdleCal = _window.cancelIdleCallback) === null || _window$cancelIdleCal === void 0 ? void 0 : _window$cancelIdleCal.call(_window, this.delayHandle);
+        (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$cancelAnimat = _window2.cancelAnimationFrame) === null || _window2$cancelAnimat === void 0 ? void 0 : _window2$cancelAnimat.call(_window2, this.delayHandle);
+      }
+    });
+    if (cssVariablePattern.test(node.attrs.background) && fg('platform_editor_dark_mode_cell_header_color_fix')) {
+      this.delayHandle = delayUntilIdle(() => {
+        const pos = getPos();
+        if (pos) {
+          view.dispatch(view.state.tr.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
+          // Ensures dispatch does not contribute to undo history (otherwise user requires multiple undo's to revert table)
+          .setMeta('addToHistory', false));
+        }
+      });
+    }
   }
   update(node) {
     const didUpdate = this.updateNodeView(node);

package/dist/es2019/pm-plugins/table-resizing/commands.js

@@ -50,13 +50,13 @@ export const setResizeHandlePos = resizeHandlePos => createCommand({
 });
 export const stopResizing = tr => createCommand({
   type: 'STOP_RESIZING'
-}, originalTr => (tr || originalTr).setMeta('scrollIntoView', false));
+}, originalTr => (tr || originalTr).setMeta('scrollIntoView', false).setMeta('is-resizer-resizing', false));
 export const setDragging = (dragging, tr) => createCommand({
   type: 'SET_DRAGGING',
   data: {
     dragging
   }
-}, originalTr => tr || originalTr);
+}, originalTr => (tr || originalTr).setMeta('is-resizer-resizing', true));
 export const setLastClick = (lastClick, transform) => createCommand({
   type: 'SET_LAST_CLICK',
   data: {

package/dist/esm/nodeviews/TableCell.js

@@ -1,21 +1,77 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
 import TableNodeView from './TableNodeViewBase';
 var DEFAULT_COL_SPAN = 1;
 var DEFAULT_ROW_SPAN = 1;
+
+/**
+ * For performance reasons we do this in the background - it shouldn't block the main thread
+ */
+function delayUntilIdle(cb) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  // eslint-disable-next-line compat/compat
+  if (window.requestIdleCallback !== undefined) {
+    // eslint-disable-next-line compat/compat
+    return window.requestIdleCallback(function () {
+      return cb();
+    }, {
+      timeout: 500
+    });
+  }
+  return window.requestAnimationFrame(function () {
+    return cb();
+  });
+}
+var cssVariablePattern = /^VAR\(--.*\)$/;
 var TableCell = /*#__PURE__*/function (_TableNodeView) {
   _inherits(TableCell, _TableNodeView);
   var _super = _createSuper(TableCell);
   function TableCell(node, view, getPos, eventDispatcher) {
+    var _this;
     _classCallCheck(this, TableCell);
-    return _super.call(this, node, view, getPos, eventDispatcher);
+    _this = _super.call(this, node, view, getPos, eventDispatcher);
+
+    // CONFCLOUD-78239: Previously we had a bug which tried to invert the heading colour of a table
+    // Obviously design tokens can't be inverted and so it would result in `VAR(--DS-BACKGROUND-ACCENT-GRAY-SUBTLEST, #F4F5F7)`
+    // which is not a valid CSS variable.
+    //
+    // We should follow-up and remove this in TODO-xx in 6 months once we're confident
+    // that this has fixed most of the cases in the wild.
+    //
+    // This is a workaround to fix those cases on the fly. Note it is super specific on purpose
+    // so that it just fixes the heading token (other tokens should be unaffected)
+    // At some point in the future
+    _defineProperty(_assertThisInitialized(_this), "destroy", function () {
+      if (_this.delayHandle && typeof window !== 'undefined') {
+        var _window, _window$cancelIdleCal, _window2, _window2$cancelAnimat;
+        // eslint-disable-next-line compat/compat
+        (_window = window) === null || _window === void 0 || (_window$cancelIdleCal = _window.cancelIdleCallback) === null || _window$cancelIdleCal === void 0 || _window$cancelIdleCal.call(_window, _this.delayHandle);
+        (_window2 = window) === null || _window2 === void 0 || (_window2$cancelAnimat = _window2.cancelAnimationFrame) === null || _window2$cancelAnimat === void 0 || _window2$cancelAnimat.call(_window2, _this.delayHandle);
+      }
+    });
+    if (cssVariablePattern.test(node.attrs.background) && fg('platform_editor_dark_mode_cell_header_color_fix')) {
+      _this.delayHandle = delayUntilIdle(function () {
+        var pos = getPos();
+        if (pos) {
+          view.dispatch(view.state.tr.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
+          // Ensures dispatch does not contribute to undo history (otherwise user requires multiple undo's to revert table)
+          .setMeta('addToHistory', false));
+        }
+      });
+    }
+    return _this;
   }
   _createClass(TableCell, [{
     key: "update",
@@ -29,7 +85,7 @@ var TableCell = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "updateNodeView",
     value: function updateNodeView(node) {
-      var _this = this;
+      var _this2 = this;
       if (this.node.type !== node.type) {
         return false;
       }
@@ -60,10 +116,10 @@ var TableCell = /*#__PURE__*/function (_TableNodeView) {
           var _ref4 = _slicedToArray(_ref3, 2),
             key = _ref4[0],
             value = _ref4[1];
-          return _this.dom.setAttribute(key, value || '');
+          return _this2.dom.setAttribute(key, value || '');
         });
         removedAttrs.forEach(function (key) {
-          return _this.dom.removeAttribute(key);
+          return _this2.dom.removeAttribute(key);
         });
         return true;
       }

package/dist/esm/pm-plugins/table-resizing/commands.js

@@ -58,7 +58,7 @@ export var stopResizing = function stopResizing(tr) {
   return createCommand({
     type: 'STOP_RESIZING'
   }, function (originalTr) {
-    return (tr || originalTr).setMeta('scrollIntoView', false);
+    return (tr || originalTr).setMeta('scrollIntoView', false).setMeta('is-resizer-resizing', false);
   });
 };
 export var setDragging = function setDragging(dragging, tr) {
@@ -68,7 +68,7 @@ export var setDragging = function setDragging(dragging, tr) {
       dragging: dragging
     }
   }, function (originalTr) {
-    return tr || originalTr;
+    return (tr || originalTr).setMeta('is-resizer-resizing', true);
   });
 };
 export var setLastClick = function setLastClick(lastClick, transform) {

package/dist/types/nodeviews/TableCell.d.ts

@@ -3,7 +3,9 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import TableNodeView from './TableNodeViewBase';
 export default class TableCell extends TableNodeView<HTMLElement> implements NodeView {
+    private delayHandle;
     constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher);
+    destroy: () => void;
     update(node: PMNode): boolean;
     private updateNodeView;
 }

package/dist/types-ts4.5/nodeviews/TableCell.d.ts

@@ -3,7 +3,9 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import TableNodeView from './TableNodeViewBase';
 export default class TableCell extends TableNodeView<HTMLElement> implements NodeView {
+    private delayHandle;
     constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher);
+    destroy: () => void;
     update(node: PMNode): boolean;
     private updateNodeView;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.24.2",
+	"version": "7.24.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/adf-schema": "^40.3.0",
 		"@atlaskit/button": "^19.1.0",
 		"@atlaskit/custom-steps": "^0.6.0",
-		"@atlaskit/editor-common": "^87.0.0",
+		"@atlaskit/editor-common": "^87.2.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",
@@ -44,7 +44,7 @@
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/icon": "^22.8.0",
-		"@atlaskit/menu": "^2.8.0",
+		"@atlaskit/menu": "^2.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
@@ -111,6 +111,9 @@
 		"platform.editor.table.use-increased-scaling-percent": {
 			"type": "boolean"
 		},
+		"platform_editor_dark_mode_cell_header_color_fix": {
+			"type": "boolean"
+		},
 		"platform.editor.table.live-pages-sorting_4malx": {
 			"type": "boolean"
 		},

package/src/nodeviews/TableCell.ts

@@ -3,13 +3,33 @@ import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import TableNodeView from './TableNodeViewBase';
 
 const DEFAULT_COL_SPAN = 1;
 const DEFAULT_ROW_SPAN = 1;
 
+/**
+ * For performance reasons we do this in the background - it shouldn't block the main thread
+ */
+function delayUntilIdle(cb: Function) {
+	if (typeof window === 'undefined') {
+		return;
+	}
+	// eslint-disable-next-line compat/compat
+	if (window.requestIdleCallback !== undefined) {
+		// eslint-disable-next-line compat/compat
+		return window.requestIdleCallback(() => cb(), { timeout: 500 });
+	}
+	return window.requestAnimationFrame(() => cb());
+}
+
+const cssVariablePattern = /^VAR\(--.*\)$/;
+
 export default class TableCell extends TableNodeView<HTMLElement> implements NodeView {
+	private delayHandle: number | undefined;
+
 	constructor(
 		node: PMNode,
 		view: EditorView,
@@ -17,8 +37,43 @@ export default class TableCell extends TableNodeView<HTMLElement> implements Nod
 		eventDispatcher: EventDispatcher,
 	) {
 		super(node, view, getPos, eventDispatcher);
+
+		// CONFCLOUD-78239: Previously we had a bug which tried to invert the heading colour of a table
+		// Obviously design tokens can't be inverted and so it would result in `VAR(--DS-BACKGROUND-ACCENT-GRAY-SUBTLEST, #F4F5F7)`
+		// which is not a valid CSS variable.
+		//
+		// We should follow-up and remove this in TODO-xx in 6 months once we're confident
+		// that this has fixed most of the cases in the wild.
+		//
+		// This is a workaround to fix those cases on the fly. Note it is super specific on purpose
+		// so that it just fixes the heading token (other tokens should be unaffected)
+		// At some point in the future
+		if (
+			cssVariablePattern.test(node.attrs.background) &&
+			fg('platform_editor_dark_mode_cell_header_color_fix')
+		) {
+			this.delayHandle = delayUntilIdle(() => {
+				const pos = getPos();
+				if (pos) {
+					view.dispatch(
+						view.state.tr
+							.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
+							// Ensures dispatch does not contribute to undo history (otherwise user requires multiple undo's to revert table)
+							.setMeta('addToHistory', false),
+					);
+				}
+			});
+		}
 	}
 
+	destroy = () => {
+		if (this.delayHandle && typeof window !== 'undefined') {
+			// eslint-disable-next-line compat/compat
+			window?.cancelIdleCallback?.(this.delayHandle);
+			window?.cancelAnimationFrame?.(this.delayHandle);
+		}
+	};
+
 	update(node: PMNode) {
 		const didUpdate = this.updateNodeView(node);
 		if (didUpdate) {

package/src/pm-plugins/table-resizing/commands.ts

@@ -72,7 +72,8 @@ export const stopResizing = (tr?: Transaction) =>
 		{
 			type: 'STOP_RESIZING',
 		},
-		(originalTr) => (tr || originalTr).setMeta('scrollIntoView', false),
+		(originalTr) =>
+			(tr || originalTr).setMeta('scrollIntoView', false).setMeta('is-resizer-resizing', false),
 	);
 
 export const setDragging = (
@@ -86,7 +87,7 @@ export const setDragging = (
 				dragging,
 			},
 		},
-		(originalTr) => tr || originalTr,
+		(originalTr) => (tr || originalTr).setMeta('is-resizer-resizing', true),
 	);
 
 export const setLastClick = (