@atlaskit/editor-plugin-show-diff 10.1.23 → 10.2.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 10.2.0
+
+### Minor Changes
+
+- [`eb1f11daf16c8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eb1f11daf16c8) -
+  Add a new `smart` `DiffType` that classifies changes by density at the sentence, paragraph and
+  node level and renders the most readable granularity for each change. Introduces the exported
+  `SmartDiffThresholds` type and a `smartThresholds` option on the `showDiff` params for configuring
+  the sentence/paragraph/node promotion thresholds.
+
+  Also adds a new exported `DeletedDiffPlacement` type (`'top' | 'bottom'`) and a
+  `deletedDiffPlacement` param on `PMDiffParams` that controls whether node/paragraph-level deleted
+  content is rendered above (`'top'`, the default) or below (`'bottom'`) the new content.
+
+  Usage:
+
+  ```ts
+  import type {
+  	DeletedDiffPlacement,
+  	SmartDiffThresholds,
+  } from '@atlaskit/editor-plugin-show-diff/show-diff-plugin-type';
+
+  editorApi.showDiff.commands.showDiff({
+  	originalDoc,
+  	steps,
+  	diffType: 'smart',
+  	// Optional; controls where deleted content is rendered. Defaults to 'top'.
+  	deletedDiffPlacement: 'bottom' satisfies DeletedDiffPlacement,
+  	// All fields optional; defaults applied internally.
+  	smartThresholds: {
+  		sentence: { minChanged: 2, ratio: 0.4 },
+  		paragraph: { minChanged: 2, ratio: 0.4 },
+  		node: { ratio: 0.6, textBearingRatio: 0.6 },
+  	} satisfies SmartDiffThresholds,
+  });
+  ```
+
 ## 10.1.23
 
 ### Patch Changes

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

@@ -5,14 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.calculateDiffDecorations = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _prosemirrorChangeset = require("prosemirror-changeset");
 var _document = require("@atlaskit/editor-common/utils/document");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _areDocsEqualByBlockStructureAndText = require("../areDocsEqualByBlockStructureAndText");
 var _createAnchorDecorationWidgets = require("../decorations/createAnchorDecorationWidgets");
@@ -23,10 +24,13 @@ var _createNodeChangedDecorationWidget = require("../decorations/createNodeChang
 var _decorationKeys = require("../decorations/decorationKeys");
 var _getAttrChangeRanges = require("../decorations/utils/getAttrChangeRanges");
 var _getMarkChangeRanges = require("../decorations/utils/getMarkChangeRanges");
+var _isExtendedEnabled = require("../isExtendedEnabled");
 var _diffBySteps = require("./diffBySteps");
 var _groupChangesByBlock = require("./groupChangesByBlock");
 var _optimizeChanges = require("./optimizeChanges");
 var _simplifySteps = require("./simplifySteps");
+var _classifySmartChanges = require("./smart/classifySmartChanges");
+var _helpers = require("./smart/helpers");
 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; }
 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; } } }; }
@@ -38,20 +42,58 @@ var getChanges = function getChanges(_ref) {
     steppedDoc = _ref.steppedDoc,
     diffType = _ref.diffType,
     tr = _ref.tr,
-    steps = _ref.steps;
-  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    steps = _ref.steps,
+    intl = _ref.intl,
+    smartThresholds = _ref.smartThresholds;
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
+    // The `smart` diff type is gated behind `platform_editor_ai_smart_diff`. When the gate is
+    // off, `smart` falls through to the default (`inline`) path below so behaviour degrades
+    // gracefully (see docs/smart-diff-design.md §3).
+    if (diffType === 'smart' && (0, _platformFeatureFlags.fg)('platform_editor_ai_smart_diff')) {
+      var _changes = (0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, tr.doc);
+      return (0, _classifySmartChanges.classifySmartChanges)({
+        changes: _changes,
+        originalDoc: originalDoc,
+        newDoc: tr.doc,
+        locale: intl.locale,
+        thresholds: smartThresholds
+      });
+    }
     if (diffType === 'step') {
       return (0, _diffBySteps.diffBySteps)(originalDoc, steps);
     }
     if (diffType === 'block') {
       return (0, _groupChangesByBlock.groupChangesByBlock)(changeset.changes, originalDoc, steppedDoc);
     }
-    var _changes = (0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, tr.doc);
-    return (0, _optimizeChanges.optimizeChanges)(_changes);
+    var _changes2 = (0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, tr.doc);
+    return (0, _optimizeChanges.optimizeChanges)(_changes2);
   }
   var changes = (0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, tr.doc);
   return (0, _optimizeChanges.optimizeChanges)(changes);
 };
+
+/**
+ * Collect the inline-content ranges of every leaf text-bearing block (paragraph, heading, …)
+ * whose content overlaps `[from, to)`. Used to clip a node-level `smart` insertion highlight to
+ * the actual added text, so the inserted background/underline never spans structural gaps
+ * (list markers, empty item slots, cell/column boundaries) which would render as phantom rows.
+ */
+var leafTextblockRanges = function leafTextblockRanges(doc, from, to) {
+  var ranges = [];
+  doc.nodesBetween(from, to, function (node, pos) {
+    if (node.isTextblock && node.content.size > 0) {
+      var contentFrom = Math.max(pos + 1, from);
+      var contentTo = Math.min(pos + 1 + node.content.size, to);
+      if (contentTo > contentFrom) {
+        ranges.push([contentFrom, contentTo]);
+      }
+      // Textblocks have no block children to descend into.
+      return false;
+    }
+    return true;
+  });
+  return ranges;
+};
 var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(_ref2) {
   var doc = _ref2.doc,
     from = _ref2.from,
@@ -63,11 +105,12 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
     _ref2$shouldHideDelet = _ref2.shouldHideDeleted,
     shouldHideDeleted = _ref2$shouldHideDelet === void 0 ? false : _ref2$shouldHideDelet,
     _ref2$showIndicators = _ref2.showIndicators,
-    showIndicators = _ref2$showIndicators === void 0 ? false : _ref2$showIndicators;
+    showIndicators = _ref2$showIndicators === void 0 ? false : _ref2$showIndicators,
+    diffType = _ref2.diffType;
   var decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, function (node, pos) {
-    if (node.isBlock && (!(0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || pos + node.nodeSize <= to)) {
+    if (node.isBlock && (!(0, _isExtendedEnabled.isExtendedEnabled)(diffType) || pos + node.nodeSize <= to)) {
       var nodeEnd = pos + node.nodeSize;
       var isActive = activeIndexPos && pos === activeIndexPos.from && nodeEnd === activeIndexPos.to;
       decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createBlockChangedDecoration.createBlockChangedDecoration)({
@@ -81,7 +124,8 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
         isActive: isActive,
         shouldHideDeleted: shouldHideDeleted,
         showIndicators: showIndicators,
-        doc: doc
+        doc: doc,
+        diffType: diffType
       })));
     }
   });
@@ -102,7 +146,10 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     _ref3$hideDeletedDiff = _ref3.hideDeletedDiffs,
     hideDeletedDiffs = _ref3$hideDeletedDiff === void 0 ? false : _ref3$hideDeletedDiff,
     _ref3$showIndicators = _ref3.showIndicators,
-    showIndicators = _ref3$showIndicators === void 0 ? false : _ref3$showIndicators;
+    showIndicators = _ref3$showIndicators === void 0 ? false : _ref3$showIndicators,
+    smartThresholds = _ref3.smartThresholds,
+    _ref3$deletedDiffPlac = _ref3.deletedDiffPlacement,
+    deletedDiffPlacement = _ref3$deletedDiffPlac === void 0 ? 'top' : _ref3$deletedDiffPlac;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps,
     isDisplayingChanges = pluginState.isDisplayingChanges;
@@ -166,14 +213,16 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     steppedDoc: steppedDoc,
     diffType: diffType,
     tr: tr,
-    steps: steps
+    steps: steps,
+    intl: intl,
+    smartThresholds: smartThresholds
   });
   var decorations = [];
 
   /**
    * If showIndicators is on, we create an anchor widget here to mark the doc margin.
    */
-  if (showIndicators && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (showIndicators && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     decorations.push((0, _createAnchorDecorationWidgets.createDocMarginAnchorWidget)());
   }
 
@@ -185,33 +234,77 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       // shouldHideDeleted for block/node decorations: suppressed when isInverted + hideDeletedDiffs,
       // or when showGranularWithBlock (block reference widget is shown instead).
       // isInverted gates both — on an inverted diff the inserted side is visually the deleted side.
-      var shouldHideDeleted = (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.deleted.length > 0 : false;
-      decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createInlineChangedDecoration.createInlineChangedDecoration)(_objectSpread({
-        change: change,
-        doc: tr.doc,
-        colorScheme: colorScheme,
-        isActive: isActive
-      }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-        isInserted: isInserted,
-        shouldHideDeleted: shouldHideDeleted,
-        showIndicators: showIndicators
-      }))));
+      var shouldHideDeleted = (0, _isExtendedEnabled.isExtendedEnabled)(diffType) ? isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.deleted.length > 0 : false;
+
+      // For `smart` NODE-level promotions the change range spans a whole container
+      // (e.g. an entire list/table/layout, using outer node bounds). Applying a SINGLE
+      // inline decoration across that whole range would paint the inserted style across
+      // block boundaries and structural gaps (list markers, empty item slots), producing
+      // phantom "empty" rows above the real content. But skipping the inline highlight
+      // entirely leaves added text-bearing blocks (paragraphs/headings inside the added
+      // container) without the inserted background+underline, because block decorations
+      // return no style for paragraph/heading. So for node-level smart changes we instead
+      // emit ONE inline decoration per leaf text-bearing block within the range — the text
+      // gets highlighted, and structural gaps never do.
+      var isSmartNodeLevel = diffType === 'smart' && (0, _platformFeatureFlags.fg)('platform_editor_ai_smart_diff') && (0, _helpers.smartChangeLevel)(change) === 'node';
+      if (isSmartNodeLevel) {
+        var _iterator2 = _createForOfIteratorHelper(leafTextblockRanges(tr.doc, change.fromB, change.toB)),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var _step2$value = (0, _slicedToArray2.default)(_step2.value, 2),
+              from = _step2$value[0],
+              to = _step2$value[1];
+            decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createInlineChangedDecoration.createInlineChangedDecoration)(_objectSpread({
+              change: {
+                fromB: from,
+                toB: to
+              },
+              doc: tr.doc,
+              colorScheme: colorScheme,
+              isActive: isActive,
+              diffType: diffType
+            }, (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && {
+              isInserted: isInserted,
+              shouldHideDeleted: shouldHideDeleted,
+              showIndicators: showIndicators
+            }))));
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      } else {
+        decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createInlineChangedDecoration.createInlineChangedDecoration)(_objectSpread({
+          change: change,
+          doc: tr.doc,
+          colorScheme: colorScheme,
+          isActive: isActive,
+          diffType: diffType
+        }, (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && {
+          isInserted: isInserted,
+          shouldHideDeleted: shouldHideDeleted,
+          showIndicators: showIndicators
+        }))));
+      }
       decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(_objectSpread(_objectSpread({
         doc: tr.doc,
         from: change.fromB,
         to: change.toB,
         colorScheme: colorScheme
-      }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+      }, (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && {
         isInserted: isInserted,
         shouldHideDeleted: shouldHideDeleted,
         showIndicators: showIndicators
       }), {}, {
         activeIndexPos: activeIndexPos,
-        intl: intl
+        intl: intl,
+        diffType: diffType
       }))));
     }
     if (change.deleted.length > 0) {
-      var _shouldHideDeleted = (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.inserted.length > 0 : false;
+      var _shouldHideDeleted = (0, _isExtendedEnabled.isExtendedEnabled)(diffType) ? !isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.inserted.length > 0 : false;
       if (!_shouldHideDeleted) {
         decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createNodeChangedDecorationWidget.createNodeChangedDecorationWidget)(_objectSpread(_objectSpread({
           change: change,
@@ -221,9 +314,13 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
           newDoc: tr.doc,
           intl: intl,
           activeIndexPos: activeIndexPos
-        }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+        }, (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && {
           isInserted: !isInserted,
-          diffType: diffType
+          diffType: diffType,
+          // For `smart` node- and paragraph-level changes, optionally render the
+          // deleted content below the new content (gray + strikethrough) instead
+          // of above it. Controlled by `deletedDiffPlacement` (default `'top'`).
+          placeBelow: deletedDiffPlacement === 'bottom' && diffType === 'smart' && (0, _platformFeatureFlags.fg)('platform_editor_ai_smart_diff') && ((0, _helpers.smartChangeLevel)(change) === 'node' || (0, _helpers.smartChangeLevel)(change) === 'paragraph')
         }), {}, {
           showIndicators: showIndicators
         }))));
@@ -364,7 +461,9 @@ function (_ref5, _ref6) {
     isInverted = _ref7$.isInverted,
     diffType = _ref7$.diffType,
     hideDeletedDiffs = _ref7$.hideDeletedDiffs,
-    showIndicators = _ref7$.showIndicators;
+    showIndicators = _ref7$.showIndicators,
+    smartThresholds = _ref7$.smartThresholds,
+    deletedDiffPlacement = _ref7$.deletedDiffPlacement;
   var _ref8 = (0, _slicedToArray2.default)(_ref6, 1),
     _ref8$ = _ref8[0],
     lastPluginState = _ref8$.pluginState,
@@ -375,11 +474,13 @@ function (_ref5, _ref6) {
     lastIsInverted = _ref8$.isInverted,
     lastDiffType = _ref8$.diffType,
     lastHideDeletedDiffs = _ref8$.hideDeletedDiffs,
-    lastShowIndicators = _ref8$.showIndicators;
+    lastShowIndicators = _ref8$.showIndicators,
+    lastSmartThresholds = _ref8$.smartThresholds,
+    lastDeletedDiffPlacement = _ref8$.deletedDiffPlacement;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
-  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     var _ref9;
-    return (_ref9 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && showIndicators === lastShowIndicators) !== null && _ref9 !== void 0 ? _ref9 : false;
+    return (_ref9 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && showIndicators === lastShowIndicators && (0, _isEqual.default)(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement) !== null && _ref9 !== void 0 ? _ref9 : false;
   }
   return (_ref0 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref0 !== void 0 ? _ref0 : false;
 });

package/dist/cjs/pm-plugins/calculateDiff/groupChangesByBlock.js

@@ -4,14 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getTopLevelBlockAt = getTopLevelBlockAt;
 exports.groupChangesByBlock = groupChangesByBlock;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 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; }
 /**
- * Finds the position range of the top-level block (direct child of doc) that contains `pos`.
- * Returns null if `pos` is at the doc boundary or outside the doc content.
+ * Finds the position range (outer bounds) of the top-level block (direct child of doc) that
+ * contains the range [from, to]. Shared with the `smart` diff type so its block grouping is
+ * identical to the `block` diff type by construction.
  */
 function getTopLevelBlockAt(doc, from, to) {
   return {