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

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

@@ -1,6 +1,6 @@
 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';
@@ -22,7 +22,8 @@ export const createInlineChangedDecoration = ({
   isInserted = true,
   shouldHideDeleted = false,
   showIndicators = false,
-  doc
+  doc,
+  diffType
 }) => {
   const diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
@@ -35,7 +36,7 @@ export const createInlineChangedDecoration = ({
     }))];
   }
   let style;
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (isExtendedEnabled(diffType)) {
     if (isInserted) {
       if (colorScheme === 'traditional') {
         style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
@@ -50,7 +51,7 @@ export const createInlineChangedDecoration = ({
         /**
          * Merge into existing styles when cleaning up
          */
-        if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        if (isExtendedEnabled(diffType)) {
           style += deletedInlineContentStyleExtended;
         }
       }
@@ -70,7 +71,7 @@ export const createInlineChangedDecoration = ({
     diffId,
     isActive
   }))];
-  if (showIndicators && doc && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (showIndicators && doc && isExtendedEnabled(diffType)) {
     decorations.push(...createInlineIndicatorAnchorWidgets({
       doc,
       from: change.fromB,

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

@@ -1,5 +1,5 @@
 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';
@@ -20,14 +20,22 @@ export const createNodeChangedDecorationWidget = ({
   activeIndexPos,
   // This is false by default as this is generally used to show deleted content
   isInserted = false,
-  showIndicators = false
+  showIndicators = false,
+  // When true, render the deleted content *after* (below) the new content instead of
+  // before it. Used for `smart` node-level changes so the deleted node appears beneath
+  // its replacement (gray + strikethrough).
+  placeBelow = false,
+  diffType
 }) => {
   var _slice$content, _slice$content2, _slice$content2$first, _slice$content3, _slice$content3$first, _slice$content$firstC;
   const slice = doc.slice(change.fromA, change.toA);
   const shouldSkipDeletedEmptyParagraphDecoration = !isInserted && (slice === null || slice === void 0 ? void 0 : (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.childCount) === 1 && (slice === null || slice === void 0 ? void 0 : (_slice$content2 = slice.content) === null || _slice$content2 === void 0 ? void 0 : (_slice$content2$first = _slice$content2.firstChild) === null || _slice$content2$first === void 0 ? void 0 : _slice$content2$first.type.name) === 'paragraph' && (slice === null || slice === void 0 ? void 0 : (_slice$content3 = slice.content) === null || _slice$content3 === void 0 ? void 0 : (_slice$content3$first = _slice$content3.firstChild) === null || _slice$content3$first === void 0 ? void 0 : _slice$content3$first.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.
-  const 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).
+  const anchorPos = placeBelow ? change.toB : change.fromB;
+  const safeInsertPos = findSafeInsertPos(newDoc, anchorPos, slice);
   const isActive = activeIndexPos && safeInsertPos === activeIndexPos.from && safeInsertPos === activeIndexPos.to;
   if (slice.content.content.length === 0 || shouldSkipDeletedEmptyParagraphDecoration) {
     return [];
@@ -44,7 +52,8 @@ export const createNodeChangedDecorationWidget = ({
       newDoc,
       nodeViewSerializer,
       colorScheme,
-      isInserted
+      isInserted,
+      diffType
     });
   }
   const serializer = nodeViewSerializer;
@@ -57,7 +66,7 @@ export const createNodeChangedDecorationWidget = ({
   // 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.
   let constrainMediaObserver;
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (isExtendedEnabled(diffType)) {
     constrainMediaObserver = new MutationObserver(() => {
       const richMediaItems = dom.querySelectorAll('.rich-media-item');
       richMediaItems.forEach(el => {
@@ -94,14 +103,14 @@ export const createNodeChangedDecorationWidget = ({
           if (childNodeView) {
             const lineBreak = document.createElement('br');
             dom.append(lineBreak);
-            const wrapper = createContentWrapper(colorScheme, isActive, isInserted);
+            const wrapper = createContentWrapper(colorScheme, isActive, isInserted, diffType);
             wrapper.append(childNodeView);
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
             const serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              const wrapper = createContentWrapper(colorScheme, isActive, isInserted);
+              const wrapper = createContentWrapper(colorScheme, isActive, isInserted, diffType);
               wrapper.append(serializedChild);
               dom.append(wrapper);
             }
@@ -142,7 +151,7 @@ export const createNodeChangedDecorationWidget = ({
     const nodeView = serializer.tryCreateNodeView(node);
     if (nodeView) {
       if (node.isInline) {
-        const wrapper = createContentWrapper(colorScheme, isActive, isInserted);
+        const wrapper = createContentWrapper(colorScheme, isActive, isInserted, diffType);
         wrapper.append(nodeView);
         dom.append(wrapper);
       } else {
@@ -154,7 +163,8 @@ export const createNodeChangedDecorationWidget = ({
           colorScheme,
           intl,
           isActive,
-          isInserted
+          isInserted,
+          diffType
         });
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
@@ -168,11 +178,12 @@ export const createNodeChangedDecorationWidget = ({
             node: fallbackNode,
             colorScheme,
             isActive,
-            isInserted
+            isInserted,
+            diffType
           });
           dom.append(injectedNode);
         } else {
-          const wrapper = createContentWrapper(colorScheme, isActive, isInserted);
+          const wrapper = createContentWrapper(colorScheme, isActive, isInserted, diffType);
           wrapper.append(fallbackNode);
           dom.append(wrapper);
         }
@@ -180,7 +191,7 @@ export const createNodeChangedDecorationWidget = ({
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
-  if (showIndicators && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (showIndicators && isExtendedEnabled(diffType)) {
     const leftAnchor = createLeftAnchorWidget({
       doc: newDoc,
       from: safeInsertPos,
@@ -198,8 +209,11 @@ export const createNodeChangedDecorationWidget = ({
       decorationType: 'widget',
       diffId,
       isActive,
-      ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-        side: -1
+      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: () => {
@@ -223,7 +237,7 @@ export const createNodeChangedDecorationWidget = ({
   const isSingleBlock = slice.content.childCount === 1 && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.isBlock);
   const resolvedPos = newDoc.resolve(change.fromB);
   const 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)) {
     const emptyWidgetSpan = document.createElement('span');
     emptyWidgetSpan.style.display = 'block';
     // Use a design token for the margin to keep spacing consistent with the design system
@@ -231,7 +245,8 @@ export const createNodeChangedDecorationWidget = ({
     const widget = Decoration.widget(safeInsertPos, emptyWidgetSpan, {
       ...buildDiffDecorationSpec({
         decorationType: 'widget',
-        diffId: crypto.randomUUID()
+        diffId: crypto.randomUUID(),
+        diffType
       })
     });
     decorations.push(widget);

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

@@ -1,4 +1,5 @@
-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.
@@ -39,9 +40,10 @@ export const buildAnchorDecorationKey = ({
 export const buildDiffDecorationKey = ({
   decorationKeyPrefix,
   isActive,
-  diffId
+  diffId,
+  diffType
 }) => {
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (isExtendedEnabled(diffType)) {
     return `${decorationKeyPrefix}-${diffId}-${isActive ? 'active' : 'inactive'}`;
   }
   return isActive !== undefined ? `${decorationKeyPrefix}-${isActive ? 'active' : 'inactive'}` : decorationKeyPrefix;
@@ -51,7 +53,8 @@ export const buildDiffDecorationSpec = ({
   diffId,
   isActive,
   nodeName,
-  side
+  side,
+  diffType
 }) => ({
   decorationFamily: DecorationFamily.diff,
   decorationType,
@@ -59,7 +62,8 @@ export const buildDiffDecorationSpec = ({
   key: buildDiffDecorationKey({
     decorationKeyPrefix: DiffDecorationKey[decorationType],
     diffId,
-    isActive
+    isActive,
+    diffType
   }),
   ...(nodeName ? {
     nodeName

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

@@ -2,6 +2,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';
 const lozengeStyle = convertToInlineCss({
@@ -52,8 +53,8 @@ const lozengeStyleActiveTraditional = convertToInlineCss({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
-const getChangedContentStyle = (colorScheme, isActive = false, isInserted = false) => {
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
+const getChangedContentStyle = (colorScheme, isActive = false, isInserted = false, diffType) => {
+  if (isExtendedEnabled(diffType) && isInserted) {
     if (colorScheme === 'traditional') {
       return isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
     }
@@ -67,9 +68,9 @@ const getChangedContentStyle = (colorScheme, isActive = false, isInserted = fals
   }
   return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
 };
-const getChangedNodeStyle = (nodeName, colorScheme, isInserted = false, isActive = false) => {
+const getChangedNodeStyle = (nodeName, colorScheme, isInserted = false, isActive = false, diffType) => {
   const isTraditional = colorScheme === 'traditional';
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
+  if (isExtendedEnabled(diffType) && isInserted) {
     if (isMultiContainerBlockNode(nodeName)) {
       return editingContentStyleInBlockExtended;
     }
@@ -217,12 +218,13 @@ const applyStylesToElement = ({
   targetNode,
   colorScheme,
   isActive,
-  isInserted
+  isInserted,
+  diffType
 }) => {
   const currentStyle = element.getAttribute('style') || '';
-  const contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted);
+  const contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, diffType);
   const targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
-  const nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive) || '';
+  const nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType) || '';
   element.setAttribute('style', `${currentStyle}${contentStyle}${nodeSpecificStyle}`);
 };
 const applyMultiContainerLikeStyles = ({
@@ -230,11 +232,12 @@ const applyMultiContainerLikeStyles = ({
   targetNode,
   colorScheme,
   isActive,
-  isInserted
+  isInserted,
+  diffType
 }) => {
   const currentStyle = element.getAttribute('style') || '';
   const targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
-  const nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive) || '';
+  const nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType) || '';
   if (targetNode.type.name === 'decisionList') {
     element.querySelectorAll('li').forEach(listItem => {
       const currentListItemStyle = listItem.getAttribute('style') || '';
@@ -258,10 +261,15 @@ const applyTextLikeBlockNodeStyles = ({
   targetNode,
   colorScheme,
   isActive,
-  isInserted
+  isInserted,
+  diffType
 }) => {
-  getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
-  const contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted);
+  const currentStyle = element.getAttribute('style') || '';
+  const nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive, diffType) || '';
+  if (nodeSpecificStyle) {
+    element.setAttribute('style', `${currentStyle}${nodeSpecificStyle}`);
+  }
+  const contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, diffType);
   const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
   const textNodesToWrap = [];
   let currentNode = walker.nextNode();
@@ -287,17 +295,18 @@ const createBlockNodeContentWrapper = ({
   targetNode,
   colorScheme,
   isActive,
-  isInserted
+  isInserted,
+  diffType
 }) => {
   const contentWrapper = document.createElement('div');
   const targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
-  const nodeStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive);
+  const 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.
-  const shouldSkipContentStyle = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted && nodeStyle !== undefined;
-  const contentStyle = shouldSkipContentStyle ? '' : getChangedContentStyle(colorScheme, isActive, isInserted);
+  const shouldSkipContentStyle = isExtendedEnabled(diffType) && isInserted && nodeStyle !== undefined;
+  const contentStyle = shouldSkipContentStyle ? '' : getChangedContentStyle(colorScheme, isActive, isInserted, diffType);
   contentWrapper.setAttribute('style', `${contentStyle}${nodeStyle || ''}`);
   contentWrapper.append(nodeView);
   return contentWrapper;
@@ -409,11 +418,12 @@ const wrapBlockNode = ({
   colorScheme,
   intl,
   isActive = false,
-  isInserted = false
+  isInserted = false,
+  diffType
 }) => {
   const blockWrapper = createBlockNodeWrapper();
   const 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)) {
     const lozenge = createRemovedLozenge(intl, isActive, colorScheme);
     if (handleEmbedCardWithLozenge({
       dom,
@@ -442,7 +452,8 @@ const wrapBlockNode = ({
     targetNode,
     colorScheme,
     isActive,
-    isInserted
+    isInserted,
+    diffType
   });
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
@@ -473,9 +484,10 @@ export const wrapBlockNodeView = ({
   colorScheme,
   intl,
   isActive = false,
-  isInserted = false
+  isInserted = false,
+  diffType
 }) => {
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (isExtendedEnabled(diffType)) {
     if (nodeView instanceof HTMLElement) {
       if (isInserted && isMultiContainerBlockNode(targetNode.type.name)) {
         applyMultiContainerLikeStyles({
@@ -483,7 +495,8 @@ export const wrapBlockNodeView = ({
           targetNode,
           colorScheme,
           isActive,
-          isInserted
+          isInserted,
+          diffType
         });
         dom.append(nodeView);
         return;
@@ -494,7 +507,8 @@ export const wrapBlockNodeView = ({
           targetNode,
           colorScheme,
           isActive,
-          isInserted
+          isInserted,
+          diffType
         });
         dom.append(nodeView);
         return;
@@ -516,7 +530,8 @@ export const wrapBlockNodeView = ({
       colorScheme,
       intl,
       isActive,
-      isInserted
+      isInserted,
+      diffType
     });
     return;
   } else {
@@ -527,7 +542,8 @@ export const wrapBlockNodeView = ({
         targetNode,
         colorScheme,
         isActive,
-        isInserted
+        isInserted,
+        diffType
       });
       dom.append(nodeView);
     } else {
@@ -538,7 +554,8 @@ export const wrapBlockNodeView = ({
         colorScheme,
         intl,
         isActive,
-        isInserted
+        isInserted,
+        diffType
       });
     }
   }
@@ -558,11 +575,11 @@ const getInsertedContentStyle = (colorScheme, isActive = false) => {
   }
   return editingStyleExtended;
 };
-const getDeletedContentStyle = (colorScheme, isActive = false) => {
+const getDeletedContentStyle = (colorScheme, isActive = false, diffType) => {
   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;
@@ -577,10 +594,11 @@ export const injectInnerWrapper = ({
   node,
   colorScheme,
   isActive,
-  isInserted
+  isInserted,
+  diffType
 }) => {
   const 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));
   [...node.childNodes].forEach(child => {
     const removedChild = node.removeChild(child);
     wrapper.append(removedChild);
@@ -592,23 +610,23 @@ export const injectInnerWrapper = ({
 /**
  * Creates a styled span wrapper for inline content within a change decoration.
  */
-export const createContentWrapper = (colorScheme, isActive = false, isInserted = false) => {
+export const createContentWrapper = (colorScheme, isActive = false, isInserted = false, diffType) => {
   const wrapper = document.createElement('span');
   const baseStyle = convertToInlineCss({
     position: 'relative',
     width: 'fit-content'
   });
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+  if (isExtendedEnabled(diffType)) {
     if (isInserted) {
       wrapper.setAttribute('style', `${baseStyle}${getInsertedContentStyle(colorScheme, isActive)}`);
     } else {
-      wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive)}`);
+      wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive, diffType)}`);
       const strikethrough = document.createElement('span');
       strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
       wrapper.append(strikethrough);
     }
   } else {
-    wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive)}`);
+    wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive, diffType)}`);
     const strikethrough = document.createElement('span');
     strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
     wrapper.append(strikethrough);

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

@@ -1,5 +1,5 @@
-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.).
@@ -60,24 +60,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 const getScrollableDecorations = (set, doc) => {
+export const getScrollableDecorations = (set, doc, diffType) => {
   if (!set) {
     return [];
   }
   const isBlockDecoration = decoration => {
     var _decoration$spec$key$, _decoration$spec, _decoration$spec$key;
-    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 ? void 0 : (_decoration$spec$key = _decoration$spec.key) === null || _decoration$spec$key === void 0 ? void 0 : _decoration$spec$key.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 ? void 0 : (_decoration$spec$key = _decoration$spec.key) === null || _decoration$spec$key === void 0 ? void 0 : _decoration$spec$key.startsWith(DiffDecorationKey.block)) !== null && _decoration$spec$key$ !== void 0 ? _decoration$spec$key$ : false;
   };
   const isInlineDecoration = decoration => {
     var _decoration$spec$key$2, _decoration$spec2, _decoration$spec2$key;
-    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 ? void 0 : (_decoration$spec2$key = _decoration$spec2.key) === null || _decoration$spec2$key === void 0 ? void 0 : _decoration$spec2$key.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 ? void 0 : (_decoration$spec2$key = _decoration$spec2.key) === null || _decoration$spec2$key === void 0 ? void 0 : _decoration$spec2$key.startsWith(DiffDecorationKey.inline)) !== null && _decoration$spec$key$2 !== void 0 ? _decoration$spec$key$2 : false;
   };
   const isWidgetDecoration = decoration => {
     var _decoration$spec$key$3, _decoration$spec3, _decoration$spec3$key;
-    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 ? void 0 : (_decoration$spec3$key = _decoration$spec3.key) === null || _decoration$spec3$key === void 0 ? void 0 : _decoration$spec3$key.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 ? void 0 : (_decoration$spec3$key = _decoration$spec3.key) === null || _decoration$spec3$key === void 0 ? void 0 : _decoration$spec3$key.startsWith(DiffDecorationKey.widget)) !== null && _decoration$spec$key$3 !== void 0 ? _decoration$spec$key$3 : false;
   };
   const seenBlockKeys = new Set();
-  const allDecorations = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? set.find(undefined, undefined, isDiffDecorationSpec) : set.find(undefined, undefined, spec => specHasDiffKeyPrefix(spec, DiffDecorationKey.inline) || specHasDiffKeyPrefix(spec, DiffDecorationKey.widget) || specHasDiffKeyPrefix(spec, DiffDecorationKey.block));
+  const allDecorations = isExtendedEnabled(diffType) ? set.find(undefined, undefined, isDiffDecorationSpec) : set.find(undefined, undefined, spec => specHasDiffKeyPrefix(spec, DiffDecorationKey.inline) || specHasDiffKeyPrefix(spec, DiffDecorationKey.widget) || specHasDiffKeyPrefix(spec, DiffDecorationKey.block));
 
   // First pass: filter out listItem blocks and deduplicates blocks
   const filtered = allDecorations.filter(dec => {

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

@@ -0,0 +1,12 @@
+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 const isExtendedEnabled = diffType => expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || diffType === 'smart' && fg('platform_editor_ai_smart_diff');

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

@@ -3,10 +3,10 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { calculateDiffDecorations } from './calculateDiff/calculateDiffDecorations';
 import { enforceCustomStepRegisters } from './enforceCustomStepRegisters';
 import { getScrollableDecorations } from './getScrollableDecorations';
+import { isExtendedEnabled } from './isExtendedEnabled';
 import { NodeViewSerializer } from './NodeViewSerializer';
 import { scrollToActiveDecoration, scrollToFirstDecoration } from './scrollToDiff';
 export const showDiffPluginKey = new PluginKey('showDiffPlugin');
@@ -28,7 +28,7 @@ export const createPlugin = (config, getIntl, api) => {
           originalDoc: undefined,
           decorations: DecorationSet.empty,
           isDisplayingChanges: false,
-          ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+          ...(isExtendedEnabled() ? {
             isInverted: false,
             diffType: 'inline',
             hideDeletedDiffs: false,
@@ -42,7 +42,7 @@ export const createPlugin = (config, getIntl, api) => {
         let newPluginState = currentPluginState;
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
-            var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4;
+            var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8;
             // Update the plugin state with the new metadata
             newPluginState = {
               ...currentPluginState,
@@ -62,16 +62,18 @@ export const createPlugin = (config, getIntl, api) => {
               intl: getIntl(),
               activeIndexPos: newPluginState.activeIndexPos,
               api,
-              ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-                isInverted: (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.isInverted,
-                diffType: (_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.diffType,
-                hideDeletedDiffs: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.hideDeletedDiffs,
-                showIndicators: (_newPluginState4 = newPluginState) === null || _newPluginState4 === void 0 ? void 0 : _newPluginState4.showIndicators
+              ...(isExtendedEnabled((_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.diffType) ? {
+                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
               } : {})
             });
             // Update the decorations and their ids
             newPluginState.decorations = decorations;
-            if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+            if (isExtendedEnabled((_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.diffType)) {
               newPluginState.diffDescriptors = diffDescriptors;
             }
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
@@ -85,7 +87,7 @@ export const createPlugin = (config, getIntl, api) => {
                * Reset isInverted & diffType state when hiding diffs
                * Otherwise this should persist for the diff-showing session
                */
-              ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+              ...(isExtendedEnabled(currentPluginState.diffType) ? {
                 isInverted: false,
                 diffType: 'inline',
                 hideDeletedDiffs: false,
@@ -93,8 +95,9 @@ export const createPlugin = (config, getIntl, api) => {
               } : {})
             };
           } 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;
             // Update the active index in plugin state and recalculate decorations
-            const decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc);
+            const decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.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).
@@ -132,15 +135,17 @@ export const createPlugin = (config, getIntl, api) => {
                 intl: getIntl(),
                 activeIndexPos: newPluginState.activeIndexPos,
                 api,
-                ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+                ...(isExtendedEnabled(newPluginState.diffType) ? {
                   isInverted: newPluginState.isInverted,
                   diffType: newPluginState.diffType,
                   hideDeletedDiffs: newPluginState.hideDeletedDiffs,
-                  showIndicators: newPluginState.showIndicators
+                  showIndicators: newPluginState.showIndicators,
+                  smartThresholds: newPluginState.smartThresholds,
+                  deletedDiffPlacement: newPluginState.deletedDiffPlacement
                 } : {})
               });
               newPluginState.decorations = updatedDecorations;
-              if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+              if (isExtendedEnabled(newPluginState.diffType)) {
                 newPluginState.diffDescriptors = updatedDiffDescriptors;
               }
             }
@@ -176,7 +181,7 @@ export const createPlugin = (config, getIntl, api) => {
           const pluginState = showDiffPluginKey.getState(view.state);
 
           // Scroll to the first decoration when scrollIntoView was requested
-          if (pluginState !== null && pluginState !== void 0 && pluginState.scrollIntoView && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+          if (pluginState !== null && pluginState !== void 0 && pluginState.scrollIntoView && isExtendedEnabled(pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffType)) {
             var _cancelPendingScrollT;
             (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 ? void 0 : _cancelPendingScrollT();
             cancelPendingScrollToDecoration = scrollToFirstDecoration(view, pluginState.decorations);
@@ -193,7 +198,7 @@ export const createPlugin = (config, getIntl, api) => {
           if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && activeIndexChanged) {
             var _cancelPendingScrollT2, _api$expand, _api$expand$commands;
             (_cancelPendingScrollT2 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT2 === void 0 ? void 0 : _cancelPendingScrollT2();
-            const scrollableDecorations = getScrollableDecorations(pluginState.decorations, view.state.doc);
+            const scrollableDecorations = getScrollableDecorations(pluginState.decorations, view.state.doc, pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffType);
             const activeDecoration = scrollableDecorations[pluginState.activeIndex];
             if (activeDecoration && api !== null && api !== void 0 && (_api$expand = api.expand) !== null && _api$expand !== void 0 && (_api$expand$commands = _api$expand.commands) !== null && _api$expand$commands !== void 0 && _api$expand$commands.toggleExpandRange) {
               api === null || api === void 0 ? void 0 : api.core.actions.execute(api.expand.commands.toggleExpandRange(activeDecoration.from, activeDecoration.to, true));