@atlaskit/editor-plugin-block-controls 2.0.1 → 2.0.3

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 (14) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/pm-plugins/decorations.js +2 -1
  3. package/dist/cjs/pm-plugins/handle-mouse-over.js +25 -25
  4. package/dist/cjs/pm-plugins/main.js +2 -0
  5. package/dist/cjs/ui/global-styles.js +6 -4
  6. package/dist/es2019/pm-plugins/decorations.js +2 -1
  7. package/dist/es2019/pm-plugins/handle-mouse-over.js +25 -25
  8. package/dist/es2019/pm-plugins/main.js +2 -0
  9. package/dist/es2019/ui/global-styles.js +6 -5
  10. package/dist/esm/pm-plugins/decorations.js +2 -1
  11. package/dist/esm/pm-plugins/handle-mouse-over.js +25 -25
  12. package/dist/esm/pm-plugins/main.js +2 -0
  13. package/dist/esm/ui/global-styles.js +6 -4
  14. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 2.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#141841](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141841)
8
+ [`2d44681e217b4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2d44681e217b4) -
9
+ ED-24896 disable drag list item into list
10
+ - [#141841](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141841)
11
+ [`b1bb0f6a6bfe5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b1bb0f6a6bfe5) -
12
+ ED-24394 hide top level empty line drag handle
13
+
14
+ ## 2.0.2
15
+
16
+ ### Patch Changes
17
+
18
+ - [#138575](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138575)
19
+ [`d97bfb713c2b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d97bfb713c2b9) -
20
+ [ux] Fix handles not showing or in wrong pos for divider nodes in panels/expands
21
+ - Updated dependencies
22
+
3
23
  ## 2.0.1
4
24
 
5
25
  ### 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/pm-plugins/handle-mouse-over.js CHANGED
@@ -31,6 +31,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
31
31
  var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
32
32
  if (rootElement) {
33
33
  var _rootElement$parentEl;
34
+ // We want to exlude handles from showing for empty paragraph and heading nodes
34
35
  if ((0, _experiments.editorExperiment)('nested-dnd', true, {
35
36
  exposure: true
36
37
  }) && isEmptyNestedParagraphOrHeading(rootElement)) {
@@ -38,50 +39,49 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
38
39
  }
39
40
  var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
40
41
  var parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
41
- if (parentElement && parentElementType === 'panel' && (0, _experiments.editorExperiment)('nested-dnd', true)) {
42
- var eventTargetPos = view.posAtDOM(rootElement, 0, -1);
43
- var $eventTargetPos = view.state.doc.resolve(eventTargetPos);
44
- var depth = $eventTargetPos.depth > 1 ? $eventTargetPos.depth - 1 : $eventTargetPos.depth;
45
- if ($eventTargetPos.node(depth).firstChild === $eventTargetPos.node()) {
46
- return false;
47
- }
48
- }
42
+ // We want to exlude handles from showing for direct decendant of table nodes (i.e. nodes in cells)
49
43
  if (parentElement && parentElementType === 'table' && (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _experiments.editorExperiment)('table-nested-dnd', false, {
50
44
  exposure: true
51
45
  })) {
52
46
  rootElement = parentElement;
53
47
  }
54
48
  var anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
55
- var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
49
+ // No need to update handle position if its already there
56
50
  if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
57
51
  return false;
58
52
  }
53
+
54
+ // We want to exlude handles from showing for wrapped nodes
59
55
  if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '') && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24227')) {
60
56
  return false;
61
57
  }
62
- var pos = view.posAtDOM(rootElement, 0, -1);
58
+ var parentRootElement = rootElement.parentElement;
59
+ var pos;
60
+ if (parentRootElement && (0, _experiments.editorExperiment)('nested-dnd', true, {
61
+ exposure: true
62
+ })) {
63
+ var _parentRootElement$ch;
64
+ var childNodes = Array.from(parentRootElement.childNodes);
65
+ var index = childNodes.indexOf(rootElement);
66
+ pos = view.posAtDOM(parentRootElement, index);
67
+
68
+ // We want to exlude handles showing for first element in a Panel, ignoring widgets like gapcursor
69
+ var firstChildIsWidget = parentRootElement === null || parentRootElement === void 0 || (_parentRootElement$ch = parentRootElement.children[0]) === null || _parentRootElement$ch === void 0 ? void 0 : _parentRootElement$ch.classList.contains('ProseMirror-widget');
70
+ if (parentElement && parentElementType === 'panel' && (index === 0 || firstChildIsWidget && index === 1)) {
71
+ return false;
72
+ }
73
+ } else {
74
+ pos = view.posAtDOM(rootElement, 0);
75
+ }
63
76
  var rootPos;
64
77
  if ((0, _experiments.editorExperiment)('nested-dnd', true, {
65
78
  exposure: true
66
79
  })) {
67
- var _$rootPos$parent, _$rootPos$parent2, _$rootPos$nodeAfter;
68
- var $rootPos = view.state.doc.resolve(pos);
69
- var _depth = $rootPos.depth;
70
- var isParentAnIsolatingNode = ((_$rootPos$parent = $rootPos.parent) === null || _$rootPos$parent === void 0 ? void 0 : _$rootPos$parent.type.name) !== 'doc' && ((_$rootPos$parent2 = $rootPos.parent) === null || _$rootPos$parent2 === void 0 ? void 0 : _$rootPos$parent2.type.spec.isolating);
71
- var isCurrentNodeAtom = (_$rootPos$nodeAfter = $rootPos.nodeAfter) === null || _$rootPos$nodeAfter === void 0 ? void 0 : _$rootPos$nodeAfter.isAtom;
72
-
73
- /**
74
- * If the parent node is an isolating node, the sides of nodes of this type are considered boundaries, such as a table cell.
75
- * And the current node, as a direct child, is an atom node, meaning it does not have directly editable content.
76
- * e.g. a card or an extension
77
- * We maintain the original position by adding 1 to the depth.
78
- * This prevents the decoration from being inserted in the wrong position, like between table cells.
79
- */
80
- var posDepth = isParentAnIsolatingNode && isCurrentNodeAtom ? _depth + 1 : _depth;
81
- rootPos = _depth ? $rootPos.before(posDepth) : $rootPos.pos;
80
+ rootPos = view.state.doc.resolve(pos).pos;
82
81
  } else {
83
82
  rootPos = view.state.doc.resolve(pos).start(1) - 1;
84
83
  }
84
+ var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
85
85
  if (nodeType) {
86
86
  var _api$core, _api$blockControls2;
87
87
  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 ? void 0 : _api$blockControls2.commands.showDragHandleAt(rootPos, anchorName, nodeType));
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -348,6 +348,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
348
348
  if (!nodeElement) {
349
349
  return false;
350
350
  }
351
+
352
+ // TODO: Review usage of posAtDOM here
351
353
  var domPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
352
354
  var nodeTarget = state.doc.nodeAt(domPos);
353
355
  var isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
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/pm-plugins/handle-mouse-over.js CHANGED
@@ -26,6 +26,7 @@ export const handleMouseOver = (view, event, api) => {
26
26
  let rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
27
27
  if (rootElement) {
28
28
  var _rootElement$parentEl;
29
+ // We want to exlude handles from showing for empty paragraph and heading nodes
29
30
  if (editorExperiment('nested-dnd', true, {
30
31
  exposure: true
31
32
  }) && isEmptyNestedParagraphOrHeading(rootElement)) {
@@ -33,50 +34,49 @@ export const handleMouseOver = (view, event, api) => {
33
34
  }
34
35
  const parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
35
36
  const parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
36
- if (parentElement && parentElementType === 'panel' && editorExperiment('nested-dnd', true)) {
37
- const eventTargetPos = view.posAtDOM(rootElement, 0, -1);
38
- const $eventTargetPos = view.state.doc.resolve(eventTargetPos);
39
- const depth = $eventTargetPos.depth > 1 ? $eventTargetPos.depth - 1 : $eventTargetPos.depth;
40
- if ($eventTargetPos.node(depth).firstChild === $eventTargetPos.node()) {
41
- return false;
42
- }
43
- }
37
+ // We want to exlude handles from showing for direct decendant of table nodes (i.e. nodes in cells)
44
38
  if (parentElement && parentElementType === 'table' && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
45
39
  exposure: true
46
40
  })) {
47
41
  rootElement = parentElement;
48
42
  }
49
43
  const anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
50
- const nodeType = rootElement.getAttribute('data-drag-handler-node-type');
44
+ // No need to update handle position if its already there
51
45
  if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
52
46
  return false;
53
47
  }
48
+
49
+ // We want to exlude handles from showing for wrapped nodes
54
50
  if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '') && fg('platform_editor_element_drag_and_drop_ed_24227')) {
55
51
  return false;
56
52
  }
57
- const pos = view.posAtDOM(rootElement, 0, -1);
53
+ const parentRootElement = rootElement.parentElement;
54
+ let pos;
55
+ if (parentRootElement && editorExperiment('nested-dnd', true, {
56
+ exposure: true
57
+ })) {
58
+ var _parentRootElement$ch;
59
+ const childNodes = Array.from(parentRootElement.childNodes);
60
+ const index = childNodes.indexOf(rootElement);
61
+ pos = view.posAtDOM(parentRootElement, index);
62
+
63
+ // We want to exlude handles showing for first element in a Panel, ignoring widgets like gapcursor
64
+ const firstChildIsWidget = parentRootElement === null || parentRootElement === void 0 ? void 0 : (_parentRootElement$ch = parentRootElement.children[0]) === null || _parentRootElement$ch === void 0 ? void 0 : _parentRootElement$ch.classList.contains('ProseMirror-widget');
65
+ if (parentElement && parentElementType === 'panel' && (index === 0 || firstChildIsWidget && index === 1)) {
66
+ return false;
67
+ }
68
+ } else {
69
+ pos = view.posAtDOM(rootElement, 0);
70
+ }
58
71
  let rootPos;
59
72
  if (editorExperiment('nested-dnd', true, {
60
73
  exposure: true
61
74
  })) {
62
- var _$rootPos$parent, _$rootPos$parent2, _$rootPos$nodeAfter;
63
- const $rootPos = view.state.doc.resolve(pos);
64
- const depth = $rootPos.depth;
65
- const isParentAnIsolatingNode = ((_$rootPos$parent = $rootPos.parent) === null || _$rootPos$parent === void 0 ? void 0 : _$rootPos$parent.type.name) !== 'doc' && ((_$rootPos$parent2 = $rootPos.parent) === null || _$rootPos$parent2 === void 0 ? void 0 : _$rootPos$parent2.type.spec.isolating);
66
- const isCurrentNodeAtom = (_$rootPos$nodeAfter = $rootPos.nodeAfter) === null || _$rootPos$nodeAfter === void 0 ? void 0 : _$rootPos$nodeAfter.isAtom;
67
-
68
- /**
69
- * If the parent node is an isolating node, the sides of nodes of this type are considered boundaries, such as a table cell.
70
- * And the current node, as a direct child, is an atom node, meaning it does not have directly editable content.
71
- * e.g. a card or an extension
72
- * We maintain the original position by adding 1 to the depth.
73
- * This prevents the decoration from being inserted in the wrong position, like between table cells.
74
- */
75
- const posDepth = isParentAnIsolatingNode && isCurrentNodeAtom ? depth + 1 : depth;
76
- rootPos = depth ? $rootPos.before(posDepth) : $rootPos.pos;
75
+ rootPos = view.state.doc.resolve(pos).pos;
77
76
  } else {
78
77
  rootPos = view.state.doc.resolve(pos).start(1) - 1;
79
78
  }
79
+ const nodeType = rootElement.getAttribute('data-drag-handler-node-type');
80
80
  if (nodeType) {
81
81
  var _api$core, _api$blockControls2;
82
82
  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.commands.showDragHandleAt(rootPos, anchorName, nodeType));
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -326,6 +326,8 @@ export const createPlugin = (api, getIntl) => {
326
326
  if (!nodeElement) {
327
327
  return false;
328
328
  }
329
+
330
+ // TODO: Review usage of posAtDOM here
329
331
  const domPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
330
332
  const nodeTarget = state.doc.nodeAt(domPos);
331
333
  const isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
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/pm-plugins/handle-mouse-over.js CHANGED
@@ -25,6 +25,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
25
25
  var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
26
26
  if (rootElement) {
27
27
  var _rootElement$parentEl;
28
+ // We want to exlude handles from showing for empty paragraph and heading nodes
28
29
  if (editorExperiment('nested-dnd', true, {
29
30
  exposure: true
30
31
  }) && isEmptyNestedParagraphOrHeading(rootElement)) {
@@ -32,50 +33,49 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
32
33
  }
33
34
  var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
34
35
  var parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
35
- if (parentElement && parentElementType === 'panel' && editorExperiment('nested-dnd', true)) {
36
- var eventTargetPos = view.posAtDOM(rootElement, 0, -1);
37
- var $eventTargetPos = view.state.doc.resolve(eventTargetPos);
38
- var depth = $eventTargetPos.depth > 1 ? $eventTargetPos.depth - 1 : $eventTargetPos.depth;
39
- if ($eventTargetPos.node(depth).firstChild === $eventTargetPos.node()) {
40
- return false;
41
- }
42
- }
36
+ // We want to exlude handles from showing for direct decendant of table nodes (i.e. nodes in cells)
43
37
  if (parentElement && parentElementType === 'table' && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
44
38
  exposure: true
45
39
  })) {
46
40
  rootElement = parentElement;
47
41
  }
48
42
  var anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
49
- var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
43
+ // No need to update handle position if its already there
50
44
  if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
51
45
  return false;
52
46
  }
47
+
48
+ // We want to exlude handles from showing for wrapped nodes
53
49
  if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '') && fg('platform_editor_element_drag_and_drop_ed_24227')) {
54
50
  return false;
55
51
  }
56
- var pos = view.posAtDOM(rootElement, 0, -1);
52
+ var parentRootElement = rootElement.parentElement;
53
+ var pos;
54
+ if (parentRootElement && editorExperiment('nested-dnd', true, {
55
+ exposure: true
56
+ })) {
57
+ var _parentRootElement$ch;
58
+ var childNodes = Array.from(parentRootElement.childNodes);
59
+ var index = childNodes.indexOf(rootElement);
60
+ pos = view.posAtDOM(parentRootElement, index);
61
+
62
+ // We want to exlude handles showing for first element in a Panel, ignoring widgets like gapcursor
63
+ var firstChildIsWidget = parentRootElement === null || parentRootElement === void 0 || (_parentRootElement$ch = parentRootElement.children[0]) === null || _parentRootElement$ch === void 0 ? void 0 : _parentRootElement$ch.classList.contains('ProseMirror-widget');
64
+ if (parentElement && parentElementType === 'panel' && (index === 0 || firstChildIsWidget && index === 1)) {
65
+ return false;
66
+ }
67
+ } else {
68
+ pos = view.posAtDOM(rootElement, 0);
69
+ }
57
70
  var rootPos;
58
71
  if (editorExperiment('nested-dnd', true, {
59
72
  exposure: true
60
73
  })) {
61
- var _$rootPos$parent, _$rootPos$parent2, _$rootPos$nodeAfter;
62
- var $rootPos = view.state.doc.resolve(pos);
63
- var _depth = $rootPos.depth;
64
- var isParentAnIsolatingNode = ((_$rootPos$parent = $rootPos.parent) === null || _$rootPos$parent === void 0 ? void 0 : _$rootPos$parent.type.name) !== 'doc' && ((_$rootPos$parent2 = $rootPos.parent) === null || _$rootPos$parent2 === void 0 ? void 0 : _$rootPos$parent2.type.spec.isolating);
65
- var isCurrentNodeAtom = (_$rootPos$nodeAfter = $rootPos.nodeAfter) === null || _$rootPos$nodeAfter === void 0 ? void 0 : _$rootPos$nodeAfter.isAtom;
66
-
67
- /**
68
- * If the parent node is an isolating node, the sides of nodes of this type are considered boundaries, such as a table cell.
69
- * And the current node, as a direct child, is an atom node, meaning it does not have directly editable content.
70
- * e.g. a card or an extension
71
- * We maintain the original position by adding 1 to the depth.
72
- * This prevents the decoration from being inserted in the wrong position, like between table cells.
73
- */
74
- var posDepth = isParentAnIsolatingNode && isCurrentNodeAtom ? _depth + 1 : _depth;
75
- rootPos = _depth ? $rootPos.before(posDepth) : $rootPos.pos;
74
+ rootPos = view.state.doc.resolve(pos).pos;
76
75
  } else {
77
76
  rootPos = view.state.doc.resolve(pos).start(1) - 1;
78
77
  }
78
+ var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
79
79
  if (nodeType) {
80
80
  var _api$core, _api$blockControls2;
81
81
  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 ? void 0 : _api$blockControls2.commands.showDragHandleAt(rootPos, anchorName, nodeType));
package/dist/esm/pm-plugins/main.js CHANGED
@@ -341,6 +341,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
341
341
  if (!nodeElement) {
342
342
  return false;
343
343
  }
344
+
345
+ // TODO: Review usage of posAtDOM here
344
346
  var domPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
345
347
  var nodeTarget = state.doc.nodeAt(domPos);
346
348
  var isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
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.1",
3
+ "version": "2.0.3",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -30,7 +30,7 @@
30
30
  ".": "./src/index.ts"
31
31
  },
32
32
  "dependencies": {
33
- "@atlaskit/editor-common": "^89.2.0",
33
+ "@atlaskit/editor-common": "^89.3.0",
34
34
  "@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
35
35
  "@atlaskit/editor-plugin-analytics": "^1.8.0",
36
36
  "@atlaskit/editor-plugin-editor-disabled": "^1.3.0",