@atlaskit/editor-plugin-show-diff 10.1.10 → 10.1.11

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

@@ -1,9 +1,10 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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 { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlockExtended, editingStyleExtended, editingStyleActiveExtended, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
-import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
+import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlockExtended, editingStyleExtended, editingStyleActiveExtended, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
+import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
 var lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -545,4 +546,80 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref0) {
       });
     }
   }
+};
+var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colorScheme === 'traditional' && isActive) {
+    return deletedTraditionalContentStyleUnboundedActive;
+  }
+  return colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
+};
+var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colorScheme === 'traditional') {
+    return isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+  }
+  if (isActive) {
+    return editingStyleActiveExtended;
+  }
+  return editingStyleExtended;
+};
+var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colorScheme === 'traditional') {
+    return getDeletedTraditionalInlineStyle(isActive);
+  }
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    return (isActive ? deletedContentStyleActive : deletedContentStyleNew) + deletedInlineContentStyleExtended;
+  }
+  return isActive ? deletedContentStyleActive : deletedContentStyleNew;
+};
+
+/**
+ * Injects a styled inner wrapper span around the children of a block node element.
+ * CSS backgrounds don't work when applied to a wrapper around a paragraph, so
+ * the wrapper needs to be injected inside the node around the child content.
+ */
+export var injectInnerWrapper = function injectInnerWrapper(_ref1) {
+  var node = _ref1.node,
+    colorScheme = _ref1.colorScheme,
+    isActive = _ref1.isActive,
+    isInserted = _ref1.isInserted;
+  var wrapper = document.createElement('span');
+  wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive));
+  _toConsumableArray(node.childNodes).forEach(function (child) {
+    var removedChild = node.removeChild(child);
+    wrapper.append(removedChild);
+  });
+  node.appendChild(wrapper);
+  return node;
+};
+
+/**
+ * Creates a styled span wrapper for inline content within a change decoration.
+ */
+export var createContentWrapper = function createContentWrapper(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var wrapper = document.createElement('span');
+  var baseStyle = convertToInlineCss({
+    position: 'relative',
+    width: 'fit-content'
+  });
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (isInserted) {
+      wrapper.setAttribute('style', "".concat(baseStyle).concat(getInsertedContentStyle(colorScheme, isActive)));
+    } else {
+      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
+      var strikethrough = document.createElement('span');
+      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
+      wrapper.append(strikethrough);
+    }
+  } else {
+    wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
+    var _strikethrough = document.createElement('span');
+    _strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
+    wrapper.append(_strikethrough);
+  }
+  return wrapper;
 };

package/dist/types/pm-plugins/calculateDiff/diffBySteps.d.ts

@@ -1,4 +1,24 @@
 import { type Change } from 'prosemirror-changeset';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
+type StepChanges = {
+    changes: Change[];
+    isGranular: boolean;
+};
 export declare const diffBySteps: (originalDoc: PMNode, steps: Step[]) => Change[];
+/**
+ * A fork of `diffBySteps` that returns changes grouped per step, rather than as a flat list.
+ *
+ * Why forked rather than refactoring `diffBySteps`:
+ * - `diffBySteps` returns a flat `Change[]` and is consumed by the existing decoration path.
+ *   Changing its return shape would require threading per-step metadata through all callers,
+ *   adding complexity to a stable code path.
+ * - The per-step grouping is only needed for the `platform_editor_diff_granular_extended` gate,
+ *   where we need to know how many granular changes a single step produced in order to decide
+ *   whether to suppress deleted decorations (threshold: > 3 granular changes per step).
+ * - Keeping the two functions separate means each has a clear, focused contract and neither
+ *   accumulates the other's concerns. Shared logic (mapping helpers, `mergeOverlappingByNewDocRange`,
+ *   `shouldCheckGranularDiff`, etc.) is already extracted and reused by both.
+ */
+export declare const getStepChanges: (originalDoc: PMNode, steps: Step[]) => StepChanges[];
+export {};

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

@@ -0,0 +1,36 @@
+import type { Change } from 'prosemirror-changeset';
+import type { IntlShape } from 'react-intl';
+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';
+/**
+ * Creates a single block widget that renders a reference text block content
+ * beneath a granular diff set, for reference when deleted content is hidden.
+ *
+ * Since granular diffing only applies to singular isTextBlock=true nodes, this
+ * widget always renders exactly one block node and does not need the slice/fragment
+ * complexity of createNodeChangedDecorationWidget.
+ *
+ * Resolves which doc and positions to render based on isInverted:
+ * - !isInverted: renders originalDoc at A-side positions (what was there before)
+ * - isInverted: renders newDoc at B-side positions (the current/new content)
+ *
+ * The widget is always inserted at the B-side block boundary in newDoc since
+ * ProseMirror decorations are always anchored against the live (new) document.
+ */
+export declare const createGranularBlockReferenceWidget: ({ change, originalDoc, newDoc, isInverted, nodeViewSerializer, colorScheme, intl, activeIndexPos, diffId, showIndicators, }: {
+    activeIndexPos?: {
+        from: number;
+        to: number;
+    };
+    change: Change;
+    colorScheme?: ColorScheme;
+    diffId: string;
+    intl: IntlShape;
+    isInverted: boolean;
+    newDoc: PMNode;
+    nodeViewSerializer: NodeViewSerializer;
+    originalDoc: PMNode;
+    showIndicators?: boolean;
+}) => Decoration[];

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

@@ -15,3 +15,18 @@ export declare const wrapBlockNodeView: ({ dom, nodeView, targetNode, colorSchem
     nodeView: Node;
     targetNode: PMNode;
 }) => void;
+/**
+ * Injects a styled inner wrapper span around the children of a block node element.
+ * CSS backgrounds don't work when applied to a wrapper around a paragraph, so
+ * the wrapper needs to be injected inside the node around the child content.
+ */
+export declare const injectInnerWrapper: ({ node, colorScheme, isActive, isInserted, }: {
+    colorScheme?: ColorScheme;
+    isActive?: boolean;
+    isInserted?: boolean;
+    node: HTMLElement;
+}) => HTMLElement;
+/**
+ * Creates a styled span wrapper for inline content within a change decoration.
+ */
+export declare const createContentWrapper: (colorScheme?: ColorScheme, isActive?: boolean, isInserted?: boolean) => HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "10.1.10",
+	"version": "10.1.11",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,7 +28,7 @@
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-tables": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
-		"@atlaskit/tmp-editor-statsig": "^114.4.0",
+		"@atlaskit/tmp-editor-statsig": "^114.5.0",
 		"@atlaskit/tokens": "^15.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",