@atlaskit/editor-plugin-show-diff 17.0.1 → 17.0.2

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

@@ -1,17 +1,20 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { isExtendedEnabled } from '../isExtendedEnabled';
+import { countEmptyTextBlockOnlySlice } from '../utils/emptyTextBlocks';
 import { isEmptyParagraphSlice } from '../utils/isEmptyParagraphSlice';
 import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { createContributorTagHost, unmountContributorTag } from './createContributorTagWidget';
-import { buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
+import { AnchorTypeKey, buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
 import { absorbFirstChildMarginReset } from './utils/absorbFirstChildMarginReset';
+import { createDeletedLineBreakDecoration } from './utils/createDeletedLineBreakWidget';
 import { createMarginAbsorber } from './utils/createMarginAbsorber';
 import { createNodeShapedMarginSpacer } from './utils/createNodeShapedMarginSpacer';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { safeResolve } from './utils/safeResolve';
-import { wrapBlockNodeView, injectInnerWrapper, createContentWrapper } from './utils/wrapBlockNodeView';
+import { getTableDiffMode } from './utils/tableDiffMode';
+import { wrapBlockNodeView, createRemovedLozenge, injectInnerWrapper, createContentWrapper } from './utils/wrapBlockNodeView';
 const isHeadingLevel = level => typeof level === 'number' && level >= 1 && level <= 6;
 
 /**
@@ -119,11 +122,20 @@ export const createNodeChangedDecorationWidget = ({
   diffType,
   hideAddedDiffsUnderline = false,
   reveal,
-  tagMountContext
+  tagMountContext,
+  deletedColumns
 }) => {
   var _$safeInsertPos$nodeB, _slice$content$firstC, _newDoc$firstChild, _slice$content$firstC2;
   const slice = doc.slice(change.fromA, change.toA);
   const shouldSkipDeletedEmptyParagraphDecoration = !isInserted && isEmptyParagraphSlice(slice);
+  // How many blank lines the deletion took, when it took nothing else. Blank means an empty
+  // paragraph or heading — both are a line the author put there deliberately, and neither leaves
+  // the widget any content to serialize.
+  //
+  // Kept separate from `shouldSkipDeletedEmptyParagraphDecoration` and gated, so the ungated early
+  // return below still covers only the single-empty-paragraph case it always did. Everything else
+  // degrades to what it rendered before the gate: an empty block, serialized invisibly.
+  const deletedBlankLineCount = !isInserted && fg('platform_editor_ai_show_diff_patch_2') ? countEmptyTextBlockOnlySlice(slice) : 0;
   // Widget decoration used for deletions as the content is not in the document
   // and we want to display the deleted content with a style.
   // For `placeBelow`, anchor at the END of the new content (change.toB) so the deleted
@@ -131,16 +143,33 @@ export const createNodeChangedDecorationWidget = ({
   const anchorPos = placeBelow ? change.toB : change.fromB;
   const safeInsertPos = findSafeInsertPos(newDoc, anchorPos, slice);
   const isActive = activeIndexPos && (fg('confluence_ncs_step_diffing_version_history') ? safeInsertPos >= activeIndexPos.from && safeInsertPos <= activeIndexPos.to : safeInsertPos === activeIndexPos.from && safeInsertPos === activeIndexPos.to);
-  if (slice.content.content.length === 0 || shouldSkipDeletedEmptyParagraphDecoration) {
+  if (deletedBlankLineCount > 0) {
+    // The blocks have no content to serialize, so the deletion is shown as one struck-through
+    // return glyph per line the author removed. A single widget, not one per line: the lines are
+    // gone from `newDoc`, so they all resolve to the same anchor and separate widgets would stack.
+    //
+    // No attribution: the glyph is not a tag host, matching `canTagWidget` below.
+    return [createDeletedLineBreakDecoration({
+      colorScheme,
+      count: deletedBlankLineCount,
+      diffType,
+      isActive,
+      pos: safeInsertPos,
+      reveal,
+      side: placeBelow ? 1 : -1
+    })];
+  }
+  if (shouldSkipDeletedEmptyParagraphDecoration) {
     return [];
   }
-  const isTableCellContent = slice.content.content.some(() => slice.content.content.some(siblingNode => ['tableHeader', 'tableCell'].includes(siblingNode.type.name)));
-  const isTableRowContent = slice.content.content.some(() => slice.content.content.some(siblingNode => ['tableRow'].includes(siblingNode.type.name)));
-
-  // Added whole cells (e.g. "Add table headers"): render per-cell content widgets.
-  // Deleted whole cells (delete row/col) fall through — they don't exist in `newDoc`,
-  // so there's nowhere to anchor content and we keep the original "render nothing".
-  if (isTableCellContent && isInserted) {
+  if (slice.content.content.length === 0) {
+    return [];
+  }
+  const tableDiffMode = getTableDiffMode({
+    slice,
+    isInserted
+  });
+  if (tableDiffMode.kind === 'cells') {
     return createTableCellContentWidgets({
       slice,
       newDoc,
@@ -151,11 +180,10 @@ export const createNodeChangedDecorationWidget = ({
       diffType
     });
   }
-  if (isTableCellContent) {
-    // Deleted whole cells: nothing to render (see note above).
+  if (tableDiffMode.kind === 'none') {
     return [];
   }
-  if (isTableRowContent) {
+  if (tableDiffMode.kind === 'rows') {
     return createChangedRowDecorationWidgets({
       attributionKey,
       changes: [change],
@@ -166,6 +194,7 @@ export const createNodeChangedDecorationWidget = ({
       isActive,
       isInserted,
       diffType,
+      intl,
       // Needed for the row's own indicator anchor; this path returns before the
       // `anchor-name` assignment further down.
       showIndicators,
@@ -173,6 +202,9 @@ export const createNodeChangedDecorationWidget = ({
       tagMountContext
     });
   }
+  // `wholeTable` and `generic` both continue into the generic block widget below. Splitting the
+  // whole-table case into its own renderer is the next step of this refactor.
+
   const serializer = nodeViewSerializer;
 
   // For non-table content, use the existing span wrapper approach
@@ -368,6 +400,40 @@ export const createNodeChangedDecorationWidget = ({
       }
     }
   });
+  let contributorTagAnchorName;
+  if (!isInserted && deletedColumns !== null && deletedColumns !== void 0 && deletedColumns.length) {
+    const table = dom.querySelector('table');
+    const firstRow = table === null || table === void 0 ? void 0 : table.rows[0];
+    if (table && canTagWidget) {
+      contributorTagAnchorName = buildAnchorDecorationKey({
+        diffId,
+        anchorType: AnchorTypeKey.tag
+      });
+      // The widget host sits before the table's preserved block margin. Anchor the tag to the
+      // table itself so its bottom edge meets the table's top edge with no visual gap.
+      table.style.setProperty('anchor-name', `--${contributorTagAnchorName}`);
+    }
+    deletedColumns.forEach(column => {
+      var _table$rows;
+      Array.from((_table$rows = table === null || table === void 0 ? void 0 : table.rows) !== null && _table$rows !== void 0 ? _table$rows : []).forEach(row => {
+        var _cell$children;
+        const cell = row.cells[column];
+        Array.from((_cell$children = cell === null || cell === void 0 ? void 0 : cell.children) !== null && _cell$children !== void 0 ? _cell$children : []).forEach(child => {
+          if (child instanceof HTMLElement) {
+            child.style.setProperty('text-decoration-line', 'line-through');
+          }
+        });
+      });
+      const headerCell = firstRow === null || firstRow === void 0 ? void 0 : firstRow.cells[column];
+      if (headerCell) {
+        headerCell.style.position = 'relative';
+        // Append, never prepend. Editor CSS resets the top margin of a cell's first child, so
+        // a prepended label pushes the paragraph out of that reset and the cell grows.
+        // The label is absolutely positioned, so DOM order does not move it.
+        headerCell.append(createRemovedLozenge(intl, isActive, colorScheme, true));
+      }
+    });
+  }
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
   if (fg('platform_editor_ai_show_diff_patch_1')) {
     dom.style.setProperty('scroll-margin-top', scrollMarginTopValue);
@@ -405,7 +471,11 @@ export const createNodeChangedDecorationWidget = ({
 
     // Hosted at the start of the deleted run rather than on `dom` itself: `dom` is inline, so once
     // the deleted content wraps its box is the union of its line fragments.
-    const tagHost = createContributorTagHost(diffId, tagMountContext);
+    const tagHost = createContributorTagHost({
+      anchorName: contributorTagAnchorName,
+      diffId,
+      mountContext: tagMountContext
+    });
     if (tagHost) {
       dom.prepend(tagHost.host);
       tagMount = tagHost.mount;

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

@@ -0,0 +1,100 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { isExtendedEnabled } from '../../isExtendedEnabled';
+import { buildDiffDecorationSpec, scrollMarginTopValue } from '../decorationKeys';
+import { createContentWrapper } from './wrapBlockNodeView';
+
+/**
+ * U+2936 ARROW POINTING DOWNWARDS THEN CURVING LEFTWARDS — the return-key glyph.
+ *
+ * Exported so tests assert against the glyph actually rendered rather than a copy of it.
+ */
+export const RETURN_GLYPH = '⤶';
+
+/**
+ * The DOM for a removed blank line: the return glyph, struck through in the deleted colours.
+ *
+ * An empty paragraph or heading is a line the author deliberately added, but it has no content for
+ * the deleted-content widget to serialize, so a deletion of one used to render nothing at all — the
+ * reviewer saw the surrounding text close up with no sign of what was removed. Standing the glyph
+ * in for the absent content keeps the deletion visible without inventing content that was not there.
+ *
+ * `createContentWrapper` supplies the highlight and the strikethrough line, so the glyph is styled
+ * exactly like any other run of deleted inline content, including the active and reveal states.
+ *
+ * Hidden from assistive technology: the glyph is a picture of a key, and read out it is announced as
+ * its Unicode name rather than as a removed line.
+ */
+export const createDeletedLineBreakWidget = ({
+  colorScheme,
+  count = 1,
+  diffType,
+  isActive = false,
+  reveal
+}) => {
+  const dom = document.createElement('span');
+  // The testid deleted content is matched by, so the glyph is found wherever deleted content is.
+  dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
+  dom.setAttribute('aria-hidden', 'true');
+  dom.contentEditable = 'false';
+  // Scroll navigation aligns on the widget itself, as it does for every other deleted widget.
+  dom.style.setProperty('scroll-margin-top', scrollMarginTopValue);
+  for (let index = 0; index < Math.max(count, 1); index++) {
+    if (index > 0) {
+      // Each removed line gets its own line in the widget, so a run of blank lines reads as the
+      // number of lines it was. `br` rather than a block wrapper: the widget is inline, and the
+      // deleted-content wrapper is styled as an inline run.
+      dom.append(dom.ownerDocument.createElement('br'));
+    }
+    const wrapper = createContentWrapper(colorScheme, isActive, false, diffType, reveal);
+    wrapper.append(dom.ownerDocument.createTextNode(RETURN_GLYPH));
+    dom.append(wrapper);
+  }
+  return dom;
+};
+
+/**
+ * The glyph as a widget decoration anchored at `pos`.
+ *
+ * Shared by the two shapes a blank-line removal arrives in. On a forward diff the block is gone from
+ * the new document, so the change lands on the deleted side and the glyph is anchored where the
+ * block used to be. On an inverted diff — what AI suggested edits renders — the block is still in
+ * the displayed document and the change lands on the *inserted* side, so the glyph is anchored
+ * inside the surviving block, on the blank line itself.
+ */
+export const createDeletedLineBreakDecoration = ({
+  attributionKey,
+  colorScheme,
+  count,
+  diffType,
+  isActive = false,
+  pos,
+  reveal,
+  side
+}) => Decoration.widget(pos, createDeletedLineBreakWidget({
+  colorScheme,
+  count,
+  diffType,
+  isActive,
+  reveal
+}), {
+  ...buildDiffDecorationSpec({
+    attributionKey,
+    colorScheme,
+    decorationType: 'widget',
+    diffId: crypto.randomUUID(),
+    isActive,
+    // The glyph always stands in for removed content, whichever side of the changeset the
+    // change itself landed on.
+    isInserted: false,
+    diffType,
+    ...(isExtendedEnabled(diffType) && side !== undefined && {
+      side
+    })
+  }),
+  // Without an explicit mark set, prosemirror-view wraps the widget in the marks of the
+  // adjacent text. The glyph carries its own deleted styling and must not inherit them.
+  ...(fg('platform_editor_diff_inline_mark_changes') && {
+    marks: []
+  })
+});

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

@@ -0,0 +1,27 @@
+const CELL_TYPE_NAMES = ['tableCell', 'tableHeader'];
+export const getTableDiffMode = ({
+  slice,
+  isInserted
+}) => {
+  const topLevelNodes = slice.content.content;
+  if (topLevelNodes.some(node => CELL_TYPE_NAMES.includes(node.type.name))) {
+    return isInserted ? {
+      kind: 'cells'
+    } : {
+      kind: 'none'
+    };
+  }
+  if (topLevelNodes.some(node => node.type.name === 'tableRow')) {
+    return {
+      kind: 'rows'
+    };
+  }
+  if (topLevelNodes.length === 1 && topLevelNodes[0].type.name === 'table' && slice.openStart === 0 && slice.openEnd === 0) {
+    return {
+      kind: 'wholeTable'
+    };
+  }
+  return {
+    kind: 'generic'
+  };
+};

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

@@ -139,24 +139,34 @@ const applyCellOverlayStyles = ({
 /**
  * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
  */
-const createRemovedLozenge = (intl, isActive = false, colorScheme) => {
+export const createRemovedLozenge = (intl, isActive = false, colorScheme, inCell = false) => {
   const container = document.createElement('span');
   const containerStyle = convertToInlineCss({
     position: 'absolute',
     top: "var(--ds-space-075, 6px)",
     right: "var(--ds-space-075, 6px)",
-    zIndex: 2,
+    // Rounded table-cell overlays use z-index 2 and are appended after the cell content.
+    // Keep the lozenge above them so the overlay cannot tint or obscure it.
+    zIndex: 3,
     pointerEvents: 'none',
     display: 'flex'
   });
-  container.setAttribute('style', containerStyle);
-  container.setAttribute('data-testid', 'show-diff-removed-lozenge');
 
   // Create vanilla HTML lozenge element with Atlaskit Lozenge styling (visual refresh)
   const lozengeElement = document.createElement('span');
-  const lozengeInnerStyle = resolveRemovedLozengeStyle(colorScheme, isActive);
+
+  // A column label sits over an already-grey deleted cell, so use the red Removed treatment.
+  const lozengeInnerStyle = resolveRemovedLozengeStyle(colorScheme, inCell || isActive);
   lozengeElement.setAttribute('style', lozengeInnerStyle);
   lozengeElement.textContent = intl.formatMessage(trackChangesMessages.removed).toUpperCase();
+  if (inCell) {
+    lozengeElement.setAttribute('style', `${lozengeInnerStyle};${containerStyle}`);
+    lozengeElement.setAttribute('data-testid', 'show-diff-removed-lozenge');
+    lozengeElement.contentEditable = 'false';
+    return lozengeElement;
+  }
+  container.setAttribute('style', containerStyle);
+  container.setAttribute('data-testid', 'show-diff-removed-lozenge');
   container.appendChild(lozengeElement);
   return container;
 };

package/dist/es2019/pm-plugins/utils/emptyTextBlocks.js

@@ -0,0 +1,58 @@
+/**
+ * The textblock types whose empty form is a blank line the author put there deliberately, and so
+ * worth marking when a change removes it.
+ *
+ * Deliberately not every textblock: an empty `codeBlock` is an empty code block, which renders as a
+ * visible box of its own and needs no stand-in.
+ */
+const BLANK_LINE_NODE_NAMES = new Set(['paragraph', 'heading']);
+
+/**
+ * Structurally empty: no children at all, not merely no measurable content. The two coincide for a
+ * real node, and testing both keeps a node whose children report no size from passing as blank.
+ */
+const isEmptyTextBlock = node => BLANK_LINE_NODE_NAMES.has(node.type.name) && node.content.childCount === 0 && node.content.size === 0;
+
+/**
+ * How many empty textblocks a slice holds, or 0 unless that is *all* it holds.
+ *
+ * Counted rather than tested for one, because a run of adjacent blank lines is reported as a single
+ * change covering all of them — the case that made a single-block test miss.
+ */
+export const countEmptyTextBlockOnlySlice = slice => {
+  var _slice$content$childC;
+  const childCount = (_slice$content$childC = slice === null || slice === void 0 ? void 0 : slice.content.childCount) !== null && _slice$content$childC !== void 0 ? _slice$content$childC : 0;
+  if (!slice || childCount === 0) {
+    return 0;
+  }
+  for (let index = 0; index < childCount; index++) {
+    if (!isEmptyTextBlock(slice.content.child(index))) {
+      return 0;
+    }
+  }
+  return childCount;
+};
+
+/**
+ * The content position of every empty textblock lying wholly within `[from, to]`.
+ *
+ * Used to place a marker on each blank line a change removes. Partially covered blocks are skipped:
+ * the change only took part of one, so it still has text of its own, which the inline decoration
+ * already marks.
+ */
+export const emptyTextBlockContentPositions = (doc, from, to) => {
+  const positions = [];
+  doc.nodesBetween(from, to, (node, pos) => {
+    if (node.isTextblock) {
+      if (isEmptyTextBlock(node) && pos >= from && pos + node.nodeSize <= to) {
+        // +1 steps over the block's own open token, into its (empty) content.
+        positions.push(pos + 1);
+      }
+      // A textblock holds inline content only, so there is nothing below it to visit.
+      return false;
+    }
+    // Keep descending: blank lines nest inside cells, columns and panels.
+    return true;
+  });
+  return positions;
+};