@atlaskit/editor-plugin-block-controls 2.13.12 → 2.13.14

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 (42) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/plugin.js +5 -16
  3. package/dist/cjs/pm-plugins/decorations-anchor.js +4 -3
  4. package/dist/cjs/pm-plugins/decorations-drop-target.js +3 -0
  5. package/dist/cjs/ui/drop-target-layout.js +7 -4
  6. package/dist/cjs/ui/drop-target-v2.js +4 -5
  7. package/dist/cjs/ui/global-styles.js +86 -122
  8. package/dist/cjs/utils/inline-drop-target.js +4 -0
  9. package/dist/es2019/plugin.js +1 -10
  10. package/dist/es2019/pm-plugins/decorations-anchor.js +4 -3
  11. package/dist/es2019/pm-plugins/decorations-drop-target.js +3 -0
  12. package/dist/es2019/ui/drop-target-layout.js +8 -5
  13. package/dist/es2019/ui/drop-target-v2.js +5 -5
  14. package/dist/es2019/ui/global-styles.js +23 -20
  15. package/dist/es2019/utils/inline-drop-target.js +4 -1
  16. package/dist/esm/plugin.js +5 -16
  17. package/dist/esm/pm-plugins/decorations-anchor.js +4 -3
  18. package/dist/esm/pm-plugins/decorations-drop-target.js +3 -0
  19. package/dist/esm/ui/drop-target-layout.js +7 -4
  20. package/dist/esm/ui/drop-target-v2.js +4 -5
  21. package/dist/esm/ui/global-styles.js +87 -122
  22. package/dist/esm/utils/inline-drop-target.js +4 -0
  23. package/dist/types/ui/drop-target-layout.d.ts +1 -1
  24. package/dist/types/utils/inline-drop-target.d.ts +2 -1
  25. package/dist/types-ts4.5/ui/drop-target-layout.d.ts +1 -1
  26. package/dist/types-ts4.5/utils/inline-drop-target.d.ts +2 -1
  27. package/package.json +4 -7
  28. package/dist/cjs/pm-plugins/empty-block-experiment.js +0 -46
  29. package/dist/cjs/ui/empty-block-experiment/global-styles.js +0 -66
  30. package/dist/cjs/ui/empty-block-experiment/widget.js +0 -144
  31. package/dist/es2019/pm-plugins/empty-block-experiment.js +0 -38
  32. package/dist/es2019/ui/empty-block-experiment/global-styles.js +0 -77
  33. package/dist/es2019/ui/empty-block-experiment/widget.js +0 -138
  34. package/dist/esm/pm-plugins/empty-block-experiment.js +0 -40
  35. package/dist/esm/ui/empty-block-experiment/global-styles.js +0 -58
  36. package/dist/esm/ui/empty-block-experiment/widget.js +0 -133
  37. package/dist/types/pm-plugins/empty-block-experiment.d.ts +0 -13
  38. package/dist/types/ui/empty-block-experiment/global-styles.d.ts +0 -4
  39. package/dist/types/ui/empty-block-experiment/widget.d.ts +0 -13
  40. package/dist/types-ts4.5/pm-plugins/empty-block-experiment.d.ts +0 -13
  41. package/dist/types-ts4.5/ui/empty-block-experiment/global-styles.d.ts +0 -4
  42. package/dist/types-ts4.5/ui/empty-block-experiment/widget.d.ts +0 -13
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 2.13.14
4
+
5
+ ### Patch Changes
6
+
7
+ - [#163579](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163579)
8
+ [`15dc53a3077f1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/15dc53a3077f1) -
9
+ Hide unnecessary inline drop targets
10
+ - Updated dependencies
11
+
12
+ ## 2.13.13
13
+
14
+ ### Patch Changes
15
+
16
+ - [#164606](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/164606)
17
+ [`34e9782c56a3f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/34e9782c56a3f) -
18
+ tidy platform_editor_empty_line_prompt experiment
19
+ - [#163518](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163518)
20
+ [`0c4fc567f6cfd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0c4fc567f6cfd) -
21
+ ED-25705 fix sticky header
22
+ - Updated dependencies
23
+
3
24
  ## 2.13.12
4
25
 
5
26
  ### Patch Changes
@@ -5,13 +5,10 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.blockControlsPlugin = void 0;
8
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
8
  var _react = _interopRequireDefault(require("react"));
10
9
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
- var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
12
10
  var _moveNode = require("./commands/move-node");
13
11
  var _moveToLayout = require("./commands/move-to-layout");
14
- var _emptyBlockExperiment = require("./pm-plugins/empty-block-experiment");
15
12
  var _main = require("./pm-plugins/main");
16
13
  var _dragHandleMenu = require("./ui/drag-handle-menu");
17
14
  var _globalStyles = require("./ui/global-styles");
@@ -27,22 +24,14 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
27
24
  var getIntl = _ref2.getIntl;
28
25
  return (0, _main.createPlugin)(api, getIntl);
29
26
  }
30
- }].concat((0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
31
- exposure: true
32
- }) ? [{
33
- name: 'emptyBlockExperimentPlugin',
34
- plugin: function plugin(_ref3) {
35
- var getIntl = _ref3.getIntl;
36
- return (0, _emptyBlockExperiment.createEmptyBlockExperimentPlugin)(api, getIntl);
37
- }
38
- }] : []));
27
+ }];
39
28
  },
40
29
  commands: {
41
30
  moveNode: (0, _moveNode.moveNode)(api),
42
31
  moveToLayout: (0, _moveToLayout.moveToLayout)(api),
43
32
  showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
44
- return function (_ref4) {
45
- var tr = _ref4.tr;
33
+ return function (_ref3) {
34
+ var tr = _ref3.tr;
46
35
  tr.setMeta(_main.key, {
47
36
  activeNode: {
48
37
  pos: pos,
@@ -55,8 +44,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
55
44
  };
56
45
  },
57
46
  setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
58
- return function (_ref5) {
59
- var tr = _ref5.tr;
47
+ return function (_ref4) {
48
+ var tr = _ref4.tr;
60
49
  var pos = getPos();
61
50
  if (pos === undefined) {
62
51
  return tr;
@@ -33,8 +33,8 @@ var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, pare
33
33
 
34
34
  // TODO use isWrappedMedia when clean up the feature flag
35
35
  var isMediaSingle = 'mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1');
36
- var isFirstTableHeaderOrTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && ['tableHeader', 'tableRow'].includes(node.type.name) && (0, _advancedLayoutsFlags.isPreRelease1)();
37
- if (isFirstTableHeaderOrTableRow) {
36
+ var isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name && (0, _advancedLayoutsFlags.isPreRelease1)();
37
+ if (isFirstTableRow) {
38
38
  return false;
39
39
  }
40
40
  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
@@ -95,8 +95,9 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
95
95
  var _anchorName2;
96
96
  anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
97
97
  }
98
+ var anchorStyles = ['tableRow', 'media'].includes(node.type.name) ? "anchor-name: ".concat(anchorName, ";") : "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 && !(0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? 'margin-top: 0px;' : '', " ").concat((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;');
98
99
  decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
99
- style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 && !(0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? 'margin-top: 0px;' : '', " ").concat((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;')
100
+ style: anchorStyles
100
101
  }, (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-node-type', node.type.name), (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node), {
101
102
  type: _decorationsCommon.TYPE_NODE_DEC,
102
103
  anchorName: anchorName,
@@ -163,6 +163,9 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
163
163
  if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
164
164
  depth = $pos.depth;
165
165
  if (isAdvancedLayoutsPreRelease2) {
166
+ if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) === pos && activeNode.nodeType !== 'layoutColumn') {
167
+ return false;
168
+ }
166
169
  if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node && (
167
170
  // Not the first node
168
171
  (parent === null || parent === void 0 ? void 0 : parent.childCount) < (0, _consts.maxLayoutColumnSupported)() || isSameLayout)) {
@@ -39,6 +39,7 @@ var dropTargetLayoutHintStyle = (0, _react2.css)({
39
39
  width: 0
40
40
  });
41
41
  var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(props) {
42
+ var _api$blockControls;
42
43
  var api = props.api,
43
44
  getPos = props.getPos,
44
45
  parent = props.parent;
@@ -51,10 +52,9 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
51
52
  var _useActiveAnchorTrack = (0, _activeAnchorTracker.useActiveAnchorTracker)(anchorName),
52
53
  _useActiveAnchorTrack2 = (0, _slicedToArray2.default)(_useActiveAnchorTrack, 1),
53
54
  isActiveAnchor = _useActiveAnchorTrack2[0];
55
+ var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
56
+ activeNode = _ref.activeNode;
54
57
  var onDrop = (0, _react.useCallback)(function () {
55
- var _api$blockControls;
56
- var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
57
- activeNode = _ref.activeNode;
58
58
  if (!activeNode) {
59
59
  return;
60
60
  }
@@ -64,7 +64,7 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
64
64
  var from = activeNode.pos;
65
65
  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.moveToLayout(from, to));
66
66
  }
67
- }, [api, getPos]);
67
+ }, [api, getPos, activeNode]);
68
68
  (0, _react.useEffect)(function () {
69
69
  if (ref.current) {
70
70
  return (0, _adapter.dropTargetForElements)({
@@ -79,6 +79,9 @@ var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(prop
79
79
  });
80
80
  }
81
81
  }, [onDrop]);
82
+ if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
83
+ return null;
84
+ }
82
85
  return (0, _react2.jsx)("div", {
83
86
  ref: ref,
84
87
  css: dropTargetLayoutStyle,
@@ -178,7 +178,7 @@ var HoverZone = function HoverZone(_ref) {
178
178
  });
179
179
  };
180
180
  var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
181
- var _dynamicStyle;
181
+ var _api$blockControls, _dynamicStyle;
182
182
  var api = props.api,
183
183
  getPos = props.getPos,
184
184
  prevNode = props.prevNode,
@@ -196,10 +196,9 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
196
196
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width']),
197
197
  widthState = _useSharedPluginState.widthState;
198
198
  var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
199
+ var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
200
+ activeNode = _ref2.activeNode;
199
201
  var onDrop = function onDrop() {
200
- var _api$blockControls;
201
- var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
202
- activeNode = _ref2.activeNode;
203
202
  if (!activeNode) {
204
203
  return;
205
204
  }
@@ -255,7 +254,7 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
255
254
  anchorRectCache: anchorRectCache,
256
255
  position: "lower",
257
256
  isNestedDropTarget: isNestedDropTarget
258
- }), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode, isSameLayout) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
257
+ }), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode, isSameLayout, activeNode) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
259
258
  position: "left"
260
259
  })), (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
261
260
  position: "right"
@@ -11,122 +11,94 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
11
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
12
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
13
13
  var _consts = require("./consts");
14
- var _globalStyles = require("./empty-block-experiment/global-styles");
15
14
  /**
16
15
  * @jsxRuntime classic
17
16
  * @jsx jsx
18
17
  */
19
18
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
20
19
 
20
+ /**
21
+ * This anchor element selector disregards anchors that are solely utilized for size measurements,
22
+ * including those within table rows and media.
23
+ */
24
+ var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
21
25
  var extendedHoverZone = function extendedHoverZone() {
22
- return (0, _react.css)({
23
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
24
- '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
25
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
26
- display: 'none !important'
27
- },
28
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
29
- '.ProseMirror': {
30
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
31
- '&& [data-drag-handler-anchor-name]::after': {
32
- content: '""',
33
- position: 'absolute',
34
- top: 0,
35
- left: '-100%',
36
- width: '100%',
37
- height: '100%',
38
- background: 'transparent',
39
- cursor: 'default',
40
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
41
- zIndex: -1
42
- }
43
- },
44
- // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
45
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
46
- 'hr[data-drag-handler-anchor-name]': {
47
- overflow: 'visible'
48
- },
49
- //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
50
- '[data-blocks-drag-handle-container="true"] + *::after': {
51
- display: 'none'
52
- }
53
- });
26
+ var _css;
27
+ return (0, _react.css)((_css = {}, (0, _defineProperty2.default)(_css, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
29
+ display: 'none !important'
30
+ }), (0, _defineProperty2.default)(_css, '.ProseMirror', (0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelector, "::after"), {
31
+ content: '""',
32
+ position: 'absolute',
33
+ top: 0,
34
+ left: '-100%',
35
+ width: '100%',
36
+ height: '100%',
37
+ background: 'transparent',
38
+ cursor: 'default',
39
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
40
+ zIndex: -1
41
+ })), (0, _defineProperty2.default)(_css, 'hr[data-drag-handler-anchor-name]', {
42
+ overflow: 'visible'
43
+ }), (0, _defineProperty2.default)(_css, '[data-blocks-drag-handle-container="true"] + *::after', {
44
+ display: 'none'
45
+ }), _css));
54
46
  };
55
47
  var extendedHoverZoneNested = function extendedHoverZoneNested() {
56
- return (0, _react.css)({
57
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
58
- '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
59
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
60
- display: 'none !important'
61
- },
62
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
63
- '.ProseMirror': {
64
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
65
- '&& [data-drag-handler-anchor-name]::after': {
66
- content: '""',
67
- position: 'absolute',
68
- top: 0,
69
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
70
- left: "-".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
71
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
72
- width: "".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
73
- height: '100%',
74
- cursor: 'default',
75
- zIndex: 1
76
- },
77
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
78
- '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]::after': {
79
- content: '""',
80
- position: 'absolute',
81
- top: 0,
82
- left: '-100%',
83
- width: '100%',
84
- height: '100%',
85
- cursor: 'default',
86
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
87
- zIndex: -1
88
- },
89
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
90
- '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
91
- content: '""',
92
- position: 'absolute',
93
- top: 0,
94
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
95
- left: "-".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
96
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
97
- width: "".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
98
- height: '100%',
99
- cursor: 'default',
100
- zIndex: 1
101
- },
102
- // hover zone for layout column should be placed near the top of the column (where drag handle is)
103
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
104
- '&& [data-drag-handler-anchor-name][data-layout-column]::after': {
105
- content: '""',
106
- position: 'absolute',
107
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
108
- top: "".concat(-_consts.DRAG_HANDLE_WIDTH / 2, "px"),
109
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
110
- left: 0,
111
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
112
- width: '100%',
113
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
114
- height: "".concat(_consts.DRAG_HANDLE_WIDTH, "px"),
115
- cursor: 'default',
116
- zIndex: 1
117
- }
118
- },
119
- // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
120
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
121
- 'hr[data-drag-handler-anchor-name]': {
122
- overflow: 'visible'
123
- },
124
- //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
125
- //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
126
- '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
127
- display: 'none'
128
- }
129
- });
48
+ var _ProseMirror2, _css2;
49
+ return (0, _react.css)((_css2 = {}, (0, _defineProperty2.default)(_css2, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
50
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
51
+ display: 'none !important'
52
+ }), (0, _defineProperty2.default)(_css2, '.ProseMirror', (_ProseMirror2 = {}, (0, _defineProperty2.default)(_ProseMirror2, "&& ".concat(dragHandlerAnchorSelector, "::after"), {
53
+ content: '""',
54
+ position: 'absolute',
55
+ top: 0,
56
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
57
+ left: "-".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
58
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
59
+ width: "".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
60
+ height: '100%',
61
+ cursor: 'default',
62
+ zIndex: 1
63
+ }), (0, _defineProperty2.default)(_ProseMirror2, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), {
64
+ content: '""',
65
+ position: 'absolute',
66
+ top: 0,
67
+ left: '-100%',
68
+ width: '100%',
69
+ height: '100%',
70
+ cursor: 'default',
71
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
72
+ zIndex: -1
73
+ }), (0, _defineProperty2.default)(_ProseMirror2, "&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > ".concat(dragHandlerAnchorSelector, "::after"), {
74
+ content: '""',
75
+ position: 'absolute',
76
+ top: 0,
77
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
78
+ left: "-".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
79
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
80
+ width: "".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
81
+ height: '100%',
82
+ cursor: 'default',
83
+ zIndex: 1
84
+ }), (0, _defineProperty2.default)(_ProseMirror2, '&& [data-drag-handler-anchor-name][data-layout-column]::after', {
85
+ content: '""',
86
+ position: 'absolute',
87
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
88
+ top: "".concat(-_consts.DRAG_HANDLE_WIDTH / 2, "px"),
89
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
90
+ left: 0,
91
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
92
+ width: '100%',
93
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
94
+ height: "".concat(_consts.DRAG_HANDLE_WIDTH, "px"),
95
+ cursor: 'default',
96
+ zIndex: 1
97
+ }), _ProseMirror2)), (0, _defineProperty2.default)(_css2, 'hr[data-drag-handler-anchor-name]', {
98
+ overflow: 'visible'
99
+ }), (0, _defineProperty2.default)(_css2, '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after', {
100
+ display: 'none'
101
+ }), _css2));
130
102
  };
131
103
  var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
132
104
  var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
@@ -211,21 +183,15 @@ var getTextNodeStyle = function getTextNodeStyle() {
211
183
  };
212
184
  var withRelativePosStyle = (0, _react.css)({
213
185
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
214
- '.ProseMirror': {
215
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
216
- '&& [data-drag-handler-anchor-name]': {
217
- position: 'relative'
218
- }
219
- }
186
+ '.ProseMirror': (0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelector), {
187
+ position: 'relative'
188
+ })
220
189
  });
221
190
  var withAnchorNameZindexStyle = (0, _react.css)({
222
191
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
223
- '.ProseMirror': {
224
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
225
- '&& [data-drag-handler-anchor-name]': {
226
- zIndex: 1
227
- }
228
- }
192
+ '.ProseMirror': (0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelector), {
193
+ zIndex: 1
194
+ })
229
195
  });
230
196
  var withAnchorNameZindexNestedStyle = (0, _react.css)({
231
197
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -238,8 +204,6 @@ var withAnchorNameZindexNestedStyle = (0, _react.css)({
238
204
  });
239
205
  var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
240
206
  return (0, _react.jsx)(_react.Global, {
241
- styles: [globalStyles(), (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, (0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
242
- exposure: false
243
- }) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
207
+ styles: [globalStyles(), (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
244
208
  });
245
209
  };
@@ -10,12 +10,16 @@ var _advancedLayoutsFlags = require("./advanced-layouts-flags");
10
10
  var _checkMediaLayout = require("./check-media-layout");
11
11
  var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
12
12
  var isSameLayout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
13
+ var activeNode = arguments.length > 3 ? arguments[3] : undefined;
13
14
  if (!(0, _advancedLayoutsFlags.isPreRelease1)() || isNested) {
14
15
  return false;
15
16
  }
16
17
  if ((0, _checkMediaLayout.isWrappedMedia)(node)) {
17
18
  return false;
18
19
  }
20
+ if ((0, _advancedLayoutsFlags.isPreRelease2)() && (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
21
+ return false;
22
+ }
19
23
  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
20
24
  return node.childCount < (0, _consts.maxLayoutColumnSupported)() || (0, _advancedLayoutsFlags.isPreRelease2)() && isSameLayout;
21
25
  }
@@ -1,9 +1,7 @@
1
1
  import React from 'react';
2
2
  import { fg } from '@atlaskit/platform-feature-flags';
3
- import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
4
3
  import { moveNode } from './commands/move-node';
5
4
  import { moveToLayout } from './commands/move-to-layout';
6
- import { createEmptyBlockExperimentPlugin } from './pm-plugins/empty-block-experiment';
7
5
  import { createPlugin, key } from './pm-plugins/main';
8
6
  import { DragHandleMenu } from './ui/drag-handle-menu';
9
7
  import { GlobalStylesWrapper } from './ui/global-styles';
@@ -18,14 +16,7 @@ export const blockControlsPlugin = ({
18
16
  plugin: ({
19
17
  getIntl
20
18
  }) => createPlugin(api, getIntl)
21
- }, ...(editorExperiment('platform_editor_empty_line_prompt', true, {
22
- exposure: true
23
- }) ? [{
24
- name: 'emptyBlockExperimentPlugin',
25
- plugin: ({
26
- getIntl
27
- }) => createEmptyBlockExperimentPlugin(api, getIntl)
28
- }] : [])];
19
+ }];
29
20
  },
30
21
  commands: {
31
22
  moveNode: moveNode(api),
@@ -25,8 +25,8 @@ const shouldIgnoreNode = (node, ignore_nodes, depth, parent) => {
25
25
 
26
26
  // TODO use isWrappedMedia when clean up the feature flag
27
27
  const isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
28
- const isFirstTableHeaderOrTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && ['tableHeader', 'tableRow'].includes(node.type.name) && isPreRelease1();
29
- if (isFirstTableHeaderOrTableRow) {
28
+ const isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name && isPreRelease1();
29
+ if (isFirstTableRow) {
30
30
  return false;
31
31
  }
32
32
  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
@@ -84,8 +84,9 @@ export const nodeDecorations = (newState, from, to) => {
84
84
  var _anchorName2;
85
85
  anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : `--node-anchor-${node.type.name}-${index}`;
86
86
  }
87
+ const anchorStyles = ['tableRow', 'media'].includes(node.type.name) ? `anchor-name: ${anchorName};` : `anchor-name: ${anchorName}; ${pos === 0 && !fg('platform_editor_element_dnd_nested_fix_patch_3') ? 'margin-top: 0px;' : ''} ${fg('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;'}`;
87
88
  decs.push(Decoration.node(pos, pos + node.nodeSize, {
88
- style: `anchor-name: ${anchorName}; ${pos === 0 && !fg('platform_editor_element_dnd_nested_fix_patch_3') ? 'margin-top: 0px;' : ''} ${fg('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;'}`,
89
+ style: anchorStyles,
89
90
  ['data-drag-handler-anchor-name']: anchorName,
90
91
  ['data-drag-handler-node-type']: node.type.name,
91
92
  ['data-drag-handler-anchor-depth']: `${depth}`
@@ -155,6 +155,9 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
155
155
  if (editorExperiment('nested-dnd', true)) {
156
156
  depth = $pos.depth;
157
157
  if (isAdvancedLayoutsPreRelease2) {
158
+ if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) === pos && activeNode.nodeType !== 'layoutColumn') {
159
+ return false;
160
+ }
158
161
  if (node.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && (parent === null || parent === void 0 ? void 0 : parent.firstChild) !== node && (
159
162
  // Not the first node
160
163
  (parent === null || parent === void 0 ? void 0 : parent.childCount) < maxLayoutColumnSupported() || isSameLayout)) {
@@ -31,6 +31,7 @@ const dropTargetLayoutHintStyle = css({
31
31
  width: 0
32
32
  });
33
33
  export const DropTargetLayout = props => {
34
+ var _api$blockControls;
34
35
  const {
35
36
  api,
36
37
  getPos,
@@ -40,11 +41,10 @@ export const DropTargetLayout = props => {
40
41
  const [isDraggedOver, setIsDraggedOver] = useState(false);
41
42
  const anchorName = getNodeAnchor(parent);
42
43
  const [isActiveAnchor] = useActiveAnchorTracker(anchorName);
44
+ const {
45
+ activeNode
46
+ } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
43
47
  const onDrop = useCallback(() => {
44
- var _api$blockControls;
45
- const {
46
- activeNode
47
- } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
48
48
  if (!activeNode) {
49
49
  return;
50
50
  }
@@ -56,7 +56,7 @@ export const DropTargetLayout = props => {
56
56
  } = activeNode;
57
57
  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.moveToLayout(from, to));
58
58
  }
59
- }, [api, getPos]);
59
+ }, [api, getPos, activeNode]);
60
60
  useEffect(() => {
61
61
  if (ref.current) {
62
62
  return dropTargetForElements({
@@ -71,6 +71,9 @@ export const DropTargetLayout = props => {
71
71
  });
72
72
  }
73
73
  }, [onDrop]);
74
+ if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
75
+ return null;
76
+ }
74
77
  return jsx("div", {
75
78
  ref: ref,
76
79
  css: dropTargetLayoutStyle,
@@ -166,6 +166,7 @@ const HoverZone = ({
166
166
  });
167
167
  };
168
168
  export const DropTargetV2 = props => {
169
+ var _api$blockControls;
169
170
  const {
170
171
  api,
171
172
  getPos,
@@ -182,11 +183,10 @@ export const DropTargetV2 = props => {
182
183
  widthState
183
184
  } = useSharedPluginState(api, ['width']);
184
185
  const isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
186
+ const {
187
+ activeNode
188
+ } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
185
189
  const onDrop = () => {
186
- var _api$blockControls;
187
- const {
188
- activeNode
189
- } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
190
190
  if (!activeNode) {
191
191
  return;
192
192
  }
@@ -239,7 +239,7 @@ export const DropTargetV2 = props => {
239
239
  anchorRectCache: anchorRectCache,
240
240
  position: "lower",
241
241
  isNestedDropTarget: isNestedDropTarget
242
- }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode, isSameLayout) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
242
+ }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode, isSameLayout, activeNode) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
243
243
  position: "left"
244
244
  })), jsx(InlineDropTarget, _extends({}, props, {
245
245
  position: "right"