@atlaskit/editor-plugin-block-controls 1.4.16 → 1.4.17

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/ui/mouse-move-wrapper.js +14 -9
  3. package/dist/es2019/ui/mouse-move-wrapper.js +14 -10
  4. package/dist/esm/ui/mouse-move-wrapper.js +15 -10
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.4.17
4
+
5
+ ### Patch Changes
6
+
7
+ - [#110808](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110808)
8
+ [`3ae32439b454c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3ae32439b454c) -
9
+ ED-23725 Fix issue where drag and drop breaks after node type changes and when text selection is
10
+ not allowed if user moves mouse to node before page finishes loading
11
+
3
12
  ## 1.4.16
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/ui/mouse-move-wrapper.js CHANGED
@@ -8,6 +8,7 @@ exports.MouseMoveWrapper = void 0;
8
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
9
  var _react = require("react");
10
10
  var _react2 = require("@emotion/react");
11
+ var _hooks = require("@atlaskit/editor-common/hooks");
11
12
  var _dragHandlePositions = require("../utils/drag-handle-positions");
12
13
  /** @jsx jsx */
13
14
 
@@ -22,16 +23,22 @@ var mouseMoveWrapperStyles = (0, _react2.css)({
22
23
  zIndex: 1
23
24
  });
24
25
  var MouseMoveWrapper = exports.MouseMoveWrapper = function MouseMoveWrapper(_ref) {
26
+ var _blockControlsState$a;
25
27
  var view = _ref.view,
26
28
  api = _ref.api,
27
29
  anchorName = _ref.anchorName,
28
30
  nodeType = _ref.nodeType,
29
31
  getPos = _ref.getPos;
32
+ var nodePos = (0, _react.useMemo)(function () {
33
+ return getPos();
34
+ }, [getPos]);
35
+ var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockControls']),
36
+ blockControlsState = _useSharedPluginState.blockControlsState;
30
37
  var _useState = (0, _react.useState)(false),
31
38
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
32
39
  isDragging = _useState2[0],
33
40
  setIsDragging = _useState2[1];
34
- var _useState3 = (0, _react.useState)(false),
41
+ var _useState3 = (0, _react.useState)((blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$a = blockControlsState.activeNode) === null || _blockControlsState$a === void 0 ? void 0 : _blockControlsState$a.pos) === nodePos),
35
42
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
36
43
  hideWrapper = _useState4[0],
37
44
  setHideWrapper = _useState4[1];
@@ -43,38 +50,36 @@ var MouseMoveWrapper = exports.MouseMoveWrapper = function MouseMoveWrapper(_ref
43
50
  if (!isDragging) {
44
51
  setHideWrapper(true);
45
52
  }
46
- var pos = getPos();
47
- if (pos === undefined) {
53
+ if (nodePos === undefined) {
48
54
  return;
49
55
  }
50
56
  if (api && api.blockControls && !isDragging) {
51
57
  var _api$core;
52
- api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api.blockControls.commands.showDragHandleAt(pos, anchorName, nodeType));
58
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api.blockControls.commands.showDragHandleAt(nodePos, anchorName, nodeType));
53
59
  }
54
- }, [setHideWrapper, isDragging, api, getPos, anchorName, nodeType]);
60
+ }, [setHideWrapper, isDragging, api, nodePos, anchorName, nodeType]);
55
61
  (0, _react.useEffect)(function () {
56
62
  var _api$blockControls;
57
63
  var unbind = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.onChange(function (_ref2) {
58
64
  var _nextSharedState$acti;
59
65
  var nextSharedState = _ref2.nextSharedState;
60
- var pos = getPos();
61
66
  setIsDragging(Boolean(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging));
62
67
  if (!(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.activeNode)) {
63
68
  return;
64
69
  }
65
- if ((nextSharedState === null || nextSharedState === void 0 || (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.pos) !== pos && !(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging)) {
70
+ if ((nextSharedState === null || nextSharedState === void 0 || (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.pos) !== nodePos && !(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging)) {
66
71
  setHideWrapper(false);
67
72
  return;
68
73
  }
69
74
  if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging) {
70
- setHideWrapper(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging);
75
+ setHideWrapper(true);
71
76
  return;
72
77
  }
73
78
  });
74
79
  return function () {
75
80
  unbind === null || unbind === void 0 || unbind();
76
81
  };
77
- }, [getPos, api]);
82
+ }, [nodePos, api]);
78
83
  (0, _react.useLayoutEffect)(function () {
79
84
  var supportsAnchor = CSS.supports('height', "anchor-size(".concat(anchorName, " height)")) && CSS.supports('top', "anchor(".concat(anchorName, " start)"));
80
85
  if (supportsAnchor) {
package/dist/es2019/ui/mouse-move-wrapper.js CHANGED
@@ -1,6 +1,7 @@
1
1
  /** @jsx jsx */
2
- import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
2
+ import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
+ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
4
5
  import { getTopPosition } from '../utils/drag-handle-positions';
5
6
  const basicStyles = css({
6
7
  position: 'absolute',
@@ -19,46 +20,49 @@ export const MouseMoveWrapper = ({
19
20
  nodeType,
20
21
  getPos
21
22
  }) => {
23
+ var _blockControlsState$a;
24
+ const nodePos = useMemo(() => getPos(), [getPos]);
25
+ const {
26
+ blockControlsState
27
+ } = useSharedPluginState(api, ['blockControls']);
22
28
  const [isDragging, setIsDragging] = useState(false);
23
- const [hideWrapper, setHideWrapper] = useState(false);
29
+ const [hideWrapper, setHideWrapper] = useState((blockControlsState === null || blockControlsState === void 0 ? void 0 : (_blockControlsState$a = blockControlsState.activeNode) === null || _blockControlsState$a === void 0 ? void 0 : _blockControlsState$a.pos) === nodePos);
24
30
  const [pos, setPos] = useState();
25
31
  const onMouseEnter = useCallback(() => {
26
32
  if (!isDragging) {
27
33
  setHideWrapper(true);
28
34
  }
29
- const pos = getPos();
30
- if (pos === undefined) {
35
+ if (nodePos === undefined) {
31
36
  return;
32
37
  }
33
38
  if (api && api.blockControls && !isDragging) {
34
39
  var _api$core;
35
- api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api.blockControls.commands.showDragHandleAt(pos, anchorName, nodeType));
40
+ api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api.blockControls.commands.showDragHandleAt(nodePos, anchorName, nodeType));
36
41
  }
37
- }, [setHideWrapper, isDragging, api, getPos, anchorName, nodeType]);
42
+ }, [setHideWrapper, isDragging, api, nodePos, anchorName, nodeType]);
38
43
  useEffect(() => {
39
44
  var _api$blockControls;
40
45
  const unbind = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.onChange(({
41
46
  nextSharedState
42
47
  }) => {
43
48
  var _nextSharedState$acti;
44
- const pos = getPos();
45
49
  setIsDragging(Boolean(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging));
46
50
  if (!(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.activeNode)) {
47
51
  return;
48
52
  }
49
- if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.pos) !== pos && !(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging)) {
53
+ if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.pos) !== nodePos && !(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging)) {
50
54
  setHideWrapper(false);
51
55
  return;
52
56
  }
53
57
  if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging) {
54
- setHideWrapper(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging);
58
+ setHideWrapper(true);
55
59
  return;
56
60
  }
57
61
  });
58
62
  return () => {
59
63
  unbind === null || unbind === void 0 ? void 0 : unbind();
60
64
  };
61
- }, [getPos, api]);
65
+ }, [nodePos, api]);
62
66
  useLayoutEffect(() => {
63
67
  const supportsAnchor = CSS.supports('height', `anchor-size(${anchorName} height)`) && CSS.supports('top', `anchor(${anchorName} start)`);
64
68
  if (supportsAnchor) {
package/dist/esm/ui/mouse-move-wrapper.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  /** @jsx jsx */
3
- import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
3
+ import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
+ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
5
6
  import { getTopPosition } from '../utils/drag-handle-positions';
6
7
  var basicStyles = css({
7
8
  position: 'absolute',
@@ -14,16 +15,22 @@ var mouseMoveWrapperStyles = css({
14
15
  zIndex: 1
15
16
  });
16
17
  export var MouseMoveWrapper = function MouseMoveWrapper(_ref) {
18
+ var _blockControlsState$a;
17
19
  var view = _ref.view,
18
20
  api = _ref.api,
19
21
  anchorName = _ref.anchorName,
20
22
  nodeType = _ref.nodeType,
21
23
  getPos = _ref.getPos;
24
+ var nodePos = useMemo(function () {
25
+ return getPos();
26
+ }, [getPos]);
27
+ var _useSharedPluginState = useSharedPluginState(api, ['blockControls']),
28
+ blockControlsState = _useSharedPluginState.blockControlsState;
22
29
  var _useState = useState(false),
23
30
  _useState2 = _slicedToArray(_useState, 2),
24
31
  isDragging = _useState2[0],
25
32
  setIsDragging = _useState2[1];
26
- var _useState3 = useState(false),
33
+ var _useState3 = useState((blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$a = blockControlsState.activeNode) === null || _blockControlsState$a === void 0 ? void 0 : _blockControlsState$a.pos) === nodePos),
27
34
  _useState4 = _slicedToArray(_useState3, 2),
28
35
  hideWrapper = _useState4[0],
29
36
  setHideWrapper = _useState4[1];
@@ -35,38 +42,36 @@ export var MouseMoveWrapper = function MouseMoveWrapper(_ref) {
35
42
  if (!isDragging) {
36
43
  setHideWrapper(true);
37
44
  }
38
- var pos = getPos();
39
- if (pos === undefined) {
45
+ if (nodePos === undefined) {
40
46
  return;
41
47
  }
42
48
  if (api && api.blockControls && !isDragging) {
43
49
  var _api$core;
44
- api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api.blockControls.commands.showDragHandleAt(pos, anchorName, nodeType));
50
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api.blockControls.commands.showDragHandleAt(nodePos, anchorName, nodeType));
45
51
  }
46
- }, [setHideWrapper, isDragging, api, getPos, anchorName, nodeType]);
52
+ }, [setHideWrapper, isDragging, api, nodePos, anchorName, nodeType]);
47
53
  useEffect(function () {
48
54
  var _api$blockControls;
49
55
  var unbind = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.onChange(function (_ref2) {
50
56
  var _nextSharedState$acti;
51
57
  var nextSharedState = _ref2.nextSharedState;
52
- var pos = getPos();
53
58
  setIsDragging(Boolean(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging));
54
59
  if (!(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.activeNode)) {
55
60
  return;
56
61
  }
57
- if ((nextSharedState === null || nextSharedState === void 0 || (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.pos) !== pos && !(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging)) {
62
+ if ((nextSharedState === null || nextSharedState === void 0 || (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.pos) !== nodePos && !(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging)) {
58
63
  setHideWrapper(false);
59
64
  return;
60
65
  }
61
66
  if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging) {
62
- setHideWrapper(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging);
67
+ setHideWrapper(true);
63
68
  return;
64
69
  }
65
70
  });
66
71
  return function () {
67
72
  unbind === null || unbind === void 0 || unbind();
68
73
  };
69
- }, [getPos, api]);
74
+ }, [nodePos, api]);
70
75
  useLayoutEffect(function () {
71
76
  var supportsAnchor = CSS.supports('height', "anchor-size(".concat(anchorName, " height)")) && CSS.supports('top', "anchor(".concat(anchorName, " start)"));
72
77
  if (supportsAnchor) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.4.16",
3
+ "version": "1.4.17",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",