@atlaskit/editor-plugin-table 42.1.0 → 42.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 42.2.0
+
+### Minor Changes
+
+- [`d0007ab586b5f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d0007ab586b5f) -
+  Behind the platform_editor_sticky_header_insert_column_exp experiment, keep the column insert
+  button visible when the table header row is sticky
+
+### Patch Changes
+
+- [`0e3b42ec20124`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0e3b42ec20124) -
+  Reduce redundant table work caused by editor focus changes behind the
+  `platform_editor_improve_inp` experiment.
+
 ## 42.1.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/TableRow.js

@@ -27,6 +27,7 @@ var _dom2 = require("../pm-plugins/utils/dom");
 var _nodes = require("../pm-plugins/utils/nodes");
 var _types = require("../types");
 var _consts = require("../ui/consts");
+var _isFocusOnlyChange = require("./is-focus-only-change");
 var _TableNodeViewBase = _interopRequireDefault(require("./TableNodeViewBase"));
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -57,6 +58,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
     });
     (0, _defineProperty2.default)(_this, "colControlsOffset", 0);
     (0, _defineProperty2.default)(_this, "focused", false);
+    (0, _defineProperty2.default)(_this, "focusOnlyUpdateGuard", new _isFocusOnlyChange.FocusOnlyUpdateGuard());
     (0, _defineProperty2.default)(_this, "topPosEditorElement", 0);
     (0, _defineProperty2.default)(_this, "sentinels", {});
     (0, _defineProperty2.default)(_this, "sentinelData", {
@@ -278,6 +280,8 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "subscribe",
     value: function subscribe() {
+      this.focusOnlyUpdateGuard.reset();
+
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       this.editorScrollableElement = (0, _utils.findOverflowScrollParent)(this.view.dom) || window;
@@ -313,6 +317,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "unsubscribe",
     value: function unsubscribe() {
+      this.focusOnlyUpdateGuard.reset();
       if (!this.listening) {
         return;
       }
@@ -624,11 +629,15 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "onTablePluginState",
     value: function onTablePluginState(state) {
+      if (this.focusOnlyUpdateGuard.skipIfFocusOnly(state)) {
+        return;
+      }
       var tableRef = state.tableRef;
       var tree = (0, _dom2.getTree)(this.dom);
       if (!tree) {
         return;
       }
+      this.focusOnlyUpdateGuard.markProcessed(state);
 
       // when header rows are toggled off - mark sentinels as unobserved
       if (!state.isHeaderRowEnabled) {

package/dist/cjs/nodeviews/TableRowNativeStickyWithFallback.js

@@ -31,6 +31,7 @@ var _dom2 = require("../pm-plugins/utils/dom");
 var _nodes = require("../pm-plugins/utils/nodes");
 var _types = require("../types");
 var _consts = require("../ui/consts");
+var _isFocusOnlyChange = require("./is-focus-only-change");
 var _TableNodeViewBase = _interopRequireDefault(require("./TableNodeViewBase"));
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -63,6 +64,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
     });
     (0, _defineProperty2.default)(_this, "colControlsOffset", 0);
     (0, _defineProperty2.default)(_this, "focused", false);
+    (0, _defineProperty2.default)(_this, "focusOnlyUpdateGuard", new _isFocusOnlyChange.FocusOnlyUpdateGuard());
     (0, _defineProperty2.default)(_this, "topPosEditorElement", 0);
     (0, _defineProperty2.default)(_this, "sentinels", {});
     (0, _defineProperty2.default)(_this, "sentinelData", {
@@ -327,6 +329,8 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
     key: "subscribe",
     value: function subscribe() {
       var _this4 = this;
+      this.focusOnlyUpdateGuard.reset();
+
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       this.editorScrollableElement = (0, _utils.findOverflowScrollParent)(this.view.dom) || window;
@@ -404,6 +408,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "unsubscribe",
     value: function unsubscribe() {
+      this.focusOnlyUpdateGuard.reset();
       if (!this.listening) {
         return;
       }
@@ -864,11 +869,15 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "onTablePluginState",
     value: function onTablePluginState(state) {
+      if (this.focusOnlyUpdateGuard.skipIfFocusOnly(state)) {
+        return;
+      }
       var tableRef = state.tableRef;
       var tree = (0, _dom2.getTree)(this.dom);
       if (!tree) {
         return;
       }
+      this.focusOnlyUpdateGuard.markProcessed(state);
 
       // when header rows are toggled off - mark sentinels as unobserved
       if (!state.isHeaderRowEnabled) {

package/dist/cjs/nodeviews/is-focus-only-change.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shallowEqualExcept = exports.isFocusOnlyChange = exports.FocusOnlyUpdateGuard = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var shallowEqualExcept = exports.shallowEqualExcept = function shallowEqualExcept(previousValue, currentValue, ignoredKey) {
+  var previousKeys = Object.keys(previousValue);
+  var currentKeys = Object.keys(currentValue);
+  return previousKeys.length === currentKeys.length && currentKeys.every(function (key) {
+    return key === ignoredKey || Object.prototype.hasOwnProperty.call(previousValue, key) && Object.is(previousValue[key], currentValue[key]);
+  });
+};
+
+/**
+ * Returns true when editor focus is the only table plugin state value that changed.
+ *
+ * Table reducers preserve references for unchanged values. If a reducer rebuilds a value, this
+ * returns false and callers take the original full-work path rather than skipping incorrectly.
+ */
+var isFocusOnlyChange = exports.isFocusOnlyChange = function isFocusOnlyChange(previousState, currentState) {
+  return previousState.editorHasFocus !== currentState.editorHasFocus && shallowEqualExcept(previousState, currentState, 'editorHasFocus');
+};
+var FocusOnlyUpdateGuard = exports.FocusOnlyUpdateGuard = /*#__PURE__*/function () {
+  function FocusOnlyUpdateGuard() {
+    (0, _classCallCheck2.default)(this, FocusOnlyUpdateGuard);
+  }
+  return (0, _createClass2.default)(FocusOnlyUpdateGuard, [{
+    key: "skipIfFocusOnly",
+    value: /** Returns true and records the state when this is a skippable focus-only update. */
+    function skipIfFocusOnly(state) {
+      var lastProcessedState = this.lastProcessedState;
+      if (lastProcessedState !== undefined && isFocusOnlyChange(lastProcessedState, state) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_improve_inp')) {
+        this.lastProcessedState = state;
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "markProcessed",
+    value: function markProcessed(state) {
+      this.lastProcessedState = state;
+    }
+  }, {
+    key: "reset",
+    value: function reset() {
+      this.lastProcessedState = undefined;
+    }
+  }]);
+}();

package/dist/cjs/pm-plugins/commands/misc.js

@@ -25,6 +25,7 @@ var _removeTable = require("@atlaskit/editor-tables/utils/remove-table");
 var _selectNodes = require("@atlaskit/editor-tables/utils/select-nodes");
 var _selectionCell = require("@atlaskit/editor-tables/utils/selection-cell");
 var _setCellAttrs = require("@atlaskit/editor-tables/utils/set-cell-attrs");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _types = require("../../types");
 var _plugin = require("../decorations/plugin");
 var _columnResizing = require("../decorations/utils/column-resizing");
@@ -55,11 +56,17 @@ var selectColumnWithMergedEdgeRows = function selectColumnWithMergedEdgeRows(tr,
   return transformedTr.setSelection(new _cellSelection.CellSelection(transformedTr.doc.resolve(lastCell.pos), transformedTr.doc.resolve(firstCell.pos)));
 };
 var setEditorFocus = exports.setEditorFocus = function setEditorFocus(editorHasFocus) {
-  return (0, _pluginFactory.createCommand)({
-    type: 'SET_EDITOR_FOCUS',
-    data: {
-      editorHasFocus: editorHasFocus
+  return (0, _pluginFactory.createCommand)(function (state) {
+    var pluginState = (0, _pluginFactory.getPluginState)(state);
+    if (pluginState.editorHasFocus === editorHasFocus && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_improve_inp')) {
+      return false;
     }
+    return {
+      type: 'SET_EDITOR_FOCUS',
+      data: {
+        editorHasFocus: editorHasFocus
+      }
+    };
   });
 };
 var setTableRef = exports.setTableRef = function setTableRef(ref) {

package/dist/cjs/ui/FloatingInsertButton/index.js

@@ -32,6 +32,37 @@ var _getPopupOptions = _interopRequireDefault(require("./getPopupOptions"));
 var _InsertButton = require("./InsertButton");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Distance from the table top to the top of the row containing `cell`, summed from row heights.
+ * Viewport rects cannot be used: a stuck header row is fixed to the viewport while the table scrolls.
+ */
+var getRowOffsetFromTableTop = function getRowOffsetFromTableTop(cell, table) {
+  var anchorRow = (0, _dom.closestElement)(cell, 'tr');
+  if (!(table instanceof HTMLTableElement) || !anchorRow) {
+    return 0;
+  }
+  var offset = 0;
+  var _iterator = _createForOfIteratorHelper(table.rows),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var row = _step.value;
+      if (row === anchorRow) {
+        return offset;
+      }
+      offset += row.offsetHeight;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return 0;
+};
+
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components, @typescript-eslint/no-explicit-any
 var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
@@ -142,7 +173,11 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
       //          ↑ button should render at row 0/table top
       var verticalOffsetCorrection = 0;
       if (type === 'column' && (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
-        verticalOffsetCorrection = Math.max(0, targetCellRef.getBoundingClientRect().top - tableRef.getBoundingClientRect().top);
+        if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_sticky_header_insert_column_exp')) {
+          verticalOffsetCorrection = getRowOffsetFromTableTop(targetCellRef, tableRef);
+        } else {
+          verticalOffsetCorrection = Math.max(0, targetCellRef.getBoundingClientRect().top - tableRef.getBoundingClientRect().top);
+        }
       }
       // Preserve the original popup placement: overflow row inserts and column inserts
       // sit above the header; other row inserts sit below it.

package/dist/es2019/nodeviews/TableRow.js

@@ -15,6 +15,7 @@ import { getTop, getTree } from '../pm-plugins/utils/dom';
 import { getTableRowIndex, supportedHeaderRow } from '../pm-plugins/utils/nodes';
 import { TableCssClassName as ClassName, TableCssClassName } from '../types';
 import { stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableControlsSpacing, tableScrollbarOffset } from '../ui/consts';
+import { FocusOnlyUpdateGuard } from './is-focus-only-change';
 import TableNodeView from './TableNodeViewBase';
 // limit scroll event calls
 const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
@@ -41,6 +42,7 @@ export default class TableRow extends TableNodeView {
     });
     _defineProperty(this, "colControlsOffset", 0);
     _defineProperty(this, "focused", false);
+    _defineProperty(this, "focusOnlyUpdateGuard", new FocusOnlyUpdateGuard());
     _defineProperty(this, "topPosEditorElement", 0);
     _defineProperty(this, "sentinels", {});
     _defineProperty(this, "sentinelData", {
@@ -247,6 +249,8 @@ export default class TableRow extends TableNodeView {
     return true;
   }
   subscribe() {
+    this.focusOnlyUpdateGuard.reset();
+
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
     this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
@@ -280,6 +284,7 @@ export default class TableRow extends TableNodeView {
     });
   }
   unsubscribe() {
+    this.focusOnlyUpdateGuard.reset();
     if (!this.listening) {
       return;
     }
@@ -578,11 +583,15 @@ export default class TableRow extends TableNodeView {
   /* receive external events */
 
   onTablePluginState(state) {
+    if (this.focusOnlyUpdateGuard.skipIfFocusOnly(state)) {
+      return;
+    }
     const tableRef = state.tableRef;
     const tree = getTree(this.dom);
     if (!tree) {
       return;
     }
+    this.focusOnlyUpdateGuard.markProcessed(state);
 
     // when header rows are toggled off - mark sentinels as unobserved
     if (!state.isHeaderRowEnabled) {

package/dist/es2019/nodeviews/TableRowNativeStickyWithFallback.js

@@ -19,6 +19,7 @@ import { areAllRectsZero, getTop, getTree } from '../pm-plugins/utils/dom';
 import { getTableRowIndex, supportedHeaderRow } from '../pm-plugins/utils/nodes';
 import { TableCssClassName as ClassName, TableCssClassName } from '../types';
 import { stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableControlsSpacing, tableScrollbarOffset } from '../ui/consts';
+import { FocusOnlyUpdateGuard } from './is-focus-only-change';
 import TableNodeView from './TableNodeViewBase';
 // limit scroll event calls
 const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
@@ -47,6 +48,7 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     });
     _defineProperty(this, "colControlsOffset", 0);
     _defineProperty(this, "focused", false);
+    _defineProperty(this, "focusOnlyUpdateGuard", new FocusOnlyUpdateGuard());
     _defineProperty(this, "topPosEditorElement", 0);
     _defineProperty(this, "sentinels", {});
     _defineProperty(this, "sentinelData", {
@@ -296,6 +298,8 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     return true;
   }
   subscribe() {
+    this.focusOnlyUpdateGuard.reset();
+
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
     this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
@@ -371,6 +375,7 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     });
   }
   unsubscribe() {
+    this.focusOnlyUpdateGuard.reset();
     if (!this.listening) {
       return;
     }
@@ -809,11 +814,15 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
   /* receive external events */
 
   onTablePluginState(state) {
+    if (this.focusOnlyUpdateGuard.skipIfFocusOnly(state)) {
+      return;
+    }
     const tableRef = state.tableRef;
     const tree = getTree(this.dom);
     if (!tree) {
       return;
     }
+    this.focusOnlyUpdateGuard.markProcessed(state);
 
     // when header rows are toggled off - mark sentinels as unobserved
     if (!state.isHeaderRowEnabled) {

package/dist/es2019/nodeviews/is-focus-only-change.js

@@ -0,0 +1,31 @@
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+export const shallowEqualExcept = (previousValue, currentValue, ignoredKey) => {
+  const previousKeys = Object.keys(previousValue);
+  const currentKeys = Object.keys(currentValue);
+  return previousKeys.length === currentKeys.length && currentKeys.every(key => key === ignoredKey || Object.prototype.hasOwnProperty.call(previousValue, key) && Object.is(previousValue[key], currentValue[key]));
+};
+
+/**
+ * Returns true when editor focus is the only table plugin state value that changed.
+ *
+ * Table reducers preserve references for unchanged values. If a reducer rebuilds a value, this
+ * returns false and callers take the original full-work path rather than skipping incorrectly.
+ */
+export const isFocusOnlyChange = (previousState, currentState) => previousState.editorHasFocus !== currentState.editorHasFocus && shallowEqualExcept(previousState, currentState, 'editorHasFocus');
+export class FocusOnlyUpdateGuard {
+  /** Returns true and records the state when this is a skippable focus-only update. */
+  skipIfFocusOnly(state) {
+    const lastProcessedState = this.lastProcessedState;
+    if (lastProcessedState !== undefined && isFocusOnlyChange(lastProcessedState, state) && isExperimentEnabled('platform_editor_improve_inp')) {
+      this.lastProcessedState = state;
+      return true;
+    }
+    return false;
+  }
+  markProcessed(state) {
+    this.lastProcessedState = state;
+  }
+  reset() {
+    this.lastProcessedState = undefined;
+  }
+}

package/dist/es2019/pm-plugins/commands/misc.js

@@ -16,6 +16,7 @@ import { removeTable } from '@atlaskit/editor-tables/utils/remove-table';
 import { selectColumns as selectColumnsTransform, selectColumn as selectColumnTransform, selectRows as selectRowsTransform, selectRow as selectRowTransform } from '@atlaskit/editor-tables/utils/select-nodes';
 import { selectionCell } from '@atlaskit/editor-tables/utils/selection-cell';
 import { setCellAttrs } from '@atlaskit/editor-tables/utils/set-cell-attrs';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { TableCssClassName as ClassName, TableDecorations } from '../../types';
 import { getDecorations } from '../decorations/plugin';
 import { buildColumnResizingDecorations, clearColumnResizingDecorations } from '../decorations/utils/column-resizing';
@@ -42,11 +43,17 @@ const selectColumnWithMergedEdgeRows = (tr, column, expand) => {
   }
   return transformedTr.setSelection(new CellSelection(transformedTr.doc.resolve(lastCell.pos), transformedTr.doc.resolve(firstCell.pos)));
 };
-export const setEditorFocus = editorHasFocus => createCommand({
-  type: 'SET_EDITOR_FOCUS',
-  data: {
-    editorHasFocus
+export const setEditorFocus = editorHasFocus => createCommand(state => {
+  const pluginState = getPluginState(state);
+  if (pluginState.editorHasFocus === editorHasFocus && isExperimentEnabled('platform_editor_improve_inp')) {
+    return false;
   }
+  return {
+    type: 'SET_EDITOR_FOCUS',
+    data: {
+      editorHasFocus
+    }
+  };
 });
 export const setTableRef = ref => createCommand(state => {
   const tableRef = ref;

package/dist/es2019/ui/FloatingInsertButton/index.js

@@ -18,6 +18,25 @@ import { TableCssClassName as ClassName } from '../../types';
 import { getTableZIndexes } from '../sticky-header-z-index';
 import getPopupOptions from './getPopupOptions';
 import { DragAndDropInsertButton } from './InsertButton';
+/**
+ * Distance from the table top to the top of the row containing `cell`, summed from row heights.
+ * Viewport rects cannot be used: a stuck header row is fixed to the viewport while the table scrolls.
+ */
+const getRowOffsetFromTableTop = (cell, table) => {
+  const anchorRow = closestElement(cell, 'tr');
+  if (!(table instanceof HTMLTableElement) || !anchorRow) {
+    return 0;
+  }
+  let offset = 0;
+  for (const row of table.rows) {
+    if (row === anchorRow) {
+      return offset;
+    }
+    offset += row.offsetHeight;
+  }
+  return 0;
+};
+
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components, @typescript-eslint/no-explicit-any
 export class FloatingInsertButton extends React.Component {
@@ -127,7 +146,11 @@ export class FloatingInsertButton extends React.Component {
     //          ↑ button should render at row 0/table top
     let verticalOffsetCorrection = 0;
     if (type === 'column' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-      verticalOffsetCorrection = Math.max(0, targetCellRef.getBoundingClientRect().top - tableRef.getBoundingClientRect().top);
+      if (isExperimentEnabled('platform_editor_sticky_header_insert_column_exp')) {
+        verticalOffsetCorrection = getRowOffsetFromTableTop(targetCellRef, tableRef);
+      } else {
+        verticalOffsetCorrection = Math.max(0, targetCellRef.getBoundingClientRect().top - tableRef.getBoundingClientRect().top);
+      }
     }
     // Preserve the original popup placement: overflow row inserts and column inserts
     // sit above the header; other row inserts sit below it.

package/dist/esm/nodeviews/TableRow.js

@@ -22,6 +22,7 @@ import { getTop, getTree } from '../pm-plugins/utils/dom';
 import { getTableRowIndex, supportedHeaderRow } from '../pm-plugins/utils/nodes';
 import { TableCssClassName as ClassName, TableCssClassName } from '../types';
 import { stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableControlsSpacing, tableScrollbarOffset } from '../ui/consts';
+import { FocusOnlyUpdateGuard } from './is-focus-only-change';
 import TableNodeView from './TableNodeViewBase';
 // limit scroll event calls
 var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
@@ -50,6 +51,7 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
     });
     _defineProperty(_this, "colControlsOffset", 0);
     _defineProperty(_this, "focused", false);
+    _defineProperty(_this, "focusOnlyUpdateGuard", new FocusOnlyUpdateGuard());
     _defineProperty(_this, "topPosEditorElement", 0);
     _defineProperty(_this, "sentinels", {});
     _defineProperty(_this, "sentinelData", {
@@ -271,6 +273,8 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "subscribe",
     value: function subscribe() {
+      this.focusOnlyUpdateGuard.reset();
+
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
@@ -306,6 +310,7 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "unsubscribe",
     value: function unsubscribe() {
+      this.focusOnlyUpdateGuard.reset();
       if (!this.listening) {
         return;
       }
@@ -617,11 +622,15 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "onTablePluginState",
     value: function onTablePluginState(state) {
+      if (this.focusOnlyUpdateGuard.skipIfFocusOnly(state)) {
+        return;
+      }
       var tableRef = state.tableRef;
       var tree = getTree(this.dom);
       if (!tree) {
         return;
       }
+      this.focusOnlyUpdateGuard.markProcessed(state);
 
       // when header rows are toggled off - mark sentinels as unobserved
       if (!state.isHeaderRowEnabled) {

package/dist/esm/nodeviews/TableRowNativeStickyWithFallback.js

@@ -26,6 +26,7 @@ import { areAllRectsZero, getTop, getTree } from '../pm-plugins/utils/dom';
 import { getTableRowIndex, supportedHeaderRow } from '../pm-plugins/utils/nodes';
 import { TableCssClassName as ClassName, TableCssClassName } from '../types';
 import { stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableControlsSpacing, tableScrollbarOffset } from '../ui/consts';
+import { FocusOnlyUpdateGuard } from './is-focus-only-change';
 import TableNodeView from './TableNodeViewBase';
 // limit scroll event calls
 var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
@@ -56,6 +57,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
     });
     _defineProperty(_this, "colControlsOffset", 0);
     _defineProperty(_this, "focused", false);
+    _defineProperty(_this, "focusOnlyUpdateGuard", new FocusOnlyUpdateGuard());
     _defineProperty(_this, "topPosEditorElement", 0);
     _defineProperty(_this, "sentinels", {});
     _defineProperty(_this, "sentinelData", {
@@ -320,6 +322,8 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
     key: "subscribe",
     value: function subscribe() {
       var _this4 = this;
+      this.focusOnlyUpdateGuard.reset();
+
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
@@ -397,6 +401,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "unsubscribe",
     value: function unsubscribe() {
+      this.focusOnlyUpdateGuard.reset();
       if (!this.listening) {
         return;
       }
@@ -857,11 +862,15 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
   }, {
     key: "onTablePluginState",
     value: function onTablePluginState(state) {
+      if (this.focusOnlyUpdateGuard.skipIfFocusOnly(state)) {
+        return;
+      }
       var tableRef = state.tableRef;
       var tree = getTree(this.dom);
       if (!tree) {
         return;
       }
+      this.focusOnlyUpdateGuard.markProcessed(state);
 
       // when header rows are toggled off - mark sentinels as unobserved
       if (!state.isHeaderRowEnabled) {

package/dist/esm/nodeviews/is-focus-only-change.js

@@ -0,0 +1,47 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+export var shallowEqualExcept = function shallowEqualExcept(previousValue, currentValue, ignoredKey) {
+  var previousKeys = Object.keys(previousValue);
+  var currentKeys = Object.keys(currentValue);
+  return previousKeys.length === currentKeys.length && currentKeys.every(function (key) {
+    return key === ignoredKey || Object.prototype.hasOwnProperty.call(previousValue, key) && Object.is(previousValue[key], currentValue[key]);
+  });
+};
+
+/**
+ * Returns true when editor focus is the only table plugin state value that changed.
+ *
+ * Table reducers preserve references for unchanged values. If a reducer rebuilds a value, this
+ * returns false and callers take the original full-work path rather than skipping incorrectly.
+ */
+export var isFocusOnlyChange = function isFocusOnlyChange(previousState, currentState) {
+  return previousState.editorHasFocus !== currentState.editorHasFocus && shallowEqualExcept(previousState, currentState, 'editorHasFocus');
+};
+export var FocusOnlyUpdateGuard = /*#__PURE__*/function () {
+  function FocusOnlyUpdateGuard() {
+    _classCallCheck(this, FocusOnlyUpdateGuard);
+  }
+  return _createClass(FocusOnlyUpdateGuard, [{
+    key: "skipIfFocusOnly",
+    value: /** Returns true and records the state when this is a skippable focus-only update. */
+    function skipIfFocusOnly(state) {
+      var lastProcessedState = this.lastProcessedState;
+      if (lastProcessedState !== undefined && isFocusOnlyChange(lastProcessedState, state) && isExperimentEnabled('platform_editor_improve_inp')) {
+        this.lastProcessedState = state;
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "markProcessed",
+    value: function markProcessed(state) {
+      this.lastProcessedState = state;
+    }
+  }, {
+    key: "reset",
+    value: function reset() {
+      this.lastProcessedState = undefined;
+    }
+  }]);
+}();

package/dist/esm/pm-plugins/commands/misc.js

@@ -20,6 +20,7 @@ import { removeTable } from '@atlaskit/editor-tables/utils/remove-table';
 import { selectColumns as selectColumnsTransform, selectColumn as selectColumnTransform, selectRows as selectRowsTransform, selectRow as selectRowTransform } from '@atlaskit/editor-tables/utils/select-nodes';
 import { selectionCell } from '@atlaskit/editor-tables/utils/selection-cell';
 import { setCellAttrs } from '@atlaskit/editor-tables/utils/set-cell-attrs';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { TableCssClassName as ClassName, TableDecorations } from '../../types';
 import { getDecorations } from '../decorations/plugin';
 import { buildColumnResizingDecorations, clearColumnResizingDecorations } from '../decorations/utils/column-resizing';
@@ -48,11 +49,17 @@ var selectColumnWithMergedEdgeRows = function selectColumnWithMergedEdgeRows(tr,
   return transformedTr.setSelection(new CellSelection(transformedTr.doc.resolve(lastCell.pos), transformedTr.doc.resolve(firstCell.pos)));
 };
 export var setEditorFocus = function setEditorFocus(editorHasFocus) {
-  return createCommand({
-    type: 'SET_EDITOR_FOCUS',
-    data: {
-      editorHasFocus: editorHasFocus
+  return createCommand(function (state) {
+    var pluginState = getPluginState(state);
+    if (pluginState.editorHasFocus === editorHasFocus && isExperimentEnabled('platform_editor_improve_inp')) {
+      return false;
     }
+    return {
+      type: 'SET_EDITOR_FOCUS',
+      data: {
+        editorHasFocus: editorHasFocus
+      }
+    };
   });
 };
 export var setTableRef = function setTableRef(ref) {

package/dist/esm/ui/FloatingInsertButton/index.js

@@ -7,6 +7,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import React from 'react';
 import { injectIntl } from 'react-intl';
 import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics/types/enums';
@@ -25,6 +28,34 @@ import { TableCssClassName as ClassName } from '../../types';
 import { getTableZIndexes } from '../sticky-header-z-index';
 import getPopupOptions from './getPopupOptions';
 import { DragAndDropInsertButton } from './InsertButton';
+/**
+ * Distance from the table top to the top of the row containing `cell`, summed from row heights.
+ * Viewport rects cannot be used: a stuck header row is fixed to the viewport while the table scrolls.
+ */
+var getRowOffsetFromTableTop = function getRowOffsetFromTableTop(cell, table) {
+  var anchorRow = closestElement(cell, 'tr');
+  if (!(table instanceof HTMLTableElement) || !anchorRow) {
+    return 0;
+  }
+  var offset = 0;
+  var _iterator = _createForOfIteratorHelper(table.rows),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var row = _step.value;
+      if (row === anchorRow) {
+        return offset;
+      }
+      offset += row.offsetHeight;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return 0;
+};
+
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components, @typescript-eslint/no-explicit-any
 export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
@@ -135,7 +166,11 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       //          ↑ button should render at row 0/table top
       var verticalOffsetCorrection = 0;
       if (type === 'column' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
-        verticalOffsetCorrection = Math.max(0, targetCellRef.getBoundingClientRect().top - tableRef.getBoundingClientRect().top);
+        if (isExperimentEnabled('platform_editor_sticky_header_insert_column_exp')) {
+          verticalOffsetCorrection = getRowOffsetFromTableTop(targetCellRef, tableRef);
+        } else {
+          verticalOffsetCorrection = Math.max(0, targetCellRef.getBoundingClientRect().top - tableRef.getBoundingClientRect().top);
+        }
       }
       // Preserve the original popup placement: overflow row inserts and column inserts
       // sit above the header; other row inserts sit below it.

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

@@ -18,6 +18,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     private editorScrollableElement?;
     private colControlsOffset;
     private focused;
+    private readonly focusOnlyUpdateGuard;
     private topPosEditorElement;
     private isSticky;
     private intersectionObserver?;

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

@@ -18,6 +18,7 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView<HTML
     private editorScrollableElement?;
     private colControlsOffset;
     private focused;
+    private readonly focusOnlyUpdateGuard;
     private topPosEditorElement;
     private isLegacySticky;
     private intersectionObserver?;

package/dist/types/nodeviews/is-focus-only-change.d.ts

@@ -0,0 +1,16 @@
+import type { TablePluginState } from '../types';
+export declare const shallowEqualExcept: <T extends object>(previousValue: T, currentValue: T, ignoredKey: keyof T) => boolean;
+/**
+ * Returns true when editor focus is the only table plugin state value that changed.
+ *
+ * Table reducers preserve references for unchanged values. If a reducer rebuilds a value, this
+ * returns false and callers take the original full-work path rather than skipping incorrectly.
+ */
+export declare const isFocusOnlyChange: (previousState: TablePluginState, currentState: TablePluginState) => boolean;
+export declare class FocusOnlyUpdateGuard {
+    private lastProcessedState;
+    /** Returns true and records the state when this is a skippable focus-only update. */
+    skipIfFocusOnly(state: TablePluginState): boolean;
+    markProcessed(state: TablePluginState): void;
+    reset(): void;
+}

package/package.json

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