@atlaskit/editor-plugin-block-controls 1.3.8 → 1.3.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.3.10
4
+
5
+ ### Patch Changes
6
+
7
+ - [#100964](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100964)
8
+ [`d58e7d6f08e4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d58e7d6f08e4) -
9
+ [ux] Tweak CSS styles for drop targets
10
+
11
+ ## 1.3.9
12
+
13
+ ### Patch Changes
14
+
15
+ - [#100922](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100922)
16
+ [`d69797fc32b6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d69797fc32b6) -
17
+ ED-22939 Fix drag handle not appearing for first node of document
18
+
3
19
  ## 1.3.8
4
20
 
5
21
  ### Patch Changes
@@ -93,7 +93,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
93
93
  left: event.clientX,
94
94
  top: event.clientY
95
95
  });
96
- if (pos !== null && pos !== void 0 && pos.inside && pos.inside > 0) {
96
+ if ((pos === null || pos === void 0 ? void 0 : pos.inside) !== undefined && pos.inside >= 0) {
97
97
  var _api$core;
98
98
  var node = view.state.doc.nodeAt(pos.inside);
99
99
  if (!node) {
@@ -7,6 +7,6 @@ exports.DROP_TARGET_LINE_WIDTH = exports.DROP_TARGET_CIRCLE_DIAMETER = exports.D
7
7
  var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
8
8
  var DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_WIDTH = 12;
9
9
  var DRAG_HANDLE_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
10
+ var DRAG_HANDLE_NODE_GAP = exports.DRAG_HANDLE_NODE_GAP = 12;
10
11
  var DROP_TARGET_LINE_WIDTH = exports.DROP_TARGET_LINE_WIDTH = 2;
11
- var DROP_TARGET_CIRCLE_DIAMETER = exports.DROP_TARGET_CIRCLE_DIAMETER = 4;
12
- var DRAG_HANDLE_NODE_GAP = exports.DRAG_HANDLE_NODE_GAP = 12;
12
+ var DROP_TARGET_CIRCLE_DIAMETER = exports.DROP_TARGET_CIRCLE_DIAMETER = 8;
@@ -17,21 +17,22 @@ var styleHighlighted = (0, _react2.css)({
17
17
  height: "var(--ds-space-100, 8px)",
18
18
  marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", " - ", _consts.DROP_TARGET_LINE_WIDTH, "px)"),
19
19
  marginLeft: "var(--ds-space-negative-100, -8px)",
20
- top: "calc(".concat("var(--ds-space-100, 8px)", " / 2 - 2.5px)"),
21
- //2.5px to help clear expand node margin
20
+ top: "calc(".concat("var(--ds-space-100, 8px)", " / 2 - 1px)"),
21
+ //1px to help clear expand node margin
22
22
  position: 'relative',
23
23
  borderBottom: "solid ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")"), " ", _consts.DROP_TARGET_LINE_WIDTH, "px"),
24
24
  "&:before": {
25
25
  content: '""',
26
26
  width: "".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, "px"),
27
27
  height: "".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, "px"),
28
- marginTop: "calc(".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, " + ").concat(_consts.DROP_TARGET_LINE_WIDTH, " * 2)px"),
28
+ marginTop: "".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, "px"),
29
29
  borderRadius: '50%',
30
30
  border: "solid ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")"), " ", _consts.DROP_TARGET_LINE_WIDTH, "px"),
31
31
  backgroundColor: "var(--ds-background-input, white)",
32
32
  display: 'block',
33
33
  position: 'absolute',
34
- bottom: '-5px'
34
+ bottom: "".concat(-(_consts.DROP_TARGET_CIRCLE_DIAMETER + _consts.DROP_TARGET_LINE_WIDTH) / 2, "px"),
35
+ boxSizing: 'border-box'
35
36
  }
36
37
  });
37
38
  var styleDisabled = (0, _react2.css)({
@@ -91,7 +91,7 @@ export const createPlugin = api => {
91
91
  left: event.clientX,
92
92
  top: event.clientY
93
93
  });
94
- if (pos !== null && pos !== void 0 && pos.inside && pos.inside > 0) {
94
+ if ((pos === null || pos === void 0 ? void 0 : pos.inside) !== undefined && pos.inside >= 0) {
95
95
  var _api$core;
96
96
  const node = view.state.doc.nodeAt(pos.inside);
97
97
  if (!node) {
@@ -1,6 +1,6 @@
1
1
  export const DRAG_HANDLE_HEIGHT = 24;
2
2
  export const DRAG_HANDLE_WIDTH = 12;
3
3
  export const DRAG_HANDLE_BORDER_RADIUS = 4;
4
+ export const DRAG_HANDLE_NODE_GAP = 12;
4
5
  export const DROP_TARGET_LINE_WIDTH = 2;
5
- export const DROP_TARGET_CIRCLE_DIAMETER = 4;
6
- export const DRAG_HANDLE_NODE_GAP = 12;
6
+ export const DROP_TARGET_CIRCLE_DIAMETER = 8;
@@ -8,21 +8,22 @@ const styleHighlighted = css({
8
8
  height: "var(--ds-space-100, 8px)",
9
9
  marginTop: `calc(${"var(--ds-space-negative-100, -8px)"} - ${DROP_TARGET_LINE_WIDTH}px)`,
10
10
  marginLeft: "var(--ds-space-negative-100, -8px)",
11
- top: `calc(${"var(--ds-space-100, 8px)"} / 2 - 2.5px)`,
12
- //2.5px to help clear expand node margin
11
+ top: `calc(${"var(--ds-space-100, 8px)"} / 2 - 1px)`,
12
+ //1px to help clear expand node margin
13
13
  position: 'relative',
14
14
  borderBottom: `solid ${`var(--ds-border-selected, ${B300})`} ${DROP_TARGET_LINE_WIDTH}px`,
15
15
  "&:before": {
16
16
  content: '""',
17
17
  width: `${DROP_TARGET_CIRCLE_DIAMETER}px`,
18
18
  height: `${DROP_TARGET_CIRCLE_DIAMETER}px`,
19
- marginTop: `calc(${DROP_TARGET_CIRCLE_DIAMETER} + ${DROP_TARGET_LINE_WIDTH} * 2)px`,
19
+ marginTop: `${DROP_TARGET_CIRCLE_DIAMETER}px`,
20
20
  borderRadius: '50%',
21
21
  border: `solid ${`var(--ds-border-selected, ${B300})`} ${DROP_TARGET_LINE_WIDTH}px`,
22
22
  backgroundColor: "var(--ds-background-input, white)",
23
23
  display: 'block',
24
24
  position: 'absolute',
25
- bottom: '-5px'
25
+ bottom: `${-(DROP_TARGET_CIRCLE_DIAMETER + DROP_TARGET_LINE_WIDTH) / 2}px`,
26
+ boxSizing: 'border-box'
26
27
  }
27
28
  });
28
29
  const styleDisabled = css({
@@ -87,7 +87,7 @@ export var createPlugin = function createPlugin(api) {
87
87
  left: event.clientX,
88
88
  top: event.clientY
89
89
  });
90
- if (pos !== null && pos !== void 0 && pos.inside && pos.inside > 0) {
90
+ if ((pos === null || pos === void 0 ? void 0 : pos.inside) !== undefined && pos.inside >= 0) {
91
91
  var _api$core;
92
92
  var node = view.state.doc.nodeAt(pos.inside);
93
93
  if (!node) {
@@ -1,6 +1,6 @@
1
1
  export var DRAG_HANDLE_HEIGHT = 24;
2
2
  export var DRAG_HANDLE_WIDTH = 12;
3
3
  export var DRAG_HANDLE_BORDER_RADIUS = 4;
4
+ export var DRAG_HANDLE_NODE_GAP = 12;
4
5
  export var DROP_TARGET_LINE_WIDTH = 2;
5
- export var DROP_TARGET_CIRCLE_DIAMETER = 4;
6
- export var DRAG_HANDLE_NODE_GAP = 12;
6
+ export var DROP_TARGET_CIRCLE_DIAMETER = 8;
@@ -9,21 +9,22 @@ var styleHighlighted = css({
9
9
  height: "var(--ds-space-100, 8px)",
10
10
  marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", " - ", DROP_TARGET_LINE_WIDTH, "px)"),
11
11
  marginLeft: "var(--ds-space-negative-100, -8px)",
12
- top: "calc(".concat("var(--ds-space-100, 8px)", " / 2 - 2.5px)"),
13
- //2.5px to help clear expand node margin
12
+ top: "calc(".concat("var(--ds-space-100, 8px)", " / 2 - 1px)"),
13
+ //1px to help clear expand node margin
14
14
  position: 'relative',
15
15
  borderBottom: "solid ".concat("var(--ds-border-selected, ".concat(B300, ")"), " ", DROP_TARGET_LINE_WIDTH, "px"),
16
16
  "&:before": {
17
17
  content: '""',
18
18
  width: "".concat(DROP_TARGET_CIRCLE_DIAMETER, "px"),
19
19
  height: "".concat(DROP_TARGET_CIRCLE_DIAMETER, "px"),
20
- marginTop: "calc(".concat(DROP_TARGET_CIRCLE_DIAMETER, " + ").concat(DROP_TARGET_LINE_WIDTH, " * 2)px"),
20
+ marginTop: "".concat(DROP_TARGET_CIRCLE_DIAMETER, "px"),
21
21
  borderRadius: '50%',
22
22
  border: "solid ".concat("var(--ds-border-selected, ".concat(B300, ")"), " ", DROP_TARGET_LINE_WIDTH, "px"),
23
23
  backgroundColor: "var(--ds-background-input, white)",
24
24
  display: 'block',
25
25
  position: 'absolute',
26
- bottom: '-5px'
26
+ bottom: "".concat(-(DROP_TARGET_CIRCLE_DIAMETER + DROP_TARGET_LINE_WIDTH) / 2, "px"),
27
+ boxSizing: 'border-box'
27
28
  }
28
29
  });
29
30
  var styleDisabled = css({
@@ -1,6 +1,6 @@
1
1
  export declare const DRAG_HANDLE_HEIGHT = 24;
2
2
  export declare const DRAG_HANDLE_WIDTH = 12;
3
3
  export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
4
- export declare const DROP_TARGET_LINE_WIDTH = 2;
5
- export declare const DROP_TARGET_CIRCLE_DIAMETER = 4;
6
4
  export declare const DRAG_HANDLE_NODE_GAP = 12;
5
+ export declare const DROP_TARGET_LINE_WIDTH = 2;
6
+ export declare const DROP_TARGET_CIRCLE_DIAMETER = 8;
@@ -1,6 +1,6 @@
1
1
  export declare const DRAG_HANDLE_HEIGHT = 24;
2
2
  export declare const DRAG_HANDLE_WIDTH = 12;
3
3
  export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
4
- export declare const DROP_TARGET_LINE_WIDTH = 2;
5
- export declare const DROP_TARGET_CIRCLE_DIAMETER = 4;
6
4
  export declare const DRAG_HANDLE_NODE_GAP = 12;
5
+ export declare const DROP_TARGET_LINE_WIDTH = 2;
6
+ export declare const DROP_TARGET_CIRCLE_DIAMETER = 8;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.3.8",
3
+ "version": "1.3.10",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",