@atlaskit/editor-plugin-show-diff 6.1.2 → 6.1.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 6.1.3
+
+### Patch Changes
+
+- [`8c860e8e9e774`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8c860e8e9e774) -
+  Make active decorations more distinct
+
 ## 6.1.2
 
 ### Patch Changes

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

@@ -31,19 +31,23 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
     to = _ref.to,
     colorScheme = _ref.colorScheme,
     _ref$isInserted = _ref.isInserted,
-    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted;
+    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
+    activeIndexPos = _ref.activeIndexPos;
   var decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, function (node, pos) {
     if (node.isBlock && (!(0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || pos + node.nodeSize <= to)) {
+      var nodeEnd = pos + node.nodeSize;
+      var isActive = activeIndexPos && pos === activeIndexPos.from && nodeEnd === activeIndexPos.to;
       var decoration = (0, _createBlockChangedDecoration.createBlockChangedDecoration)({
         change: {
           from: pos,
-          to: pos + node.nodeSize,
+          to: nodeEnd,
           name: node.type.name
         },
         colorScheme: colorScheme,
-        isInserted: isInserted
+        isInserted: isInserted,
+        isActive: isActive
       });
       if (decoration) {
         decorations.push(decoration);
@@ -147,7 +151,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
   var optimizedChanges = optimizeChanges(changes);
   var decorations = [];
   optimizedChanges.forEach(function (change) {
-    var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     // Our default operations are insertions, so it should match the opposite of isInverted.
     var isInserted = !isInverted;
     if (change.inserted.length > 0) {
@@ -158,17 +162,20 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
       }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
         isInserted: isInserted
       })));
-      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(_objectSpread({
+      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(_objectSpread(_objectSpread({
         doc: tr.doc,
         from: change.fromB,
         to: change.toB,
         colorScheme: colorScheme
       }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
         isInserted: isInserted
+      }), {}, {
+        activeIndexPos: activeIndexPos,
+        intl: intl
       }))));
     }
     if (change.deleted.length > 0) {
-      var _isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+      var _isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.fromB === activeIndexPos.to;
       var decoration = (0, _createNodeChangedDecorationWidget.createNodeChangedDecorationWidget)(_objectSpread({
         change: change,
         doc: originalDoc,
@@ -186,7 +193,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
     }
   });
   (0, _getMarkChangeRanges.getMarkChangeRanges)(steps).forEach(function (change) {
-    var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     decorations.push((0, _createInlineChangedDecoration.createInlineChangedDecoration)({
       change: change,
       colorScheme: colorScheme,
@@ -200,7 +207,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
       from: change.fromB,
       to: change.toB,
       colorScheme: colorScheme,
-      isInserted: true
+      isInserted: true,
+      activeIndexPos: activeIndexPos,
+      intl: intl
     })));
   });
   return _view.DecorationSet.empty.add(tr.doc, decorations);

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

@@ -13,7 +13,7 @@ var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)(
   textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
 var editingStyleActive = exports.editingStyleActive = (0, _lazyNodeView.convertToInlineCss)({
-  background: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+  background: "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
   textDecoration: 'underline',
   textDecorationStyle: 'dotted',
   textDecorationThickness: "var(--ds-space-025, 2px)",

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNode = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDecorationMarkerVariable = exports.traditionalAddedCellOverlayStyle = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnbounded = 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.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyleActive = exports.deletedTraditionalContentStyle = exports.deletedTraditionalCellOverlayStyle = exports.deletedTraditionalBlockOutlineRounded = 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)",
@@ -13,7 +13,7 @@ var traditionalInsertStyle = exports.traditionalInsertStyle = (0, _lazyNodeView.
   textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
 });
 var traditionalInsertStyleActive = exports.traditionalInsertStyleActive = (0, _lazyNodeView.convertToInlineCss)({
-  background: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+  background: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
   textDecoration: 'underline',
   textDecorationStyle: 'solid',
   textDecorationThickness: "var(--ds-space-025, 2px)",
@@ -25,6 +25,15 @@ var deletedTraditionalContentStyle = exports.deletedTraditionalContentStyle = (0
   position: 'relative',
   opacity: 1
 });
+
+/** Emphasised (pressed) strikethrough for traditional removed text when active */
+var deletedTraditionalContentStyleActive = exports.deletedTraditionalContentStyleActive = (0, _lazyNodeView.convertToInlineCss)({
+  textDecorationColor: "var(--ds-text-accent-red, #AE2E24)",
+  textDecoration: 'line-through',
+  backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FFB8B2)",
+  position: 'relative',
+  opacity: 1
+});
 var deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
   position: 'absolute',
   top: '50%',
@@ -34,6 +43,17 @@ var deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentS
   pointerEvents: 'none',
   zIndex: 1
 });
+
+/** Emphasised (pressed) strikethrough line for traditional when active */
+var deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnboundedActive = (0, _lazyNodeView.convertToInlineCss)({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: "1px solid ".concat("var(--ds-text-accent-red-bolder, #5D1F1A)"),
+  pointerEvents: 'none',
+  zIndex: 1
+});
 var deletedTraditionalStyleQuoteNode = exports.deletedTraditionalStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
   marginTop: "var(--ds-space-150, 12px)",
   paddingTop: "var(--ds-space-025, 2px)",
@@ -59,20 +79,37 @@ var deletedTraditionalRowStyle = exports.deletedTraditionalRowStyle = (0, _lazyN
 var traditionalStyleQuoteNode = exports.traditionalStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
   borderLeft: "2px solid ".concat("var(--ds-border-accent-green, #22A06B)")
 });
+var traditionalStyleQuoteNodeActive = exports.traditionalStyleQuoteNodeActive = (0, _lazyNodeView.convertToInlineCss)({
+  borderLeft: "2px solid ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)")
+});
 var traditionalStyleRuleNode = exports.traditionalStyleRuleNode = (0, _lazyNodeView.convertToInlineCss)({
   backgroundColor: "var(--ds-border-accent-green, #22A06B)"
 });
+var traditionalStyleRuleNodeActive = exports.traditionalStyleRuleNodeActive = (0, _lazyNodeView.convertToInlineCss)({
+  backgroundColor: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"
+});
 var traditionalStyleNode = exports.traditionalStyleNode = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+var traditionalStyleNodeActive = exports.traditionalStyleNodeActive = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 2px ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 var traditionalStyleCardBlockNode = exports.traditionalStyleCardBlockNode = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
+var traditionalStyleCardBlockNodeActive = exports.traditionalStyleCardBlockNodeActive = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"),
+  borderRadius: "var(--ds-radius-medium, 6px)"
+});
 var traditionalDecorationMarkerVariable = exports.traditionalDecorationMarkerVariable = (0, _lazyNodeView.convertToInlineCss)({
   '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
 });
+var traditionalDecorationMarkerVariableActive = exports.traditionalDecorationMarkerVariableActive = (0, _lazyNodeView.convertToInlineCss)({
+  '--diff-decoration-marker-color': "var(--ds-text-accent-green, #216E4E)"
+});
 var traditionalAddedCellOverlayStyle = exports.traditionalAddedCellOverlayStyle = (0, _lazyNodeView.convertToInlineCss)({
   position: 'absolute',
   top: 0,

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

@@ -21,7 +21,9 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
   var nodeName = _ref.nodeName,
     colorScheme = _ref.colorScheme,
     _ref$isInserted = _ref.isInserted,
-    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted;
+    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
   var isTraditional = colorScheme === 'traditional';
   if (['mediaSingle', 'mediaGroup', 'table',
   // Handle table separately to avoid border issues
@@ -34,73 +36,79 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
+        return isTraditional && isActive ? _traditional.traditionalDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
       } else {
         return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
       }
     }
-    return isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
+    return isTraditional && isActive ? _traditional.traditionalDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
   }
   if (nodeName === 'blockquote') {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
+        return isTraditional ? isActive ? _traditional.traditionalStyleQuoteNodeActive : _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
       } else {
         return isTraditional ? _traditional.deletedTraditionalStyleQuoteNode : _standard.deletedStyleQuoteNode;
       }
     }
-    return isTraditional ? _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
+    return isTraditional ? isActive ? _traditional.traditionalStyleQuoteNodeActive : _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
   }
   if (nodeName === 'rule') {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
+        return isTraditional ? isActive ? _traditional.traditionalStyleRuleNodeActive : _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
       } else {
         return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
       }
     }
-    return isTraditional ? _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
+    return isTraditional ? isActive ? _traditional.traditionalStyleRuleNodeActive : _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
   }
   if (nodeName === 'blockCard') {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
+        return isTraditional ? isActive ? _traditional.traditionalStyleCardBlockNodeActive : _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
       } else {
         return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
       }
     }
-    return isTraditional ? _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
+    return isTraditional ? isActive ? _traditional.traditionalStyleCardBlockNodeActive : _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
   }
   if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     if (isInserted) {
-      return isTraditional ? _traditional.traditionalStyleNode : _standard.editingStyleNode;
+      return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNode : _standard.editingStyleNode;
     } else {
       return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
     }
   }
-  return isTraditional ? _traditional.traditionalStyleNode : _standard.editingStyleNode;
+  return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNode : _standard.editingStyleNode;
 };
 
 /**
- * Inline decoration used for insertions as the content already exists in the document
+ * Node decoration used for block-level insertions. When isActive, uses emphasised (pressed) styling.
  *
- * @param change Changeset "change" containing information about the change content + range
- * @returns Prosemirror inline decoration
+ * @param change Node range and name
+ * @param colorScheme Optional color scheme
+ * @param isActive Whether this node is part of the currently active/focused change
+ * @returns Prosemirror node decoration or undefined
  */
 var createBlockChangedDecoration = exports.createBlockChangedDecoration = function createBlockChangedDecoration(_ref2) {
   var change = _ref2.change,
     colorScheme = _ref2.colorScheme,
     _ref2$isInserted = _ref2.isInserted,
-    isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted;
+    isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
+    _ref2$isActive = _ref2.isActive,
+    isActive = _ref2$isActive === void 0 ? false : _ref2$isActive;
   var style = getBlockNodeStyle({
     nodeName: change.name,
-    colorScheme: colorScheme
+    colorScheme: colorScheme,
+    isActive: isActive
   });
   if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     style = getBlockNodeStyle({
       nodeName: change.name,
       colorScheme: colorScheme,
-      isInserted: isInserted
+      isInserted: isInserted,
+      isActive: isActive
     });
   }
   var className = getNodeClass(change.name);
@@ -113,15 +121,15 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
       }, {
         key: 'diff-block'
       });
+    } else {
+      return undefined;
     }
-    return undefined;
-  } else {
-    return _view.Decoration.node(change.from, change.to, {
-      style: style,
-      'data-testid': 'show-diff-changed-decoration-node',
-      class: className
-    }, {
-      key: 'diff-block'
-    });
   }
+  return _view.Decoration.node(change.from, change.to, {
+    style: style,
+    'data-testid': 'show-diff-changed-decoration-node',
+    class: className
+  }, {
+    key: 'diff-block'
+  });
 };

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

@@ -15,6 +15,10 @@ var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWi
 var _findSafeInsertPos = require("./utils/findSafeInsertPos");
 var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
 var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colorScheme === 'traditional' && isActive) {
+    return _traditional.deletedTraditionalContentStyleUnboundedActive;
+  }
   return colorScheme === 'traditional' ? _traditional.deletedTraditionalContentStyleUnbounded : _standard.deletedContentStyleUnbounded;
 };
 var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
@@ -33,7 +37,7 @@ var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
 var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   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;
@@ -254,7 +258,9 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   // 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);
-  return [_view.Decoration.widget(safeInsertPos, dom, {
-    key: 'diff-widget'
-  })];
+  var decorations = [];
+  decorations.push(_view.Decoration.widget(safeInsertPos, dom, {
+    key: "diff-widget-".concat(isActive ? 'active' : 'inactive')
+  }));
+  return decorations;
 };

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

@@ -20,10 +20,13 @@ 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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var showDiffPluginKey = exports.showDiffPluginKey = new _state2.PluginKey('showDiffPlugin');
 var getScrollableDecorations = exports.getScrollableDecorations = function getScrollableDecorations(set) {
-  var _set$find;
-  return (_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, function (spec) {
-    return spec.key === 'diff-inline' || spec.key === 'diff-widget' || spec.key === 'diff-block';
-  })) !== null && _set$find !== void 0 ? _set$find : [];
+  var _set$find$sort;
+  return (_set$find$sort = set === null || set === void 0 ? void 0 : 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';
+  }).sort(function (a, b) {
+    return a.from - b.from;
+  })) !== null && _set$find$sort !== void 0 ? _set$find$sort : [];
 };
 var createPlugin = exports.createPlugin = function createPlugin(config, getIntl, api) {
   var nodeViewSerializer = new _NodeViewSerializer.NodeViewSerializer({});

package/dist/es2019/pm-plugins/calculateDiffDecorations.js

@@ -16,20 +16,24 @@ const calculateNodesForBlockDecoration = ({
   from,
   to,
   colorScheme,
-  isInserted = true
+  isInserted = true,
+  activeIndexPos
 }) => {
   const decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, (node, pos) => {
     if (node.isBlock && (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || pos + node.nodeSize <= to)) {
+      const nodeEnd = pos + node.nodeSize;
+      const isActive = activeIndexPos && pos === activeIndexPos.from && nodeEnd === activeIndexPos.to;
       const decoration = createBlockChangedDecoration({
         change: {
           from: pos,
-          to: pos + node.nodeSize,
+          to: nodeEnd,
           name: node.type.name
         },
         colorScheme,
-        isInserted
+        isInserted,
+        isActive
       });
       if (decoration) {
         decorations.push(decoration);
@@ -132,7 +136,7 @@ const calculateDiffDecorationsInner = ({
   const optimizedChanges = optimizeChanges(changes);
   const decorations = [];
   optimizedChanges.forEach(change => {
-    const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    const isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     // Our default operations are insertions, so it should match the opposite of isInverted.
     const isInserted = !isInverted;
     if (change.inserted.length > 0) {
@@ -151,11 +155,13 @@ const calculateDiffDecorationsInner = ({
         colorScheme,
         ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
           isInserted
-        })
+        }),
+        activeIndexPos,
+        intl
       }));
     }
     if (change.deleted.length > 0) {
-      const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+      const isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.fromB === activeIndexPos.to;
       const decoration = createNodeChangedDecorationWidget({
         change,
         doc: originalDoc,
@@ -174,7 +180,7 @@ const calculateDiffDecorationsInner = ({
     }
   });
   getMarkChangeRanges(steps).forEach(change => {
-    const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    const isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     decorations.push(createInlineChangedDecoration({
       change,
       colorScheme,
@@ -188,7 +194,9 @@ const calculateDiffDecorationsInner = ({
       from: change.fromB,
       to: change.toB,
       colorScheme,
-      isInserted: true
+      isInserted: true,
+      activeIndexPos,
+      intl
     }));
   });
   return DecorationSet.empty.add(tr.doc, decorations);

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

@@ -7,7 +7,7 @@ export const editingStyle = convertToInlineCss({
   textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
 export const editingStyleActive = convertToInlineCss({
-  background: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+  background: "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
   textDecoration: 'underline',
   textDecorationStyle: 'dotted',
   textDecorationThickness: "var(--ds-space-025, 2px)",

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

@@ -7,7 +7,7 @@ export const traditionalInsertStyle = convertToInlineCss({
   textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
 });
 export const traditionalInsertStyleActive = convertToInlineCss({
-  background: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+  background: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
   textDecoration: 'underline',
   textDecorationStyle: 'solid',
   textDecorationThickness: "var(--ds-space-025, 2px)",
@@ -19,6 +19,15 @@ export const deletedTraditionalContentStyle = convertToInlineCss({
   position: 'relative',
   opacity: 1
 });
+
+/** Emphasised (pressed) strikethrough for traditional removed text when active */
+export const deletedTraditionalContentStyleActive = convertToInlineCss({
+  textDecorationColor: "var(--ds-text-accent-red, #AE2E24)",
+  textDecoration: 'line-through',
+  backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FFB8B2)",
+  position: 'relative',
+  opacity: 1
+});
 export const deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   position: 'absolute',
   top: '50%',
@@ -28,6 +37,17 @@ export const deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
+
+/** Emphasised (pressed) strikethrough line for traditional when active */
+export const deletedTraditionalContentStyleUnboundedActive = convertToInlineCss({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: `1px solid ${"var(--ds-text-accent-red-bolder, #5D1F1A)"}`,
+  pointerEvents: 'none',
+  zIndex: 1
+});
 export const deletedTraditionalStyleQuoteNode = convertToInlineCss({
   marginTop: "var(--ds-space-150, 12px)",
   paddingTop: "var(--ds-space-025, 2px)",
@@ -53,20 +73,37 @@ export const deletedTraditionalRowStyle = convertToInlineCss({
 export const traditionalStyleQuoteNode = convertToInlineCss({
   borderLeft: `2px solid ${"var(--ds-border-accent-green, #22A06B)"}`
 });
+export const traditionalStyleQuoteNodeActive = convertToInlineCss({
+  borderLeft: `2px solid ${"var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"}`
+});
 export const traditionalStyleRuleNode = convertToInlineCss({
   backgroundColor: "var(--ds-border-accent-green, #22A06B)"
 });
+export const traditionalStyleRuleNodeActive = convertToInlineCss({
+  backgroundColor: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"
+});
 export const traditionalStyleNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-green, #22A06B)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+export const traditionalStyleNodeActive = convertToInlineCss({
+  boxShadow: `0 0 0 2px ${"var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"}`,
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 export const traditionalStyleCardBlockNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-green, #22A06B)"}`,
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
+export const traditionalStyleCardBlockNodeActive = convertToInlineCss({
+  boxShadow: `0 0 0 1px ${"var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"}`,
+  borderRadius: "var(--ds-radius-medium, 6px)"
+});
 export const traditionalDecorationMarkerVariable = convertToInlineCss({
   '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
 });
+export const traditionalDecorationMarkerVariableActive = convertToInlineCss({
+  '--diff-decoration-marker-color': "var(--ds-text-accent-green, #216E4E)"
+});
 export const traditionalAddedCellOverlayStyle = convertToInlineCss({
   position: 'absolute',
   top: 0,

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

@@ -2,7 +2,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode } from './colorSchemes/standard';
-import { traditionalDecorationMarkerVariable, traditionalStyleQuoteNode, traditionalStyleRuleNode, traditionalStyleCardBlockNode, traditionalStyleNode, deletedTraditionalContentStyle, deletedTraditionalStyleQuoteNode } from './colorSchemes/traditional';
+import { traditionalDecorationMarkerVariable, traditionalDecorationMarkerVariableActive, traditionalStyleQuoteNode, traditionalStyleQuoteNodeActive, traditionalStyleRuleNode, traditionalStyleRuleNodeActive, traditionalStyleCardBlockNode, traditionalStyleCardBlockNodeActive, traditionalStyleNode, traditionalStyleNodeActive, deletedTraditionalContentStyle, deletedTraditionalStyleQuoteNode } from './colorSchemes/traditional';
 const getNodeClass = name => {
   switch (name) {
     case 'extension':
@@ -14,7 +14,8 @@ const getNodeClass = name => {
 const getBlockNodeStyle = ({
   nodeName,
   colorScheme,
-  isInserted = true
+  isInserted = true,
+  isActive = false
 }) => {
   const isTraditional = colorScheme === 'traditional';
   if (['mediaSingle', 'mediaGroup', 'table',
@@ -28,73 +29,78 @@ const getBlockNodeStyle = ({
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
+        return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
       } else {
         return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
       }
     }
-    return isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
+    return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
   }
   if (nodeName === 'blockquote') {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? traditionalStyleQuoteNode : editingStyleQuoteNode;
+        return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : traditionalStyleQuoteNode : editingStyleQuoteNode;
       } else {
         return isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNode;
       }
     }
-    return isTraditional ? traditionalStyleQuoteNode : editingStyleQuoteNode;
+    return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : traditionalStyleQuoteNode : editingStyleQuoteNode;
   }
   if (nodeName === 'rule') {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? traditionalStyleRuleNode : editingStyleRuleNode;
+        return isTraditional ? isActive ? traditionalStyleRuleNodeActive : traditionalStyleRuleNode : editingStyleRuleNode;
       } else {
         return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
       }
     }
-    return isTraditional ? traditionalStyleRuleNode : editingStyleRuleNode;
+    return isTraditional ? isActive ? traditionalStyleRuleNodeActive : traditionalStyleRuleNode : editingStyleRuleNode;
   }
   if (nodeName === 'blockCard') {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
+        return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : traditionalStyleCardBlockNode : editingStyleCardBlockNode;
       } else {
         return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
       }
     }
-    return isTraditional ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
+    return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : traditionalStyleCardBlockNode : editingStyleCardBlockNode;
   }
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     if (isInserted) {
-      return isTraditional ? traditionalStyleNode : editingStyleNode;
+      return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNode : editingStyleNode;
     } else {
       return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
     }
   }
-  return isTraditional ? traditionalStyleNode : editingStyleNode;
+  return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNode : editingStyleNode;
 };
 
 /**
- * Inline decoration used for insertions as the content already exists in the document
+ * Node decoration used for block-level insertions. When isActive, uses emphasised (pressed) styling.
  *
- * @param change Changeset "change" containing information about the change content + range
- * @returns Prosemirror inline decoration
+ * @param change Node range and name
+ * @param colorScheme Optional color scheme
+ * @param isActive Whether this node is part of the currently active/focused change
+ * @returns Prosemirror node decoration or undefined
  */
 export const createBlockChangedDecoration = ({
   change,
   colorScheme,
-  isInserted = true
+  isInserted = true,
+  isActive = false
 }) => {
   let style = getBlockNodeStyle({
     nodeName: change.name,
-    colorScheme
+    colorScheme,
+    isActive
   });
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     style = getBlockNodeStyle({
       nodeName: change.name,
       colorScheme,
-      isInserted
+      isInserted,
+      isActive
     });
   }
   const className = getNodeClass(change.name);
@@ -107,15 +113,15 @@ export const createBlockChangedDecoration = ({
       }, {
         key: 'diff-block'
       });
+    } else {
+      return undefined;
     }
-    return undefined;
-  } else {
-    return Decoration.node(change.from, change.to, {
-      style,
-      'data-testid': 'show-diff-changed-decoration-node',
-      class: className
-    }, {
-      key: 'diff-block'
-    });
   }
+  return Decoration.node(change.from, change.to, {
+    style,
+    'data-testid': 'show-diff-changed-decoration-node',
+    class: className
+  }, {
+    key: 'diff-block'
+  });
 };

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

@@ -2,11 +2,16 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedContentStyleUnbounded } from './colorSchemes/standard';
-import { traditionalInsertStyle, traditionalInsertStyleActive, deletedTraditionalContentStyle, deletedTraditionalContentStyleUnbounded } from './colorSchemes/traditional';
+import { traditionalInsertStyle, traditionalInsertStyleActive, deletedTraditionalContentStyle, deletedTraditionalContentStyleActive, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { wrapBlockNodeView } from './utils/wrapBlockNodeView';
-const getDeletedContentStyleUnbounded = colorScheme => colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
+const getDeletedContentStyleUnbounded = (colorScheme, isActive = false) => {
+  if (colorScheme === 'traditional' && isActive) {
+    return deletedTraditionalContentStyleUnboundedActive;
+  }
+  return colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
+};
 const getInsertedContentStyle = (colorScheme, isActive = false) => {
   if (colorScheme === 'traditional') {
     if (isActive) {
@@ -21,7 +26,7 @@ const getInsertedContentStyle = (colorScheme, isActive = false) => {
 };
 const getDeletedContentStyle = (colorScheme, isActive = false) => {
   if (colorScheme === 'traditional') {
-    return deletedTraditionalContentStyle;
+    return isActive ? deletedTraditionalContentStyleActive : deletedTraditionalContentStyle;
   }
   if (isActive) {
     return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNewActive : deletedContentStyleActive;
@@ -229,7 +234,9 @@ export const createNodeChangedDecorationWidget = ({
   // Widget decoration used for deletions as the content is not in the document
   // and we want to display the deleted content with a style.
   const safeInsertPos = findSafeInsertPos(newDoc, change.fromB, slice);
-  return [Decoration.widget(safeInsertPos, dom, {
-    key: 'diff-widget'
-  })];
+  const decorations = [];
+  decorations.push(Decoration.widget(safeInsertPos, dom, {
+    key: `diff-widget-${isActive ? 'active' : 'inactive'}`
+  }));
+  return decorations;
 };

package/dist/es2019/pm-plugins/main.js

@@ -10,8 +10,11 @@ import { NodeViewSerializer } from './NodeViewSerializer';
 import { scrollToActiveDecoration } from './scrollToActiveDecoration';
 export const showDiffPluginKey = new PluginKey('showDiffPlugin');
 export const getScrollableDecorations = set => {
-  var _set$find;
-  return (_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, spec => spec.key === 'diff-inline' || spec.key === 'diff-widget' || spec.key === 'diff-block')) !== null && _set$find !== void 0 ? _set$find : [];
+  var _set$find$sort;
+  return (_set$find$sort = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, 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';
+  }).sort((a, b) => a.from - b.from)) !== null && _set$find$sort !== void 0 ? _set$find$sort : [];
 };
 export const createPlugin = (config, getIntl, api) => {
   const nodeViewSerializer = new NodeViewSerializer({});

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

@@ -25,19 +25,23 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
     to = _ref.to,
     colorScheme = _ref.colorScheme,
     _ref$isInserted = _ref.isInserted,
-    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted;
+    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
+    activeIndexPos = _ref.activeIndexPos;
   var decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, function (node, pos) {
     if (node.isBlock && (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || pos + node.nodeSize <= to)) {
+      var nodeEnd = pos + node.nodeSize;
+      var isActive = activeIndexPos && pos === activeIndexPos.from && nodeEnd === activeIndexPos.to;
       var decoration = createBlockChangedDecoration({
         change: {
           from: pos,
-          to: pos + node.nodeSize,
+          to: nodeEnd,
           name: node.type.name
         },
         colorScheme: colorScheme,
-        isInserted: isInserted
+        isInserted: isInserted,
+        isActive: isActive
       });
       if (decoration) {
         decorations.push(decoration);
@@ -141,7 +145,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
   var optimizedChanges = optimizeChanges(changes);
   var decorations = [];
   optimizedChanges.forEach(function (change) {
-    var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     // Our default operations are insertions, so it should match the opposite of isInverted.
     var isInserted = !isInverted;
     if (change.inserted.length > 0) {
@@ -152,17 +156,20 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
       }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
         isInserted: isInserted
       })));
-      decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(_objectSpread({
+      decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(_objectSpread(_objectSpread({
         doc: tr.doc,
         from: change.fromB,
         to: change.toB,
         colorScheme: colorScheme
       }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
         isInserted: isInserted
+      }), {}, {
+        activeIndexPos: activeIndexPos,
+        intl: intl
       }))));
     }
     if (change.deleted.length > 0) {
-      var _isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+      var _isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.fromB === activeIndexPos.to;
       var decoration = createNodeChangedDecorationWidget(_objectSpread({
         change: change,
         doc: originalDoc,
@@ -180,7 +187,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
     }
   });
   getMarkChangeRanges(steps).forEach(function (change) {
-    var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     decorations.push(createInlineChangedDecoration({
       change: change,
       colorScheme: colorScheme,
@@ -194,7 +201,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
       from: change.fromB,
       to: change.toB,
       colorScheme: colorScheme,
-      isInserted: true
+      isInserted: true,
+      activeIndexPos: activeIndexPos,
+      intl: intl
     })));
   });
   return DecorationSet.empty.add(tr.doc, decorations);

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

@@ -7,7 +7,7 @@ export var editingStyle = convertToInlineCss({
   textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
 export var editingStyleActive = convertToInlineCss({
-  background: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+  background: "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
   textDecoration: 'underline',
   textDecorationStyle: 'dotted',
   textDecorationThickness: "var(--ds-space-025, 2px)",

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

@@ -7,7 +7,7 @@ export var traditionalInsertStyle = convertToInlineCss({
   textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
 });
 export var traditionalInsertStyleActive = convertToInlineCss({
-  background: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+  background: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
   textDecoration: 'underline',
   textDecorationStyle: 'solid',
   textDecorationThickness: "var(--ds-space-025, 2px)",
@@ -19,6 +19,15 @@ export var deletedTraditionalContentStyle = convertToInlineCss({
   position: 'relative',
   opacity: 1
 });
+
+/** Emphasised (pressed) strikethrough for traditional removed text when active */
+export var deletedTraditionalContentStyleActive = convertToInlineCss({
+  textDecorationColor: "var(--ds-text-accent-red, #AE2E24)",
+  textDecoration: 'line-through',
+  backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FFB8B2)",
+  position: 'relative',
+  opacity: 1
+});
 export var deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   position: 'absolute',
   top: '50%',
@@ -28,6 +37,17 @@ export var deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
+
+/** Emphasised (pressed) strikethrough line for traditional when active */
+export var deletedTraditionalContentStyleUnboundedActive = convertToInlineCss({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: "1px solid ".concat("var(--ds-text-accent-red-bolder, #5D1F1A)"),
+  pointerEvents: 'none',
+  zIndex: 1
+});
 export var deletedTraditionalStyleQuoteNode = convertToInlineCss({
   marginTop: "var(--ds-space-150, 12px)",
   paddingTop: "var(--ds-space-025, 2px)",
@@ -53,20 +73,37 @@ export var deletedTraditionalRowStyle = convertToInlineCss({
 export var traditionalStyleQuoteNode = convertToInlineCss({
   borderLeft: "2px solid ".concat("var(--ds-border-accent-green, #22A06B)")
 });
+export var traditionalStyleQuoteNodeActive = convertToInlineCss({
+  borderLeft: "2px solid ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)")
+});
 export var traditionalStyleRuleNode = convertToInlineCss({
   backgroundColor: "var(--ds-border-accent-green, #22A06B)"
 });
+export var traditionalStyleRuleNodeActive = convertToInlineCss({
+  backgroundColor: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"
+});
 export var traditionalStyleNode = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+export var traditionalStyleNodeActive = convertToInlineCss({
+  boxShadow: "0 0 0 2px ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 export var traditionalStyleCardBlockNode = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
+export var traditionalStyleCardBlockNodeActive = convertToInlineCss({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"),
+  borderRadius: "var(--ds-radius-medium, 6px)"
+});
 export var traditionalDecorationMarkerVariable = convertToInlineCss({
   '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
 });
+export var traditionalDecorationMarkerVariableActive = convertToInlineCss({
+  '--diff-decoration-marker-color': "var(--ds-text-accent-green, #216E4E)"
+});
 export var traditionalAddedCellOverlayStyle = convertToInlineCss({
   position: 'absolute',
   top: 0,

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

@@ -2,7 +2,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode } from './colorSchemes/standard';
-import { traditionalDecorationMarkerVariable, traditionalStyleQuoteNode, traditionalStyleRuleNode, traditionalStyleCardBlockNode, traditionalStyleNode, deletedTraditionalContentStyle, deletedTraditionalStyleQuoteNode } from './colorSchemes/traditional';
+import { traditionalDecorationMarkerVariable, traditionalDecorationMarkerVariableActive, traditionalStyleQuoteNode, traditionalStyleQuoteNodeActive, traditionalStyleRuleNode, traditionalStyleRuleNodeActive, traditionalStyleCardBlockNode, traditionalStyleCardBlockNodeActive, traditionalStyleNode, traditionalStyleNodeActive, deletedTraditionalContentStyle, deletedTraditionalStyleQuoteNode } from './colorSchemes/traditional';
 var getNodeClass = function getNodeClass(name) {
   switch (name) {
     case 'extension':
@@ -15,7 +15,9 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
   var nodeName = _ref.nodeName,
     colorScheme = _ref.colorScheme,
     _ref$isInserted = _ref.isInserted,
-    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted;
+    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
   var isTraditional = colorScheme === 'traditional';
   if (['mediaSingle', 'mediaGroup', 'table',
   // Handle table separately to avoid border issues
@@ -28,73 +30,79 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
+        return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
       } else {
         return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
       }
     }
-    return isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
+    return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
   }
   if (nodeName === 'blockquote') {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? traditionalStyleQuoteNode : editingStyleQuoteNode;
+        return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : traditionalStyleQuoteNode : editingStyleQuoteNode;
       } else {
         return isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNode;
       }
     }
-    return isTraditional ? traditionalStyleQuoteNode : editingStyleQuoteNode;
+    return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : traditionalStyleQuoteNode : editingStyleQuoteNode;
   }
   if (nodeName === 'rule') {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? traditionalStyleRuleNode : editingStyleRuleNode;
+        return isTraditional ? isActive ? traditionalStyleRuleNodeActive : traditionalStyleRuleNode : editingStyleRuleNode;
       } else {
         return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
       }
     }
-    return isTraditional ? traditionalStyleRuleNode : editingStyleRuleNode;
+    return isTraditional ? isActive ? traditionalStyleRuleNodeActive : traditionalStyleRuleNode : editingStyleRuleNode;
   }
   if (nodeName === 'blockCard') {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
+        return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : traditionalStyleCardBlockNode : editingStyleCardBlockNode;
       } else {
         return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
       }
     }
-    return isTraditional ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
+    return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : traditionalStyleCardBlockNode : editingStyleCardBlockNode;
   }
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     if (isInserted) {
-      return isTraditional ? traditionalStyleNode : editingStyleNode;
+      return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNode : editingStyleNode;
     } else {
       return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
     }
   }
-  return isTraditional ? traditionalStyleNode : editingStyleNode;
+  return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNode : editingStyleNode;
 };
 
 /**
- * Inline decoration used for insertions as the content already exists in the document
+ * Node decoration used for block-level insertions. When isActive, uses emphasised (pressed) styling.
  *
- * @param change Changeset "change" containing information about the change content + range
- * @returns Prosemirror inline decoration
+ * @param change Node range and name
+ * @param colorScheme Optional color scheme
+ * @param isActive Whether this node is part of the currently active/focused change
+ * @returns Prosemirror node decoration or undefined
  */
 export var createBlockChangedDecoration = function createBlockChangedDecoration(_ref2) {
   var change = _ref2.change,
     colorScheme = _ref2.colorScheme,
     _ref2$isInserted = _ref2.isInserted,
-    isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted;
+    isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
+    _ref2$isActive = _ref2.isActive,
+    isActive = _ref2$isActive === void 0 ? false : _ref2$isActive;
   var style = getBlockNodeStyle({
     nodeName: change.name,
-    colorScheme: colorScheme
+    colorScheme: colorScheme,
+    isActive: isActive
   });
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     style = getBlockNodeStyle({
       nodeName: change.name,
       colorScheme: colorScheme,
-      isInserted: isInserted
+      isInserted: isInserted,
+      isActive: isActive
     });
   }
   var className = getNodeClass(change.name);
@@ -107,15 +115,15 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
       }, {
         key: 'diff-block'
       });
+    } else {
+      return undefined;
     }
-    return undefined;
-  } else {
-    return Decoration.node(change.from, change.to, {
-      style: style,
-      'data-testid': 'show-diff-changed-decoration-node',
-      class: className
-    }, {
-      key: 'diff-block'
-    });
   }
+  return Decoration.node(change.from, change.to, {
+    style: style,
+    'data-testid': 'show-diff-changed-decoration-node',
+    class: className
+  }, {
+    key: 'diff-block'
+  });
 };

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

@@ -3,11 +3,15 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedContentStyleUnbounded } from './colorSchemes/standard';
-import { traditionalInsertStyle, traditionalInsertStyleActive, deletedTraditionalContentStyle, deletedTraditionalContentStyleUnbounded } from './colorSchemes/traditional';
+import { traditionalInsertStyle, traditionalInsertStyleActive, deletedTraditionalContentStyle, deletedTraditionalContentStyleActive, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { wrapBlockNodeView } from './utils/wrapBlockNodeView';
 var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colorScheme === 'traditional' && isActive) {
+    return deletedTraditionalContentStyleUnboundedActive;
+  }
   return colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
 };
 var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
@@ -26,7 +30,7 @@ var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
 var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   if (colorScheme === 'traditional') {
-    return deletedTraditionalContentStyle;
+    return isActive ? deletedTraditionalContentStyleActive : deletedTraditionalContentStyle;
   }
   if (isActive) {
     return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNewActive : deletedContentStyleActive;
@@ -247,7 +251,9 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   // 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 = findSafeInsertPos(newDoc, change.fromB, slice);
-  return [Decoration.widget(safeInsertPos, dom, {
-    key: 'diff-widget'
-  })];
+  var decorations = [];
+  decorations.push(Decoration.widget(safeInsertPos, dom, {
+    key: "diff-widget-".concat(isActive ? 'active' : 'inactive')
+  }));
+  return decorations;
 };

package/dist/esm/pm-plugins/main.js

@@ -13,10 +13,13 @@ import { NodeViewSerializer } from './NodeViewSerializer';
 import { scrollToActiveDecoration } from './scrollToActiveDecoration';
 export var showDiffPluginKey = new PluginKey('showDiffPlugin');
 export var getScrollableDecorations = function getScrollableDecorations(set) {
-  var _set$find;
-  return (_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, function (spec) {
-    return spec.key === 'diff-inline' || spec.key === 'diff-widget' || spec.key === 'diff-block';
-  })) !== null && _set$find !== void 0 ? _set$find : [];
+  var _set$find$sort;
+  return (_set$find$sort = set === null || set === void 0 ? void 0 : 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';
+  }).sort(function (a, b) {
+    return a.from - b.from;
+  })) !== null && _set$find$sort !== void 0 ? _set$find$sort : [];
 };
 export var createPlugin = function createPlugin(config, getIntl, api) {
   var nodeViewSerializer = new NodeViewSerializer({});

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

@@ -1,15 +1,24 @@
 export declare const traditionalInsertStyle: string;
 export declare const traditionalInsertStyleActive: string;
 export declare const deletedTraditionalContentStyle: string;
+/** Emphasised (pressed) strikethrough for traditional removed text when active */
+export declare const deletedTraditionalContentStyleActive: string;
 export declare const deletedTraditionalContentStyleUnbounded: string;
+/** Emphasised (pressed) strikethrough line for traditional when active */
+export declare const deletedTraditionalContentStyleUnboundedActive: string;
 export declare const deletedTraditionalStyleQuoteNode: string;
 export declare const deletedTraditionalBlockOutline: string;
 export declare const deletedTraditionalBlockOutlineRounded: string;
 export declare const deletedTraditionalRowStyle: string;
 export declare const traditionalStyleQuoteNode: string;
+export declare const traditionalStyleQuoteNodeActive: string;
 export declare const traditionalStyleRuleNode: string;
+export declare const traditionalStyleRuleNodeActive: string;
 export declare const traditionalStyleNode: string;
+export declare const traditionalStyleNodeActive: string;
 export declare const traditionalStyleCardBlockNode: string;
+export declare const traditionalStyleCardBlockNodeActive: string;
 export declare const traditionalDecorationMarkerVariable: string;
+export declare const traditionalDecorationMarkerVariableActive: string;
 export declare const traditionalAddedCellOverlayStyle: string;
 export declare const deletedTraditionalCellOverlayStyle: string;

package/dist/types/pm-plugins/decorations/createBlockChangedDecoration.d.ts

@@ -1,17 +1,20 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { ColorScheme } from '../../showDiffPluginType';
 /**
- * Inline decoration used for insertions as the content already exists in the document
+ * Node decoration used for block-level insertions. When isActive, uses emphasised (pressed) styling.
  *
- * @param change Changeset "change" containing information about the change content + range
- * @returns Prosemirror inline decoration
+ * @param change Node range and name
+ * @param colorScheme Optional color scheme
+ * @param isActive Whether this node is part of the currently active/focused change
+ * @returns Prosemirror node decoration or undefined
  */
-export declare const createBlockChangedDecoration: ({ change, colorScheme, isInserted, }: {
+export declare const createBlockChangedDecoration: ({ change, colorScheme, isInserted, isActive, }: {
     change: {
         from: number;
         name: string;
         to: number;
     };
     colorScheme?: ColorScheme;
-    isInserted: boolean;
+    isActive?: boolean;
+    isInserted?: boolean;
 }) => Decoration | undefined;

package/dist/types/pm-plugins/decorations/createNodeChangedDecorationWidget.d.ts

@@ -9,7 +9,7 @@ import type { NodeViewSerializer } from '../NodeViewSerializer';
  * that is not in the current document.
  */
 export declare const createNodeChangedDecorationWidget: ({ change, doc, nodeViewSerializer, colorScheme, newDoc, intl, isActive, isInserted, }: {
-    change: Pick<Change, "fromA" | "toA" | "fromB" | "deleted">;
+    change: Pick<Change, "fromA" | "toA" | "fromB" | "deleted" | "toB">;
     colorScheme?: ColorScheme;
     doc: PMNode;
     intl: IntlShape;

package/dist/types-ts4.5/pm-plugins/decorations/colorSchemes/traditional.d.ts

@@ -1,15 +1,24 @@
 export declare const traditionalInsertStyle: string;
 export declare const traditionalInsertStyleActive: string;
 export declare const deletedTraditionalContentStyle: string;
+/** Emphasised (pressed) strikethrough for traditional removed text when active */
+export declare const deletedTraditionalContentStyleActive: string;
 export declare const deletedTraditionalContentStyleUnbounded: string;
+/** Emphasised (pressed) strikethrough line for traditional when active */
+export declare const deletedTraditionalContentStyleUnboundedActive: string;
 export declare const deletedTraditionalStyleQuoteNode: string;
 export declare const deletedTraditionalBlockOutline: string;
 export declare const deletedTraditionalBlockOutlineRounded: string;
 export declare const deletedTraditionalRowStyle: string;
 export declare const traditionalStyleQuoteNode: string;
+export declare const traditionalStyleQuoteNodeActive: string;
 export declare const traditionalStyleRuleNode: string;
+export declare const traditionalStyleRuleNodeActive: string;
 export declare const traditionalStyleNode: string;
+export declare const traditionalStyleNodeActive: string;
 export declare const traditionalStyleCardBlockNode: string;
+export declare const traditionalStyleCardBlockNodeActive: string;
 export declare const traditionalDecorationMarkerVariable: string;
+export declare const traditionalDecorationMarkerVariableActive: string;
 export declare const traditionalAddedCellOverlayStyle: string;
 export declare const deletedTraditionalCellOverlayStyle: string;

package/dist/types-ts4.5/pm-plugins/decorations/createBlockChangedDecoration.d.ts

@@ -1,17 +1,20 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { ColorScheme } from '../../showDiffPluginType';
 /**
- * Inline decoration used for insertions as the content already exists in the document
+ * Node decoration used for block-level insertions. When isActive, uses emphasised (pressed) styling.
  *
- * @param change Changeset "change" containing information about the change content + range
- * @returns Prosemirror inline decoration
+ * @param change Node range and name
+ * @param colorScheme Optional color scheme
+ * @param isActive Whether this node is part of the currently active/focused change
+ * @returns Prosemirror node decoration or undefined
  */
-export declare const createBlockChangedDecoration: ({ change, colorScheme, isInserted, }: {
+export declare const createBlockChangedDecoration: ({ change, colorScheme, isInserted, isActive, }: {
     change: {
         from: number;
         name: string;
         to: number;
     };
     colorScheme?: ColorScheme;
-    isInserted: boolean;
+    isActive?: boolean;
+    isInserted?: boolean;
 }) => Decoration | undefined;

package/dist/types-ts4.5/pm-plugins/decorations/createNodeChangedDecorationWidget.d.ts

@@ -9,7 +9,7 @@ import type { NodeViewSerializer } from '../NodeViewSerializer';
  * that is not in the current document.
  */
 export declare const createNodeChangedDecorationWidget: ({ change, doc, nodeViewSerializer, colorScheme, newDoc, intl, isActive, isInserted, }: {
-    change: Pick<Change, "fromA" | "toA" | "fromB" | "deleted">;
+    change: Pick<Change, "fromA" | "toA" | "fromB" | "deleted" | "toB">;
     colorScheme?: ColorScheme;
     doc: PMNode;
     intl: IntlShape;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "6.1.2",
+	"version": "6.1.3",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",