@atlaskit/editor-plugin-show-diff 4.0.14 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 4.1.0
+
+### Minor Changes
+
+- [`ec61e21a60034`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ec61e21a60034) -
+  Adds new commands to scroll to each diff change in the UI.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.0.15
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.0.14
 
 ### Patch Changes

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

@@ -74,7 +74,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
     pluginState = _ref.pluginState,
     nodeViewSerializer = _ref.nodeViewSerializer,
     colourScheme = _ref.colourScheme,
-    intl = _ref.intl;
+    intl = _ref.intl,
+    activeIndexPos = _ref.activeIndexPos;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -115,18 +116,21 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   var optimizedChanges = optimizeChanges(changes);
   var decorations = [];
   optimizedChanges.forEach(function (change) {
+    var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
     if (change.inserted.length > 0) {
-      decorations.push((0, _decorations.createInlineChangedDecoration)(change, colourScheme));
+      decorations.push((0, _decorations.createInlineChangedDecoration)(change, colourScheme, isActive));
       decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colourScheme)));
     }
     if (change.deleted.length > 0) {
+      var _isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
       var decoration = (0, _decorations.createDeletedContentDecoration)({
         change: change,
         doc: originalDoc,
         nodeViewSerializer: nodeViewSerializer,
         colourScheme: colourScheme,
         newDoc: tr.doc,
-        intl: intl
+        intl: intl,
+        isActive: _isActive
       });
       if (decoration) {
         decorations.push.apply(decorations, (0, _toConsumableArray2.default)(decoration));
@@ -134,7 +138,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
     }
   });
   (0, _markDecorations.getMarkChangeRanges)(steps).forEach(function (change) {
-    decorations.push((0, _decorations.createInlineChangedDecoration)(change, colourScheme));
+    var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    decorations.push((0, _decorations.createInlineChangedDecoration)(change, colourScheme, isActive));
   });
   (0, _attributeDecorations.getAttrChangeRanges)(tr.doc, attrSteps).forEach(function (change) {
     decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colourScheme)));
@@ -150,13 +155,15 @@ function (_ref2, _ref3) {
     pluginState = _ref4$.pluginState,
     state = _ref4$.state,
     colourScheme = _ref4$.colourScheme,
-    intl = _ref4$.intl;
+    intl = _ref4$.intl,
+    activeIndexPos = _ref4$.activeIndexPos;
   var _ref5 = (0, _slicedToArray2.default)(_ref3, 1),
     _ref5$ = _ref5[0],
     lastPluginState = _ref5$.pluginState,
     lastState = _ref5$.state,
     lastColourScheme = _ref5$.colourScheme,
-    lastIntl = _ref5$.intl;
+    lastIntl = _ref5$.intl,
+    lastActiveIndexPos = _ref5$.activeIndexPos;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
-  return (_ref6 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colourScheme === lastColourScheme && intl.locale === lastIntl.locale) !== null && _ref6 !== void 0 ? _ref6 : false;
+  return (_ref6 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colourScheme === lastColourScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos)) !== null && _ref6 !== void 0 ? _ref6 : false;
 });

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

@@ -18,6 +18,13 @@ var editingStyle = (0, _lazyNodeView.convertToInlineCss)({
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
+var editingStyleActive = (0, _lazyNodeView.convertToInlineCss)({
+  background: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-text-accent-purple, #803FA5)"
+});
 var traditionalInsertStyle = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
   textDecoration: 'underline',
@@ -25,6 +32,13 @@ var traditionalInsertStyle = (0, _lazyNodeView.convertToInlineCss)({
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
 });
+var traditionalInsertStyleActive = (0, _lazyNodeView.convertToInlineCss)({
+  background: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'solid',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-text-accent-green, #216E4E)"
+});
 
 /**
  * Inline decoration used for insertions as the content already exists in the document
@@ -33,8 +47,15 @@ var traditionalInsertStyle = (0, _lazyNodeView.convertToInlineCss)({
  * @returns Prosemirror inline decoration
  */
 var createInlineChangedDecoration = exports.createInlineChangedDecoration = function createInlineChangedDecoration(change, colourScheme) {
+  var isActive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var style;
+  if (colourScheme === 'traditional') {
+    style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+  } else {
+    style = isActive ? editingStyleActive : editingStyle;
+  }
   return _view.Decoration.inline(change.fromB, change.toB, {
-    style: colourScheme === 'traditional' ? traditionalInsertStyle : editingStyle,
+    style: style,
     'data-testid': 'show-diff-changed-decoration'
   }, {});
 };
@@ -112,12 +133,26 @@ var deletedContentStyle = (0, _lazyNodeView.convertToInlineCss)({
   position: 'relative',
   opacity: 0.6
 });
+var deletedContentStyleActive = (0, _lazyNodeView.convertToInlineCss)({
+  color: "var(--ds-text, #292A2E)",
+  textDecoration: 'line-through',
+  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
+  position: 'relative',
+  opacity: 1
+});
 var deletedContentStyleNew = (0, _lazyNodeView.convertToInlineCss)({
   color: "var(--ds-text-accent-gray, #505258)",
   textDecoration: 'line-through',
   position: 'relative',
   opacity: 0.8
 });
+var deletedContentStyleNewActive = (0, _lazyNodeView.convertToInlineCss)({
+  color: "var(--ds-text, #292A2E)",
+  textDecoration: 'line-through',
+  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
+  position: 'relative',
+  opacity: 1
+});
 var deletedContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
   position: 'absolute',
   top: '50%',
@@ -146,7 +181,14 @@ var getDeletedContentStyleUnbounded = exports.getDeletedContentStyleUnbounded =
   return colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
 };
 var getDeletedContentStyle = exports.getDeletedContentStyle = function getDeletedContentStyle(colourScheme) {
-  return colourScheme === 'traditional' ? deletedTraditionalContentStyle : (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colourScheme === 'traditional') {
+    return deletedTraditionalContentStyle;
+  }
+  if (isActive) {
+    return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNewActive : deletedContentStyleActive;
+  }
+  return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
 };
 var getNodeClass = function getNodeClass(name) {
   switch (name) {
@@ -176,7 +218,9 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     nodeViewSerializer = _ref.nodeViewSerializer,
     colourScheme = _ref.colourScheme,
     newDoc = _ref.newDoc,
-    intl = _ref.intl;
+    intl = _ref.intl,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
   var slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
     return;
@@ -212,7 +256,6 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
    * and if it's the first or last content, we go in however many the sliced Open
    * or sliced End depth is and match only the entire node.
    */
-
   slice.content.forEach(function (node) {
     // Create a wrapper for each node with strikethrough
     var createWrapperWithStrikethrough = function createWrapperWithStrikethrough() {
@@ -221,7 +264,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
         position: 'relative',
         width: 'fit-content'
       });
-      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colourScheme)));
+      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colourScheme, isActive)));
       var strikethrough = document.createElement('span');
       strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
       wrapper.append(strikethrough);
@@ -312,7 +355,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     } else {
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        var _wrapper2 = (0, _deletedBlocksHandler.createDeletedStyleWrapperWithoutOpacity)(colourScheme);
+        var _wrapper2 = (0, _deletedBlocksHandler.createDeletedStyleWrapperWithoutOpacity)(colourScheme, isActive);
         _wrapper2.append(fallbackNode);
         dom.append(_wrapper2);
       }

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

@@ -163,9 +163,9 @@ var createBlockNodeWrapper = exports.createBlockNodeWrapper = function createBlo
 /**
  * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
  */
-var createDeletedStyleWrapperWithoutOpacity = exports.createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colourScheme) {
+var createDeletedStyleWrapperWithoutOpacity = exports.createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colourScheme, isActive) {
   var wrapper = document.createElement('span');
-  wrapper.setAttribute('style', (0, _decorations.getDeletedContentStyle)(colourScheme));
+  wrapper.setAttribute('style', (0, _decorations.getDeletedContentStyle)(colourScheme, isActive));
   return wrapper;
 };
 

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

@@ -11,6 +11,7 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _calculateDiffDecorations = require("./calculateDiffDecorations");
 var _NodeViewSerializer = require("./NodeViewSerializer");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -25,6 +26,40 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl)
   };
   return new _safePlugin.SafePlugin({
     key: showDiffPluginKey,
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      var _pluginState$activeIn;
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
+        return;
+      }
+      // Check if any transaction contains scroll actions
+      var scrollTransaction = transactions.find(function (tr) {
+        var _tr$getMeta, _tr$getMeta2;
+        return ((_tr$getMeta = tr.getMeta(showDiffPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.action) === 'SCROLL_TO_NEXT' || ((_tr$getMeta2 = tr.getMeta(showDiffPluginKey)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.action) === 'SCROLL_TO_PREVIOUS';
+      });
+      if (!scrollTransaction) {
+        return;
+      }
+      var pluginState = showDiffPluginKey.getState(newState);
+      if (!pluginState || pluginState.decorations.find().length === 0) {
+        return;
+      }
+      var decorations = pluginState.decorations.find();
+      var decoration = decorations[(_pluginState$activeIn = pluginState.activeIndex) !== null && _pluginState$activeIn !== void 0 ? _pluginState$activeIn : 0];
+      if (!decoration) {
+        return;
+      }
+      var from = decoration.from,
+        to = decoration.to;
+      var $pos = newState.doc.resolve(from);
+      var isNodeSelection = $pos.nodeAfter && $pos.nodeAfter.nodeSize === to - from && !$pos.nodeAfter.isInline;
+      var tr = newState.tr;
+      if (isNodeSelection) {
+        tr.setSelection(_state2.NodeSelection.create(newState.doc, from));
+      } else {
+        tr.setSelection(_state2.TextSelection.create(newState.doc, from));
+      }
+      return tr.scrollIntoView();
+    },
     state: {
       init: function init(_, _state) {
         // We do initial setup after we setup the editor view
@@ -42,7 +77,8 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl)
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
             // Update the plugin state with the new metadata
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
-              isDisplayingChanges: true
+              isDisplayingChanges: true,
+              activeIndex: 0
             });
             // Calculate and store decorations in state
             var decorations = (0, _calculateDiffDecorations.calculateDiffDecorations)({
@@ -50,15 +86,47 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl)
               pluginState: newPluginState,
               nodeViewSerializer: nodeViewSerializer,
               colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme,
-              intl: getIntl()
+              intl: getIntl(),
+              activeIndexPos: (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined
             });
             // Update the decorations
             newPluginState.decorations = decorations;
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
               decorations: _view.DecorationSet.empty,
-              isDisplayingChanges: false
+              isDisplayingChanges: false,
+              activeIndex: undefined
             });
+          } else if (((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') && (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
+            // Update the active index in plugin state and recalculate decorations
+            var _decorations = currentPluginState.decorations.find();
+            if (_decorations.length > 0) {
+              var _currentPluginState$a;
+              var nextIndex = (_currentPluginState$a = currentPluginState.activeIndex) !== null && _currentPluginState$a !== void 0 ? _currentPluginState$a : 0;
+              if (meta.action === 'SCROLL_TO_NEXT') {
+                nextIndex = (nextIndex + 1) % _decorations.length;
+              } else {
+                nextIndex = (nextIndex - 1 + _decorations.length) % _decorations.length;
+              }
+              var activeDecoration = _decorations[nextIndex];
+              newPluginState = _objectSpread(_objectSpread({}, currentPluginState), {}, {
+                activeIndex: nextIndex,
+                activeIndexPos: activeDecoration ? {
+                  from: activeDecoration.from,
+                  to: activeDecoration.to
+                } : undefined
+              });
+              // Recalculate decorations with the new active index
+              var updatedDecorations = (0, _calculateDiffDecorations.calculateDiffDecorations)({
+                state: newState,
+                pluginState: newPluginState,
+                nodeViewSerializer: nodeViewSerializer,
+                colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme,
+                intl: getIntl(),
+                activeIndexPos: newPluginState.activeIndexPos
+              });
+              newPluginState.decorations = updatedDecorations;
+            }
           } else {
             newPluginState = _objectSpread(_objectSpread({}, currentPluginState), meta);
           }

package/dist/cjs/showDiffPlugin.js

@@ -29,13 +29,25 @@ var showDiffPlugin = exports.showDiffPlugin = function showDiffPlugin(_ref) {
           steps: [],
           action: 'HIDE_DIFF'
         });
+      },
+      scrollToNext: function scrollToNext(_ref4) {
+        var tr = _ref4.tr;
+        return tr.setMeta(_main.showDiffPluginKey, {
+          action: 'SCROLL_TO_NEXT'
+        });
+      },
+      scrollToPrevious: function scrollToPrevious(_ref5) {
+        var tr = _ref5.tr;
+        return tr.setMeta(_main.showDiffPluginKey, {
+          action: 'SCROLL_TO_PREVIOUS'
+        });
       }
     },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'showDiffPlugin',
-        plugin: function plugin(_ref4) {
-          var getIntl = _ref4.getIntl;
+        plugin: function plugin(_ref6) {
+          var getIntl = _ref6.getIntl;
           return (0, _main.createPlugin)(config, getIntl);
         }
       }];
@@ -44,13 +56,16 @@ var showDiffPlugin = exports.showDiffPlugin = function showDiffPlugin(_ref) {
       var _pluginState$decorati;
       if (!editorState) {
         return {
-          isDisplayingChanges: false
+          isDisplayingChanges: false,
+          activeIndex: undefined
         };
       }
       var pluginState = _main.showDiffPluginKey.getState(editorState);
       var decorationCount = (pluginState === null || pluginState === void 0 || (_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
       return {
-        isDisplayingChanges: decorationCount.length > 0
+        isDisplayingChanges: decorationCount.length > 0,
+        activeIndex: pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex,
+        numberOfChanges: decorationCount.length
       };
     }
   };

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

@@ -64,7 +64,8 @@ const calculateDiffDecorationsInner = ({
   pluginState,
   nodeViewSerializer,
   colourScheme,
-  intl
+  intl,
+  activeIndexPos
 }) => {
   const {
     originalDoc,
@@ -101,18 +102,21 @@ const calculateDiffDecorationsInner = ({
   const optimizedChanges = optimizeChanges(changes);
   const decorations = [];
   optimizedChanges.forEach(change => {
+    const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
     if (change.inserted.length > 0) {
-      decorations.push(createInlineChangedDecoration(change, colourScheme));
+      decorations.push(createInlineChangedDecoration(change, colourScheme, isActive));
       decorations.push(...calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colourScheme));
     }
     if (change.deleted.length > 0) {
+      const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
       const decoration = createDeletedContentDecoration({
         change,
         doc: originalDoc,
         nodeViewSerializer,
         colourScheme,
         newDoc: tr.doc,
-        intl
+        intl,
+        isActive
       });
       if (decoration) {
         decorations.push(...decoration);
@@ -120,7 +124,8 @@ const calculateDiffDecorationsInner = ({
     }
   });
   getMarkChangeRanges(steps).forEach(change => {
-    decorations.push(createInlineChangedDecoration(change, colourScheme));
+    const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    decorations.push(createInlineChangedDecoration(change, colourScheme, isActive));
   });
   getAttrChangeRanges(tr.doc, attrSteps).forEach(change => {
     decorations.push(...calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colourScheme));
@@ -133,14 +138,16 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
   pluginState,
   state,
   colourScheme,
-  intl
+  intl,
+  activeIndexPos
 }], [{
   pluginState: lastPluginState,
   state: lastState,
   colourScheme: lastColourScheme,
-  intl: lastIntl
+  intl: lastIntl,
+  activeIndexPos: lastActiveIndexPos
 }]) => {
   var _ref;
   const originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
-  return (_ref = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colourScheme === lastColourScheme && intl.locale === lastIntl.locale) !== null && _ref !== void 0 ? _ref : false;
+  return (_ref = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colourScheme === lastColourScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref !== void 0 ? _ref : false;
 });

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

@@ -12,6 +12,13 @@ const editingStyle = convertToInlineCss({
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
+const editingStyleActive = convertToInlineCss({
+  background: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-text-accent-purple, #803FA5)"
+});
 const traditionalInsertStyle = convertToInlineCss({
   background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
   textDecoration: 'underline',
@@ -19,6 +26,13 @@ const traditionalInsertStyle = convertToInlineCss({
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
 });
+const traditionalInsertStyleActive = convertToInlineCss({
+  background: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'solid',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-text-accent-green, #216E4E)"
+});
 
 /**
  * Inline decoration used for insertions as the content already exists in the document
@@ -26,10 +40,18 @@ const traditionalInsertStyle = convertToInlineCss({
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export const createInlineChangedDecoration = (change, colourScheme) => Decoration.inline(change.fromB, change.toB, {
-  style: colourScheme === 'traditional' ? traditionalInsertStyle : editingStyle,
-  'data-testid': 'show-diff-changed-decoration'
-}, {});
+export const createInlineChangedDecoration = (change, colourScheme, isActive = false) => {
+  let style;
+  if (colourScheme === 'traditional') {
+    style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+  } else {
+    style = isActive ? editingStyleActive : editingStyle;
+  }
+  return Decoration.inline(change.fromB, change.toB, {
+    style,
+    'data-testid': 'show-diff-changed-decoration'
+  }, {});
+};
 const getEditorStyleNode = (nodeName, colourScheme) => {
   switch (nodeName) {
     case 'blockquote':
@@ -104,12 +126,26 @@ const deletedContentStyle = convertToInlineCss({
   position: 'relative',
   opacity: 0.6
 });
+const deletedContentStyleActive = convertToInlineCss({
+  color: "var(--ds-text, #292A2E)",
+  textDecoration: 'line-through',
+  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
+  position: 'relative',
+  opacity: 1
+});
 const deletedContentStyleNew = convertToInlineCss({
   color: "var(--ds-text-accent-gray, #505258)",
   textDecoration: 'line-through',
   position: 'relative',
   opacity: 0.8
 });
+const deletedContentStyleNewActive = convertToInlineCss({
+  color: "var(--ds-text, #292A2E)",
+  textDecoration: 'line-through',
+  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
+  position: 'relative',
+  opacity: 1
+});
 const deletedContentStyleUnbounded = convertToInlineCss({
   position: 'absolute',
   top: '50%',
@@ -135,7 +171,15 @@ const deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   zIndex: 1
 });
 export const getDeletedContentStyleUnbounded = colourScheme => colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
-export const getDeletedContentStyle = colourScheme => colourScheme === 'traditional' ? deletedTraditionalContentStyle : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
+export const getDeletedContentStyle = (colourScheme, isActive = false) => {
+  if (colourScheme === 'traditional') {
+    return deletedTraditionalContentStyle;
+  }
+  if (isActive) {
+    return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNewActive : deletedContentStyleActive;
+  }
+  return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
+};
 const getNodeClass = name => {
   switch (name) {
     case 'extension':
@@ -162,7 +206,8 @@ export const createDeletedContentDecoration = ({
   nodeViewSerializer,
   colourScheme,
   newDoc,
-  intl
+  intl,
+  isActive = false
 }) => {
   const slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
@@ -192,7 +237,6 @@ export const createDeletedContentDecoration = ({
    * and if it's the first or last content, we go in however many the sliced Open
    * or sliced End depth is and match only the entire node.
    */
-
   slice.content.forEach(node => {
     // Create a wrapper for each node with strikethrough
     const createWrapperWithStrikethrough = () => {
@@ -201,7 +245,7 @@ export const createDeletedContentDecoration = ({
         position: 'relative',
         width: 'fit-content'
       });
-      wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colourScheme)}`);
+      wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colourScheme, isActive)}`);
       const strikethrough = document.createElement('span');
       strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
       wrapper.append(strikethrough);
@@ -288,7 +332,7 @@ export const createDeletedContentDecoration = ({
     } else {
       const fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        const wrapper = createDeletedStyleWrapperWithoutOpacity(colourScheme);
+        const wrapper = createDeletedStyleWrapperWithoutOpacity(colourScheme, isActive);
         wrapper.append(fallbackNode);
         dom.append(wrapper);
       }

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

@@ -154,9 +154,9 @@ export const createBlockNodeWrapper = () => {
 /**
  * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
  */
-export const createDeletedStyleWrapperWithoutOpacity = colourScheme => {
+export const createDeletedStyleWrapperWithoutOpacity = (colourScheme, isActive) => {
   const wrapper = document.createElement('span');
-  wrapper.setAttribute('style', getDeletedContentStyle(colourScheme));
+  wrapper.setAttribute('style', getDeletedContentStyle(colourScheme, isActive));
   return wrapper;
 };