@atlaskit/editor-plugin-block-controls 1.4.18 → 1.4.20

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 (10) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/cjs/pm-plugins/main.js +57 -32
  3. package/dist/cjs/ui/mouse-move-wrapper.js +41 -29
  4. package/dist/es2019/pm-plugins/main.js +48 -24
  5. package/dist/es2019/ui/mouse-move-wrapper.js +42 -29
  6. package/dist/esm/pm-plugins/main.js +57 -32
  7. package/dist/esm/ui/mouse-move-wrapper.js +42 -30
  8. package/dist/types/types.d.ts +2 -0
  9. package/dist/types-ts4.5/types.d.ts +2 -0
  10. package/package.json +99 -94
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.4.20
4
+
5
+ ### Patch Changes
6
+
7
+ - [#111514](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111514)
8
+ [`a1b90bef5f34b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a1b90bef5f34b) -
9
+ [ux] Revert: Fix cursor and handle position when changing node type
10
+ - Updated dependencies
11
+
12
+ ## 1.4.19
13
+
14
+ ### Patch Changes
15
+
16
+ - [#111390](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111390)
17
+ [`bf010fb12e305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bf010fb12e305) -
18
+ ED-23630 Call getPos in callbacks to fix node splitting and attach event listener when component
19
+ loads to show wrapper
20
+ - [#111385](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111385)
21
+ [`181c5854ec25f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/181c5854ec25f) -
22
+ remove sharedstate onchange handler from mousemovewrapper
23
+ - [#111045](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111045)
24
+ [`2f693993423ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2f693993423ec) -
25
+ improve input latency of drag and drop experience and hide drag handle during resizing
26
+ - [#111418](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111418)
27
+ [`b351451c2ccb1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b351451c2ccb1) -
28
+ add docsize limit for dnd
29
+ - Updated dependencies
30
+
3
31
  ## 1.4.18
4
32
 
5
33
  ### Patch Changes
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -11,6 +11,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
11
11
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
12
12
  var _state = require("@atlaskit/editor-prosemirror/state");
13
13
  var _view = require("@atlaskit/editor-prosemirror/view");
14
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
15
  var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
15
16
  var _decorations = require("./decorations");
16
17
  var key = exports.key = new _state.PluginKey('blockControls');
@@ -49,58 +50,80 @@ var destroyFn = function destroyFn(api) {
49
50
  }
50
51
  });
51
52
  };
53
+ var initialState = {
54
+ decorations: _view.DecorationSet.empty,
55
+ decorationState: [],
56
+ activeNode: null,
57
+ isDragging: false,
58
+ isMenuOpen: false,
59
+ start: null,
60
+ end: null,
61
+ editorHeight: 0,
62
+ isResizerResizing: false,
63
+ isDocSizeLimitEnabled: false
64
+ };
65
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
66
+ initialState.isDocSizeLimitEnabled = true;
67
+ }
68
+ var DRAG_AND_DROP_DOC_SIZE_LIMIT = 20000;
52
69
  var createPlugin = exports.createPlugin = function createPlugin(api) {
53
70
  return new _safePlugin.SafePlugin({
54
71
  key: key,
55
72
  state: {
56
73
  init: function init() {
57
- return {
58
- decorations: _view.DecorationSet.empty,
59
- decorationState: [],
60
- activeNode: null,
61
- isDragging: false,
62
- isMenuOpen: false,
63
- start: null,
64
- end: null,
65
- editorHeight: 0
66
- };
74
+ return initialState;
67
75
  },
68
76
  apply: function apply(tr, currentState, oldState, newState) {
69
- var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
77
+ var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight, _isResizerResizing;
78
+ if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
79
+ return initialState;
80
+ }
70
81
  var activeNode = currentState.activeNode,
71
82
  decorations = currentState.decorations,
72
83
  isMenuOpen = currentState.isMenuOpen,
73
84
  decorationState = currentState.decorationState,
74
- editorHeight = currentState.editorHeight;
85
+ editorHeight = currentState.editorHeight,
86
+ isResizerResizing = currentState.isResizerResizing;
75
87
  var meta = tr.getMeta(key);
76
88
 
89
+ // If tables or media are being resized, we want to hide the drag handle
90
+ var resizerMeta = tr.getMeta('is-resizer-resizing');
91
+ isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
92
+ var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
93
+
94
+ // This is not targeted enough - it's trying to catch events like expand being set to breakout
95
+ var maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && oldState.doc.childCount === newState.doc.childCount;
96
+ var nodeCountChanged = oldState.doc.childCount !== newState.doc.childCount;
97
+
98
+ // During resize, remove the drag handle widget
99
+ if (isResizerResizing || nodeCountChanged) {
100
+ var oldHandle = decorations.find().filter(function (_ref5) {
101
+ var spec = _ref5.spec;
102
+ return spec.id === 'drag-handle';
103
+ });
104
+ decorations = decorations.remove(oldHandle);
105
+ }
106
+
77
107
  // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
78
- var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || tr.docChanged && tr.doc.childCount === newState.doc.childCount || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) && tr.docChanged;
79
- if (redrawDecorations && api) {
108
+ var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || resizerMeta === false || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) && tr.docChanged;
109
+ if (redrawDecorations && isResizerResizing === false && api) {
80
110
  decorations = _view.DecorationSet.create(newState.doc, []);
81
111
  var nodeDecs = (0, _decorations.nodeDecorations)(newState);
82
112
  var mouseWrapperDecs = (0, _decorations.mouseMoveWrapperDecorations)(newState, api);
83
113
  decorations = decorations.add(newState.doc, [].concat((0, _toConsumableArray2.default)(nodeDecs), (0, _toConsumableArray2.default)(mouseWrapperDecs)));
84
114
  if (activeNode) {
85
- var newActiveNode = activeNode && tr.doc.nodeAt(activeNode.pos);
86
- var nodeType = activeNode.nodeType;
87
- var anchorName = activeNode.anchorName;
88
- if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
89
- nodeType = newActiveNode.type.name;
90
- anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
91
- }
92
- var draghandleDec = (0, _decorations.dragHandleDecoration)(activeNode.pos, anchorName, nodeType, api);
115
+ var draghandleDec = (0, _decorations.dragHandleDecoration)(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
93
116
  decorations = decorations.add(newState.doc, [draghandleDec]);
94
117
  }
95
118
  }
96
119
 
97
120
  // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
98
121
  if (meta !== null && meta !== void 0 && meta.activeNode && (meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) && api) {
99
- var oldHandle = decorations.find().filter(function (_ref5) {
100
- var spec = _ref5.spec;
122
+ var _oldHandle = decorations.find().filter(function (_ref6) {
123
+ var spec = _ref6.spec;
101
124
  return spec.id === 'drag-handle';
102
125
  });
103
- decorations = decorations.remove(oldHandle);
126
+ decorations = decorations.remove(_oldHandle);
104
127
  var decs = (0, _decorations.dragHandleDecoration)(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api);
105
128
  decorations = decorations.add(newState.doc, [decs]);
106
129
  }
@@ -116,8 +139,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
116
139
 
117
140
  // Remove drop target decoration when dragging stops
118
141
  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
119
- var dropTargetDecs = decorations.find().filter(function (_ref6) {
120
- var spec = _ref6.spec;
142
+ var dropTargetDecs = decorations.find().filter(function (_ref7) {
143
+ var spec = _ref7.spec;
121
144
  return spec.type === 'drop-target-decoration';
122
145
  });
123
146
  decorations = decorations.remove(dropTargetDecs);
@@ -125,9 +148,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
125
148
 
126
149
  // Map drop target decoration positions when the document changes
127
150
  if (tr.docChanged && currentState.isDragging) {
128
- decorationState = decorationState.map(function (_ref7) {
129
- var index = _ref7.index,
130
- pos = _ref7.pos;
151
+ decorationState = decorationState.map(function (_ref8) {
152
+ var index = _ref8.index,
153
+ pos = _ref8.pos;
131
154
  return {
132
155
  index: index,
133
156
  pos: tr.mapping.map(pos)
@@ -149,10 +172,12 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
149
172
  return {
150
173
  decorations: decorations,
151
174
  decorationState: (_decorationState = decorationState) !== null && _decorationState !== void 0 ? _decorationState : currentState.decorationState,
152
- activeNode: (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : mappedActiveNodePos,
175
+ activeNode: isEmptyDoc ? null : (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : mappedActiveNodePos,
153
176
  isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : currentState.isDragging,
154
177
  isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
155
- editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight
178
+ editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
179
+ isResizerResizing: (_isResizerResizing = isResizerResizing) !== null && _isResizerResizing !== void 0 ? _isResizerResizing : isResizerResizing,
180
+ isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled
156
181
  };
157
182
  }
158
183
  },
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 _bindEventListener = require("bind-event-listener");
11
12
  var _hooks = require("@atlaskit/editor-common/hooks");
12
13
  var _dragHandlePositions = require("../utils/drag-handle-positions");
13
14
  /** @jsx jsx */
@@ -23,63 +24,73 @@ var mouseMoveWrapperStyles = (0, _react2.css)({
23
24
  zIndex: 1
24
25
  });
25
26
  var MouseMoveWrapper = exports.MouseMoveWrapper = function MouseMoveWrapper(_ref) {
26
- var _blockControlsState$a;
27
27
  var view = _ref.view,
28
28
  api = _ref.api,
29
29
  anchorName = _ref.anchorName,
30
30
  nodeType = _ref.nodeType,
31
31
  getPos = _ref.getPos;
32
- var nodePos = (0, _react.useMemo)(function () {
33
- return getPos();
34
- }, [getPos]);
35
32
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockControls']),
36
33
  blockControlsState = _useSharedPluginState.blockControlsState;
37
34
  var _useState = (0, _react.useState)(false),
38
35
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
39
36
  isDragging = _useState2[0],
40
37
  setIsDragging = _useState2[1];
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),
38
+ var _useState3 = (0, _react.useState)(false),
42
39
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
43
40
  hideWrapper = _useState4[0],
44
41
  setHideWrapper = _useState4[1];
42
+ var ref = (0, _react.useRef)(null);
45
43
  var _useState5 = (0, _react.useState)(),
46
44
  _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
47
45
  pos = _useState6[0],
48
46
  setPos = _useState6[1];
47
+ (0, _react.useEffect)(function () {
48
+ // Adding this event listener to fix issue where wrapper isn't hidden if user navigates to node before page finishes loading
49
+ // This will be removed when we refactor to remove this component
50
+ var unbind;
51
+ if (ref.current) {
52
+ unbind = (0, _bindEventListener.bind)(ref.current, {
53
+ type: 'mousemove',
54
+ listener: function listener() {
55
+ setHideWrapper(true);
56
+ unbind();
57
+ }
58
+ });
59
+ }
60
+ return function () {
61
+ var _unbind;
62
+ return (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
63
+ };
64
+ }, []);
49
65
  var onMouseEnter = (0, _react.useCallback)(function () {
50
66
  if (!isDragging) {
51
67
  setHideWrapper(true);
52
68
  }
53
- if (nodePos === undefined) {
69
+ var pos = getPos();
70
+ if (pos === undefined) {
54
71
  return;
55
72
  }
56
73
  if (api && api.blockControls && !isDragging) {
57
74
  var _api$core;
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));
75
+ 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));
59
76
  }
60
- }, [setHideWrapper, isDragging, api, nodePos, anchorName, nodeType]);
77
+ }, [setHideWrapper, getPos, isDragging, api, anchorName, nodeType]);
61
78
  (0, _react.useEffect)(function () {
62
- var _api$blockControls;
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) {
64
- var _nextSharedState$acti;
65
- var nextSharedState = _ref2.nextSharedState;
66
- setIsDragging(Boolean(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging));
67
- if (!(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.activeNode)) {
68
- return;
69
- }
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)) {
71
- setHideWrapper(false);
72
- return;
73
- }
74
- if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging) {
75
- setHideWrapper(true);
76
- return;
77
- }
78
- });
79
- return function () {
80
- unbind === null || unbind === void 0 || unbind();
81
- };
82
- }, [nodePos, api]);
79
+ var _blockControlsState$a;
80
+ setIsDragging(Boolean(blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging));
81
+ var pos = getPos();
82
+ if (!(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.activeNode)) {
83
+ return;
84
+ }
85
+ if ((blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$a = blockControlsState.activeNode) === null || _blockControlsState$a === void 0 ? void 0 : _blockControlsState$a.pos) !== pos && !(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging)) {
86
+ setHideWrapper(false);
87
+ return;
88
+ }
89
+ if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging) {
90
+ setHideWrapper(true);
91
+ return;
92
+ }
93
+ }, [getPos, blockControlsState]);
83
94
  (0, _react.useLayoutEffect)(function () {
84
95
  var supportsAnchor = CSS.supports('height', "anchor-size(".concat(anchorName, " height)")) && CSS.supports('top', "anchor(".concat(anchorName, " start)"));
85
96
  if (supportsAnchor) {
@@ -104,6 +115,7 @@ var MouseMoveWrapper = exports.MouseMoveWrapper = function MouseMoveWrapper(_ref
104
115
  };
105
116
  }, [view, anchorName]);
106
117
  return (0, _react2.jsx)("div", {
118
+ ref: ref,
107
119
  onMouseEnter: onMouseEnter,
108
120
  css: [basicStyles, !hideWrapper && mouseMoveWrapperStyles]
109
121
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -3,6 +3,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
3
3
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
4
4
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
5
5
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
6
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
6
7
  import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
7
8
  import { dragHandleDecoration, dropTargetDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
8
9
  export const key = new PluginKey('blockControls');
@@ -43,49 +44,70 @@ const destroyFn = api => {
43
44
  }
44
45
  });
45
46
  };
47
+ const initialState = {
48
+ decorations: DecorationSet.empty,
49
+ decorationState: [],
50
+ activeNode: null,
51
+ isDragging: false,
52
+ isMenuOpen: false,
53
+ start: null,
54
+ end: null,
55
+ editorHeight: 0,
56
+ isResizerResizing: false,
57
+ isDocSizeLimitEnabled: false
58
+ };
59
+ if (getBooleanFF('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
60
+ initialState.isDocSizeLimitEnabled = true;
61
+ }
62
+ const DRAG_AND_DROP_DOC_SIZE_LIMIT = 20000;
46
63
  export const createPlugin = api => {
47
64
  return new SafePlugin({
48
65
  key,
49
66
  state: {
50
67
  init() {
51
- return {
52
- decorations: DecorationSet.empty,
53
- decorationState: [],
54
- activeNode: null,
55
- isDragging: false,
56
- isMenuOpen: false,
57
- start: null,
58
- end: null,
59
- editorHeight: 0
60
- };
68
+ return initialState;
61
69
  },
62
70
  apply(tr, currentState, oldState, newState) {
63
- var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
71
+ var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight, _isResizerResizing;
72
+ if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
73
+ return initialState;
74
+ }
64
75
  let {
65
76
  activeNode,
66
77
  decorations,
67
78
  isMenuOpen,
68
79
  decorationState,
69
- editorHeight
80
+ editorHeight,
81
+ isResizerResizing
70
82
  } = currentState;
71
83
  const meta = tr.getMeta(key);
72
84
 
85
+ // If tables or media are being resized, we want to hide the drag handle
86
+ const resizerMeta = tr.getMeta('is-resizer-resizing');
87
+ isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
88
+ const isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
89
+
90
+ // This is not targeted enough - it's trying to catch events like expand being set to breakout
91
+ const maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && oldState.doc.childCount === newState.doc.childCount;
92
+ const nodeCountChanged = oldState.doc.childCount !== newState.doc.childCount;
93
+
94
+ // During resize, remove the drag handle widget
95
+ if (isResizerResizing || nodeCountChanged) {
96
+ const oldHandle = decorations.find().filter(({
97
+ spec
98
+ }) => spec.id === 'drag-handle');
99
+ decorations = decorations.remove(oldHandle);
100
+ }
101
+
73
102
  // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
74
- const redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || tr.docChanged && tr.doc.childCount === newState.doc.childCount || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) && tr.docChanged;
75
- if (redrawDecorations && api) {
103
+ const redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || resizerMeta === false || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) && tr.docChanged;
104
+ if (redrawDecorations && isResizerResizing === false && api) {
76
105
  decorations = DecorationSet.create(newState.doc, []);
77
106
  const nodeDecs = nodeDecorations(newState);
78
107
  const mouseWrapperDecs = mouseMoveWrapperDecorations(newState, api);
79
108
  decorations = decorations.add(newState.doc, [...nodeDecs, ...mouseWrapperDecs]);
80
109
  if (activeNode) {
81
- const newActiveNode = activeNode && tr.doc.nodeAt(activeNode.pos);
82
- let nodeType = activeNode.nodeType;
83
- let anchorName = activeNode.anchorName;
84
- if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
85
- nodeType = newActiveNode.type.name;
86
- anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
87
- }
88
- const draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api);
110
+ const draghandleDec = dragHandleDecoration(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
89
111
  decorations = decorations.add(newState.doc, [draghandleDec]);
90
112
  }
91
113
  }
@@ -145,10 +167,12 @@ export const createPlugin = api => {
145
167
  return {
146
168
  decorations,
147
169
  decorationState: (_decorationState = decorationState) !== null && _decorationState !== void 0 ? _decorationState : currentState.decorationState,
148
- activeNode: (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : mappedActiveNodePos,
170
+ activeNode: isEmptyDoc ? null : (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : mappedActiveNodePos,
149
171
  isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : currentState.isDragging,
150
172
  isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
151
- editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight
173
+ editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
174
+ isResizerResizing: (_isResizerResizing = isResizerResizing) !== null && _isResizerResizing !== void 0 ? _isResizerResizing : isResizerResizing,
175
+ isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled
152
176
  };
153
177
  }
154
178
  },
package/dist/es2019/ui/mouse-move-wrapper.js CHANGED
@@ -1,6 +1,7 @@
1
1
  /** @jsx jsx */
2
- import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
2
+ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
+ import { bind } from 'bind-event-listener';
4
5
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
5
6
  import { getTopPosition } from '../utils/drag-handle-positions';
6
7
  const basicStyles = css({
@@ -20,49 +21,60 @@ export const MouseMoveWrapper = ({
20
21
  nodeType,
21
22
  getPos
22
23
  }) => {
23
- var _blockControlsState$a;
24
- const nodePos = useMemo(() => getPos(), [getPos]);
25
24
  const {
26
25
  blockControlsState
27
26
  } = useSharedPluginState(api, ['blockControls']);
28
27
  const [isDragging, setIsDragging] = 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);
28
+ const [hideWrapper, setHideWrapper] = useState(false);
29
+ const ref = useRef(null);
30
30
  const [pos, setPos] = useState();
31
+ useEffect(() => {
32
+ // Adding this event listener to fix issue where wrapper isn't hidden if user navigates to node before page finishes loading
33
+ // This will be removed when we refactor to remove this component
34
+ let unbind;
35
+ if (ref.current) {
36
+ unbind = bind(ref.current, {
37
+ type: 'mousemove',
38
+ listener: () => {
39
+ setHideWrapper(true);
40
+ unbind();
41
+ }
42
+ });
43
+ }
44
+ return () => {
45
+ var _unbind;
46
+ return (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
47
+ };
48
+ }, []);
31
49
  const onMouseEnter = useCallback(() => {
32
50
  if (!isDragging) {
33
51
  setHideWrapper(true);
34
52
  }
35
- if (nodePos === undefined) {
53
+ const pos = getPos();
54
+ if (pos === undefined) {
36
55
  return;
37
56
  }
38
57
  if (api && api.blockControls && !isDragging) {
39
58
  var _api$core;
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));
59
+ 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));
41
60
  }
42
- }, [setHideWrapper, isDragging, api, nodePos, anchorName, nodeType]);
61
+ }, [setHideWrapper, getPos, isDragging, api, anchorName, nodeType]);
43
62
  useEffect(() => {
44
- var _api$blockControls;
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(({
46
- nextSharedState
47
- }) => {
48
- var _nextSharedState$acti;
49
- setIsDragging(Boolean(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging));
50
- if (!(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.activeNode)) {
51
- return;
52
- }
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)) {
54
- setHideWrapper(false);
55
- return;
56
- }
57
- if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging) {
58
- setHideWrapper(true);
59
- return;
60
- }
61
- });
62
- return () => {
63
- unbind === null || unbind === void 0 ? void 0 : unbind();
64
- };
65
- }, [nodePos, api]);
63
+ var _blockControlsState$a;
64
+ setIsDragging(Boolean(blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging));
65
+ const pos = getPos();
66
+ if (!(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.activeNode)) {
67
+ return;
68
+ }
69
+ if ((blockControlsState === null || blockControlsState === void 0 ? void 0 : (_blockControlsState$a = blockControlsState.activeNode) === null || _blockControlsState$a === void 0 ? void 0 : _blockControlsState$a.pos) !== pos && !(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging)) {
70
+ setHideWrapper(false);
71
+ return;
72
+ }
73
+ if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging) {
74
+ setHideWrapper(true);
75
+ return;
76
+ }
77
+ }, [getPos, blockControlsState]);
66
78
  useLayoutEffect(() => {
67
79
  const supportsAnchor = CSS.supports('height', `anchor-size(${anchorName} height)`) && CSS.supports('top', `anchor(${anchorName} start)`);
68
80
  if (supportsAnchor) {
@@ -85,6 +97,7 @@ export const MouseMoveWrapper = ({
85
97
  return () => cancelAnimationFrame(calcPos);
86
98
  }, [view, anchorName]);
87
99
  return jsx("div", {
100
+ ref: ref,
88
101
  onMouseEnter: onMouseEnter,
89
102
  css: [basicStyles, !hideWrapper && mouseMoveWrapperStyles]
90
103
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
package/dist/esm/pm-plugins/main.js CHANGED
@@ -4,6 +4,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
4
4
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
5
5
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
6
6
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
7
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
8
  import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
8
9
  import { dragHandleDecoration, dropTargetDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
9
10
  export var key = new PluginKey('blockControls');
@@ -42,58 +43,80 @@ var destroyFn = function destroyFn(api) {
42
43
  }
43
44
  });
44
45
  };
46
+ var initialState = {
47
+ decorations: DecorationSet.empty,
48
+ decorationState: [],
49
+ activeNode: null,
50
+ isDragging: false,
51
+ isMenuOpen: false,
52
+ start: null,
53
+ end: null,
54
+ editorHeight: 0,
55
+ isResizerResizing: false,
56
+ isDocSizeLimitEnabled: false
57
+ };
58
+ if (getBooleanFF('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
59
+ initialState.isDocSizeLimitEnabled = true;
60
+ }
61
+ var DRAG_AND_DROP_DOC_SIZE_LIMIT = 20000;
45
62
  export var createPlugin = function createPlugin(api) {
46
63
  return new SafePlugin({
47
64
  key: key,
48
65
  state: {
49
66
  init: function init() {
50
- return {
51
- decorations: DecorationSet.empty,
52
- decorationState: [],
53
- activeNode: null,
54
- isDragging: false,
55
- isMenuOpen: false,
56
- start: null,
57
- end: null,
58
- editorHeight: 0
59
- };
67
+ return initialState;
60
68
  },
61
69
  apply: function apply(tr, currentState, oldState, newState) {
62
- var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
70
+ var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight, _isResizerResizing;
71
+ if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
72
+ return initialState;
73
+ }
63
74
  var activeNode = currentState.activeNode,
64
75
  decorations = currentState.decorations,
65
76
  isMenuOpen = currentState.isMenuOpen,
66
77
  decorationState = currentState.decorationState,
67
- editorHeight = currentState.editorHeight;
78
+ editorHeight = currentState.editorHeight,
79
+ isResizerResizing = currentState.isResizerResizing;
68
80
  var meta = tr.getMeta(key);
69
81
 
82
+ // If tables or media are being resized, we want to hide the drag handle
83
+ var resizerMeta = tr.getMeta('is-resizer-resizing');
84
+ isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
85
+ var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
86
+
87
+ // This is not targeted enough - it's trying to catch events like expand being set to breakout
88
+ var maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && oldState.doc.childCount === newState.doc.childCount;
89
+ var nodeCountChanged = oldState.doc.childCount !== newState.doc.childCount;
90
+
91
+ // During resize, remove the drag handle widget
92
+ if (isResizerResizing || nodeCountChanged) {
93
+ var oldHandle = decorations.find().filter(function (_ref5) {
94
+ var spec = _ref5.spec;
95
+ return spec.id === 'drag-handle';
96
+ });
97
+ decorations = decorations.remove(oldHandle);
98
+ }
99
+
70
100
  // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
71
- var redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || tr.docChanged && tr.doc.childCount === newState.doc.childCount || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) && tr.docChanged;
72
- if (redrawDecorations && api) {
101
+ var redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || resizerMeta === false || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) && tr.docChanged;
102
+ if (redrawDecorations && isResizerResizing === false && api) {
73
103
  decorations = DecorationSet.create(newState.doc, []);
74
104
  var nodeDecs = nodeDecorations(newState);
75
105
  var mouseWrapperDecs = mouseMoveWrapperDecorations(newState, api);
76
106
  decorations = decorations.add(newState.doc, [].concat(_toConsumableArray(nodeDecs), _toConsumableArray(mouseWrapperDecs)));
77
107
  if (activeNode) {
78
- var newActiveNode = activeNode && tr.doc.nodeAt(activeNode.pos);
79
- var nodeType = activeNode.nodeType;
80
- var anchorName = activeNode.anchorName;
81
- if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
82
- nodeType = newActiveNode.type.name;
83
- anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
84
- }
85
- var draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api);
108
+ var draghandleDec = dragHandleDecoration(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
86
109
  decorations = decorations.add(newState.doc, [draghandleDec]);
87
110
  }
88
111
  }
89
112
 
90
113
  // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
91
114
  if (meta !== null && meta !== void 0 && meta.activeNode && (meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) && api) {
92
- var oldHandle = decorations.find().filter(function (_ref5) {
93
- var spec = _ref5.spec;
115
+ var _oldHandle = decorations.find().filter(function (_ref6) {
116
+ var spec = _ref6.spec;
94
117
  return spec.id === 'drag-handle';
95
118
  });
96
- decorations = decorations.remove(oldHandle);
119
+ decorations = decorations.remove(_oldHandle);
97
120
  var decs = dragHandleDecoration(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api);
98
121
  decorations = decorations.add(newState.doc, [decs]);
99
122
  }
@@ -109,8 +132,8 @@ export var createPlugin = function createPlugin(api) {
109
132
 
110
133
  // Remove drop target decoration when dragging stops
111
134
  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
112
- var dropTargetDecs = decorations.find().filter(function (_ref6) {
113
- var spec = _ref6.spec;
135
+ var dropTargetDecs = decorations.find().filter(function (_ref7) {
136
+ var spec = _ref7.spec;
114
137
  return spec.type === 'drop-target-decoration';
115
138
  });
116
139
  decorations = decorations.remove(dropTargetDecs);
@@ -118,9 +141,9 @@ export var createPlugin = function createPlugin(api) {
118
141
 
119
142
  // Map drop target decoration positions when the document changes
120
143
  if (tr.docChanged && currentState.isDragging) {
121
- decorationState = decorationState.map(function (_ref7) {
122
- var index = _ref7.index,
123
- pos = _ref7.pos;
144
+ decorationState = decorationState.map(function (_ref8) {
145
+ var index = _ref8.index,
146
+ pos = _ref8.pos;
124
147
  return {
125
148
  index: index,
126
149
  pos: tr.mapping.map(pos)
@@ -142,10 +165,12 @@ export var createPlugin = function createPlugin(api) {
142
165
  return {
143
166
  decorations: decorations,
144
167
  decorationState: (_decorationState = decorationState) !== null && _decorationState !== void 0 ? _decorationState : currentState.decorationState,
145
- activeNode: (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : mappedActiveNodePos,
168
+ activeNode: isEmptyDoc ? null : (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : mappedActiveNodePos,
146
169
  isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : currentState.isDragging,
147
170
  isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
148
- editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight
171
+ editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
172
+ isResizerResizing: (_isResizerResizing = isResizerResizing) !== null && _isResizerResizing !== void 0 ? _isResizerResizing : isResizerResizing,
173
+ isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled
149
174
  };
150
175
  }
151
176
  },
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, useMemo, useState } from 'react';
3
+ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
+ import { bind } from 'bind-event-listener';
5
6
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
6
7
  import { getTopPosition } from '../utils/drag-handle-positions';
7
8
  var basicStyles = css({
@@ -15,63 +16,73 @@ var mouseMoveWrapperStyles = css({
15
16
  zIndex: 1
16
17
  });
17
18
  export var MouseMoveWrapper = function MouseMoveWrapper(_ref) {
18
- var _blockControlsState$a;
19
19
  var view = _ref.view,
20
20
  api = _ref.api,
21
21
  anchorName = _ref.anchorName,
22
22
  nodeType = _ref.nodeType,
23
23
  getPos = _ref.getPos;
24
- var nodePos = useMemo(function () {
25
- return getPos();
26
- }, [getPos]);
27
24
  var _useSharedPluginState = useSharedPluginState(api, ['blockControls']),
28
25
  blockControlsState = _useSharedPluginState.blockControlsState;
29
26
  var _useState = useState(false),
30
27
  _useState2 = _slicedToArray(_useState, 2),
31
28
  isDragging = _useState2[0],
32
29
  setIsDragging = _useState2[1];
33
- var _useState3 = useState((blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$a = blockControlsState.activeNode) === null || _blockControlsState$a === void 0 ? void 0 : _blockControlsState$a.pos) === nodePos),
30
+ var _useState3 = useState(false),
34
31
  _useState4 = _slicedToArray(_useState3, 2),
35
32
  hideWrapper = _useState4[0],
36
33
  setHideWrapper = _useState4[1];
34
+ var ref = useRef(null);
37
35
  var _useState5 = useState(),
38
36
  _useState6 = _slicedToArray(_useState5, 2),
39
37
  pos = _useState6[0],
40
38
  setPos = _useState6[1];
39
+ useEffect(function () {
40
+ // Adding this event listener to fix issue where wrapper isn't hidden if user navigates to node before page finishes loading
41
+ // This will be removed when we refactor to remove this component
42
+ var unbind;
43
+ if (ref.current) {
44
+ unbind = bind(ref.current, {
45
+ type: 'mousemove',
46
+ listener: function listener() {
47
+ setHideWrapper(true);
48
+ unbind();
49
+ }
50
+ });
51
+ }
52
+ return function () {
53
+ var _unbind;
54
+ return (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
55
+ };
56
+ }, []);
41
57
  var onMouseEnter = useCallback(function () {
42
58
  if (!isDragging) {
43
59
  setHideWrapper(true);
44
60
  }
45
- if (nodePos === undefined) {
61
+ var pos = getPos();
62
+ if (pos === undefined) {
46
63
  return;
47
64
  }
48
65
  if (api && api.blockControls && !isDragging) {
49
66
  var _api$core;
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));
67
+ 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));
51
68
  }
52
- }, [setHideWrapper, isDragging, api, nodePos, anchorName, nodeType]);
69
+ }, [setHideWrapper, getPos, isDragging, api, anchorName, nodeType]);
53
70
  useEffect(function () {
54
- var _api$blockControls;
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) {
56
- var _nextSharedState$acti;
57
- var nextSharedState = _ref2.nextSharedState;
58
- setIsDragging(Boolean(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging));
59
- if (!(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.activeNode)) {
60
- return;
61
- }
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)) {
63
- setHideWrapper(false);
64
- return;
65
- }
66
- if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging) {
67
- setHideWrapper(true);
68
- return;
69
- }
70
- });
71
- return function () {
72
- unbind === null || unbind === void 0 || unbind();
73
- };
74
- }, [nodePos, api]);
71
+ var _blockControlsState$a;
72
+ setIsDragging(Boolean(blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging));
73
+ var pos = getPos();
74
+ if (!(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.activeNode)) {
75
+ return;
76
+ }
77
+ if ((blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$a = blockControlsState.activeNode) === null || _blockControlsState$a === void 0 ? void 0 : _blockControlsState$a.pos) !== pos && !(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging)) {
78
+ setHideWrapper(false);
79
+ return;
80
+ }
81
+ if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging) {
82
+ setHideWrapper(true);
83
+ return;
84
+ }
85
+ }, [getPos, blockControlsState]);
75
86
  useLayoutEffect(function () {
76
87
  var supportsAnchor = CSS.supports('height', "anchor-size(".concat(anchorName, " height)")) && CSS.supports('top', "anchor(".concat(anchorName, " start)"));
77
88
  if (supportsAnchor) {
@@ -96,6 +107,7 @@ export var MouseMoveWrapper = function MouseMoveWrapper(_ref) {
96
107
  };
97
108
  }, [view, anchorName]);
98
109
  return jsx("div", {
110
+ ref: ref,
99
111
  onMouseEnter: onMouseEnter,
100
112
  css: [basicStyles, !hideWrapper && mouseMoveWrapperStyles]
101
113
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
package/dist/types/types.d.ts CHANGED
@@ -15,6 +15,8 @@ export interface PluginState {
15
15
  anchorName: string;
16
16
  nodeType: string;
17
17
  } | null;
18
+ isResizerResizing: boolean;
19
+ isDocSizeLimitEnabled: boolean;
18
20
  }
19
21
  export type ReleaseHiddenDecoration = () => boolean | undefined;
20
22
  export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -15,6 +15,8 @@ export interface PluginState {
15
15
  anchorName: string;
16
16
  nodeType: string;
17
17
  } | null;
18
+ isResizerResizing: boolean;
19
+ isDocSizeLimitEnabled: boolean;
18
20
  }
19
21
  export type ReleaseHiddenDecoration = () => boolean | undefined;
20
22
  export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
package/package.json CHANGED
@@ -1,95 +1,100 @@
1
1
  {
2
- "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.4.18",
4
- "description": "Block controls plugin for @atlaskit/editor-core",
5
- "author": "Atlassian Pty Ltd",
6
- "license": "Apache-2.0",
7
- "publishConfig": {
8
- "registry": "https://registry.npmjs.org/"
9
- },
10
- "atlassian": {
11
- "team": "Editor: Jenga",
12
- "inPublicMirror": false,
13
- "releaseModel": "continuous"
14
- },
15
- "repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
16
- "main": "dist/cjs/index.js",
17
- "module": "dist/esm/index.js",
18
- "module:es2019": "dist/es2019/index.js",
19
- "types": "dist/types/index.d.ts",
20
- "typesVersions": {
21
- ">=4.5 <4.9": {
22
- "*": [
23
- "dist/types-ts4.5/*",
24
- "dist/types-ts4.5/index.d.ts"
25
- ]
26
- }
27
- },
28
- "sideEffects": false,
29
- "atlaskit:src": "src/index.ts",
30
- "af:exports": {
31
- ".": "./src/index.ts"
32
- },
33
- "dependencies": {
34
- "@atlaskit/editor-common": "^82.5.0",
35
- "@atlaskit/editor-plugin-analytics": "^1.2.3",
36
- "@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
37
- "@atlaskit/editor-plugin-feature-flags": "^1.1.0",
38
- "@atlaskit/editor-plugin-width": "^1.1.0",
39
- "@atlaskit/editor-prosemirror": "4.0.1",
40
- "@atlaskit/editor-tables": "^2.7.0",
41
- "@atlaskit/icon": "^22.3.0",
42
- "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
43
- "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
44
- "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
45
- "@atlaskit/tokens": "^1.50.0",
46
- "@babel/runtime": "^7.0.0",
47
- "@emotion/react": "^11.7.1",
48
- "raf-schd": "^4.0.3"
49
- },
50
- "peerDependencies": {
51
- "react": "^16.8.0",
52
- "react-dom": "^16.8.0"
53
- },
54
- "techstack": {
55
- "@atlassian/frontend": {
56
- "import-structure": [
57
- "atlassian-conventions"
58
- ],
59
- "circular-dependencies": [
60
- "file-and-folder-level"
61
- ]
62
- },
63
- "@repo/internal": {
64
- "dom-events": "use-bind-event-listener",
65
- "analytics": [
66
- "analytics-next"
67
- ],
68
- "design-tokens": [
69
- "color"
70
- ],
71
- "theming": [
72
- "react-context"
73
- ],
74
- "ui-components": [
75
- "lite-mode"
76
- ],
77
- "deprecation": [
78
- "no-deprecated-imports"
79
- ],
80
- "styling": [
81
- "emotion",
82
- "compiled"
83
- ],
84
- "imports": [
85
- "import-no-extraneous-disable-for-examples-and-docs"
86
- ]
87
- }
88
- },
89
- "platform-feature-flags": {
90
- "platform.editor.media.extended-resize-experience": {
91
- "type": "boolean",
92
- "referenceOnly": true
93
- }
94
- }
95
- }
2
+ "name": "@atlaskit/editor-plugin-block-controls",
3
+ "version": "1.4.20",
4
+ "description": "Block controls plugin for @atlaskit/editor-core",
5
+ "author": "Atlassian Pty Ltd",
6
+ "license": "Apache-2.0",
7
+ "publishConfig": {
8
+ "registry": "https://registry.npmjs.org/"
9
+ },
10
+ "atlassian": {
11
+ "team": "Editor: Jenga",
12
+ "inPublicMirror": false,
13
+ "releaseModel": "continuous"
14
+ },
15
+ "repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
16
+ "main": "dist/cjs/index.js",
17
+ "module": "dist/esm/index.js",
18
+ "module:es2019": "dist/es2019/index.js",
19
+ "types": "dist/types/index.d.ts",
20
+ "typesVersions": {
21
+ ">=4.5 <4.9": {
22
+ "*": [
23
+ "dist/types-ts4.5/*",
24
+ "dist/types-ts4.5/index.d.ts"
25
+ ]
26
+ }
27
+ },
28
+ "sideEffects": false,
29
+ "atlaskit:src": "src/index.ts",
30
+ "af:exports": {
31
+ ".": "./src/index.ts"
32
+ },
33
+ "dependencies": {
34
+ "@atlaskit/editor-common": "^82.7.0",
35
+ "@atlaskit/editor-plugin-analytics": "^1.2.3",
36
+ "@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
37
+ "@atlaskit/editor-plugin-feature-flags": "^1.1.0",
38
+ "@atlaskit/editor-plugin-width": "^1.1.0",
39
+ "@atlaskit/editor-prosemirror": "4.0.1",
40
+ "@atlaskit/editor-tables": "^2.7.0",
41
+ "@atlaskit/icon": "^22.3.0",
42
+ "@atlaskit/platform-feature-flags": "^0.2.0",
43
+ "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
44
+ "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
45
+ "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
46
+ "@atlaskit/tokens": "^1.50.0",
47
+ "@babel/runtime": "^7.0.0",
48
+ "@emotion/react": "^11.7.1",
49
+ "bind-event-listener": "^3.0.0",
50
+ "raf-schd": "^4.0.3"
51
+ },
52
+ "peerDependencies": {
53
+ "react": "^16.8.0",
54
+ "react-dom": "^16.8.0"
55
+ },
56
+ "techstack": {
57
+ "@atlassian/frontend": {
58
+ "import-structure": [
59
+ "atlassian-conventions"
60
+ ],
61
+ "circular-dependencies": [
62
+ "file-and-folder-level"
63
+ ]
64
+ },
65
+ "@repo/internal": {
66
+ "dom-events": "use-bind-event-listener",
67
+ "analytics": [
68
+ "analytics-next"
69
+ ],
70
+ "design-tokens": [
71
+ "color"
72
+ ],
73
+ "theming": [
74
+ "react-context"
75
+ ],
76
+ "ui-components": [
77
+ "lite-mode"
78
+ ],
79
+ "deprecation": [
80
+ "no-deprecated-imports"
81
+ ],
82
+ "styling": [
83
+ "emotion",
84
+ "compiled"
85
+ ],
86
+ "imports": [
87
+ "import-no-extraneous-disable-for-examples-and-docs"
88
+ ]
89
+ }
90
+ },
91
+ "platform-feature-flags": {
92
+ "platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq": {
93
+ "type": "boolean"
94
+ },
95
+ "platform.editor.media.extended-resize-experience": {
96
+ "type": "boolean",
97
+ "referenceOnly": true
98
+ }
99
+ }
100
+ }