@atlaskit/editor-plugin-show-diff 6.0.1 → 6.1.0

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

@@ -1,8 +1,8 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { deletedBlockOutline, deletedBlockOutlineRounded, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedStyleQuoteNodeWithLozenge } from '../colorSchemes/standard';
-import { deletedTraditionalBlockOutline, deletedTraditionalBlockOutlineRounded, deletedTraditionalContentStyle, deletedTraditionalStyleQuoteNode } from '../colorSchemes/traditional';
+import { deletedBlockOutline, deletedBlockOutlineRounded, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedStyleQuoteNodeWithLozenge, editingStyle, editingStyleActive, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
+import { deletedTraditionalBlockOutline, deletedTraditionalBlockOutlineRounded, deletedTraditionalContentStyle, deletedTraditionalStyleQuoteNode, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
 var lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -19,8 +19,15 @@ var lozengeStyle = convertToInlineCss({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
-var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
+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) {
+    if (colorScheme === 'traditional') {
+      return isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+    }
+    return isActive ? editingStyleActive : editingStyle;
+  }
   if (colorScheme === 'traditional') {
     return deletedTraditionalContentStyle;
   }
@@ -29,8 +36,18 @@ var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   }
   return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
 };
-var getDeletedStyleNode = function getDeletedStyleNode(nodeName, colorScheme) {
+var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
+  var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var isTraditional = colorScheme === 'traditional';
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
+    if (shouldApplyStylesDirectly(nodeName)) {
+      return undefined;
+    }
+    if (isTraditional) {
+      return traditionalStyleNode;
+    }
+    return editingStyleNode;
+  }
   switch (nodeName) {
     case 'blockquote':
       return isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge;
@@ -51,7 +68,6 @@ var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
     case 'mediaSingle':
     case 'panel':
     case 'decisionList':
-      return true;
     case 'embedCard':
     case 'blockquote':
       return true;
@@ -63,7 +79,6 @@ var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeCla
   switch (nodeName) {
     case 'mediaSingle':
     case 'embedCard':
-      return true;
     case 'blockquote':
       return true;
     default:
@@ -78,6 +93,17 @@ var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeCla
 var shouldApplyStylesDirectly = function shouldApplyStylesDirectly(nodeName) {
   return nodeName === 'heading';
 };
+var applyCellOverlayStyles = function applyCellOverlayStyles(_ref) {
+  var element = _ref.element,
+    colorScheme = _ref.colorScheme,
+    isInserted = _ref.isInserted;
+  element.querySelectorAll('td, th').forEach(function (cell) {
+    var overlay = document.createElement('span');
+    var overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
+    overlay.setAttribute('style', overlayStyle);
+    cell.appendChild(overlay);
+  });
+};
 
 /**
  * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
@@ -120,26 +146,28 @@ var createBlockNodeWrapper = function createBlockNodeWrapper() {
 /**
  * Applies styles directly to an HTML element by merging with existing styles
  */
-var applyStylesToElement = function applyStylesToElement(_ref) {
-  var element = _ref.element,
-    targetNode = _ref.targetNode,
-    colorScheme = _ref.colorScheme;
+var applyStylesToElement = function applyStylesToElement(_ref2) {
+  var element = _ref2.element,
+    targetNode = _ref2.targetNode,
+    colorScheme = _ref2.colorScheme,
+    isInserted = _ref2.isInserted;
   var currentStyle = element.getAttribute('style') || '';
-  var deletedContentStyle = getDeletedContentStyle(colorScheme);
-  var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colorScheme) || '';
-  element.setAttribute('style', "".concat(currentStyle).concat(deletedContentStyle).concat(nodeSpecificStyle));
+  var contentStyle = getChangedContentStyle(colorScheme, false, isInserted);
+  var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted) || '';
+  element.setAttribute('style', "".concat(currentStyle).concat(contentStyle).concat(nodeSpecificStyle));
 };
 
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref2) {
-  var nodeView = _ref2.nodeView,
-    targetNode = _ref2.targetNode,
-    colorScheme = _ref2.colorScheme;
+var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref3) {
+  var nodeView = _ref3.nodeView,
+    targetNode = _ref3.targetNode,
+    colorScheme = _ref3.colorScheme,
+    isInserted = _ref3.isInserted;
   var contentWrapper = document.createElement('div');
-  var nodeStyle = getDeletedStyleNode(targetNode.type.name, colorScheme);
-  contentWrapper.setAttribute('style', "".concat(getDeletedContentStyle(colorScheme)).concat(nodeStyle || ''));
+  var nodeStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted);
+  contentWrapper.setAttribute('style', "".concat(getChangedContentStyle(colorScheme, false, isInserted)).concat(nodeStyle || ''));
   contentWrapper.append(nodeView);
   return contentWrapper;
 };
@@ -150,12 +178,12 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref2
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref3) {
-  var dom = _ref3.dom,
-    nodeView = _ref3.nodeView,
-    targetNode = _ref3.targetNode,
-    lozenge = _ref3.lozenge,
-    colorScheme = _ref3.colorScheme;
+var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref4) {
+  var dom = _ref4.dom,
+    nodeView = _ref4.nodeView,
+    targetNode = _ref4.targetNode,
+    lozenge = _ref4.lozenge,
+    colorScheme = _ref4.colorScheme;
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -187,12 +215,12 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref3) {
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref4) {
-  var dom = _ref4.dom,
-    nodeView = _ref4.nodeView,
-    targetNode = _ref4.targetNode,
-    lozenge = _ref4.lozenge,
-    colorScheme = _ref4.colorScheme;
+var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref5) {
+  var dom = _ref5.dom,
+    nodeView = _ref5.nodeView,
+    targetNode = _ref5.targetNode,
+    lozenge = _ref5.lozenge,
+    colorScheme = _ref5.colorScheme;
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -221,14 +249,16 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref4)
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-var wrapBlockNode = function wrapBlockNode(_ref5) {
-  var dom = _ref5.dom,
-    nodeView = _ref5.nodeView,
-    targetNode = _ref5.targetNode,
-    colorScheme = _ref5.colorScheme,
-    intl = _ref5.intl;
+var wrapBlockNode = function wrapBlockNode(_ref6) {
+  var dom = _ref6.dom,
+    nodeView = _ref6.nodeView,
+    targetNode = _ref6.targetNode,
+    colorScheme = _ref6.colorScheme,
+    intl = _ref6.intl,
+    _ref6$isInserted = _ref6.isInserted,
+    isInserted = _ref6$isInserted === void 0 ? false : _ref6$isInserted;
   var blockWrapper = createBlockNodeWrapper();
-  if (shouldShowRemovedLozenge(targetNode.type.name)) {
+  if (shouldShowRemovedLozenge(targetNode.type.name) && (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isInserted)) {
     var lozenge = createRemovedLozenge(intl);
     if (handleEmbedCardWithLozenge({
       dom: dom,
@@ -253,7 +283,8 @@ var wrapBlockNode = function wrapBlockNode(_ref5) {
   var contentWrapper = createBlockNodeContentWrapper({
     nodeView: nodeView,
     targetNode: targetNode,
-    colorScheme: colorScheme
+    colorScheme: colorScheme,
+    isInserted: isInserted
   });
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
@@ -268,18 +299,28 @@ var wrapBlockNode = function wrapBlockNode(_ref5) {
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-export var wrapBlockNodeView = function wrapBlockNodeView(_ref6) {
-  var dom = _ref6.dom,
-    nodeView = _ref6.nodeView,
-    targetNode = _ref6.targetNode,
-    colorScheme = _ref6.colorScheme,
-    intl = _ref6.intl;
+export var wrapBlockNodeView = function wrapBlockNodeView(_ref7) {
+  var dom = _ref7.dom,
+    nodeView = _ref7.nodeView,
+    targetNode = _ref7.targetNode,
+    colorScheme = _ref7.colorScheme,
+    intl = _ref7.intl,
+    _ref7$isInserted = _ref7.isInserted,
+    isInserted = _ref7$isInserted === void 0 ? false : _ref7$isInserted;
   if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
     // Apply deleted styles directly to preserve natural block-level margins
     applyStylesToElement({
       element: nodeView,
       targetNode: targetNode,
-      colorScheme: colorScheme
+      colorScheme: colorScheme,
+      isInserted: isInserted
+    });
+    dom.append(nodeView);
+  } else if (targetNode.type.name === 'table' && nodeView instanceof HTMLElement && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    applyCellOverlayStyles({
+      element: nodeView,
+      colorScheme: colorScheme,
+      isInserted: isInserted
     });
     dom.append(nodeView);
   } else {
@@ -289,7 +330,8 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref6) {
       nodeView: nodeView,
       targetNode: targetNode,
       colorScheme: colorScheme,
-      intl: intl
+      intl: intl,
+      isInserted: isInserted
     });
   }
 };

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

@@ -7,6 +7,7 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { calculateDiffDecorations } from './calculateDiffDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
 import { scrollToActiveDecoration } from './scrollToActiveDecoration';
@@ -29,25 +30,28 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
     state: {
       init: function init(_, _state) {
         // We do initial setup after we setup the editor view
-        return {
+        return _objectSpread({
           steps: [],
           originalDoc: undefined,
           decorations: DecorationSet.empty,
           isDisplayingChanges: false
-        };
+        }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+          isInverted: false
+        } : {});
       },
       apply: function apply(tr, currentPluginState, oldState, newState) {
         var meta = tr.getMeta(showDiffPluginKey);
         var newPluginState = currentPluginState;
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
+            var _newPluginState;
             // Update the plugin state with the new metadata
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
               isDisplayingChanges: true,
               activeIndex: undefined
             });
             // Calculate and store decorations in state
-            var decorations = calculateDiffDecorations({
+            var decorations = calculateDiffDecorations(_objectSpread({
               state: newState,
               pluginState: newPluginState,
               nodeViewSerializer: nodeViewSerializer,
@@ -55,7 +59,9 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
               intl: getIntl(),
               activeIndexPos: fg('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined,
               api: api
-            });
+            }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+              isInverted: (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.isInverted
+            } : {}));
             // Update the decorations
             newPluginState.decorations = decorations;
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
@@ -63,7 +69,9 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
               decorations: DecorationSet.empty,
               isDisplayingChanges: false,
               activeIndex: undefined
-            });
+            }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+              isInverted: false
+            } : {});
           } 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') && fg('platform_editor_show_diff_scroll_navigation')) {
             // Update the active index in plugin state and recalculate decorations
             var _decorations = getScrollableDecorations(currentPluginState.decorations);
@@ -92,7 +100,7 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
                 } : undefined
               });
               // Recalculate decorations with the new active index
-              var updatedDecorations = calculateDiffDecorations({
+              var updatedDecorations = calculateDiffDecorations(_objectSpread({
                 state: newState,
                 pluginState: newPluginState,
                 nodeViewSerializer: nodeViewSerializer,
@@ -100,7 +108,9 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
                 intl: getIntl(),
                 activeIndexPos: newPluginState.activeIndexPos,
                 api: api
-              });
+              }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+                isInverted: newPluginState.isInverted
+              } : {}));
               newPluginState.decorations = updatedDecorations;
             }
           } else {

package/dist/types/pm-plugins/decorations/colorSchemes/standard.d.ts

@@ -15,3 +15,5 @@ export declare const editingStyleRuleNode: string;
 export declare const editingStyleNode: string;
 export declare const editingStyleCardBlockNode: string;
 export declare const standardDecorationMarkerVariable: string;
+export declare const addedCellOverlayStyle: string;
+export declare const deletedCellOverlayStyle: string;

package/dist/types/pm-plugins/decorations/colorSchemes/traditional.d.ts

@@ -11,3 +11,5 @@ export declare const traditionalStyleRuleNode: string;
 export declare const traditionalStyleNode: string;
 export declare const traditionalStyleCardBlockNode: string;
 export declare const traditionalDecorationMarkerVariable: string;
+export declare const traditionalAddedCellOverlayStyle: string;
+export declare const deletedTraditionalCellOverlayStyle: string;

package/dist/types/pm-plugins/decorations/createBlockChangedDecoration.d.ts

@@ -6,11 +6,12 @@ import type { ColorScheme } from '../../showDiffPluginType';
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export declare const createBlockChangedDecoration: ({ change, colorScheme, }: {
+export declare const createBlockChangedDecoration: ({ change, colorScheme, isInserted, }: {
     change: {
         from: number;
         name: string;
         to: number;
     };
     colorScheme?: ColorScheme;
+    isInserted: boolean;
 }) => Decoration | undefined;

package/dist/types/pm-plugins/decorations/createChangedRowDecorationWidgets.d.ts

@@ -7,9 +7,10 @@ type SimpleChange = Pick<Change, 'fromA' | 'toA' | 'fromB' | 'deleted'>;
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-export declare const createChangedRowDecorationWidgets: ({ changes, originalDoc, newDoc, nodeViewSerializer, colorScheme, }: {
+export declare const createChangedRowDecorationWidgets: ({ changes, originalDoc, newDoc, nodeViewSerializer, colorScheme, isInserted, }: {
     changes: SimpleChange[];
     colorScheme?: ColorScheme;
+    isInserted?: boolean;
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
     originalDoc: PMNode;

package/dist/types/pm-plugins/decorations/createInlineChangedDecoration.d.ts

@@ -6,11 +6,12 @@ import type { ColorScheme } from '../../showDiffPluginType';
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export declare const createInlineChangedDecoration: ({ change, colorScheme, isActive, }: {
+export declare const createInlineChangedDecoration: ({ change, colorScheme, isActive, isInserted, }: {
     change: {
         fromB: number;
         toB: number;
     };
     colorScheme?: ColorScheme;
     isActive?: boolean;
+    isInserted?: boolean;
 }) => Decoration;

package/dist/types/pm-plugins/decorations/createNodeChangedDecorationWidget.d.ts

@@ -4,12 +4,17 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { ColorScheme } from '../../showDiffPluginType';
 import type { NodeViewSerializer } from '../NodeViewSerializer';
-export declare const createNodeChangedDecorationWidget: ({ change, doc, nodeViewSerializer, colorScheme, newDoc, intl, isActive, }: {
+/**
+ * This function is used to create a decoration widget to show content
+ * that is not in the current document.
+ */
+export declare const createNodeChangedDecorationWidget: ({ change, doc, nodeViewSerializer, colorScheme, newDoc, intl, isActive, isInserted, }: {
     change: Pick<Change, "fromA" | "toA" | "fromB" | "deleted">;
     colorScheme?: ColorScheme;
     doc: PMNode;
     intl: IntlShape;
     isActive?: boolean;
+    isInserted?: boolean;
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
 }) => Decoration[] | undefined;

package/dist/types/pm-plugins/decorations/utils/wrapBlockNodeView.d.ts

@@ -6,10 +6,11 @@ import type { ColorScheme } from '../../../showDiffPluginType';
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-export declare const wrapBlockNodeView: ({ dom, nodeView, targetNode, colorScheme, intl, }: {
+export declare const wrapBlockNodeView: ({ dom, nodeView, targetNode, colorScheme, intl, isInserted, }: {
     colorScheme?: ColorScheme;
     dom: HTMLElement;
     intl: IntlShape;
+    isInserted: boolean;
     nodeView: Node;
     targetNode: PMNode;
 }) => void;

package/dist/types/pm-plugins/main.d.ts

@@ -16,6 +16,7 @@ export type ShowDiffPluginState = {
     };
     decorations: DecorationSet;
     isDisplayingChanges: boolean;
+    isInverted?: boolean;
     originalDoc: PMNode | undefined;
     steps: ProseMirrorStep[];
 };

package/dist/types/showDiffPluginType.d.ts

@@ -19,6 +19,7 @@ export type DiffParams = {
     steps: StepJson[];
 };
 export type PMDiffParams = {
+    isInverted?: boolean;
     originalDoc: Node;
     /**
      * Prosemirror steps. This is used to calculate and show the diff in the editor

package/dist/types-ts4.5/pm-plugins/decorations/colorSchemes/standard.d.ts

@@ -15,3 +15,5 @@ export declare const editingStyleRuleNode: string;
 export declare const editingStyleNode: string;
 export declare const editingStyleCardBlockNode: string;
 export declare const standardDecorationMarkerVariable: string;
+export declare const addedCellOverlayStyle: string;
+export declare const deletedCellOverlayStyle: string;

package/dist/types-ts4.5/pm-plugins/decorations/colorSchemes/traditional.d.ts

@@ -11,3 +11,5 @@ export declare const traditionalStyleRuleNode: string;
 export declare const traditionalStyleNode: string;
 export declare const traditionalStyleCardBlockNode: string;
 export declare const traditionalDecorationMarkerVariable: string;
+export declare const traditionalAddedCellOverlayStyle: string;
+export declare const deletedTraditionalCellOverlayStyle: string;

package/dist/types-ts4.5/pm-plugins/decorations/createBlockChangedDecoration.d.ts

@@ -6,11 +6,12 @@ import type { ColorScheme } from '../../showDiffPluginType';
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export declare const createBlockChangedDecoration: ({ change, colorScheme, }: {
+export declare const createBlockChangedDecoration: ({ change, colorScheme, isInserted, }: {
     change: {
         from: number;
         name: string;
         to: number;
     };
     colorScheme?: ColorScheme;
+    isInserted: boolean;
 }) => Decoration | undefined;

package/dist/types-ts4.5/pm-plugins/decorations/createChangedRowDecorationWidgets.d.ts

@@ -7,9 +7,10 @@ type SimpleChange = Pick<Change, 'fromA' | 'toA' | 'fromB' | 'deleted'>;
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-export declare const createChangedRowDecorationWidgets: ({ changes, originalDoc, newDoc, nodeViewSerializer, colorScheme, }: {
+export declare const createChangedRowDecorationWidgets: ({ changes, originalDoc, newDoc, nodeViewSerializer, colorScheme, isInserted, }: {
     changes: SimpleChange[];
     colorScheme?: ColorScheme;
+    isInserted?: boolean;
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
     originalDoc: PMNode;

package/dist/types-ts4.5/pm-plugins/decorations/createInlineChangedDecoration.d.ts

@@ -6,11 +6,12 @@ import type { ColorScheme } from '../../showDiffPluginType';
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export declare const createInlineChangedDecoration: ({ change, colorScheme, isActive, }: {
+export declare const createInlineChangedDecoration: ({ change, colorScheme, isActive, isInserted, }: {
     change: {
         fromB: number;
         toB: number;
     };
     colorScheme?: ColorScheme;
     isActive?: boolean;
+    isInserted?: boolean;
 }) => Decoration;

package/dist/types-ts4.5/pm-plugins/decorations/createNodeChangedDecorationWidget.d.ts

@@ -4,12 +4,17 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { ColorScheme } from '../../showDiffPluginType';
 import type { NodeViewSerializer } from '../NodeViewSerializer';
-export declare const createNodeChangedDecorationWidget: ({ change, doc, nodeViewSerializer, colorScheme, newDoc, intl, isActive, }: {
+/**
+ * This function is used to create a decoration widget to show content
+ * that is not in the current document.
+ */
+export declare const createNodeChangedDecorationWidget: ({ change, doc, nodeViewSerializer, colorScheme, newDoc, intl, isActive, isInserted, }: {
     change: Pick<Change, "fromA" | "toA" | "fromB" | "deleted">;
     colorScheme?: ColorScheme;
     doc: PMNode;
     intl: IntlShape;
     isActive?: boolean;
+    isInserted?: boolean;
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
 }) => Decoration[] | undefined;

package/dist/types-ts4.5/pm-plugins/decorations/utils/wrapBlockNodeView.d.ts

@@ -6,10 +6,11 @@ import type { ColorScheme } from '../../../showDiffPluginType';
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-export declare const wrapBlockNodeView: ({ dom, nodeView, targetNode, colorScheme, intl, }: {
+export declare const wrapBlockNodeView: ({ dom, nodeView, targetNode, colorScheme, intl, isInserted, }: {
     colorScheme?: ColorScheme;
     dom: HTMLElement;
     intl: IntlShape;
+    isInserted: boolean;
     nodeView: Node;
     targetNode: PMNode;
 }) => void;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -16,6 +16,7 @@ export type ShowDiffPluginState = {
     };
     decorations: DecorationSet;
     isDisplayingChanges: boolean;
+    isInverted?: boolean;
     originalDoc: PMNode | undefined;
     steps: ProseMirrorStep[];
 };

package/dist/types-ts4.5/showDiffPluginType.d.ts

@@ -19,6 +19,7 @@ export type DiffParams = {
     steps: StepJson[];
 };
 export type PMDiffParams = {
+    isInverted?: boolean;
     originalDoc: Node;
     /**
      * Prosemirror steps. This is used to calculate and show the diff in the editor

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "6.0.1",
+	"version": "6.1.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^36.0.0",
+		"@atlaskit/tmp-editor-statsig": "^38.0.0",
 		"@atlaskit/tokens": "^11.1.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
@@ -41,10 +41,11 @@
 		"prosemirror-changeset": "^2.3.1"
 	},
 	"devDependencies": {
+		"@atlaskit/adf-utils": "^19.27.0",
 		"@atlassian/content-reconciliation": "^0.1.3506"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.0.0",
+		"@atlaskit/editor-common": "^112.2.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {