@atlaskit/editor-plugin-show-diff 6.2.4 → 6.2.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 6.2.6
+
+### Patch Changes
+
+- [`164eae4f672d5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/164eae4f672d5) -
+  Fix a number of issues with the diff flipper
+- Updated dependencies
+
+## 6.2.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.2.4
 
 ### Patch Changes

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

@@ -173,7 +173,6 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       }))));
     }
     if (change.deleted.length > 0) {
-      var _isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.fromB === activeIndexPos.to;
       var decoration = (0, _createNodeChangedDecorationWidget.createNodeChangedDecorationWidget)(_objectSpread({
         change: change,
         doc: originalDoc,
@@ -181,7 +180,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         colorScheme: colorScheme,
         newDoc: tr.doc,
         intl: intl,
-        isActive: _isActive
+        activeIndexPos: activeIndexPos
       }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
         isInserted: !isInserted
       }));

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleCardBlockNode = exports.editingStyleActive = exports.editingStyle = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNewActive = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRounded = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
+exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleCardBlockNode = exports.editingStyleActive = exports.editingStyle = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNewActive = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
@@ -65,14 +65,32 @@ var deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNodeWithLozenge
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+
+/** Stronger outline when this deleted block decoration is the active scroll target */
+var deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozengeActive = (0, _lazyNodeView.convertToInlineCss)({
+  marginTop: "var(--ds-space-150, 12px)",
+  paddingTop: "var(--ds-space-025, 2px)",
+  paddingBottom: "var(--ds-space-025, 2px)",
+  paddingLeft: "var(--ds-space-025, 2px)",
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 var deletedBlockOutline = exports.deletedBlockOutline = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+var deletedBlockOutlineActive = exports.deletedBlockOutlineActive = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 var deletedBlockOutlineRounded = exports.deletedBlockOutlineRounded = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
+var deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRoundedActive = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+});
 var deletedRowStyle = exports.deletedRowStyle = (0, _lazyNodeView.convertToInlineCss)({
   color: "var(--ds-text-accent-gray, #505258)",
   textDecoration: 'line-through',

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.traditionalStyleRuleNodeActive = exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNodeActive = exports.traditionalStyleQuoteNode = exports.traditionalStyleNodeActive = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNodeActive = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDecorationMarkerVariableActive = exports.traditionalDecorationMarkerVariable = exports.traditionalAddedCellOverlayStyle = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyleActive = exports.deletedTraditionalContentStyle = exports.deletedTraditionalCellOverlayStyle = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutline = void 0;
+exports.traditionalStyleRuleNodeActive = exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNodeActive = exports.traditionalStyleQuoteNode = exports.traditionalStyleNodeActive = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNodeActive = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDecorationMarkerVariableActive = exports.traditionalDecorationMarkerVariable = exports.traditionalAddedCellOverlayStyle = exports.deletedTraditionalStyleQuoteNodeActive = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyleActive = exports.deletedTraditionalContentStyle = exports.deletedTraditionalCellOverlayStyle = exports.deletedTraditionalBlockOutlineRoundedActive = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineActive = exports.deletedTraditionalBlockOutline = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var traditionalInsertStyle = exports.traditionalInsertStyle = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
@@ -50,7 +50,7 @@ var deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalCo
   top: '50%',
   width: '100%',
   display: 'inline-block',
-  borderTop: "1px solid ".concat("var(--ds-text-accent-red-bolder, #5D1F1A)"),
+  borderTop: "2px solid ".concat("var(--ds-border-accent-red, #E2483D)"),
   pointerEvents: 'none',
   zIndex: 1
 });
@@ -62,14 +62,30 @@ var deletedTraditionalStyleQuoteNode = exports.deletedTraditionalStyleQuoteNode
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+var deletedTraditionalStyleQuoteNodeActive = exports.deletedTraditionalStyleQuoteNodeActive = (0, _lazyNodeView.convertToInlineCss)({
+  marginTop: "var(--ds-space-150, 12px)",
+  paddingTop: "var(--ds-space-025, 2px)",
+  paddingBottom: "var(--ds-space-025, 2px)",
+  paddingLeft: "var(--ds-space-025, 2px)",
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 var deletedTraditionalBlockOutline = exports.deletedTraditionalBlockOutline = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+var deletedTraditionalBlockOutlineActive = exports.deletedTraditionalBlockOutlineActive = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 var deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineRounded = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
+var deletedTraditionalBlockOutlineRoundedActive = exports.deletedTraditionalBlockOutlineRoundedActive = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+});
 var deletedTraditionalRowStyle = exports.deletedTraditionalRowStyle = (0, _lazyNodeView.convertToInlineCss)({
   textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
   textDecoration: 'line-through',

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

@@ -8,6 +8,7 @@ exports.createNodeChangedDecorationWidget = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
@@ -86,13 +87,13 @@ var createContentWrapper = function createContentWrapper(colorScheme) {
     } else {
       wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
       var strikethrough = document.createElement('span');
-      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
+      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
       wrapper.append(strikethrough);
     }
   } else {
     wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
     var _strikethrough = document.createElement('span');
-    _strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
+    _strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
     wrapper.append(_strikethrough);
   }
   return wrapper;
@@ -103,18 +104,23 @@ var createContentWrapper = function createContentWrapper(colorScheme) {
  * that is not in the current document.
  */
 var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref2) {
+  var _slice$content, _slice$content2, _slice$content3;
   var change = _ref2.change,
     doc = _ref2.doc,
     nodeViewSerializer = _ref2.nodeViewSerializer,
     colorScheme = _ref2.colorScheme,
     newDoc = _ref2.newDoc,
     intl = _ref2.intl,
-    _ref2$isActive = _ref2.isActive,
-    isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
+    activeIndexPos = _ref2.activeIndexPos,
     _ref2$isInserted = _ref2.isInserted,
     isInserted = _ref2$isInserted === void 0 ? false : _ref2$isInserted;
   var slice = doc.slice(change.fromA, change.toA);
-  if (slice.content.content.length === 0) {
+  var shouldSkipDeletedEmptyParagraphDecoration = !isInserted && (slice === null || slice === void 0 || (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.childCount) === 1 && (slice === null || slice === void 0 || (_slice$content2 = slice.content) === null || _slice$content2 === void 0 || (_slice$content2 = _slice$content2.firstChild) === null || _slice$content2 === void 0 ? void 0 : _slice$content2.type.name) === 'paragraph' && (slice === null || slice === void 0 || (_slice$content3 = slice.content) === null || _slice$content3 === void 0 || (_slice$content3 = _slice$content3.firstChild) === null || _slice$content3 === void 0 ? void 0 : _slice$content3.content.size) === 0 && (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation');
+  // Widget decoration used for deletions as the content is not in the document
+  // and we want to display the deleted content with a style.
+  var safeInsertPos = (0, _findSafeInsertPos.findSafeInsertPos)(newDoc, change.fromB, slice);
+  var isActive = activeIndexPos && safeInsertPos === activeIndexPos.from && safeInsertPos === activeIndexPos.to;
+  if (slice.content.content.length === 0 || shouldSkipDeletedEmptyParagraphDecoration) {
     return;
   }
   var isTableCellContent = slice.content.content.some(function () {
@@ -222,6 +228,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
           targetNode: node,
           colorScheme: colorScheme,
           intl: intl,
+          isActive: isActive,
           isInserted: isInserted
         });
       }
@@ -231,7 +238,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     } else {
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
           if (fallbackNode instanceof HTMLElement) {
             var injectedNode = injectInnerWrapper({
               node: fallbackNode,
@@ -254,10 +261,6 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
-
-  // Widget decoration used for deletions as the content is not in the document
-  // and we want to display the deleted content with a style.
-  var safeInsertPos = (0, _findSafeInsertPos.findSafeInsertPos)(newDoc, change.fromB, slice);
   var decorations = [];
   decorations.push(_view.Decoration.widget(safeInsertPos, dom, {
     key: "diff-widget-".concat(isActive ? 'active' : 'inactive')

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

@@ -25,6 +25,38 @@ var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
+var lozengeStyleActiveStandard = (0, _lazyNodeView.convertToInlineCss)({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  position: 'static',
+  blockSize: 'min-content',
+  borderRadius: "var(--ds-radius-small, 4px)",
+  overflow: 'hidden',
+  paddingInlineStart: "var(--ds-space-050, 4px)",
+  paddingInlineEnd: "var(--ds-space-050, 4px)",
+  backgroundColor: "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-bold, 653)",
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  color: "var(--ds-text-warning-inverse, #292A2E)"
+});
+var lozengeStyleActiveTraditional = (0, _lazyNodeView.convertToInlineCss)({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  position: 'static',
+  blockSize: 'min-content',
+  borderRadius: "var(--ds-radius-small, 4px)",
+  overflow: 'hidden',
+  paddingInlineStart: "var(--ds-space-050, 4px)",
+  paddingInlineEnd: "var(--ds-space-050, 4px)",
+  backgroundColor: "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-bold, 653)",
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  color: "var(--ds-text-warning-inverse, #292A2E)"
+});
 var getChangedContentStyle = function getChangedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -35,7 +67,7 @@ var getChangedContentStyle = function getChangedContentStyle(colorScheme) {
     return isActive ? _standard.editingStyleActive : _standard.editingStyle;
   }
   if (colorScheme === 'traditional') {
-    return _traditional.deletedTraditionalContentStyle;
+    return isActive ? _traditional.deletedTraditionalContentStyleActive : _traditional.deletedTraditionalContentStyle;
   }
   if (isActive) {
     return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNewActive : _standard.deletedContentStyleActive;
@@ -44,6 +76,7 @@ var getChangedContentStyle = function getChangedContentStyle(colorScheme) {
 };
 var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
   var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var isActive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var isTraditional = colorScheme === 'traditional';
   if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
     if (shouldApplyStylesDirectly(nodeName)) {
@@ -56,13 +89,22 @@ var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
   }
   switch (nodeName) {
     case 'blockquote':
-      return isTraditional ? _traditional.deletedTraditionalStyleQuoteNode : _standard.deletedStyleQuoteNodeWithLozenge;
+      if (isTraditional) {
+        return isActive ? _traditional.deletedTraditionalStyleQuoteNodeActive : _traditional.deletedTraditionalStyleQuoteNode;
+      }
+      return isActive ? _standard.deletedStyleQuoteNodeWithLozengeActive : _standard.deletedStyleQuoteNodeWithLozenge;
     case 'expand':
     case 'decisionList':
-      return isTraditional ? _traditional.deletedTraditionalBlockOutline : _standard.deletedBlockOutline;
+      if (isTraditional) {
+        return isActive ? _traditional.deletedTraditionalBlockOutlineActive : _traditional.deletedTraditionalBlockOutline;
+      }
+      return isActive ? _standard.deletedBlockOutlineActive : _standard.deletedBlockOutline;
     case 'panel':
     case 'codeBlock':
-      return isTraditional ? _traditional.deletedTraditionalBlockOutlineRounded : _standard.deletedBlockOutlineRounded;
+      if (isTraditional) {
+        return isActive ? _traditional.deletedTraditionalBlockOutlineRoundedActive : _traditional.deletedTraditionalBlockOutlineRounded;
+      }
+      return isActive ? _standard.deletedBlockOutlineRoundedActive : _standard.deletedBlockOutlineRounded;
     default:
       return undefined;
   }
@@ -115,6 +157,8 @@ var applyCellOverlayStyles = function applyCellOverlayStyles(_ref) {
  * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
  */
 var createRemovedLozenge = function createRemovedLozenge(intl) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var colorScheme = arguments.length > 2 ? arguments[2] : undefined;
   var container = document.createElement('span');
   var containerStyle = (0, _lazyNodeView.convertToInlineCss)({
     position: 'absolute',
@@ -129,7 +173,8 @@ var createRemovedLozenge = function createRemovedLozenge(intl) {
 
   // Create vanilla HTML lozenge element with Atlaskit Lozenge styling (visual refresh)
   var lozengeElement = document.createElement('span');
-  lozengeElement.setAttribute('style', lozengeStyle);
+  var lozengeInnerStyle = isActive && colorScheme === 'traditional' ? lozengeStyleActiveTraditional : isActive ? lozengeStyleActiveStandard : lozengeStyle;
+  lozengeElement.setAttribute('style', lozengeInnerStyle);
   lozengeElement.textContent = intl.formatMessage(_messages.trackChangesMessages.removed).toUpperCase();
   container.appendChild(lozengeElement);
   return container;
@@ -156,10 +201,11 @@ var applyStylesToElement = function applyStylesToElement(_ref2) {
   var element = _ref2.element,
     targetNode = _ref2.targetNode,
     colorScheme = _ref2.colorScheme,
+    isActive = _ref2.isActive,
     isInserted = _ref2.isInserted;
   var currentStyle = element.getAttribute('style') || '';
-  var contentStyle = getChangedContentStyle(colorScheme, false, isInserted);
-  var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted) || '';
+  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted);
+  var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
   element.setAttribute('style', "".concat(currentStyle).concat(contentStyle).concat(nodeSpecificStyle));
 };
 
@@ -170,10 +216,11 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref3
   var nodeView = _ref3.nodeView,
     targetNode = _ref3.targetNode,
     colorScheme = _ref3.colorScheme,
+    isActive = _ref3.isActive,
     isInserted = _ref3.isInserted;
   var contentWrapper = document.createElement('div');
-  var nodeStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted);
-  contentWrapper.setAttribute('style', "".concat(getChangedContentStyle(colorScheme, false, isInserted)).concat(nodeStyle || ''));
+  var nodeStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive);
+  contentWrapper.setAttribute('style', "".concat(getChangedContentStyle(colorScheme, isActive, isInserted)).concat(nodeStyle || ''));
   contentWrapper.append(nodeView);
   return contentWrapper;
 };
@@ -189,7 +236,9 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref4) {
     nodeView = _ref4.nodeView,
     targetNode = _ref4.targetNode,
     lozenge = _ref4.lozenge,
-    colorScheme = _ref4.colorScheme;
+    colorScheme = _ref4.colorScheme,
+    _ref4$isActive = _ref4.isActive,
+    isActive = _ref4$isActive === void 0 ? false : _ref4$isActive;
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -212,6 +261,9 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref4) {
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
     var showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
+    if (isActive) {
+      nodeView.classList.add('show-diff-deleted-active');
+    }
   }
   dom.append(nodeView);
   return true;
@@ -226,7 +278,9 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref5)
     nodeView = _ref5.nodeView,
     targetNode = _ref5.targetNode,
     lozenge = _ref5.lozenge,
-    colorScheme = _ref5.colorScheme;
+    colorScheme = _ref5.colorScheme,
+    _ref5$isActive = _ref5.isActive,
+    isActive = _ref5$isActive === void 0 ? false : _ref5$isActive;
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -247,6 +301,9 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref5)
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
     var showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
+    if (isActive) {
+      nodeView.classList.add('show-diff-deleted-active');
+    }
   }
   dom.append(nodeView);
   return true;
@@ -261,17 +318,20 @@ var wrapBlockNode = function wrapBlockNode(_ref6) {
     targetNode = _ref6.targetNode,
     colorScheme = _ref6.colorScheme,
     intl = _ref6.intl,
+    _ref6$isActive = _ref6.isActive,
+    isActive = _ref6$isActive === void 0 ? false : _ref6$isActive,
     _ref6$isInserted = _ref6.isInserted,
     isInserted = _ref6$isInserted === void 0 ? false : _ref6$isInserted;
   var blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name) && (!(0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isInserted)) {
-    var lozenge = createRemovedLozenge(intl);
+    var lozenge = createRemovedLozenge(intl, isActive, colorScheme);
     if (handleEmbedCardWithLozenge({
       dom: dom,
       nodeView: nodeView,
       targetNode: targetNode,
       lozenge: lozenge,
-      colorScheme: colorScheme
+      colorScheme: colorScheme,
+      isActive: isActive
     })) {
       return;
     }
@@ -280,7 +340,8 @@ var wrapBlockNode = function wrapBlockNode(_ref6) {
       nodeView: nodeView,
       targetNode: targetNode,
       lozenge: lozenge,
-      colorScheme: colorScheme
+      colorScheme: colorScheme,
+      isActive: isActive
     })) {
       return;
     }
@@ -290,12 +351,16 @@ var wrapBlockNode = function wrapBlockNode(_ref6) {
     nodeView: nodeView,
     targetNode: targetNode,
     colorScheme: colorScheme,
+    isActive: isActive,
     isInserted: isInserted
   });
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
     var showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
+    if (isActive) {
+      nodeView.classList.add('show-diff-deleted-active');
+    }
   }
   dom.append(blockWrapper);
 };
@@ -311,6 +376,8 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
     targetNode = _ref7.targetNode,
     colorScheme = _ref7.colorScheme,
     intl = _ref7.intl,
+    _ref7$isActive = _ref7.isActive,
+    isActive = _ref7$isActive === void 0 ? false : _ref7$isActive,
     _ref7$isInserted = _ref7.isInserted,
     isInserted = _ref7$isInserted === void 0 ? false : _ref7$isInserted;
   if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
@@ -319,6 +386,7 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
       element: nodeView,
       targetNode: targetNode,
       colorScheme: colorScheme,
+      isActive: isActive,
       isInserted: isInserted
     });
     dom.append(nodeView);
@@ -337,6 +405,7 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
       targetNode: targetNode,
       colorScheme: colorScheme,
       intl: intl,
+      isActive: isActive,
       isInserted: isInserted
     });
   }

package/dist/cjs/pm-plugins/getScrollableDecorations.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getScrollableDecorations = void 0;
+exports.isInlineDiffDecorationRenderableInDoc = isInlineDiffDecorationRenderableInDoc;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+/**
+ * True if `fragment` contains at least one inline node (text, hardBreak, emoji, mention, etc.).
+ * Block-only subtrees (e.g. empty paragraphs, block cards with no inline children) return false.
+ */
+function fragmentContainsInlineContent(fragment) {
+  for (var i = 0; i < fragment.childCount; i++) {
+    var node = fragment.child(i);
+    if (node.isInline) {
+      return true;
+    }
+    if (node.content.size > 0 && fragmentContainsInlineContent(node.content)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Returns true when an inline decoration's [from, to) range can actually show in the document:
+ * positions are valid, and the slice contains at least one inline node ProseMirror would paint
+ * (not only empty block wrappers or block-only structure).
+ */
+function isInlineDiffDecorationRenderableInDoc(doc, from, to) {
+  try {
+    var slice = doc.slice(from, to);
+    return fragmentContainsInlineContent(slice.content);
+  } catch (_unused) {
+    return false;
+  }
+}
+
+/**
+ * Checks if range1 is fully contained within range2
+ */
+function isRangeFullyInside(range1Start, range1End, range2Start, range2End) {
+  return range2Start <= range1Start && range1End <= range2End;
+}
+
+/**
+ * Gets scrollable decorations from a DecorationSet, filtering out overlapping decorations
+ * and applying various rules for diff visualization.
+ *
+ * Rules:
+ * 1. Only includes diff-inline, diff-widget-* and diff-block decorations
+ * 2. Excludes listItem diff-block decorations (never scrollable)
+ * 3. Deduplicates diff-block decorations with same from, to and nodeName
+ * 4. When `doc` is passed: excludes diff-inline decorations whose range has no inline content
+ *    (invalid positions, or block-only slices with no text/atoms — e.g. empty blocks)
+ * 5. Excludes diff-inline decorations that are fully contained within a diff-block
+ * 6. Excludes diff-block decorations that are fully contained within a diff-inline
+ * 7. Results are sorted by from position, then by to position
+ *
+ * @param set - The DecorationSet to extract scrollable decorations from
+ * @param doc - Current document; when set, diff-inline ranges are validated against this doc
+ * @returns Array of scrollable decorations, sorted and deduplicated
+ */
+var getScrollableDecorations = exports.getScrollableDecorations = function getScrollableDecorations(set, doc) {
+  if (!set) {
+    return [];
+  }
+  var seenBlockKeys = new Set();
+  var allDecorations = set.find(undefined, undefined, function (spec) {
+    var _spec$key;
+    return spec.key === 'diff-inline' || ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith('diff-widget')) || spec.key === 'diff-block';
+  });
+
+  // First pass: filter out listItem blocks and deduplicates blocks
+  var filtered = allDecorations.filter(function (dec) {
+    var _dec$spec, _dec$spec$nodeName, _dec$spec3;
+    if (((_dec$spec = dec.spec) === null || _dec$spec === void 0 ? void 0 : _dec$spec.key) === 'diff-block') {
+      var _dec$spec2;
+      // Skip listItem blocks as they are not scrollable
+      if (((_dec$spec2 = dec.spec) === null || _dec$spec2 === void 0 ? void 0 : _dec$spec2.nodeName) === 'listItem') return false;
+    }
+    var key = "".concat(dec.from, "-").concat(dec.to, "-").concat((_dec$spec$nodeName = (_dec$spec3 = dec.spec) === null || _dec$spec3 === void 0 ? void 0 : _dec$spec3.nodeName) !== null && _dec$spec$nodeName !== void 0 ? _dec$spec$nodeName : '');
+    // Skip blocks that have already been seen
+    if (seenBlockKeys.has(key)) return false;
+    seenBlockKeys.add(key);
+    return true;
+  });
+
+  // Separate decorations by type for easier processing
+  var blocks = filtered.filter(function (d) {
+    var _d$spec;
+    return ((_d$spec = d.spec) === null || _d$spec === void 0 ? void 0 : _d$spec.key) === 'diff-block';
+  });
+  var rawInlines = filtered.filter(function (d) {
+    var _d$spec2;
+    return ((_d$spec2 = d.spec) === null || _d$spec2 === void 0 ? void 0 : _d$spec2.key) === 'diff-inline';
+  });
+  var inlines = doc !== undefined ? rawInlines.filter(function (d) {
+    return isInlineDiffDecorationRenderableInDoc(doc, d.from, d.to);
+  }) : rawInlines;
+  var widgets = filtered.filter(function (d) {
+    var _d$spec3;
+    return (_d$spec3 = d.spec) === null || _d$spec3 === void 0 || (_d$spec3 = _d$spec3.key) === null || _d$spec3 === void 0 ? void 0 : _d$spec3.startsWith('diff-widget');
+  });
+
+  // Second pass: exclude overlapping decorations
+  // Rules:
+  // - If an inline is fully inside a block, exclude the block (inline takes priority)
+  // - If a block is fully inside an inline, exclude the block (inline takes priority)
+  var nonOverlappingBlocks = blocks.filter(function (block) {
+    // Exclude block if:
+    // 1. It's fully contained within any inline, OR
+    // 2. It fully contains any inline
+    return !inlines.some(function (inline) {
+      return isRangeFullyInside(block.from, block.to, inline.from, inline.to) ||
+      // block inside inline
+      isRangeFullyInside(inline.from, inline.to, block.from, block.to);
+    } // inline inside block
+    );
+  });
+
+  // Combine all non-overlapping decorations
+  var result = [].concat((0, _toConsumableArray2.default)(nonOverlappingBlocks), (0, _toConsumableArray2.default)(inlines), (0, _toConsumableArray2.default)(widgets));
+
+  // Sort by from position, then by to position
+  result.sort(function (a, b) {
+    return a.from === b.from ? a.to - b.to : a.from - b.from;
+  });
+  return result;
+};