@atlaskit/editor-plugin-block-controls 1.3.9 → 1.3.11

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.3.11
+
+### Patch Changes
+
+-   [#100944](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100944)
+    [`236b42e205dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/236b42e205dd) -
+    Fix drag handle position on media node
+-   Updated dependencies
+
+## 1.3.10
+
+### Patch Changes
+
+-   [#100964](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100964)
+    [`d58e7d6f08e4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d58e7d6f08e4) -
+    [ux] Tweak CSS styles for drop targets
+
 ## 1.3.9
 
 ### Patch Changes

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

@@ -68,7 +68,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     element.style.zIndex = '1';
     var resizer = meta.dom.querySelector('.resizer-item');
     if (resizer) {
-      element.style.left = "".concat(resizer.offsetLeft - parseInt(getComputedStyle(resizer).marginLeft) - _consts.DRAG_HANDLE_NODE_GAP - _consts.DRAG_HANDLE_WIDTH, "px");
+      element.style.left = getComputedStyle(resizer).transform === 'none' ? "".concat(resizer.offsetLeft - _consts.DRAG_HANDLE_NODE_GAP - _consts.DRAG_HANDLE_WIDTH, "px") : "".concat(resizer.offsetLeft - resizer.offsetWidth / 2 - _consts.DRAG_HANDLE_NODE_GAP - _consts.DRAG_HANDLE_WIDTH, "px");
     } else {
       element.style.left = "".concat(meta.dom.offsetLeft - _consts.DRAG_HANDLE_NODE_GAP - _consts.DRAG_HANDLE_WIDTH, "px");
     }

package/dist/cjs/ui/consts.js

@@ -7,6 +7,6 @@ exports.DROP_TARGET_LINE_WIDTH = exports.DROP_TARGET_CIRCLE_DIAMETER = exports.D
 var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
 var DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_WIDTH = 12;
 var DRAG_HANDLE_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
+var DRAG_HANDLE_NODE_GAP = exports.DRAG_HANDLE_NODE_GAP = 12;
 var DROP_TARGET_LINE_WIDTH = exports.DROP_TARGET_LINE_WIDTH = 2;
-var DROP_TARGET_CIRCLE_DIAMETER = exports.DROP_TARGET_CIRCLE_DIAMETER = 4;
-var DRAG_HANDLE_NODE_GAP = exports.DRAG_HANDLE_NODE_GAP = 12;
+var DROP_TARGET_CIRCLE_DIAMETER = exports.DROP_TARGET_CIRCLE_DIAMETER = 8;

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

@@ -12,7 +12,8 @@ var dragPreview = exports.dragPreview = function dragPreview(container, domRef)
   var parent = document.createElement('div');
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
-  var clonedDom = domRef.current.cloneNode(true);
+  var resizer = domRef.current.querySelector('.resizer-item');
+  var clonedDom = resizer ? resizer.cloneNode(true) : domRef.current.cloneNode(true);
 
   // Remove any margin from the cloned element to ensure is doesn't position incorrectly
   clonedDom.style.marginLeft = '0';

package/dist/cjs/ui/drop-target.js

@@ -17,21 +17,22 @@ var styleHighlighted = (0, _react2.css)({
   height: "var(--ds-space-100, 8px)",
   marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", " - ", _consts.DROP_TARGET_LINE_WIDTH, "px)"),
   marginLeft: "var(--ds-space-negative-100, -8px)",
-  top: "calc(".concat("var(--ds-space-100, 8px)", " / 2 - 2.5px)"),
-  //2.5px to help clear expand node margin
+  top: "calc(".concat("var(--ds-space-100, 8px)", " / 2 - 1px)"),
+  //1px to help clear expand node margin
   position: 'relative',
   borderBottom: "solid ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")"), " ", _consts.DROP_TARGET_LINE_WIDTH, "px"),
   "&:before": {
     content: '""',
     width: "".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, "px"),
     height: "".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, "px"),
-    marginTop: "calc(".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, " + ").concat(_consts.DROP_TARGET_LINE_WIDTH, " * 2)px"),
+    marginTop: "".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, "px"),
     borderRadius: '50%',
     border: "solid ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")"), " ", _consts.DROP_TARGET_LINE_WIDTH, "px"),
     backgroundColor: "var(--ds-background-input, white)",
     display: 'block',
     position: 'absolute',
-    bottom: '-5px'
+    bottom: "".concat(-(_consts.DROP_TARGET_CIRCLE_DIAMETER + _consts.DROP_TARGET_LINE_WIDTH) / 2, "px"),
+    boxSizing: 'border-box'
   }
 });
 var styleDisabled = (0, _react2.css)({

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

@@ -61,7 +61,7 @@ export const dragHandleDecoration = (oldState, meta, api) => {
     element.style.zIndex = '1';
     const resizer = meta.dom.querySelector('.resizer-item');
     if (resizer) {
-      element.style.left = `${resizer.offsetLeft - parseInt(getComputedStyle(resizer).marginLeft) - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH}px`;
+      element.style.left = getComputedStyle(resizer).transform === 'none' ? `${resizer.offsetLeft - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH}px` : `${resizer.offsetLeft - resizer.offsetWidth / 2 - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH}px`;
     } else {
       element.style.left = `${meta.dom.offsetLeft - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH}px`;
     }

package/dist/es2019/ui/consts.js

@@ -1,6 +1,6 @@
 export const DRAG_HANDLE_HEIGHT = 24;
 export const DRAG_HANDLE_WIDTH = 12;
 export const DRAG_HANDLE_BORDER_RADIUS = 4;
+export const DRAG_HANDLE_NODE_GAP = 12;
 export const DROP_TARGET_LINE_WIDTH = 2;
-export const DROP_TARGET_CIRCLE_DIAMETER = 4;
-export const DRAG_HANDLE_NODE_GAP = 12;
+export const DROP_TARGET_CIRCLE_DIAMETER = 8;

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

@@ -6,7 +6,8 @@ export const dragPreview = (container, domRef) => {
   const parent = document.createElement('div');
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
-  const clonedDom = domRef.current.cloneNode(true);
+  const resizer = domRef.current.querySelector('.resizer-item');
+  const clonedDom = resizer ? resizer.cloneNode(true) : domRef.current.cloneNode(true);
 
   // Remove any margin from the cloned element to ensure is doesn't position incorrectly
   clonedDom.style.marginLeft = '0';

package/dist/es2019/ui/drop-target.js

@@ -8,21 +8,22 @@ const styleHighlighted = css({
   height: "var(--ds-space-100, 8px)",
   marginTop: `calc(${"var(--ds-space-negative-100, -8px)"} - ${DROP_TARGET_LINE_WIDTH}px)`,
   marginLeft: "var(--ds-space-negative-100, -8px)",
-  top: `calc(${"var(--ds-space-100, 8px)"} / 2 - 2.5px)`,
-  //2.5px to help clear expand node margin
+  top: `calc(${"var(--ds-space-100, 8px)"} / 2 - 1px)`,
+  //1px to help clear expand node margin
   position: 'relative',
   borderBottom: `solid ${`var(--ds-border-selected, ${B300})`} ${DROP_TARGET_LINE_WIDTH}px`,
   "&:before": {
     content: '""',
     width: `${DROP_TARGET_CIRCLE_DIAMETER}px`,
     height: `${DROP_TARGET_CIRCLE_DIAMETER}px`,
-    marginTop: `calc(${DROP_TARGET_CIRCLE_DIAMETER} + ${DROP_TARGET_LINE_WIDTH} * 2)px`,
+    marginTop: `${DROP_TARGET_CIRCLE_DIAMETER}px`,
     borderRadius: '50%',
     border: `solid ${`var(--ds-border-selected, ${B300})`} ${DROP_TARGET_LINE_WIDTH}px`,
     backgroundColor: "var(--ds-background-input, white)",
     display: 'block',
     position: 'absolute',
-    bottom: '-5px'
+    bottom: `${-(DROP_TARGET_CIRCLE_DIAMETER + DROP_TARGET_LINE_WIDTH) / 2}px`,
+    boxSizing: 'border-box'
   }
 });
 const styleDisabled = css({

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

@@ -61,7 +61,7 @@ export var dragHandleDecoration = function dragHandleDecoration(oldState, meta,
     element.style.zIndex = '1';
     var resizer = meta.dom.querySelector('.resizer-item');
     if (resizer) {
-      element.style.left = "".concat(resizer.offsetLeft - parseInt(getComputedStyle(resizer).marginLeft) - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH, "px");
+      element.style.left = getComputedStyle(resizer).transform === 'none' ? "".concat(resizer.offsetLeft - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH, "px") : "".concat(resizer.offsetLeft - resizer.offsetWidth / 2 - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH, "px");
     } else {
       element.style.left = "".concat(meta.dom.offsetLeft - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH, "px");
     }

package/dist/esm/ui/consts.js

@@ -1,6 +1,6 @@
 export var DRAG_HANDLE_HEIGHT = 24;
 export var DRAG_HANDLE_WIDTH = 12;
 export var DRAG_HANDLE_BORDER_RADIUS = 4;
+export var DRAG_HANDLE_NODE_GAP = 12;
 export var DROP_TARGET_LINE_WIDTH = 2;
-export var DROP_TARGET_CIRCLE_DIAMETER = 4;
-export var DRAG_HANDLE_NODE_GAP = 12;
+export var DROP_TARGET_CIRCLE_DIAMETER = 8;

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

@@ -6,7 +6,8 @@ export var dragPreview = function dragPreview(container, domRef) {
   var parent = document.createElement('div');
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
-  var clonedDom = domRef.current.cloneNode(true);
+  var resizer = domRef.current.querySelector('.resizer-item');
+  var clonedDom = resizer ? resizer.cloneNode(true) : domRef.current.cloneNode(true);
 
   // Remove any margin from the cloned element to ensure is doesn't position incorrectly
   clonedDom.style.marginLeft = '0';

package/dist/esm/ui/drop-target.js

@@ -9,21 +9,22 @@ var styleHighlighted = css({
   height: "var(--ds-space-100, 8px)",
   marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", " - ", DROP_TARGET_LINE_WIDTH, "px)"),
   marginLeft: "var(--ds-space-negative-100, -8px)",
-  top: "calc(".concat("var(--ds-space-100, 8px)", " / 2 - 2.5px)"),
-  //2.5px to help clear expand node margin
+  top: "calc(".concat("var(--ds-space-100, 8px)", " / 2 - 1px)"),
+  //1px to help clear expand node margin
   position: 'relative',
   borderBottom: "solid ".concat("var(--ds-border-selected, ".concat(B300, ")"), " ", DROP_TARGET_LINE_WIDTH, "px"),
   "&:before": {
     content: '""',
     width: "".concat(DROP_TARGET_CIRCLE_DIAMETER, "px"),
     height: "".concat(DROP_TARGET_CIRCLE_DIAMETER, "px"),
-    marginTop: "calc(".concat(DROP_TARGET_CIRCLE_DIAMETER, " + ").concat(DROP_TARGET_LINE_WIDTH, " * 2)px"),
+    marginTop: "".concat(DROP_TARGET_CIRCLE_DIAMETER, "px"),
     borderRadius: '50%',
     border: "solid ".concat("var(--ds-border-selected, ".concat(B300, ")"), " ", DROP_TARGET_LINE_WIDTH, "px"),
     backgroundColor: "var(--ds-background-input, white)",
     display: 'block',
     position: 'absolute',
-    bottom: '-5px'
+    bottom: "".concat(-(DROP_TARGET_CIRCLE_DIAMETER + DROP_TARGET_LINE_WIDTH) / 2, "px"),
+    boxSizing: 'border-box'
   }
 });
 var styleDisabled = css({

package/dist/types/ui/consts.d.ts

@@ -1,6 +1,6 @@
 export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_WIDTH = 12;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
-export declare const DROP_TARGET_LINE_WIDTH = 2;
-export declare const DROP_TARGET_CIRCLE_DIAMETER = 4;
 export declare const DRAG_HANDLE_NODE_GAP = 12;
+export declare const DROP_TARGET_LINE_WIDTH = 2;
+export declare const DROP_TARGET_CIRCLE_DIAMETER = 8;

package/dist/types-ts4.5/ui/consts.d.ts

@@ -1,6 +1,6 @@
 export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_WIDTH = 12;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
-export declare const DROP_TARGET_LINE_WIDTH = 2;
-export declare const DROP_TARGET_CIRCLE_DIAMETER = 4;
 export declare const DRAG_HANDLE_NODE_GAP = 12;
+export declare const DROP_TARGET_LINE_WIDTH = 2;
+export declare const DROP_TARGET_CIRCLE_DIAMETER = 8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-block-controls",
-  "version": "1.3.9",
+  "version": "1.3.11",
   "description": "Block controls plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,7 +31,7 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^80.3.0",
+    "@atlaskit/editor-common": "^80.4.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
     "@atlaskit/icon": "^22.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",