@atlaskit/editor-plugin-table 23.4.3 → 24.0.1

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @atlaskit/editor-plugin-table
 
+## 24.0.1
+
+### Patch Changes
+
+- [`52a892635e9a0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/52a892635e9a0) -
+  Update border-radius for cell menu button to 4px
+- [`11006329a22d1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/11006329a22d1) -
+  Clean up experiment `platform_editor_lovability_distribute_column_fix`
+- Updated dependencies
+
+## 24.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- [`a0d08d30a116b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a0d08d30a116b) -
+  Fix number column issues with sticky header, refactor table nodeview logic
+- Updated dependencies
+
 ## 23.4.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableCell.js

@@ -58,11 +58,6 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
     var _this;
     (0, _classCallCheck2.default)(this, TableCell);
     _this = _callSuper(this, TableCell, [node, view, getPos, eventDispatcher]);
-    /** Cached edge state to avoid redundant DOM writes. */
-    (0, _defineProperty2.default)(_this, "prevReachesTop", false);
-    (0, _defineProperty2.default)(_this, "prevReachesBottom", false);
-    (0, _defineProperty2.default)(_this, "prevReachesLeft", false);
-    (0, _defineProperty2.default)(_this, "prevReachesRight", false);
     (0, _defineProperty2.default)(_this, "destroy", function () {
       if (_this.delayHandle && typeof window !== 'undefined') {
         var _window, _window$cancelIdleCal, _window2, _window2$cancelAnimat;
@@ -144,28 +139,10 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
         var tableMap = _editorTables.TableMap.get(tableNode);
         var cellStartInTable = pos - resolvedPos.start(tableDepth);
         var cellRect = tableMap.findCell(cellStartInTable);
-        var reachesTop = cellRect.top === 0;
-        var reachesBottom = cellRect.bottom >= tableMap.height;
-        var reachesLeft = cellRect.left === 0;
-        var reachesRight = cellRect.right >= tableMap.width;
-
-        // Only touch DOM attributes that actually changed
-        if (reachesTop !== this.prevReachesTop) {
-          this.prevReachesTop = reachesTop;
-          this.setDataAttr('data-reaches-top', reachesTop);
-        }
-        if (reachesBottom !== this.prevReachesBottom) {
-          this.prevReachesBottom = reachesBottom;
-          this.setDataAttr('data-reaches-bottom', reachesBottom);
-        }
-        if (reachesLeft !== this.prevReachesLeft) {
-          this.prevReachesLeft = reachesLeft;
-          this.setDataAttr('data-reaches-left', reachesLeft);
-        }
-        if (reachesRight !== this.prevReachesRight) {
-          this.prevReachesRight = reachesRight;
-          this.setDataAttr('data-reaches-right', reachesRight);
-        }
+        this.setDataAttr('data-reaches-top', cellRect.top === 0);
+        this.setDataAttr('data-reaches-bottom', cellRect.bottom >= tableMap.height);
+        this.setDataAttr('data-reaches-left', cellRect.left === 0);
+        this.setDataAttr('data-reaches-right', cellRect.right >= tableMap.width);
       } catch (_unused) {
         // Position may be stale during document mutations; silently ignore.
       }

package/dist/cjs/nodeviews/TableComponent.js

@@ -141,7 +141,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           header.style.marginRight = '2px';
         }
         if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
-          (0, _dom.syncStickyRowToTable)(_this.table);
+          (0, _dom.syncStickyCornerMasks)(_this.table);
         }
       }
 

package/dist/cjs/nodeviews/rounded-table-edges.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RoundedTableEdges = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+var setDataAttr = function setDataAttr(cell, attr, value) {
+  var hasAttr = cell.hasAttribute(attr);
+  if (value && !hasAttr) {
+    cell.setAttribute(attr, 'true');
+  } else if (!value && hasAttr) {
+    cell.removeAttribute(attr);
+  }
+};
+
+/**
+ * Refreshes the `data-reaches-{top,bottom,left,right}` attributes used by CSS to round
+ * the table's corner cells (including merged cells that span to an edge).
+ *
+ * Edge membership is derived directly from the table map's border rows/columns: a cell
+ * reaches an edge iff its offset appears in the corresponding border slice (this naturally
+ * accounts for rowspan/colspan cells, whose offset is repeated across every grid slot they
+ * cover). This is O(cells) overall, versus O(cells^2) when calling findCell per cell.
+ */
+var refreshRoundedTableEdgeAttrs = function refreshRoundedTableEdgeAttrs(table, tableNode) {
+  try {
+    var tableMap = _tableMap.TableMap.get(tableNode);
+    var width = tableMap.width,
+      height = tableMap.height,
+      map = tableMap.map;
+    var cells = Array.from(table.rows).flatMap(function (row) {
+      return Array.from(row.cells);
+    });
+    var cellOffsets = Array.from(new Set(map));
+    var topOffsets = new Set();
+    var bottomOffsets = new Set();
+    var leftOffsets = new Set();
+    var rightOffsets = new Set();
+    for (var col = 0; col < width; col++) {
+      topOffsets.add(map[col]);
+      bottomOffsets.add(map[(height - 1) * width + col]);
+    }
+    for (var row = 0; row < height; row++) {
+      leftOffsets.add(map[row * width]);
+      rightOffsets.add(map[row * width + width - 1]);
+    }
+    cellOffsets.forEach(function (cellOffset, cellIndex) {
+      var cell = cells[cellIndex];
+      if (!cell) {
+        return;
+      }
+      setDataAttr(cell, 'data-reaches-top', topOffsets.has(cellOffset));
+      setDataAttr(cell, 'data-reaches-bottom', bottomOffsets.has(cellOffset));
+      setDataAttr(cell, 'data-reaches-left', leftOffsets.has(cellOffset));
+      setDataAttr(cell, 'data-reaches-right', rightOffsets.has(cellOffset));
+    });
+  } catch (_unused) {
+    // Table structure can be transient while ProseMirror normalises transactions.
+    // Keep existing edge attrs if the current shape cannot be mapped safely.
+  }
+};
+
+/**
+ * Builds a lightweight signature of the cells sitting on the table's four borders, using
+ * their (immutable) ProseMirror node references. The signature changes whenever a border
+ * cell is added, removed, merged, or moved (row/column reorder via drag-and-drop) but stays
+ * stable across pure text edits in non-edge cells. This lets the controller decide cheaply
+ * (O(rows + cols)) whether the rounded-edge attrs need a full refresh, instead of only
+ * reacting to width/height changes.
+ */
+var getTableEdgeSignature = function getTableEdgeSignature(tableNode) {
+  var edgeCells = [];
+  var lastRowIndex = tableNode.childCount - 1;
+  tableNode.forEach(function (row, _rowOffset, rowIndex) {
+    var isEdgeRow = rowIndex === 0 || rowIndex === lastRowIndex;
+    var lastCellIndex = row.childCount - 1;
+    row.forEach(function (cell, _cellOffset, cellIndex) {
+      if (isEdgeRow || cellIndex === 0 || cellIndex === lastCellIndex) {
+        edgeCells.push(cell);
+      }
+    });
+  });
+  return edgeCells;
+};
+var tableEdgeSignaturesDiffer = function tableEdgeSignaturesDiffer(prev, next) {
+  if (!prev || prev.length !== next.length) {
+    return true;
+  }
+  for (var i = 0; i < prev.length; i++) {
+    if (prev[i] !== next[i]) {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * Keeps a table's rounded-corner edge attributes in sync as its shape changes.
+ *
+ * Each TableCell node view refreshes its own edge attrs when its cell attrs change. However,
+ * when the table's shape changes (e.g. a new row is inserted below the last row) or cells are
+ * reordered (e.g. dragging a row/column to a new position), ProseMirror may reuse the existing
+ * neighbouring cells as-is, so those cells never get a chance to update their edge attrs on
+ * their own. This controller covers those cases from the table node view.
+ *
+ * Callers are responsible for feature-gating each call site.
+ */
+var RoundedTableEdges = exports.RoundedTableEdges = /*#__PURE__*/function () {
+  // References to the previous render's border cells (O(rows + cols), perimeter-sized, not all cells).
+
+  function RoundedTableEdges(getTableElement, node) {
+    (0, _classCallCheck2.default)(this, RoundedTableEdges);
+    this.getTableElement = getTableElement;
+
+    // Baseline the edge signature so the first content edit doesn't trigger a spurious
+    // refresh — the cells set their own edge attrs on construction.
+    this.prevSignature = getTableEdgeSignature(node);
+  }
+
+  /**
+   * Call from the node view's `update()` after `super.update()`. When the border signature
+   * changes it schedules a refresh of the edge attrs on the next animation frame.
+   */
+  return (0, _createClass2.default)(RoundedTableEdges, [{
+    key: "handleUpdate",
+    value: function handleUpdate(node) {
+      var nextSignature = getTableEdgeSignature(node);
+      var edgesChanged = tableEdgeSignaturesDiffer(this.prevSignature, nextSignature);
+      this.prevSignature = nextSignature;
+      if (edgesChanged) {
+        this.scheduleRefresh(node);
+      }
+    }
+
+    /** Call from the node view's `destroy()` to cancel any pending refresh. */
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this.refreshHandle !== undefined) {
+        cancelAnimationFrame(this.refreshHandle);
+        this.refreshHandle = undefined;
+      }
+    }
+
+    // The refresh runs on the next animation frame because ReactNodeView.update() schedules the
+    // table's React render via the portal provider. If we read `table.rows` synchronously, we'd
+    // still see the previous DOM.
+  }, {
+    key: "scheduleRefresh",
+    value: function scheduleRefresh(node) {
+      var _this = this;
+      if (this.refreshHandle !== undefined) {
+        cancelAnimationFrame(this.refreshHandle);
+      }
+      this.refreshHandle = requestAnimationFrame(function () {
+        _this.refreshHandle = undefined;
+        var table = _this.getTableElement();
+        if (table instanceof HTMLTableElement) {
+          refreshRoundedTableEdgeAttrs(table, node);
+        }
+      });
+    }
+  }]);
+}();

package/dist/cjs/nodeviews/table.js

@@ -29,6 +29,7 @@ var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _tableWidth = require("../pm-plugins/table-width");
 var _nodes = require("../pm-plugins/utils/nodes");
 var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
+var _roundedTableEdges = require("./rounded-table-edges");
 var _TableComponentWithSharedState = require("./TableComponentWithSharedState");
 var _toDOM = require("./toDOM");
 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)); }
@@ -65,37 +66,6 @@ var handleInlineTableWidth = function handleInlineTableWidth(table, width) {
   }
   table.style.setProperty('width', "".concat(width, "px"));
 };
-var setDataAttr = function setDataAttr(cell, attr, value) {
-  var hasAttr = cell.hasAttribute(attr);
-  if (value && !hasAttr) {
-    cell.setAttribute(attr, 'true');
-  } else if (!value && hasAttr) {
-    cell.removeAttribute(attr);
-  }
-};
-var refreshRoundedTableEdgeAttrs = function refreshRoundedTableEdgeAttrs(table, tableNode) {
-  try {
-    var tableMap = _tableMap.TableMap.get(tableNode);
-    var cells = Array.from(table.rows).flatMap(function (row) {
-      return Array.from(row.cells);
-    });
-    var cellOffsets = Array.from(new Set(tableMap.map));
-    cellOffsets.forEach(function (cellOffset, cellIndex) {
-      var cell = cells[cellIndex];
-      if (!cell) {
-        return;
-      }
-      var cellRect = tableMap.findCell(cellOffset);
-      setDataAttr(cell, 'data-reaches-top', cellRect.top === 0);
-      setDataAttr(cell, 'data-reaches-bottom', cellRect.bottom >= tableMap.height);
-      setDataAttr(cell, 'data-reaches-left', cellRect.left === 0);
-      setDataAttr(cell, 'data-reaches-right', cellRect.right >= tableMap.width);
-    });
-  } catch (_unused) {
-    // Table structure can be transient while ProseMirror normalises transactions.
-    // Keep existing edge attrs if the current shape cannot be mapped safely.
-  }
-};
 var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
   function TableView(props) {
     var _this;
@@ -111,6 +81,11 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     _this.eventDispatcher = props.eventDispatcher;
     _this.options = props.options;
     _this.getEditorFeatureFlags = props.getEditorFeatureFlags;
+    if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+      _this.roundedTableEdges = new _roundedTableEdges.RoundedTableEdges(function () {
+        return _this.table;
+      }, props.node);
+    }
     _this.handleRef = function (node) {
       return _this._handleTableRef(node);
     };
@@ -280,43 +255,17 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         }
       }
     }
-  }, {
-    key: "scheduleRoundedTableEdgeRefresh",
-    value:
-    // Each TableCell node view refreshes its own edge attrs when its cell attrs change.
-    // However, when the table's shape changes (e.g. a new row is inserted below the
-    // last row), ProseMirror may reuse the existing neighbouring cells as-is, so those
-    // cells never get a chance to update their edge attrs on their own.
-    //
-    // To cover those cases, we refresh edge attrs from the table node view here.
-    //
-    // The refresh runs on the next animation frame because ReactNodeView.update()
-    // schedules the table's React render via the portal provider. If we read
-    // `this.table.rows` synchronously, we'd still see the previous DOM.
-    function scheduleRoundedTableEdgeRefresh(node) {
-      var _this4 = this;
-      if (this.roundedTableEdgeRefreshHandle !== undefined) {
-        cancelAnimationFrame(this.roundedTableEdgeRefreshHandle);
-      }
-      this.roundedTableEdgeRefreshHandle = requestAnimationFrame(function () {
-        _this4.roundedTableEdgeRefreshHandle = undefined;
-        if (_this4.table instanceof HTMLTableElement) {
-          refreshRoundedTableEdgeAttrs(_this4.table, node);
-        }
-      });
-    }
   }, {
     key: "update",
     value: function update(node, decorations, innerDecorations, validUpdate) {
-      if (!(0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
-        return _superPropGet(TableView, "update", this, 3)([node, decorations, innerDecorations, validUpdate]);
-      }
-      var currentTableMap = _tableMap.TableMap.get(this.node);
-      var nextTableMap = _tableMap.TableMap.get(node);
-      var tableGeometryChanged = currentTableMap.width !== nextTableMap.width || currentTableMap.height !== nextTableMap.height;
       var didUpdate = _superPropGet(TableView, "update", this, 3)([node, decorations, innerDecorations, validUpdate]);
-      if (didUpdate && tableGeometryChanged) {
-        this.scheduleRoundedTableEdgeRefresh(node);
+
+      // Keep the rounded-corner edge attrs in sync with structural changes (rows/columns
+      // added, removed, merged, or reordered via drag-and-drop) that the cells themselves
+      // can miss.
+      if (didUpdate && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+        var _this$roundedTableEdg;
+        (_this$roundedTableEdg = this.roundedTableEdges) === null || _this$roundedTableEdg === void 0 || _this$roundedTableEdg.handleUpdate(node);
       }
       return didUpdate;
     }
@@ -354,7 +303,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
       if ((0, _typeof2.default)(node.attrs) !== (0, _typeof2.default)(nextNode.attrs)) {
         return true;
       }
-      if ((0, _nodes.tablesHaveDifferentColumnWidths)(node, nextNode) && (0, _expValEquals.expValEquals)('platform_editor_lovability_distribute_column_fix', 'isEnabled', true)) {
+      if ((0, _nodes.tablesHaveDifferentColumnWidths)(node, nextNode)) {
         return true;
       }
       var attrKeys = Object.keys(node.attrs);
@@ -397,9 +346,9 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     key: "destroy",
     value: function destroy() {
       var _this$eventDispatcher;
-      if (this.roundedTableEdgeRefreshHandle !== undefined) {
-        cancelAnimationFrame(this.roundedTableEdgeRefreshHandle);
-        this.roundedTableEdgeRefreshHandle = undefined;
+      if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+        var _this$roundedTableEdg2;
+        (_this$roundedTableEdg2 = this.roundedTableEdges) === null || _this$roundedTableEdg2 === void 0 || _this$roundedTableEdg2.destroy();
       }
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateStickyMargins = exports.updateControls = exports.syncStickyRowToTable = exports.isClickNear = exports.getResizeCellPos = exports.clearStickyCornerMaskPositions = void 0;
+exports.updateStickyMargins = exports.updateControls = exports.syncStickyRowToTable = exports.syncStickyCornerMasks = exports.isClickNear = exports.getResizeCellPos = exports.clearStickyCornerMaskPositions = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -109,6 +109,21 @@ var applyTableWidthToStickyRow = function applyTableWidthToStickyRow(tableRef, h
     }
   }
 };
+
+/**
+ * Repositions only the sticky-header corner masks to match the current scroll position.
+ */
+var syncStickyCornerMasks = exports.syncStickyCornerMasks = function syncStickyCornerMasks(tableRef) {
+  if (!tableRef) {
+    return;
+  }
+  var headerRow = tableRef.querySelector('tr[data-header-row]');
+  var wrapper = tableRef.parentElement;
+  if (!headerRow || !wrapper) {
+    return;
+  }
+  syncCornerMasksToStickyRow(tableRef, headerRow, wrapper);
+};
 var clearStickyCornerMaskPositions = exports.clearStickyCornerMaskPositions = function clearStickyCornerMaskPositions(tableRef) {
   var wrapper = tableRef === null || tableRef === void 0 ? void 0 : tableRef.parentElement;
   if (!wrapper) {

package/dist/cjs/ui/FloatingContextualButton/styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tableFloatingCellButtonStyles = exports.tableFloatingCellButtonSelectedStyles = void 0;
 var _react = require("@emotion/react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _consts = require("../consts");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -14,7 +15,8 @@ var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = func
     '> div': {
       // Sits behind button to provide surface-color background
       background: "var(--ds-surface, #FFFFFF)",
-      borderRadius: "var(--ds-radius-small, 3px)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      borderRadius: (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-small, 4px)" : "var(--ds-radius-small, 3px)",
       display: 'flex',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       height: "".concat(_consts.contextualMenuTriggerSize + 2, "px"),
@@ -27,7 +29,8 @@ var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = func
       flexDirection: 'column',
       margin: "var(--ds-space-025, 2px)",
       outline: "2px solid ".concat("var(--ds-surface, #FFFFFF)"),
-      borderRadius: '1px',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      borderRadius: (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "var(--ds-radius-xsmall, 2px)" : '1px',
       padding: 0,
       height: 'calc(100% - 4px)',
       display: 'flex'