@atlaskit/editor-plugin-block-controls 1.13.0 → 1.13.2

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 (17) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/commands/move-node.js +18 -10
  3. package/dist/cjs/pm-plugins/decorations.js +3 -2
  4. package/dist/cjs/pm-plugins/handle-mouse-over.js +4 -3
  5. package/dist/cjs/ui/drop-target.js +10 -8
  6. package/dist/cjs/ui/global-styles.js +7 -1
  7. package/dist/es2019/commands/move-node.js +11 -3
  8. package/dist/es2019/pm-plugins/decorations.js +3 -2
  9. package/dist/es2019/pm-plugins/handle-mouse-over.js +4 -3
  10. package/dist/es2019/ui/drop-target.js +10 -7
  11. package/dist/es2019/ui/global-styles.js +7 -1
  12. package/dist/esm/commands/move-node.js +11 -3
  13. package/dist/esm/pm-plugins/decorations.js +3 -2
  14. package/dist/esm/pm-plugins/handle-mouse-over.js +4 -3
  15. package/dist/esm/ui/drop-target.js +10 -8
  16. package/dist/esm/ui/global-styles.js +7 -1
  17. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.13.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#136674](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136674)
8
+ [`1f8459f560d36`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1f8459f560d36) -
9
+ [ux] Bump z-index of drop targets
10
+
11
+ ## 1.13.1
12
+
13
+ ### Patch Changes
14
+
15
+ - [#137849](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137849)
16
+ [`005c00c30884a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/005c00c30884a) -
17
+ ED-24874 Only disable dragging top level nested nodes in tables
18
+ - [#137156](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137156)
19
+ [`eccceae25389f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eccceae25389f) -
20
+ [ux] Don't show drop target in final container position if proceeded by empty paragraph, replace
21
+ it if only empty paragraph
22
+ - [#137755](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137755)
23
+ [`f3d004d4e3a3e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3d004d4e3a3e) -
24
+ ED-24650 fix nested node jittering issue
25
+ - Updated dependencies
26
+
3
27
  ## 1.13.0
4
28
 
5
29
  ### Minor Changes
package/dist/cjs/commands/move-node.js CHANGED
@@ -10,12 +10,13 @@ var _analytics = require("@atlaskit/editor-common/analytics");
10
10
  var _messages = require("@atlaskit/editor-common/messages");
11
11
  var _selection = require("@atlaskit/editor-common/selection");
12
12
  var _transforms = require("@atlaskit/editor-common/transforms");
13
- var _utils = require("@atlaskit/editor-tables/utils");
13
+ var _utils = require("@atlaskit/editor-common/utils");
14
+ var _utils2 = require("@atlaskit/editor-tables/utils");
14
15
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
16
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
16
17
  var _consts = require("../consts");
17
18
  var _main = require("../pm-plugins/main");
18
- var _utils2 = require("../utils");
19
+ var _utils3 = require("../utils");
19
20
  var _validation = require("../utils/validation");
20
21
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
21
22
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -56,12 +57,12 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
56
57
  if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
57
58
  // 1. drag handle of the node is focused
58
59
  currentNodePos = activeNode.pos;
59
- } else if ((0, _utils.isInTable)(state)) {
60
- if ((0, _utils.isTableSelected)(selection)) {
60
+ } else if ((0, _utils2.isInTable)(state)) {
61
+ if ((0, _utils2.isTableSelected)(selection)) {
61
62
  var _findTable$pos, _findTable;
62
63
  // We only move table node if it's fully selected
63
64
  // to avoid shortcut collision with table drag and drop
64
- currentNodePos = (_findTable$pos = (_findTable = (0, _utils.findTable)(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
65
+ currentNodePos = (_findTable$pos = (_findTable = (0, _utils2.findTable)(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
65
66
  }
66
67
  } else if (!(state.selection instanceof _selection.GapCursorSelection)) {
67
68
  // 2. caret cursor is inside the node
@@ -108,7 +109,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
108
109
  // If the node is first/last one, only select the node
109
110
  api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
110
111
  var tr = _ref3.tr;
111
- (0, _utils2.selectNode)(tr, currentNodePos, nodeType);
112
+ (0, _utils3.selectNode)(tr, currentNodePos, nodeType);
112
113
  tr.scrollIntoView();
113
114
  return tr;
114
115
  });
@@ -134,7 +135,6 @@ var moveNode = exports.moveNode = function moveNode(api) {
134
135
  var end = start + size;
135
136
  var mappedTo;
136
137
  if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
137
- var _transformSourceSlice;
138
138
  var nodeCopy = tr.doc.slice(start, end, false); // cut the content
139
139
  var $to = tr.doc.resolve(to);
140
140
  var $from = tr.doc.resolve(start);
@@ -143,20 +143,28 @@ var moveNode = exports.moveNode = function moveNode(api) {
143
143
  if (!(0, _validation.canMoveNodeToIndex)(destParent, $to.index(), $from.node().child($from.index()))) {
144
144
  return tr;
145
145
  }
146
- var convertedNode = (_transformSourceSlice = transformSourceSlice(nodeCopy, destType)) === null || _transformSourceSlice === void 0 ? void 0 : _transformSourceSlice.content;
146
+ var convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
147
+ var convertedNode = convertedNodeSlice === null || convertedNodeSlice === void 0 ? void 0 : convertedNodeSlice.content;
147
148
  if (!convertedNode) {
148
149
  return tr;
149
150
  }
150
151
  tr.delete(start, end); // delete the content from the original position
151
152
  mappedTo = tr.mapping.map(to);
152
- tr.insert(mappedTo, convertedNode); // insert the content at the new position
153
+ var isDestNestedLoneEmptyParagraph = destParent.type.name !== 'doc' && destParent.childCount === 1 && (0, _utils.isEmptyParagraph)($to.nodeAfter);
154
+ if (convertedNodeSlice && isDestNestedLoneEmptyParagraph) {
155
+ // if only a single empty paragraph within container, replace it
156
+ tr.replace(mappedTo, mappedTo + 1, convertedNodeSlice);
157
+ } else {
158
+ // otherwise just insert the content at the new position
159
+ tr.insert(mappedTo, convertedNode);
160
+ }
153
161
  } else {
154
162
  var _nodeCopy = tr.doc.content.cut(start, end); // cut the content
155
163
  tr.delete(start, end); // delete the content from the original position
156
164
  mappedTo = tr.mapping.map(to);
157
165
  tr.insert(mappedTo, _nodeCopy); // insert the content at the new position
158
166
  }
159
- tr = (0, _utils2.selectNode)(tr, mappedTo, node.type.name);
167
+ tr = (0, _utils3.selectNode)(tr, mappedTo, node.type.name);
160
168
  tr.setMeta(_main.key, {
161
169
  nodeMoved: true
162
170
  });
package/dist/cjs/pm-plugins/decorations.js CHANGED
@@ -13,6 +13,7 @@ var _bindEventListener = require("bind-event-listener");
13
13
  var _reactDom = _interopRequireDefault(require("react-dom"));
14
14
  var _reactIntlNext = require("react-intl-next");
15
15
  var _uuid = _interopRequireDefault(require("uuid"));
16
+ var _utils = require("@atlaskit/editor-common/utils");
16
17
  var _view = require("@atlaskit/editor-prosemirror/view");
17
18
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
18
19
  var _dragHandle = require("../ui/drag-handle");
@@ -48,7 +49,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
48
49
  var activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
49
50
  newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, parent, index) {
50
51
  var depth = 0;
51
- // drop target dco at the end position
52
+ // drop target deco at the end position
52
53
  var endPosDeco = null;
53
54
  if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
54
55
  depth = newState.doc.resolve(pos).depth;
@@ -71,7 +72,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
71
72
  id: pos,
72
73
  pos: pos
73
74
  });
74
- if (parent.lastChild === node && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
75
+ if (parent.lastChild === node && !(0, _utils.isEmptyParagraph)(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
75
76
  var endpos = pos + node.nodeSize;
76
77
  endPosDeco = {
77
78
  id: endpos,
package/dist/cjs/pm-plugins/handle-mouse-over.js CHANGED
@@ -22,11 +22,12 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
22
22
  }
23
23
  var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
24
24
  if (rootElement) {
25
- var tableElement = rootElement.closest('[data-drag-handler-node-type="table"]');
26
- if (tableElement && (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _experiments.editorExperiment)('table-nested-dnd', false, {
25
+ var _rootElement$parentEl;
26
+ var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
27
+ if (parentElement && parentElement.getAttribute('data-drag-handler-node-type') === 'table' && (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _experiments.editorExperiment)('table-nested-dnd', false, {
27
28
  exposure: true
28
29
  })) {
29
- rootElement = tableElement;
30
+ rootElement = parentElement;
30
31
  }
31
32
  var anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
32
33
  var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
package/dist/cjs/ui/drop-target.js CHANGED
@@ -13,6 +13,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
13
13
  var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
14
14
  var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
15
15
  var _constants = require("@atlaskit/theme/constants");
16
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
16
17
  var _dragTargetDebug = require("../utils/drag-target-debug");
17
18
  var _consts = require("./consts");
18
19
  /**
@@ -24,16 +25,17 @@ var _consts = require("./consts");
24
25
 
25
26
  var DEFAULT_DROP_INDICATOR_WIDTH = 760;
26
27
  var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
27
- var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN = '--editor-block-controls-drop-indicator-leftMargin';
28
+ var EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN = '--editor-block-controls-drop-target-leftMargin';
29
+ var EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX = '--editor-block-controls-drop-target-zindex';
28
30
  var styleDropTarget = (0, _react2.css)({
29
31
  height: "var(--ds-space-100, 8px)",
30
32
  marginTop: "var(--ds-space-negative-100, -8px)",
31
- marginLeft: "calc(-1 * var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, ", 0))"),
32
- paddingLeft: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, ", 0)"),
33
+ marginLeft: "calc(-1 * var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, ", 0))"),
34
+ paddingLeft: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, ", 0)"),
33
35
  position: 'absolute',
34
36
  left: '0',
35
37
  display: 'block',
36
- zIndex: _constants.layers.card()
38
+ zIndex: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, ", 110)")
37
39
  });
38
40
  var styleDropIndicator = (0, _react2.css)({
39
41
  height: '100%',
@@ -78,7 +80,7 @@ var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextN
78
80
  return marginLookupMap[offset];
79
81
  };
80
82
  var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
81
- var _widthStyle;
83
+ var _dynamicStyle;
82
84
  var api = _ref3.api,
83
85
  id = _ref3.id,
84
86
  prevNode = _ref3.prevNode,
@@ -139,9 +141,9 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
139
141
  }
140
142
  return getDropTargetOffsetStyle(prevNode, nextNode);
141
143
  }, [prevNode, nextNode, parentNode]);
142
- var widthStyle = (_widthStyle = {
144
+ var dynamicStyle = (_dynamicStyle = {
143
145
  width: isNestedDropTarget ? 'unset' : '100%'
144
- }, (0, _defineProperty2.default)(_widthStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), (0, _defineProperty2.default)(_widthStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), _widthStyle);
146
+ }, (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, (0, _experiments.editorExperiment)('nested-dnd', true) ? _constants.layers.navigation() : _constants.layers.card()), _dynamicStyle);
145
147
  return (
146
148
  // Note: Firefox has trouble with using a button element as the handle for drag and drop
147
149
  (0, _react2.jsx)("div", {
@@ -149,7 +151,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
149
151
  css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
150
152
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
151
153
  ,
152
- style: widthStyle,
154
+ style: dynamicStyle,
153
155
  ref: ref,
154
156
  "data-testid": "block-ctrl-drop-target"
155
157
  },
package/dist/cjs/ui/global-styles.js CHANGED
@@ -109,7 +109,13 @@ var withInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".Pr
109
109
  var withInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector, ",\n\t ").concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector), {
110
110
  transform: 'scale(0)'
111
111
  }));
112
- var globalStyles = (0, _react.css)({
112
+ var globalStyles = (0, _experiments.editorExperiment)('nested-dnd', true) ? (0, _react.css)({
113
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
114
+ '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"])': {
115
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
116
+ marginTop: '0 !important'
117
+ }
118
+ }) : (0, _react.css)({
113
119
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
114
120
  '.ProseMirror-widget:first-child + *': {
115
121
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
package/dist/es2019/commands/move-node.js CHANGED
@@ -2,6 +2,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
2
2
  import { blockControlsMessages } from '@atlaskit/editor-common/messages';
3
3
  import { GapCursorSelection } from '@atlaskit/editor-common/selection';
4
4
  import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
5
+ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
5
6
  import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
6
7
  import { fg } from '@atlaskit/platform-feature-flags';
7
8
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -128,7 +129,6 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
128
129
  const end = start + size;
129
130
  let mappedTo;
130
131
  if (editorExperiment('nested-dnd', true)) {
131
- var _transformSourceSlice;
132
132
  const nodeCopy = tr.doc.slice(start, end, false); // cut the content
133
133
  const $to = tr.doc.resolve(to);
134
134
  const $from = tr.doc.resolve(start);
@@ -137,13 +137,21 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
137
137
  if (!canMoveNodeToIndex(destParent, $to.index(), $from.node().child($from.index()))) {
138
138
  return tr;
139
139
  }
140
- const convertedNode = (_transformSourceSlice = transformSourceSlice(nodeCopy, destType)) === null || _transformSourceSlice === void 0 ? void 0 : _transformSourceSlice.content;
140
+ const convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
141
+ const convertedNode = convertedNodeSlice === null || convertedNodeSlice === void 0 ? void 0 : convertedNodeSlice.content;
141
142
  if (!convertedNode) {
142
143
  return tr;
143
144
  }
144
145
  tr.delete(start, end); // delete the content from the original position
145
146
  mappedTo = tr.mapping.map(to);
146
- tr.insert(mappedTo, convertedNode); // insert the content at the new position
147
+ const isDestNestedLoneEmptyParagraph = destParent.type.name !== 'doc' && destParent.childCount === 1 && isEmptyParagraph($to.nodeAfter);
148
+ if (convertedNodeSlice && isDestNestedLoneEmptyParagraph) {
149
+ // if only a single empty paragraph within container, replace it
150
+ tr.replace(mappedTo, mappedTo + 1, convertedNodeSlice);
151
+ } else {
152
+ // otherwise just insert the content at the new position
153
+ tr.insert(mappedTo, convertedNode);
154
+ }
147
155
  } else {
148
156
  const nodeCopy = tr.doc.content.cut(start, end); // cut the content
149
157
  tr.delete(start, end); // delete the content from the original position
package/dist/es2019/pm-plugins/decorations.js CHANGED
@@ -4,6 +4,7 @@ import { bind } from 'bind-event-listener';
4
4
  import ReactDOM from 'react-dom';
5
5
  import { RawIntlProvider } from 'react-intl-next';
6
6
  import uuid from 'uuid';
7
+ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
7
8
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
8
9
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
9
10
  import { DragHandle } from '../ui/drag-handle';
@@ -37,7 +38,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
37
38
  const activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
38
39
  newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos, parent, index) => {
39
40
  let depth = 0;
40
- // drop target dco at the end position
41
+ // drop target deco at the end position
41
42
  let endPosDeco = null;
42
43
  if (editorExperiment('nested-dnd', true)) {
43
44
  depth = newState.doc.resolve(pos).depth;
@@ -60,7 +61,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
60
61
  id: pos,
61
62
  pos
62
63
  });
63
- if (parent.lastChild === node && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
64
+ if (parent.lastChild === node && !isEmptyParagraph(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
64
65
  const endpos = pos + node.nodeSize;
65
66
  endPosDeco = {
66
67
  id: endpos,
package/dist/es2019/pm-plugins/handle-mouse-over.js CHANGED
@@ -17,11 +17,12 @@ export const handleMouseOver = (view, event, api) => {
17
17
  }
18
18
  let rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
19
19
  if (rootElement) {
20
- const tableElement = rootElement.closest('[data-drag-handler-node-type="table"]');
21
- if (tableElement && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
20
+ var _rootElement$parentEl;
21
+ const parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
22
+ if (parentElement && parentElement.getAttribute('data-drag-handler-node-type') === 'table' && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
22
23
  exposure: true
23
24
  })) {
24
- rootElement = tableElement;
25
+ rootElement = parentElement;
25
26
  }
26
27
  const anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
27
28
  const nodeType = rootElement.getAttribute('data-drag-handler-node-type');
package/dist/es2019/ui/drop-target.js CHANGED
@@ -10,20 +10,22 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
10
10
  import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
11
11
  import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
12
12
  import { layers } from '@atlaskit/theme/constants';
13
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
13
14
  import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
14
15
  import { getNestedNodeLeftPaddingMargin, nodeMargins, spaceLookupMap } from './consts';
15
16
  const DEFAULT_DROP_INDICATOR_WIDTH = 760;
16
17
  const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
17
- const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN = '--editor-block-controls-drop-indicator-leftMargin';
18
+ const EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN = '--editor-block-controls-drop-target-leftMargin';
19
+ const EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX = '--editor-block-controls-drop-target-zindex';
18
20
  const styleDropTarget = css({
19
21
  height: "var(--ds-space-100, 8px)",
20
22
  marginTop: "var(--ds-space-negative-100, -8px)",
21
- marginLeft: `calc(-1 * var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN}, 0))`,
22
- paddingLeft: `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN}, 0)`,
23
+ marginLeft: `calc(-1 * var(${EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN}, 0))`,
24
+ paddingLeft: `var(${EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN}, 0)`,
23
25
  position: 'absolute',
24
26
  left: '0',
25
27
  display: 'block',
26
- zIndex: layers.card()
28
+ zIndex: `var(${EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX}, 110)`
27
29
  });
28
30
  const styleDropIndicator = css({
29
31
  height: '100%',
@@ -122,10 +124,11 @@ export const DropTarget = ({
122
124
  }
123
125
  return getDropTargetOffsetStyle(prevNode, nextNode);
124
126
  }, [prevNode, nextNode, parentNode]);
125
- const widthStyle = {
127
+ const dynamicStyle = {
126
128
  width: isNestedDropTarget ? 'unset' : '100%',
127
129
  [EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH]: isNestedDropTarget ? '100%' : `${(widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH}px`,
128
- [EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN]: isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'
130
+ [EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN]: isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0',
131
+ [EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX]: editorExperiment('nested-dnd', true) ? layers.navigation() : layers.card()
129
132
  };
130
133
  return (
131
134
  // Note: Firefox has trouble with using a button element as the handle for drag and drop
@@ -134,7 +137,7 @@ export const DropTarget = ({
134
137
  css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
135
138
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
136
139
  ,
137
- style: widthStyle,
140
+ style: dynamicStyle,
138
141
  ref: ref,
139
142
  "data-testid": "block-ctrl-drop-target"
140
143
  },
package/dist/es2019/ui/global-styles.js CHANGED
@@ -107,7 +107,13 @@ const withInlineNodeStyleWithChromeFix = css({
107
107
  transform: 'scale(0)'
108
108
  }
109
109
  });
110
- const globalStyles = css({
110
+ const globalStyles = editorExperiment('nested-dnd', true) ? css({
111
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
112
+ '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"])': {
113
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
114
+ marginTop: '0 !important'
115
+ }
116
+ }) : css({
111
117
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
112
118
  '.ProseMirror-widget:first-child + *': {
113
119
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
package/dist/esm/commands/move-node.js CHANGED
@@ -5,6 +5,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
5
5
  import { blockControlsMessages } from '@atlaskit/editor-common/messages';
6
6
  import { GapCursorSelection } from '@atlaskit/editor-common/selection';
7
7
  import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
8
+ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
8
9
  import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
9
10
  import { fg } from '@atlaskit/platform-feature-flags';
10
11
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -128,7 +129,6 @@ export var moveNode = function moveNode(api) {
128
129
  var end = start + size;
129
130
  var mappedTo;
130
131
  if (editorExperiment('nested-dnd', true)) {
131
- var _transformSourceSlice;
132
132
  var nodeCopy = tr.doc.slice(start, end, false); // cut the content
133
133
  var $to = tr.doc.resolve(to);
134
134
  var $from = tr.doc.resolve(start);
@@ -137,13 +137,21 @@ export var moveNode = function moveNode(api) {
137
137
  if (!canMoveNodeToIndex(destParent, $to.index(), $from.node().child($from.index()))) {
138
138
  return tr;
139
139
  }
140
- var convertedNode = (_transformSourceSlice = transformSourceSlice(nodeCopy, destType)) === null || _transformSourceSlice === void 0 ? void 0 : _transformSourceSlice.content;
140
+ var convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
141
+ var convertedNode = convertedNodeSlice === null || convertedNodeSlice === void 0 ? void 0 : convertedNodeSlice.content;
141
142
  if (!convertedNode) {
142
143
  return tr;
143
144
  }
144
145
  tr.delete(start, end); // delete the content from the original position
145
146
  mappedTo = tr.mapping.map(to);
146
- tr.insert(mappedTo, convertedNode); // insert the content at the new position
147
+ var isDestNestedLoneEmptyParagraph = destParent.type.name !== 'doc' && destParent.childCount === 1 && isEmptyParagraph($to.nodeAfter);
148
+ if (convertedNodeSlice && isDestNestedLoneEmptyParagraph) {
149
+ // if only a single empty paragraph within container, replace it
150
+ tr.replace(mappedTo, mappedTo + 1, convertedNodeSlice);
151
+ } else {
152
+ // otherwise just insert the content at the new position
153
+ tr.insert(mappedTo, convertedNode);
154
+ }
147
155
  } else {
148
156
  var _nodeCopy = tr.doc.content.cut(start, end); // cut the content
149
157
  tr.delete(start, end); // delete the content from the original position
package/dist/esm/pm-plugins/decorations.js CHANGED
@@ -6,6 +6,7 @@ import { bind } from 'bind-event-listener';
6
6
  import ReactDOM from 'react-dom';
7
7
  import { RawIntlProvider } from 'react-intl-next';
8
8
  import uuid from 'uuid';
9
+ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
9
10
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
10
11
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
11
12
  import { DragHandle } from '../ui/drag-handle';
@@ -41,7 +42,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
41
42
  var activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
42
43
  newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, parent, index) {
43
44
  var depth = 0;
44
- // drop target dco at the end position
45
+ // drop target deco at the end position
45
46
  var endPosDeco = null;
46
47
  if (editorExperiment('nested-dnd', true)) {
47
48
  depth = newState.doc.resolve(pos).depth;
@@ -64,7 +65,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
64
65
  id: pos,
65
66
  pos: pos
66
67
  });
67
- if (parent.lastChild === node && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
68
+ if (parent.lastChild === node && !isEmptyParagraph(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
68
69
  var endpos = pos + node.nodeSize;
69
70
  endPosDeco = {
70
71
  id: endpos,
package/dist/esm/pm-plugins/handle-mouse-over.js CHANGED
@@ -16,11 +16,12 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
16
16
  }
17
17
  var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
18
18
  if (rootElement) {
19
- var tableElement = rootElement.closest('[data-drag-handler-node-type="table"]');
20
- if (tableElement && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
19
+ var _rootElement$parentEl;
20
+ var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
21
+ if (parentElement && parentElement.getAttribute('data-drag-handler-node-type') === 'table' && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
21
22
  exposure: true
22
23
  })) {
23
- rootElement = tableElement;
24
+ rootElement = parentElement;
24
25
  }
25
26
  var anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
26
27
  var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
package/dist/esm/ui/drop-target.js CHANGED
@@ -12,20 +12,22 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
12
12
  import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
13
13
  import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
14
14
  import { layers } from '@atlaskit/theme/constants';
15
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
15
16
  import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
16
17
  import { getNestedNodeLeftPaddingMargin, nodeMargins, spaceLookupMap } from './consts';
17
18
  var DEFAULT_DROP_INDICATOR_WIDTH = 760;
18
19
  var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
19
- var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN = '--editor-block-controls-drop-indicator-leftMargin';
20
+ var EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN = '--editor-block-controls-drop-target-leftMargin';
21
+ var EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX = '--editor-block-controls-drop-target-zindex';
20
22
  var styleDropTarget = css({
21
23
  height: "var(--ds-space-100, 8px)",
22
24
  marginTop: "var(--ds-space-negative-100, -8px)",
23
- marginLeft: "calc(-1 * var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, ", 0))"),
24
- paddingLeft: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, ", 0)"),
25
+ marginLeft: "calc(-1 * var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, ", 0))"),
26
+ paddingLeft: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, ", 0)"),
25
27
  position: 'absolute',
26
28
  left: '0',
27
29
  display: 'block',
28
- zIndex: layers.card()
30
+ zIndex: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, ", 110)")
29
31
  });
30
32
  var styleDropIndicator = css({
31
33
  height: '100%',
@@ -70,7 +72,7 @@ var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextN
70
72
  return marginLookupMap[offset];
71
73
  };
72
74
  export var DropTarget = function DropTarget(_ref3) {
73
- var _widthStyle;
75
+ var _dynamicStyle;
74
76
  var api = _ref3.api,
75
77
  id = _ref3.id,
76
78
  prevNode = _ref3.prevNode,
@@ -131,9 +133,9 @@ export var DropTarget = function DropTarget(_ref3) {
131
133
  }
132
134
  return getDropTargetOffsetStyle(prevNode, nextNode);
133
135
  }, [prevNode, nextNode, parentNode]);
134
- var widthStyle = (_widthStyle = {
136
+ var dynamicStyle = (_dynamicStyle = {
135
137
  width: isNestedDropTarget ? 'unset' : '100%'
136
- }, _defineProperty(_widthStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), _defineProperty(_widthStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), _widthStyle);
138
+ }, _defineProperty(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), _defineProperty(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), _defineProperty(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, editorExperiment('nested-dnd', true) ? layers.navigation() : layers.card()), _dynamicStyle);
137
139
  return (
138
140
  // Note: Firefox has trouble with using a button element as the handle for drag and drop
139
141
  jsx("div", {
@@ -141,7 +143,7 @@ export var DropTarget = function DropTarget(_ref3) {
141
143
  css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
142
144
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
143
145
  ,
144
- style: widthStyle,
146
+ style: dynamicStyle,
145
147
  ref: ref,
146
148
  "data-testid": "block-ctrl-drop-target"
147
149
  },
package/dist/esm/ui/global-styles.js CHANGED
@@ -101,7 +101,13 @@ var withInlineNodeStyle = css(_defineProperty({}, ".ProseMirror-widget[data-bloc
101
101
  var withInlineNodeStyleWithChromeFix = css(_defineProperty({}, "".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector, ",\n\t ").concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector), {
102
102
  transform: 'scale(0)'
103
103
  }));
104
- var globalStyles = css({
104
+ var globalStyles = editorExperiment('nested-dnd', true) ? css({
105
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
106
+ '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"])': {
107
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
108
+ marginTop: '0 !important'
109
+ }
110
+ }) : css({
105
111
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
106
112
  '.ProseMirror-widget:first-child + *': {
107
113
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.13.0",
3
+ "version": "1.13.2",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -29,7 +29,7 @@
29
29
  ".": "./src/index.ts"
30
30
  },
31
31
  "dependencies": {
32
- "@atlaskit/editor-common": "^88.9.0",
32
+ "@atlaskit/editor-common": "^88.11.0",
33
33
  "@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
34
34
  "@atlaskit/editor-plugin-analytics": "^1.8.0",
35
35
  "@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -39,7 +39,7 @@
39
39
  "@atlaskit/editor-prosemirror": "5.0.1",
40
40
  "@atlaskit/editor-shared-styles": "^2.13.0",
41
41
  "@atlaskit/editor-tables": "^2.8.0",
42
- "@atlaskit/icon": "^22.15.0",
42
+ "@atlaskit/icon": "^22.16.0",
43
43
  "@atlaskit/platform-feature-flags": "^0.3.0",
44
44
  "@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
45
45
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",