@atlaskit/editor-plugin-block-controls 2.9.0 → 2.10.0

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 (21) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/commands/move-to-layout.js +16 -1
  3. package/dist/cjs/pm-plugins/decorations.js +1 -0
  4. package/dist/cjs/ui/inline-drop-target.js +76 -17
  5. package/dist/cjs/utils/check-media-layout.js +14 -0
  6. package/dist/cjs/utils/inline-drop-target.js +4 -0
  7. package/dist/es2019/commands/move-to-layout.js +16 -1
  8. package/dist/es2019/pm-plugins/decorations.js +1 -0
  9. package/dist/es2019/ui/inline-drop-target.js +76 -17
  10. package/dist/es2019/utils/check-media-layout.js +8 -0
  11. package/dist/es2019/utils/inline-drop-target.js +4 -0
  12. package/dist/esm/commands/move-to-layout.js +16 -1
  13. package/dist/esm/pm-plugins/decorations.js +1 -0
  14. package/dist/esm/ui/inline-drop-target.js +76 -17
  15. package/dist/esm/utils/check-media-layout.js +8 -0
  16. package/dist/esm/utils/inline-drop-target.js +4 -0
  17. package/dist/types/ui/inline-drop-target.d.ts +6 -1
  18. package/dist/types/utils/check-media-layout.d.ts +2 -0
  19. package/dist/types-ts4.5/ui/inline-drop-target.d.ts +6 -1
  20. package/dist/types-ts4.5/utils/check-media-layout.d.ts +2 -0
  21. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 2.10.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#154751](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154751)
8
+ [`8a15d128d0772`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8a15d128d0772) -
9
+ ED-25049 handle edge cases for vertical drop targets
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 2.9.0
4
16
 
5
17
  ### Minor Changes
package/dist/cjs/commands/move-to-layout.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.moveToLayout = void 0;
7
7
  var _model = require("@atlaskit/editor-prosemirror/model");
8
+ var _state = require("@atlaskit/editor-prosemirror/state");
8
9
  var _consts = require("../consts");
9
10
  var _consts2 = require("../ui/consts");
10
11
  var createNewLayout = function createNewLayout(schema, layoutContents) {
@@ -74,13 +75,25 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
74
75
  if ($to.nodeAfter.type === layoutSection) {
75
76
  var existingLayoutNode = $to.nodeAfter;
76
77
  if (existingLayoutNode.childCount < _consts.MAX_LAYOUT_COLUMN_SUPPORTED) {
78
+ var newColumnWidth = _consts2.DEFAULT_COLUMN_DISTRIBUTIONS[existingLayoutNode.childCount + 1];
79
+ if (newColumnWidth) {
80
+ existingLayoutNode.content.forEach(function (node, offset) {
81
+ if (node.type === layoutColumn) {
82
+ tr = tr.setNodeAttribute(to + offset + 1, 'width', newColumnWidth);
83
+ }
84
+ });
85
+ }
77
86
  var toPos = position === 'left' ? to + 1 : to + existingLayoutNode.nodeSize - 1;
78
87
  tr = tr.insert(toPos,
79
88
  // resolve again the source node after node updated (remove breakout marks)
80
- layoutColumn.create(null, tr.doc.resolve(from).nodeAfter));
89
+ layoutColumn.create({
90
+ width: newColumnWidth
91
+ }, tr.doc.resolve(from).nodeAfter));
92
+ tr = tr.setSelection(new _state.NodeSelection(tr.doc.resolve(toPos)));
81
93
  var mappedFrom = tr.mapping.map(from);
82
94
  var mappedFromEnd = mappedFrom + fromNode.nodeSize;
83
95
  tr = tr.delete(mappedFrom, mappedFromEnd);
96
+ tr = tr.scrollIntoView();
84
97
  return tr;
85
98
  }
86
99
  return tr;
@@ -97,6 +110,8 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
97
110
  var mappedTo = tr.mapping.map(to);
98
111
  tr = tr.delete(mappedTo, mappedTo + toNode.nodeSize);
99
112
  tr = tr.insert(mappedTo, newLayout); // insert the content at the new position
113
+ tr = tr.setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo)));
114
+ tr = tr.scrollIntoView();
100
115
  }
101
116
  return tr;
102
117
  }
package/dist/cjs/pm-plugins/decorations.js CHANGED
@@ -289,6 +289,7 @@ var ObjHash = /*#__PURE__*/function () {
289
289
  }();
290
290
  (0, _defineProperty2.default)(ObjHash, "caching", new WeakMap());
291
291
  var shouldIgnoreNode = function shouldIgnoreNode(node) {
292
+ // TODO use isWrappedMedia when clean up the featue flag
292
293
  if ('mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1')) {
293
294
  if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
294
295
  return true;
package/dist/cjs/ui/inline-drop-target.js CHANGED
@@ -13,6 +13,7 @@ var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box")
13
13
  var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
14
14
  var _decorations = require("../pm-plugins/decorations");
15
15
  var _anchorUtils = require("../utils/anchor-utils");
16
+ var _dragTargetDebug = require("../utils/drag-target-debug");
16
17
  /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
17
18
  /* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
18
19
  /**
@@ -26,13 +27,10 @@ var dropTargetCommonStyle = (0, _react2.css)({
26
27
  position: 'absolute',
27
28
  display: 'block'
28
29
  });
29
- var hideDropTargetStyle = (0, _react2.css)({
30
- display: 'none'
31
- });
32
30
  var hoverZoneCommonStyle = (0, _react2.css)({
33
31
  position: 'absolute',
34
- // same value as block hover zone
35
- zIndex: 110
32
+ // above the top and bottom drop zone as block hover zone
33
+ zIndex: 120
36
34
  });
37
35
 
38
36
  // gap between node boundary and drop indicator/drop zone
@@ -40,6 +38,60 @@ var GAP = 4;
40
38
  var HOVER_ZONE_WIDTH_OFFSET = 40;
41
39
  var HOVER_ZONE_HEIGHT_OFFSET = 10;
42
40
  var HOVER_ZONE_DEFAULT_WIDTH = 40;
41
+ var getDropTargetPositionOverride = function getDropTargetPositionOverride(node, editorWidth) {
42
+ if (!node || !editorWidth) {
43
+ return {
44
+ left: 0,
45
+ right: 0
46
+ };
47
+ }
48
+ var getOffsets = function getOffsets(nodeWidth) {
49
+ var offset = (editorWidth - nodeWidth) / 2;
50
+ return {
51
+ left: offset,
52
+ right: offset
53
+ };
54
+ };
55
+ if ((node === null || node === void 0 ? void 0 : node.type.name) === 'table' && node.attrs.width) {
56
+ return getOffsets(node.attrs.width);
57
+ }
58
+
59
+ // media single 🤦
60
+ if ((node === null || node === void 0 ? void 0 : node.type.name) === 'mediaSingle') {
61
+ var mediaNodeWidth = 0;
62
+ if (node.attrs.width) {
63
+ if (node.attrs.widthType === 'pixel') {
64
+ mediaNodeWidth = node.attrs.width;
65
+ } else if (editorWidth) {
66
+ mediaNodeWidth = node.attrs.width / 100 * editorWidth;
67
+ }
68
+ } else {
69
+ // use media width
70
+ var mediaNode = node.firstChild;
71
+ if (mediaNode && mediaNode.attrs.width) {
72
+ mediaNodeWidth = mediaNode.attrs.width;
73
+ }
74
+ }
75
+ if (mediaNodeWidth) {
76
+ if (node.attrs.layout === 'align-start') {
77
+ return {
78
+ left: 0,
79
+ right: editorWidth - mediaNodeWidth
80
+ };
81
+ } else if (node.attrs.layout === 'align-end') {
82
+ return {
83
+ left: editorWidth - mediaNodeWidth,
84
+ right: 0
85
+ };
86
+ }
87
+ return getOffsets(mediaNodeWidth);
88
+ }
89
+ }
90
+ return {
91
+ left: 0,
92
+ right: 0
93
+ };
94
+ };
43
95
  var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref) {
44
96
  var api = _ref.api,
45
97
  nextNode = _ref.nextNode,
@@ -59,22 +111,25 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
59
111
  var handleDragLeave = (0, _react.useCallback)(function () {
60
112
  setIsDraggedOver(false);
61
113
  }, []);
114
+ var offsets = (0, _react.useMemo)(function () {
115
+ return getDropTargetPositionOverride(nextNode, widthState === null || widthState === void 0 ? void 0 : widthState.lineLength);
116
+ }, [nextNode, widthState]);
62
117
  var dropTargetRectStyle = (0, _react.useMemo)(function () {
63
118
  if ((0, _anchorUtils.isAnchorSupported)()) {
64
119
  return (0, _react2.css)({
65
120
  height: "calc(anchor-size(".concat(anchorName, " height))"),
66
121
  positionAnchor: anchorName,
67
- left: position === 'left' ? "calc(anchor(left) - ".concat(GAP, "px)") : "calc(anchor(right) + ".concat(GAP, "px)"),
122
+ left: position === 'left' ? "calc(anchor(left) - ".concat(GAP - offsets.left, "px)") : "calc(anchor(right) + ".concat(GAP - offsets.right, "px)"),
68
123
  top: "calc(anchor(top))"
69
124
  });
70
125
  }
71
126
  var nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
72
127
  return (0, _react2.css)({
73
128
  height: "calc(".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0, "px)"),
74
- left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP, "px"),
129
+ left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP + offsets.left, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offsets.right, "px"),
75
130
  top: "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0, "px")
76
131
  });
77
- }, [anchorName, anchorRectCache, position]);
132
+ }, [anchorName, anchorRectCache, offsets.left, offsets.right, position]);
78
133
  var onDrop = (0, _react.useCallback)(function () {
79
134
  var _api$blockControls;
80
135
  var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -91,8 +146,8 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
91
146
  }, [api, getPos, position]);
92
147
  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
93
148
  "data-test-id": "block-ctrl-drop-target-".concat(position),
94
- css: [dropTargetCommonStyle, dropTargetRectStyle, !isDraggedOver && hideDropTargetStyle]
95
- }, (0, _react2.jsx)(_box.DropIndicator, {
149
+ css: [dropTargetCommonStyle, dropTargetRectStyle]
150
+ }, (isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) && (0, _react2.jsx)(_box.DropIndicator, {
96
151
  edge: position
97
152
  })), (0, _react2.jsx)(InlineHoverZone, {
98
153
  position: position,
@@ -101,7 +156,8 @@ var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref
101
156
  anchorRectCache: anchorRectCache,
102
157
  onDragEnter: handleDragEnter,
103
158
  onDragLeave: handleDragLeave,
104
- onDrop: onDrop
159
+ onDrop: onDrop,
160
+ offsets: offsets
105
161
  }));
106
162
  };
107
163
  var InlineHoverZone = exports.InlineHoverZone = function InlineHoverZone(_ref3) {
@@ -109,6 +165,7 @@ var InlineHoverZone = exports.InlineHoverZone = function InlineHoverZone(_ref3)
109
165
  editorWidthState = _ref3.editorWidthState,
110
166
  anchorRectCache = _ref3.anchorRectCache,
111
167
  position = _ref3.position,
168
+ offsets = _ref3.offsets,
112
169
  onDragEnter = _ref3.onDragEnter,
113
170
  onDragLeave = _ref3.onDragLeave,
114
171
  onDrop = _ref3.onDrop;
@@ -127,27 +184,29 @@ var InlineHoverZone = exports.InlineHoverZone = function InlineHoverZone(_ref3)
127
184
  }
128
185
  }, [onDragEnter, onDragLeave, onDrop]);
129
186
  var inlineHoverZoneRectStyle = (0, _react.useMemo)(function () {
187
+ var offset = offsets[position];
130
188
  if ((0, _anchorUtils.isAnchorSupported)()) {
131
189
  return (0, _react2.css)({
132
190
  positionAnchor: anchorName,
133
- left: position === 'left' ? 'unset' : "calc(anchor(right) + ".concat(GAP, "px)"),
134
- right: position === 'left' ? "calc(anchor(left) + ".concat(GAP, "px)") : 'unset',
191
+ left: position === 'left' ? 'unset' : "calc(anchor(right) + ".concat(GAP - offset, "px)"),
192
+ right: position === 'left' ? "calc(anchor(left) + ".concat(GAP - offset, "px)") : 'unset',
135
193
  top: "calc(anchor(top))",
136
- width: editorWith ? "calc((".concat(editorWith, "px - anchor-size(").concat(anchorName, " width))/2 - ").concat(HOVER_ZONE_WIDTH_OFFSET, "px)") : "".concat(HOVER_ZONE_DEFAULT_WIDTH, "px"),
194
+ width: editorWith ? "calc((".concat(editorWith, "px - anchor-size(").concat(anchorName, " width))/2 - ").concat(HOVER_ZONE_WIDTH_OFFSET, "px + ").concat(offset, "px)") : "".concat(HOVER_ZONE_DEFAULT_WIDTH, "px"),
137
195
  height: "calc(anchor-size(".concat(anchorName, " height))")
138
196
  });
139
197
  }
140
198
  var nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
141
- var width = editorWith ? (editorWith - ((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0)) / 2 - HOVER_ZONE_WIDTH_OFFSET : HOVER_ZONE_DEFAULT_WIDTH;
199
+ var width = editorWith ? (editorWith - ((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0)) / 2 - HOVER_ZONE_WIDTH_OFFSET + offset : HOVER_ZONE_DEFAULT_WIDTH;
142
200
  return (0, _react2.css)({
143
- left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP, "px"),
201
+ left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP + offset, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offset, "px"),
144
202
  top: "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0, "px"),
145
203
  width: "".concat(width, "px"),
146
204
  height: "calc(".concat((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0, "px - ").concat(HOVER_ZONE_HEIGHT_OFFSET, "px)")
147
205
  });
148
- }, [anchorName, anchorRectCache, editorWith, position]);
206
+ }, [anchorName, anchorRectCache, editorWith, offsets, position]);
149
207
  return (0, _react2.jsx)("div", {
150
208
  ref: ref,
209
+ "data-test-id": "drop-target-hover-zone-".concat(position),
151
210
  css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
152
211
  });
153
212
  };
package/dist/cjs/utils/check-media-layout.js ADDED
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.isWrappedMedia = void 0;
7
+ var isWrappedMedia = exports.isWrappedMedia = function isWrappedMedia(node) {
8
+ if ('mediaSingle' === (node === null || node === void 0 ? void 0 : node.type.name)) {
9
+ if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
10
+ return true;
11
+ }
12
+ }
13
+ return false;
14
+ };
package/dist/cjs/utils/inline-drop-target.js CHANGED
@@ -7,10 +7,14 @@ exports.shouldAllowInlineDropTarget = void 0;
7
7
  var _utils = require("@atlaskit/editor-common/utils");
8
8
  var _consts = require("../consts");
9
9
  var _advancedLayoutsFlags = require("./advanced-layouts-flags");
10
+ var _checkMediaLayout = require("./check-media-layout");
10
11
  var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
11
12
  if (!(0, _advancedLayoutsFlags.isPreRelease1)() || isNested) {
12
13
  return false;
13
14
  }
15
+ if ((0, _checkMediaLayout.isWrappedMedia)(node)) {
16
+ return false;
17
+ }
14
18
  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
15
19
  return node.childCount < _consts.MAX_LAYOUT_COLUMN_SUPPORTED;
16
20
  }
package/dist/es2019/commands/move-to-layout.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
2
+ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
2
3
  import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
3
4
  import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
4
5
  const createNewLayout = (schema, layoutContents) => {
@@ -68,13 +69,25 @@ export const moveToLayout = api => (from, to, position) => ({
68
69
  if ($to.nodeAfter.type === layoutSection) {
69
70
  const existingLayoutNode = $to.nodeAfter;
70
71
  if (existingLayoutNode.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
72
+ const newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[existingLayoutNode.childCount + 1];
73
+ if (newColumnWidth) {
74
+ existingLayoutNode.content.forEach((node, offset) => {
75
+ if (node.type === layoutColumn) {
76
+ tr = tr.setNodeAttribute(to + offset + 1, 'width', newColumnWidth);
77
+ }
78
+ });
79
+ }
71
80
  const toPos = position === 'left' ? to + 1 : to + existingLayoutNode.nodeSize - 1;
72
81
  tr = tr.insert(toPos,
73
82
  // resolve again the source node after node updated (remove breakout marks)
74
- layoutColumn.create(null, tr.doc.resolve(from).nodeAfter));
83
+ layoutColumn.create({
84
+ width: newColumnWidth
85
+ }, tr.doc.resolve(from).nodeAfter));
86
+ tr = tr.setSelection(new NodeSelection(tr.doc.resolve(toPos)));
75
87
  const mappedFrom = tr.mapping.map(from);
76
88
  const mappedFromEnd = mappedFrom + fromNode.nodeSize;
77
89
  tr = tr.delete(mappedFrom, mappedFromEnd);
90
+ tr = tr.scrollIntoView();
78
91
  return tr;
79
92
  }
80
93
  return tr;
@@ -91,6 +104,8 @@ export const moveToLayout = api => (from, to, position) => ({
91
104
  const mappedTo = tr.mapping.map(to);
92
105
  tr = tr.delete(mappedTo, mappedTo + toNode.nodeSize);
93
106
  tr = tr.insert(mappedTo, newLayout); // insert the content at the new position
107
+ tr = tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo)));
108
+ tr = tr.scrollIntoView();
94
109
  }
95
110
  return tr;
96
111
  }
package/dist/es2019/pm-plugins/decorations.js CHANGED
@@ -267,6 +267,7 @@ class ObjHash {
267
267
  }
268
268
  _defineProperty(ObjHash, "caching", new WeakMap());
269
269
  const shouldIgnoreNode = node => {
270
+ // TODO use isWrappedMedia when clean up the featue flag
270
271
  if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
271
272
  if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
272
273
  return true;
package/dist/es2019/ui/inline-drop-target.js CHANGED
@@ -13,17 +13,15 @@ import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indi
13
13
  import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
14
14
  import { getNodeAnchor } from '../pm-plugins/decorations';
15
15
  import { isAnchorSupported } from '../utils/anchor-utils';
16
+ import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
16
17
  const dropTargetCommonStyle = css({
17
18
  position: 'absolute',
18
19
  display: 'block'
19
20
  });
20
- const hideDropTargetStyle = css({
21
- display: 'none'
22
- });
23
21
  const hoverZoneCommonStyle = css({
24
22
  position: 'absolute',
25
- // same value as block hover zone
26
- zIndex: 110
23
+ // above the top and bottom drop zone as block hover zone
24
+ zIndex: 120
27
25
  });
28
26
 
29
27
  // gap between node boundary and drop indicator/drop zone
@@ -31,6 +29,60 @@ const GAP = 4;
31
29
  const HOVER_ZONE_WIDTH_OFFSET = 40;
32
30
  const HOVER_ZONE_HEIGHT_OFFSET = 10;
33
31
  const HOVER_ZONE_DEFAULT_WIDTH = 40;
32
+ const getDropTargetPositionOverride = (node, editorWidth) => {
33
+ if (!node || !editorWidth) {
34
+ return {
35
+ left: 0,
36
+ right: 0
37
+ };
38
+ }
39
+ const getOffsets = nodeWidth => {
40
+ const offset = (editorWidth - nodeWidth) / 2;
41
+ return {
42
+ left: offset,
43
+ right: offset
44
+ };
45
+ };
46
+ if ((node === null || node === void 0 ? void 0 : node.type.name) === 'table' && node.attrs.width) {
47
+ return getOffsets(node.attrs.width);
48
+ }
49
+
50
+ // media single 🤦
51
+ if ((node === null || node === void 0 ? void 0 : node.type.name) === 'mediaSingle') {
52
+ let mediaNodeWidth = 0;
53
+ if (node.attrs.width) {
54
+ if (node.attrs.widthType === 'pixel') {
55
+ mediaNodeWidth = node.attrs.width;
56
+ } else if (editorWidth) {
57
+ mediaNodeWidth = node.attrs.width / 100 * editorWidth;
58
+ }
59
+ } else {
60
+ // use media width
61
+ const mediaNode = node.firstChild;
62
+ if (mediaNode && mediaNode.attrs.width) {
63
+ mediaNodeWidth = mediaNode.attrs.width;
64
+ }
65
+ }
66
+ if (mediaNodeWidth) {
67
+ if (node.attrs.layout === 'align-start') {
68
+ return {
69
+ left: 0,
70
+ right: editorWidth - mediaNodeWidth
71
+ };
72
+ } else if (node.attrs.layout === 'align-end') {
73
+ return {
74
+ left: editorWidth - mediaNodeWidth,
75
+ right: 0
76
+ };
77
+ }
78
+ return getOffsets(mediaNodeWidth);
79
+ }
80
+ }
81
+ return {
82
+ left: 0,
83
+ right: 0
84
+ };
85
+ };
34
86
  export const InlineDropTarget = ({
35
87
  api,
36
88
  nextNode,
@@ -49,22 +101,25 @@ export const InlineDropTarget = ({
49
101
  const handleDragLeave = useCallback(() => {
50
102
  setIsDraggedOver(false);
51
103
  }, []);
104
+ const offsets = useMemo(() => {
105
+ return getDropTargetPositionOverride(nextNode, widthState === null || widthState === void 0 ? void 0 : widthState.lineLength);
106
+ }, [nextNode, widthState]);
52
107
  const dropTargetRectStyle = useMemo(() => {
53
108
  if (isAnchorSupported()) {
54
109
  return css({
55
110
  height: `calc(anchor-size(${anchorName} height))`,
56
111
  positionAnchor: anchorName,
57
- left: position === 'left' ? `calc(anchor(left) - ${GAP}px)` : `calc(anchor(right) + ${GAP}px)`,
112
+ left: position === 'left' ? `calc(anchor(left) - ${GAP - offsets.left}px)` : `calc(anchor(right) + ${GAP - offsets.right}px)`,
58
113
  top: `calc(anchor(top))`
59
114
  });
60
115
  }
61
116
  const nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
62
117
  return css({
63
118
  height: `calc(${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0}px)`,
64
- left: position === 'left' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP}px`,
119
+ left: position === 'left' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP + offsets.left}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offsets.right}px`,
65
120
  top: `${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0}px`
66
121
  });
67
- }, [anchorName, anchorRectCache, position]);
122
+ }, [anchorName, anchorRectCache, offsets.left, offsets.right, position]);
68
123
  const onDrop = useCallback(() => {
69
124
  var _api$blockControls;
70
125
  const {
@@ -84,8 +139,8 @@ export const InlineDropTarget = ({
84
139
  }, [api, getPos, position]);
85
140
  return jsx(Fragment, null, jsx("div", {
86
141
  "data-test-id": `block-ctrl-drop-target-${position}`,
87
- css: [dropTargetCommonStyle, dropTargetRectStyle, !isDraggedOver && hideDropTargetStyle]
88
- }, jsx(DropIndicator, {
142
+ css: [dropTargetCommonStyle, dropTargetRectStyle]
143
+ }, (isDraggedOver || isBlocksDragTargetDebug()) && jsx(DropIndicator, {
89
144
  edge: position
90
145
  })), jsx(InlineHoverZone, {
91
146
  position: position,
@@ -94,7 +149,8 @@ export const InlineDropTarget = ({
94
149
  anchorRectCache: anchorRectCache,
95
150
  onDragEnter: handleDragEnter,
96
151
  onDragLeave: handleDragLeave,
97
- onDrop: onDrop
152
+ onDrop: onDrop,
153
+ offsets: offsets
98
154
  }));
99
155
  };
100
156
  export const InlineHoverZone = ({
@@ -102,6 +158,7 @@ export const InlineHoverZone = ({
102
158
  editorWidthState,
103
159
  anchorRectCache,
104
160
  position,
161
+ offsets,
105
162
  onDragEnter,
106
163
  onDragLeave,
107
164
  onDrop
@@ -122,27 +179,29 @@ export const InlineHoverZone = ({
122
179
  }
123
180
  }, [onDragEnter, onDragLeave, onDrop]);
124
181
  const inlineHoverZoneRectStyle = useMemo(() => {
182
+ const offset = offsets[position];
125
183
  if (isAnchorSupported()) {
126
184
  return css({
127
185
  positionAnchor: anchorName,
128
- left: position === 'left' ? 'unset' : `calc(anchor(right) + ${GAP}px)`,
129
- right: position === 'left' ? `calc(anchor(left) + ${GAP}px)` : 'unset',
186
+ left: position === 'left' ? 'unset' : `calc(anchor(right) + ${GAP - offset}px)`,
187
+ right: position === 'left' ? `calc(anchor(left) + ${GAP - offset}px)` : 'unset',
130
188
  top: `calc(anchor(top))`,
131
- width: editorWith ? `calc((${editorWith}px - anchor-size(${anchorName} width))/2 - ${HOVER_ZONE_WIDTH_OFFSET}px)` : `${HOVER_ZONE_DEFAULT_WIDTH}px`,
189
+ width: editorWith ? `calc((${editorWith}px - anchor-size(${anchorName} width))/2 - ${HOVER_ZONE_WIDTH_OFFSET}px + ${offset}px)` : `${HOVER_ZONE_DEFAULT_WIDTH}px`,
132
190
  height: `calc(anchor-size(${anchorName} height))`
133
191
  });
134
192
  }
135
193
  const nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
136
- const width = editorWith ? (editorWith - ((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0)) / 2 - HOVER_ZONE_WIDTH_OFFSET : HOVER_ZONE_DEFAULT_WIDTH;
194
+ const width = editorWith ? (editorWith - ((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0)) / 2 - HOVER_ZONE_WIDTH_OFFSET + offset : HOVER_ZONE_DEFAULT_WIDTH;
137
195
  return css({
138
- left: position === 'left' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP}px`,
196
+ left: position === 'left' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP + offset}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offset}px`,
139
197
  top: `${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0}px`,
140
198
  width: `${width}px`,
141
199
  height: `calc(${(anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0}px - ${HOVER_ZONE_HEIGHT_OFFSET}px)`
142
200
  });
143
- }, [anchorName, anchorRectCache, editorWith, position]);
201
+ }, [anchorName, anchorRectCache, editorWith, offsets, position]);
144
202
  return jsx("div", {
145
203
  ref: ref,
204
+ "data-test-id": `drop-target-hover-zone-${position}`,
146
205
  css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
147
206
  });
148
207
  };
package/dist/es2019/utils/check-media-layout.js ADDED
@@ -0,0 +1,8 @@
1
+ export const isWrappedMedia = node => {
2
+ if ('mediaSingle' === (node === null || node === void 0 ? void 0 : node.type.name)) {
3
+ if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
4
+ return true;
5
+ }
6
+ }
7
+ return false;
8
+ };
package/dist/es2019/utils/inline-drop-target.js CHANGED
@@ -1,10 +1,14 @@
1
1
  import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
2
2
  import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
3
3
  import { isPreRelease1 } from './advanced-layouts-flags';
4
+ import { isWrappedMedia } from './check-media-layout';
4
5
  export const shouldAllowInlineDropTarget = (isNested, node) => {
5
6
  if (!isPreRelease1() || isNested) {
6
7
  return false;
7
8
  }
9
+ if (isWrappedMedia(node)) {
10
+ return false;
11
+ }
8
12
  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
9
13
  return node.childCount < MAX_LAYOUT_COLUMN_SUPPORTED;
10
14
  }
package/dist/esm/commands/move-to-layout.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
2
+ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
2
3
  import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
3
4
  import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
4
5
  var createNewLayout = function createNewLayout(schema, layoutContents) {
@@ -68,13 +69,25 @@ export var moveToLayout = function moveToLayout(api) {
68
69
  if ($to.nodeAfter.type === layoutSection) {
69
70
  var existingLayoutNode = $to.nodeAfter;
70
71
  if (existingLayoutNode.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
72
+ var newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[existingLayoutNode.childCount + 1];
73
+ if (newColumnWidth) {
74
+ existingLayoutNode.content.forEach(function (node, offset) {
75
+ if (node.type === layoutColumn) {
76
+ tr = tr.setNodeAttribute(to + offset + 1, 'width', newColumnWidth);
77
+ }
78
+ });
79
+ }
71
80
  var toPos = position === 'left' ? to + 1 : to + existingLayoutNode.nodeSize - 1;
72
81
  tr = tr.insert(toPos,
73
82
  // resolve again the source node after node updated (remove breakout marks)
74
- layoutColumn.create(null, tr.doc.resolve(from).nodeAfter));
83
+ layoutColumn.create({
84
+ width: newColumnWidth
85
+ }, tr.doc.resolve(from).nodeAfter));
86
+ tr = tr.setSelection(new NodeSelection(tr.doc.resolve(toPos)));
75
87
  var mappedFrom = tr.mapping.map(from);
76
88
  var mappedFromEnd = mappedFrom + fromNode.nodeSize;
77
89
  tr = tr.delete(mappedFrom, mappedFromEnd);
90
+ tr = tr.scrollIntoView();
78
91
  return tr;
79
92
  }
80
93
  return tr;
@@ -91,6 +104,8 @@ export var moveToLayout = function moveToLayout(api) {
91
104
  var mappedTo = tr.mapping.map(to);
92
105
  tr = tr.delete(mappedTo, mappedTo + toNode.nodeSize);
93
106
  tr = tr.insert(mappedTo, newLayout); // insert the content at the new position
107
+ tr = tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo)));
108
+ tr = tr.scrollIntoView();
94
109
  }
95
110
  return tr;
96
111
  }
package/dist/esm/pm-plugins/decorations.js CHANGED
@@ -282,6 +282,7 @@ var ObjHash = /*#__PURE__*/function () {
282
282
  }();
283
283
  _defineProperty(ObjHash, "caching", new WeakMap());
284
284
  var shouldIgnoreNode = function shouldIgnoreNode(node) {
285
+ // TODO use isWrappedMedia when clean up the featue flag
285
286
  if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
286
287
  if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
287
288
  return true;
package/dist/esm/ui/inline-drop-target.js CHANGED
@@ -14,17 +14,15 @@ import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indi
14
14
  import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
15
15
  import { getNodeAnchor } from '../pm-plugins/decorations';
16
16
  import { isAnchorSupported } from '../utils/anchor-utils';
17
+ import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
17
18
  var dropTargetCommonStyle = css({
18
19
  position: 'absolute',
19
20
  display: 'block'
20
21
  });
21
- var hideDropTargetStyle = css({
22
- display: 'none'
23
- });
24
22
  var hoverZoneCommonStyle = css({
25
23
  position: 'absolute',
26
- // same value as block hover zone
27
- zIndex: 110
24
+ // above the top and bottom drop zone as block hover zone
25
+ zIndex: 120
28
26
  });
29
27
 
30
28
  // gap between node boundary and drop indicator/drop zone
@@ -32,6 +30,60 @@ var GAP = 4;
32
30
  var HOVER_ZONE_WIDTH_OFFSET = 40;
33
31
  var HOVER_ZONE_HEIGHT_OFFSET = 10;
34
32
  var HOVER_ZONE_DEFAULT_WIDTH = 40;
33
+ var getDropTargetPositionOverride = function getDropTargetPositionOverride(node, editorWidth) {
34
+ if (!node || !editorWidth) {
35
+ return {
36
+ left: 0,
37
+ right: 0
38
+ };
39
+ }
40
+ var getOffsets = function getOffsets(nodeWidth) {
41
+ var offset = (editorWidth - nodeWidth) / 2;
42
+ return {
43
+ left: offset,
44
+ right: offset
45
+ };
46
+ };
47
+ if ((node === null || node === void 0 ? void 0 : node.type.name) === 'table' && node.attrs.width) {
48
+ return getOffsets(node.attrs.width);
49
+ }
50
+
51
+ // media single 🤦
52
+ if ((node === null || node === void 0 ? void 0 : node.type.name) === 'mediaSingle') {
53
+ var mediaNodeWidth = 0;
54
+ if (node.attrs.width) {
55
+ if (node.attrs.widthType === 'pixel') {
56
+ mediaNodeWidth = node.attrs.width;
57
+ } else if (editorWidth) {
58
+ mediaNodeWidth = node.attrs.width / 100 * editorWidth;
59
+ }
60
+ } else {
61
+ // use media width
62
+ var mediaNode = node.firstChild;
63
+ if (mediaNode && mediaNode.attrs.width) {
64
+ mediaNodeWidth = mediaNode.attrs.width;
65
+ }
66
+ }
67
+ if (mediaNodeWidth) {
68
+ if (node.attrs.layout === 'align-start') {
69
+ return {
70
+ left: 0,
71
+ right: editorWidth - mediaNodeWidth
72
+ };
73
+ } else if (node.attrs.layout === 'align-end') {
74
+ return {
75
+ left: editorWidth - mediaNodeWidth,
76
+ right: 0
77
+ };
78
+ }
79
+ return getOffsets(mediaNodeWidth);
80
+ }
81
+ }
82
+ return {
83
+ left: 0,
84
+ right: 0
85
+ };
86
+ };
35
87
  export var InlineDropTarget = function InlineDropTarget(_ref) {
36
88
  var api = _ref.api,
37
89
  nextNode = _ref.nextNode,
@@ -51,22 +103,25 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
51
103
  var handleDragLeave = useCallback(function () {
52
104
  setIsDraggedOver(false);
53
105
  }, []);
106
+ var offsets = useMemo(function () {
107
+ return getDropTargetPositionOverride(nextNode, widthState === null || widthState === void 0 ? void 0 : widthState.lineLength);
108
+ }, [nextNode, widthState]);
54
109
  var dropTargetRectStyle = useMemo(function () {
55
110
  if (isAnchorSupported()) {
56
111
  return css({
57
112
  height: "calc(anchor-size(".concat(anchorName, " height))"),
58
113
  positionAnchor: anchorName,
59
- left: position === 'left' ? "calc(anchor(left) - ".concat(GAP, "px)") : "calc(anchor(right) + ".concat(GAP, "px)"),
114
+ left: position === 'left' ? "calc(anchor(left) - ".concat(GAP - offsets.left, "px)") : "calc(anchor(right) + ".concat(GAP - offsets.right, "px)"),
60
115
  top: "calc(anchor(top))"
61
116
  });
62
117
  }
63
118
  var nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
64
119
  return css({
65
120
  height: "calc(".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0, "px)"),
66
- left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP, "px"),
121
+ left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP + offsets.left, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offsets.right, "px"),
67
122
  top: "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0, "px")
68
123
  });
69
- }, [anchorName, anchorRectCache, position]);
124
+ }, [anchorName, anchorRectCache, offsets.left, offsets.right, position]);
70
125
  var onDrop = useCallback(function () {
71
126
  var _api$blockControls;
72
127
  var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -83,8 +138,8 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
83
138
  }, [api, getPos, position]);
84
139
  return jsx(Fragment, null, jsx("div", {
85
140
  "data-test-id": "block-ctrl-drop-target-".concat(position),
86
- css: [dropTargetCommonStyle, dropTargetRectStyle, !isDraggedOver && hideDropTargetStyle]
87
- }, jsx(DropIndicator, {
141
+ css: [dropTargetCommonStyle, dropTargetRectStyle]
142
+ }, (isDraggedOver || isBlocksDragTargetDebug()) && jsx(DropIndicator, {
88
143
  edge: position
89
144
  })), jsx(InlineHoverZone, {
90
145
  position: position,
@@ -93,7 +148,8 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
93
148
  anchorRectCache: anchorRectCache,
94
149
  onDragEnter: handleDragEnter,
95
150
  onDragLeave: handleDragLeave,
96
- onDrop: onDrop
151
+ onDrop: onDrop,
152
+ offsets: offsets
97
153
  }));
98
154
  };
99
155
  export var InlineHoverZone = function InlineHoverZone(_ref3) {
@@ -101,6 +157,7 @@ export var InlineHoverZone = function InlineHoverZone(_ref3) {
101
157
  editorWidthState = _ref3.editorWidthState,
102
158
  anchorRectCache = _ref3.anchorRectCache,
103
159
  position = _ref3.position,
160
+ offsets = _ref3.offsets,
104
161
  onDragEnter = _ref3.onDragEnter,
105
162
  onDragLeave = _ref3.onDragLeave,
106
163
  onDrop = _ref3.onDrop;
@@ -119,27 +176,29 @@ export var InlineHoverZone = function InlineHoverZone(_ref3) {
119
176
  }
120
177
  }, [onDragEnter, onDragLeave, onDrop]);
121
178
  var inlineHoverZoneRectStyle = useMemo(function () {
179
+ var offset = offsets[position];
122
180
  if (isAnchorSupported()) {
123
181
  return css({
124
182
  positionAnchor: anchorName,
125
- left: position === 'left' ? 'unset' : "calc(anchor(right) + ".concat(GAP, "px)"),
126
- right: position === 'left' ? "calc(anchor(left) + ".concat(GAP, "px)") : 'unset',
183
+ left: position === 'left' ? 'unset' : "calc(anchor(right) + ".concat(GAP - offset, "px)"),
184
+ right: position === 'left' ? "calc(anchor(left) + ".concat(GAP - offset, "px)") : 'unset',
127
185
  top: "calc(anchor(top))",
128
- width: editorWith ? "calc((".concat(editorWith, "px - anchor-size(").concat(anchorName, " width))/2 - ").concat(HOVER_ZONE_WIDTH_OFFSET, "px)") : "".concat(HOVER_ZONE_DEFAULT_WIDTH, "px"),
186
+ width: editorWith ? "calc((".concat(editorWith, "px - anchor-size(").concat(anchorName, " width))/2 - ").concat(HOVER_ZONE_WIDTH_OFFSET, "px + ").concat(offset, "px)") : "".concat(HOVER_ZONE_DEFAULT_WIDTH, "px"),
129
187
  height: "calc(anchor-size(".concat(anchorName, " height))")
130
188
  });
131
189
  }
132
190
  var nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
133
- var width = editorWith ? (editorWith - ((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0)) / 2 - HOVER_ZONE_WIDTH_OFFSET : HOVER_ZONE_DEFAULT_WIDTH;
191
+ var width = editorWith ? (editorWith - ((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0)) / 2 - HOVER_ZONE_WIDTH_OFFSET + offset : HOVER_ZONE_DEFAULT_WIDTH;
134
192
  return css({
135
- left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP, "px"),
193
+ left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP + offset, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offset, "px"),
136
194
  top: "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0, "px"),
137
195
  width: "".concat(width, "px"),
138
196
  height: "calc(".concat((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0, "px - ").concat(HOVER_ZONE_HEIGHT_OFFSET, "px)")
139
197
  });
140
- }, [anchorName, anchorRectCache, editorWith, position]);
198
+ }, [anchorName, anchorRectCache, editorWith, offsets, position]);
141
199
  return jsx("div", {
142
200
  ref: ref,
201
+ "data-test-id": "drop-target-hover-zone-".concat(position),
143
202
  css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
144
203
  });
145
204
  };
package/dist/esm/utils/check-media-layout.js ADDED
@@ -0,0 +1,8 @@
1
+ export var isWrappedMedia = function isWrappedMedia(node) {
2
+ if ('mediaSingle' === (node === null || node === void 0 ? void 0 : node.type.name)) {
3
+ if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
4
+ return true;
5
+ }
6
+ }
7
+ return false;
8
+ };
package/dist/esm/utils/inline-drop-target.js CHANGED
@@ -1,10 +1,14 @@
1
1
  import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
2
2
  import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
3
3
  import { isPreRelease1 } from './advanced-layouts-flags';
4
+ import { isWrappedMedia } from './check-media-layout';
4
5
  export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
5
6
  if (!isPreRelease1() || isNested) {
6
7
  return false;
7
8
  }
9
+ if (isWrappedMedia(node)) {
10
+ return false;
11
+ }
8
12
  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
9
13
  return node.childCount < MAX_LAYOUT_COLUMN_SUPPORTED;
10
14
  }
package/dist/types/ui/inline-drop-target.d.ts CHANGED
@@ -3,6 +3,10 @@ import { type EditorContainerWidth } from '@atlaskit/editor-common/src/types';
3
3
  import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
4
4
  import { type AnchorRectCache } from '../utils/anchor-utils';
5
5
  import { type DropTargetProps } from './drop-target';
6
+ type DropTargetOffsets = {
7
+ left: number;
8
+ right: number;
9
+ };
6
10
  export declare const InlineDropTarget: ({ api, nextNode, position, anchorRectCache, getPos, }: DropTargetProps & {
7
11
  anchorRectCache?: AnchorRectCache | undefined;
8
12
  position: 'left' | 'right';
@@ -12,9 +16,10 @@ type InlineHoverZoneProps = {
12
16
  editorWidthState?: EditorContainerWidth;
13
17
  anchorRectCache?: AnchorRectCache;
14
18
  position: 'left' | 'right';
19
+ offsets: DropTargetOffsets;
15
20
  onDragEnter: () => void;
16
21
  onDragLeave: () => void;
17
22
  onDrop: () => void;
18
23
  };
19
- export declare const InlineHoverZone: ({ node, editorWidthState, anchorRectCache, position, onDragEnter, onDragLeave, onDrop, }: InlineHoverZoneProps) => jsx.JSX.Element;
24
+ export declare const InlineHoverZone: ({ node, editorWidthState, anchorRectCache, position, offsets, onDragEnter, onDragLeave, onDrop, }: InlineHoverZoneProps) => jsx.JSX.Element;
20
25
  export {};
package/dist/types/utils/check-media-layout.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
2
+ export declare const isWrappedMedia: (node?: PMNode) => boolean;
package/dist/types-ts4.5/ui/inline-drop-target.d.ts CHANGED
@@ -3,6 +3,10 @@ import { type EditorContainerWidth } from '@atlaskit/editor-common/src/types';
3
3
  import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
4
4
  import { type AnchorRectCache } from '../utils/anchor-utils';
5
5
  import { type DropTargetProps } from './drop-target';
6
+ type DropTargetOffsets = {
7
+ left: number;
8
+ right: number;
9
+ };
6
10
  export declare const InlineDropTarget: ({ api, nextNode, position, anchorRectCache, getPos, }: DropTargetProps & {
7
11
  anchorRectCache?: AnchorRectCache | undefined;
8
12
  position: 'left' | 'right';
@@ -12,9 +16,10 @@ type InlineHoverZoneProps = {
12
16
  editorWidthState?: EditorContainerWidth;
13
17
  anchorRectCache?: AnchorRectCache;
14
18
  position: 'left' | 'right';
19
+ offsets: DropTargetOffsets;
15
20
  onDragEnter: () => void;
16
21
  onDragLeave: () => void;
17
22
  onDrop: () => void;
18
23
  };
19
- export declare const InlineHoverZone: ({ node, editorWidthState, anchorRectCache, position, onDragEnter, onDragLeave, onDrop, }: InlineHoverZoneProps) => jsx.JSX.Element;
24
+ export declare const InlineHoverZone: ({ node, editorWidthState, anchorRectCache, position, offsets, onDragEnter, onDragLeave, onDrop, }: InlineHoverZoneProps) => jsx.JSX.Element;
20
25
  export {};
package/dist/types-ts4.5/utils/check-media-layout.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
2
+ export declare const isWrappedMedia: (node?: PMNode) => boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "2.9.0",
3
+ "version": "2.10.0",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,24 +31,24 @@
31
31
  },
32
32
  "dependencies": {
33
33
  "@atlaskit/adf-schema": "^42.3.1",
34
- "@atlaskit/editor-common": "^94.0.0",
34
+ "@atlaskit/editor-common": "^94.2.0",
35
35
  "@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.10.0",
37
37
  "@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
38
38
  "@atlaskit/editor-plugin-feature-flags": "^1.2.0",
39
- "@atlaskit/editor-plugin-quick-insert": "^1.4.0",
39
+ "@atlaskit/editor-plugin-quick-insert": "^1.5.0",
40
40
  "@atlaskit/editor-plugin-width": "^1.3.0",
41
41
  "@atlaskit/editor-prosemirror": "6.0.0",
42
42
  "@atlaskit/editor-shared-styles": "^3.0.0",
43
43
  "@atlaskit/editor-tables": "^2.8.0",
44
- "@atlaskit/icon": "^22.23.0",
44
+ "@atlaskit/icon": "^22.24.0",
45
45
  "@atlaskit/platform-feature-flags": "^0.3.0",
46
46
  "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
47
47
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
48
48
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
49
49
  "@atlaskit/primitives": "^12.2.0",
50
50
  "@atlaskit/theme": "^14.0.0",
51
- "@atlaskit/tmp-editor-statsig": "^2.7.0",
51
+ "@atlaskit/tmp-editor-statsig": "^2.8.0",
52
52
  "@atlaskit/tokens": "^2.0.0",
53
53
  "@atlaskit/tooltip": "^18.8.0",
54
54
  "@babel/runtime": "^7.0.0",