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

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 (13) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/cjs/pm-plugins/main.js +64 -25
  3. package/dist/cjs/ui/drag-preview.js +3 -3
  4. package/dist/cjs/ui/mouse-move-wrapper.js +41 -29
  5. package/dist/es2019/pm-plugins/main.js +55 -17
  6. package/dist/es2019/ui/drag-preview.js +3 -3
  7. package/dist/es2019/ui/mouse-move-wrapper.js +42 -29
  8. package/dist/esm/pm-plugins/main.js +64 -25
  9. package/dist/esm/ui/drag-preview.js +3 -3
  10. package/dist/esm/ui/mouse-move-wrapper.js +42 -30
  11. package/dist/types/types.d.ts +2 -0
  12. package/dist/types-ts4.5/types.d.ts +2 -0
  13. package/package.json +77 -94
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.4.19
4
+
5
+ ### Patch Changes
6
+
7
+ - [#111390](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111390)
8
+ [`bf010fb12e305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bf010fb12e305) -
9
+ ED-23630 Call getPos in callbacks to fix node splitting and attach event listener when component
10
+ loads to show wrapper
11
+ - [#111385](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111385)
12
+ [`181c5854ec25f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/181c5854ec25f) -
13
+ remove sharedstate onchange handler from mousemovewrapper
14
+ - [#111045](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111045)
15
+ [`2f693993423ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2f693993423ec) -
16
+ improve input latency of drag and drop experience and hide drag handle during resizing
17
+ - [#111418](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111418)
18
+ [`b351451c2ccb1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b351451c2ccb1) -
19
+ add docsize limit for dnd
20
+ - Updated dependencies
21
+
22
+ ## 1.4.18
23
+
24
+ ### Patch Changes
25
+
26
+ - [#110975](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110975)
27
+ [`1b910ab971427`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1b910ab971427) -
28
+ [ux] Generate generic drag preview for extension nodes
29
+ - [#110819](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110819)
30
+ [`c81b4e2254428`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c81b4e2254428) -
31
+ Fix cursor and handle position when changing node type
32
+
3
33
  ## 1.4.17
4
34
 
5
35
  ### 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,51 +50,87 @@ 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 draghandleDec = (0, _decorations.dragHandleDecoration)(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
115
+ var newActiveNode = activeNode && tr.doc.nodeAt(activeNode.pos);
116
+ var nodeType = activeNode.nodeType;
117
+ var anchorName = activeNode.anchorName;
118
+ if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
119
+ nodeType = newActiveNode.type.name;
120
+ anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
121
+ }
122
+ var draghandleDec = (0, _decorations.dragHandleDecoration)(activeNode.pos, anchorName, nodeType, api);
86
123
  decorations = decorations.add(newState.doc, [draghandleDec]);
87
124
  }
88
125
  }
89
126
 
90
127
  // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
91
128
  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;
129
+ var _oldHandle = decorations.find().filter(function (_ref6) {
130
+ var spec = _ref6.spec;
94
131
  return spec.id === 'drag-handle';
95
132
  });
96
- decorations = decorations.remove(oldHandle);
133
+ decorations = decorations.remove(_oldHandle);
97
134
  var decs = (0, _decorations.dragHandleDecoration)(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api);
98
135
  decorations = decorations.add(newState.doc, [decs]);
99
136
  }
@@ -109,8 +146,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
109
146
 
110
147
  // Remove drop target decoration when dragging stops
111
148
  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;
149
+ var dropTargetDecs = decorations.find().filter(function (_ref7) {
150
+ var spec = _ref7.spec;
114
151
  return spec.type === 'drop-target-decoration';
115
152
  });
116
153
  decorations = decorations.remove(dropTargetDecs);
@@ -118,9 +155,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
118
155
 
119
156
  // Map drop target decoration positions when the document changes
120
157
  if (tr.docChanged && currentState.isDragging) {
121
- decorationState = decorationState.map(function (_ref7) {
122
- var index = _ref7.index,
123
- pos = _ref7.pos;
158
+ decorationState = decorationState.map(function (_ref8) {
159
+ var index = _ref8.index,
160
+ pos = _ref8.pos;
124
161
  return {
125
162
  index: index,
126
163
  pos: tr.mapping.map(pos)
@@ -142,10 +179,12 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
142
179
  return {
143
180
  decorations: decorations,
144
181
  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,
182
+ activeNode: isEmptyDoc ? null : (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : mappedActiveNodePos,
146
183
  isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : currentState.isDragging,
147
184
  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
185
+ editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
186
+ isResizerResizing: (_isResizerResizing = isResizerResizing) !== null && _isResizerResizing !== void 0 ? _isResizerResizing : isResizerResizing,
187
+ isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled
149
188
  };
150
189
  }
151
190
  },
package/dist/cjs/ui/drag-preview.js CHANGED
@@ -20,8 +20,8 @@ var dragPreview = exports.dragPreview = function dragPreview(container, dom, nod
20
20
  var parent = document.createElement('div');
21
21
  // ProseMirror class is required to make sure the cloned dom is styled correctly
22
22
  parent.classList.add('ProseMirror');
23
- var isEmbedCard = nodeType === 'embedCard';
24
- if (isEmbedCard) {
23
+ var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
24
+ if (shouldBeGenericPreview) {
25
25
  parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
26
26
  parent.style.borderRadius = previewStyle.borderRadius;
27
27
  parent.style.backgroundColor = previewStyle.backgroundColor;
@@ -29,7 +29,7 @@ var dragPreview = exports.dragPreview = function dragPreview(container, dom, nod
29
29
  parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
30
30
  }
31
31
  var resizer = dom.querySelector('.resizer-item');
32
- var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!isEmbedCard);
32
+ var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!shouldBeGenericPreview);
33
33
 
34
34
  // Remove any margin from the cloned element to ensure is doesn't position incorrectly
35
35
  clonedDom.style.marginLeft = '0';
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,42 +44,77 @@ 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 draghandleDec = dragHandleDecoration(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
110
+ const newActiveNode = activeNode && tr.doc.nodeAt(activeNode.pos);
111
+ let nodeType = activeNode.nodeType;
112
+ let anchorName = activeNode.anchorName;
113
+ if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
114
+ nodeType = newActiveNode.type.name;
115
+ anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
116
+ }
117
+ const draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api);
82
118
  decorations = decorations.add(newState.doc, [draghandleDec]);
83
119
  }
84
120
  }
@@ -138,10 +174,12 @@ export const createPlugin = api => {
138
174
  return {
139
175
  decorations,
140
176
  decorationState: (_decorationState = decorationState) !== null && _decorationState !== void 0 ? _decorationState : currentState.decorationState,
141
- activeNode: (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : mappedActiveNodePos,
177
+ activeNode: isEmptyDoc ? null : (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : mappedActiveNodePos,
142
178
  isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : currentState.isDragging,
143
179
  isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
144
- editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight
180
+ editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
181
+ isResizerResizing: (_isResizerResizing = isResizerResizing) !== null && _isResizerResizing !== void 0 ? _isResizerResizing : isResizerResizing,
182
+ isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled
145
183
  };
146
184
  }
147
185
  },
package/dist/es2019/ui/drag-preview.js CHANGED
@@ -14,8 +14,8 @@ export const dragPreview = (container, dom, nodeType) => {
14
14
  const parent = document.createElement('div');
15
15
  // ProseMirror class is required to make sure the cloned dom is styled correctly
16
16
  parent.classList.add('ProseMirror');
17
- const isEmbedCard = nodeType === 'embedCard';
18
- if (isEmbedCard) {
17
+ const shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
18
+ if (shouldBeGenericPreview) {
19
19
  parent.style.border = `${previewStyle.borderWidth} ${previewStyle.borderStyle} ${previewStyle.borderColor}`;
20
20
  parent.style.borderRadius = previewStyle.borderRadius;
21
21
  parent.style.backgroundColor = previewStyle.backgroundColor;
@@ -23,7 +23,7 @@ export const dragPreview = (container, dom, nodeType) => {
23
23
  parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
24
24
  }
25
25
  const resizer = dom.querySelector('.resizer-item');
26
- const clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!isEmbedCard);
26
+ const clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!shouldBeGenericPreview);
27
27
 
28
28
  // Remove any margin from the cloned element to ensure is doesn't position incorrectly
29
29
  clonedDom.style.marginLeft = '0';
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,51 +43,87 @@ 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 draghandleDec = dragHandleDecoration(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
108
+ var newActiveNode = activeNode && tr.doc.nodeAt(activeNode.pos);
109
+ var nodeType = activeNode.nodeType;
110
+ var anchorName = activeNode.anchorName;
111
+ if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
112
+ nodeType = newActiveNode.type.name;
113
+ anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
114
+ }
115
+ var draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api);
79
116
  decorations = decorations.add(newState.doc, [draghandleDec]);
80
117
  }
81
118
  }
82
119
 
83
120
  // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
84
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) {
85
- var oldHandle = decorations.find().filter(function (_ref5) {
86
- var spec = _ref5.spec;
122
+ var _oldHandle = decorations.find().filter(function (_ref6) {
123
+ var spec = _ref6.spec;
87
124
  return spec.id === 'drag-handle';
88
125
  });
89
- decorations = decorations.remove(oldHandle);
126
+ decorations = decorations.remove(_oldHandle);
90
127
  var decs = dragHandleDecoration(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api);
91
128
  decorations = decorations.add(newState.doc, [decs]);
92
129
  }
@@ -102,8 +139,8 @@ export var createPlugin = function createPlugin(api) {
102
139
 
103
140
  // Remove drop target decoration when dragging stops
104
141
  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
105
- var dropTargetDecs = decorations.find().filter(function (_ref6) {
106
- var spec = _ref6.spec;
142
+ var dropTargetDecs = decorations.find().filter(function (_ref7) {
143
+ var spec = _ref7.spec;
107
144
  return spec.type === 'drop-target-decoration';
108
145
  });
109
146
  decorations = decorations.remove(dropTargetDecs);
@@ -111,9 +148,9 @@ export var createPlugin = function createPlugin(api) {
111
148
 
112
149
  // Map drop target decoration positions when the document changes
113
150
  if (tr.docChanged && currentState.isDragging) {
114
- decorationState = decorationState.map(function (_ref7) {
115
- var index = _ref7.index,
116
- pos = _ref7.pos;
151
+ decorationState = decorationState.map(function (_ref8) {
152
+ var index = _ref8.index,
153
+ pos = _ref8.pos;
117
154
  return {
118
155
  index: index,
119
156
  pos: tr.mapping.map(pos)
@@ -135,10 +172,12 @@ export var createPlugin = function createPlugin(api) {
135
172
  return {
136
173
  decorations: decorations,
137
174
  decorationState: (_decorationState = decorationState) !== null && _decorationState !== void 0 ? _decorationState : currentState.decorationState,
138
- 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,
139
176
  isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : currentState.isDragging,
140
177
  isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
141
- 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
142
181
  };
143
182
  }
144
183
  },
package/dist/esm/ui/drag-preview.js CHANGED
@@ -14,8 +14,8 @@ export var dragPreview = function dragPreview(container, dom, nodeType) {
14
14
  var parent = document.createElement('div');
15
15
  // ProseMirror class is required to make sure the cloned dom is styled correctly
16
16
  parent.classList.add('ProseMirror');
17
- var isEmbedCard = nodeType === 'embedCard';
18
- if (isEmbedCard) {
17
+ var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
18
+ if (shouldBeGenericPreview) {
19
19
  parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
20
20
  parent.style.borderRadius = previewStyle.borderRadius;
21
21
  parent.style.backgroundColor = previewStyle.backgroundColor;
@@ -23,7 +23,7 @@ export var dragPreview = function dragPreview(container, dom, nodeType) {
23
23
  parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
24
24
  }
25
25
  var resizer = dom.querySelector('.resizer-item');
26
- var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!isEmbedCard);
26
+ var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!shouldBeGenericPreview);
27
27
 
28
28
  // Remove any margin from the cloned element to ensure is doesn't position incorrectly
29
29
  clonedDom.style.marginLeft = '0';
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,78 @@
1
1
  {
2
- "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.4.17",
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.19",
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
+ "*": ["dist/types-ts4.5/*", "dist/types-ts4.5/index.d.ts"]
23
+ }
24
+ },
25
+ "sideEffects": false,
26
+ "atlaskit:src": "src/index.ts",
27
+ "af:exports": {
28
+ ".": "./src/index.ts"
29
+ },
30
+ "dependencies": {
31
+ "@atlaskit/editor-common": "^82.6.0",
32
+ "@atlaskit/editor-plugin-analytics": "^1.2.3",
33
+ "@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
34
+ "@atlaskit/editor-plugin-feature-flags": "^1.1.0",
35
+ "@atlaskit/editor-plugin-width": "^1.1.0",
36
+ "@atlaskit/editor-prosemirror": "4.0.1",
37
+ "@atlaskit/editor-tables": "^2.7.0",
38
+ "@atlaskit/icon": "^22.3.0",
39
+ "@atlaskit/platform-feature-flags": "^0.2.0",
40
+ "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
41
+ "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
42
+ "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
43
+ "@atlaskit/tokens": "^1.50.0",
44
+ "@babel/runtime": "^7.0.0",
45
+ "@emotion/react": "^11.7.1",
46
+ "bind-event-listener": "^3.0.0",
47
+ "raf-schd": "^4.0.3"
48
+ },
49
+ "peerDependencies": {
50
+ "react": "^16.8.0",
51
+ "react-dom": "^16.8.0"
52
+ },
53
+ "techstack": {
54
+ "@atlassian/frontend": {
55
+ "import-structure": ["atlassian-conventions"],
56
+ "circular-dependencies": ["file-and-folder-level"]
57
+ },
58
+ "@repo/internal": {
59
+ "dom-events": "use-bind-event-listener",
60
+ "analytics": ["analytics-next"],
61
+ "design-tokens": ["color"],
62
+ "theming": ["react-context"],
63
+ "ui-components": ["lite-mode"],
64
+ "deprecation": ["no-deprecated-imports"],
65
+ "styling": ["emotion", "compiled"],
66
+ "imports": ["import-no-extraneous-disable-for-examples-and-docs"]
67
+ }
68
+ },
69
+ "platform-feature-flags": {
70
+ "platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq": {
71
+ "type": "boolean"
72
+ },
73
+ "platform.editor.media.extended-resize-experience": {
74
+ "type": "boolean",
75
+ "referenceOnly": true
76
+ }
77
+ }
78
+ }