@atlaskit/editor-plugin-show-diff 12.1.1 → 12.1.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 12.1.2
+
+### Patch Changes
+
+- [`3d45d0ef1fb3f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d45d0ef1fb3f) -
+  Prevent block diff content from overlapping preceding editor nodes
+
 ## 12.1.1
 
 ### Patch Changes

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

@@ -20,7 +20,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * that is not in the current document.
  */
 var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref) {
-  var _slice$content, _slice$content2, _slice$content3, _slice$content$firstC;
+  var _slice$content, _slice$content2, _slice$content3, _$safeInsertPos$nodeB, _slice$content$firstC;
   var change = _ref.change,
     doc = _ref.doc,
     nodeViewSerializer = _ref.nodeViewSerializer,
@@ -77,6 +77,14 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
 
   // For non-table content, use the existing span wrapper approach
   var dom = document.createElement('span');
+  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) {
+    // 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'));
+  }
   // 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).

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

@@ -28,7 +28,7 @@ export const createNodeChangedDecorationWidget = ({
   diffType,
   hideAddedDiffsUnderline = false
 }) => {
-  var _slice$content, _slice$content2, _slice$content2$first, _slice$content3, _slice$content3$first, _slice$content$firstC;
+  var _slice$content, _slice$content2, _slice$content2$first, _slice$content3, _slice$content3$first, _$safeInsertPos$nodeB, _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
@@ -61,6 +61,14 @@ export const createNodeChangedDecorationWidget = ({
 
   // For non-table content, use the existing span wrapper approach
   const dom = document.createElement('span');
+  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) {
+    // 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'));
+  }
   // 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).

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

@@ -14,7 +14,7 @@ import { wrapBlockNodeView, injectInnerWrapper, createContentWrapper } from './u
  * that is not in the current document.
  */
 export var createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref) {
-  var _slice$content, _slice$content2, _slice$content3, _slice$content$firstC;
+  var _slice$content, _slice$content2, _slice$content3, _$safeInsertPos$nodeB, _slice$content$firstC;
   var change = _ref.change,
     doc = _ref.doc,
     nodeViewSerializer = _ref.nodeViewSerializer,
@@ -71,6 +71,14 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
 
   // For non-table content, use the existing span wrapper approach
   var dom = document.createElement('span');
+  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) {
+    // 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'));
+  }
   // 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).

package/package.json

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