@atlaskit/editor-plugin-block-controls 2.0.2 → 2.0.4

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 (11) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/pm-plugins/decorations.js +2 -1
  3. package/dist/cjs/ui/drop-target.js +28 -6
  4. package/dist/cjs/ui/global-styles.js +6 -4
  5. package/dist/es2019/pm-plugins/decorations.js +2 -1
  6. package/dist/es2019/ui/drop-target.js +29 -5
  7. package/dist/es2019/ui/global-styles.js +6 -5
  8. package/dist/esm/pm-plugins/decorations.js +2 -1
  9. package/dist/esm/ui/drop-target.js +28 -6
  10. package/dist/esm/ui/global-styles.js +6 -4
  11. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 2.0.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#141778](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141778)
8
+ [`1c6f578277694`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1c6f578277694) -
9
+ ED-24870 & ED-24864 - Add the logic to gate the nested media in quotes functionality behind the
10
+ nest-media-and-codeblock-in-quote experiment. Also adjust the logic so the nested expands are now
11
+ behind the nested-expand-in-expand experiment.
12
+
13
+ ## 2.0.3
14
+
15
+ ### Patch Changes
16
+
17
+ - [#141841](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141841)
18
+ [`2d44681e217b4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2d44681e217b4) -
19
+ ED-24896 disable drag list item into list
20
+ - [#141841](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141841)
21
+ [`b1bb0f6a6bfe5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b1bb0f6a6bfe5) -
22
+ ED-24394 hide top level empty line drag handle
23
+
3
24
  ## 2.0.2
4
25
 
5
26
  ### Patch Changes
package/dist/cjs/pm-plugins/decorations.js CHANGED
@@ -23,6 +23,7 @@ var _validation = require("../utils/validation");
23
23
  var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
24
24
  var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
25
25
  var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
26
+ var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
26
27
  var getNestedDepth = function getNestedDepth() {
27
28
  return (0, _experiments.editorExperiment)('nested-dnd', true) ? 100 : 0;
28
29
  };
@@ -50,7 +51,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
50
51
  var endPos;
51
52
  if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
52
53
  depth = newState.doc.resolve(pos).depth;
53
- if (node.isInline || !parent) {
54
+ if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
54
55
  prevNode = node;
55
56
  return false;
56
57
  }
package/dist/cjs/ui/drop-target.js CHANGED
@@ -100,6 +100,28 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
100
100
  if (!element) {
101
101
  return;
102
102
  }
103
+
104
+ // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
105
+ if ((0, _experiments.editorExperiment)('nest-media-and-codeblock-in-quote', false)) {
106
+ var _api$blockControls;
107
+ var _ref4 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
108
+ activeNode = _ref4.activeNode;
109
+ var parentNodeType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
110
+ var activeNodeType = activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType;
111
+ if (parentNodeType === 'blockquote' && (activeNodeType === 'mediaGroup' || activeNodeType === 'mediaSingle' || activeNodeType === 'codeBlock')) {
112
+ return;
113
+ }
114
+ }
115
+ if ((0, _experiments.editorExperiment)('nested-expand-in-expand', false)) {
116
+ var _api$blockControls2;
117
+ var _ref5 = (api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState.currentState()) || {},
118
+ _activeNode = _ref5.activeNode;
119
+ var _parentNodeType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
120
+ var _activeNodeType = _activeNode === null || _activeNode === void 0 ? void 0 : _activeNode.nodeType;
121
+ if (_parentNodeType === 'expand' && (_activeNodeType === 'expand' || _activeNodeType === 'nestedExpand')) {
122
+ return;
123
+ }
124
+ }
103
125
  return (0, _adapter.dropTargetForElements)({
104
126
  element: element,
105
127
  getIsSticky: function getIsSticky() {
@@ -112,21 +134,21 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
112
134
  setIsDraggedOver(false);
113
135
  },
114
136
  onDrop: function onDrop() {
115
- var _api$blockControls;
116
- var _ref4 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
117
- activeNode = _ref4.activeNode;
137
+ var _api$blockControls3;
138
+ var _ref6 = (api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.sharedState.currentState()) || {},
139
+ activeNode = _ref6.activeNode;
118
140
  if (!activeNode) {
119
141
  return;
120
142
  }
121
143
  var pos = getPos();
122
144
  if (activeNode && pos !== undefined) {
123
- var _api$core, _api$blockControls2;
145
+ var _api$core, _api$blockControls4;
124
146
  var start = activeNode.pos;
125
- api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos, undefined, formatMessage));
147
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || (_api$blockControls4 = _api$blockControls4.commands) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.moveNode(start, pos, undefined, formatMessage));
126
148
  }
127
149
  }
128
150
  });
129
- }, [api, formatMessage, getPos]);
151
+ }, [api, formatMessage, getPos, parentNode]);
130
152
  var dropTargetOffsetStyle = (0, _react.useMemo)(function () {
131
153
  /**
132
154
  * First child of a nested node.
package/dist/cjs/ui/global-styles.js CHANGED
@@ -105,21 +105,23 @@ var extendedHoverZoneNested = (0, _react.css)({
105
105
  display: 'none'
106
106
  }
107
107
  });
108
- var paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
108
+ var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
109
+ var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
109
110
  var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
110
111
  var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
111
112
  var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
112
- var withInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(paragraphWithPlaceholder, ")"), {
113
+ var withInlineNodeStyleSelectors = [".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithPlaceholder, ")")].join(', ');
114
+ var withInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, withInlineNodeStyleSelectors, {
113
115
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
114
116
  display: 'none !important'
115
117
  }));
116
-
118
+ var withInlineNodeStyleWithChromeFixSelectors = ["".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector)].join(', ');
117
119
  /**
118
120
  * Please do not change change transform to display:none, or visibility:hidden
119
121
  * Otherwise it might break composition input for Chrome
120
122
  * https://product-fabric.atlassian.net/browse/ED-24136
121
123
  */
122
- var withInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector, ",\n\t ").concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector), {
124
+ var withInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, withInlineNodeStyleWithChromeFixSelectors, {
123
125
  transform: 'scale(0)'
124
126
  }));
125
127
  var globalStyles = (0, _experiments.editorExperiment)('nested-dnd', true) ? (0, _react.css)({
package/dist/es2019/pm-plugins/decorations.js CHANGED
@@ -14,6 +14,7 @@ import { canMoveNodeToIndex } from '../utils/validation';
14
14
  const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
15
15
  const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
16
16
  const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
17
+ const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
17
18
  const getNestedDepth = () => editorExperiment('nested-dnd', true) ? 100 : 0;
18
19
  const createDropTargetDecoration = (pos, dropTargetDec) => {
19
20
  return Decoration.widget(pos, (_, getPos) => {
@@ -39,7 +40,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
39
40
  let endPos;
40
41
  if (editorExperiment('nested-dnd', true)) {
41
42
  depth = newState.doc.resolve(pos).depth;
42
- if (node.isInline || !parent) {
43
+ if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
43
44
  prevNode = node;
44
45
  return false;
45
46
  }
package/dist/es2019/ui/drop-target.js CHANGED
@@ -83,6 +83,30 @@ export const DropTarget = ({
83
83
  if (!element) {
84
84
  return;
85
85
  }
86
+
87
+ // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
88
+ if (editorExperiment('nest-media-and-codeblock-in-quote', false)) {
89
+ var _api$blockControls;
90
+ const {
91
+ activeNode
92
+ } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
93
+ const parentNodeType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
94
+ const activeNodeType = activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType;
95
+ if (parentNodeType === 'blockquote' && (activeNodeType === 'mediaGroup' || activeNodeType === 'mediaSingle' || activeNodeType === 'codeBlock')) {
96
+ return;
97
+ }
98
+ }
99
+ if (editorExperiment('nested-expand-in-expand', false)) {
100
+ var _api$blockControls2;
101
+ const {
102
+ activeNode
103
+ } = (api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState.currentState()) || {};
104
+ const parentNodeType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
105
+ const activeNodeType = activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType;
106
+ if (parentNodeType === 'expand' && (activeNodeType === 'expand' || activeNodeType === 'nestedExpand')) {
107
+ return;
108
+ }
109
+ }
86
110
  return dropTargetForElements({
87
111
  element,
88
112
  getIsSticky: () => true,
@@ -93,24 +117,24 @@ export const DropTarget = ({
93
117
  setIsDraggedOver(false);
94
118
  },
95
119
  onDrop: () => {
96
- var _api$blockControls;
120
+ var _api$blockControls3;
97
121
  const {
98
122
  activeNode
99
- } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
123
+ } = (api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.sharedState.currentState()) || {};
100
124
  if (!activeNode) {
101
125
  return;
102
126
  }
103
127
  const pos = getPos();
104
128
  if (activeNode && pos !== undefined) {
105
- var _api$core, _api$blockControls2, _api$blockControls2$c;
129
+ var _api$core, _api$blockControls4, _api$blockControls4$c;
106
130
  const {
107
131
  pos: start
108
132
  } = activeNode;
109
- api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveNode(start, pos, undefined, formatMessage));
133
+ api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : (_api$blockControls4$c = _api$blockControls4.commands) === null || _api$blockControls4$c === void 0 ? void 0 : _api$blockControls4$c.moveNode(start, pos, undefined, formatMessage));
110
134
  }
111
135
  }
112
136
  });
113
- }, [api, formatMessage, getPos]);
137
+ }, [api, formatMessage, getPos, parentNode]);
114
138
  const dropTargetOffsetStyle = useMemo(() => {
115
139
  /**
116
140
  * First child of a nested node.
package/dist/es2019/ui/global-styles.js CHANGED
@@ -96,18 +96,20 @@ const extendedHoverZoneNested = css({
96
96
  display: 'none'
97
97
  }
98
98
  });
99
- const paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
99
+ const paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
100
+ const indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
100
101
  const paragraphWithPlaceholder = '+ p > .placeholder-decoration';
101
102
  const dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
102
103
  const dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
104
+ const withInlineNodeStyleSelectors = [`.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithTrailingBreakAsOnlyChild})`, `.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${indentatedParagraphWithTrailingBreakAsOnlyChild})`, `.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithPlaceholder})`].join(', ');
103
105
  const withInlineNodeStyle = css({
104
106
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
105
- [`.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithTrailingBreakAsOnlyChild}), .ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${paragraphWithPlaceholder})`]: {
107
+ [withInlineNodeStyleSelectors]: {
106
108
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
107
109
  display: 'none !important'
108
110
  }
109
111
  });
110
-
112
+ const withInlineNodeStyleWithChromeFixSelectors = [`${dragHandleContainer}:has(${paragraphWithTrailingBreakAsOnlyChild}) ${dragHandleSelector}`, `${dragHandleContainer}:has(${indentatedParagraphWithTrailingBreakAsOnlyChild}) ${dragHandleSelector}`, `${dragHandleContainer}:has(${paragraphWithPlaceholder}) ${dragHandleSelector}`].join(', ');
111
113
  /**
112
114
  * Please do not change change transform to display:none, or visibility:hidden
113
115
  * Otherwise it might break composition input for Chrome
@@ -115,8 +117,7 @@ const withInlineNodeStyle = css({
115
117
  */
116
118
  const withInlineNodeStyleWithChromeFix = css({
117
119
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
118
- [`${dragHandleContainer}:has(${paragraphWithTrailingBreakAsOnlyChild}) ${dragHandleSelector},
119
- ${dragHandleContainer}:has(${paragraphWithPlaceholder}) ${dragHandleSelector}`]: {
120
+ [withInlineNodeStyleWithChromeFixSelectors]: {
120
121
  transform: 'scale(0)'
121
122
  }
122
123
  });
package/dist/esm/pm-plugins/decorations.js CHANGED
@@ -16,6 +16,7 @@ import { canMoveNodeToIndex } from '../utils/validation';
16
16
  var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
17
17
  var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
18
18
  var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
19
+ var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
19
20
  var getNestedDepth = function getNestedDepth() {
20
21
  return editorExperiment('nested-dnd', true) ? 100 : 0;
21
22
  };
@@ -43,7 +44,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
43
44
  var endPos;
44
45
  if (editorExperiment('nested-dnd', true)) {
45
46
  depth = newState.doc.resolve(pos).depth;
46
- if (node.isInline || !parent) {
47
+ if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
47
48
  prevNode = node;
48
49
  return false;
49
50
  }
package/dist/esm/ui/drop-target.js CHANGED
@@ -92,6 +92,28 @@ export var DropTarget = function DropTarget(_ref3) {
92
92
  if (!element) {
93
93
  return;
94
94
  }
95
+
96
+ // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
97
+ if (editorExperiment('nest-media-and-codeblock-in-quote', false)) {
98
+ var _api$blockControls;
99
+ var _ref4 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
100
+ activeNode = _ref4.activeNode;
101
+ var parentNodeType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
102
+ var activeNodeType = activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType;
103
+ if (parentNodeType === 'blockquote' && (activeNodeType === 'mediaGroup' || activeNodeType === 'mediaSingle' || activeNodeType === 'codeBlock')) {
104
+ return;
105
+ }
106
+ }
107
+ if (editorExperiment('nested-expand-in-expand', false)) {
108
+ var _api$blockControls2;
109
+ var _ref5 = (api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.sharedState.currentState()) || {},
110
+ _activeNode = _ref5.activeNode;
111
+ var _parentNodeType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
112
+ var _activeNodeType = _activeNode === null || _activeNode === void 0 ? void 0 : _activeNode.nodeType;
113
+ if (_parentNodeType === 'expand' && (_activeNodeType === 'expand' || _activeNodeType === 'nestedExpand')) {
114
+ return;
115
+ }
116
+ }
95
117
  return dropTargetForElements({
96
118
  element: element,
97
119
  getIsSticky: function getIsSticky() {
@@ -104,21 +126,21 @@ export var DropTarget = function DropTarget(_ref3) {
104
126
  setIsDraggedOver(false);
105
127
  },
106
128
  onDrop: function onDrop() {
107
- var _api$blockControls;
108
- var _ref4 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
109
- activeNode = _ref4.activeNode;
129
+ var _api$blockControls3;
130
+ var _ref6 = (api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.sharedState.currentState()) || {},
131
+ activeNode = _ref6.activeNode;
110
132
  if (!activeNode) {
111
133
  return;
112
134
  }
113
135
  var pos = getPos();
114
136
  if (activeNode && pos !== undefined) {
115
- var _api$core, _api$blockControls2;
137
+ var _api$core, _api$blockControls4;
116
138
  var start = activeNode.pos;
117
- api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos, undefined, formatMessage));
139
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || (_api$blockControls4 = _api$blockControls4.commands) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.moveNode(start, pos, undefined, formatMessage));
118
140
  }
119
141
  }
120
142
  });
121
- }, [api, formatMessage, getPos]);
143
+ }, [api, formatMessage, getPos, parentNode]);
122
144
  var dropTargetOffsetStyle = useMemo(function () {
123
145
  /**
124
146
  * First child of a nested node.
package/dist/esm/ui/global-styles.js CHANGED
@@ -97,21 +97,23 @@ var extendedHoverZoneNested = css({
97
97
  display: 'none'
98
98
  }
99
99
  });
100
- var paragraphWithTrailingBreakAsOnlyChild = '+ p > .ProseMirror-trailingBreak:only-child';
100
+ var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
101
+ var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
101
102
  var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
102
103
  var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
103
104
  var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
104
- var withInlineNodeStyle = css(_defineProperty({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(paragraphWithPlaceholder, ")"), {
105
+ var withInlineNodeStyleSelectors = [".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ")"), ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(paragraphWithPlaceholder, ")")].join(', ');
106
+ var withInlineNodeStyle = css(_defineProperty({}, withInlineNodeStyleSelectors, {
105
107
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
106
108
  display: 'none !important'
107
109
  }));
108
-
110
+ var withInlineNodeStyleWithChromeFixSelectors = ["".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector)].join(', ');
109
111
  /**
110
112
  * Please do not change change transform to display:none, or visibility:hidden
111
113
  * Otherwise it might break composition input for Chrome
112
114
  * https://product-fabric.atlassian.net/browse/ED-24136
113
115
  */
114
- var withInlineNodeStyleWithChromeFix = css(_defineProperty({}, "".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector, ",\n\t ").concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector), {
116
+ var withInlineNodeStyleWithChromeFix = css(_defineProperty({}, withInlineNodeStyleWithChromeFixSelectors, {
115
117
  transform: 'scale(0)'
116
118
  }));
117
119
  var globalStyles = editorExperiment('nested-dnd', true) ? css({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "2.0.2",
3
+ "version": "2.0.4",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",