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

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/es2019/pm-plugins/decorations/createInlineChangedDecoration.js

@@ -8,6 +8,16 @@ import { buildDiffDecorationSpec } from './decorationKeys';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
+const getAtomicInlineNodeClassName = (inlineNodeName, colorScheme) => {
+  const classNames = ['show-diff-atomic-inline-changed'];
+  if (inlineNodeName) {
+    classNames.push(`show-diff-atomic-inline-changed-${inlineNodeName}`);
+  }
+  if (colorScheme === 'traditional') {
+    classNames.push('show-diff-atomic-inline-changed-traditional');
+  }
+  return classNames.join(' ');
+};
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -20,11 +30,13 @@ export const createInlineChangedDecoration = ({
   colorScheme,
   isActive = false,
   isInserted = true,
+  isAtomicInlineNode = false,
   shouldHideDeleted = false,
   showIndicators = false,
   doc,
   diffType,
-  hideAddedDiffsUnderline = false
+  hideAddedDiffsUnderline = false,
+  inlineNodeName
 }) => {
   const diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
@@ -66,6 +78,9 @@ export const createInlineChangedDecoration = ({
   }
   const decorations = [Decoration.inline(change.fromB, change.toB, {
     style,
+    ...(isAtomicInlineNode && isInserted && {
+      class: getAtomicInlineNodeClassName(inlineNodeName, colorScheme)
+    }),
     'data-testid': 'show-diff-changed-decoration'
   }, buildDiffDecorationSpec({
     decorationType: 'inline',

package/dist/es2019/pm-plugins/decorations/utils/getAttrChangeRanges.js

@@ -1,5 +1,6 @@
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const filterUndefined = x => !!x;
 
 // Attributes that indicate a change in media image
@@ -11,6 +12,24 @@ const dateAttrs = ['timestamp'];
 // Attribute that indicates a task item state change
 const taskItemAttrs = ['state'];
 
+// Attributes that indicate an emoji change
+const emojiAttrs = ['shortName', 'id', 'text'];
+
+// Attributes that indicate a mention change (who is mentioned)
+const mentionAttrs = ['id', 'text'];
+
+// Attributes that indicate a status change (label or colour)
+const statusAttrs = ['text', 'color'];
+
+// Map of node type name → the attrs that represent a meaningful content change for that node
+const inlineNodeAttrMap = {
+  date: dateAttrs,
+  emoji: emojiAttrs,
+  mention: mentionAttrs,
+  status: statusAttrs
+};
+const isInlineAttrChangeNodeName = nodeName => nodeName in inlineNodeAttrMap;
+
 // Attributes excluded from extension change detection (not meaningful content changes)
 const extensionExcludedAttrs = ['localId'];
 
@@ -25,7 +44,7 @@ const getStepAttrs = step => {
   }
   return [];
 };
-export const getAttrChangeRanges = (doc, steps) => {
+export const getAttrChangeRanges = (doc, steps, originalDoc) => {
   return steps.map(step => {
     if (!(step instanceof AttrStep) && !(step instanceof SetAttrsStep)) {
       return undefined;
@@ -35,14 +54,38 @@ export const getAttrChangeRanges = (doc, steps) => {
     const nodeAtPos = doc.nodeAt(step.pos);
 
     // date node: timestamp attribute change — highlight the date node itself (inline)
-    if (stepAttrs.some(v => dateAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date') {
+    if (stepAttrs.some(v => dateAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date' && !expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) {
       return {
         fromB: step.pos,
         toB: step.pos + nodeAtPos.nodeSize,
-        isInline: true
+        isInline: true,
+        inlineNodeName: 'date'
       };
     }
 
+    // The following inline node attr changes are gated behind platform_editor_improve_inline_diffs.
+    // The changeset path (createDecorationsForChange) handles the deletion widget via
+    // prosemirror-changeset; we only need to add the inline insertion highlight here.
+    if (expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true) && nodeAtPos) {
+      const nodeName = nodeAtPos.type.name;
+      if (isInlineAttrChangeNodeName(nodeName)) {
+        const watchedAttrs = inlineNodeAttrMap[nodeName];
+        if (stepAttrs.some(v => watchedAttrs.includes(v))) {
+          const originalNodeAtPos = originalDoc === null || originalDoc === void 0 ? void 0 : originalDoc.nodeAt(step.pos);
+          return {
+            fromB: step.pos,
+            toB: step.pos + nodeAtPos.nodeSize,
+            isInline: true,
+            inlineNodeName: nodeName,
+            ...(originalNodeAtPos && {
+              fromA: step.pos,
+              toA: step.pos + originalNodeAtPos.nodeSize
+            })
+          };
+        }
+      }
+    }
+
     // taskItem node: state attribute change — highlight the taskItem node
     if (stepAttrs.some(v => taskItemAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'taskItem') {
       return {
@@ -70,7 +113,13 @@ export const getAttrChangeRanges = (doc, steps) => {
       };
     }
     return undefined;
-  }).filter(filterUndefined);
+  }).filter(filterUndefined)
+  // Deduplicate by node position: multiple AttrSteps on the same node
+  // (e.g. setNodeAttribute(pos, 'text', ...) + setNodeAttribute(pos, 'color', ...))
+  // should produce only one decoration, not one per step.
+  // Gated behind the same experiment as the inline node attr changes that introduced
+  // the possibility of multiple ranges for the same node position.
+  .filter((range, i, arr) => !expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true) || arr.findIndex(r => r.fromB === range.fromB) === i);
 };
 
 /**

package/dist/esm/pm-plugins/calculateDiff/calculateDiffDecorations.js

@@ -421,16 +421,43 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       isInserted: true
     })));
   });
-  getAttrChangeRanges(tr.doc, attrSteps).forEach(function (change) {
+  getAttrChangeRanges(tr.doc, attrSteps, originalDoc).forEach(function (change) {
     if (change.isInline) {
-      // Inline nodes (e.g. date) need an inline decoration rather than a block decoration
+      // Inline nodes (e.g. date, emoji, mention, status) need an inline decoration rather than a block decoration
       var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
+      var isAtomicInlineNodeFlag = expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true);
       decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration({
         change: change,
         colorScheme: colorScheme,
         isActive: isActive,
-        isInserted: true
+        isInserted: true,
+        isAtomicInlineNode: isAtomicInlineNodeFlag,
+        inlineNodeName: change.inlineNodeName,
+        // Suppress the border-bottom underline for atomic inline nodeviews —
+        // it doesn't render on custom nodeview DOM elements and is unnecessary noise.
+        hideAddedDiffsUnderline: isAtomicInlineNodeFlag,
+        diffType: diffType
       })));
+      // If we have the original node position, also render the old node as a "deleted" widget
+      // so the user can see what it looked like before the change.
+      if (change.fromA !== undefined && change.toA !== undefined && expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) {
+        decorations.push.apply(decorations, _toConsumableArray(createNodeChangedDecorationWidget({
+          change: {
+            fromA: change.fromA,
+            toA: change.toA,
+            fromB: change.fromB,
+            toB: change.toB,
+            deleted: []
+          },
+          doc: originalDoc,
+          nodeViewSerializer: nodeViewSerializer,
+          colorScheme: colorScheme,
+          newDoc: tr.doc,
+          intl: intl,
+          activeIndexPos: activeIndexPos,
+          isInserted: false
+        })));
+      }
     } else {
       decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration({
         doc: tr.doc,

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

@@ -84,7 +84,7 @@ export var deletedTraditionalBlockOutlineRoundedActive = convertToInlineCss({
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
 
-/** Scroll-navigation “new” emphasis: 4px ring (see {@link traditionalStyleNodeNew}). */
+/** Scroll-navigation “new” emphasis: 4px ring. */
 export var deletedTraditionalBlockOutlineNew = convertToInlineCss({
   boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
   borderRadius: "var(--ds-radius-small, 4px)"
@@ -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/esm/pm-plugins/decorations/createInlineChangedDecoration.js

@@ -1,4 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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 { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { isExtendedEnabled } from '../isExtendedEnabled';
@@ -9,6 +12,16 @@ import { buildDiffDecorationSpec } from './decorationKeys';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
+var getAtomicInlineNodeClassName = function getAtomicInlineNodeClassName(inlineNodeName, colorScheme) {
+  var classNames = ['show-diff-atomic-inline-changed'];
+  if (inlineNodeName) {
+    classNames.push("show-diff-atomic-inline-changed-".concat(inlineNodeName));
+  }
+  if (colorScheme === 'traditional') {
+    classNames.push('show-diff-atomic-inline-changed-traditional');
+  }
+  return classNames.join(' ');
+};
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -23,6 +36,8 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
     _ref$isInserted = _ref.isInserted,
     isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
+    _ref$isAtomicInlineNo = _ref.isAtomicInlineNode,
+    isAtomicInlineNode = _ref$isAtomicInlineNo === void 0 ? false : _ref$isAtomicInlineNo,
     _ref$shouldHideDelete = _ref.shouldHideDeleted,
     shouldHideDeleted = _ref$shouldHideDelete === void 0 ? false : _ref$shouldHideDelete,
     _ref$showIndicators = _ref.showIndicators,
@@ -30,7 +45,8 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     doc = _ref.doc,
     diffType = _ref.diffType,
     _ref$hideAddedDiffsUn = _ref.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref$hideAddedDiffsUn === void 0 ? false : _ref$hideAddedDiffsUn;
+    hideAddedDiffsUnderline = _ref$hideAddedDiffsUn === void 0 ? false : _ref$hideAddedDiffsUn,
+    inlineNodeName = _ref.inlineNodeName;
   var diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
     return [Decoration.inline(change.fromB, change.toB, {
@@ -69,10 +85,13 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
       style = isActive ? editingStyleActive : editingStyle;
     }
   }
-  var decorations = [Decoration.inline(change.fromB, change.toB, {
-    style: style,
+  var decorations = [Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread({
+    style: style
+  }, isAtomicInlineNode && isInserted && {
+    class: getAtomicInlineNodeClassName(inlineNodeName, colorScheme)
+  }), {}, {
     'data-testid': 'show-diff-changed-decoration'
-  }, buildDiffDecorationSpec({
+  }), buildDiffDecorationSpec({
     decorationType: 'inline',
     diffId: diffId,
     isActive: isActive