@atlaskit/editor-plugin-block-controls 1.12.1 → 1.12.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.12.3
+
+### Patch Changes
+
+- [#131601](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131601)
+  [`80035567d3d2e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/80035567d3d2e) -
+  ED-24614 fix cards flickering inside a table cell
+
+## 1.12.2
+
+### Patch Changes
+
+- [#131777](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131777)
+  [`3c12389d16342`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3c12389d16342) -
+  [ux] ED-24410 Fix drag handle position for nested nodes
+
 ## 1.12.1
 
 ### Patch Changes

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

@@ -17,7 +17,7 @@ var _dropTarget = require("../ui/drop-target");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 var _validation = require("../utils/validation");
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
-var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList'];
+var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand'];
 var getNestedDepth = function getNestedDepth() {
   return (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? 100 : 0;

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -31,9 +31,20 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     var pos = view.posAtDOM(rootElement, 0, 0);
     var rootPos;
     if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
+      var _$rootPos$parent, _$rootPos$parent2, _$rootPos$nodeAfter;
       var $rootPos = view.state.doc.resolve(pos);
       var depth = $rootPos.depth;
-      rootPos = depth ? $rootPos.before() : $rootPos.pos;
+      var isParentAnIsolatingNode = ((_$rootPos$parent = $rootPos.parent) === null || _$rootPos$parent === void 0 ? void 0 : _$rootPos$parent.type.name) !== 'doc' && ((_$rootPos$parent2 = $rootPos.parent) === null || _$rootPos$parent2 === void 0 ? void 0 : _$rootPos$parent2.type.spec.isolating);
+      var isCurrentNodeAtom = (_$rootPos$nodeAfter = $rootPos.nodeAfter) === null || _$rootPos$nodeAfter === void 0 ? void 0 : _$rootPos$nodeAfter.isAtom;
+      /**
+       * If the parent node is an isolating node, the sides of nodes of this type are considered boundaries, such as a table cell.
+       * And the current node, as a direct child, is an atom node, meaning it does not have directly editable content.
+       * e.g. a card or an extension
+       * We maintain the original position by adding 1 to the depth.
+       * This prevents the decoration from being inserted in the wrong position, like between table cells.
+       */
+      var posDepth = isParentAnIsolatingNode && isCurrentNodeAtom ? depth + 1 : depth;
+      rootPos = depth ? $rootPos.before(posDepth) : $rootPos.pos;
     } else {
       rootPos = view.state.doc.resolve(pos).start(1) - 1;
     }

package/dist/cjs/ui/drag-handle.js

@@ -282,12 +282,12 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     }
     if (supportsAnchor) {
       return {
-        left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
+        left: (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
         top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
     return {
-      left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType),
+      left: (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType),
       top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? (0, _dragHandlePositions.getTopPosition)(dom, nodeType) : (0, _dragHandlePositions.getTopPosition)(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos]);

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

@@ -9,7 +9,7 @@ import { DropTarget } from '../ui/drop-target';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { canMoveNodeToIndex } from '../utils/validation';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
-const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList'];
+const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand'];
 const getNestedDepth = () => fg('platform_editor_elements_dnd_nested') ? 100 : 0;
 const createDropTargetDecoration = (pos, dropTargetDec) => {

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -26,9 +26,20 @@ export const handleMouseOver = (view, event, api) => {
     const pos = view.posAtDOM(rootElement, 0, 0);
     let rootPos;
     if (fg('platform_editor_elements_dnd_nested')) {
+      var _$rootPos$parent, _$rootPos$parent2, _$rootPos$nodeAfter;
       const $rootPos = view.state.doc.resolve(pos);
       const depth = $rootPos.depth;
-      rootPos = depth ? $rootPos.before() : $rootPos.pos;
+      const isParentAnIsolatingNode = ((_$rootPos$parent = $rootPos.parent) === null || _$rootPos$parent === void 0 ? void 0 : _$rootPos$parent.type.name) !== 'doc' && ((_$rootPos$parent2 = $rootPos.parent) === null || _$rootPos$parent2 === void 0 ? void 0 : _$rootPos$parent2.type.spec.isolating);
+      const isCurrentNodeAtom = (_$rootPos$nodeAfter = $rootPos.nodeAfter) === null || _$rootPos$nodeAfter === void 0 ? void 0 : _$rootPos$nodeAfter.isAtom;
+      /**
+       * If the parent node is an isolating node, the sides of nodes of this type are considered boundaries, such as a table cell.
+       * And the current node, as a direct child, is an atom node, meaning it does not have directly editable content.
+       * e.g. a card or an extension
+       * We maintain the original position by adding 1 to the depth.
+       * This prevents the decoration from being inserted in the wrong position, like between table cells.
+       */
+      const posDepth = isParentAnIsolatingNode && isCurrentNodeAtom ? depth + 1 : depth;
+      rootPos = depth ? $rootPos.before(posDepth) : $rootPos.pos;
     } else {
       rootPos = view.state.doc.resolve(pos).start(1) - 1;
     }

package/dist/es2019/ui/drag-handle.js

@@ -270,12 +270,12 @@ const DragHandleInternal = ({
     }
     if (supportsAnchor) {
       return {
-        left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? `calc(anchor(${anchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType)})` : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
+        left: (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer ? `calc(anchor(${anchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType)})` : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
         top: fg('platform_editor_elements_dnd_ed_23674') ? `calc(anchor(${anchorName} start) + ${topPositionAdjustment(nodeType)}px)` : anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
       };
     }
     return {
-      left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType)})` : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType),
+      left: (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType)})` : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType),
       top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos]);

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

@@ -10,7 +10,7 @@ import { DropTarget } from '../ui/drop-target';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { canMoveNodeToIndex } from '../utils/validation';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
-var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList'];
+var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand'];
 var getNestedDepth = function getNestedDepth() {
   return fg('platform_editor_elements_dnd_nested') ? 100 : 0;

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -25,9 +25,20 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     var pos = view.posAtDOM(rootElement, 0, 0);
     var rootPos;
     if (fg('platform_editor_elements_dnd_nested')) {
+      var _$rootPos$parent, _$rootPos$parent2, _$rootPos$nodeAfter;
       var $rootPos = view.state.doc.resolve(pos);
       var depth = $rootPos.depth;
-      rootPos = depth ? $rootPos.before() : $rootPos.pos;
+      var isParentAnIsolatingNode = ((_$rootPos$parent = $rootPos.parent) === null || _$rootPos$parent === void 0 ? void 0 : _$rootPos$parent.type.name) !== 'doc' && ((_$rootPos$parent2 = $rootPos.parent) === null || _$rootPos$parent2 === void 0 ? void 0 : _$rootPos$parent2.type.spec.isolating);
+      var isCurrentNodeAtom = (_$rootPos$nodeAfter = $rootPos.nodeAfter) === null || _$rootPos$nodeAfter === void 0 ? void 0 : _$rootPos$nodeAfter.isAtom;
+      /**
+       * If the parent node is an isolating node, the sides of nodes of this type are considered boundaries, such as a table cell.
+       * And the current node, as a direct child, is an atom node, meaning it does not have directly editable content.
+       * e.g. a card or an extension
+       * We maintain the original position by adding 1 to the depth.
+       * This prevents the decoration from being inserted in the wrong position, like between table cells.
+       */
+      var posDepth = isParentAnIsolatingNode && isCurrentNodeAtom ? depth + 1 : depth;
+      rootPos = depth ? $rootPos.before(posDepth) : $rootPos.pos;
     } else {
       rootPos = view.state.doc.resolve(pos).start(1) - 1;
     }

package/dist/esm/ui/drag-handle.js

@@ -273,12 +273,12 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     }
     if (supportsAnchor) {
       return {
-        left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
+        left: (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
         top: fg('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
     return {
-      left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType),
+      left: (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType),
       top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.12.1",
+	"version": "1.12.3",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,22 +31,22 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^87.12.0",
+		"@atlaskit/editor-common": "^87.13.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.7.0",
-		"@atlaskit/editor-plugin-editor-disabled": "^1.2.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
-		"@atlaskit/editor-plugin-width": "^1.2.0",
+		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.13.0",
+		"@atlaskit/icon": "^22.14.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",