@atlaskit/editor-plugin-table 22.4.2 → 22.4.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 22.4.4
+
+### Patch Changes
+
+- [`4c459a2718b67`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4c459a2718b67) -
+  Clean up synced block feature gates
+- Updated dependencies
+
+## 22.4.3
+
+### Patch Changes
+
+- [`3a69722c61c6a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a69722c61c6a) -
+  Add rounded corners to table node in editor. This works by hiding the actual table border and
+  adding a pseudo element with rounded corners.
+- Updated dependencies
+
 ## 22.4.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableCell.js

@@ -14,6 +14,8 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _editorTables = require("@atlaskit/editor-tables");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 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; })(); }
@@ -49,6 +51,22 @@ 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;
+        // 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 ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+      _this.updateTableEdgeAttrs(node);
+    }
 
     // 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)`
@@ -60,14 +78,6 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
     // 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)(_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)) {
       _this.delayHandle = delayUntilIdle(function () {
         var pos = getPos();
@@ -98,6 +108,70 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
       }
       return didUpdate;
     }
+
+    /**
+     * Detects whether this cell visually reaches the bottom or right edge of the table
+     * (accounting for rowspan/colspan) and sets data attributes so CSS can apply
+     * rounded corners and transparent borders to merged cells that span to the table edges.
+     */
+  }, {
+    key: "updateTableEdgeAttrs",
+    value: function updateTableEdgeAttrs(node) {
+      var pos = this.getPos();
+      if (pos === undefined) {
+        return;
+      }
+      try {
+        var resolvedPos = this.view.state.doc.resolve(pos);
+
+        // Cell → row → table: depth-1 is the table, depth is the row
+        var tableDepth = resolvedPos.depth - 1;
+        var rowDepth = resolvedPos.depth;
+        if (tableDepth < 0 || rowDepth < 0) {
+          return;
+        }
+        var tableNode = resolvedPos.node(tableDepth);
+        if (tableNode.type.name !== 'table') {
+          return;
+        }
+        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);
+        }
+      } catch (_unused) {
+        // Position may be stale during document mutations; silently ignore.
+      }
+    }
+  }, {
+    key: "setDataAttr",
+    value: function setDataAttr(attr, value) {
+      if (value) {
+        this.dom.setAttribute(attr, 'true');
+      } else {
+        this.dom.removeAttribute(attr);
+      }
+    }
   }, {
     key: "updateNodeView",
     value: function updateNodeView(node) {
@@ -137,6 +211,9 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
         removedAttrs.forEach(function (key) {
           return _this2.dom.removeAttribute(key);
         });
+        if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+          this.updateTableEdgeAttrs(node);
+        }
         return true;
       }
 

package/dist/cjs/nodeviews/TableComponent.js

@@ -143,7 +143,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var tablePos = _this.props.getPos();
       var isNested = (0, _nodes.isTableNested)(_this.props.view.state, tablePos);
       var parentWidth = _this.getParentNodeWidth();
-      var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && (0, _nodes.isTableNestedUnderBodiedSyncBlock)(_this.props.view.state, tablePos) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9');
+      var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && (0, _nodes.isTableNestedUnderBodiedSyncBlock)(_this.props.view.state, tablePos);
       if (useMeasuredWidthForBodiedSyncBlock) {
         // Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
         // value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date

package/dist/cjs/nodeviews/table.js

@@ -64,6 +64,37 @@ 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;
@@ -248,6 +279,46 @@ 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);
+      }
+      return didUpdate;
+    }
   }, {
     key: "render",
     value: function render(props, forwardRef) {
@@ -325,6 +396,10 @@ 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 (this.resizeObserver) {
         this.resizeObserver.disconnect();
       }

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

@@ -11,7 +11,6 @@ var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _columnWidth = require("../../transforms/column-width");
 var _nodes = require("../../utils/nodes");
 var _misc = require("../utils/misc");
@@ -179,7 +178,7 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
       // table's outer width to exceed the colgroup width by 1px. Subtract 1px from the
       // parentWidth here so that the scaled colgroup fits within the sync-block
       // container without overflowing.
-      var isNestedInBodiedSyncBlock = !!((_tableRef$closest = tableRef.closest) !== null && _tableRef$closest !== void 0 && _tableRef$closest.call(tableRef, ".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content))) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9');
+      var isNestedInBodiedSyncBlock = !!((_tableRef$closest = tableRef.closest) !== null && _tableRef$closest !== void 0 && _tableRef$closest.call(tableRef, ".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content)));
       var BORDER_COLLAPSE_WIDTH_PX = 1;
       var adjustedParentWidth = isNestedInBodiedSyncBlock ? parentWidth - BORDER_COLLAPSE_WIDTH_PX : parentWidth;
       resizeState = scaleWithParent(tableRef, adjustedParentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);

package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js

@@ -80,9 +80,8 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
           style: {
             // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
             marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
-            borderLeft:
-            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-            isDragAndDropEnabled && tableActive ? "1px solid ".concat(_consts.tableBorderColor) : undefined,
+            borderLeft: isDragAndDropEnabled && tableActive && !(0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+            "1px solid ".concat(_consts.tableBorderColor) : undefined,
             // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
             visibility: 'hidden' // Ensure the column is not visible during SSR
           },
@@ -95,9 +94,8 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
         style: {
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
-          borderLeft:
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          isDragAndDropEnabled && tableActive ? "1px solid ".concat(_consts.tableBorderColor) : undefined,
+          borderLeft: isDragAndDropEnabled && tableActive && !(0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+          "1px solid ".concat(_consts.tableBorderColor) : undefined,
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
           visibility: 'visible'
         },