@atlaskit/editor-plugin-show-diff 25.1.0 → 26.0.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 26.0.1
+
+### Patch Changes
+
+- [`00d7be6e38362`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/00d7be6e38362) -
+  Render a whole-cell table replacement inside the live cell behind
+  `platform_editor_ai_show_diff_patch_2`, showing the new cell background when it changed, and hide
+  only the cell's content rather than the cell when deleted diffs are hidden, so the table keeps its
+  shape. Neither the diff nor the suggestion hover highlight overrides a cell's own background any
+  more, so removing them leaves it in place.
+
+## 26.0.0
+
+### Patch Changes
+
+- [`b5f8a82f07fc6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b5f8a82f07fc6) -
+  Preserve spacing between panel replacement diffs at the start of a table cell or other container
+  behind platform_editor_ai_show_diff_patch_2.
+- [`0f0ca74ca517a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0f0ca74ca517a) -
+  Add the `@atlaskit/editor-common/ai-xstate-migration` (`isAiXstateMigrationEnabled`) and
+  `@atlaskit/editor-common/ai-xstate-migration-no-exposure` (`isAiXstateMigrationEnabledNoExposure`)
+  entrypoints, which enable the AI xstate migration when either the Confluence
+  (`platform_editor_ai_xstate_migration`) or Jira (`platform_editor_ai_xstate_migration_jira`, a
+  platform feature experiment) experiment is on. Use the helper wherever the xstate migration is
+  checked.
+- Updated dependencies
+
 ## 25.1.0
 
 ### Minor Changes

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

@@ -11,6 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _prosemirrorChangeset = require("prosemirror-changeset");
+var _aiXstateMigrationNoExposure = require("@atlaskit/editor-common/ai-xstate-migration-no-exposure");
 var _areDocsEqualByBlockStructureAndText = require("@atlaskit/editor-common/utils/areDocsEqualByBlockStructureAndText");
 var _document = require("@atlaskit/editor-common/utils/document");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
@@ -18,12 +19,12 @@ var _view = require("@atlaskit/editor-prosemirror/view");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _unsafeExpValNoExposure = require("@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _attributions = require("../decorations/colorSchemes/attributions");
 var _createAnchorDecorationWidgets = require("../decorations/createAnchorDecorationWidgets");
 var _createBlockChangedDecoration = require("../decorations/createBlockChangedDecoration");
 var _createInlineChangedDecoration = require("../decorations/createInlineChangedDecoration");
 var _createNodeChangedDecorationWidget = require("../decorations/createNodeChangedDecorationWidget");
+var _createReplacedCellDecorations = require("../decorations/createReplacedCellDecorations");
 var _decorationKeys = require("../decorations/decorationKeys");
 var _extractContributorTags = require("../decorations/extractContributorTags");
 var _createDeletedLineBreakWidget = require("../decorations/utils/createDeletedLineBreakWidget");
@@ -603,7 +604,11 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
     // suppressed in the clean view. `hideDeletedDiffs` is load-bearing: when false the reviewer
     // asked to compare against the original, and the deleted side is the only place the
     // previous formatting is visible.
-    var isMarkOnly = shouldHideMarkOnlyDeletions && hideDeletedDiffs && change.deleted.length > 0 && (0, _isMarkOnlyChange.isMarkOnlyChange)({
+    //
+    // Not on an inverted diff: there the widget's side is the suggested content, which the clean
+    // view keeps. Suppressing it hides the suggestion along with the displayed side it replaces,
+    // e.g. a cell whose only change is its background, as the signature ignores attrs.
+    var isMarkOnly = shouldHideMarkOnlyDeletions && hideDeletedDiffs && !(isInverted && (0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) && change.deleted.length > 0 && (0, _isMarkOnlyChange.isMarkOnlyChange)({
       change: change,
       originalDoc: originalDoc,
       newDoc: tr.doc
@@ -679,7 +684,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
       // For a large inserted table, skip the per-cell inline decorations that
       // freeze the browser on re-render. Only active when Review moment is
       // eligible (xstate + M1).
-      var useCoarseTableDecoration = isSmartNodeLevel && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_ai_xstate_migration', 'isEnabled', true) && (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true && isLargeInsertedTableRange(tr.doc, change.fromB, change.toB);
+      var useCoarseTableDecoration = isSmartNodeLevel && (0, _aiXstateMigrationNoExposure.isAiXstateMigrationEnabledNoExposure)() && (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true && isLargeInsertedTableRange(tr.doc, change.fromB, change.toB);
       // Whether the deleted-content widget will actually be rendered for this
       // change. Used to decide if indicator anchor positions should be adjusted
       // inward — when the widget is present the anchor must stay at the block
@@ -689,7 +694,35 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
         hideDeletedDiffs: hideDeletedDiffs,
         isInverted: isInverted
       });
-      if (isSmartNodeLevel) {
+
+      // A whole-cell replacement keeps its cells in place, so it takes its own decorations
+      // instead of the generic inline and block ones.
+      var replacedCells = (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? (0, _createReplacedCellDecorations.getReplacedCells)({
+        slice: originalDoc.slice(change.fromA, change.toA),
+        doc: tr.doc,
+        fromB: change.fromB,
+        toB: change.toB
+      }) : [];
+      if (replacedCells.length > 0) {
+        decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createReplacedCellDecorations.createReplacedCellDecorations)({
+          replacedCells: replacedCells,
+          change: change,
+          doc: tr.doc,
+          attributionKey: attributionKey,
+          colorScheme: changeColorScheme,
+          hasDeletedWidget: willRenderDeletedWidget,
+          hideAddedDiffsUnderline: hideAddedDiffsUnderline,
+          isActive: isActive,
+          isDeletedWidgetBelow: isDeletedWidgetBelow,
+          isInserted: isInserted,
+          leftAnchorId: leftAnchorId,
+          reveal: reveal,
+          shouldHideDeleted: shouldHideDeleted,
+          showContributorTags: showContributorTags,
+          showIndicators: showIndicators,
+          tagMountContext: tagMountContext
+        })));
+      } else if (isSmartNodeLevel) {
         // For a large inserted table, skip the O(cells) inline decorations inside the
         // table (the cell overlays added below provide the highlight without the
         // expensive content re-render); leaf blocks outside the table still get theirs.
@@ -749,7 +782,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
           tagMountContext: tagMountContext
         })));
       }
-      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration({
+      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(replacedCells.length > 0 ? [] : calculateNodesForBlockDecoration({
         // A deleted widget placed below anchors at the change's end, inside the very block
         // this would let the decoration claim.
         allowTrailingCloseTokens: !isDeletedWidgetBelow,
@@ -939,7 +972,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
       })));
       // If the original node position is known (e.g. a panel type change), also render
       // the old block node as a "deleted" widget so the reviewer sees the before/after.
-      var isSmartNodeLevelAttrChange = diffType === 'smart' && (0, _fg.fg)('platform_editor_ai_smart_diff') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_ai_xstate_migration', 'isEnabled', true) && (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true;
+      var isSmartNodeLevelAttrChange = diffType === 'smart' && (0, _fg.fg)('platform_editor_ai_smart_diff') && (0, _aiXstateMigrationNoExposure.isAiXstateMigrationEnabledNoExposure)() && (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true;
       if (isSmartNodeLevelAttrChange && change.fromA !== undefined && change.toA !== undefined) {
         var placeBelow = deletedDiffPlacement === 'bottom';
         decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createNodeChangedDecorationWidget.createNodeChangedDecorationWidget)({

package/dist/cjs/pm-plugins/calculateDiff/diffBySteps.js

@@ -13,6 +13,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _attributions = require("../decorations/colorSchemes/attributions");
+var _cellAttrs = require("../decorations/utils/cellAttrs");
 var _charsByOffset = require("../utils/charsByOffset");
 var _attrAwareTokenEncoder = require("./attrAwareTokenEncoder");
 var _optimizeChanges = require("./optimizeChanges");
@@ -34,6 +35,16 @@ var WHITESPACE_REGEX = /[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u
 var isGranularIsolatingNode = function isGranularIsolatingNode(node) {
   return !!node.type.spec.isolating && node.type.spec.tableRole !== 'table';
 };
+var CELL_TYPE_NAMES = ['tableCell', 'tableHeader'];
+
+/**
+ * Whether a table cell's replacement changes one of its diffable attributes, such as its background.
+ * Such a cell is diffed whole: it renders as a cell style plus a copy of its row, which already shows
+ * the cell's new content, so inline marks inside it would only repeat that.
+ */
+var isCellAttrChange = function isCellAttrChange(replacedNode, replacingNode) {
+  return CELL_TYPE_NAMES.includes(replacedNode.type.name) && (0, _cellAttrs.isCellAttrChanged)(replacedNode, replacingNode);
+};
 var mapPosition = function mapPosition(mapping, pos) {
   return mapping.map(pos);
 };
@@ -237,7 +248,8 @@ var mergeOverlappingByNewDocRange = function mergeOverlappingByNewDocRange(chang
  * - The replaced slice has only one child
  * - The replacing slice has only one child
  * - Both children are the same textblock type, or (behind `platform_editor_ai_show_diff_patch_2`)
- *   the same isolating, non-table node type whose text content differs
+ *   the same isolating, non-table node type whose text content differs (for a table cell, only when
+ *   its diffable attributes are unchanged)
  * - The replaced slice and replacing slice have the same text content
  * - The replaced slice and replacing slice have the same child marks (if text content is equal)
  */
@@ -275,7 +287,7 @@ var shouldCheckGranularDiff = function shouldCheckGranularDiff(step, before, fro
   // `hasSameChildMarks` only compares an isolating node's direct (block) children, so it cannot
   // vouch for one with unchanged text. Keep the existing whole-node fallback for that case.
   if (isIsolatingNode) {
-    return !isTextContentEqual;
+    return !isTextContentEqual && !(replacingNode && isCellAttrChange(replacedNode, replacingNode));
   }
   return !isTextContentEqual || isTextContentEqual && hasSameChildMarks(replacedNode, replacingNode);
 };

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

@@ -18,6 +18,7 @@ var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWidgets");
 var _createContributorTagWidget = require("./createContributorTagWidget");
 var _createInlineChangedDecoration = require("./createInlineChangedDecoration");
+var _createReplacedCellDecorations = require("./createReplacedCellDecorations");
 var _decorationKeys = require("./decorationKeys");
 var _absorbFirstChildMarginReset = require("./utils/absorbFirstChildMarginReset");
 var _createDeletedLineBreakWidget = require("./utils/createDeletedLineBreakWidget");
@@ -222,6 +223,19 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     isInserted: isInserted
   });
   if (tableDiffMode.kind === 'cells') {
+    if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) {
+      return (0, _createReplacedCellDecorations.createReplacedCellWidgets)({
+        slice: slice,
+        newDoc: newDoc,
+        change: change,
+        nodeViewSerializer: nodeViewSerializer,
+        colorScheme: colorScheme,
+        intl: intl,
+        isActive: isActive,
+        isInserted: isInserted,
+        leftAnchorId: leftAnchorId
+      });
+    }
     return createTableCellContentWidgets({
       slice: slice,
       newDoc: newDoc,

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

@@ -0,0 +1,350 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getReplacedCells = exports.createReplacedCellWidgets = exports.createReplacedCellDecorations = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _getDarkModeLchColor = require("@atlaskit/adf-schema/get-dark-mode-lch-color");
+var _isRgb = require("@atlaskit/adf-schema/is-rgb");
+var _rgbToHex = require("@atlaskit/adf-schema/rgb-to-hex");
+var _tableNodes = require("@atlaskit/adf-schema/tableNodes");
+var _cssHelper = require("@atlaskit/editor-common/css-helper");
+var _document = require("@atlaskit/editor-common/utils/document");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _createBlockChangedDecoration = require("./createBlockChangedDecoration");
+var _createInlineChangedDecoration = require("./createInlineChangedDecoration");
+var _decorationKeys = require("./decorationKeys");
+var _cellAttrs = require("./utils/cellAttrs");
+var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
+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; }
+var CELL_TYPE_NAMES = ['tableCell', 'tableHeader'];
+/**
+ * Pairs each cell of a whole-cell replacement with the live cell it replaces, or `[]` when the slice
+ * is not a run of whole cells matching the live ones. Whole-cell replacement preserves cell count and
+ * order, so the nth live cell in the range matches the nth cell in the slice.
+ */
+var getReplacedCells = exports.getReplacedCells = function getReplacedCells(_ref) {
+  var slice = _ref.slice,
+    doc = _ref.doc,
+    fromB = _ref.fromB,
+    toB = _ref.toB;
+  var otherCells = slice.content.content;
+  if (slice.openStart !== 0 || slice.openEnd !== 0 || otherCells.length === 0 || !otherCells.every(function (node) {
+    return CELL_TYPE_NAMES.includes(node.type.name);
+  })) {
+    return [];
+  }
+  var liveCells = [];
+  doc.nodesBetween(fromB, toB, function (node, pos) {
+    if (CELL_TYPE_NAMES.includes(node.type.name)) {
+      liveCells.push({
+        node: node,
+        pos: pos
+      });
+      return false;
+    }
+    return true;
+  });
+  if (liveCells.length !== otherCells.length) {
+    return [];
+  }
+  return otherCells.map(function (otherCell, index) {
+    return {
+      otherCell: otherCell,
+      liveCell: liveCells[index].node,
+      liveCellPos: liveCells[index].pos
+    };
+  });
+};
+
+/**
+ * Whether two cells hold the same content, ignoring the cells' own attributes and `localId`s, which
+ * a suggestion can regenerate. Such a replacement only changed the cell (e.g. its background), so
+ * there is no content to diff.
+ */
+var isCellContentEqual = function isCellContentEqual(left, right) {
+  if (left.childCount !== right.childCount) {
+    return false;
+  }
+  for (var index = 0; index < left.childCount; index++) {
+    if (!(0, _document.areNodesEqualIgnoreAttrs)(left.child(index), right.child(index), ['localId'])) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Whether the cell itself changed — its type, or an attribute that represents a change such as its
+ * background or span — as opposed to only its content.
+ */
+var isCellChanged = function isCellChanged(left, right) {
+  return left.type !== right.type || (0, _cellAttrs.isCellAttrChanged)(left, right);
+};
+
+/**
+ * A custom (non-palette) cell colour as the schema renders it: inverted in dark mode so text stays
+ * readable, except for design tokens, which are already themed.
+ */
+var getCustomCellColor = function getCustomCellColor(background) {
+  var color = (0, _isRgb.isRgb)(background) && (0, _rgbToHex.rgbToHex)(background) || background;
+  if (color.startsWith('var(') || document.documentElement.getAttribute('data-color-mode') !== 'dark') {
+    return background;
+  }
+  return (0, _getDarkModeLchColor.getDarkModeLCHColor)(color);
+};
+
+/**
+ * The colour `cell` renders with. A palette colour is the editor's own themed variable for its colour
+ * name (e.g. for dark mode), the one `td[colorname]` cells use; a custom colour is the schema's own
+ * treatment of it; no colour is the editor's default.
+ */
+var getCellBackgroundColor = function getCellBackgroundColor(cell) {
+  var background = (0, _cellAttrs.normalizeCellBackground)(cell.attrs.background);
+  if (!background) {
+    return cell.type.name === 'tableHeader' ? "var(--ds-background-accent-gray-subtlest, #F0F1F2)" : "var(--ds-surface, #FFFFFF)";
+  }
+  var _getCellDomAttrs = (0, _tableNodes.getCellDomAttrs)(cell),
+    colorname = _getCellDomAttrs.colorname;
+  return colorname ? "var(--ak-editor-table-cell-background-".concat(colorname.toLowerCase().split(' ').join('-'), ")") : getCustomCellColor(background);
+};
+
+/**
+ * A layer painting `color` over the cell's own background and under its content, so the cell reads
+ * as having the new background without any of the cell's own attributes being overridden: removing
+ * a decoration removes the attributes it set rather than restoring the ones they replaced.
+ */
+var createCellBackgroundLayer = function createCellBackgroundLayer(color) {
+  var layer = document.createElement('div');
+  layer.setAttribute('aria-hidden', 'true');
+  layer.contentEditable = 'false';
+  layer.dataset.testid = 'show-diff-new-cell-background';
+  layer.setAttribute('style', (0, _cssHelper.convertToInlineCss)({
+    position: 'absolute',
+    inset: 0,
+    zIndex: -1,
+    borderRadius: 'inherit',
+    pointerEvents: 'none',
+    backgroundColor: color
+  }));
+  return layer;
+};
+
+/** The other side's cell content, as blocks, for the top of the live cell. */
+var createCellContentWidget = function createCellContentWidget(_ref2) {
+  var cell = _ref2.cell,
+    pos = _ref2.pos,
+    nodeViewSerializer = _ref2.nodeViewSerializer,
+    colorScheme = _ref2.colorScheme,
+    intl = _ref2.intl,
+    isActive = _ref2.isActive,
+    isInserted = _ref2.isInserted,
+    leftAnchorId = _ref2.leftAnchorId;
+  var dom = document.createElement('div');
+  cell.content.forEach(function (block) {
+    var nodeView = nodeViewSerializer.tryCreateNodeView(block, 0, undefined, isInserted, colorScheme);
+    if (nodeView) {
+      (0, _wrapBlockNodeView.wrapBlockNodeView)({
+        dom: dom,
+        nodeView: nodeView,
+        targetNode: block,
+        colorScheme: colorScheme,
+        intl: intl,
+        isActive: isActive,
+        isInserted: isInserted
+      });
+      return;
+    }
+    var serialized = nodeViewSerializer.serializeNode(block);
+    if (serialized instanceof HTMLElement) {
+      dom.append((0, _wrapBlockNodeView.injectInnerWrapper)({
+        node: serialized,
+        colorScheme: colorScheme,
+        isActive: isActive,
+        isInserted: isInserted
+      }));
+    }
+  });
+  if (dom.childNodes.length === 0) {
+    return undefined;
+  }
+  dom.setAttribute('data-testid', isInserted ? 'show-diff-changed-decoration' : 'show-diff-deleted-decoration');
+
+  // Before the cell's own blocks, as a block of its own, so it never lands inside a paragraph the
+  // displayed side may hide.
+  return _view.Decoration.widget(pos + 1, dom, _objectSpread(_objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)({
+    colorScheme: colorScheme,
+    decorationType: 'widget',
+    diffId: crypto.randomUUID(),
+    leftAnchorId: leftAnchorId,
+    isActive: isActive,
+    isInserted: isInserted,
+    side: -1
+  })), {}, {
+    marks: []
+  }));
+};
+
+/**
+ * The other side of a whole-cell replacement, drawn inside the live cells so the table keeps its
+ * shape: each live cell takes the other cell's background when it differs, and its content when that
+ * differs. A cell whose content did not change has nothing to diff.
+ */
+var createReplacedCellWidgets = exports.createReplacedCellWidgets = function createReplacedCellWidgets(_ref3) {
+  var slice = _ref3.slice,
+    newDoc = _ref3.newDoc,
+    change = _ref3.change,
+    nodeViewSerializer = _ref3.nodeViewSerializer,
+    colorScheme = _ref3.colorScheme,
+    intl = _ref3.intl,
+    isActive = _ref3.isActive,
+    isInserted = _ref3.isInserted,
+    leftAnchorId = _ref3.leftAnchorId;
+  return getReplacedCells({
+    slice: slice,
+    doc: newDoc,
+    fromB: change.fromB,
+    toB: change.toB
+  }).flatMap(function (_ref4) {
+    var otherCell = _ref4.otherCell,
+      liveCell = _ref4.liveCell,
+      liveCellPos = _ref4.liveCellPos;
+    var decorations = [];
+    if (isInserted && (0, _cellAttrs.isCellBackgroundChanged)(otherCell, liveCell)) {
+      var cellEnd = liveCellPos + liveCell.nodeSize;
+      decorations.push(
+      // The cell becomes the layer's stacking context, so the layer sits above the cell's own
+      // background rather than behind it. Through `z-index` at the cell overlay's own level, not
+      // `isolation`: an isolated cell would trap its overlay below later cells, which then cover
+      // the overlay's outline where it overlaps their border. Properties the cell never sets, so
+      // removing them takes nothing of its own.
+      _view.Decoration.node(liveCellPos, cellEnd, {
+        style: (0, _cssHelper.convertToInlineCss)({
+          position: 'relative',
+          // The highest z-index a cell diff overlay takes (the rounded-corner variant).
+          zIndex: 2
+        })
+      }, {
+        key: "show-diff-new-cell-background-host-".concat(liveCellPos)
+      }),
+      // At the cell's end, beside its diff overlay, so the cell's first block stays its first child.
+      _view.Decoration.widget(cellEnd - 1, createCellBackgroundLayer(getCellBackgroundColor(otherCell)), {
+        key: "show-diff-new-cell-background-".concat(liveCellPos),
+        side: -1,
+        marks: [],
+        ignoreSelection: true
+      }));
+    }
+    if (!isCellContentEqual(otherCell, liveCell)) {
+      var contentWidget = createCellContentWidget({
+        cell: otherCell,
+        pos: liveCellPos,
+        nodeViewSerializer: nodeViewSerializer,
+        colorScheme: colorScheme,
+        intl: intl,
+        isActive: isActive,
+        isInserted: isInserted,
+        leftAnchorId: leftAnchorId
+      });
+      if (contentWidget) {
+        decorations.push(contentWidget);
+      }
+    }
+    return decorations;
+  });
+};
+
+/**
+ * The displayed side of a whole-cell replacement. A table cell is never removed on its own, only
+ * replaced in place, so a live cell is never hidden — hiding it would leave the row a cell short. It
+ * takes the changed-cell treatment only when the cell itself changed; its content is diffed, and
+ * hidden in the clean view, only when that changed. A cell whose content stayed the same keeps
+ * showing it.
+ */
+var createReplacedCellDecorations = exports.createReplacedCellDecorations = function createReplacedCellDecorations(_ref5) {
+  var replacedCells = _ref5.replacedCells,
+    change = _ref5.change,
+    doc = _ref5.doc,
+    attributionKey = _ref5.attributionKey,
+    colorScheme = _ref5.colorScheme,
+    hasDeletedWidget = _ref5.hasDeletedWidget,
+    hideAddedDiffsUnderline = _ref5.hideAddedDiffsUnderline,
+    isActive = _ref5.isActive,
+    isDeletedWidgetBelow = _ref5.isDeletedWidgetBelow,
+    isInserted = _ref5.isInserted,
+    leftAnchorId = _ref5.leftAnchorId,
+    reveal = _ref5.reveal,
+    shouldHideDeleted = _ref5.shouldHideDeleted,
+    showContributorTags = _ref5.showContributorTags,
+    showIndicators = _ref5.showIndicators,
+    tagMountContext = _ref5.tagMountContext;
+  return replacedCells.flatMap(function (_ref6) {
+    var otherCell = _ref6.otherCell,
+      liveCell = _ref6.liveCell,
+      liveCellPos = _ref6.liveCellPos;
+    var cellEnd = liveCellPos + liveCell.nodeSize;
+    var decorations = isCellChanged(otherCell, liveCell) ? (0, _createBlockChangedDecoration.createBlockChangedDecoration)({
+      attributionKey: attributionKey,
+      change: {
+        from: liveCellPos,
+        to: cellEnd,
+        name: liveCell.type.name
+      },
+      colorScheme: colorScheme,
+      doc: doc,
+      isActive: isActive,
+      // The cell stays either way, so it reads as changed, not removed.
+      isInserted: true,
+      leftAnchorId: leftAnchorId,
+      showContributorTags: showContributorTags,
+      showIndicators: showIndicators,
+      tagMountContext: tagMountContext
+    }) : [];
+    if (isCellContentEqual(otherCell, liveCell)) {
+      return decorations;
+    }
+    decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createInlineChangedDecoration.createInlineChangedDecoration)({
+      attributionKey: attributionKey,
+      change: _objectSpread(_objectSpread({}, change), {}, {
+        fromB: liveCellPos,
+        toB: cellEnd
+      }),
+      colorScheme: colorScheme,
+      doc: doc,
+      hasDeletedWidget: hasDeletedWidget,
+      hideAddedDiffsUnderline: hideAddedDiffsUnderline,
+      isActive: isActive,
+      isDeletedWidgetBelow: isDeletedWidgetBelow,
+      isInserted: isInserted,
+      leftAnchorId: leftAnchorId,
+      reveal: reveal,
+      shouldHideDeleted: shouldHideDeleted,
+      showContributorTags: showContributorTags,
+      showIndicators: showIndicators,
+      tagMountContext: tagMountContext
+    })));
+    if (shouldHideDeleted) {
+      liveCell.forEach(function (block, offset) {
+        var blockPos = liveCellPos + 1 + offset;
+        decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createBlockChangedDecoration.createBlockChangedDecoration)({
+          change: {
+            from: blockPos,
+            to: blockPos + block.nodeSize,
+            name: block.type.name
+          },
+          colorScheme: colorScheme,
+          doc: doc,
+          isActive: isActive,
+          isInserted: isInserted,
+          leftAnchorId: leftAnchorId,
+          shouldHideDeleted: shouldHideDeleted
+        })));
+      });
+    }
+    return decorations;
+  });
+};

package/dist/cjs/pm-plugins/decorations/utils/cellAttrs.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeCellBackground = exports.isCellBackgroundChanged = exports.isCellAttrChanged = void 0;
+var _diffableAttrs = require("./diffableAttrs");
+/**
+ * A cell background as it renders: absent, empty and `"null"` — the string agent payloads send for
+ * no background — all mean the cell has none.
+ */
+var normalizeCellBackground = exports.normalizeCellBackground = function normalizeCellBackground(background) {
+  return typeof background === 'string' && background !== '' && background !== 'null' ? background : null;
+};
+
+/** Whether two cells render different backgrounds. */
+var isCellBackgroundChanged = exports.isCellBackgroundChanged = function isCellBackgroundChanged(left, right) {
+  return normalizeCellBackground(left.attrs.background) !== normalizeCellBackground(right.attrs.background);
+};
+
+/**
+ * Whether two cells differ by an attribute that represents a change, such as their background or
+ * span, as opposed to only their content.
+ */
+var isCellAttrChanged = exports.isCellAttrChanged = function isCellAttrChanged(left, right) {
+  var _getDiffableAttrNames;
+  return ((_getDiffableAttrNames = (0, _diffableAttrs.getDiffableAttrNames)(left.type.name, left.attrs)) !== null && _getDiffableAttrNames !== void 0 ? _getDiffableAttrNames : []).some(function (name) {
+    return name === 'background' ? isCellBackgroundChanged(left, right) : left.attrs[name] !== right.attrs[name];
+  });
+};

package/dist/cjs/pm-plugins/decorations/utils/createNodeShapedMarginSpacer.js

@@ -4,16 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createNodeShapedMarginSpacer = void 0;
+var _panel = require("@atlaskit/editor-common/styles/panel");
+var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
 /**
  * Node types that can safely be reduced to an empty shell.
  *
  * A shell only replicates a margin if it collapses to nothing itself, which needs zero height and
- * no vertical border or padding. Textblocks and lists qualify; nodes with intrinsic sizing (tables
- * are `display: table`, media has a measured height) or a painted box (a zero-height panel is a
- * visible stripe of background) do not, and are left alone.
+ * no vertical border or padding. Textblocks and lists qualify; panels need their painted box
+ * hidden and their flex layout removed. Nodes with intrinsic sizing (tables are `display: table`,
+ * media has a measured height) are left alone.
  */
 var isShapeableNode = function isShapeableNode(node) {
-  return node.isTextblock || ['bulletList', 'orderedList'].includes(node.type.name);
+  return node.isTextblock || ['bulletList', 'orderedList'].includes(node.type.name) || (0, _nodeTypeUtils.getBaseNodeTypeName)(node.type) === 'panel';
 };
 
 /**
@@ -57,6 +59,13 @@ var createNodeShapedMarginSpacer = exports.createNodeShapedMarginSpacer = functi
   serialized.dataset.testid = testId;
   serialized.setAttribute('aria-hidden', 'true');
   serialized.contentEditable = 'false';
+  if ((0, _nodeTypeUtils.getBaseNodeTypeName)(node.type) === 'panel') {
+    // Schema serialization lacks the node view's class, which carries the panel's margin.
+    // Hide the painted shell and allow its margins to collapse through a zero-height block.
+    serialized.classList.add(_panel.PanelSharedCssClassName.prefix);
+    serialized.style.display = 'block';
+    serialized.style.visibility = 'hidden';
+  }
 
   // Zero height with no vertical border or padding keeps the spacer self-collapsing: its margins
   // stay adjoining, so they collapse with the neighbours into a single margin equal to the largest