@atlaskit/editor-plugin-block-controls 1.13.1 → 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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/drop-target.js +5 -3
  3. package/dist/es2019/ui/drop-target.js +6 -3
  4. package/dist/esm/ui/drop-target.js +5 -3
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
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
+
3
11
  ## 1.13.1
4
12
 
5
13
  ### Patch Changes
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,7 +25,8 @@ 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_TARGET_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)",
@@ -33,7 +35,7 @@ var styleDropTarget = (0, _react2.css)({
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%',
@@ -141,7 +143,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
141
143
  }, [prevNode, nextNode, parentNode]);
142
144
  var dynamicStyle = (_dynamicStyle = {
143
145
  width: isNestedDropTarget ? 'unset' : '100%'
144
- }, (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'), _dynamicStyle);
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", {
package/dist/es2019/ui/drop-target.js CHANGED
@@ -10,11 +10,13 @@ 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_TARGET_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)",
@@ -23,7 +25,7 @@ const styleDropTarget = css({
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%',
@@ -125,7 +127,8 @@ export const DropTarget = ({
125
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_TARGET_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
package/dist/esm/ui/drop-target.js CHANGED
@@ -12,11 +12,13 @@ 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_TARGET_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)",
@@ -25,7 +27,7 @@ var styleDropTarget = css({
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%',
@@ -133,7 +135,7 @@ export var DropTarget = function DropTarget(_ref3) {
133
135
  }, [prevNode, nextNode, parentNode]);
134
136
  var dynamicStyle = (_dynamicStyle = {
135
137
  width: isNestedDropTarget ? 'unset' : '100%'
136
- }, _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'), _dynamicStyle);
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", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.13.1",
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",