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

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);
@@ -105,17 +111,19 @@ export const createBlockChangedDecoration = ({
         'data-testid': 'show-diff-changed-decoration-node',
         class: className
       }, {
-        key: 'diff-block'
+        key: 'diff-block',
+        nodeName: change.name
       });
+    } 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',
+    nodeName: change.name
+  });
 };

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

@@ -11,7 +11,23 @@ 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 : [];
+  const seenBlockKeys = new Set();
+  return ((_set$find = 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';
+  })) !== null && _set$find !== void 0 ? _set$find : []).filter(dec => {
+    var _dec$spec;
+    if (((_dec$spec = dec.spec) === null || _dec$spec === void 0 ? void 0 : _dec$spec.key) === 'diff-block') {
+      var _dec$spec2, _dec$spec$nodeName, _dec$spec3;
+      // Skip listItem blocks as they are not scrollable
+      if (((_dec$spec2 = dec.spec) === null || _dec$spec2 === void 0 ? void 0 : _dec$spec2.nodeName) === 'listItem') return false;
+      const key = `${dec.from}-${dec.to}-${(_dec$spec$nodeName = (_dec$spec3 = dec.spec) === null || _dec$spec3 === void 0 ? void 0 : _dec$spec3.nodeName) !== null && _dec$spec$nodeName !== void 0 ? _dec$spec$nodeName : ''}`;
+      // Skip blocks that have already been seen
+      if (seenBlockKeys.has(key)) return false;
+      seenBlockKeys.add(key);
+    }
+    return true;
+  }).sort((a, b) => a.from === b.from ? a.to - b.to : a.from - b.from);
 };
 export const createPlugin = (config, getIntl, api) => {
   const nodeViewSerializer = new NodeViewSerializer({});

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

@@ -0,0 +1,23 @@
+/**
+ * Returns true if both nodes have the same tree structure (type and child count at every level).
+ */
+function isBlockStructureEqual(node1, node2) {
+  if (node1.type !== node2.type || node1.childCount !== node2.childCount) {
+    return false;
+  }
+  for (var i = 0; i < node1.childCount; i++) {
+    if (!isBlockStructureEqual(node1.child(i), node2.child(i))) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Looser equality for "safe diff" cases: same full text content and same block structure
+ * (e.g. text moved across text-node boundaries). Used when strict areNodesEqualIgnoreAttrs fails.
+ * This is safe because we ensure decorations get applied to valid positions.
+ */
+export function areDocsEqualByBlockStructureAndText(doc1, doc2) {
+  return doc1.textContent === doc2.textContent && doc1.nodeSize === doc2.nodeSize && isBlockStructureEqual(doc1, doc2);
+}

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

@@ -12,7 +12,9 @@ import memoizeOne from 'memoize-one';
 import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
 import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { areDocsEqualByBlockStructureAndText } from './areDocsEqualByBlockStructureAndText';
 import { createBlockChangedDecoration } from './decorations/createBlockChangedDecoration';
 import { createInlineChangedDecoration } from './decorations/createInlineChangedDecoration';
 import { createNodeChangedDecorationWidget } from './decorations/createNodeChangedDecorationWidget';
@@ -25,19 +27,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);
@@ -122,6 +128,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
     _iterator.f();
   }
   if (!areNodesEqualIgnoreAttrs(steppedDoc, tr.doc)) {
+    var recoveredViaContentEquality = fg('platform_editor_show_diff_equality_fallback') ? areDocsEqualByBlockStructureAndText(steppedDoc, tr.doc) : undefined;
     if (expValEquals('platform_editor_are_nodes_equal_ignore_mark_order', 'isEnabled', true)) {
       var _api$analytics;
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
@@ -130,18 +137,25 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
         actionSubject: 'showDiff',
         attributes: {
           docSizeEqual: steppedDoc.nodeSize === tr.doc.nodeSize,
-          colorScheme: colorScheme
+          colorScheme: colorScheme,
+          recoveredViaContentEquality: recoveredViaContentEquality
         }
       });
     }
-    return DecorationSet.empty;
+    if (fg('platform_editor_show_diff_equality_fallback')) {
+      if (!recoveredViaContentEquality) {
+        return DecorationSet.empty;
+      }
+    } else {
+      return DecorationSet.empty;
+    }
   }
   var changeset = ChangeSet.create(originalDoc).addSteps(steppedDoc, stepMaps, tr.doc);
   var changes = simplifyChanges(changeset.changes, tr.doc);
   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 +166,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 +197,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 +211,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,