@atlaskit/editor-plugin-show-diff 17.1.3 → 17.1.5

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 17.1.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.1.4
+
+### Patch Changes
+
+- [`5a4cb407816ac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5a4cb407816ac) -
+  [ux] Strike out a deleted status lozenge in a suggestion diff, behind
+  `platform_editor_ai_show_diff_patch_2`. Its `line-through` was not propagated into the
+  `display: inline-flex` lozenge and painted beneath its background, so the status showed only the
+  deleted highlight.
+- Updated dependencies
+
 ## 17.1.3
 
 ### Patch Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DELETED_HIGHLIGHT_BORDER_VAR = exports.DELETED_HIGHLIGHT_BG_VAR = void 0;
+exports.DELETED_INLINE_NODE_STRIKE_VAR = exports.DELETED_HIGHLIGHT_BORDER_VAR = exports.DELETED_HIGHLIGHT_BG_VAR = void 0;
 exports.buildAddedCellOverlayRoundedStyle = buildAddedCellOverlayRoundedStyle;
 exports.buildAddedCellOverlayStyle = buildAddedCellOverlayStyle;
 exports.buildAddedCellOverlayStyleNew = buildAddedCellOverlayStyleNew;
@@ -29,6 +29,7 @@ exports.buildDeletedDecorationMarkerVariableNew = buildDeletedDecorationMarkerVa
 exports.buildDeletedDecorationMarkerVariableSimple = buildDeletedDecorationMarkerVariableSimple;
 exports.buildDeletedInlineContentStyle = buildDeletedInlineContentStyle;
 exports.buildDeletedInlineContentStyleExtended = buildDeletedInlineContentStyleExtended;
+exports.buildDeletedInlineNodeCSSVariables = buildDeletedInlineNodeCSSVariables;
 exports.buildDeletedInlineStyle = buildDeletedInlineStyle;
 exports.buildDeletedInlineStyleStandard = buildDeletedInlineStyleStandard;
 exports.buildDeletedInlineStyleUnbounded = buildDeletedInlineStyleUnbounded;
@@ -37,6 +38,7 @@ exports.buildDeletedLozengeStyle = buildDeletedLozengeStyle;
 exports.buildDeletedNodeCSSVariables = buildDeletedNodeCSSVariables;
 exports.buildDeletedQuoteNodeWithLozengeStyle = buildDeletedQuoteNodeWithLozengeStyle;
 exports.buildDeletedRowStyle = buildDeletedRowStyle;
+exports.buildDeletedStrikeLineBorder = buildDeletedStrikeLineBorder;
 exports.buildDeletedStrikethroughLine = buildDeletedStrikethroughLine;
 exports.buildDeletedStyleQuoteNode = buildDeletedStyleQuoteNode;
 exports.buildDeletedStyleQuoteNodeActive = buildDeletedStyleQuoteNodeActive;
@@ -75,6 +77,7 @@ exports.getInsertedInlineRevealColors = getInsertedInlineRevealColors;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _agentBrandColorSchemes = require("@atlaskit/agent-color/agent-brand-color-schemes");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _getStandardDeletedTextDecorationStyle = require("./getStandardDeletedTextDecorationStyle");
 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; }
@@ -93,6 +96,13 @@ var DELETED_HIGHLIGHT_BG_VAR = exports.DELETED_HIGHLIGHT_BG_VAR = '--show-diff-d
  */
 var DELETED_HIGHLIGHT_BORDER_VAR = exports.DELETED_HIGHLIGHT_BORDER_VAR = '--show-diff-deleted-highlight-border';
 
+/**
+ * `border-top` for the strike editor-core redraws on a deleted status lozenge. Carries the whole
+ * shorthand, not just the colour, so the line stays identical to the one the widget path draws —
+ * including its 2px active weight — without editor-core restating either.
+ */
+var DELETED_INLINE_NODE_STRIKE_VAR = exports.DELETED_INLINE_NODE_STRIKE_VAR = '--show-diff-deleted-inline-node-strike';
+
 // token() is a build-time transform needing static literals, so pre-compute every colour's
 // tokens here and index by name at runtime.
 
@@ -390,6 +400,31 @@ function buildDeletedInlineStyle(colors, isActive) {
   return isActive ? (0, _lazyNodeView.convertToInlineCss)(deletedInlineStyleActiveBase(colors)) : (0, _lazyNodeView.convertToInlineCss)(deletedInlineStyleBase(colors));
 }
 
+/**
+ * The strike line's own `border-top` — the only thing that varies between the variants below, and
+ * the single source editor-core reads through `DELETED_INLINE_NODE_STRIKE_VAR`.
+ */
+function buildDeletedStrikeLineBorder(colors, isActive) {
+  if (colors.deletedNodeEmphasis !== 'stateful') {
+    var _colors$deleteTextCol2;
+    return "1px solid ".concat(textAccent((_colors$deleteTextCol2 = colors.deleteTextColor) !== null && _colors$deleteTextCol2 !== void 0 ? _colors$deleteTextCol2 : colors.deleteColor));
+  }
+  return "".concat(isActive ? '2px' : '1px', " solid ").concat(borderAccent(colors.deleteColor));
+}
+
+/** Geometry shared by every strikethrough line, so only the border ever differs. */
+var deletedStrikeLine = function deletedStrikeLine(border) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    position: 'absolute',
+    top: '50%',
+    width: '100%',
+    display: 'inline-block',
+    borderTop: border,
+    pointerEvents: 'none',
+    zIndex: 1
+  });
+};
+
 /** Strikethrough line (unbounded span) for deleted content — default state. */
 function buildDeletedContentStyleUnbounded(colors) {
   return (0, _lazyNodeView.convertToInlineCss)({
@@ -420,13 +455,13 @@ function buildDeletedContentStyleUnboundedActive(colors) {
 
 /** Unbounded strikethrough overlay for deleted inline content (absolute positioned line). */
 function buildDeletedInlineStyleUnbounded(colors) {
-  var _colors$deleteTextCol2;
+  var _colors$deleteTextCol3;
   return (0, _lazyNodeView.convertToInlineCss)({
     position: 'absolute',
     top: '50%',
     width: '100%',
     display: 'inline-block',
-    borderTop: "1px solid ".concat(textAccent((_colors$deleteTextCol2 = colors.deleteTextColor) !== null && _colors$deleteTextCol2 !== void 0 ? _colors$deleteTextCol2 : colors.deleteColor)),
+    borderTop: "1px solid ".concat(textAccent((_colors$deleteTextCol3 = colors.deleteTextColor) !== null && _colors$deleteTextCol3 !== void 0 ? _colors$deleteTextCol3 : colors.deleteColor)),
     pointerEvents: 'none',
     zIndex: 1
   });
@@ -537,10 +572,10 @@ function buildDeletedBlockOutlineRoundedNew(colors) {
 
 /** Table row style for deleted rows. */
 function buildDeletedRowStyle(colors) {
-  var _colors$deleteTextCol3;
+  var _colors$deleteTextCol4;
   // Each branch emits exactly the CSS the pre-factory shim did for its scheme.
   return colors.deletedRowTreatment === 'textTint' ? (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
-    color: textAccent((_colors$deleteTextCol3 = colors.deleteTextColor) !== null && _colors$deleteTextCol3 !== void 0 ? _colors$deleteTextCol3 : colors.deleteColor)
+    color: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor)
   }, (0, _getStandardDeletedTextDecorationStyle.getStandardDeletedTextDecorationStyle)()), {}, {
     opacity: 0.6,
     display: 'table-row'
@@ -744,19 +779,19 @@ function deletedGlyphOpacity(colors, state) {
 
 /** 'glyphTint' deleted inline style — tints the glyph itself via `color:`. */
 function buildDeletedInlineStyleStandard(colors, state) {
-  var _colors$deleteTextCol5;
+  var _colors$deleteTextCol6;
   if (state === 'active') {
-    var _colors$deleteTextCol4;
+    var _colors$deleteTextCol5;
     return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
       color: colors.deleteTextColor ? textAccent(colors.deleteTextColor) : "var(--ds-text, #292A2E)"
     }, (0, _getStandardDeletedTextDecorationStyle.getStandardDeletedTextDecorationStyle)()), {}, {
-      textDecorationColor: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor),
+      textDecorationColor: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor),
       position: 'relative',
       opacity: deletedGlyphOpacity(colors, state)
     }));
   }
   return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
-    color: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor)
+    color: textAccent((_colors$deleteTextCol6 = colors.deleteTextColor) !== null && _colors$deleteTextCol6 !== void 0 ? _colors$deleteTextCol6 : colors.deleteColor)
   }, (0, _getStandardDeletedTextDecorationStyle.getStandardDeletedTextDecorationStyle)()), {}, {
     position: 'relative',
     opacity: deletedGlyphOpacity(colors, state)
@@ -956,6 +991,12 @@ function buildDeletedInlineContentStyle(colors, state) {
  * 1px to 2px when active and tints with the border accent; 'static' uses the text accent always.
  */
 function buildDeletedStrikethroughLine(colors, isActive) {
+  // Gated because this is a live widget-path render, even though the two branches are built to
+  // return the same string — the shared helper only exists so the lozenge strike cannot drift
+  // from this one.
+  if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) {
+    return deletedStrikeLine(buildDeletedStrikeLineBorder(colors, isActive));
+  }
   if (colors.deletedNodeEmphasis !== 'stateful') {
     return buildDeletedInlineStyleUnbounded(colors);
   }
@@ -1130,6 +1171,11 @@ function buildAtomicInlineChangedCSSVariables(colors) {
   });
 }
 
+/** Hands editor-core the same strike line the widget path uses, via a custom property. */
+function buildDeletedInlineNodeCSSVariables(colors, isActive) {
+  return (0, _lazyNodeView.convertToInlineCss)((0, _defineProperty2.default)({}, DELETED_INLINE_NODE_STRIKE_VAR, buildDeletedStrikeLineBorder(colors, isActive)));
+}
+
 /**
  * Deleted-node wrapper variables, one per visual role in editor-core's `showDiffDeletedNodeStyles`.
  * Emitted by `wrapBlockNodeView` alongside `show-diff-deleted-node-vars` — the class is named for

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

@@ -53,6 +53,12 @@ var getColorScheme = function getColorScheme(colorScheme) {
  * Class names for an atomic inline node decoration (date, emoji, mention, status). Scheme-agnostic
  * — `buildAtomicInlineChangedCSSVariables()` supplies the colour inline on the same element.
  */
+/**
+ * Lets editor-core redraw the strike on a deleted status: `line-through` from an ancestor paints
+ * behind the lozenge's own background (EDITOR-9123). Not needed for deleted-content widgets —
+ * `createContentWrapper` appends a real positioned line.
+ */
+var DELETED_INLINE_NODE_CLASS = 'show-diff-deleted-inline-node';
 var getAtomicInlineNodeClassName = function getAtomicInlineNodeClassName(inlineNodeName) {
   var classNames = ['show-diff-atomic-inline-changed'];
   if (inlineNodeName) {
@@ -203,6 +209,13 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
   var isAtomicInlineInsertion = isAtomicInlineNode && isInserted;
   var atomicInlineAttrs = isAtomicInlineInsertion ? resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) : undefined;
 
+  // Every deletion: an inverted diff carries no `isAtomicInlineNode`, so editor-core's selectors do
+  // the matching.
+  var deletedInlineNodeAttrs = !isInserted && (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? {
+    className: DELETED_INLINE_NODE_CLASS,
+    styleSuffix: (0, _factory.buildDeletedInlineNodeCSSVariables)(colors, isActive)
+  } : undefined;
+
   // Built from the raw change range, not the indicator anchors resolved below: a tag lines up with
   // the changed text, while the bar's anchors are held on a block boundary when a deleted widget
   // renders beside them.
@@ -216,11 +229,13 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     diffId: diffId,
     mountContext: tagMountContext
   }) : undefined;
-  var inlineStyle = [style, atomicInlineAttrs === null || atomicInlineAttrs === void 0 ? void 0 : atomicInlineAttrs.styleSuffix, tagWidget ? stackBelowContributorTagStyle : undefined, (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? _decorationKeys.scrollMarginTopStyle : undefined].filter(Boolean).join('');
-  var decorations = [_view.Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread(_objectSpread({
+  var inlineStyle = [style, atomicInlineAttrs === null || atomicInlineAttrs === void 0 ? void 0 : atomicInlineAttrs.styleSuffix, deletedInlineNodeAttrs === null || deletedInlineNodeAttrs === void 0 ? void 0 : deletedInlineNodeAttrs.styleSuffix, tagWidget ? stackBelowContributorTagStyle : undefined, (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? _decorationKeys.scrollMarginTopStyle : undefined].filter(Boolean).join('');
+  var decorations = [_view.Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     style: inlineStyle
   }, atomicInlineAttrs && {
     class: atomicInlineAttrs.className
+  }), deletedInlineNodeAttrs && {
+    class: deletedInlineNodeAttrs.className
   }), revealed && (0, _defineProperty2.default)({}, _revealStyles.REVEAL_ATTR, revealed.role)), {}, {
     'data-testid': 'show-diff-changed-decoration'
   }, (showContributorTags || (0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) && {

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

@@ -1,5 +1,6 @@
 import { agentBrandColorSchemes } from '@atlaskit/agent-color/agent-brand-color-schemes';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getStandardDeletedTextDecorationStyle } from './getStandardDeletedTextDecorationStyle';
 /**
  * Hover highlight for deleted text under an 'onEmphasis' scheme. Inline styles cannot express
@@ -16,6 +17,13 @@ export const DELETED_HIGHLIGHT_BG_VAR = '--show-diff-deleted-highlight-bg';
  */
 export const DELETED_HIGHLIGHT_BORDER_VAR = '--show-diff-deleted-highlight-border';
 
+/**
+ * `border-top` for the strike editor-core redraws on a deleted status lozenge. Carries the whole
+ * shorthand, not just the colour, so the line stays identical to the one the widget path draws —
+ * including its 2px active weight — without editor-core restating either.
+ */
+export const DELETED_INLINE_NODE_STRIKE_VAR = '--show-diff-deleted-inline-node-strike';
+
 // token() is a build-time transform needing static literals, so pre-compute every colour's
 // tokens here and index by name at runtime.
 
@@ -312,6 +320,29 @@ export function buildDeletedInlineStyle(colors, isActive) {
   return isActive ? convertToInlineCss(deletedInlineStyleActiveBase(colors)) : convertToInlineCss(deletedInlineStyleBase(colors));
 }
 
+/**
+ * The strike line's own `border-top` — the only thing that varies between the variants below, and
+ * the single source editor-core reads through `DELETED_INLINE_NODE_STRIKE_VAR`.
+ */
+export function buildDeletedStrikeLineBorder(colors, isActive) {
+  if (colors.deletedNodeEmphasis !== 'stateful') {
+    var _colors$deleteTextCol2;
+    return `1px solid ${textAccent((_colors$deleteTextCol2 = colors.deleteTextColor) !== null && _colors$deleteTextCol2 !== void 0 ? _colors$deleteTextCol2 : colors.deleteColor)}`;
+  }
+  return `${isActive ? '2px' : '1px'} solid ${borderAccent(colors.deleteColor)}`;
+}
+
+/** Geometry shared by every strikethrough line, so only the border ever differs. */
+const deletedStrikeLine = border => convertToInlineCss({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: border,
+  pointerEvents: 'none',
+  zIndex: 1
+});
+
 /** Strikethrough line (unbounded span) for deleted content — default state. */
 export function buildDeletedContentStyleUnbounded(colors) {
   return convertToInlineCss({
@@ -342,13 +373,13 @@ export function buildDeletedContentStyleUnboundedActive(colors) {
 
 /** Unbounded strikethrough overlay for deleted inline content (absolute positioned line). */
 export function buildDeletedInlineStyleUnbounded(colors) {
-  var _colors$deleteTextCol2;
+  var _colors$deleteTextCol3;
   return convertToInlineCss({
     position: 'absolute',
     top: '50%',
     width: '100%',
     display: 'inline-block',
-    borderTop: `1px solid ${textAccent((_colors$deleteTextCol2 = colors.deleteTextColor) !== null && _colors$deleteTextCol2 !== void 0 ? _colors$deleteTextCol2 : colors.deleteColor)}`,
+    borderTop: `1px solid ${textAccent((_colors$deleteTextCol3 = colors.deleteTextColor) !== null && _colors$deleteTextCol3 !== void 0 ? _colors$deleteTextCol3 : colors.deleteColor)}`,
     pointerEvents: 'none',
     zIndex: 1
   });
@@ -459,10 +490,10 @@ export function buildDeletedBlockOutlineRoundedNew(colors) {
 
 /** Table row style for deleted rows. */
 export function buildDeletedRowStyle(colors) {
-  var _colors$deleteTextCol3;
+  var _colors$deleteTextCol4;
   // Each branch emits exactly the CSS the pre-factory shim did for its scheme.
   return colors.deletedRowTreatment === 'textTint' ? convertToInlineCss({
-    color: textAccent((_colors$deleteTextCol3 = colors.deleteTextColor) !== null && _colors$deleteTextCol3 !== void 0 ? _colors$deleteTextCol3 : colors.deleteColor),
+    color: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor),
     ...getStandardDeletedTextDecorationStyle(),
     opacity: 0.6,
     display: 'table-row'
@@ -666,19 +697,19 @@ function deletedGlyphOpacity(colors, state) {
 
 /** 'glyphTint' deleted inline style — tints the glyph itself via `color:`. */
 export function buildDeletedInlineStyleStandard(colors, state) {
-  var _colors$deleteTextCol5;
+  var _colors$deleteTextCol6;
   if (state === 'active') {
-    var _colors$deleteTextCol4;
+    var _colors$deleteTextCol5;
     return convertToInlineCss({
       color: colors.deleteTextColor ? textAccent(colors.deleteTextColor) : "var(--ds-text, #292A2E)",
       ...getStandardDeletedTextDecorationStyle(),
-      textDecorationColor: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor),
+      textDecorationColor: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor),
       position: 'relative',
       opacity: deletedGlyphOpacity(colors, state)
     });
   }
   return convertToInlineCss({
-    color: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor),
+    color: textAccent((_colors$deleteTextCol6 = colors.deleteTextColor) !== null && _colors$deleteTextCol6 !== void 0 ? _colors$deleteTextCol6 : colors.deleteColor),
     ...getStandardDeletedTextDecorationStyle(),
     position: 'relative',
     opacity: deletedGlyphOpacity(colors, state)
@@ -880,6 +911,12 @@ export function buildDeletedInlineContentStyle(colors, state) {
  * 1px to 2px when active and tints with the border accent; 'static' uses the text accent always.
  */
 export function buildDeletedStrikethroughLine(colors, isActive) {
+  // Gated because this is a live widget-path render, even though the two branches are built to
+  // return the same string — the shared helper only exists so the lozenge strike cannot drift
+  // from this one.
+  if (fg('platform_editor_ai_show_diff_patch_2')) {
+    return deletedStrikeLine(buildDeletedStrikeLineBorder(colors, isActive));
+  }
   if (colors.deletedNodeEmphasis !== 'stateful') {
     return buildDeletedInlineStyleUnbounded(colors);
   }
@@ -1055,6 +1092,13 @@ export function buildAtomicInlineChangedCSSVariables(colors) {
   });
 }
 
+/** Hands editor-core the same strike line the widget path uses, via a custom property. */
+export function buildDeletedInlineNodeCSSVariables(colors, isActive) {
+  return convertToInlineCss({
+    [DELETED_INLINE_NODE_STRIKE_VAR]: buildDeletedStrikeLineBorder(colors, isActive)
+  });
+}
+
 /**
  * Deleted-node wrapper variables, one per visual role in editor-core's `showDiffDeletedNodeStyles`.
  * Emitted by `wrapBlockNodeView` alongside `show-diff-deleted-node-vars` — the class is named for

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

@@ -5,7 +5,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { CONTRIBUTOR_TAG_Z_INDEX } from '../../ui/ContributorTag/buildContributorTagDom';
 import { isExtendedEnabled } from '../isExtendedEnabled';
 import { isEmptyParagraphSlice } from '../utils/isEmptyParagraphSlice';
-import { buildAtomicInlineChangedCSSVariables, buildDeletedInlineContentStyleExtended, buildDeletedInlineStyle, buildDeletedInlineStyleStandard, buildInsertStyle, buildInsertStyleActive, buildInsertStyleExtended, buildInsertStyleExtendedActive, buildInsertStyleExtendedNoUnderline, buildInsertStyleExtendedNoUnderlineActive } from './colorSchemes/factory';
+import { buildAtomicInlineChangedCSSVariables, buildDeletedInlineContentStyleExtended, buildDeletedInlineNodeCSSVariables, buildDeletedInlineStyle, buildDeletedInlineStyleStandard, buildInsertStyle, buildInsertStyleActive, buildInsertStyleExtended, buildInsertStyleExtendedActive, buildInsertStyleExtendedNoUnderline, buildInsertStyleExtendedNoUnderlineActive } from './colorSchemes/factory';
 import { colorSchemeRegistry, getLegacyColorScheme } from './colorSchemes/schemes';
 import { createInlineIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
 import { createContributorTagWidget, isContributorTagWidgetEnabled } from './createContributorTagWidget';
@@ -40,6 +40,12 @@ const getColorScheme = colorScheme => colorSchemeRegistry[colorScheme !== null &
  * Class names for an atomic inline node decoration (date, emoji, mention, status). Scheme-agnostic
  * — `buildAtomicInlineChangedCSSVariables()` supplies the colour inline on the same element.
  */
+/**
+ * Lets editor-core redraw the strike on a deleted status: `line-through` from an ancestor paints
+ * behind the lozenge's own background (EDITOR-9123). Not needed for deleted-content widgets —
+ * `createContentWrapper` appends a real positioned line.
+ */
+const DELETED_INLINE_NODE_CLASS = 'show-diff-deleted-inline-node';
 const getAtomicInlineNodeClassName = inlineNodeName => {
   const classNames = ['show-diff-atomic-inline-changed'];
   if (inlineNodeName) {
@@ -178,6 +184,13 @@ export const createInlineChangedDecoration = ({
   const isAtomicInlineInsertion = isAtomicInlineNode && isInserted;
   const atomicInlineAttrs = isAtomicInlineInsertion ? resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) : undefined;
 
+  // Every deletion: an inverted diff carries no `isAtomicInlineNode`, so editor-core's selectors do
+  // the matching.
+  const deletedInlineNodeAttrs = !isInserted && fg('platform_editor_ai_show_diff_patch_2') ? {
+    className: DELETED_INLINE_NODE_CLASS,
+    styleSuffix: buildDeletedInlineNodeCSSVariables(colors, isActive)
+  } : undefined;
+
   // Built from the raw change range, not the indicator anchors resolved below: a tag lines up with
   // the changed text, while the bar's anchors are held on a block boundary when a deleted widget
   // renders beside them.
@@ -191,12 +204,16 @@ export const createInlineChangedDecoration = ({
     diffId,
     mountContext: tagMountContext
   }) : undefined;
-  const inlineStyle = [style, atomicInlineAttrs === null || atomicInlineAttrs === void 0 ? void 0 : atomicInlineAttrs.styleSuffix, tagWidget ? stackBelowContributorTagStyle : undefined, fg('platform_editor_ai_show_diff_patch_1') ? scrollMarginTopStyle : undefined].filter(Boolean).join('');
+  const inlineStyle = [style, atomicInlineAttrs === null || atomicInlineAttrs === void 0 ? void 0 : atomicInlineAttrs.styleSuffix, deletedInlineNodeAttrs === null || deletedInlineNodeAttrs === void 0 ? void 0 : deletedInlineNodeAttrs.styleSuffix, tagWidget ? stackBelowContributorTagStyle : undefined, fg('platform_editor_ai_show_diff_patch_1') ? scrollMarginTopStyle : undefined].filter(Boolean).join('');
   const decorations = [Decoration.inline(change.fromB, change.toB, {
     style: inlineStyle,
     ...(atomicInlineAttrs && {
       class: atomicInlineAttrs.className
     }),
+    // Mutually exclusive with the above: atomic-inline attrs are insertion-only.
+    ...(deletedInlineNodeAttrs && {
+      class: deletedInlineNodeAttrs.className
+    }),
     ...(revealed && {
       [REVEAL_ATTR]: revealed.role
     }),

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

@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 { agentBrandColorSchemes } from '@atlaskit/agent-color/agent-brand-color-schemes';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getStandardDeletedTextDecorationStyle } from './getStandardDeletedTextDecorationStyle';
 /**
  * Hover highlight for deleted text under an 'onEmphasis' scheme. Inline styles cannot express
@@ -19,6 +20,13 @@ export var DELETED_HIGHLIGHT_BG_VAR = '--show-diff-deleted-highlight-bg';
  */
 export var DELETED_HIGHLIGHT_BORDER_VAR = '--show-diff-deleted-highlight-border';
 
+/**
+ * `border-top` for the strike editor-core redraws on a deleted status lozenge. Carries the whole
+ * shorthand, not just the colour, so the line stays identical to the one the widget path draws —
+ * including its 2px active weight — without editor-core restating either.
+ */
+export var DELETED_INLINE_NODE_STRIKE_VAR = '--show-diff-deleted-inline-node-strike';
+
 // token() is a build-time transform needing static literals, so pre-compute every colour's
 // tokens here and index by name at runtime.
 
@@ -316,6 +324,31 @@ export function buildDeletedInlineStyle(colors, isActive) {
   return isActive ? convertToInlineCss(deletedInlineStyleActiveBase(colors)) : convertToInlineCss(deletedInlineStyleBase(colors));
 }
 
+/**
+ * The strike line's own `border-top` — the only thing that varies between the variants below, and
+ * the single source editor-core reads through `DELETED_INLINE_NODE_STRIKE_VAR`.
+ */
+export function buildDeletedStrikeLineBorder(colors, isActive) {
+  if (colors.deletedNodeEmphasis !== 'stateful') {
+    var _colors$deleteTextCol2;
+    return "1px solid ".concat(textAccent((_colors$deleteTextCol2 = colors.deleteTextColor) !== null && _colors$deleteTextCol2 !== void 0 ? _colors$deleteTextCol2 : colors.deleteColor));
+  }
+  return "".concat(isActive ? '2px' : '1px', " solid ").concat(borderAccent(colors.deleteColor));
+}
+
+/** Geometry shared by every strikethrough line, so only the border ever differs. */
+var deletedStrikeLine = function deletedStrikeLine(border) {
+  return convertToInlineCss({
+    position: 'absolute',
+    top: '50%',
+    width: '100%',
+    display: 'inline-block',
+    borderTop: border,
+    pointerEvents: 'none',
+    zIndex: 1
+  });
+};
+
 /** Strikethrough line (unbounded span) for deleted content — default state. */
 export function buildDeletedContentStyleUnbounded(colors) {
   return convertToInlineCss({
@@ -346,13 +379,13 @@ export function buildDeletedContentStyleUnboundedActive(colors) {
 
 /** Unbounded strikethrough overlay for deleted inline content (absolute positioned line). */
 export function buildDeletedInlineStyleUnbounded(colors) {
-  var _colors$deleteTextCol2;
+  var _colors$deleteTextCol3;
   return convertToInlineCss({
     position: 'absolute',
     top: '50%',
     width: '100%',
     display: 'inline-block',
-    borderTop: "1px solid ".concat(textAccent((_colors$deleteTextCol2 = colors.deleteTextColor) !== null && _colors$deleteTextCol2 !== void 0 ? _colors$deleteTextCol2 : colors.deleteColor)),
+    borderTop: "1px solid ".concat(textAccent((_colors$deleteTextCol3 = colors.deleteTextColor) !== null && _colors$deleteTextCol3 !== void 0 ? _colors$deleteTextCol3 : colors.deleteColor)),
     pointerEvents: 'none',
     zIndex: 1
   });
@@ -463,10 +496,10 @@ export function buildDeletedBlockOutlineRoundedNew(colors) {
 
 /** Table row style for deleted rows. */
 export function buildDeletedRowStyle(colors) {
-  var _colors$deleteTextCol3;
+  var _colors$deleteTextCol4;
   // Each branch emits exactly the CSS the pre-factory shim did for its scheme.
   return colors.deletedRowTreatment === 'textTint' ? convertToInlineCss(_objectSpread(_objectSpread({
-    color: textAccent((_colors$deleteTextCol3 = colors.deleteTextColor) !== null && _colors$deleteTextCol3 !== void 0 ? _colors$deleteTextCol3 : colors.deleteColor)
+    color: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor)
   }, getStandardDeletedTextDecorationStyle()), {}, {
     opacity: 0.6,
     display: 'table-row'
@@ -670,19 +703,19 @@ function deletedGlyphOpacity(colors, state) {
 
 /** 'glyphTint' deleted inline style — tints the glyph itself via `color:`. */
 export function buildDeletedInlineStyleStandard(colors, state) {
-  var _colors$deleteTextCol5;
+  var _colors$deleteTextCol6;
   if (state === 'active') {
-    var _colors$deleteTextCol4;
+    var _colors$deleteTextCol5;
     return convertToInlineCss(_objectSpread(_objectSpread({
       color: colors.deleteTextColor ? textAccent(colors.deleteTextColor) : "var(--ds-text, #292A2E)"
     }, getStandardDeletedTextDecorationStyle()), {}, {
-      textDecorationColor: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor),
+      textDecorationColor: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor),
       position: 'relative',
       opacity: deletedGlyphOpacity(colors, state)
     }));
   }
   return convertToInlineCss(_objectSpread(_objectSpread({
-    color: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor)
+    color: textAccent((_colors$deleteTextCol6 = colors.deleteTextColor) !== null && _colors$deleteTextCol6 !== void 0 ? _colors$deleteTextCol6 : colors.deleteColor)
   }, getStandardDeletedTextDecorationStyle()), {}, {
     position: 'relative',
     opacity: deletedGlyphOpacity(colors, state)
@@ -882,6 +915,12 @@ export function buildDeletedInlineContentStyle(colors, state) {
  * 1px to 2px when active and tints with the border accent; 'static' uses the text accent always.
  */
 export function buildDeletedStrikethroughLine(colors, isActive) {
+  // Gated because this is a live widget-path render, even though the two branches are built to
+  // return the same string — the shared helper only exists so the lozenge strike cannot drift
+  // from this one.
+  if (fg('platform_editor_ai_show_diff_patch_2')) {
+    return deletedStrikeLine(buildDeletedStrikeLineBorder(colors, isActive));
+  }
   if (colors.deletedNodeEmphasis !== 'stateful') {
     return buildDeletedInlineStyleUnbounded(colors);
   }
@@ -1056,6 +1095,11 @@ export function buildAtomicInlineChangedCSSVariables(colors) {
   });
 }
 
+/** Hands editor-core the same strike line the widget path uses, via a custom property. */
+export function buildDeletedInlineNodeCSSVariables(colors, isActive) {
+  return convertToInlineCss(_defineProperty({}, DELETED_INLINE_NODE_STRIKE_VAR, buildDeletedStrikeLineBorder(colors, isActive)));
+}
+
 /**
  * Deleted-node wrapper variables, one per visual role in editor-core's `showDiffDeletedNodeStyles`.
  * Emitted by `wrapBlockNodeView` alongside `show-diff-deleted-node-vars` — the class is named for

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

@@ -9,7 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { CONTRIBUTOR_TAG_Z_INDEX } from '../../ui/ContributorTag/buildContributorTagDom';
 import { isExtendedEnabled } from '../isExtendedEnabled';
 import { isEmptyParagraphSlice } from '../utils/isEmptyParagraphSlice';
-import { buildAtomicInlineChangedCSSVariables, buildDeletedInlineContentStyleExtended, buildDeletedInlineStyle, buildDeletedInlineStyleStandard, buildInsertStyle, buildInsertStyleActive, buildInsertStyleExtended, buildInsertStyleExtendedActive, buildInsertStyleExtendedNoUnderline, buildInsertStyleExtendedNoUnderlineActive } from './colorSchemes/factory';
+import { buildAtomicInlineChangedCSSVariables, buildDeletedInlineContentStyleExtended, buildDeletedInlineNodeCSSVariables, buildDeletedInlineStyle, buildDeletedInlineStyleStandard, buildInsertStyle, buildInsertStyleActive, buildInsertStyleExtended, buildInsertStyleExtendedActive, buildInsertStyleExtendedNoUnderline, buildInsertStyleExtendedNoUnderlineActive } from './colorSchemes/factory';
 import { colorSchemeRegistry, getLegacyColorScheme } from './colorSchemes/schemes';
 import { createInlineIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
 import { createContributorTagWidget, isContributorTagWidgetEnabled } from './createContributorTagWidget';
@@ -46,6 +46,12 @@ var getColorScheme = function getColorScheme(colorScheme) {
  * Class names for an atomic inline node decoration (date, emoji, mention, status). Scheme-agnostic
  * — `buildAtomicInlineChangedCSSVariables()` supplies the colour inline on the same element.
  */
+/**
+ * Lets editor-core redraw the strike on a deleted status: `line-through` from an ancestor paints
+ * behind the lozenge's own background (EDITOR-9123). Not needed for deleted-content widgets —
+ * `createContentWrapper` appends a real positioned line.
+ */
+var DELETED_INLINE_NODE_CLASS = 'show-diff-deleted-inline-node';
 var getAtomicInlineNodeClassName = function getAtomicInlineNodeClassName(inlineNodeName) {
   var classNames = ['show-diff-atomic-inline-changed'];
   if (inlineNodeName) {
@@ -196,6 +202,13 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
   var isAtomicInlineInsertion = isAtomicInlineNode && isInserted;
   var atomicInlineAttrs = isAtomicInlineInsertion ? resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) : undefined;
 
+  // Every deletion: an inverted diff carries no `isAtomicInlineNode`, so editor-core's selectors do
+  // the matching.
+  var deletedInlineNodeAttrs = !isInserted && fg('platform_editor_ai_show_diff_patch_2') ? {
+    className: DELETED_INLINE_NODE_CLASS,
+    styleSuffix: buildDeletedInlineNodeCSSVariables(colors, isActive)
+  } : undefined;
+
   // Built from the raw change range, not the indicator anchors resolved below: a tag lines up with
   // the changed text, while the bar's anchors are held on a block boundary when a deleted widget
   // renders beside them.
@@ -209,11 +222,13 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     diffId: diffId,
     mountContext: tagMountContext
   }) : undefined;
-  var inlineStyle = [style, atomicInlineAttrs === null || atomicInlineAttrs === void 0 ? void 0 : atomicInlineAttrs.styleSuffix, tagWidget ? stackBelowContributorTagStyle : undefined, fg('platform_editor_ai_show_diff_patch_1') ? scrollMarginTopStyle : undefined].filter(Boolean).join('');
-  var decorations = [Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread(_objectSpread({
+  var inlineStyle = [style, atomicInlineAttrs === null || atomicInlineAttrs === void 0 ? void 0 : atomicInlineAttrs.styleSuffix, deletedInlineNodeAttrs === null || deletedInlineNodeAttrs === void 0 ? void 0 : deletedInlineNodeAttrs.styleSuffix, tagWidget ? stackBelowContributorTagStyle : undefined, fg('platform_editor_ai_show_diff_patch_1') ? scrollMarginTopStyle : undefined].filter(Boolean).join('');
+  var decorations = [Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     style: inlineStyle
   }, atomicInlineAttrs && {
     class: atomicInlineAttrs.className
+  }), deletedInlineNodeAttrs && {
+    class: deletedInlineNodeAttrs.className
   }), revealed && _defineProperty({}, REVEAL_ATTR, revealed.role)), {}, {
     'data-testid': 'show-diff-changed-decoration'
   }, (showContributorTags || fg('platform_editor_ai_show_diff_patch_2')) && {

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

@@ -12,6 +12,12 @@ export declare const DELETED_HIGHLIGHT_BG_VAR = "--show-diff-deleted-highlight-b
  * 'underline' scheme can darken the border without darkening the tint behind it.
  */
 export declare const DELETED_HIGHLIGHT_BORDER_VAR = "--show-diff-deleted-highlight-border";
+/**
+ * `border-top` for the strike editor-core redraws on a deleted status lozenge. Carries the whole
+ * shorthand, not just the colour, so the line stays identical to the one the widget path draws —
+ * including its 2px active weight — without editor-core restating either.
+ */
+export declare const DELETED_INLINE_NODE_STRIKE_VAR = "--show-diff-deleted-inline-node-strike";
 /** Contributor tags use a bold fill with a contrasting foreground, including branded schemes. */
 export declare function getAccentTokens(color: AccentColor): {
     background: string;
@@ -39,6 +45,11 @@ export declare function buildInsertStyleInBlockExtendedNoUnderline(_colors: Diff
 export declare function buildInsertStyleActive(colors: DiffColorScheme): string;
 /** Strikethrough for removed inline / widget content (non-marker decorations). */
 export declare function buildDeletedInlineStyle(colors: DiffColorScheme, isActive: boolean): string;
+/**
+ * The strike line's own `border-top` — the only thing that varies between the variants below, and
+ * the single source editor-core reads through `DELETED_INLINE_NODE_STRIKE_VAR`.
+ */
+export declare function buildDeletedStrikeLineBorder(colors: DiffColorScheme, isActive: boolean): string;
 /** Strikethrough line (unbounded span) for deleted content — default state. */
 export declare function buildDeletedContentStyleUnbounded(colors: DiffColorScheme): string;
 /** Strikethrough line (unbounded span) for deleted content — active state. */
@@ -218,6 +229,8 @@ export declare function buildDeletedWrappedBlockOutline(colors: DiffColorScheme,
  * inline it beats the stylesheet's fallback, making the plugin the only source of the colour.
  */
 export declare function buildAtomicInlineChangedCSSVariables(colors: DiffColorScheme): string;
+/** Hands editor-core the same strike line the widget path uses, via a custom property. */
+export declare function buildDeletedInlineNodeCSSVariables(colors: DiffColorScheme, isActive: boolean): string;
 /**
  * Deleted-node wrapper variables, one per visual role in editor-core's `showDiffDeletedNodeStyles`.
  * Emitted by `wrapBlockNodeView` alongside `show-diff-deleted-node-vars` — the class is named for

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "17.1.3",
+	"version": "17.1.5",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,7 +25,7 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^57.5.0",
+		"@atlaskit/adf-schema": "^57.6.0",
 		"@atlaskit/agent-color": "^0.2.0",
 		"@atlaskit/avatar": "^28.0.0",
 		"@atlaskit/custom-steps": "^1.1.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
-		"@atlaskit/tmp-editor-statsig": "^201.0.0",
+		"@atlaskit/tmp-editor-statsig": "^202.0.0",
 		"@atlaskit/tokens": "^18.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
@@ -71,7 +71,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^123.4.0",
+		"@atlaskit/editor-common": "^123.5.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"