@atlaskit/editor-plugin-block-controls 1.11.0 → 1.11.1

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 (10) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/pm-plugins/decorations.js +6 -1
  3. package/dist/cjs/ui/drop-target.js +26 -12
  4. package/dist/es2019/pm-plugins/decorations.js +6 -1
  5. package/dist/es2019/ui/drop-target.js +25 -10
  6. package/dist/esm/pm-plugins/decorations.js +6 -1
  7. package/dist/esm/ui/drop-target.js +26 -12
  8. package/dist/types/ui/drop-target.d.ts +2 -1
  9. package/dist/types-ts4.5/ui/drop-target.d.ts +2 -1
  10. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.11.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#128476](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128476)
8
+ [`e6ccffdd6fe90`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e6ccffdd6fe90) -
9
+ ED-24408 fix nested drop target indicator location and appearance
10
+
3
11
  ## 1.11.0
4
12
 
5
13
  ### Minor Changes
package/dist/cjs/pm-plugins/decorations.js CHANGED
@@ -48,15 +48,18 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
48
48
  if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
49
49
  depth = newState.doc.resolve(pos).depth;
50
50
  if (node.isInline || !parent) {
51
+ prevNode = node;
51
52
  return false;
52
53
  }
53
54
  if (IGNORE_NODES.includes(node.type.name)) {
55
+ prevNode = node;
54
56
  return true; //skip over, don't consider it a valid depth
55
57
  }
56
58
  var canDrop = activeNodeType && (0, _validation.canMoveToIndex)(parent, index, nodeType);
57
59
 
58
60
  //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
59
61
  if (!canDrop && !(0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
62
+ prevNode = node;
60
63
  return false; //not valid pos, so nested not valid either
61
64
  }
62
65
  decorationState.push({
@@ -85,12 +88,14 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
85
88
  id: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? pos : index,
86
89
  formatMessage: formatMessage,
87
90
  prevNode: prevNode,
88
- nextNode: node
91
+ nextNode: node,
92
+ parentNode: parent
89
93
  })));
90
94
  if (endDec) {
91
95
  decs.push(createDropTargetDecoration(endDec.pos, /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
92
96
  api: api,
93
97
  id: endDec.id,
98
+ parentNode: parent,
94
99
  formatMessage: formatMessage
95
100
  })));
96
101
  }
package/dist/cjs/ui/drop-target.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.DropTarget = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
8
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
10
  var _react = require("react");
10
11
  var _react2 = require("@emotion/react");
@@ -31,13 +32,16 @@ var styleDropTarget = (0, _react2.css)({
31
32
  display: 'block',
32
33
  zIndex: _constants.layers.card()
33
34
  });
34
- var marginLookupMap = Object.fromEntries(
35
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
36
- Object.entries(_consts.spaceLookupMap).map(function (_ref, i) {
35
+ var nestedDropIndicatorStyle = (0, _react2.css)({
36
+ position: 'relative'
37
+ });
38
+ var marginLookupMap = Object.fromEntries(Object.entries(_consts.spaceLookupMap).map(function (_ref, i) {
37
39
  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
38
40
  key = _ref2[0],
39
41
  value = _ref2[1];
40
- return [key, (0, _react2.css)({
42
+ return [key,
43
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
44
+ (0, _react2.css)({
41
45
  marginTop: value
42
46
  })];
43
47
  }));
@@ -65,17 +69,19 @@ var getDropTargetPositionStyle = function getDropTargetPositionStyle(prevNode, n
65
69
  return marginLookupMap[space];
66
70
  }
67
71
  };
72
+ var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
68
73
  var styleDropIndicator = (0, _react2.css)({
69
74
  height: '100%',
70
- width: '100%',
71
75
  margin: '0 auto',
72
- position: 'relative'
76
+ position: 'relative',
77
+ width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)")
73
78
  });
74
79
  var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
75
80
  var api = _ref3.api,
76
81
  id = _ref3.id,
77
82
  prevNode = _ref3.prevNode,
78
83
  nextNode = _ref3.nextNode,
84
+ parentNode = _ref3.parentNode,
79
85
  formatMessage = _ref3.formatMessage;
80
86
  var ref = (0, _react.useRef)(null);
81
87
  var _useState = (0, _react.useState)(false),
@@ -84,7 +90,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
84
90
  setIsDraggedOver = _useState2[1];
85
91
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width']),
86
92
  widthState = _useSharedPluginState.widthState;
87
- var lineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH;
93
+ var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
88
94
  (0, _react.useEffect)(function () {
89
95
  var element = ref.current;
90
96
  if (!element) {
@@ -122,22 +128,30 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
122
128
  });
123
129
  }, [id, api, formatMessage]);
124
130
  var topTargetMarginStyle = (0, _react.useMemo)(function () {
131
+ /**
132
+ * First child of a nested node.
133
+ * Disable the position adjustment for the nested node temporarily
134
+ */
135
+ if (parentNode === prevNode || isNestedDropTarget) {
136
+ return null;
137
+ }
125
138
  return getDropTargetPositionStyle(prevNode, nextNode);
126
- }, [prevNode, nextNode]);
139
+ }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
140
+ var widthStyle = (0, _defineProperty2.default)({}, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px"));
127
141
  return (
128
142
  // Note: Firefox has trouble with using a button element as the handle for drag and drop
129
143
  (0, _react2.jsx)("div", {
130
144
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
131
- css: [styleDropTarget, topTargetMarginStyle],
145
+ css: [styleDropTarget, topTargetMarginStyle, isNestedDropTarget && nestedDropIndicatorStyle]
146
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
147
+ ,
148
+ style: widthStyle,
132
149
  ref: ref,
133
150
  "data-testid": "block-ctrl-drop-target"
134
151
  },
135
152
  // 4px gap to clear expand node border
136
153
  (isDraggedOver || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) && (0, _react2.jsx)("div", {
137
154
  css: styleDropIndicator,
138
- style: {
139
- width: "".concat(lineLength, "px")
140
- },
141
155
  "data-testid": "block-ctrl-drop-indicator"
142
156
  }, (0, _react2.jsx)(_box.DropIndicator, {
143
157
  edge: "bottom",
package/dist/es2019/pm-plugins/decorations.js CHANGED
@@ -38,15 +38,18 @@ export const dropTargetDecorations = (oldState, newState, api, formatMessage, ac
38
38
  if (fg('platform_editor_elements_dnd_nested')) {
39
39
  depth = newState.doc.resolve(pos).depth;
40
40
  if (node.isInline || !parent) {
41
+ prevNode = node;
41
42
  return false;
42
43
  }
43
44
  if (IGNORE_NODES.includes(node.type.name)) {
45
+ prevNode = node;
44
46
  return true; //skip over, don't consider it a valid depth
45
47
  }
46
48
  const canDrop = activeNodeType && canMoveToIndex(parent, index, nodeType);
47
49
 
48
50
  //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
49
51
  if (!canDrop && !isBlocksDragTargetDebug()) {
52
+ prevNode = node;
50
53
  return false; //not valid pos, so nested not valid either
51
54
  }
52
55
  decorationState.push({
@@ -75,12 +78,14 @@ export const dropTargetDecorations = (oldState, newState, api, formatMessage, ac
75
78
  id: fg('platform_editor_elements_dnd_nested') ? pos : index,
76
79
  formatMessage,
77
80
  prevNode,
78
- nextNode: node
81
+ nextNode: node,
82
+ parentNode: parent
79
83
  })));
80
84
  if (endDec) {
81
85
  decs.push(createDropTargetDecoration(endDec.pos, /*#__PURE__*/createElement(DropTarget, {
82
86
  api,
83
87
  id: endDec.id,
88
+ parentNode: parent,
84
89
  formatMessage
85
90
  })));
86
91
  }
package/dist/es2019/ui/drop-target.js CHANGED
@@ -22,9 +22,12 @@ const styleDropTarget = css({
22
22
  display: 'block',
23
23
  zIndex: layers.card()
24
24
  });
25
- const marginLookupMap = Object.fromEntries(
25
+ const nestedDropIndicatorStyle = css({
26
+ position: 'relative'
27
+ });
28
+ const marginLookupMap = Object.fromEntries(Object.entries(spaceLookupMap).map(([key, value], i) => [key,
26
29
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
27
- Object.entries(spaceLookupMap).map(([key, value], i) => [key, css({
30
+ css({
28
31
  marginTop: value
29
32
  })]));
30
33
  const BASE_LINE_MARGIN = -8;
@@ -51,17 +54,19 @@ const getDropTargetPositionStyle = (prevNode, nextNode) => {
51
54
  return marginLookupMap[space];
52
55
  }
53
56
  };
57
+ const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
54
58
  const styleDropIndicator = css({
55
59
  height: '100%',
56
- width: '100%',
57
60
  margin: '0 auto',
58
- position: 'relative'
61
+ position: 'relative',
62
+ width: `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH}, 100%)`
59
63
  });
60
64
  export const DropTarget = ({
61
65
  api,
62
66
  id,
63
67
  prevNode,
64
68
  nextNode,
69
+ parentNode,
65
70
  formatMessage
66
71
  }) => {
67
72
  const ref = useRef(null);
@@ -69,7 +74,7 @@ export const DropTarget = ({
69
74
  const {
70
75
  widthState
71
76
  } = useSharedPluginState(api, ['width']);
72
- const lineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH;
77
+ const isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
73
78
  useEffect(() => {
74
79
  const element = ref.current;
75
80
  if (!element) {
@@ -107,22 +112,32 @@ export const DropTarget = ({
107
112
  });
108
113
  }, [id, api, formatMessage]);
109
114
  const topTargetMarginStyle = useMemo(() => {
115
+ /**
116
+ * First child of a nested node.
117
+ * Disable the position adjustment for the nested node temporarily
118
+ */
119
+ if (parentNode === prevNode || isNestedDropTarget) {
120
+ return null;
121
+ }
110
122
  return getDropTargetPositionStyle(prevNode, nextNode);
111
- }, [prevNode, nextNode]);
123
+ }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
124
+ const widthStyle = {
125
+ [EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH]: isNestedDropTarget ? '100%' : `${(widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH}px`
126
+ };
112
127
  return (
113
128
  // Note: Firefox has trouble with using a button element as the handle for drag and drop
114
129
  jsx("div", {
115
130
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
116
- css: [styleDropTarget, topTargetMarginStyle],
131
+ css: [styleDropTarget, topTargetMarginStyle, isNestedDropTarget && nestedDropIndicatorStyle]
132
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
133
+ ,
134
+ style: widthStyle,
117
135
  ref: ref,
118
136
  "data-testid": "block-ctrl-drop-target"
119
137
  },
120
138
  // 4px gap to clear expand node border
121
139
  (isDraggedOver || isBlocksDragTargetDebug()) && jsx("div", {
122
140
  css: styleDropIndicator,
123
- style: {
124
- width: `${lineLength}px`
125
- },
126
141
  "data-testid": "block-ctrl-drop-indicator"
127
142
  }, jsx(DropIndicator, {
128
143
  edge: "bottom",
package/dist/esm/pm-plugins/decorations.js CHANGED
@@ -41,15 +41,18 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
41
41
  if (fg('platform_editor_elements_dnd_nested')) {
42
42
  depth = newState.doc.resolve(pos).depth;
43
43
  if (node.isInline || !parent) {
44
+ prevNode = node;
44
45
  return false;
45
46
  }
46
47
  if (IGNORE_NODES.includes(node.type.name)) {
48
+ prevNode = node;
47
49
  return true; //skip over, don't consider it a valid depth
48
50
  }
49
51
  var canDrop = activeNodeType && canMoveToIndex(parent, index, nodeType);
50
52
 
51
53
  //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
52
54
  if (!canDrop && !isBlocksDragTargetDebug()) {
55
+ prevNode = node;
53
56
  return false; //not valid pos, so nested not valid either
54
57
  }
55
58
  decorationState.push({
@@ -78,12 +81,14 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
78
81
  id: fg('platform_editor_elements_dnd_nested') ? pos : index,
79
82
  formatMessage: formatMessage,
80
83
  prevNode: prevNode,
81
- nextNode: node
84
+ nextNode: node,
85
+ parentNode: parent
82
86
  })));
83
87
  if (endDec) {
84
88
  decs.push(createDropTargetDecoration(endDec.pos, /*#__PURE__*/createElement(DropTarget, {
85
89
  api: api,
86
90
  id: endDec.id,
91
+ parentNode: parent,
87
92
  formatMessage: formatMessage
88
93
  })));
89
94
  }
package/dist/esm/ui/drop-target.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
1
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
3
  /**
3
4
  * @jsxRuntime classic
@@ -23,13 +24,16 @@ var styleDropTarget = css({
23
24
  display: 'block',
24
25
  zIndex: layers.card()
25
26
  });
26
- var marginLookupMap = Object.fromEntries(
27
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
28
- Object.entries(spaceLookupMap).map(function (_ref, i) {
27
+ var nestedDropIndicatorStyle = css({
28
+ position: 'relative'
29
+ });
30
+ var marginLookupMap = Object.fromEntries(Object.entries(spaceLookupMap).map(function (_ref, i) {
29
31
  var _ref2 = _slicedToArray(_ref, 2),
30
32
  key = _ref2[0],
31
33
  value = _ref2[1];
32
- return [key, css({
34
+ return [key,
35
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
36
+ css({
33
37
  marginTop: value
34
38
  })];
35
39
  }));
@@ -57,17 +61,19 @@ var getDropTargetPositionStyle = function getDropTargetPositionStyle(prevNode, n
57
61
  return marginLookupMap[space];
58
62
  }
59
63
  };
64
+ var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
60
65
  var styleDropIndicator = css({
61
66
  height: '100%',
62
- width: '100%',
63
67
  margin: '0 auto',
64
- position: 'relative'
68
+ position: 'relative',
69
+ width: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, ", 100%)")
65
70
  });
66
71
  export var DropTarget = function DropTarget(_ref3) {
67
72
  var api = _ref3.api,
68
73
  id = _ref3.id,
69
74
  prevNode = _ref3.prevNode,
70
75
  nextNode = _ref3.nextNode,
76
+ parentNode = _ref3.parentNode,
71
77
  formatMessage = _ref3.formatMessage;
72
78
  var ref = useRef(null);
73
79
  var _useState = useState(false),
@@ -76,7 +82,7 @@ export var DropTarget = function DropTarget(_ref3) {
76
82
  setIsDraggedOver = _useState2[1];
77
83
  var _useSharedPluginState = useSharedPluginState(api, ['width']),
78
84
  widthState = _useSharedPluginState.widthState;
79
- var lineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH;
85
+ var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
80
86
  useEffect(function () {
81
87
  var element = ref.current;
82
88
  if (!element) {
@@ -114,22 +120,30 @@ export var DropTarget = function DropTarget(_ref3) {
114
120
  });
115
121
  }, [id, api, formatMessage]);
116
122
  var topTargetMarginStyle = useMemo(function () {
123
+ /**
124
+ * First child of a nested node.
125
+ * Disable the position adjustment for the nested node temporarily
126
+ */
127
+ if (parentNode === prevNode || isNestedDropTarget) {
128
+ return null;
129
+ }
117
130
  return getDropTargetPositionStyle(prevNode, nextNode);
118
- }, [prevNode, nextNode]);
131
+ }, [prevNode, nextNode, parentNode, isNestedDropTarget]);
132
+ var widthStyle = _defineProperty({}, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px"));
119
133
  return (
120
134
  // Note: Firefox has trouble with using a button element as the handle for drag and drop
121
135
  jsx("div", {
122
136
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
123
- css: [styleDropTarget, topTargetMarginStyle],
137
+ css: [styleDropTarget, topTargetMarginStyle, isNestedDropTarget && nestedDropIndicatorStyle]
138
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
139
+ ,
140
+ style: widthStyle,
124
141
  ref: ref,
125
142
  "data-testid": "block-ctrl-drop-target"
126
143
  },
127
144
  // 4px gap to clear expand node border
128
145
  (isDraggedOver || isBlocksDragTargetDebug()) && jsx("div", {
129
146
  css: styleDropIndicator,
130
- style: {
131
- width: "".concat(lineLength, "px")
132
- },
133
147
  "data-testid": "block-ctrl-drop-indicator"
134
148
  }, jsx(DropIndicator, {
135
149
  edge: "bottom",
package/dist/types/ui/drop-target.d.ts CHANGED
@@ -8,6 +8,7 @@ export type DropTargetProps = {
8
8
  id: number;
9
9
  prevNode?: PMNode;
10
10
  nextNode?: PMNode;
11
+ parentNode?: PMNode;
11
12
  formatMessage?: IntlShape['formatMessage'];
12
13
  };
13
- export declare const DropTarget: ({ api, id, prevNode, nextNode, formatMessage }: DropTargetProps) => jsx.JSX.Element;
14
+ export declare const DropTarget: ({ api, id, prevNode, nextNode, parentNode, formatMessage, }: DropTargetProps) => jsx.JSX.Element;
package/dist/types-ts4.5/ui/drop-target.d.ts CHANGED
@@ -8,6 +8,7 @@ export type DropTargetProps = {
8
8
  id: number;
9
9
  prevNode?: PMNode;
10
10
  nextNode?: PMNode;
11
+ parentNode?: PMNode;
11
12
  formatMessage?: IntlShape['formatMessage'];
12
13
  };
13
- export declare const DropTarget: ({ api, id, prevNode, nextNode, formatMessage }: DropTargetProps) => jsx.JSX.Element;
14
+ export declare const DropTarget: ({ api, id, prevNode, nextNode, parentNode, formatMessage, }: DropTargetProps) => jsx.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.11.0",
3
+ "version": "1.11.1",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -42,7 +42,7 @@
42
42
  "@atlaskit/editor-tables": "^2.8.0",
43
43
  "@atlaskit/icon": "^22.11.0",
44
44
  "@atlaskit/platform-feature-flags": "^0.3.0",
45
- "@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
45
+ "@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
46
46
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
47
47
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
48
48
  "@atlaskit/theme": "^12.11.0",