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

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

@@ -11,7 +11,7 @@ var _document = require("@atlaskit/editor-common/utils/document");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _isExtendedEnabled = require("../isExtendedEnabled");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
 var _decorationKeys = require("./decorationKeys");
@@ -27,7 +27,8 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 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
@@ -67,7 +68,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' && ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isEmptyRow(rowNode))) {
+    if (rowOverlapsChange && rowNode.type.name === 'tableRow' && ((0, _isExtendedEnabled.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;
       });
@@ -122,9 +123,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 ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     if (!isInserted) {
       tr.setAttribute('style', colorScheme === 'traditional' ? _traditional.deletedTraditionalRowStyle : _standard.deletedRowStyle);
     }
@@ -138,7 +139,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 && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        if (nodeView instanceof HTMLElement && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
           var overlay = document.createElement('span');
           var overlayStyle = colorScheme === 'traditional' ? isInserted ? _traditional.traditionalAddedCellOverlayStyle : _traditional.deletedTraditionalCellOverlayStyle : isInserted ? _standard.addedCellOverlayStyle : _standard.deletedCellOverlayStyle;
           overlay.setAttribute('style', overlayStyle);
@@ -163,7 +164,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;
@@ -174,7 +176,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, (0, _toConsumableArray2.default)(changedRows));
@@ -198,17 +201,19 @@ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidget
     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 = (0, _findSafeInsertPos.findSafeInsertPos)(newDoc, changedRow.fromB - 1,
@@ -218,7 +223,8 @@ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidget
     return _view.Decoration.widget(safeInsertPos, rowDOM, _objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)({
       decorationType: 'widget',
       diffId: diffId,
-      isActive: false
+      isActive: false,
+      diffType: diffType
     })));
   });
 };

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

@@ -8,7 +8,7 @@ exports.createInlineChangedDecoration = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _isExtendedEnabled = require("../isExtendedEnabled");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
 var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
@@ -34,7 +34,8 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     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 [_view.Decoration.inline(change.fromB, change.toB, {
@@ -46,7 +47,7 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     }))];
   }
   var style;
-  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     if (isInserted) {
       if (colorScheme === 'traditional') {
         style = isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
@@ -61,7 +62,7 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
         /**
          * Merge into existing styles when cleaning up
          */
-        if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
           style += _standard.deletedInlineContentStyleExtended;
         }
       }
@@ -81,7 +82,7 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     diffId: diffId,
     isActive: isActive
   }))];
-  if (showIndicators && doc && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (showIndicators && doc && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createAnchorDecorationWidgets.createInlineIndicatorAnchorWidgets)({
       doc: doc,
       from: change.fromB,

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createNodeChangedDecorationWidget = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _isExtendedEnabled = require("../isExtendedEnabled");
 var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWidgets");
 var _decorationKeys = require("./decorationKeys");
@@ -31,12 +31,18 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     _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 = (0, _findSafeInsertPos.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 = (0, _findSafeInsertPos.findSafeInsertPos)(newDoc, anchorPos, slice);
   var isActive = activeIndexPos && safeInsertPos === activeIndexPos.from && safeInsertPos === activeIndexPos.to;
   if (slice.content.content.length === 0 || shouldSkipDeletedEmptyParagraphDecoration) {
     return [];
@@ -61,7 +67,8 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
       newDoc: newDoc,
       nodeViewSerializer: nodeViewSerializer,
       colorScheme: colorScheme,
-      isInserted: isInserted
+      isInserted: isInserted,
+      diffType: diffType
     });
   }
   var serializer = nodeViewSerializer;
@@ -74,7 +81,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   // 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 ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     constrainMediaObserver = new MutationObserver(function () {
       var richMediaItems = dom.querySelectorAll('.rich-media-item');
       richMediaItems.forEach(function (el) {
@@ -111,14 +118,14 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
           if (childNodeView) {
             var lineBreak = document.createElement('br');
             dom.append(lineBreak);
-            var wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted);
+            var wrapper = (0, _wrapBlockNodeView.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 = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted);
+              var _wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted, diffType);
               _wrapper.append(serializedChild);
               dom.append(_wrapper);
             }
@@ -163,7 +170,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     var nodeView = serializer.tryCreateNodeView(node);
     if (nodeView) {
       if (node.isInline) {
-        var wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted);
+        var wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted, diffType);
         wrapper.append(nodeView);
         dom.append(wrapper);
       } else {
@@ -175,7 +182,8 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
           colorScheme: colorScheme,
           intl: intl,
           isActive: isActive,
-          isInserted: isInserted
+          isInserted: isInserted,
+          diffType: diffType
         });
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
@@ -189,11 +197,12 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
             node: fallbackNode,
             colorScheme: colorScheme,
             isActive: isActive,
-            isInserted: isInserted
+            isInserted: isInserted,
+            diffType: diffType
           });
           dom.append(injectedNode);
         } else {
-          var _wrapper2 = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted);
+          var _wrapper2 = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted, diffType);
           _wrapper2.append(fallbackNode);
           dom.append(_wrapper2);
         }
@@ -201,7 +210,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
-  if (showIndicators && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (showIndicators && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     var leftAnchor = (0, _createAnchorDecorationWidgets.createLeftAnchorWidget)({
       doc: newDoc,
       from: safeInsertPos,
@@ -217,9 +226,12 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   decorations.push(_view.Decoration.widget(safeInsertPos, dom, _objectSpread(_objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)(_objectSpread({
     decorationType: 'widget',
     diffId: diffId,
-    isActive: isActive
-  }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-    side: -1
+    isActive: isActive,
+    diffType: diffType
+  }, (0, _isExtendedEnabled.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;
@@ -242,14 +254,15 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   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 && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (isFirstDocChild && isSingleBlock && isPureDeletion && (0, _isExtendedEnabled.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 = _view.Decoration.widget(safeInsertPos, emptyWidgetSpan, _objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)({
       decorationType: 'widget',
-      diffId: crypto.randomUUID()
+      diffId: crypto.randomUUID(),
+      diffType: diffType
     })));
     decorations.push(widget);
   }

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

@@ -9,7 +9,7 @@ exports.buildAnchorDecorationSpec = buildAnchorDecorationSpec;
 exports.isDiffDecorationSpec = exports.isDiffDecoration = exports.isAnchorDecorationSpec = exports.extractDiffDescriptors = exports.buildDiffDecorationSpec = exports.buildDiffDecorationKey = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _isExtendedEnabled = require("../isExtendedEnabled");
 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; }
 /**
@@ -51,8 +51,9 @@ var buildAnchorDecorationKey = exports.buildAnchorDecorationKey = function build
 var buildDiffDecorationKey = exports.buildDiffDecorationKey = function buildDiffDecorationKey(_ref2) {
   var decorationKeyPrefix = _ref2.decorationKeyPrefix,
     isActive = _ref2.isActive,
-    diffId = _ref2.diffId;
-  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    diffId = _ref2.diffId,
+    diffType = _ref2.diffType;
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     return "".concat(decorationKeyPrefix, "-").concat(diffId, "-").concat(isActive ? 'active' : 'inactive');
   }
   return isActive !== undefined ? "".concat(decorationKeyPrefix, "-").concat(isActive ? 'active' : 'inactive') : decorationKeyPrefix;
@@ -62,7 +63,8 @@ var buildDiffDecorationSpec = exports.buildDiffDecorationSpec = function buildDi
     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,
@@ -70,7 +72,8 @@ var buildDiffDecorationSpec = exports.buildDiffDecorationSpec = function buildDi
     key: buildDiffDecorationKey({
       decorationKeyPrefix: DiffDecorationKey[decorationType],
       diffId: diffId,
-      isActive: isActive
+      isActive: isActive,
+      diffType: diffType
     })
   }, nodeName ? {
     nodeName: nodeName

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

@@ -10,6 +10,7 @@ var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _messages = require("@atlaskit/editor-common/messages");
 var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _isExtendedEnabled = require("../../isExtendedEnabled");
 var _standard = require("../colorSchemes/standard");
 var _traditional = require("../colorSchemes/traditional");
 var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
@@ -63,7 +64,8 @@ var lozengeStyleActiveTraditional = (0, _lazyNodeView.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 ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
+  var diffType = arguments.length > 3 ? arguments[3] : undefined;
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isInserted) {
     if (colorScheme === 'traditional') {
       return isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
     }
@@ -80,8 +82,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 ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isInserted) {
     if (isMultiContainerBlockNode(nodeName)) {
       return _standard.editingContentStyleInBlockExtended;
     }
@@ -230,11 +233,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 = (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) || '';
+  var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType) || '';
   element.setAttribute('style', "".concat(currentStyle).concat(contentStyle).concat(nodeSpecificStyle));
 };
 var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref4) {
@@ -242,10 +246,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 = (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) || '';
+  var nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType) || '';
   if (targetNode.type.name === 'decisionList') {
     element.querySelectorAll('li').forEach(function (listItem) {
       var currentListItemStyle = listItem.getAttribute('style') || '';
@@ -269,9 +274,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();
@@ -297,16 +307,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 = (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);
+  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 = (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted && nodeStyle !== undefined;
-  var contentStyle = shouldSkipContentStyle ? '' : getChangedContentStyle(colorScheme, isActive, isInserted);
+  var shouldSkipContentStyle = (0, _isExtendedEnabled.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;
@@ -420,10 +431,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 = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
-  if (shouldShowRemovedLozenge(targetNodeName) && (!(0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isInserted)) {
+  if (shouldShowRemovedLozenge(targetNodeName) && (!(0, _isExtendedEnabled.isExtendedEnabled)(diffType) || !isInserted)) {
     var lozenge = createRemovedLozenge(intl, isActive, colorScheme);
     if (handleEmbedCardWithLozenge({
       dom: dom,
@@ -452,7 +464,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)) {
@@ -485,8 +498,9 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
     _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 ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    isInserted = _ref0$isInserted === void 0 ? false : _ref0$isInserted,
+    diffType = _ref0.diffType;
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     if (nodeView instanceof HTMLElement) {
       if (isInserted && isMultiContainerBlockNode(targetNode.type.name)) {
         applyMultiContainerLikeStyles({
@@ -494,7 +508,8 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
           targetNode: targetNode,
           colorScheme: colorScheme,
           isActive: isActive,
-          isInserted: isInserted
+          isInserted: isInserted,
+          diffType: diffType
         });
         dom.append(nodeView);
         return;
@@ -505,7 +520,8 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
           targetNode: targetNode,
           colorScheme: colorScheme,
           isActive: isActive,
-          isInserted: isInserted
+          isInserted: isInserted,
+          diffType: diffType
         });
         dom.append(nodeView);
         return;
@@ -527,7 +543,8 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
       colorScheme: colorScheme,
       intl: intl,
       isActive: isActive,
-      isInserted: isInserted
+      isInserted: isInserted,
+      diffType: diffType
     });
     return;
   } else {
@@ -538,7 +555,8 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
         targetNode: targetNode,
         colorScheme: colorScheme,
         isActive: isActive,
-        isInserted: isInserted
+        isInserted: isInserted,
+        diffType: diffType
       });
       dom.append(nodeView);
     } else {
@@ -549,7 +567,8 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
         colorScheme: colorScheme,
         intl: intl,
         isActive: isActive,
-        isInserted: isInserted
+        isInserted: isInserted,
+        diffType: diffType
       });
     }
   }
@@ -573,10 +592,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 (0, _traditional.getDeletedTraditionalInlineStyle)(isActive);
   }
-  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     return (isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyleNew) + _standard.deletedInlineContentStyleExtended;
   }
   return isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyleNew;
@@ -591,9 +611,10 @@ var injectInnerWrapper = exports.injectInnerWrapper = function injectInnerWrappe
   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));
   (0, _toConsumableArray2.default)(node.childNodes).forEach(function (child) {
     var removedChild = node.removeChild(child);
     wrapper.append(removedChild);
@@ -608,22 +629,23 @@ var injectInnerWrapper = exports.injectInnerWrapper = function injectInnerWrappe
 var createContentWrapper = exports.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 = (0, _lazyNodeView.convertToInlineCss)({
     position: 'relative',
     width: 'fit-content'
   });
-  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if ((0, _isExtendedEnabled.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/cjs/pm-plugins/getScrollableDecorations.js

@@ -8,8 +8,8 @@ exports.getScrollableDecorations = void 0;
 exports.isInlineDiffDecorationRenderableInDoc = isInlineDiffDecorationRenderableInDoc;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _decorationKeys = require("./decorations/decorationKeys");
+var _isExtendedEnabled = require("./isExtendedEnabled");
 /**
  * True if `fragment` contains at least one inline node (text, hardBreak, emoji, mention, etc.).
  * Block-only subtrees (e.g. empty paragraphs, block cards with no inline children) return false.
@@ -69,24 +69,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
  */
-var getScrollableDecorations = exports.getScrollableDecorations = function getScrollableDecorations(set, doc) {
+var getScrollableDecorations = exports.getScrollableDecorations = function getScrollableDecorations(set, doc, diffType) {
   if (!set) {
     return [];
   }
   var isBlockDecoration = function isBlockDecoration(decoration) {
     var _decoration$spec$key$, _decoration$spec;
-    return (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? (0, _decorationKeys.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(_decorationKeys.DiffDecorationKey.block)) !== null && _decoration$spec$key$ !== void 0 ? _decoration$spec$key$ : false;
+    return (0, _isExtendedEnabled.isExtendedEnabled)(diffType) ? (0, _decorationKeys.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(_decorationKeys.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 (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? (0, _decorationKeys.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(_decorationKeys.DiffDecorationKey.inline)) !== null && _decoration$spec$key$2 !== void 0 ? _decoration$spec$key$2 : false;
+    return (0, _isExtendedEnabled.isExtendedEnabled)(diffType) ? (0, _decorationKeys.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(_decorationKeys.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 (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? (0, _decorationKeys.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(_decorationKeys.DiffDecorationKey.widget)) !== null && _decoration$spec$key$3 !== void 0 ? _decoration$spec$key$3 : false;
+    return (0, _isExtendedEnabled.isExtendedEnabled)(diffType) ? (0, _decorationKeys.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(_decorationKeys.DiffDecorationKey.widget)) !== null && _decoration$spec$key$3 !== void 0 ? _decoration$spec$key$3 : false;
   };
   var seenBlockKeys = new Set();
-  var allDecorations = (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? set.find(undefined, undefined, _decorationKeys.isDiffDecorationSpec) : set.find(undefined, undefined, function (spec) {
+  var allDecorations = (0, _isExtendedEnabled.isExtendedEnabled)(diffType) ? set.find(undefined, undefined, _decorationKeys.isDiffDecorationSpec) : set.find(undefined, undefined, function (spec) {
     return specHasDiffKeyPrefix(spec, _decorationKeys.DiffDecorationKey.inline) || specHasDiffKeyPrefix(spec, _decorationKeys.DiffDecorationKey.widget) || specHasDiffKeyPrefix(spec, _decorationKeys.DiffDecorationKey.block);
   });
 

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isExtendedEnabled = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@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.
+ */
+var isExtendedEnabled = exports.isExtendedEnabled = function isExtendedEnabled(diffType) {
+  return (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || diffType === 'smart' && (0, _platformFeatureFlags.fg)('platform_editor_ai_smart_diff');
+};