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

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

@@ -9,7 +9,7 @@ import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isExtendedEnabled } from '../isExtendedEnabled';
 import { addedCellOverlayStyle, deletedRowStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
 import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle } from './colorSchemes/traditional';
 import { buildDiffDecorationSpec } from './decorationKeys';
@@ -20,7 +20,8 @@ import { findSafeInsertPos } from './utils/findSafeInsertPos';
 var extractChangedRows = function extractChangedRows(_ref) {
   var change = _ref.change,
     originalDoc = _ref.originalDoc,
-    newDoc = _ref.newDoc;
+    newDoc = _ref.newDoc,
+    diffType = _ref.diffType;
   var changedRows = [];
 
   // Find the table in the original document
@@ -60,7 +61,7 @@ var extractChangedRows = function extractChangedRows(_ref) {
 
     // Check if this row overlaps with the deletion range
     var rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
-    if (rowOverlapsChange && rowNode.type.name === 'tableRow' && (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isEmptyRow(rowNode))) {
+    if (rowOverlapsChange && rowNode.type.name === 'tableRow' && (isExtendedEnabled(diffType) || !isEmptyRow(rowNode))) {
       var startOfRow = newTableMap.mapByRow.slice().reverse().find(function (row) {
         return row[0] + tableNew.pos < change.fromB && change.fromB < row[row.length - 1] + tableNew.pos;
       });
@@ -115,9 +116,9 @@ var isEmptyRow = function isEmptyRow(rowNode) {
 /**
  * Creates a DOM representation of a deleted table row
  */
-var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializer, colorScheme, isInserted) {
+var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializer, colorScheme, isInserted, diffType) {
   var tr = document.createElement('tr');
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (isExtendedEnabled(diffType)) {
     if (!isInserted) {
       tr.setAttribute('style', colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
     }
@@ -131,7 +132,7 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
     if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
       var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
       if (nodeView) {
-        if (nodeView instanceof HTMLElement && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        if (nodeView instanceof HTMLElement && isExtendedEnabled(diffType)) {
           var overlay = document.createElement('span');
           var overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
           overlay.setAttribute('style', overlayStyle);
@@ -156,7 +157,8 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
 var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
   var changes = _ref2.changes,
     originalDoc = _ref2.originalDoc,
-    newDoc = _ref2.newDoc;
+    newDoc = _ref2.newDoc,
+    diffType = _ref2.diffType;
   var rowInfo = [];
   var _iterator = _createForOfIteratorHelper(changes),
     _step;
@@ -167,7 +169,8 @@ var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
       var changedRows = extractChangedRows({
         change: change,
         originalDoc: originalDoc,
-        newDoc: newDoc
+        newDoc: newDoc,
+        diffType: diffType
       });
       if (changedRows.length > 0) {
         rowInfo.push.apply(rowInfo, _toConsumableArray(changedRows));
@@ -191,17 +194,19 @@ export var createChangedRowDecorationWidgets = function createChangedRowDecorati
     nodeViewSerializer = _ref3.nodeViewSerializer,
     colorScheme = _ref3.colorScheme,
     _ref3$isInserted = _ref3.isInserted,
-    isInserted = _ref3$isInserted === void 0 ? false : _ref3$isInserted;
+    isInserted = _ref3$isInserted === void 0 ? false : _ref3$isInserted,
+    diffType = _ref3.diffType;
   // First, expand the changes to include complete deleted rows
   var changedRows = expandDiffForChangedRows({
     changes: changes.filter(function (change) {
       return change.deleted.length > 0;
     }),
     originalDoc: originalDoc,
-    newDoc: newDoc
+    newDoc: newDoc,
+    diffType: diffType
   });
   return changedRows.map(function (changedRow) {
-    var rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme, isInserted);
+    var rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme, isInserted, diffType);
 
     // Find safe insertion position for the deleted row
     var safeInsertPos = findSafeInsertPos(newDoc, changedRow.fromB - 1,
@@ -211,7 +216,8 @@ export var createChangedRowDecorationWidgets = function createChangedRowDecorati
     return Decoration.widget(safeInsertPos, rowDOM, _objectSpread({}, buildDiffDecorationSpec({
       decorationType: 'widget',
       diffId: diffId,
-      isActive: false
+      isActive: false,
+      diffType: diffType
     })));
   });
 };

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

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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 { isExtendedEnabled } from '../isExtendedEnabled';
 import { editingStyle, editingStyleExtended, editingStyleActive, editingStyleActiveExtended, deletedContentStyle, deletedContentStyleActive, deletedInlineContentStyleExtended } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle } from './colorSchemes/traditional';
 import { createInlineIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
@@ -27,7 +27,8 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     shouldHideDeleted = _ref$shouldHideDelete === void 0 ? false : _ref$shouldHideDelete,
     _ref$showIndicators = _ref.showIndicators,
     showIndicators = _ref$showIndicators === void 0 ? false : _ref$showIndicators,
-    doc = _ref.doc;
+    doc = _ref.doc,
+    diffType = _ref.diffType;
   var diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
     return [Decoration.inline(change.fromB, change.toB, {
@@ -39,7 +40,7 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     }))];
   }
   var style;
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (isExtendedEnabled(diffType)) {
     if (isInserted) {
       if (colorScheme === 'traditional') {
         style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
@@ -54,7 +55,7 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
         /**
          * Merge into existing styles when cleaning up
          */
-        if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        if (isExtendedEnabled(diffType)) {
           style += deletedInlineContentStyleExtended;
         }
       }
@@ -74,7 +75,7 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     diffId: diffId,
     isActive: isActive
   }))];
-  if (showIndicators && doc && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (showIndicators && doc && isExtendedEnabled(diffType)) {
     decorations.push.apply(decorations, _toConsumableArray(createInlineIndicatorAnchorWidgets({
       doc: doc,
       from: change.fromB,

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

@@ -2,7 +2,7 @@ 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 { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isExtendedEnabled } from '../isExtendedEnabled';
 import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { buildDiffDecorationSpec, buildAnchorDecorationKey } from './decorationKeys';
@@ -25,12 +25,18 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     _ref$isInserted = _ref.isInserted,
     isInserted = _ref$isInserted === void 0 ? false : _ref$isInserted,
     _ref$showIndicators = _ref.showIndicators,
-    showIndicators = _ref$showIndicators === void 0 ? false : _ref$showIndicators;
+    showIndicators = _ref$showIndicators === void 0 ? false : _ref$showIndicators,
+    _ref$placeBelow = _ref.placeBelow,
+    placeBelow = _ref$placeBelow === void 0 ? false : _ref$placeBelow,
+    diffType = _ref.diffType;
   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
   // and we want to display the deleted content with a style.
-  var safeInsertPos = findSafeInsertPos(newDoc, change.fromB, slice);
+  // For `placeBelow`, anchor at the END of the new content (change.toB) so the deleted
+  // node renders beneath its replacement; otherwise anchor at the start (change.fromB).
+  var anchorPos = placeBelow ? change.toB : change.fromB;
+  var safeInsertPos = findSafeInsertPos(newDoc, anchorPos, slice);
   var isActive = activeIndexPos && safeInsertPos === activeIndexPos.from && safeInsertPos === activeIndexPos.to;
   if (slice.content.content.length === 0 || shouldSkipDeletedEmptyParagraphDecoration) {
     return [];
@@ -55,7 +61,8 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
       newDoc: newDoc,
       nodeViewSerializer: nodeViewSerializer,
       colorScheme: colorScheme,
-      isInserted: isInserted
+      isInserted: isInserted,
+      diffType: diffType
     });
   }
   var serializer = nodeViewSerializer;
@@ -68,7 +75,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   // Observe DOM mutations and override the transform on .rich-media-item elements
   // after React mounts to prevent the image from shifting outside its parent container.
   var constrainMediaObserver;
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (isExtendedEnabled(diffType)) {
     constrainMediaObserver = new MutationObserver(function () {
       var richMediaItems = dom.querySelectorAll('.rich-media-item');
       richMediaItems.forEach(function (el) {
@@ -105,14 +112,14 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
           if (childNodeView) {
             var lineBreak = document.createElement('br');
             dom.append(lineBreak);
-            var wrapper = createContentWrapper(colorScheme, isActive, isInserted);
+            var wrapper = createContentWrapper(colorScheme, isActive, isInserted, diffType);
             wrapper.append(childNodeView);
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
             var serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              var _wrapper = createContentWrapper(colorScheme, isActive, isInserted);
+              var _wrapper = createContentWrapper(colorScheme, isActive, isInserted, diffType);
               _wrapper.append(serializedChild);
               dom.append(_wrapper);
             }
@@ -157,7 +164,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     var nodeView = serializer.tryCreateNodeView(node);
     if (nodeView) {
       if (node.isInline) {
-        var wrapper = createContentWrapper(colorScheme, isActive, isInserted);
+        var wrapper = createContentWrapper(colorScheme, isActive, isInserted, diffType);
         wrapper.append(nodeView);
         dom.append(wrapper);
       } else {
@@ -169,7 +176,8 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
           colorScheme: colorScheme,
           intl: intl,
           isActive: isActive,
-          isInserted: isInserted
+          isInserted: isInserted,
+          diffType: diffType
         });
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
@@ -183,11 +191,12 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
             node: fallbackNode,
             colorScheme: colorScheme,
             isActive: isActive,
-            isInserted: isInserted
+            isInserted: isInserted,
+            diffType: diffType
           });
           dom.append(injectedNode);
         } else {
-          var _wrapper2 = createContentWrapper(colorScheme, isActive, isInserted);
+          var _wrapper2 = createContentWrapper(colorScheme, isActive, isInserted, diffType);
           _wrapper2.append(fallbackNode);
           dom.append(_wrapper2);
         }
@@ -195,7 +204,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
-  if (showIndicators && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (showIndicators && isExtendedEnabled(diffType)) {
     var leftAnchor = createLeftAnchorWidget({
       doc: newDoc,
       from: safeInsertPos,
@@ -211,9 +220,12 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   decorations.push(Decoration.widget(safeInsertPos, dom, _objectSpread(_objectSpread({}, buildDiffDecorationSpec(_objectSpread({
     decorationType: 'widget',
     diffId: diffId,
-    isActive: isActive
-  }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-    side: -1
+    isActive: isActive,
+    diffType: diffType
+  }, isExtendedEnabled(diffType) && {
+    // placeBelow anchors at the end of the new content, so render on the
+    // trailing side (1); otherwise render before the new content (-1).
+    side: placeBelow ? 1 : -1
   }))), {}, {
     destroy: function destroy() {
       var _constrainMediaObserv2;
@@ -236,14 +248,15 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   var isSingleBlock = slice.content.childCount === 1 && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.isBlock);
   var resolvedPos = newDoc.resolve(change.fromB);
   var isFirstDocChild = resolvedPos.depth === 0 && resolvedPos.index(0) === 0;
-  if (isFirstDocChild && isSingleBlock && isPureDeletion && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (isFirstDocChild && isSingleBlock && isPureDeletion && isExtendedEnabled(diffType)) {
     var emptyWidgetSpan = document.createElement('span');
     emptyWidgetSpan.style.display = 'block';
     // Use a design token for the margin to keep spacing consistent with the design system
     emptyWidgetSpan.style.marginTop = "var(--ds-space-100, 8px)";
     var widget = Decoration.widget(safeInsertPos, emptyWidgetSpan, _objectSpread({}, buildDiffDecorationSpec({
       decorationType: 'widget',
-      diffId: crypto.randomUUID()
+      diffId: crypto.randomUUID(),
+      diffType: diffType
     })));
     decorations.push(widget);
   }

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

@@ -2,7 +2,8 @@ import _typeof from "@babel/runtime/helpers/typeof";
 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isExtendedEnabled } from '../isExtendedEnabled';
+
 /**
  * Decoration families produced by the show-diff plugin.
  * Each family owns its own key space and spec shape.
@@ -42,8 +43,9 @@ export var buildAnchorDecorationKey = function buildAnchorDecorationKey(_ref) {
 export var buildDiffDecorationKey = function buildDiffDecorationKey(_ref2) {
   var decorationKeyPrefix = _ref2.decorationKeyPrefix,
     isActive = _ref2.isActive,
-    diffId = _ref2.diffId;
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    diffId = _ref2.diffId,
+    diffType = _ref2.diffType;
+  if (isExtendedEnabled(diffType)) {
     return "".concat(decorationKeyPrefix, "-").concat(diffId, "-").concat(isActive ? 'active' : 'inactive');
   }
   return isActive !== undefined ? "".concat(decorationKeyPrefix, "-").concat(isActive ? 'active' : 'inactive') : decorationKeyPrefix;
@@ -53,7 +55,8 @@ export var buildDiffDecorationSpec = function buildDiffDecorationSpec(_ref3) {
     diffId = _ref3.diffId,
     isActive = _ref3.isActive,
     nodeName = _ref3.nodeName,
-    side = _ref3.side;
+    side = _ref3.side,
+    diffType = _ref3.diffType;
   return _objectSpread(_objectSpread({
     decorationFamily: DecorationFamily.diff,
     decorationType: decorationType,
@@ -61,7 +64,8 @@ export var buildDiffDecorationSpec = function buildDiffDecorationSpec(_ref3) {
     key: buildDiffDecorationKey({
       decorationKeyPrefix: DiffDecorationKey[decorationType],
       diffId: diffId,
-      isActive: isActive
+      isActive: isActive,
+      diffType: diffType
     })
   }, nodeName ? {
     nodeName: nodeName

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

@@ -3,6 +3,7 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isExtendedEnabled } from '../../isExtendedEnabled';
 import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlockExtended, editingStyleExtended, editingStyleActiveExtended, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
 import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
 var lozengeStyle = convertToInlineCss({
@@ -56,7 +57,8 @@ var lozengeStyleActiveTraditional = convertToInlineCss({
 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;
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
+  var diffType = arguments.length > 3 ? arguments[3] : undefined;
+  if (isExtendedEnabled(diffType) && isInserted) {
     if (colorScheme === 'traditional') {
       return isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
     }
@@ -73,8 +75,9 @@ var getChangedContentStyle = function getChangedContentStyle(colorScheme) {
 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 isTraditional = colorScheme === 'traditional';
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
+  if (isExtendedEnabled(diffType) && isInserted) {
     if (isMultiContainerBlockNode(nodeName)) {
       return editingContentStyleInBlockExtended;
     }
@@ -223,11 +226,12 @@ var applyStylesToElement = function applyStylesToElement(_ref3) {
     targetNode = _ref3.targetNode,
     colorScheme = _ref3.colorScheme,
     isActive = _ref3.isActive,
-    isInserted = _ref3.isInserted;
+    isInserted = _ref3.isInserted,
+    diffType = _ref3.diffType;
   var currentStyle = element.getAttribute('style') || '';
-  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted);
+  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, diffType);
   var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
-  var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive) || '';
+  var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType) || '';
   element.setAttribute('style', "".concat(currentStyle).concat(contentStyle).concat(nodeSpecificStyle));
 };
 var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref4) {
@@ -235,10 +239,11 @@ var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref4
     targetNode = _ref4.targetNode,
     colorScheme = _ref4.colorScheme,
     isActive = _ref4.isActive,
-    isInserted = _ref4.isInserted;
+    isInserted = _ref4.isInserted,
+    diffType = _ref4.diffType;
   var currentStyle = element.getAttribute('style') || '';
   var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
-  var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive) || '';
+  var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType) || '';
   if (targetNode.type.name === 'decisionList') {
     element.querySelectorAll('li').forEach(function (listItem) {
       var currentListItemStyle = listItem.getAttribute('style') || '';
@@ -262,9 +267,14 @@ var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref5)
     targetNode = _ref5.targetNode,
     colorScheme = _ref5.colorScheme,
     isActive = _ref5.isActive,
-    isInserted = _ref5.isInserted;
-  getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
-  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted);
+    isInserted = _ref5.isInserted,
+    diffType = _ref5.diffType;
+  var currentStyle = element.getAttribute('style') || '';
+  var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive, diffType) || '';
+  if (nodeSpecificStyle) {
+    element.setAttribute('style', "".concat(currentStyle).concat(nodeSpecificStyle));
+  }
+  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, diffType);
   var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
   var textNodesToWrap = [];
   var currentNode = walker.nextNode();
@@ -290,16 +300,17 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref6
     targetNode = _ref6.targetNode,
     colorScheme = _ref6.colorScheme,
     isActive = _ref6.isActive,
-    isInserted = _ref6.isInserted;
+    isInserted = _ref6.isInserted,
+    diffType = _ref6.diffType;
   var contentWrapper = document.createElement('div');
   var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
-  var nodeStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive);
+  var nodeStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType);
 
   // 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 = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted && nodeStyle !== undefined;
-  var contentStyle = shouldSkipContentStyle ? '' : getChangedContentStyle(colorScheme, isActive, isInserted);
+  var shouldSkipContentStyle = isExtendedEnabled(diffType) && isInserted && nodeStyle !== undefined;
+  var contentStyle = shouldSkipContentStyle ? '' : getChangedContentStyle(colorScheme, isActive, isInserted, diffType);
   contentWrapper.setAttribute('style', "".concat(contentStyle).concat(nodeStyle || ''));
   contentWrapper.append(nodeView);
   return contentWrapper;
@@ -413,10 +424,11 @@ var wrapBlockNode = function wrapBlockNode(_ref9) {
     _ref9$isActive = _ref9.isActive,
     isActive = _ref9$isActive === void 0 ? false : _ref9$isActive,
     _ref9$isInserted = _ref9.isInserted,
-    isInserted = _ref9$isInserted === void 0 ? false : _ref9$isInserted;
+    isInserted = _ref9$isInserted === void 0 ? false : _ref9$isInserted,
+    diffType = _ref9.diffType;
   var blockWrapper = createBlockNodeWrapper();
   var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
-  if (shouldShowRemovedLozenge(targetNodeName) && (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isInserted)) {
+  if (shouldShowRemovedLozenge(targetNodeName) && (!isExtendedEnabled(diffType) || !isInserted)) {
     var lozenge = createRemovedLozenge(intl, isActive, colorScheme);
     if (handleEmbedCardWithLozenge({
       dom: dom,
@@ -445,7 +457,8 @@ var wrapBlockNode = function wrapBlockNode(_ref9) {
     targetNode: targetNode,
     colorScheme: colorScheme,
     isActive: isActive,
-    isInserted: isInserted
+    isInserted: isInserted,
+    diffType: diffType
   });
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
@@ -478,8 +491,9 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref0) {
     _ref0$isActive = _ref0.isActive,
     isActive = _ref0$isActive === void 0 ? false : _ref0$isActive,
     _ref0$isInserted = _ref0.isInserted,
-    isInserted = _ref0$isInserted === void 0 ? false : _ref0$isInserted;
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    isInserted = _ref0$isInserted === void 0 ? false : _ref0$isInserted,
+    diffType = _ref0.diffType;
+  if (isExtendedEnabled(diffType)) {
     if (nodeView instanceof HTMLElement) {
       if (isInserted && isMultiContainerBlockNode(targetNode.type.name)) {
         applyMultiContainerLikeStyles({
@@ -487,7 +501,8 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref0) {
           targetNode: targetNode,
           colorScheme: colorScheme,
           isActive: isActive,
-          isInserted: isInserted
+          isInserted: isInserted,
+          diffType: diffType
         });
         dom.append(nodeView);
         return;
@@ -498,7 +513,8 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref0) {
           targetNode: targetNode,
           colorScheme: colorScheme,
           isActive: isActive,
-          isInserted: isInserted
+          isInserted: isInserted,
+          diffType: diffType
         });
         dom.append(nodeView);
         return;
@@ -520,7 +536,8 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref0) {
       colorScheme: colorScheme,
       intl: intl,
       isActive: isActive,
-      isInserted: isInserted
+      isInserted: isInserted,
+      diffType: diffType
     });
     return;
   } else {
@@ -531,7 +548,8 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref0) {
         targetNode: targetNode,
         colorScheme: colorScheme,
         isActive: isActive,
-        isInserted: isInserted
+        isInserted: isInserted,
+        diffType: diffType
       });
       dom.append(nodeView);
     } else {
@@ -542,7 +560,8 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref0) {
         colorScheme: colorScheme,
         intl: intl,
         isActive: isActive,
-        isInserted: isInserted
+        isInserted: isInserted,
+        diffType: diffType
       });
     }
   }
@@ -566,10 +585,11 @@ var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
 };
 var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var diffType = arguments.length > 2 ? arguments[2] : undefined;
   if (colorScheme === 'traditional') {
     return getDeletedTraditionalInlineStyle(isActive);
   }
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (isExtendedEnabled(diffType)) {
     return (isActive ? deletedContentStyleActive : deletedContentStyleNew) + deletedInlineContentStyleExtended;
   }
   return isActive ? deletedContentStyleActive : deletedContentStyleNew;
@@ -584,9 +604,10 @@ export var injectInnerWrapper = function injectInnerWrapper(_ref1) {
   var node = _ref1.node,
     colorScheme = _ref1.colorScheme,
     isActive = _ref1.isActive,
-    isInserted = _ref1.isInserted;
+    isInserted = _ref1.isInserted,
+    diffType = _ref1.diffType;
   var wrapper = document.createElement('span');
-  wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive));
+  wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive, diffType));
   _toConsumableArray(node.childNodes).forEach(function (child) {
     var removedChild = node.removeChild(child);
     wrapper.append(removedChild);
@@ -601,22 +622,23 @@ export var injectInnerWrapper = function injectInnerWrapper(_ref1) {
 export var createContentWrapper = function createContentWrapper(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 wrapper = document.createElement('span');
   var baseStyle = convertToInlineCss({
     position: 'relative',
     width: 'fit-content'
   });
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (isExtendedEnabled(diffType)) {
     if (isInserted) {
       wrapper.setAttribute('style', "".concat(baseStyle).concat(getInsertedContentStyle(colorScheme, isActive)));
     } else {
-      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
+      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive, diffType)));
       var strikethrough = document.createElement('span');
       strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
       wrapper.append(strikethrough);
     }
   } else {
-    wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
+    wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive, diffType)));
     var _strikethrough = document.createElement('span');
     _strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
     wrapper.append(_strikethrough);

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

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _typeof from "@babel/runtime/helpers/typeof";
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { DiffDecorationKey, isDiffDecoration, isDiffDecorationSpec } from './decorations/decorationKeys';
+import { isExtendedEnabled } from './isExtendedEnabled';
 
 /**
  * True if `fragment` contains at least one inline node (text, hardBreak, emoji, mention, etc.).
@@ -62,24 +62,24 @@ function specHasDiffKeyPrefix(spec, keyPrefix) {
  * @param doc - Current document; when set, diff-inline ranges are validated against this doc
  * @returns Array of scrollable decorations, sorted and deduplicated
  */
-export var getScrollableDecorations = function getScrollableDecorations(set, doc) {
+export var getScrollableDecorations = function getScrollableDecorations(set, doc, diffType) {
   if (!set) {
     return [];
   }
   var isBlockDecoration = function isBlockDecoration(decoration) {
     var _decoration$spec$key$, _decoration$spec;
-    return expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isDiffDecoration(decoration) && decoration.spec.decorationType === 'block' : (_decoration$spec$key$ = (_decoration$spec = decoration.spec) === null || _decoration$spec === void 0 || (_decoration$spec = _decoration$spec.key) === null || _decoration$spec === void 0 ? void 0 : _decoration$spec.startsWith(DiffDecorationKey.block)) !== null && _decoration$spec$key$ !== void 0 ? _decoration$spec$key$ : false;
+    return isExtendedEnabled(diffType) ? isDiffDecoration(decoration) && decoration.spec.decorationType === 'block' : (_decoration$spec$key$ = (_decoration$spec = decoration.spec) === null || _decoration$spec === void 0 || (_decoration$spec = _decoration$spec.key) === null || _decoration$spec === void 0 ? void 0 : _decoration$spec.startsWith(DiffDecorationKey.block)) !== null && _decoration$spec$key$ !== void 0 ? _decoration$spec$key$ : false;
   };
   var isInlineDecoration = function isInlineDecoration(decoration) {
     var _decoration$spec$key$2, _decoration$spec2;
-    return expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isDiffDecoration(decoration) && decoration.spec.decorationType === 'inline' : (_decoration$spec$key$2 = (_decoration$spec2 = decoration.spec) === null || _decoration$spec2 === void 0 || (_decoration$spec2 = _decoration$spec2.key) === null || _decoration$spec2 === void 0 ? void 0 : _decoration$spec2.startsWith(DiffDecorationKey.inline)) !== null && _decoration$spec$key$2 !== void 0 ? _decoration$spec$key$2 : false;
+    return isExtendedEnabled(diffType) ? isDiffDecoration(decoration) && decoration.spec.decorationType === 'inline' : (_decoration$spec$key$2 = (_decoration$spec2 = decoration.spec) === null || _decoration$spec2 === void 0 || (_decoration$spec2 = _decoration$spec2.key) === null || _decoration$spec2 === void 0 ? void 0 : _decoration$spec2.startsWith(DiffDecorationKey.inline)) !== null && _decoration$spec$key$2 !== void 0 ? _decoration$spec$key$2 : false;
   };
   var isWidgetDecoration = function isWidgetDecoration(decoration) {
     var _decoration$spec$key$3, _decoration$spec3;
-    return expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isDiffDecoration(decoration) && decoration.spec.decorationType === 'widget' : (_decoration$spec$key$3 = (_decoration$spec3 = decoration.spec) === null || _decoration$spec3 === void 0 || (_decoration$spec3 = _decoration$spec3.key) === null || _decoration$spec3 === void 0 ? void 0 : _decoration$spec3.startsWith(DiffDecorationKey.widget)) !== null && _decoration$spec$key$3 !== void 0 ? _decoration$spec$key$3 : false;
+    return isExtendedEnabled(diffType) ? isDiffDecoration(decoration) && decoration.spec.decorationType === 'widget' : (_decoration$spec$key$3 = (_decoration$spec3 = decoration.spec) === null || _decoration$spec3 === void 0 || (_decoration$spec3 = _decoration$spec3.key) === null || _decoration$spec3 === void 0 ? void 0 : _decoration$spec3.startsWith(DiffDecorationKey.widget)) !== null && _decoration$spec$key$3 !== void 0 ? _decoration$spec$key$3 : false;
   };
   var seenBlockKeys = new Set();
-  var allDecorations = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? set.find(undefined, undefined, isDiffDecorationSpec) : set.find(undefined, undefined, function (spec) {
+  var allDecorations = isExtendedEnabled(diffType) ? set.find(undefined, undefined, isDiffDecorationSpec) : set.find(undefined, undefined, function (spec) {
     return specHasDiffKeyPrefix(spec, DiffDecorationKey.inline) || specHasDiffKeyPrefix(spec, DiffDecorationKey.widget) || specHasDiffKeyPrefix(spec, DiffDecorationKey.block);
   });
 

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

@@ -0,0 +1,14 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+/**
+ * The "extended" diff pipeline is normally gated by `platform_editor_diff_plugin_extended`.
+ * The `smart` diff type REQUIRES the extended pipeline, so whenever `smart` is active (and its
+ * own gate `platform_editor_ai_smart_diff` is on) the extended pipeline is force-enabled,
+ * independent of the extended gate. For all other diff types the extended gate alone decides.
+ *
+ * Pass the active `diffType` so callers deep in the decoration layer render the extended shape
+ * when `smart` is active even if `platform_editor_diff_plugin_extended` is off.
+ */
+export var isExtendedEnabled = function isExtendedEnabled(diffType) {
+  return expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || diffType === 'smart' && fg('platform_editor_ai_smart_diff');
+};