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

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

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

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

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

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

@@ -14,9 +14,25 @@ import { scrollToActiveDecoration } from './scrollToActiveDecoration';
 export var showDiffPluginKey = new PluginKey('showDiffPlugin');
 export var getScrollableDecorations = function getScrollableDecorations(set) {
   var _set$find;
-  return (_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, function (spec) {
-    return spec.key === 'diff-inline' || spec.key === 'diff-widget' || spec.key === 'diff-block';
-  })) !== null && _set$find !== void 0 ? _set$find : [];
+  var seenBlockKeys = new Set();
+  return ((_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, function (spec) {
+    var _spec$key;
+    return spec.key === 'diff-inline' || ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith('diff-widget')) || spec.key === 'diff-block';
+  })) !== null && _set$find !== void 0 ? _set$find : []).filter(function (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;
+      var key = "".concat(dec.from, "-").concat(dec.to, "-").concat((_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(function (a, b) {
+    return a.from === b.from ? a.to - b.to : a.from - b.from;
+  });
 };
 export var createPlugin = function createPlugin(config, getIntl, api) {
   var nodeViewSerializer = new NodeViewSerializer({});

package/dist/types/pm-plugins/areDocsEqualByBlockStructureAndText.d.ts

@@ -0,0 +1,7 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+/**
+ * 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 declare function areDocsEqualByBlockStructureAndText(doc1: PMNode, doc2: PMNode): boolean;

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+/**
+ * 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 declare function areDocsEqualByBlockStructureAndText(doc1: PMNode, doc2: PMNode): boolean;

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "6.1.2",
+	"version": "6.1.4",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^40.0.0",
+		"@atlaskit/tmp-editor-statsig": "^40.3.0",
 		"@atlaskit/tokens": "^11.1.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
@@ -85,6 +85,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_editor_show_diff_equality_fallback": {
+			"type": "boolean"
+		},
 		"platform_editor_show_diff_scroll_navigation": {
 			"type": "boolean"
 		}