@atlaskit/editor-plugin-show-diff 10.1.8 → 10.1.9

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 10.1.9
+
+### Patch Changes
+
+- [`86eb94526dc1d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/86eb94526dc1d) -
+  [EDITOR-7841] Fix bug where diff widgets missing margin when the diff is the first node of the
+  document
+- Updated dependencies
+
 ## 10.1.8
 
 ### Patch Changes

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

@@ -106,7 +106,7 @@ var createContentWrapper = function createContentWrapper(colorScheme) {
  * that is not in the current document.
  */
 var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref2) {
-  var _slice$content, _slice$content2, _slice$content3;
+  var _slice$content, _slice$content2, _slice$content3, _slice$content$firstC;
   var change = _ref2.change,
     doc = _ref2.doc,
     nodeViewSerializer = _ref2.nodeViewSerializer,
@@ -281,5 +281,32 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
     side: -1
   }))));
+
+  // When a single block node is purely deleted at the very start of the doc (first child),
+  // the deleted widget decoration overlaps with the existing first child's decoration.
+  // To fix this, we insert an additional empty widget span before the deleted content
+  // to push it down and create visual separation.
+  //
+  // Conditions for the placeholder:
+  // 1. isPureDeletion: change.fromB === change.toB — nothing was inserted at the same position.
+  //    Node type changes (e.g. paragraph → heading) have both a deletion and an insertion,
+  //    so fromB !== toB — we skip the placeholder in that case.
+  // 2. isSingleBlock: exactly one block node was deleted (not inline, not multi-block).
+  // 3. safeInsertPos: that it is the first node
+  var isPureDeletion = change.fromB === change.toB;
+  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)) {
+    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()
+    })));
+    decorations.push(widget);
+  }
   return decorations;
 };

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

@@ -102,7 +102,7 @@ export const createNodeChangedDecorationWidget = ({
   isInserted = false,
   showIndicators = false
 }) => {
-  var _slice$content, _slice$content2, _slice$content2$first, _slice$content3, _slice$content3$first;
+  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
@@ -255,5 +255,34 @@ export const createNodeChangedDecorationWidget = ({
       side: -1
     })
   })));
+
+  // When a single block node is purely deleted at the very start of the doc (first child),
+  // the deleted widget decoration overlaps with the existing first child's decoration.
+  // To fix this, we insert an additional empty widget span before the deleted content
+  // to push it down and create visual separation.
+  //
+  // Conditions for the placeholder:
+  // 1. isPureDeletion: change.fromB === change.toB — nothing was inserted at the same position.
+  //    Node type changes (e.g. paragraph → heading) have both a deletion and an insertion,
+  //    so fromB !== toB — we skip the placeholder in that case.
+  // 2. isSingleBlock: exactly one block node was deleted (not inline, not multi-block).
+  // 3. safeInsertPos: that it is the first node
+  const isPureDeletion = change.fromB === change.toB;
+  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)) {
+    const 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)";
+    const widget = Decoration.widget(safeInsertPos, emptyWidgetSpan, {
+      ...buildDiffDecorationSpec({
+        decorationType: 'widget',
+        diffId: crypto.randomUUID()
+      })
+    });
+    decorations.push(widget);
+  }
   return decorations;
 };

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

@@ -99,7 +99,7 @@ var createContentWrapper = function createContentWrapper(colorScheme) {
  * that is not in the current document.
  */
 export var createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref2) {
-  var _slice$content, _slice$content2, _slice$content3;
+  var _slice$content, _slice$content2, _slice$content3, _slice$content$firstC;
   var change = _ref2.change,
     doc = _ref2.doc,
     nodeViewSerializer = _ref2.nodeViewSerializer,
@@ -274,5 +274,32 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
     side: -1
   }))));
+
+  // When a single block node is purely deleted at the very start of the doc (first child),
+  // the deleted widget decoration overlaps with the existing first child's decoration.
+  // To fix this, we insert an additional empty widget span before the deleted content
+  // to push it down and create visual separation.
+  //
+  // Conditions for the placeholder:
+  // 1. isPureDeletion: change.fromB === change.toB — nothing was inserted at the same position.
+  //    Node type changes (e.g. paragraph → heading) have both a deletion and an insertion,
+  //    so fromB !== toB — we skip the placeholder in that case.
+  // 2. isSingleBlock: exactly one block node was deleted (not inline, not multi-block).
+  // 3. safeInsertPos: that it is the first node
+  var isPureDeletion = change.fromB === change.toB;
+  var isSingleBlock = slice.content.childCount === 1 && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.isBlock);
+  var resolvedPos = newDoc.resolve(change.fromB);
+  var isFirstDocChild = resolvedPos.depth === 0 && resolvedPos.index(0) === 0;
+  if (isFirstDocChild && isSingleBlock && isPureDeletion && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    var emptyWidgetSpan = document.createElement('span');
+    emptyWidgetSpan.style.display = 'block';
+    // Use a design token for the margin to keep spacing consistent with the design system
+    emptyWidgetSpan.style.marginTop = "var(--ds-space-100, 8px)";
+    var widget = Decoration.widget(safeInsertPos, emptyWidgetSpan, _objectSpread({}, buildDiffDecorationSpec({
+      decorationType: 'widget',
+      diffId: crypto.randomUUID()
+    })));
+    decorations.push(widget);
+  }
   return decorations;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "10.1.8",
+	"version": "10.1.9",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 		"@atlaskit/adf-utils": "^20.0.0",
 		"@atlaskit/button": "^24.1.0",
 		"@atlaskit/css": "^1.0.0",
-		"@atlaskit/editor-core": "^221.3.0",
+		"@atlaskit/editor-core": "^221.4.0",
 		"@atlaskit/editor-json-transformer": "^9.0.0",
 		"@atlaskit/form": "^16.0.0",
 		"@atlaskit/primitives": "^20.0.0",
@@ -53,7 +53,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.13.0",
+		"@atlaskit/editor-common": "^116.14.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {