@atlaskit/editor-plugin-show-diff 13.0.3 → 13.0.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 13.0.4
+
+### Patch Changes
+
+- [`fe858303d6a81`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fe858303d6a81) -
+  [ux] Under `platform_editor_diff_plugin_extended`, prevent a replacement of the first document
+  heading from overlapping its diff.
+
 ## 13.0.3
 
 ### Patch Changes

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

@@ -96,7 +96,7 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
  * that is not in the current document.
  */
 var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref2) {
-  var _slice$content, _slice$content2, _slice$content3, _$safeInsertPos$nodeB, _slice$content$firstC;
+  var _slice$content, _slice$content2, _slice$content3, _$safeInsertPos$nodeB, _slice$content$firstC, _newDoc$firstChild, _slice$content$firstC2;
   var change = _ref2.change,
     doc = _ref2.doc,
     nodeViewSerializer = _ref2.nodeViewSerializer,
@@ -172,11 +172,18 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   var $safeInsertPos = newDoc.resolve(safeInsertPos);
   var isTopLevelInsert = $safeInsertPos.depth === 0;
   var hasPreviousBlock = ((_$safeInsertPos$nodeB = $safeInsertPos.nodeBefore) === null || _$safeInsertPos$nodeB === void 0 ? void 0 : _$safeInsertPos$nodeB.isBlock) === true;
-  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isTopLevelInsert && hasPreviousBlock) {
+  var isFirstDocHeadingReplacement = (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && !placeBelow && change.fromB === 0 && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'heading' && ((_newDoc$firstChild = newDoc.firstChild) === null || _newDoc$firstChild === void 0 ? void 0 : _newDoc$firstChild.type.name) === 'heading';
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isTopLevelInsert && hasPreviousBlock && !isFirstDocHeadingReplacement) {
     // Editor CSS removes the top margin from a block when it is its parent's first child.
     // Keep the serialized block as a subsequent child so each block type retains its own margin.
     dom.append(dom.ownerDocument.createElement('div'));
   }
+  if (isFirstDocHeadingReplacement) {
+    // The replacement widget is the visual first block, while the real first document node has
+    // its top margin reset. Add a compact gap after the widget so the two diff blocks do not overlap.
+    dom.style.display = 'block';
+    dom.style.marginBottom = "var(--ds-space-200, 16px)";
+  }
   // When mediaSingle nodes are rendered inside a widget decoration (e.g. as part of
   // a replaced panel), the centering CSS (margin-left: 50%; transform: translateX(-50%))
   // incorrectly applies because isNestedNode resolves to false (getPos returns 0).
@@ -346,7 +353,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   // block before it. Add an empty widget matching the following heading so the editor's own heading
   // styles supply the appropriate spacing. For other node types, retain the existing generic spacer.
   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 isSingleBlock = slice.content.childCount === 1 && ((_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.isBlock);
   var isDiffWidgetAtStartOfDoc = $safeInsertPos.depth === 0 && $safeInsertPos.index(0) === 0;
   if (isDiffWidgetAtStartOfDoc && isSingleBlock && isPureDeletion && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     var followingNode = $safeInsertPos.nodeAfter;

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

@@ -105,7 +105,7 @@ export const createNodeChangedDecorationWidget = ({
   diffType,
   hideAddedDiffsUnderline = false
 }) => {
-  var _slice$content, _slice$content2, _slice$content2$first, _slice$content3, _slice$content3$first, _$safeInsertPos$nodeB, _slice$content$firstC;
+  var _slice$content, _slice$content2, _slice$content2$first, _slice$content3, _slice$content3$first, _$safeInsertPos$nodeB, _slice$content$firstC, _newDoc$firstChild, _slice$content$firstC2;
   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
@@ -157,11 +157,18 @@ export const createNodeChangedDecorationWidget = ({
   const $safeInsertPos = newDoc.resolve(safeInsertPos);
   const isTopLevelInsert = $safeInsertPos.depth === 0;
   const hasPreviousBlock = ((_$safeInsertPos$nodeB = $safeInsertPos.nodeBefore) === null || _$safeInsertPos$nodeB === void 0 ? void 0 : _$safeInsertPos$nodeB.isBlock) === true;
-  if (isExtendedEnabled(diffType) && isTopLevelInsert && hasPreviousBlock) {
+  const isFirstDocHeadingReplacement = isExtendedEnabled(diffType) && !placeBelow && change.fromB === 0 && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'heading' && ((_newDoc$firstChild = newDoc.firstChild) === null || _newDoc$firstChild === void 0 ? void 0 : _newDoc$firstChild.type.name) === 'heading';
+  if (isExtendedEnabled(diffType) && isTopLevelInsert && hasPreviousBlock && !isFirstDocHeadingReplacement) {
     // Editor CSS removes the top margin from a block when it is its parent's first child.
     // Keep the serialized block as a subsequent child so each block type retains its own margin.
     dom.append(dom.ownerDocument.createElement('div'));
   }
+  if (isFirstDocHeadingReplacement) {
+    // The replacement widget is the visual first block, while the real first document node has
+    // its top margin reset. Add a compact gap after the widget so the two diff blocks do not overlap.
+    dom.style.display = 'block';
+    dom.style.marginBottom = "var(--ds-space-200, 16px)";
+  }
   // When mediaSingle nodes are rendered inside a widget decoration (e.g. as part of
   // a replaced panel), the centering CSS (margin-left: 50%; transform: translateX(-50%))
   // incorrectly applies because isNestedNode resolves to false (getPos returns 0).
@@ -329,7 +336,7 @@ export const createNodeChangedDecorationWidget = ({
   // block before it. Add an empty widget matching the following heading so the editor's own heading
   // styles supply the appropriate spacing. For other node types, retain the existing generic spacer.
   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 isSingleBlock = slice.content.childCount === 1 && ((_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.isBlock);
   const isDiffWidgetAtStartOfDoc = $safeInsertPos.depth === 0 && $safeInsertPos.index(0) === 0;
   if (isDiffWidgetAtStartOfDoc && isSingleBlock && isPureDeletion && isExtendedEnabled(diffType)) {
     const followingNode = $safeInsertPos.nodeAfter;

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

@@ -89,7 +89,7 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
  * that is not in the current document.
  */
 export var createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref2) {
-  var _slice$content, _slice$content2, _slice$content3, _$safeInsertPos$nodeB, _slice$content$firstC;
+  var _slice$content, _slice$content2, _slice$content3, _$safeInsertPos$nodeB, _slice$content$firstC, _newDoc$firstChild, _slice$content$firstC2;
   var change = _ref2.change,
     doc = _ref2.doc,
     nodeViewSerializer = _ref2.nodeViewSerializer,
@@ -165,11 +165,18 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   var $safeInsertPos = newDoc.resolve(safeInsertPos);
   var isTopLevelInsert = $safeInsertPos.depth === 0;
   var hasPreviousBlock = ((_$safeInsertPos$nodeB = $safeInsertPos.nodeBefore) === null || _$safeInsertPos$nodeB === void 0 ? void 0 : _$safeInsertPos$nodeB.isBlock) === true;
-  if (isExtendedEnabled(diffType) && isTopLevelInsert && hasPreviousBlock) {
+  var isFirstDocHeadingReplacement = isExtendedEnabled(diffType) && !placeBelow && change.fromB === 0 && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'heading' && ((_newDoc$firstChild = newDoc.firstChild) === null || _newDoc$firstChild === void 0 ? void 0 : _newDoc$firstChild.type.name) === 'heading';
+  if (isExtendedEnabled(diffType) && isTopLevelInsert && hasPreviousBlock && !isFirstDocHeadingReplacement) {
     // Editor CSS removes the top margin from a block when it is its parent's first child.
     // Keep the serialized block as a subsequent child so each block type retains its own margin.
     dom.append(dom.ownerDocument.createElement('div'));
   }
+  if (isFirstDocHeadingReplacement) {
+    // The replacement widget is the visual first block, while the real first document node has
+    // its top margin reset. Add a compact gap after the widget so the two diff blocks do not overlap.
+    dom.style.display = 'block';
+    dom.style.marginBottom = "var(--ds-space-200, 16px)";
+  }
   // When mediaSingle nodes are rendered inside a widget decoration (e.g. as part of
   // a replaced panel), the centering CSS (margin-left: 50%; transform: translateX(-50%))
   // incorrectly applies because isNestedNode resolves to false (getPos returns 0).
@@ -339,7 +346,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   // block before it. Add an empty widget matching the following heading so the editor's own heading
   // styles supply the appropriate spacing. For other node types, retain the existing generic spacer.
   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 isSingleBlock = slice.content.childCount === 1 && ((_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.isBlock);
   var isDiffWidgetAtStartOfDoc = $safeInsertPos.depth === 0 && $safeInsertPos.index(0) === 0;
   if (isDiffWidgetAtStartOfDoc && isSingleBlock && isPureDeletion && isExtendedEnabled(diffType)) {
     var followingNode = $safeInsertPos.nodeAfter;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "13.0.3",
+	"version": "13.0.4",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",