@atlaskit/editor-plugin-block-controls 1.4.25 → 1.4.27

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.27
+
+### Patch Changes
+
+- [#113232](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113232)
+  [`0a1d7a1348305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0a1d7a1348305) -
+  [ux] Fix drag previews when media is nested in the node
+- [#113423](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113423)
+  [`e22e9f7eadce7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e22e9f7eadce7) -
+  Fix text spliting when deleting paragraph
+- Updated dependencies
+
+## 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

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

@@ -113,6 +113,8 @@ var mouseMoveWrapperDecorations = exports.mouseMoveWrapperDecorations = function
 var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api) {
   return _view.Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement('div');
+    // Need to set it to inline to avoid text being split when merging two paragraphs
+    element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
     _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {

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

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dragPreview = void 0;
-//
+var _colors = require("@atlaskit/theme/colors");
 var previewStyle = {
-  borderColor: "var(--ds-border-focused, #388BFF)",
+  borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
   borderStyle: 'solid',
-  borderRadius: "var(--ds-border-radius-100, 4px)",
+  borderRadius: "var(--ds-border-radius-100, 3px)",
   borderWidth: "var(--ds-border-width-outline, 2px)",
   backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
 };
@@ -21,23 +21,26 @@ var dragPreview = exports.dragPreview = function dragPreview(container, dom, nod
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
   var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
-  if (shouldBeGenericPreview) {
+  var embedCard = dom.querySelector('.embedCardView-content-wrap');
+  if (shouldBeGenericPreview || embedCard) {
     parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
     parent.style.borderRadius = previewStyle.borderRadius;
     parent.style.backgroundColor = previewStyle.backgroundColor;
     parent.style.height = '100%';
     parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
-  }
-  var resizer = dom.querySelector('.resizer-item');
-  var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!shouldBeGenericPreview);
+  } else {
+    var resizer = dom.querySelector('.resizer-item');
+    var clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ? resizer.cloneNode(true) : dom.cloneNode(true);
 
-  // Remove any margin from the cloned element to ensure is doesn't position incorrectly
-  clonedDom.style.marginLeft = '0';
-  clonedDom.style.marginTop = '0';
-  clonedDom.style.marginRight = '0';
-  clonedDom.style.marginBottom = '0';
-  clonedDom.style.opacity = '0.4';
-  parent.appendChild(clonedDom);
+    // Remove any margin from the cloned element to ensure is doesn't position incorrectly
+    clonedDom.style.marginLeft = '0';
+    clonedDom.style.marginTop = '0';
+    clonedDom.style.marginRight = '0';
+    clonedDom.style.marginBottom = '0';
+    clonedDom.style.opacity = '0.4';
+    clonedDom.style.boxShadow = 'none';
+    parent.appendChild(clonedDom);
+  }
   container.appendChild(parent);
   var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
   var scrollParentClassNames = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.className;

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/decorations.js

@@ -106,6 +106,8 @@ export const mouseMoveWrapperDecorations = (newState, api) => {
 export const dragHandleDecoration = (pos, anchorName, nodeType, api) => {
   return Decoration.widget(pos, (view, getPos) => {
     const element = document.createElement('div');
+    // Need to set it to inline to avoid text being split when merging two paragraphs
+    element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {

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

@@ -1,8 +1,8 @@
-//
+import { B200 } from '@atlaskit/theme/colors';
 const previewStyle = {
-  borderColor: "var(--ds-border-focused, #388BFF)",
+  borderColor: `var(--ds-border-focused, ${B200})`,
   borderStyle: 'solid',
-  borderRadius: "var(--ds-border-radius-100, 4px)",
+  borderRadius: "var(--ds-border-radius-100, 3px)",
   borderWidth: "var(--ds-border-width-outline, 2px)",
   backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
 };
@@ -15,23 +15,26 @@ export const dragPreview = (container, dom, nodeType) => {
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
   const shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
-  if (shouldBeGenericPreview) {
+  const embedCard = dom.querySelector('.embedCardView-content-wrap');
+  if (shouldBeGenericPreview || embedCard) {
     parent.style.border = `${previewStyle.borderWidth} ${previewStyle.borderStyle} ${previewStyle.borderColor}`;
     parent.style.borderRadius = previewStyle.borderRadius;
     parent.style.backgroundColor = previewStyle.backgroundColor;
     parent.style.height = '100%';
     parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
-  }
-  const resizer = dom.querySelector('.resizer-item');
-  const clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!shouldBeGenericPreview);
+  } else {
+    const resizer = dom.querySelector('.resizer-item');
+    const clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ? resizer.cloneNode(true) : dom.cloneNode(true);
 
-  // Remove any margin from the cloned element to ensure is doesn't position incorrectly
-  clonedDom.style.marginLeft = '0';
-  clonedDom.style.marginTop = '0';
-  clonedDom.style.marginRight = '0';
-  clonedDom.style.marginBottom = '0';
-  clonedDom.style.opacity = '0.4';
-  parent.appendChild(clonedDom);
+    // Remove any margin from the cloned element to ensure is doesn't position incorrectly
+    clonedDom.style.marginLeft = '0';
+    clonedDom.style.marginTop = '0';
+    clonedDom.style.marginRight = '0';
+    clonedDom.style.marginBottom = '0';
+    clonedDom.style.opacity = '0.4';
+    clonedDom.style.boxShadow = 'none';
+    parent.appendChild(clonedDom);
+  }
   container.appendChild(parent);
   const scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
   const scrollParentClassNames = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.className;

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/decorations.js

@@ -106,6 +106,8 @@ export var mouseMoveWrapperDecorations = function mouseMoveWrapperDecorations(ne
 export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api) {
   return Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement('div');
+    // Need to set it to inline to avoid text being split when merging two paragraphs
+    element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {

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

@@ -1,8 +1,8 @@
-//
+import { B200 } from '@atlaskit/theme/colors';
 var previewStyle = {
-  borderColor: "var(--ds-border-focused, #388BFF)",
+  borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
   borderStyle: 'solid',
-  borderRadius: "var(--ds-border-radius-100, 4px)",
+  borderRadius: "var(--ds-border-radius-100, 3px)",
   borderWidth: "var(--ds-border-width-outline, 2px)",
   backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
 };
@@ -15,23 +15,26 @@ export var dragPreview = function dragPreview(container, dom, nodeType) {
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
   var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
-  if (shouldBeGenericPreview) {
+  var embedCard = dom.querySelector('.embedCardView-content-wrap');
+  if (shouldBeGenericPreview || embedCard) {
     parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
     parent.style.borderRadius = previewStyle.borderRadius;
     parent.style.backgroundColor = previewStyle.backgroundColor;
     parent.style.height = '100%';
     parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
-  }
-  var resizer = dom.querySelector('.resizer-item');
-  var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!shouldBeGenericPreview);
+  } else {
+    var resizer = dom.querySelector('.resizer-item');
+    var clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ? resizer.cloneNode(true) : dom.cloneNode(true);
 
-  // Remove any margin from the cloned element to ensure is doesn't position incorrectly
-  clonedDom.style.marginLeft = '0';
-  clonedDom.style.marginTop = '0';
-  clonedDom.style.marginRight = '0';
-  clonedDom.style.marginBottom = '0';
-  clonedDom.style.opacity = '0.4';
-  parent.appendChild(clonedDom);
+    // Remove any margin from the cloned element to ensure is doesn't position incorrectly
+    clonedDom.style.marginLeft = '0';
+    clonedDom.style.marginTop = '0';
+    clonedDom.style.marginRight = '0';
+    clonedDom.style.marginBottom = '0';
+    clonedDom.style.opacity = '0.4';
+    clonedDom.style.boxShadow = 'none';
+    parent.appendChild(clonedDom);
+  }
   container.appendChild(parent);
   var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
   var scrollParentClassNames = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.className;

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.25",
+	"version": "1.4.27",
 	"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",
@@ -44,7 +44,8 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
-		"@atlaskit/tokens": "^1.51.0",
+		"@atlaskit/theme": "^12.11.0",
+		"@atlaskit/tokens": "^1.52.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",