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

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;