@atlaskit/editor-plugin-block-controls 1.5.2 → 1.5.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.5.4
+
+### Patch Changes
+
+- [#114530](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114530)
+  [`fac9f4b0e5a45`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fac9f4b0e5a45) -
+  [ED-23892] Fix action list duplicates itself when dropping on itself, update how dropping at node
+  itself is detected so it works when mouse move wrapper is removed
+
+## 1.5.3
+
+### Patch Changes
+
+- [#115969](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115969)
+  [`915746a1da4f7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/915746a1da4f7) -
+  do not show mouse move wrapper for wrapping nodes
+
 ## 1.5.2
 
 ### Patch Changes

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

@@ -27,9 +27,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     decs.push(_view.Decoration.widget(pos, function () {
       var element = document.createElement('div');
       element.setAttribute('data-blocks-drop-target-container', 'true');
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
-        element.style.clear = 'unset';
-      }
+      element.style.clear = 'unset';
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
         api: api,
         index: index
@@ -107,10 +105,16 @@ var mouseMoveWrapperDecorations = exports.mouseMoveWrapperDecorations = function
   var decs = [];
   unmountDecorations('data-blocks-decoration-container');
   newState.doc.descendants(function (node, pos, _parent, index) {
+    // Do not render a mouse move wrapper for nodes that have wrapping - this causes wrapping to break
+    var hasWrapping = node.attrs.layout === 'wrap-left' || node.attrs.layout === 'wrap-right';
+    if (hasWrapping) {
+      return false;
+    }
     var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
     decs.push(_view.Decoration.widget(pos, function (view, getPos) {
       var element = document.createElement('div');
       element.setAttribute('data-blocks-decoration-container', 'true');
+      element.setAttribute('style', 'clear: unset;');
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_mouseMoveWrapper.MouseMoveWrapper, {
         view: view,
         api: api,

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

@@ -294,7 +294,17 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           // so we only need to check first child
           var draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
           var activeNode = state.tr.doc.nodeAt(pluginState.activeNode.pos);
-          if (draggable === activeNode) {
+          var isSameNode = draggable === activeNode;
+          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-ed-23892')) {
+            var _event$target;
+            var nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[data-drag-handler-anchor-name]');
+            if (!nodeElement) {
+              return false;
+            }
+            var nodeTarget = state.doc.nodeAt(view.posAtDOM(nodeElement, 0) - 1);
+            isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
+          }
+          if (isSameNode) {
             // Prevent the default drop behavior if the position is within the activeNode
             event.preventDefault();
             return true;

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

@@ -19,9 +19,7 @@ export const dropTargetDecorations = (oldState, newState, api) => {
     decs.push(Decoration.widget(pos, () => {
       const element = document.createElement('div');
       element.setAttribute('data-blocks-drop-target-container', 'true');
-      if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
-        element.style.clear = 'unset';
-      }
+      element.style.clear = 'unset';
       ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
         api,
         index
@@ -101,10 +99,16 @@ export const mouseMoveWrapperDecorations = (newState, api) => {
   const decs = [];
   unmountDecorations('data-blocks-decoration-container');
   newState.doc.descendants((node, pos, _parent, index) => {
+    // Do not render a mouse move wrapper for nodes that have wrapping - this causes wrapping to break
+    const hasWrapping = node.attrs.layout === 'wrap-left' || node.attrs.layout === 'wrap-right';
+    if (hasWrapping) {
+      return false;
+    }
     const anchorName = `--node-anchor-${node.type.name}-${index}`;
     decs.push(Decoration.widget(pos, (view, getPos) => {
       const element = document.createElement('div');
       element.setAttribute('data-blocks-decoration-container', 'true');
+      element.setAttribute('style', 'clear: unset;');
       ReactDOM.render( /*#__PURE__*/createElement(MouseMoveWrapper, {
         view,
         api,

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

@@ -286,7 +286,17 @@ export const createPlugin = api => {
           // so we only need to check first child
           const draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
           const activeNode = state.tr.doc.nodeAt(pluginState.activeNode.pos);
-          if (draggable === activeNode) {
+          let isSameNode = draggable === activeNode;
+          if (getBooleanFF('platform.editor.elements.drag-and-drop-ed-23892')) {
+            var _event$target;
+            const nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[data-drag-handler-anchor-name]');
+            if (!nodeElement) {
+              return false;
+            }
+            const nodeTarget = state.doc.nodeAt(view.posAtDOM(nodeElement, 0) - 1);
+            isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
+          }
+          if (isSameNode) {
             // Prevent the default drop behavior if the position is within the activeNode
             event.preventDefault();
             return true;

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

@@ -20,9 +20,7 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
     decs.push(Decoration.widget(pos, function () {
       var element = document.createElement('div');
       element.setAttribute('data-blocks-drop-target-container', 'true');
-      if (getBooleanFF('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
-        element.style.clear = 'unset';
-      }
+      element.style.clear = 'unset';
       ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
         api: api,
         index: index
@@ -100,10 +98,16 @@ export var mouseMoveWrapperDecorations = function mouseMoveWrapperDecorations(ne
   var decs = [];
   unmountDecorations('data-blocks-decoration-container');
   newState.doc.descendants(function (node, pos, _parent, index) {
+    // Do not render a mouse move wrapper for nodes that have wrapping - this causes wrapping to break
+    var hasWrapping = node.attrs.layout === 'wrap-left' || node.attrs.layout === 'wrap-right';
+    if (hasWrapping) {
+      return false;
+    }
     var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
     decs.push(Decoration.widget(pos, function (view, getPos) {
       var element = document.createElement('div');
       element.setAttribute('data-blocks-decoration-container', 'true');
+      element.setAttribute('style', 'clear: unset;');
       ReactDOM.render( /*#__PURE__*/createElement(MouseMoveWrapper, {
         view: view,
         api: api,

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

@@ -287,7 +287,17 @@ export var createPlugin = function createPlugin(api) {
           // so we only need to check first child
           var draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
           var activeNode = state.tr.doc.nodeAt(pluginState.activeNode.pos);
-          if (draggable === activeNode) {
+          var isSameNode = draggable === activeNode;
+          if (getBooleanFF('platform.editor.elements.drag-and-drop-ed-23892')) {
+            var _event$target;
+            var nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[data-drag-handler-anchor-name]');
+            if (!nodeElement) {
+              return false;
+            }
+            var nodeTarget = state.doc.nodeAt(view.posAtDOM(nodeElement, 0) - 1);
+            isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
+          }
+          if (isSameNode) {
             // Prevent the default drop behavior if the position is within the activeNode
             event.preventDefault();
             return true;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.5.2",
+	"version": "1.5.4",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^38.0.0",
-		"@atlaskit/editor-common": "^83.3.0",
+		"@atlaskit/editor-common": "^83.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
 		"@atlaskit/editor-plugin-feature-flags": "^1.1.0",
@@ -104,6 +104,9 @@
 		"platform.editor.media.extended-resize-experience": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform.editor.elements.drag-and-drop-ed-23892": {
+			"type": "boolean"
 		}
 	}
 }