@atlaskit/editor-plugin-block-controls 1.4.24 → 1.4.26

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.26
+
+### Patch Changes
+
+- [#113192](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113192)
+  [`e30355e61e571`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e30355e61e571) -
+  [ED-23770] Fix the bug where clicking drag handle does not select inline nodes
+- Updated dependencies
+
+## 1.4.25
+
+### Patch Changes
+
+- [#112850](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112850)
+  [`b5b96fe430ecb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b5b96fe430ecb) -
+  ED-23767 Add drop listener to prevent default behaviour of duplicating dropped node
+
 ## 1.4.24
 
 ### Patch Changes

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

@@ -221,6 +221,27 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           return;
         }
         return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
+      },
+      handleDOMEvents: {
+        drop: function drop(view, event) {
+          var _pluginState$activeNo;
+          // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
+          // this duplicates the an empty version of the node it was dropping,
+          // Adding some check here to prevent that if drop position is within activeNode
+          var state = view.state;
+          var pluginState = key.getState(state);
+          if (!(event.target instanceof HTMLElement) || !(pluginState !== null && pluginState !== void 0 && pluginState.activeNode)) {
+            return false;
+          }
+          var node = view.nodeDOM(pluginState === null || pluginState === void 0 || (_pluginState$activeNo = pluginState.activeNode) === null || _pluginState$activeNo === void 0 ? void 0 : _pluginState$activeNo.pos);
+          var isActiveNode = (node === null || node === void 0 ? void 0 : node.contains(event.target)) || event.target === node;
+          if (isActiveNode) {
+            // Prevent the default drop behavior if the position is within the activeNode
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        }
       }
     },
     view: function view(editorView) {

package/dist/cjs/utils/getSelection.js

@@ -14,23 +14,23 @@ var getSelection = exports.getSelection = function getSelection(tr, start) {
   if (isNodeSelection) {
     return new _state.NodeSelection($startPos);
   } else {
-    // To trigger the annotation floating toolbar for non-selectable node, we need to select on the text node
-    // Find the first text node in the node
-    var textNodesPos = start;
-    var foundTextNodes = false;
+    // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
+    // Find the first inline node in the node
+    var inlineNodePos = start;
+    var foundInlineNode = false;
     tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n, pos) {
-      if (foundTextNodes) {
+      if (foundInlineNode) {
         return false;
       }
-      if (n.isText) {
-        textNodesPos = pos;
-        foundTextNodes = true;
+      if (n.isInline) {
+        inlineNodePos = pos;
+        foundInlineNode = true;
         return false;
       }
       return true;
     });
-    var textNodeDepth = textNodesPos - start;
-    return new _state.TextSelection(tr.doc.resolve(textNodesPos), tr.doc.resolve(start + nodeSize - textNodeDepth));
+    var inlineNodeDepth = inlineNodePos - start;
+    return new _state.TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(start + nodeSize - inlineNodeDepth));
   }
 };
 var selectNode = exports.selectNode = function selectNode(tr, start, nodeType) {

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

@@ -214,6 +214,29 @@ export const createPlugin = api => {
           return;
         }
         return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
+      },
+      handleDOMEvents: {
+        drop(view, event) {
+          var _pluginState$activeNo;
+          // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
+          // this duplicates the an empty version of the node it was dropping,
+          // Adding some check here to prevent that if drop position is within activeNode
+          const {
+            state
+          } = view;
+          const pluginState = key.getState(state);
+          if (!(event.target instanceof HTMLElement) || !(pluginState !== null && pluginState !== void 0 && pluginState.activeNode)) {
+            return false;
+          }
+          const node = view.nodeDOM(pluginState === null || pluginState === void 0 ? void 0 : (_pluginState$activeNo = pluginState.activeNode) === null || _pluginState$activeNo === void 0 ? void 0 : _pluginState$activeNo.pos);
+          const isActiveNode = (node === null || node === void 0 ? void 0 : node.contains(event.target)) || event.target === node;
+          if (isActiveNode) {
+            // Prevent the default drop behavior if the position is within the activeNode
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        }
       }
     },
     view: editorView => {

package/dist/es2019/utils/getSelection.js

@@ -8,23 +8,23 @@ export const getSelection = (tr, start) => {
   if (isNodeSelection) {
     return new NodeSelection($startPos);
   } else {
-    // To trigger the annotation floating toolbar for non-selectable node, we need to select on the text node
-    // Find the first text node in the node
-    let textNodesPos = start;
-    let foundTextNodes = false;
+    // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
+    // Find the first inline node in the node
+    let inlineNodePos = start;
+    let foundInlineNode = false;
     tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, (n, pos) => {
-      if (foundTextNodes) {
+      if (foundInlineNode) {
         return false;
       }
-      if (n.isText) {
-        textNodesPos = pos;
-        foundTextNodes = true;
+      if (n.isInline) {
+        inlineNodePos = pos;
+        foundInlineNode = true;
         return false;
       }
       return true;
     });
-    const textNodeDepth = textNodesPos - start;
-    return new TextSelection(tr.doc.resolve(textNodesPos), tr.doc.resolve(start + nodeSize - textNodeDepth));
+    const inlineNodeDepth = inlineNodePos - start;
+    return new TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(start + nodeSize - inlineNodeDepth));
   }
 };
 export const selectNode = (tr, start, nodeType) => {

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

@@ -214,6 +214,27 @@ export var createPlugin = function createPlugin(api) {
           return;
         }
         return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
+      },
+      handleDOMEvents: {
+        drop: function drop(view, event) {
+          var _pluginState$activeNo;
+          // prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
+          // this duplicates the an empty version of the node it was dropping,
+          // Adding some check here to prevent that if drop position is within activeNode
+          var state = view.state;
+          var pluginState = key.getState(state);
+          if (!(event.target instanceof HTMLElement) || !(pluginState !== null && pluginState !== void 0 && pluginState.activeNode)) {
+            return false;
+          }
+          var node = view.nodeDOM(pluginState === null || pluginState === void 0 || (_pluginState$activeNo = pluginState.activeNode) === null || _pluginState$activeNo === void 0 ? void 0 : _pluginState$activeNo.pos);
+          var isActiveNode = (node === null || node === void 0 ? void 0 : node.contains(event.target)) || event.target === node;
+          if (isActiveNode) {
+            // Prevent the default drop behavior if the position is within the activeNode
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        }
       }
     },
     view: function view(editorView) {

package/dist/esm/utils/getSelection.js

@@ -8,23 +8,23 @@ export var getSelection = function getSelection(tr, start) {
   if (isNodeSelection) {
     return new NodeSelection($startPos);
   } else {
-    // To trigger the annotation floating toolbar for non-selectable node, we need to select on the text node
-    // Find the first text node in the node
-    var textNodesPos = start;
-    var foundTextNodes = false;
+    // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
+    // Find the first inline node in the node
+    var inlineNodePos = start;
+    var foundInlineNode = false;
     tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n, pos) {
-      if (foundTextNodes) {
+      if (foundInlineNode) {
         return false;
       }
-      if (n.isText) {
-        textNodesPos = pos;
-        foundTextNodes = true;
+      if (n.isInline) {
+        inlineNodePos = pos;
+        foundInlineNode = true;
         return false;
       }
       return true;
     });
-    var textNodeDepth = textNodesPos - start;
-    return new TextSelection(tr.doc.resolve(textNodesPos), tr.doc.resolve(start + nodeSize - textNodeDepth));
+    var inlineNodeDepth = inlineNodePos - start;
+    return new TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(start + nodeSize - inlineNodeDepth));
   }
 };
 export var selectNode = function selectNode(tr, start, nodeType) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.4.24",
+	"version": "1.4.26",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^36.10.7",
-		"@atlaskit/editor-common": "^82.9.0",
+		"@atlaskit/editor-common": "^82.10.0",
 		"@atlaskit/editor-plugin-analytics": "^1.2.3",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
 		"@atlaskit/editor-plugin-feature-flags": "^1.1.0",