@atlaskit/editor-plugin-show-diff 10.5.0 → 10.5.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 10.5.1
+
+### Patch Changes
+
+- [`ded72f3ee293f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ded72f3ee293f) -
+  Fix table diff cell overlays to use rounded corners for delete row diffs when
+  platform_editor_table_diff_rounded_corners is enabled
+- [`11b7096b9b80c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/11b7096b9b80c) -
+  CCI-17981: Fix diff indicator misalignment on page resize by observing measured DOM elements for
+  size changes
+- Updated dependencies
+
 ## 10.5.0
 
 ### Minor Changes

package/dist/cjs/pm-plugins/decorations/colorSchemes/standard.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleExtendedNoUnderline = exports.editingStyleExtended = exports.editingStyleCardBlockNode = exports.editingStyleActiveExtendedNoUnderline = exports.editingStyleActiveExtended = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlockExtendedNoUnderline = exports.editingContentStyleInBlockExtended = exports.editingContentStyleInBlock = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedInlineContentStyleExtended = exports.deletedDecorationMarkerVariable = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
+exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleExtendedNoUnderline = exports.editingStyleExtended = exports.editingStyleCardBlockNode = exports.editingStyleActiveExtendedNoUnderline = exports.editingStyleActiveExtended = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlockExtendedNoUnderline = exports.editingContentStyleInBlockExtended = exports.editingContentStyleInBlock = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedInlineContentStyleExtended = exports.deletedDecorationMarkerVariable = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedCellOverlayRoundedStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 // delete on platform_editor_diff_plugin_extended cleanup
 var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)({
@@ -186,4 +186,17 @@ var deletedCellOverlayStyle = exports.deletedCellOverlayStyle = (0, _lazyNodeVie
   zIndex: 1,
   outline: "1px solid ".concat("var(--ds-border-accent-gray, #7D818A)"),
   pointerEvents: 'none'
+});
+var deletedCellOverlayRoundedStyle = exports.deletedCellOverlayRoundedStyle = (0, _lazyNodeView.convertToInlineCss)({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: "rgba(from ".concat("var(--ds-background-accent-gray-subtlest, #F0F1F2)", " r g b / 0.5)"),
+  zIndex: 2,
+  outline: "1px solid ".concat("var(--ds-border-accent-gray, #7D818A)"),
+  pointerEvents: 'none',
+  border: 'inherit',
+  borderRadius: 'inherit'
 });

package/dist/cjs/pm-plugins/decorations/colorSchemes/traditional.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.deletedTraditionalStyleQuoteNodeActive = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalCellOverlayStyle = exports.deletedTraditionalBlockOutlineRoundedNew = exports.deletedTraditionalBlockOutlineRoundedActive = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineNew = exports.deletedTraditionalBlockOutlineActive = exports.deletedTraditionalBlockOutline = void 0;
+exports.deletedTraditionalStyleQuoteNodeActive = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalCellOverlayStyle = exports.deletedTraditionalCellOverlayRoundedStyle = exports.deletedTraditionalBlockOutlineRoundedNew = exports.deletedTraditionalBlockOutlineRoundedActive = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineNew = exports.deletedTraditionalBlockOutlineActive = exports.deletedTraditionalBlockOutline = void 0;
 exports.getDeletedTraditionalInlineStyle = getDeletedTraditionalInlineStyle;
 exports.traditionalStyleRuleNodeNew = exports.traditionalStyleRuleNodeActive = exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNodeNew = exports.traditionalStyleQuoteNodeActive = exports.traditionalStyleQuoteNode = exports.traditionalStyleNodeNew = exports.traditionalStyleNodeActive = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNodeNew = exports.traditionalStyleCardBlockNodeActive = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDeletedDecorationMarkerVariableNew = exports.traditionalDeletedDecorationMarkerVariableActive = exports.traditionalDeletedDecorationMarkerVariable = exports.traditionalDecorationMarkerVariableNew = exports.traditionalDecorationMarkerVariableActive = exports.traditionalDecorationMarkerVariable = exports.traditionalAddedCellOverlayStyleNew = exports.traditionalAddedCellOverlayStyle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -214,4 +214,17 @@ var deletedTraditionalCellOverlayStyle = exports.deletedTraditionalCellOverlaySt
   zIndex: 1,
   outline: "1px solid ".concat("var(--ds-border-disabled, #0515240F)"),
   pointerEvents: 'none'
+});
+var deletedTraditionalCellOverlayRoundedStyle = exports.deletedTraditionalCellOverlayRoundedStyle = (0, _lazyNodeView.convertToInlineCss)({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: "rgba(from ".concat("var(--ds-background-accent-gray-subtlest, #F0F1F2)", " r g b / 0.5)"),
+  zIndex: 2,
+  outline: "1px solid ".concat("var(--ds-border-disabled, #0515240F)"),
+  pointerEvents: 'none',
+  border: 'inherit',
+  borderRadius: 'inherit'
 });

package/dist/cjs/pm-plugins/decorations/createAnchorDecorationWidgets.js

@@ -1,12 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createLeftAnchorWidget = exports.createInlineIndicatorAnchorWidgets = exports.createDocMarginAnchorWidget = exports.createBlockIndicatorAnchorWidgets = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _decorationKeys = require("./decorationKeys");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Resolves the doc-level block node (table/expand/layout) for `from`, along with
  * the position right before it (`beforePos`). Falls back to `$from.nodeAfter`
@@ -138,6 +142,7 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
     diffId: diffId,
     anchorType: _decorationKeys.AnchorTypeKey.left
   });
+  var leftResizeObserver;
   return _view.Decoration.widget(beforePos, function (view, getPos) {
     // Outer span stays in the flow but takes up no space.
     var wrapper = document.createElement('div');
@@ -152,13 +157,7 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
     anchor.style.setProperty('left', "calc(50% - ".concat((edgeCase === null || edgeCase === void 0 ? void 0 : edgeCase.leftOffset) || 0, "px)"));
     anchor.style.setProperty('transform', 'translateX(-50%)');
     wrapper.appendChild(anchor);
-
-    // The block DOM may not be settled synchronously (e.g. after a
-    // transaction), so defer the measurement like the gap cursor does.
-    requestAnimationFrame(function () {
-      // The widget may have been unmounted; bail if its position is gone.
-      // We still measure the stable block node position, not the widget's
-      // own position.
+    var measureWidth = function measureWidth() {
       if (getPos() === undefined || edgeCase.measurePos === undefined) {
         return;
       }
@@ -167,13 +166,33 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
         // The left anchor only needs the container width so the
         // IndicatorBar can align against the block's horizontal extent.
         anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
+
+        // Observe the measured element for size changes (e.g. page
+        // resize) so the indicator stays aligned. CCI-17981
+        if (!leftResizeObserver) {
+          leftResizeObserver = new ResizeObserver(function () {
+            if (getPos() !== undefined) {
+              anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
+            }
+          });
+          leftResizeObserver.observe(dom);
+        }
       }
-    });
+    };
+
+    // The block DOM may not be settled synchronously (e.g. after a
+    // transaction), so defer the measurement like the gap cursor does.
+    requestAnimationFrame(measureWidth);
     return wrapper;
-  }, (0, _decorationKeys.buildAnchorDecorationSpec)({
+  }, _objectSpread(_objectSpread({}, (0, _decorationKeys.buildAnchorDecorationSpec)({
     diffId: diffId,
     anchorType: _decorationKeys.AnchorTypeKey.left,
     side: -999
+  })), {}, {
+    destroy: function destroy() {
+      var _leftResizeObserver;
+      return (_leftResizeObserver = leftResizeObserver) === null || _leftResizeObserver === void 0 ? void 0 : _leftResizeObserver.disconnect();
+    }
   }));
 };
 
@@ -234,6 +253,7 @@ var createBlockIndicatorAnchorWidgets = exports.createBlockIndicatorAnchorWidget
   // Measure the actual cell/row DOM when inside one; otherwise measure the
   // widget's own position.
   var measurePos = parentCellOrRow ? parentCellOrRow.pos : from;
+  var blockResizeObserver;
   var blockWidget = _view.Decoration.widget(widgetPos, function (view, getPos) {
     // Outer span stays in the flow but takes up no space.
     var wrapper = document.createElement('span');
@@ -245,13 +265,7 @@ var createBlockIndicatorAnchorWidgets = exports.createBlockIndicatorAnchorWidget
     anchor.style.setProperty('position', 'absolute');
     anchor.style.setProperty('anchor-name', "--".concat(blockAnchorKey));
     wrapper.appendChild(anchor);
-
-    // The block DOM may not be settled synchronously (e.g. after a
-    // transaction), so defer the measurement like the gap cursor does.
-    requestAnimationFrame(function () {
-      // The widget may have been unmounted; bail if its position is gone.
-      // We still measure the stable cell/row node position, not the
-      // widget's own position.
+    var _measureBlock = function measureBlock() {
       if (getPos() === undefined) {
         return;
       }
@@ -270,15 +284,35 @@ var createBlockIndicatorAnchorWidgets = exports.createBlockIndicatorAnchorWidget
         // The offset already accounts for the cell/row's position, so the
         // margin-top must not be double-applied.
         anchor.style.setProperty('margin-top', '0px');
+
+        // Observe the measured element for size changes (e.g. page
+        // resize) so the indicator stays aligned. CCI-17981
+        if (!blockResizeObserver) {
+          blockResizeObserver = new ResizeObserver(function () {
+            if (getPos() !== undefined) {
+              _measureBlock();
+            }
+          });
+          blockResizeObserver.observe(dom);
+        }
       }
-    });
+    };
+
+    // The block DOM may not be settled synchronously (e.g. after a
+    // transaction), so defer the measurement like the gap cursor does.
+    requestAnimationFrame(_measureBlock);
     return wrapper;
-  }, (0, _decorationKeys.buildAnchorDecorationSpec)({
+  }, _objectSpread(_objectSpread({}, (0, _decorationKeys.buildAnchorDecorationSpec)({
     diffId: diffId,
     // Reuse the `from` anchor type slot; the generated key intentionally
     // omits the anchor type so the single element backs top/bottom/left.
     anchorType: _decorationKeys.AnchorTypeKey.from,
     side: -1
+  })), {}, {
+    destroy: function destroy() {
+      var _blockResizeObserver;
+      return (_blockResizeObserver = blockResizeObserver) === null || _blockResizeObserver === void 0 ? void 0 : _blockResizeObserver.disconnect();
+    }
   }));
   return [blockWidget].concat(maybeLeftAnchor);
 };

package/dist/cjs/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -8,6 +8,7 @@ exports.createBlockChangedDecoration = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _isExtendedEnabled = require("../isExtendedEnabled");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
@@ -155,7 +156,11 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
   var style;
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && ['tableCell', 'tableHeader'].includes(change.name)) {
     var cellOverlay = document.createElement('div');
-    var cellOverlayStyle = isInserted ? colorScheme === 'traditional' ? _traditional.traditionalAddedCellOverlayStyle : _standard.addedCellOverlayStyle : colorScheme === 'traditional' ? _traditional.deletedTraditionalCellOverlayStyle : _standard.deletedCellOverlayStyle;
+    var isTraditional = colorScheme === 'traditional';
+    var isRoundedTable = (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
+    var addedCellStyle = isTraditional ? _traditional.traditionalAddedCellOverlayStyle : _standard.addedCellOverlayStyle;
+    var deletedCellStyle = isTraditional ? isRoundedTable ? _traditional.deletedTraditionalCellOverlayRoundedStyle : _traditional.deletedTraditionalCellOverlayStyle : isRoundedTable ? _standard.deletedCellOverlayRoundedStyle : _standard.deletedCellOverlayStyle;
+    var cellOverlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
     cellOverlay.setAttribute('style', cellOverlayStyle);
     decorations.push(
     // change.to - 1 to position the overlay inside the end of the cell

package/dist/es2019/pm-plugins/decorations/colorSchemes/standard.js

@@ -180,4 +180,17 @@ export const deletedCellOverlayStyle = convertToInlineCss({
   zIndex: 1,
   outline: `1px solid ${"var(--ds-border-accent-gray, #7D818A)"}`,
   pointerEvents: 'none'
+});
+export const deletedCellOverlayRoundedStyle = convertToInlineCss({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: `rgba(from ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"} r g b / 0.5)`,
+  zIndex: 2,
+  outline: `1px solid ${"var(--ds-border-accent-gray, #7D818A)"}`,
+  pointerEvents: 'none',
+  border: 'inherit',
+  borderRadius: 'inherit'
 });

package/dist/es2019/pm-plugins/decorations/colorSchemes/traditional.js

@@ -206,4 +206,17 @@ export const deletedTraditionalCellOverlayStyle = convertToInlineCss({
   zIndex: 1,
   outline: `1px solid ${"var(--ds-border-disabled, #0515240F)"}`,
   pointerEvents: 'none'
+});
+export const deletedTraditionalCellOverlayRoundedStyle = convertToInlineCss({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: `rgba(from ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"} r g b / 0.5)`,
+  zIndex: 2,
+  outline: `1px solid ${"var(--ds-border-disabled, #0515240F)"}`,
+  pointerEvents: 'none',
+  border: 'inherit',
+  borderRadius: 'inherit'
 });

package/dist/es2019/pm-plugins/decorations/createAnchorDecorationWidgets.js

@@ -136,6 +136,7 @@ export const createLeftAnchorWidget = ({
     diffId,
     anchorType: AnchorTypeKey.left
   });
+  let leftResizeObserver;
   return Decoration.widget(beforePos, (view, getPos) => {
     // Outer span stays in the flow but takes up no space.
     const wrapper = document.createElement('div');
@@ -150,13 +151,7 @@ export const createLeftAnchorWidget = ({
     anchor.style.setProperty('left', `calc(50% - ${(edgeCase === null || edgeCase === void 0 ? void 0 : edgeCase.leftOffset) || 0}px)`);
     anchor.style.setProperty('transform', 'translateX(-50%)');
     wrapper.appendChild(anchor);
-
-    // The block DOM may not be settled synchronously (e.g. after a
-    // transaction), so defer the measurement like the gap cursor does.
-    requestAnimationFrame(() => {
-      // The widget may have been unmounted; bail if its position is gone.
-      // We still measure the stable block node position, not the widget's
-      // own position.
+    const measureWidth = () => {
       if (getPos() === undefined || edgeCase.measurePos === undefined) {
         return;
       }
@@ -165,14 +160,35 @@ export const createLeftAnchorWidget = ({
         // The left anchor only needs the container width so the
         // IndicatorBar can align against the block's horizontal extent.
         anchor.style.setProperty('width', `${dom.offsetWidth}px`);
+
+        // Observe the measured element for size changes (e.g. page
+        // resize) so the indicator stays aligned. CCI-17981
+        if (!leftResizeObserver) {
+          leftResizeObserver = new ResizeObserver(() => {
+            if (getPos() !== undefined) {
+              anchor.style.setProperty('width', `${dom.offsetWidth}px`);
+            }
+          });
+          leftResizeObserver.observe(dom);
+        }
       }
-    });
+    };
+
+    // The block DOM may not be settled synchronously (e.g. after a
+    // transaction), so defer the measurement like the gap cursor does.
+    requestAnimationFrame(measureWidth);
     return wrapper;
-  }, buildAnchorDecorationSpec({
-    diffId,
-    anchorType: AnchorTypeKey.left,
-    side: -999
-  }));
+  }, {
+    ...buildAnchorDecorationSpec({
+      diffId,
+      anchorType: AnchorTypeKey.left,
+      side: -999
+    }),
+    destroy: () => {
+      var _leftResizeObserver;
+      return (_leftResizeObserver = leftResizeObserver) === null || _leftResizeObserver === void 0 ? void 0 : _leftResizeObserver.disconnect();
+    }
+  });
 };
 
 /**
@@ -229,6 +245,7 @@ export const createBlockIndicatorAnchorWidgets = ({
   // Measure the actual cell/row DOM when inside one; otherwise measure the
   // widget's own position.
   const measurePos = parentCellOrRow ? parentCellOrRow.pos : from;
+  let blockResizeObserver;
   const blockWidget = Decoration.widget(widgetPos, (view, getPos) => {
     // Outer span stays in the flow but takes up no space.
     const wrapper = document.createElement('span');
@@ -240,13 +257,7 @@ export const createBlockIndicatorAnchorWidgets = ({
     anchor.style.setProperty('position', 'absolute');
     anchor.style.setProperty('anchor-name', `--${blockAnchorKey}`);
     wrapper.appendChild(anchor);
-
-    // The block DOM may not be settled synchronously (e.g. after a
-    // transaction), so defer the measurement like the gap cursor does.
-    requestAnimationFrame(() => {
-      // The widget may have been unmounted; bail if its position is gone.
-      // We still measure the stable cell/row node position, not the
-      // widget's own position.
+    const measureBlock = () => {
       if (getPos() === undefined) {
         return;
       }
@@ -265,16 +276,37 @@ export const createBlockIndicatorAnchorWidgets = ({
         // The offset already accounts for the cell/row's position, so the
         // margin-top must not be double-applied.
         anchor.style.setProperty('margin-top', '0px');
+
+        // Observe the measured element for size changes (e.g. page
+        // resize) so the indicator stays aligned. CCI-17981
+        if (!blockResizeObserver) {
+          blockResizeObserver = new ResizeObserver(() => {
+            if (getPos() !== undefined) {
+              measureBlock();
+            }
+          });
+          blockResizeObserver.observe(dom);
+        }
       }
-    });
+    };
+
+    // The block DOM may not be settled synchronously (e.g. after a
+    // transaction), so defer the measurement like the gap cursor does.
+    requestAnimationFrame(measureBlock);
     return wrapper;
-  }, buildAnchorDecorationSpec({
-    diffId,
-    // Reuse the `from` anchor type slot; the generated key intentionally
-    // omits the anchor type so the single element backs top/bottom/left.
-    anchorType: AnchorTypeKey.from,
-    side: -1
-  }));
+  }, {
+    ...buildAnchorDecorationSpec({
+      diffId,
+      // Reuse the `from` anchor type slot; the generated key intentionally
+      // omits the anchor type so the single element backs top/bottom/left.
+      anchorType: AnchorTypeKey.from,
+      side: -1
+    }),
+    destroy: () => {
+      var _blockResizeObserver;
+      return (_blockResizeObserver = blockResizeObserver) === null || _blockResizeObserver === void 0 ? void 0 : _blockResizeObserver.disconnect();
+    }
+  });
   return [blockWidget, ...maybeLeftAnchor];
 };
 

package/dist/es2019/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -1,8 +1,9 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../isExtendedEnabled';
-import { standardDecorationMarkerVariable, deletedDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
-import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from './colorSchemes/traditional';
+import { standardDecorationMarkerVariable, deletedDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle, deletedCellOverlayRoundedStyle } from './colorSchemes/standard';
+import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle, deletedTraditionalCellOverlayRoundedStyle } from './colorSchemes/traditional';
 import { createBlockIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
 import { buildDiffDecorationSpec } from './decorationKeys';
 const displayNoneStyle = convertToInlineCss({
@@ -143,7 +144,11 @@ export const createBlockChangedDecoration = ({
   let style;
   if (isExtendedEnabled(diffType) && ['tableCell', 'tableHeader'].includes(change.name)) {
     const cellOverlay = document.createElement('div');
-    const cellOverlayStyle = isInserted ? colorScheme === 'traditional' ? traditionalAddedCellOverlayStyle : addedCellOverlayStyle : colorScheme === 'traditional' ? deletedTraditionalCellOverlayStyle : deletedCellOverlayStyle;
+    const isTraditional = colorScheme === 'traditional';
+    const isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
+    const addedCellStyle = isTraditional ? traditionalAddedCellOverlayStyle : addedCellOverlayStyle;
+    const deletedCellStyle = isTraditional ? isRoundedTable ? deletedTraditionalCellOverlayRoundedStyle : deletedTraditionalCellOverlayStyle : isRoundedTable ? deletedCellOverlayRoundedStyle : deletedCellOverlayStyle;
+    const cellOverlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
     cellOverlay.setAttribute('style', cellOverlayStyle);
     decorations.push(
     // change.to - 1 to position the overlay inside the end of the cell

package/dist/esm/pm-plugins/decorations/colorSchemes/standard.js

@@ -180,4 +180,17 @@ export var deletedCellOverlayStyle = convertToInlineCss({
   zIndex: 1,
   outline: "1px solid ".concat("var(--ds-border-accent-gray, #7D818A)"),
   pointerEvents: 'none'
+});
+export var deletedCellOverlayRoundedStyle = convertToInlineCss({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: "rgba(from ".concat("var(--ds-background-accent-gray-subtlest, #F0F1F2)", " r g b / 0.5)"),
+  zIndex: 2,
+  outline: "1px solid ".concat("var(--ds-border-accent-gray, #7D818A)"),
+  pointerEvents: 'none',
+  border: 'inherit',
+  borderRadius: 'inherit'
 });

package/dist/esm/pm-plugins/decorations/colorSchemes/traditional.js

@@ -205,4 +205,17 @@ export var deletedTraditionalCellOverlayStyle = convertToInlineCss({
   zIndex: 1,
   outline: "1px solid ".concat("var(--ds-border-disabled, #0515240F)"),
   pointerEvents: 'none'
+});
+export var deletedTraditionalCellOverlayRoundedStyle = convertToInlineCss({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: "rgba(from ".concat("var(--ds-background-accent-gray-subtlest, #F0F1F2)", " r g b / 0.5)"),
+  zIndex: 2,
+  outline: "1px solid ".concat("var(--ds-border-disabled, #0515240F)"),
+  pointerEvents: 'none',
+  border: 'inherit',
+  borderRadius: 'inherit'
 });

package/dist/esm/pm-plugins/decorations/createAnchorDecorationWidgets.js

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { buildAnchorDecorationKey, buildAnchorDecorationSpec, AnchorDocMarginKey, AnchorTypeKey } from './decorationKeys';
@@ -133,6 +136,7 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
     diffId: diffId,
     anchorType: AnchorTypeKey.left
   });
+  var leftResizeObserver;
   return Decoration.widget(beforePos, function (view, getPos) {
     // Outer span stays in the flow but takes up no space.
     var wrapper = document.createElement('div');
@@ -147,13 +151,7 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
     anchor.style.setProperty('left', "calc(50% - ".concat((edgeCase === null || edgeCase === void 0 ? void 0 : edgeCase.leftOffset) || 0, "px)"));
     anchor.style.setProperty('transform', 'translateX(-50%)');
     wrapper.appendChild(anchor);
-
-    // The block DOM may not be settled synchronously (e.g. after a
-    // transaction), so defer the measurement like the gap cursor does.
-    requestAnimationFrame(function () {
-      // The widget may have been unmounted; bail if its position is gone.
-      // We still measure the stable block node position, not the widget's
-      // own position.
+    var measureWidth = function measureWidth() {
       if (getPos() === undefined || edgeCase.measurePos === undefined) {
         return;
       }
@@ -162,13 +160,33 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
         // The left anchor only needs the container width so the
         // IndicatorBar can align against the block's horizontal extent.
         anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
+
+        // Observe the measured element for size changes (e.g. page
+        // resize) so the indicator stays aligned. CCI-17981
+        if (!leftResizeObserver) {
+          leftResizeObserver = new ResizeObserver(function () {
+            if (getPos() !== undefined) {
+              anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
+            }
+          });
+          leftResizeObserver.observe(dom);
+        }
       }
-    });
+    };
+
+    // The block DOM may not be settled synchronously (e.g. after a
+    // transaction), so defer the measurement like the gap cursor does.
+    requestAnimationFrame(measureWidth);
     return wrapper;
-  }, buildAnchorDecorationSpec({
+  }, _objectSpread(_objectSpread({}, buildAnchorDecorationSpec({
     diffId: diffId,
     anchorType: AnchorTypeKey.left,
     side: -999
+  })), {}, {
+    destroy: function destroy() {
+      var _leftResizeObserver;
+      return (_leftResizeObserver = leftResizeObserver) === null || _leftResizeObserver === void 0 ? void 0 : _leftResizeObserver.disconnect();
+    }
   }));
 };
 
@@ -229,6 +247,7 @@ export var createBlockIndicatorAnchorWidgets = function createBlockIndicatorAnch
   // Measure the actual cell/row DOM when inside one; otherwise measure the
   // widget's own position.
   var measurePos = parentCellOrRow ? parentCellOrRow.pos : from;
+  var blockResizeObserver;
   var blockWidget = Decoration.widget(widgetPos, function (view, getPos) {
     // Outer span stays in the flow but takes up no space.
     var wrapper = document.createElement('span');
@@ -240,13 +259,7 @@ export var createBlockIndicatorAnchorWidgets = function createBlockIndicatorAnch
     anchor.style.setProperty('position', 'absolute');
     anchor.style.setProperty('anchor-name', "--".concat(blockAnchorKey));
     wrapper.appendChild(anchor);
-
-    // The block DOM may not be settled synchronously (e.g. after a
-    // transaction), so defer the measurement like the gap cursor does.
-    requestAnimationFrame(function () {
-      // The widget may have been unmounted; bail if its position is gone.
-      // We still measure the stable cell/row node position, not the
-      // widget's own position.
+    var _measureBlock = function measureBlock() {
       if (getPos() === undefined) {
         return;
       }
@@ -265,15 +278,35 @@ export var createBlockIndicatorAnchorWidgets = function createBlockIndicatorAnch
         // The offset already accounts for the cell/row's position, so the
         // margin-top must not be double-applied.
         anchor.style.setProperty('margin-top', '0px');
+
+        // Observe the measured element for size changes (e.g. page
+        // resize) so the indicator stays aligned. CCI-17981
+        if (!blockResizeObserver) {
+          blockResizeObserver = new ResizeObserver(function () {
+            if (getPos() !== undefined) {
+              _measureBlock();
+            }
+          });
+          blockResizeObserver.observe(dom);
+        }
       }
-    });
+    };
+
+    // The block DOM may not be settled synchronously (e.g. after a
+    // transaction), so defer the measurement like the gap cursor does.
+    requestAnimationFrame(_measureBlock);
     return wrapper;
-  }, buildAnchorDecorationSpec({
+  }, _objectSpread(_objectSpread({}, buildAnchorDecorationSpec({
     diffId: diffId,
     // Reuse the `from` anchor type slot; the generated key intentionally
     // omits the anchor type so the single element backs top/bottom/left.
     anchorType: AnchorTypeKey.from,
     side: -1
+  })), {}, {
+    destroy: function destroy() {
+      var _blockResizeObserver;
+      return (_blockResizeObserver = blockResizeObserver) === null || _blockResizeObserver === void 0 ? void 0 : _blockResizeObserver.disconnect();
+    }
   }));
   return [blockWidget].concat(maybeLeftAnchor);
 };

package/dist/esm/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -1,9 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../isExtendedEnabled';
-import { standardDecorationMarkerVariable, deletedDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
-import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from './colorSchemes/traditional';
+import { standardDecorationMarkerVariable, deletedDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle, deletedCellOverlayRoundedStyle } from './colorSchemes/standard';
+import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle, deletedTraditionalCellOverlayRoundedStyle } from './colorSchemes/traditional';
 import { createBlockIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
 import { buildDiffDecorationSpec } from './decorationKeys';
 var displayNoneStyle = convertToInlineCss({
@@ -148,7 +149,11 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
   var style;
   if (isExtendedEnabled(diffType) && ['tableCell', 'tableHeader'].includes(change.name)) {
     var cellOverlay = document.createElement('div');
-    var cellOverlayStyle = isInserted ? colorScheme === 'traditional' ? traditionalAddedCellOverlayStyle : addedCellOverlayStyle : colorScheme === 'traditional' ? deletedTraditionalCellOverlayStyle : deletedCellOverlayStyle;
+    var isTraditional = colorScheme === 'traditional';
+    var isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
+    var addedCellStyle = isTraditional ? traditionalAddedCellOverlayStyle : addedCellOverlayStyle;
+    var deletedCellStyle = isTraditional ? isRoundedTable ? deletedTraditionalCellOverlayRoundedStyle : deletedTraditionalCellOverlayStyle : isRoundedTable ? deletedCellOverlayRoundedStyle : deletedCellOverlayStyle;
+    var cellOverlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
     cellOverlay.setAttribute('style', cellOverlayStyle);
     decorations.push(
     // change.to - 1 to position the overlay inside the end of the cell

package/dist/types/pm-plugins/decorations/colorSchemes/standard.d.ts

@@ -38,3 +38,4 @@ export declare const standardDecorationMarkerVariable: string;
 export declare const deletedDecorationMarkerVariable: string;
 export declare const addedCellOverlayStyle: string;
 export declare const deletedCellOverlayStyle: string;
+export declare const deletedCellOverlayRoundedStyle: string;

package/dist/types/pm-plugins/decorations/colorSchemes/traditional.d.ts

@@ -37,3 +37,4 @@ export declare const traditionalDeletedDecorationMarkerVariableActive: string;
 export declare const traditionalAddedCellOverlayStyle: string;
 export declare const traditionalAddedCellOverlayStyleNew: string;
 export declare const deletedTraditionalCellOverlayStyle: string;
+export declare const deletedTraditionalCellOverlayRoundedStyle: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "10.5.0",
+	"version": "10.5.1",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,10 +28,10 @@
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-tables": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/tmp-editor-statsig": "^130.2.0",
-		"@atlaskit/tokens": "^16.1.0",
+		"@atlaskit/tmp-editor-statsig": "^131.0.0",
+		"@atlaskit/tokens": "^16.2.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.22.2",
+		"@compiled/react": "^1.0.0",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",
 		"prosemirror-changeset": "^2.3.1"
@@ -41,10 +41,10 @@
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/dropdown-menu": "^17.1.0",
-		"@atlaskit/editor-core": "^221.10.0",
+		"@atlaskit/editor-core": "^221.11.0",
 		"@atlaskit/editor-json-transformer": "^9.0.0",
 		"@atlaskit/form": "^16.1.0",
-		"@atlaskit/primitives": "^22.0.0",
+		"@atlaskit/primitives": "^22.1.0",
 		"@atlaskit/section-message": "^9.2.0",
 		"@atlaskit/textarea": "^9.1.0",
 		"@atlassian/confluence-presets": "workspace:^",
@@ -54,7 +54,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.34.0",
+		"@atlaskit/editor-common": "^116.35.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {