@atlaskit/editor-plugin-table 23.4.2 → 24.0.0

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

@@ -14,7 +14,6 @@ import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/co
 import { isTableNested } from '../../pm-plugins/utils/nodes';
 import { TableCssClassName as ClassName } from '../../types';
 import { DragCornerControlsWithSelection } from './CornerControls/DragCornerControls';
-import { FloatingControlsWithSelection } from './FloatingControlsWithSelection';
 import NumberColumn from './NumberColumn';
 import { DragControlsWithSelection } from './RowControls/DragControls';
 const styles = css({
@@ -32,8 +31,6 @@ export const TableFloatingControls = ({
   isInDanger,
   isResizing,
   isNumberColumnEnabled,
-  isHeaderRowEnabled,
-  isHeaderColumnEnabled,
   isDragAndDropEnabled,
   tableActive,
   hasHeaderRow,
@@ -124,7 +121,7 @@ export const TableFloatingControls = ({
     updateCellHoverLocation: updateCellHoverLocation,
     stickyTop: stickyTop,
     isDragAndDropEnabled: isDragAndDropEnabled
-  }) : null, tableActive && jsx(Fragment, null, isDragAndDropEnabled ? jsx(Fragment, null, shouldShowCornerControls && jsx(DragCornerControlsWithSelection, {
+  }) : null, tableActive && jsx(Fragment, null, shouldShowCornerControls && jsx(DragCornerControlsWithSelection, {
     editorView: editorView,
     tableRef: tableRef,
     isInDanger: isInDanger,
@@ -148,19 +145,6 @@ export const TableFloatingControls = ({
     selectRows: _selectRows,
     updateCellHoverLocation: updateCellHoverLocation,
     api: api
-  })) : jsx(FloatingControlsWithSelection, {
-    editorView: editorView,
-    tableRef: tableRef,
-    isInDanger: isInDanger,
-    isResizing: isResizing,
-    isHeaderRowEnabled: isHeaderRowEnabled,
-    isHeaderColumnEnabled: isHeaderColumnEnabled,
-    hoveredRows: hoveredRows,
-    stickyTop: tableActive ? stickyTop : undefined,
-    tableActive: tableActive,
-    hoverRows: _hoverRows,
-    selectRow: _selectRow,
-    api: api
   }))));
 };
 export default TableFloatingControls;

package/dist/es2019/ui/common-styles.js

@@ -304,6 +304,20 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		box-shadow: 0px -${stickyRowOffsetTop}px
 			${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 		border-right: 0 none;
+		${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `
+			width: ${akEditorTableNumberColumnWidth + 1}px;
+			border-left: 1px solid ${tableBorderColor};
+
+			/* Keep the new fixed left border in sync with the selected/danger states,
+			   which would otherwise leave it the default colour (.active recolours the
+			   rest of the border) or drop it entirely (delete-hover sets border-left: 0). */
+			&.active {
+				border-left-color: ${tableBorderSelectedColor};
+			}
+			&.${ClassName.HOVERED_CELL_IN_DANGER} {
+				border-left: 1px solid ${tableBorderDeleteColor};
+			}
+			` : ''}
 		/* top set by NumberColumn component */
 	}
 

package/dist/esm/nodeviews/TableCell.js

@@ -51,11 +51,6 @@ var TableCell = /*#__PURE__*/function (_TableNodeView) {
     var _this;
     _classCallCheck(this, TableCell);
     _this = _callSuper(this, TableCell, [node, view, getPos, eventDispatcher]);
-    /** Cached edge state to avoid redundant DOM writes. */
-    _defineProperty(_this, "prevReachesTop", false);
-    _defineProperty(_this, "prevReachesBottom", false);
-    _defineProperty(_this, "prevReachesLeft", false);
-    _defineProperty(_this, "prevReachesRight", false);
     _defineProperty(_this, "destroy", function () {
       if (_this.delayHandle && typeof window !== 'undefined') {
         var _window, _window$cancelIdleCal, _window2, _window2$cancelAnimat;
@@ -137,28 +132,10 @@ var TableCell = /*#__PURE__*/function (_TableNodeView) {
         var tableMap = 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/esm/nodeviews/TableComponent.js

@@ -35,7 +35,7 @@ import { pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-header
 import { findStickyHeaderForTable } from '../pm-plugins/sticky-headers/util';
 import { hasTableBeenResized, insertColgroupFromNode } from '../pm-plugins/table-resizing/utils/colgroup';
 import { COLUMN_MIN_WIDTH, TABLE_EDITOR_MARGIN, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
-import { syncStickyRowToTable, updateControls } from '../pm-plugins/table-resizing/utils/dom';
+import { syncStickyCornerMasks, updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { getLayoutSize, getScalingPercentForTableWithoutWidth, getTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
 import { getResizeState, updateColgroup } from '../pm-plugins/table-resizing/utils/resize-state';
 import { scaleTable } from '../pm-plugins/table-resizing/utils/scale-table';
@@ -135,7 +135,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           header.style.marginRight = '2px';
         }
         if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
-          syncStickyRowToTable(_this.table);
+          syncStickyCornerMasks(_this.table);
         }
       }
 

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

@@ -0,0 +1,161 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import { TableMap } from '@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.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.
+ */
+export var RoundedTableEdges = /*#__PURE__*/function () {
+  // References to the previous render's border cells (O(rows + cols), perimeter-sized, not all cells).
+
+  function RoundedTableEdges(getTableElement, node) {
+    _classCallCheck(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 _createClass(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/esm/nodeviews/table.js

@@ -25,6 +25,7 @@ import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { isTableNested, tablesHaveDifferentColumnWidths } from '../pm-plugins/utils/nodes';
 import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
+import { RoundedTableEdges } from './rounded-table-edges';
 import { TableComponentWithSharedState } from './TableComponentWithSharedState';
 import { tableNodeSpecWithFixedToDOM } from './toDOM';
 var tableAttributes = function tableAttributes(node) {
@@ -58,37 +59,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.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 = /*#__PURE__*/function (_ReactNodeView) {
   function TableView(props) {
     var _this;
@@ -104,6 +74,11 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     _this.eventDispatcher = props.eventDispatcher;
     _this.options = props.options;
     _this.getEditorFeatureFlags = props.getEditorFeatureFlags;
+    if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+      _this.roundedTableEdges = new RoundedTableEdges(function () {
+        return _this.table;
+      }, props.node);
+    }
     _this.handleRef = function (node) {
       return _this._handleTableRef(node);
     };
@@ -273,43 +248,17 @@ var TableView = /*#__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 (!expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
-        return _superPropGet(TableView, "update", this, 3)([node, decorations, innerDecorations, validUpdate]);
-      }
-      var currentTableMap = TableMap.get(this.node);
-      var nextTableMap = 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 && 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;
     }
@@ -390,9 +339,9 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     key: "destroy",
     value: function destroy() {
       var _this$eventDispatcher;
-      if (this.roundedTableEdgeRefreshHandle !== undefined) {
-        cancelAnimationFrame(this.roundedTableEdgeRefreshHandle);
-        this.roundedTableEdgeRefreshHandle = undefined;
+      if (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/esm/pm-plugins/table-resizing/utils/dom.js

@@ -103,6 +103,21 @@ var applyTableWidthToStickyRow = function applyTableWidthToStickyRow(tableRef, h
     }
   }
 };
+
+/**
+ * Repositions only the sticky-header corner masks to match the current scroll position.
+ */
+export var 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);
+};
 export var clearStickyCornerMaskPositions = function clearStickyCornerMaskPositions(tableRef) {
   var wrapper = tableRef === null || tableRef === void 0 ? void 0 : tableRef.parentElement;
   if (!wrapper) {

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

@@ -14,7 +14,6 @@ import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/co
 import { isTableNested } from '../../pm-plugins/utils/nodes';
 import { TableCssClassName as ClassName } from '../../types';
 import { DragCornerControlsWithSelection } from './CornerControls/DragCornerControls';
-import { FloatingControlsWithSelection } from './FloatingControlsWithSelection';
 import NumberColumn from './NumberColumn';
 import { DragControlsWithSelection } from './RowControls/DragControls';
 var styles = css({
@@ -33,8 +32,6 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
     isInDanger = _ref.isInDanger,
     isResizing = _ref.isResizing,
     isNumberColumnEnabled = _ref.isNumberColumnEnabled,
-    isHeaderRowEnabled = _ref.isHeaderRowEnabled,
-    isHeaderColumnEnabled = _ref.isHeaderColumnEnabled,
     isDragAndDropEnabled = _ref.isDragAndDropEnabled,
     tableActive = _ref.tableActive,
     hasHeaderRow = _ref.hasHeaderRow,
@@ -117,7 +114,7 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
     updateCellHoverLocation: updateCellHoverLocation,
     stickyTop: stickyTop,
     isDragAndDropEnabled: isDragAndDropEnabled
-  }) : null, tableActive && jsx(Fragment, null, isDragAndDropEnabled ? jsx(Fragment, null, shouldShowCornerControls && jsx(DragCornerControlsWithSelection, {
+  }) : null, tableActive && jsx(Fragment, null, shouldShowCornerControls && jsx(DragCornerControlsWithSelection, {
     editorView: editorView,
     tableRef: tableRef,
     isInDanger: isInDanger,
@@ -141,19 +138,6 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
     selectRows: _selectRows,
     updateCellHoverLocation: updateCellHoverLocation,
     api: api
-  })) : jsx(FloatingControlsWithSelection, {
-    editorView: editorView,
-    tableRef: tableRef,
-    isInDanger: isInDanger,
-    isResizing: isResizing,
-    isHeaderRowEnabled: isHeaderRowEnabled,
-    isHeaderColumnEnabled: isHeaderColumnEnabled,
-    hoveredRows: hoveredRows,
-    stickyTop: tableActive ? stickyTop : undefined,
-    tableActive: tableActive,
-    hoverRows: _hoverRows,
-    selectRow: _selectRow,
-    api: api
   }))));
 };
 export default TableFloatingControls;