@atlaskit/editor-plugin-show-diff 5.0.3 → 5.0.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 5.0.5
+
+### Patch Changes
+
+- [`8865b5e8a708a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8865b5e8a708a) -
+  EDITOR-5632: Refactor diff plugin to make functions more generic.
+- Updated dependencies
+
+## 5.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.0.3
 
 ### Patch Changes

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

@@ -22,16 +22,23 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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; }
 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; } // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(doc, from, to, colorScheme) {
+var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(_ref) {
+  var doc = _ref.doc,
+    from = _ref.from,
+    to = _ref.to,
+    colorScheme = _ref.colorScheme;
   var decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, function (node, pos) {
     if (node.isBlock) {
       var decoration = (0, _decorations.createBlockChangedDecoration)({
-        from: pos,
-        to: pos + node.nodeSize,
-        name: node.type.name
-      }, colorScheme);
+        change: {
+          from: pos,
+          to: pos + node.nodeSize,
+          name: node.type.name
+        },
+        colorScheme: colorScheme
+      });
       if (decoration) {
         decorations.push(decoration);
       }
@@ -72,13 +79,13 @@ function optimizeChanges(changes) {
   optimized.push(current);
   return optimized;
 }
-var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref) {
-  var state = _ref.state,
-    pluginState = _ref.pluginState,
-    nodeViewSerializer = _ref.nodeViewSerializer,
-    colorScheme = _ref.colorScheme,
-    intl = _ref.intl,
-    activeIndexPos = _ref.activeIndexPos;
+var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2) {
+  var state = _ref2.state,
+    pluginState = _ref2.pluginState,
+    nodeViewSerializer = _ref2.nodeViewSerializer,
+    colorScheme = _ref2.colorScheme,
+    intl = _ref2.intl,
+    activeIndexPos = _ref2.activeIndexPos;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -121,8 +128,17 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   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, colorScheme, isActive));
-      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme)));
+      decorations.push((0, _decorations.createInlineChangedDecoration)({
+        change: change,
+        colorScheme: colorScheme,
+        isActive: isActive
+      }));
+      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration({
+        doc: tr.doc,
+        from: change.fromB,
+        to: change.toB,
+        colorScheme: colorScheme
+      })));
     }
     if (change.deleted.length > 0) {
       var _isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
@@ -142,31 +158,40 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   });
   (0, _markDecorations.getMarkChangeRanges)(steps).forEach(function (change) {
     var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
-    decorations.push((0, _decorations.createInlineChangedDecoration)(change, colorScheme, isActive));
+    decorations.push((0, _decorations.createInlineChangedDecoration)({
+      change: change,
+      colorScheme: colorScheme,
+      isActive: isActive
+    }));
   });
   (0, _attributeDecorations.getAttrChangeRanges)(tr.doc, attrSteps).forEach(function (change) {
-    decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme)));
+    decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration({
+      doc: tr.doc,
+      from: change.fromB,
+      to: change.toB,
+      colorScheme: colorScheme
+    })));
   });
   return _view.DecorationSet.empty.add(tr.doc, decorations);
 };
 var calculateDiffDecorations = exports.calculateDiffDecorations = (0, _memoizeOne.default)(calculateDiffDecorationsInner,
 // Cache results unless relevant inputs change
-function (_ref2, _ref3) {
-  var _ref6;
-  var _ref4 = (0, _slicedToArray2.default)(_ref2, 1),
-    _ref4$ = _ref4[0],
-    pluginState = _ref4$.pluginState,
-    state = _ref4$.state,
-    colorScheme = _ref4$.colorScheme,
-    intl = _ref4$.intl,
-    activeIndexPos = _ref4$.activeIndexPos;
+function (_ref3, _ref4) {
+  var _ref7;
   var _ref5 = (0, _slicedToArray2.default)(_ref3, 1),
     _ref5$ = _ref5[0],
-    lastPluginState = _ref5$.pluginState,
-    lastState = _ref5$.state,
-    lastColorScheme = _ref5$.colorScheme,
-    lastIntl = _ref5$.intl,
-    lastActiveIndexPos = _ref5$.activeIndexPos;
+    pluginState = _ref5$.pluginState,
+    state = _ref5$.state,
+    colorScheme = _ref5$.colorScheme,
+    intl = _ref5$.intl,
+    activeIndexPos = _ref5$.activeIndexPos;
+  var _ref6 = (0, _slicedToArray2.default)(_ref4, 1),
+    _ref6$ = _ref6[0],
+    lastPluginState = _ref6$.pluginState,
+    lastState = _ref6$.state,
+    lastColorScheme = _ref6$.colorScheme,
+    lastIntl = _ref6$.intl,
+    lastActiveIndexPos = _ref6$.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) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos)) !== null && _ref6 !== void 0 ? _ref6 : false;
+  return (_ref7 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos)) !== null && _ref7 !== void 0 ? _ref7 : false;
 });

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getStandardNodeStyle = exports.editingStyleActive = exports.editingStyle = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNewActive = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = void 0;
+exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleCardBlockNode = exports.editingStyleActive = exports.editingStyle = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNewActive = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedBlockOutlineRounded = exports.deletedBlockOutline = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
@@ -54,43 +54,45 @@ var deletedContentStyleUnbounded = exports.deletedContentStyleUnbounded = (0, _l
   pointerEvents: 'none',
   zIndex: 1
 });
-var editingStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
+var deletedStyleQuoteNode = exports.deletedStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
+  borderLeft: "2px solid ".concat("var(--ds-border-accent-gray, #7D818A)")
+});
+var deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNodeWithLozenge = (0, _lazyNodeView.convertToInlineCss)({
+  marginTop: "var(--ds-space-150, 12px)",
+  paddingTop: "var(--ds-space-025, 2px)",
+  paddingBottom: "var(--ds-space-025, 2px)",
+  paddingLeft: "var(--ds-space-025, 2px)",
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+var deletedBlockOutline = exports.deletedBlockOutline = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+var deletedBlockOutlineRounded = exports.deletedBlockOutlineRounded = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
+  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+});
+var deletedRowStyle = exports.deletedRowStyle = (0, _lazyNodeView.convertToInlineCss)({
+  color: "var(--ds-text-accent-gray, #505258)",
+  textDecoration: 'line-through',
+  opacity: 0.6,
+  display: 'table-row'
+});
+var editingStyleQuoteNode = exports.editingStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
   borderLeft: "2px solid ".concat("var(--ds-border-accent-purple, #AF59E1)")
 });
-var editingStyleRuleNode = (0, _lazyNodeView.convertToInlineCss)({
+var editingStyleRuleNode = exports.editingStyleRuleNode = (0, _lazyNodeView.convertToInlineCss)({
   backgroundColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
-var editingStyleNode = (0, _lazyNodeView.convertToInlineCss)({
+var editingStyleNode = exports.editingStyleNode = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
-var editingStyleCardBlockNode = (0, _lazyNodeView.convertToInlineCss)({
+var editingStyleCardBlockNode = exports.editingStyleCardBlockNode = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
-var standardDecorationMarkerVariableName = (0, _lazyNodeView.convertToInlineCss)({
+var standardDecorationMarkerVariable = exports.standardDecorationMarkerVariable = (0, _lazyNodeView.convertToInlineCss)({
   '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)"
-});
-var getStandardNodeStyle = exports.getStandardNodeStyle = function getStandardNodeStyle(nodeName) {
-  if (['mediaSingle', 'mediaGroup', 'table',
-  // Handle table separately to avoid border issues
-  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
-  // Paragraph and heading nodes do not need special styling
-  'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
-    // Layout nodes do not need special styling
-    return undefined;
-  }
-  if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
-    return standardDecorationMarkerVariableName;
-  }
-  if (nodeName === 'blockquote') {
-    return editingStyleQuoteNode;
-  }
-  if (nodeName === 'rule') {
-    return editingStyleRuleNode;
-  }
-  if (nodeName === 'blockCard') {
-    return editingStyleCardBlockNode;
-  }
-  return editingStyleNode;
-};
+});

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.getTraditionalNodeStyle = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyle = void 0;
+exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNode = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDecorationMarkerVariable = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyle = 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)",
@@ -34,43 +34,42 @@ var deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentS
   pointerEvents: 'none',
   zIndex: 1
 });
-var traditionalStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
+var deletedTraditionalStyleQuoteNode = exports.deletedTraditionalStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
+  marginTop: "var(--ds-space-150, 12px)",
+  paddingTop: "var(--ds-space-025, 2px)",
+  paddingBottom: "var(--ds-space-025, 2px)",
+  paddingLeft: "var(--ds-space-025, 2px)",
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+var deletedTraditionalBlockOutline = exports.deletedTraditionalBlockOutline = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+var deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineRounded = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+});
+var deletedTraditionalRowStyle = exports.deletedTraditionalRowStyle = (0, _lazyNodeView.convertToInlineCss)({
+  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
+  textDecoration: 'line-through',
+  opacity: 0.6,
+  display: 'table-row'
+});
+var traditionalStyleQuoteNode = exports.traditionalStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
   borderLeft: "2px solid ".concat("var(--ds-border-accent-green, #22A06B)")
 });
-var traditionalStyleRuleNode = (0, _lazyNodeView.convertToInlineCss)({
+var traditionalStyleRuleNode = exports.traditionalStyleRuleNode = (0, _lazyNodeView.convertToInlineCss)({
   backgroundColor: "var(--ds-border-accent-green, #22A06B)"
 });
-var traditionalStyleNode = (0, _lazyNodeView.convertToInlineCss)({
+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 traditionalStyleCardBlockNode = (0, _lazyNodeView.convertToInlineCss)({
+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 traditionalDecorationMarkerVariable = (0, _lazyNodeView.convertToInlineCss)({
+var traditionalDecorationMarkerVariable = exports.traditionalDecorationMarkerVariable = (0, _lazyNodeView.convertToInlineCss)({
   '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
-});
-var getTraditionalNodeStyle = exports.getTraditionalNodeStyle = function getTraditionalNodeStyle(nodeName) {
-  if (['mediaSingle', 'mediaGroup', 'table',
-  // Handle table separately to avoid border issues
-  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
-  // Paragraph and heading nodes do not need special styling
-  'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
-    // Layout nodes do not need special styling
-    return undefined;
-  }
-  if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
-    return traditionalDecorationMarkerVariable;
-  }
-  if (nodeName === 'blockquote') {
-    return traditionalStyleQuoteNode;
-  }
-  if (nodeName === 'rule') {
-    return traditionalStyleRuleNode;
-  }
-  if (nodeName === 'blockCard') {
-    return traditionalStyleCardBlockNode;
-  }
-  return traditionalStyleNode;
-};
+});

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

@@ -19,8 +19,11 @@ var _findSafeInsertPos = require("./findSafeInsertPos");
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-var createInlineChangedDecoration = exports.createInlineChangedDecoration = function createInlineChangedDecoration(change, colorScheme) {
-  var isActive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+var createInlineChangedDecoration = exports.createInlineChangedDecoration = function createInlineChangedDecoration(_ref) {
+  var change = _ref.change,
+    colorScheme = _ref.colorScheme,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
   var style;
   if (colorScheme === 'traditional') {
     style = isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
@@ -55,8 +58,38 @@ var getNodeClass = function getNodeClass(name) {
       return undefined;
   }
 };
-var getBlockNodeStyle = function getBlockNodeStyle(name, colorScheme) {
-  return colorScheme === 'traditional' ? (0, _traditional.getTraditionalNodeStyle)(name) : (0, _standard.getStandardNodeStyle)(name);
+var getBlockNodeStyle = function getBlockNodeStyle(nodeName, colorScheme) {
+  var isTraditional = colorScheme === 'traditional';
+  if (['mediaSingle', 'mediaGroup', 'table',
+  // Handle table separately to avoid border issues
+  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
+  // Paragraph and heading nodes do not need special styling
+  'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
+    // Layout nodes do not need special styling
+    return undefined;
+  }
+  if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
+    return isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
+  }
+  if (nodeName === 'blockquote') {
+    return isTraditional ? _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
+  }
+  if (nodeName === 'rule') {
+    return isTraditional ? _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
+  }
+  if (nodeName === 'blockCard') {
+    return isTraditional ? _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
+  }
+  return isTraditional ? _traditional.traditionalStyleNode : _standard.editingStyleNode;
+};
+
+/**
+ * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
+ */
+var createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive) {
+  var wrapper = document.createElement('span');
+  wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
+  return wrapper;
 };
 
 /**
@@ -65,7 +98,9 @@ var getBlockNodeStyle = function getBlockNodeStyle(name, colorScheme) {
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-var createBlockChangedDecoration = exports.createBlockChangedDecoration = function createBlockChangedDecoration(change, colorScheme) {
+var createBlockChangedDecoration = exports.createBlockChangedDecoration = function createBlockChangedDecoration(_ref2) {
+  var change = _ref2.change,
+    colorScheme = _ref2.colorScheme;
   if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
     var style = getBlockNodeStyle(change.name, colorScheme);
     var className = getNodeClass(change.name);
@@ -102,15 +137,15 @@ var createContentWrapper = function createContentWrapper(colorScheme) {
   wrapper.append(strikethrough);
   return wrapper;
 };
-var createDeletedContentDecoration = exports.createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
-  var change = _ref.change,
-    doc = _ref.doc,
-    nodeViewSerializer = _ref.nodeViewSerializer,
-    colorScheme = _ref.colorScheme,
-    newDoc = _ref.newDoc,
-    intl = _ref.intl,
-    _ref$isActive = _ref.isActive,
-    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
+var createDeletedContentDecoration = exports.createDeletedContentDecoration = function createDeletedContentDecoration(_ref3) {
+  var change = _ref3.change,
+    doc = _ref3.doc,
+    nodeViewSerializer = _ref3.nodeViewSerializer,
+    colorScheme = _ref3.colorScheme,
+    newDoc = _ref3.newDoc,
+    intl = _ref3.intl,
+    _ref3$isActive = _ref3.isActive,
+    isActive = _ref3$isActive === void 0 ? false : _ref3$isActive;
   var slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
     return;
@@ -132,7 +167,13 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     if (!(0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga')) {
       return;
     }
-    var _handleDeletedRows = (0, _deletedRowsHandler.handleDeletedRows)([change], doc, newDoc, nodeViewSerializer, colorScheme),
+    var _handleDeletedRows = (0, _deletedRowsHandler.handleDeletedRows)({
+        changes: [change],
+        originalDoc: doc,
+        newDoc: newDoc,
+        nodeViewSerializer: nodeViewSerializer,
+        colorScheme: colorScheme
+      }),
       decorations = _handleDeletedRows.decorations;
     return decorations;
   }
@@ -220,7 +261,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     } else {
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        var _wrapper2 = (0, _deletedBlocksHandler.createDeletedStyleWrapperWithoutOpacity)(colorScheme, isActive);
+        var _wrapper2 = createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive);
         _wrapper2.append(fallbackNode);
         dom.append(_wrapper2);
       }

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

@@ -4,49 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldShowRemovedLozenge = exports.shouldApplyDeletedStylesDirectly = exports.shouldAddShowDiffDeletedNodeClass = exports.handleMediaSingleWithLozenge = exports.handleEmbedCardWithLozenge = exports.handleBlockNodeView = exports.getDeletedStyleNode = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutline = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedBlockOutlineRounded = exports.deletedBlockOutline = exports.createRemovedLozenge = exports.createDeletedStyleWrapperWithoutOpacity = exports.createBlockNodeWrapper = exports.createBlockNodeContentWrapper = exports.applyDeletedStylesToElement = exports.appendBlockNodeWithWrapper = void 0;
+exports.handleMediaSingleWithLozenge = exports.handleBlockNodeView = exports.getDeletedStyleNode = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _messages = require("@atlaskit/editor-common/messages");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _standard = require("./colorSchemes/standard");
+var _traditional = require("./colorSchemes/traditional");
 var _decorations = require("./decorations");
 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; }
 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 deletedStyleQuoteNode = exports.deletedStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
-  borderLeft: "2px solid ".concat("var(--ds-border-accent-gray, #7D818A)")
-});
-var deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNodeWithLozenge = (0, _lazyNodeView.convertToInlineCss)({
-  marginTop: "var(--ds-space-150, 12px)",
-  paddingTop: "var(--ds-space-025, 2px)",
-  paddingBottom: "var(--ds-space-025, 2px)",
-  paddingLeft: "var(--ds-space-025, 2px)",
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-var deletedTraditionalStyleQuoteNode = exports.deletedTraditionalStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
-  marginTop: "var(--ds-space-150, 12px)",
-  paddingTop: "var(--ds-space-025, 2px)",
-  paddingBottom: "var(--ds-space-025, 2px)",
-  paddingLeft: "var(--ds-space-025, 2px)",
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-var deletedBlockOutline = exports.deletedBlockOutline = (0, _lazyNodeView.convertToInlineCss)({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-var deletedTraditionalBlockOutline = exports.deletedTraditionalBlockOutline = (0, _lazyNodeView.convertToInlineCss)({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-var deletedBlockOutlineRounded = exports.deletedBlockOutlineRounded = (0, _lazyNodeView.convertToInlineCss)({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
-  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
-});
-var deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineRounded = (0, _lazyNodeView.convertToInlineCss)({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
-  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
-});
 var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -67,18 +34,18 @@ var getDeletedStyleNode = exports.getDeletedStyleNode = function getDeletedStyle
   var isTraditional = colorScheme === 'traditional';
   switch (nodeName) {
     case 'blockquote':
-      return (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge : deletedStyleQuoteNode;
+      return (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? _traditional.deletedTraditionalStyleQuoteNode : _standard.deletedStyleQuoteNodeWithLozenge : _standard.deletedStyleQuoteNode;
     case 'expand':
     case 'decisionList':
-      return isTraditional && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutline : deletedBlockOutline;
+      return isTraditional && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? _traditional.deletedTraditionalBlockOutline : _standard.deletedBlockOutline;
     case 'panel':
     case 'codeBlock':
-      return isTraditional && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? deletedTraditionalBlockOutlineRounded : deletedBlockOutlineRounded;
+      return isTraditional && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? _traditional.deletedTraditionalBlockOutlineRounded : _standard.deletedBlockOutlineRounded;
     default:
       return undefined;
   }
 };
-var shouldShowRemovedLozenge = exports.shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
+var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
   switch (nodeName) {
     case 'expand':
     case 'codeBlock':
@@ -93,7 +60,7 @@ var shouldShowRemovedLozenge = exports.shouldShowRemovedLozenge = function shoul
       return false;
   }
 };
-var shouldAddShowDiffDeletedNodeClass = exports.shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeClass(nodeName) {
+var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeClass(nodeName) {
   switch (nodeName) {
     case 'mediaSingle':
     case 'embedCard':
@@ -109,14 +76,14 @@ var shouldAddShowDiffDeletedNodeClass = exports.shouldAddShowDiffDeletedNodeClas
  * Checks if a node should apply deleted styles directly without wrapper
  * to preserve natural block-level margins
  */
-var shouldApplyDeletedStylesDirectly = exports.shouldApplyDeletedStylesDirectly = function shouldApplyDeletedStylesDirectly(nodeName) {
+var shouldApplyDeletedStylesDirectly = function shouldApplyDeletedStylesDirectly(nodeName) {
   return nodeName === 'heading' || nodeName === 'blockquote' && !(0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers');
 };
 
 /**
  * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
  */
-var createRemovedLozenge = exports.createRemovedLozenge = function createRemovedLozenge(intl, nodeName) {
+var createRemovedLozenge = function createRemovedLozenge(intl, nodeName) {
   var container = document.createElement('span');
   var borderTopRightRadius;
   if (['expand', 'decisionList'].includes(nodeName || '')) {
@@ -149,7 +116,7 @@ var createRemovedLozenge = exports.createRemovedLozenge = function createRemoved
 /**
  * Wraps a block node in a container with relative positioning to support absolute positioned lozenge
  */
-var createBlockNodeWrapper = exports.createBlockNodeWrapper = function createBlockNodeWrapper() {
+var createBlockNodeWrapper = function createBlockNodeWrapper() {
   var wrapper = document.createElement('div');
   var baseStyle = (0, _lazyNodeView.convertToInlineCss)({
     position: 'relative',
@@ -160,19 +127,10 @@ var createBlockNodeWrapper = exports.createBlockNodeWrapper = function createBlo
   return wrapper;
 };
 
-/**
- * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
- */
-var createDeletedStyleWrapperWithoutOpacity = exports.createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive) {
-  var wrapper = document.createElement('span');
-  wrapper.setAttribute('style', (0, _decorations.getDeletedContentStyle)(colorScheme, isActive));
-  return wrapper;
-};
-
 /**
  * Applies deleted styles directly to an HTML element by merging with existing styles
  */
-var applyDeletedStylesToElement = exports.applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colorScheme) {
+var applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colorScheme) {
   var currentStyle = element.getAttribute('style') || '';
   var deletedContentStyle = (0, _decorations.getDeletedContentStyle)(colorScheme);
   var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colorScheme) || '';
@@ -182,7 +140,7 @@ var applyDeletedStylesToElement = exports.applyDeletedStylesToElement = function
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-var createBlockNodeContentWrapper = exports.createBlockNodeContentWrapper = function createBlockNodeContentWrapper(nodeView, targetNode, colorScheme) {
+var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(nodeView, targetNode, colorScheme) {
   var contentWrapper = document.createElement('div');
   var nodeStyle = getDeletedStyleNode(targetNode.type.name, colorScheme);
   contentWrapper.setAttribute('style', "".concat((0, _decorations.getDeletedContentStyle)(colorScheme)).concat(nodeStyle || ''));
@@ -196,7 +154,7 @@ var createBlockNodeContentWrapper = exports.createBlockNodeContentWrapper = func
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-var handleEmbedCardWithLozenge = exports.handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) {
+var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) {
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -257,7 +215,7 @@ var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = functi
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-var appendBlockNodeWithWrapper = exports.appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeView, targetNode, colorScheme, intl) {
+var appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeView, targetNode, colorScheme, intl) {
   var blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name)) {
     var lozenge = createRemovedLozenge(intl);

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

@@ -6,27 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.handleDeletedRows = exports.createDeletedRowsDecorations = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _document = require("@atlaskit/editor-common/utils/document");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _standard = require("./colorSchemes/standard");
+var _traditional = require("./colorSchemes/traditional");
 var _findSafeInsertPos = require("./findSafeInsertPos");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-var deletedRowStyle = (0, _lazyNodeView.convertToInlineCss)({
-  color: "var(--ds-text-accent-gray, #505258)",
-  textDecoration: 'line-through',
-  opacity: 0.6,
-  display: 'table-row'
-});
-var deletedTraditionalRowStyle = (0, _lazyNodeView.convertToInlineCss)({
-  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
-  textDecoration: 'line-through',
-  opacity: 0.6,
-  display: 'table-row'
-});
 /**
  * Extracts information about deleted table rows from a change
  */
@@ -128,7 +117,7 @@ var isEmptyRow = function isEmptyRow(rowNode) {
  */
 var createDeletedRowDOM = function createDeletedRowDOM(rowNode, nodeViewSerializer, colorScheme) {
   var tr = document.createElement('tr');
-  tr.setAttribute('style', colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
+  tr.setAttribute('style', colorScheme === 'traditional' ? _traditional.deletedTraditionalRowStyle : _standard.deletedRowStyle);
   tr.setAttribute('data-testid', 'show-diff-deleted-row');
 
   // Serialize each cell in the row
@@ -196,7 +185,12 @@ var createDeletedRowsDecorations = exports.createDeletedRowsDecorations = functi
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-var handleDeletedRows = exports.handleDeletedRows = function handleDeletedRows(changes, originalDoc, newDoc, nodeViewSerializer, colorScheme) {
+var handleDeletedRows = exports.handleDeletedRows = function handleDeletedRows(_ref2) {
+  var changes = _ref2.changes,
+    originalDoc = _ref2.originalDoc,
+    newDoc = _ref2.newDoc,
+    nodeViewSerializer = _ref2.nodeViewSerializer,
+    colorScheme = _ref2.colorScheme;
   // First, expand the changes to include complete deleted rows
   var deletedRows = expandDiffForDeletedRows(changes.filter(function (change) {
     return change.deleted.length > 0;