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

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 10.4.0
+
+### Minor Changes
+
+- [`0f27159a9087b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0f27159a9087b) -
+  Add `hideAddedDiffsUnderline` option to the `showDiff` command to disable the dark-purple
+  underline on added/updated diff content while keeping the purple highlight. Only affects the
+  extended/`smart` inserted styles, is gated behind the `platform_editor_ai_smart_diff` feature
+  gate, and defaults to `false`.
+
+  ```ts
+  editorApi.showDiff.commands.showDiff({
+  	steps,
+  	originalDoc,
+  	hideAddedDiffsUnderline: true,
+  });
+  ```
+
+## 10.3.0
+
+### Minor Changes
+
+- [`21147179a56ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21147179a56ea) -
+  [CCI-17809] Overhaul Post Stream Review segmenting.
+
+  `@atlaskit/editor-plugin-show-diff`: add a generic `computeDiffChanges` utility (new
+  `@atlaskit/editor-plugin-show-diff/calculate-diff` entry point) that returns the classified
+  `Change[]` and reconstructed new document for a given `originalDoc` + `steps`, without rendering
+  decorations. It reuses the same classifier the diff overlay renders from (default
+  `diffType: 'smart'`), so consumers can derive their own reviewable segments that line up with what
+  the overlay would draw. Exposes the `ComputeDiffChangesParams` type.
+
+  `@atlassian/editor-plugin-ai`: support two segmenting strategies in the Post Stream Review
+  step-through, selected by the new `platform_editor_ai_diff_based_segmenting` gate. Gate ON =
+  diff-based (`smart`) segmenting (via the show-diff `computeDiffChanges` utility, shaped into
+  reviewable segments in the AI plugin); gate OFF (default) = top-level-node segmenting, which no
+  longer splits a list into individual list items. Fine segments are now stored in plugin state and
+  remapped on every doc change, so per-segment undo/redo and view-changes stay correct after an
+  undo. Aggregate ("all changes") mode is unchanged.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.2.0
 
 ### Minor Changes

package/calculate-diff/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@atlaskit/editor-plugin-show-diff/calculate-diff",
+  "main": "../dist/cjs/entry-points/calculate-diff.js",
+  "module": "../dist/esm/entry-points/calculate-diff.js",
+  "module:es2019": "../dist/es2019/entry-points/calculate-diff.js",
+  "sideEffects": false,
+  "types": "../dist/types/entry-points/calculate-diff.d.ts"
+}

package/dist/cjs/entry-points/calculate-diff.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "computeDiffChanges", {
+  enumerable: true,
+  get: function get() {
+    return _computeDiffChanges.computeDiffChanges;
+  }
+});
+var _computeDiffChanges = require("../pm-plugins/calculateDiff/computeDiffChanges");

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

@@ -145,6 +145,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     diffType = _ref3$diffType === void 0 ? 'inline' : _ref3$diffType,
     _ref3$hideDeletedDiff = _ref3.hideDeletedDiffs,
     hideDeletedDiffs = _ref3$hideDeletedDiff === void 0 ? false : _ref3$hideDeletedDiff,
+    _ref3$hideAddedDiffsU = _ref3.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderlineParam = _ref3$hideAddedDiffsU === void 0 ? false : _ref3$hideAddedDiffsU,
     _ref3$showIndicators = _ref3.showIndicators,
     showIndicators = _ref3$showIndicators === void 0 ? false : _ref3$showIndicators,
     smartThresholds = _ref3.smartThresholds,
@@ -159,6 +161,10 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       diffDescriptors: []
     };
   }
+
+  // Resolve the option against its gate once here, so every downstream inline/block builder
+  // receives the same value. When the gate is off the option is a no-op.
+  var hideAddedDiffsUnderline = hideAddedDiffsUnderlineParam && (0, _platformFeatureFlags.fg)('platform_editor_ai_smart_diff');
   var tr = state.tr;
   var steppedDoc = originalDoc;
   var attrSteps = [];
@@ -267,7 +273,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
             }, (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && {
               isInserted: isInserted,
               shouldHideDeleted: shouldHideDeleted,
-              showIndicators: showIndicators
+              showIndicators: showIndicators,
+              hideAddedDiffsUnderline: hideAddedDiffsUnderline
             }))));
           }
         } catch (err) {
@@ -285,7 +292,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         }, (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && {
           isInserted: isInserted,
           shouldHideDeleted: shouldHideDeleted,
-          showIndicators: showIndicators
+          showIndicators: showIndicators,
+          hideAddedDiffsUnderline: hideAddedDiffsUnderline
         }))));
       }
       decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(_objectSpread(_objectSpread({
@@ -317,6 +325,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         }, (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && {
           isInserted: !isInserted,
           diffType: diffType,
+          hideAddedDiffsUnderline: hideAddedDiffsUnderline,
           // 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'`).
@@ -461,6 +470,7 @@ function (_ref5, _ref6) {
     isInverted = _ref7$.isInverted,
     diffType = _ref7$.diffType,
     hideDeletedDiffs = _ref7$.hideDeletedDiffs,
+    hideAddedDiffsUnderline = _ref7$.hideAddedDiffsUnderline,
     showIndicators = _ref7$.showIndicators,
     smartThresholds = _ref7$.smartThresholds,
     deletedDiffPlacement = _ref7$.deletedDiffPlacement;
@@ -474,13 +484,14 @@ function (_ref5, _ref6) {
     lastIsInverted = _ref8$.isInverted,
     lastDiffType = _ref8$.diffType,
     lastHideDeletedDiffs = _ref8$.hideDeletedDiffs,
+    lastHideAddedDiffsUnderline = _ref8$.hideAddedDiffsUnderline,
     lastShowIndicators = _ref8$.showIndicators,
     lastSmartThresholds = _ref8$.smartThresholds,
     lastDeletedDiffPlacement = _ref8$.deletedDiffPlacement;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
   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 && (0, _isEqual.default)(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement) !== 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 && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && 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/computeDiffChanges.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.computeDiffChanges = void 0;
+var _prosemirrorChangeset = require("prosemirror-changeset");
+var _diffBySteps = require("./diffBySteps");
+var _groupChangesByBlock = require("./groupChangesByBlock");
+var _optimizeChanges = require("./optimizeChanges");
+var _simplifySteps = require("./simplifySteps");
+var _classifySmartChanges = require("./smart/classifySmartChanges");
+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; } /**
+ * Generic, editor-state-free diff-change computation.
+ *
+ * Turns an `originalDoc` + forward `steps` into the classified `Change[]` for the
+ * requested `diffType`, plus the reconstructed new document — the same classifier
+ * the diff overlay uses (`calculateDiffDecorations` → `getChanges`), exposed as a
+ * reusable utility (e.g. to derive reviewable segments without rendering
+ * decorations). It runs the requested `diffType` DIRECTLY and does NOT apply the
+ * overlay's `platform_editor_ai_smart_diff` gate, so a `smart` result here can
+ * differ from what the overlay draws when that gate is off (the overlay falls back
+ * to inline); callers that need overlay parity must account for that gate.
+ *
+ * Pure: no `EditorState`, no transactions, no React. The new document is
+ * reconstructed by applying the (simplified) steps to `originalDoc`.
+ */
+/**
+ * Apply the (simplified) steps to `originalDoc` to reconstruct the new doc, and
+ * compute the classified `Change[]` for the requested `diffType`. Mirrors the
+ * body of `calculateDiffDecorations` → `getChanges` so callers stay in lock-step
+ * with the rendered diff. Returns an empty change list (and `originalDoc` as the
+ * new doc) when there are no steps.
+ */
+var computeDiffChanges = exports.computeDiffChanges = function computeDiffChanges(_ref) {
+  var originalDoc = _ref.originalDoc,
+    steps = _ref.steps,
+    _ref$diffType = _ref.diffType,
+    diffType = _ref$diffType === void 0 ? 'smart' : _ref$diffType,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'en' : _ref$locale,
+    smartThresholds = _ref.smartThresholds;
+  if (!steps || steps.length === 0) {
+    return {
+      changes: [],
+      newDoc: originalDoc
+    };
+  }
+  var simplifiedSteps = (0, _simplifySteps.simplifySteps)(steps, originalDoc);
+  var steppedDoc = originalDoc;
+  var stepMaps = [];
+  try {
+    var _iterator = _createForOfIteratorHelper(simplifiedSteps),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var step = _step.value;
+        var result = step.apply(steppedDoc);
+        if (result.failed === null && result.doc) {
+          stepMaps.push(step.getMap());
+          steppedDoc = result.doc;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  } catch (_unused) {
+    // A step's positions fell outside the current doc — `ReplaceStep.apply`
+    // throws a RangeError (rather than returning a failed result) when a
+    // position exceeds the doc size. This can happen for pathological or
+    // inconsistent step sequences. Bail with no changes rather than letting the
+    // error propagate to the caller (which, for the PSR, would crash the
+    // toolbar); the consumer then falls back to its non-diff segmenting path.
+    return {
+      changes: [],
+      newDoc: originalDoc
+    };
+  }
+  var changeset = _prosemirrorChangeset.ChangeSet.create(originalDoc).addSteps(steppedDoc, stepMaps, steppedDoc);
+  if (diffType === 'smart') {
+    return {
+      changes: (0, _classifySmartChanges.classifySmartChanges)({
+        changes: (0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, steppedDoc),
+        originalDoc: originalDoc,
+        newDoc: steppedDoc,
+        locale: locale,
+        thresholds: smartThresholds
+      }),
+      newDoc: steppedDoc
+    };
+  }
+  if (diffType === 'block') {
+    return {
+      changes: (0, _groupChangesByBlock.groupChangesByBlock)(changeset.changes, originalDoc, steppedDoc),
+      newDoc: steppedDoc
+    };
+  }
+  if (diffType === 'step') {
+    return {
+      changes: (0, _diffBySteps.diffBySteps)(originalDoc, simplifiedSteps),
+      newDoc: steppedDoc
+    };
+  }
+  return {
+    changes: (0, _optimizeChanges.optimizeChanges)((0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, steppedDoc)),
+    newDoc: steppedDoc
+  };
+};

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleExtended = exports.editingStyleCardBlockNode = exports.editingStyleActiveExtended = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlockExtended = exports.editingContentStyleInBlock = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedInlineContentStyleExtended = exports.deletedDecorationMarkerVariable = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
+exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleExtendedNoUnderline = exports.editingStyleExtended = exports.editingStyleCardBlockNode = exports.editingStyleActiveExtendedNoUnderline = exports.editingStyleActiveExtended = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlockExtendedNoUnderline = exports.editingContentStyleInBlockExtended = exports.editingContentStyleInBlock = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedInlineContentStyleExtended = exports.deletedDecorationMarkerVariable = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 // delete on platform_editor_diff_plugin_extended cleanup
 var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)({
@@ -44,6 +44,24 @@ var editingStyleActiveExtended = exports.editingStyleActiveExtended = (0, _lazyN
   borderBottom: "2px solid ".concat("var(--ds-border-accent-purple, #AF59E1)"),
   padding: "1px 0 2px"
 });
+
+/**
+ * Underline-free variants of the extended inserted-content styles. Used when the `showDiff`
+ * command is called with `hideAddedDiffsUnderline: true` to remove ONLY the dark-purple
+ * `borderBottom` underline from added/updated content while keeping the purple background
+ * highlight and padding. See the `editing*Extended` constants above for the full versions.
+ */
+var editingStyleExtendedNoUnderline = exports.editingStyleExtendedNoUnderline = (0, _lazyNodeView.convertToInlineCss)({
+  background: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
+  padding: "1px 0 2px"
+});
+var editingStyleActiveExtendedNoUnderline = exports.editingStyleActiveExtendedNoUnderline = (0, _lazyNodeView.convertToInlineCss)({
+  background: "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
+  padding: "1px 0 2px"
+});
+var editingContentStyleInBlockExtendedNoUnderline = exports.editingContentStyleInBlockExtendedNoUnderline = (0, _lazyNodeView.convertToInlineCss)({
+  padding: "1px 0 2px"
+});
 var deletedContentStyle = exports.deletedContentStyle = (0, _lazyNodeView.convertToInlineCss)({
   color: "var(--ds-text-accent-gray, #505258)",
   textDecoration: 'line-through',

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

@@ -35,7 +35,9 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     _ref$showIndicators = _ref.showIndicators,
     showIndicators = _ref$showIndicators === void 0 ? false : _ref$showIndicators,
     doc = _ref.doc,
-    diffType = _ref.diffType;
+    diffType = _ref.diffType,
+    _ref$hideAddedDiffsUn = _ref.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref$hideAddedDiffsUn === void 0 ? false : _ref$hideAddedDiffsUn;
   var diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
     return [_view.Decoration.inline(change.fromB, change.toB, {
@@ -52,7 +54,7 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
       if (colorScheme === 'traditional') {
         style = isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
       } else {
-        style = isActive ? _standard.editingStyleActiveExtended : _standard.editingStyleExtended;
+        style = isActive ? hideAddedDiffsUnderline ? _standard.editingStyleActiveExtendedNoUnderline : _standard.editingStyleActiveExtended : hideAddedDiffsUnderline ? _standard.editingStyleExtendedNoUnderline : _standard.editingStyleExtended;
       }
     } else {
       if (colorScheme === 'traditional') {

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

@@ -34,7 +34,9 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     showIndicators = _ref$showIndicators === void 0 ? false : _ref$showIndicators,
     _ref$placeBelow = _ref.placeBelow,
     placeBelow = _ref$placeBelow === void 0 ? false : _ref$placeBelow,
-    diffType = _ref.diffType;
+    diffType = _ref.diffType,
+    _ref$hideAddedDiffsUn = _ref.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref$hideAddedDiffsUn === void 0 ? false : _ref$hideAddedDiffsUn;
   var slice = doc.slice(change.fromA, change.toA);
   var shouldSkipDeletedEmptyParagraphDecoration = !isInserted && (slice === null || slice === void 0 || (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.childCount) === 1 && (slice === null || slice === void 0 || (_slice$content2 = slice.content) === null || _slice$content2 === void 0 || (_slice$content2 = _slice$content2.firstChild) === null || _slice$content2 === void 0 ? void 0 : _slice$content2.type.name) === 'paragraph' && (slice === null || slice === void 0 || (_slice$content3 = slice.content) === null || _slice$content3 === void 0 || (_slice$content3 = _slice$content3.firstChild) === null || _slice$content3 === void 0 ? void 0 : _slice$content3.content.size) === 0;
   // Widget decoration used for deletions as the content is not in the document
@@ -183,7 +185,8 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
           intl: intl,
           isActive: isActive,
           isInserted: isInserted,
-          diffType: diffType
+          diffType: diffType,
+          hideAddedDiffsUnderline: hideAddedDiffsUnderline
         });
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {

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

@@ -65,11 +65,12 @@ var getChangedContentStyle = function getChangedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var diffType = arguments.length > 3 ? arguments[3] : undefined;
+  var hideAddedDiffsUnderline = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isInserted) {
     if (colorScheme === 'traditional') {
       return isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
     }
-    return isActive ? _standard.editingStyleActiveExtended : _standard.editingStyleExtended;
+    return isActive ? hideAddedDiffsUnderline ? _standard.editingStyleActiveExtendedNoUnderline : _standard.editingStyleActiveExtended : hideAddedDiffsUnderline ? _standard.editingStyleExtendedNoUnderline : _standard.editingStyleExtended;
   }
   if (colorScheme === 'traditional') {
     return (0, _traditional.getDeletedTraditionalInlineStyle)(isActive);
@@ -83,10 +84,11 @@ var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
   var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var isActive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var diffType = arguments.length > 4 ? arguments[4] : undefined;
+  var hideAddedDiffsUnderline = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var isTraditional = colorScheme === 'traditional';
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isInserted) {
     if (isMultiContainerBlockNode(nodeName)) {
-      return _standard.editingContentStyleInBlockExtended;
+      return hideAddedDiffsUnderline ? _standard.editingContentStyleInBlockExtendedNoUnderline : _standard.editingContentStyleInBlockExtended;
     }
     if (isTextLikeBlockNode(nodeName)) {
       return undefined;
@@ -234,11 +236,13 @@ var applyStylesToElement = function applyStylesToElement(_ref3) {
     colorScheme = _ref3.colorScheme,
     isActive = _ref3.isActive,
     isInserted = _ref3.isInserted,
-    diffType = _ref3.diffType;
+    diffType = _ref3.diffType,
+    _ref3$hideAddedDiffsU = _ref3.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref3$hideAddedDiffsU === void 0 ? false : _ref3$hideAddedDiffsU;
   var currentStyle = element.getAttribute('style') || '';
-  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, diffType);
+  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, diffType, hideAddedDiffsUnderline);
   var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
-  var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType) || '';
+  var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
   element.setAttribute('style', "".concat(currentStyle).concat(contentStyle).concat(nodeSpecificStyle));
 };
 var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref4) {
@@ -247,10 +251,12 @@ var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref4
     colorScheme = _ref4.colorScheme,
     isActive = _ref4.isActive,
     isInserted = _ref4.isInserted,
-    diffType = _ref4.diffType;
+    diffType = _ref4.diffType,
+    _ref4$hideAddedDiffsU = _ref4.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref4$hideAddedDiffsU === void 0 ? false : _ref4$hideAddedDiffsU;
   var currentStyle = element.getAttribute('style') || '';
   var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
-  var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType) || '';
+  var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
   if (targetNode.type.name === 'decisionList') {
     element.querySelectorAll('li').forEach(function (listItem) {
       var currentListItemStyle = listItem.getAttribute('style') || '';
@@ -275,13 +281,15 @@ var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref5)
     colorScheme = _ref5.colorScheme,
     isActive = _ref5.isActive,
     isInserted = _ref5.isInserted,
-    diffType = _ref5.diffType;
+    diffType = _ref5.diffType,
+    _ref5$hideAddedDiffsU = _ref5.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref5$hideAddedDiffsU === void 0 ? false : _ref5$hideAddedDiffsU;
   var currentStyle = element.getAttribute('style') || '';
-  var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive, diffType) || '';
+  var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
   if (nodeSpecificStyle) {
     element.setAttribute('style', "".concat(currentStyle).concat(nodeSpecificStyle));
   }
-  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, diffType);
+  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, diffType, hideAddedDiffsUnderline);
   var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
   var textNodesToWrap = [];
   var currentNode = walker.nextNode();
@@ -308,16 +316,18 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref6
     colorScheme = _ref6.colorScheme,
     isActive = _ref6.isActive,
     isInserted = _ref6.isInserted,
-    diffType = _ref6.diffType;
+    diffType = _ref6.diffType,
+    _ref6$hideAddedDiffsU = _ref6.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref6$hideAddedDiffsU === void 0 ? false : _ref6$hideAddedDiffsU;
   var contentWrapper = document.createElement('div');
   var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
-  var nodeStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType);
+  var nodeStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline);
 
   // When the extended experiment is enabled and the content is inserted,
   // block widget nodes that already have dedicated node-level styling (e.g. boxShadow outline)
   // should not also get the inline content style (borderBottom underline) on their container.
   var shouldSkipContentStyle = (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isInserted && nodeStyle !== undefined;
-  var contentStyle = shouldSkipContentStyle ? '' : getChangedContentStyle(colorScheme, isActive, isInserted, diffType);
+  var contentStyle = shouldSkipContentStyle ? '' : getChangedContentStyle(colorScheme, isActive, isInserted, diffType, hideAddedDiffsUnderline);
   contentWrapper.setAttribute('style', "".concat(contentStyle).concat(nodeStyle || ''));
   contentWrapper.append(nodeView);
   return contentWrapper;
@@ -432,7 +442,9 @@ var wrapBlockNode = function wrapBlockNode(_ref9) {
     isActive = _ref9$isActive === void 0 ? false : _ref9$isActive,
     _ref9$isInserted = _ref9.isInserted,
     isInserted = _ref9$isInserted === void 0 ? false : _ref9$isInserted,
-    diffType = _ref9.diffType;
+    diffType = _ref9.diffType,
+    _ref9$hideAddedDiffsU = _ref9.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref9$hideAddedDiffsU === void 0 ? false : _ref9$hideAddedDiffsU;
   var blockWrapper = createBlockNodeWrapper();
   var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
   if (shouldShowRemovedLozenge(targetNodeName) && (!(0, _isExtendedEnabled.isExtendedEnabled)(diffType) || !isInserted)) {
@@ -465,7 +477,8 @@ var wrapBlockNode = function wrapBlockNode(_ref9) {
     colorScheme: colorScheme,
     isActive: isActive,
     isInserted: isInserted,
-    diffType: diffType
+    diffType: diffType,
+    hideAddedDiffsUnderline: hideAddedDiffsUnderline
   });
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
@@ -499,7 +512,9 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
     isActive = _ref0$isActive === void 0 ? false : _ref0$isActive,
     _ref0$isInserted = _ref0.isInserted,
     isInserted = _ref0$isInserted === void 0 ? false : _ref0$isInserted,
-    diffType = _ref0.diffType;
+    diffType = _ref0.diffType,
+    _ref0$hideAddedDiffsU = _ref0.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref0$hideAddedDiffsU === void 0 ? false : _ref0$hideAddedDiffsU;
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     if (nodeView instanceof HTMLElement) {
       if (isInserted && isMultiContainerBlockNode(targetNode.type.name)) {
@@ -509,7 +524,8 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
           colorScheme: colorScheme,
           isActive: isActive,
           isInserted: isInserted,
-          diffType: diffType
+          diffType: diffType,
+          hideAddedDiffsUnderline: hideAddedDiffsUnderline
         });
         dom.append(nodeView);
         return;
@@ -521,7 +537,8 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
           colorScheme: colorScheme,
           isActive: isActive,
           isInserted: isInserted,
-          diffType: diffType
+          diffType: diffType,
+          hideAddedDiffsUnderline: hideAddedDiffsUnderline
         });
         dom.append(nodeView);
         return;
@@ -544,7 +561,8 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
       intl: intl,
       isActive: isActive,
       isInserted: isInserted,
-      diffType: diffType
+      diffType: diffType,
+      hideAddedDiffsUnderline: hideAddedDiffsUnderline
     });
     return;
   } else {
@@ -582,13 +600,14 @@ var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(c
 };
 var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var hideAddedDiffsUnderline = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   if (colorScheme === 'traditional') {
     return isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
   }
   if (isActive) {
-    return _standard.editingStyleActiveExtended;
+    return hideAddedDiffsUnderline ? _standard.editingStyleActiveExtendedNoUnderline : _standard.editingStyleActiveExtended;
   }
-  return _standard.editingStyleExtended;
+  return hideAddedDiffsUnderline ? _standard.editingStyleExtendedNoUnderline : _standard.editingStyleExtended;
 };
 var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

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

@@ -42,6 +42,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
           isInverted: false,
           diffType: 'inline',
           hideDeletedDiffs: false,
+          hideAddedDiffsUnderline: false,
           showIndicators: false,
           diffDescriptors: []
         } : {});
@@ -51,7 +52,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
         var newPluginState = currentPluginState;
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
-            var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8;
+            var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9;
             // Update the plugin state with the new metadata
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
               isDisplayingChanges: true,
@@ -70,15 +71,16 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
                 isInverted: (_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.isInverted,
                 diffType: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.diffType,
                 hideDeletedDiffs: (_newPluginState4 = newPluginState) === null || _newPluginState4 === void 0 ? void 0 : _newPluginState4.hideDeletedDiffs,
-                showIndicators: (_newPluginState5 = newPluginState) === null || _newPluginState5 === void 0 ? void 0 : _newPluginState5.showIndicators,
-                smartThresholds: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.smartThresholds,
-                deletedDiffPlacement: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.deletedDiffPlacement
+                hideAddedDiffsUnderline: (_newPluginState5 = newPluginState) === null || _newPluginState5 === void 0 ? void 0 : _newPluginState5.hideAddedDiffsUnderline,
+                showIndicators: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.showIndicators,
+                smartThresholds: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.smartThresholds,
+                deletedDiffPlacement: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.deletedDiffPlacement
               } : {})),
               decorations = _calculateDiffDecorat.decorations,
               diffDescriptors = _calculateDiffDecorat.diffDescriptors;
             // Update the decorations and their ids
             newPluginState.decorations = decorations;
-            if ((0, _isExtendedEnabled.isExtendedEnabled)((_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.diffType)) {
+            if ((0, _isExtendedEnabled.isExtendedEnabled)((_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.diffType)) {
               newPluginState.diffDescriptors = diffDescriptors;
             }
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
@@ -90,12 +92,13 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               isInverted: false,
               diffType: 'inline',
               hideDeletedDiffs: false,
+              hideAddedDiffsUnderline: false,
               diffDescriptors: []
             } : {});
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') {
-            var _newPluginState9;
+            var _newPluginState0;
             // Update the active index in plugin state and recalculate decorations
-            var _decorations = (0, _getScrollableDecorations.getScrollableDecorations)(currentPluginState.decorations, newState.doc, (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.diffType);
+            var _decorations = (0, _getScrollableDecorations.getScrollableDecorations)(currentPluginState.decorations, newState.doc, (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.diffType);
             if (_decorations.length > 0) {
               var _currentPluginState$a;
               // Initialize to -1 if undefined so that the first "next" scroll takes us to index 0 (first change).
@@ -133,6 +136,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
                   isInverted: newPluginState.isInverted,
                   diffType: newPluginState.diffType,
                   hideDeletedDiffs: newPluginState.hideDeletedDiffs,
+                  hideAddedDiffsUnderline: newPluginState.hideAddedDiffsUnderline,
                   showIndicators: newPluginState.showIndicators,
                   smartThresholds: newPluginState.smartThresholds,
                   deletedDiffPlacement: newPluginState.deletedDiffPlacement

package/dist/es2019/entry-points/calculate-diff.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { computeDiffChanges } from '../pm-plugins/calculateDiff/computeDiffChanges';