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

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

@@ -10,6 +10,7 @@ import { clampAnchorPosIntoCell, createAnchorNameSpan, createLeftAnchorWidget }
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { createContributorTagHost, resolveHoistedCodeBlockAnchor, unmountContributorTag } from './createContributorTagWidget';
 import { getAtomicInlineChangedAttrs } from './createInlineChangedDecoration';
+import { createReplacedCellWidgets } from './createReplacedCellDecorations';
 import { AnchorTypeKey, buildContributorTagDecorationSpec, buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
 import { absorbFirstChildMarginReset } from './utils/absorbFirstChildMarginReset';
 import { createDeletedLineBreakDecoration } from './utils/createDeletedLineBreakWidget';
@@ -214,6 +215,19 @@ export const createNodeChangedDecorationWidget = ({
     isInserted
   });
   if (tableDiffMode.kind === 'cells') {
+    if (fg('platform_editor_ai_show_diff_patch_2')) {
+      return createReplacedCellWidgets({
+        slice,
+        newDoc,
+        change,
+        nodeViewSerializer,
+        colorScheme,
+        intl,
+        isActive,
+        isInserted,
+        leftAnchorId
+      });
+    }
     return createTableCellContentWidgets({
       slice,
       newDoc,

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

@@ -0,0 +1,338 @@
+import { getDarkModeLCHColor } from '@atlaskit/adf-schema/get-dark-mode-lch-color';
+import { isRgb } from '@atlaskit/adf-schema/is-rgb';
+import { rgbToHex } from '@atlaskit/adf-schema/rgb-to-hex';
+import { getCellDomAttrs } from '@atlaskit/adf-schema/tableNodes';
+import { convertToInlineCss } from '@atlaskit/editor-common/css-helper';
+import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { createBlockChangedDecoration } from './createBlockChangedDecoration';
+import { createInlineChangedDecoration } from './createInlineChangedDecoration';
+import { buildDiffDecorationSpec } from './decorationKeys';
+import { isCellAttrChanged, isCellBackgroundChanged, normalizeCellBackground } from './utils/cellAttrs';
+import { injectInnerWrapper, wrapBlockNodeView } from './utils/wrapBlockNodeView';
+const 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.
+ */
+export const getReplacedCells = ({
+  slice,
+  doc,
+  fromB,
+  toB
+}) => {
+  const otherCells = slice.content.content;
+  if (slice.openStart !== 0 || slice.openEnd !== 0 || otherCells.length === 0 || !otherCells.every(node => CELL_TYPE_NAMES.includes(node.type.name))) {
+    return [];
+  }
+  const liveCells = [];
+  doc.nodesBetween(fromB, toB, (node, pos) => {
+    if (CELL_TYPE_NAMES.includes(node.type.name)) {
+      liveCells.push({
+        node,
+        pos
+      });
+      return false;
+    }
+    return true;
+  });
+  if (liveCells.length !== otherCells.length) {
+    return [];
+  }
+  return otherCells.map((otherCell, index) => ({
+    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.
+ */
+const isCellContentEqual = (left, right) => {
+  if (left.childCount !== right.childCount) {
+    return false;
+  }
+  for (let index = 0; index < left.childCount; index++) {
+    if (!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.
+ */
+const isCellChanged = (left, right) => left.type !== right.type || 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.
+ */
+const getCustomCellColor = background => {
+  const color = isRgb(background) && rgbToHex(background) || background;
+  if (color.startsWith('var(') || document.documentElement.getAttribute('data-color-mode') !== 'dark') {
+    return background;
+  }
+  return 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.
+ */
+const getCellBackgroundColor = cell => {
+  const background = normalizeCellBackground(cell.attrs.background);
+  if (!background) {
+    return cell.type.name === 'tableHeader' ? "var(--ds-background-accent-gray-subtlest, #F0F1F2)" : "var(--ds-surface, #FFFFFF)";
+  }
+  const {
+    colorname
+  } = getCellDomAttrs(cell);
+  return colorname ? `var(--ak-editor-table-cell-background-${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.
+ */
+const createCellBackgroundLayer = color => {
+  const layer = document.createElement('div');
+  layer.setAttribute('aria-hidden', 'true');
+  layer.contentEditable = 'false';
+  layer.dataset.testid = 'show-diff-new-cell-background';
+  layer.setAttribute('style', 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. */
+const createCellContentWidget = ({
+  cell,
+  pos,
+  nodeViewSerializer,
+  colorScheme,
+  intl,
+  isActive,
+  isInserted,
+  leftAnchorId
+}) => {
+  const dom = document.createElement('div');
+  cell.content.forEach(block => {
+    const nodeView = nodeViewSerializer.tryCreateNodeView(block, 0, undefined, isInserted, colorScheme);
+    if (nodeView) {
+      wrapBlockNodeView({
+        dom,
+        nodeView,
+        targetNode: block,
+        colorScheme,
+        intl,
+        isActive,
+        isInserted
+      });
+      return;
+    }
+    const serialized = nodeViewSerializer.serializeNode(block);
+    if (serialized instanceof HTMLElement) {
+      dom.append(injectInnerWrapper({
+        node: serialized,
+        colorScheme,
+        isActive,
+        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 Decoration.widget(pos + 1, dom, {
+    ...buildDiffDecorationSpec({
+      colorScheme,
+      decorationType: 'widget',
+      diffId: crypto.randomUUID(),
+      leftAnchorId,
+      isActive,
+      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.
+ */
+export const createReplacedCellWidgets = ({
+  slice,
+  newDoc,
+  change,
+  nodeViewSerializer,
+  colorScheme,
+  intl,
+  isActive,
+  isInserted,
+  leftAnchorId
+}) => getReplacedCells({
+  slice,
+  doc: newDoc,
+  fromB: change.fromB,
+  toB: change.toB
+}).flatMap(({
+  otherCell,
+  liveCell,
+  liveCellPos
+}) => {
+  const decorations = [];
+  if (isInserted && isCellBackgroundChanged(otherCell, liveCell)) {
+    const 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.
+    Decoration.node(liveCellPos, cellEnd, {
+      style: 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-${liveCellPos}`
+    }),
+    // At the cell's end, beside its diff overlay, so the cell's first block stays its first child.
+    Decoration.widget(cellEnd - 1, createCellBackgroundLayer(getCellBackgroundColor(otherCell)), {
+      key: `show-diff-new-cell-background-${liveCellPos}`,
+      side: -1,
+      marks: [],
+      ignoreSelection: true
+    }));
+  }
+  if (!isCellContentEqual(otherCell, liveCell)) {
+    const contentWidget = createCellContentWidget({
+      cell: otherCell,
+      pos: liveCellPos,
+      nodeViewSerializer,
+      colorScheme,
+      intl,
+      isActive,
+      isInserted,
+      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.
+ */
+export const createReplacedCellDecorations = ({
+  replacedCells,
+  change,
+  doc,
+  attributionKey,
+  colorScheme,
+  hasDeletedWidget,
+  hideAddedDiffsUnderline,
+  isActive,
+  isDeletedWidgetBelow,
+  isInserted,
+  leftAnchorId,
+  reveal,
+  shouldHideDeleted,
+  showContributorTags,
+  showIndicators,
+  tagMountContext
+}) => replacedCells.flatMap(({
+  otherCell,
+  liveCell,
+  liveCellPos
+}) => {
+  const cellEnd = liveCellPos + liveCell.nodeSize;
+  const decorations = isCellChanged(otherCell, liveCell) ? createBlockChangedDecoration({
+    attributionKey,
+    change: {
+      from: liveCellPos,
+      to: cellEnd,
+      name: liveCell.type.name
+    },
+    colorScheme,
+    doc,
+    isActive,
+    // The cell stays either way, so it reads as changed, not removed.
+    isInserted: true,
+    leftAnchorId,
+    showContributorTags,
+    showIndicators,
+    tagMountContext
+  }) : [];
+  if (isCellContentEqual(otherCell, liveCell)) {
+    return decorations;
+  }
+  decorations.push(...createInlineChangedDecoration({
+    attributionKey,
+    change: {
+      ...change,
+      fromB: liveCellPos,
+      toB: cellEnd
+    },
+    colorScheme,
+    doc,
+    hasDeletedWidget,
+    hideAddedDiffsUnderline,
+    isActive,
+    isDeletedWidgetBelow,
+    isInserted,
+    leftAnchorId,
+    reveal,
+    shouldHideDeleted,
+    showContributorTags,
+    showIndicators,
+    tagMountContext
+  }));
+  if (shouldHideDeleted) {
+    liveCell.forEach((block, offset) => {
+      const blockPos = liveCellPos + 1 + offset;
+      decorations.push(...createBlockChangedDecoration({
+        change: {
+          from: blockPos,
+          to: blockPos + block.nodeSize,
+          name: block.type.name
+        },
+        colorScheme,
+        doc,
+        isActive,
+        isInserted,
+        leftAnchorId,
+        shouldHideDeleted
+      }));
+    });
+  }
+  return decorations;
+});

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

@@ -0,0 +1,19 @@
+import { getDiffableAttrNames } from './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.
+ */
+export const normalizeCellBackground = background => typeof background === 'string' && background !== '' && background !== 'null' ? background : null;
+
+/** Whether two cells render different backgrounds. */
+export const isCellBackgroundChanged = (left, right) => 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.
+ */
+export const isCellAttrChanged = (left, right) => {
+  var _getDiffableAttrNames;
+  return ((_getDiffableAttrNames = getDiffableAttrNames(left.type.name, left.attrs)) !== null && _getDiffableAttrNames !== void 0 ? _getDiffableAttrNames : []).some(name => name === 'background' ? isCellBackgroundChanged(left, right) : left.attrs[name] !== right.attrs[name]);
+};

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

@@ -22,6 +22,7 @@ import { createDocMarginAnchorWidget } from '../decorations/createAnchorDecorati
 import { createBlockChangedDecoration } from '../decorations/createBlockChangedDecoration';
 import { createInlineChangedDecoration } from '../decorations/createInlineChangedDecoration';
 import { createNodeChangedDecorationWidget } from '../decorations/createNodeChangedDecorationWidget';
+import { createReplacedCellDecorations, getReplacedCells } from '../decorations/createReplacedCellDecorations';
 import { extractDiffDescriptors } from '../decorations/decorationKeys';
 import { extractContributorTags } from '../decorations/extractContributorTags';
 import { createDeletedLineBreakDecoration } from '../decorations/utils/createDeletedLineBreakWidget';
@@ -596,7 +597,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 && 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 && fg('platform_editor_ai_show_diff_patch_2')) && change.deleted.length > 0 && isMarkOnlyChange({
       change: change,
       originalDoc: originalDoc,
       newDoc: tr.doc
@@ -682,7 +687,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 = fg('platform_editor_ai_show_diff_patch_2') ? 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, _toConsumableArray(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.
@@ -742,7 +775,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
           tagMountContext: tagMountContext
         })));
       }
-      decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration({
+      decorations.push.apply(decorations, _toConsumableArray(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,

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

@@ -11,6 +11,7 @@ import { Mark } from '@atlaskit/editor-prosemirror/model';
 import { Mapping, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getAttributionKey } from '../decorations/colorSchemes/attributions';
+import { isCellAttrChanged } from '../decorations/utils/cellAttrs';
 import { buildCharsByOffset } from '../utils/charsByOffset';
 import { attrAwareTokenEncoder } from './attrAwareTokenEncoder';
 import { optimizeChanges } from './optimizeChanges';
@@ -27,6 +28,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) && isCellAttrChanged(replacedNode, replacingNode);
+};
 var mapPosition = function mapPosition(mapping, pos) {
   return mapping.map(pos);
 };
@@ -230,7 +241,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)
  */
@@ -268,7 +280,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/esm/pm-plugins/decorations/createNodeChangedDecorationWidget.js

@@ -13,6 +13,7 @@ import { clampAnchorPosIntoCell, createAnchorNameSpan, createLeftAnchorWidget }
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { createContributorTagHost, resolveHoistedCodeBlockAnchor, unmountContributorTag } from './createContributorTagWidget';
 import { getAtomicInlineChangedAttrs } from './createInlineChangedDecoration';
+import { createReplacedCellWidgets } from './createReplacedCellDecorations';
 import { AnchorTypeKey, buildContributorTagDecorationSpec, buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
 import { absorbFirstChildMarginReset } from './utils/absorbFirstChildMarginReset';
 import { createDeletedLineBreakDecoration } from './utils/createDeletedLineBreakWidget';
@@ -216,6 +217,19 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     isInserted: isInserted
   });
   if (tableDiffMode.kind === 'cells') {
+    if (fg('platform_editor_ai_show_diff_patch_2')) {
+      return 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,