@atlaskit/editor-plugin-show-diff 10.5.0 → 10.5.2

package/dist/esm/pm-plugins/decorations/utils/getAttrChangeRanges.js

@@ -1,5 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var filterUndefined = function filterUndefined(x) {
   return !!x;
 };
@@ -13,6 +17,26 @@ var dateAttrs = ['timestamp'];
 // Attribute that indicates a task item state change
 var taskItemAttrs = ['state'];
 
+// Attributes that indicate an emoji change
+var emojiAttrs = ['shortName', 'id', 'text'];
+
+// Attributes that indicate a mention change (who is mentioned)
+var mentionAttrs = ['id', 'text'];
+
+// Attributes that indicate a status change (label or colour)
+var statusAttrs = ['text', 'color'];
+
+// Map of node type name → the attrs that represent a meaningful content change for that node
+var inlineNodeAttrMap = {
+  date: dateAttrs,
+  emoji: emojiAttrs,
+  mention: mentionAttrs,
+  status: statusAttrs
+};
+var isInlineAttrChangeNodeName = function isInlineAttrChangeNodeName(nodeName) {
+  return nodeName in inlineNodeAttrMap;
+};
+
 // Attributes excluded from extension change detection (not meaningful content changes)
 var extensionExcludedAttrs = ['localId'];
 
@@ -27,7 +51,7 @@ var getStepAttrs = function getStepAttrs(step) {
   }
   return [];
 };
-export var getAttrChangeRanges = function getAttrChangeRanges(doc, steps) {
+export var getAttrChangeRanges = function getAttrChangeRanges(doc, steps, originalDoc) {
   return steps.map(function (step) {
     if (!(step instanceof AttrStep) && !(step instanceof SetAttrsStep)) {
       return undefined;
@@ -39,14 +63,39 @@ export var getAttrChangeRanges = function getAttrChangeRanges(doc, steps) {
     // date node: timestamp attribute change — highlight the date node itself (inline)
     if (stepAttrs.some(function (v) {
       return dateAttrs.includes(v);
-    }) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date') {
+    }) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date' && !expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) {
       return {
         fromB: step.pos,
         toB: step.pos + nodeAtPos.nodeSize,
-        isInline: true
+        isInline: true,
+        inlineNodeName: 'date'
       };
     }
 
+    // The following inline node attr changes are gated behind platform_editor_improve_inline_diffs.
+    // The changeset path (createDecorationsForChange) handles the deletion widget via
+    // prosemirror-changeset; we only need to add the inline insertion highlight here.
+    if (expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true) && nodeAtPos) {
+      var nodeName = nodeAtPos.type.name;
+      if (isInlineAttrChangeNodeName(nodeName)) {
+        var watchedAttrs = inlineNodeAttrMap[nodeName];
+        if (stepAttrs.some(function (v) {
+          return watchedAttrs.includes(v);
+        })) {
+          var originalNodeAtPos = originalDoc === null || originalDoc === void 0 ? void 0 : originalDoc.nodeAt(step.pos);
+          return _objectSpread({
+            fromB: step.pos,
+            toB: step.pos + nodeAtPos.nodeSize,
+            isInline: true,
+            inlineNodeName: nodeName
+          }, originalNodeAtPos && {
+            fromA: step.pos,
+            toA: step.pos + originalNodeAtPos.nodeSize
+          });
+        }
+      }
+    }
+
     // taskItem node: state attribute change — highlight the taskItem node
     if (stepAttrs.some(function (v) {
       return taskItemAttrs.includes(v);
@@ -80,7 +129,17 @@ export var getAttrChangeRanges = function getAttrChangeRanges(doc, steps) {
       };
     }
     return undefined;
-  }).filter(filterUndefined);
+  }).filter(filterUndefined)
+  // Deduplicate by node position: multiple AttrSteps on the same node
+  // (e.g. setNodeAttribute(pos, 'text', ...) + setNodeAttribute(pos, 'color', ...))
+  // should produce only one decoration, not one per step.
+  // Gated behind the same experiment as the inline node attr changes that introduced
+  // the possibility of multiple ranges for the same node position.
+  .filter(function (range, i, arr) {
+    return !expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true) || arr.findIndex(function (r) {
+      return r.fromB === range.fromB;
+    }) === i;
+  });
 };
 
 /**

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

@@ -38,3 +38,4 @@ export declare const standardDecorationMarkerVariable: string;
 export declare const deletedDecorationMarkerVariable: string;
 export declare const addedCellOverlayStyle: string;
 export declare const deletedCellOverlayStyle: string;
+export declare const deletedCellOverlayRoundedStyle: string;

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

@@ -11,7 +11,7 @@ export declare const deletedTraditionalBlockOutline: string;
 export declare const deletedTraditionalBlockOutlineActive: string;
 export declare const deletedTraditionalBlockOutlineRounded: string;
 export declare const deletedTraditionalBlockOutlineRoundedActive: string;
-/** Scroll-navigation “new” emphasis: 4px ring (see {@link traditionalStyleNodeNew}). */
+/** Scroll-navigation “new” emphasis: 4px ring. */
 export declare const deletedTraditionalBlockOutlineNew: string;
 export declare const deletedTraditionalBlockOutlineRoundedNew: string;
 export declare const deletedTraditionalRowStyle: string;
@@ -37,3 +37,4 @@ export declare const traditionalDeletedDecorationMarkerVariableActive: string;
 export declare const traditionalAddedCellOverlayStyle: string;
 export declare const traditionalAddedCellOverlayStyleNew: string;
 export declare const deletedTraditionalCellOverlayStyle: string;
+export declare const deletedTraditionalCellOverlayRoundedStyle: string;

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

@@ -1,13 +1,14 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { ColorScheme, DiffType } from '../../showDiffPluginType';
+import type { InlineAttrChangeNodeName } from './utils/getAttrChangeRanges';
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export declare const createInlineChangedDecoration: ({ change, colorScheme, isActive, isInserted, shouldHideDeleted, showIndicators, doc, diffType, hideAddedDiffsUnderline, }: {
+export declare const createInlineChangedDecoration: ({ change, colorScheme, isActive, isInserted, isAtomicInlineNode, shouldHideDeleted, showIndicators, doc, diffType, hideAddedDiffsUnderline, inlineNodeName, }: {
     change: {
         fromB: number;
         toB: number;
@@ -16,7 +17,9 @@ export declare const createInlineChangedDecoration: ({ change, colorScheme, isAc
     diffType?: DiffType;
     doc?: PMNode;
     hideAddedDiffsUnderline?: boolean;
+    inlineNodeName?: InlineAttrChangeNodeName;
     isActive?: boolean;
+    isAtomicInlineNode?: boolean;
     isInserted?: boolean;
     shouldHideDeleted?: boolean;
     showIndicators?: boolean;

package/dist/types/pm-plugins/decorations/utils/getAttrChangeRanges.d.ts

@@ -1,12 +1,22 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
+export type InlineAttrChangeNodeName = 'date' | 'emoji' | 'mention' | 'status';
 type StepRange = {
+    /**
+     * Position of the original (before) node in the original doc.
+     * Populated for inline attr changes (e.g. emoji, date) so the caller can
+     * render the old node as a "deleted" widget alongside the new highlighted node.
+     */
+    fromA?: number;
     fromB: number;
+    /** Inline node type, used by callers that need node-view-specific styling. */
+    inlineNodeName?: InlineAttrChangeNodeName;
     /** Whether the changed node is inline (true) or block (false/undefined) */
     isInline?: boolean;
+    toA?: number;
     toB: number;
 };
-export declare const getAttrChangeRanges: (doc: PMNode, steps: ProseMirrorStep[]) => StepRange[];
+export declare const getAttrChangeRanges: (doc: PMNode, steps: ProseMirrorStep[], originalDoc: PMNode) => StepRange[];
 /**
  * Check if the step was a valid attr change and affected the doc
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "10.5.0",
+	"version": "10.5.2",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,10 +28,10 @@
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-tables": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/tmp-editor-statsig": "^130.2.0",
-		"@atlaskit/tokens": "^16.1.0",
+		"@atlaskit/tmp-editor-statsig": "^132.0.0",
+		"@atlaskit/tokens": "^16.2.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.22.2",
+		"@compiled/react": "^1.0.0",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",
 		"prosemirror-changeset": "^2.3.1"
@@ -41,10 +41,10 @@
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/dropdown-menu": "^17.1.0",
-		"@atlaskit/editor-core": "^221.10.0",
+		"@atlaskit/editor-core": "^221.12.0",
 		"@atlaskit/editor-json-transformer": "^9.0.0",
 		"@atlaskit/form": "^16.1.0",
-		"@atlaskit/primitives": "^22.0.0",
+		"@atlaskit/primitives": "^22.1.0",
 		"@atlaskit/section-message": "^9.2.0",
 		"@atlaskit/textarea": "^9.1.0",
 		"@atlassian/confluence-presets": "workspace:^",
@@ -54,7 +54,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.34.0",
+		"@atlaskit/editor-common": "^116.35.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {