@atlaskit/editor-plugin-block-controls 2.10.1 → 2.11.0

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 (8) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/pm-plugins/decorations-anchor.js +6 -8
  3. package/dist/cjs/ui/global-styles.js +101 -86
  4. package/dist/es2019/pm-plugins/decorations-anchor.js +6 -8
  5. package/dist/es2019/ui/global-styles.js +17 -6
  6. package/dist/esm/pm-plugins/decorations-anchor.js +6 -8
  7. package/dist/esm/ui/global-styles.js +101 -86
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 2.11.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#156360](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156360)
8
+ [`482dbb03dbf68`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/482dbb03dbf68) -
9
+ [ux] Ignore embedCard nodes that have wrapped layout when creating node decs
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 2.10.1
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/pm-plugins/decorations-anchor.js CHANGED
@@ -23,13 +23,11 @@ var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDesce
23
23
  return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
24
24
  };
25
25
  var shouldIgnoreNode = function shouldIgnoreNode(node) {
26
- // TODO use isWrappedMedia when clean up the featue flag
27
- if ('mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1')) {
28
- if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
29
- return true;
30
- }
31
- }
32
- return IGNORE_NODES.includes(node.type.name);
26
+ var isEmbedCard = 'embedCard' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3');
27
+
28
+ // TODO use isWrappedMedia when clean up the feature flag
29
+ var isMediaSingle = 'mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1');
30
+ return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : IGNORE_NODES.includes(node.type.name);
33
31
  };
34
32
 
35
33
  /**
@@ -87,7 +85,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
87
85
  anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
88
86
  }
89
87
  decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
90
- style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;")
88
+ style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', " ").concat((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;')
91
89
  }, (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), {
92
90
  type: _decorationsCommon.TYPE_NODE_DEC,
93
91
  anchorName: anchorName,
package/dist/cjs/ui/global-styles.js CHANGED
@@ -17,94 +17,100 @@ var _globalStyles = require("./empty-block-experiment/global-styles");
17
17
  */
18
18
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
19
19
 
20
- var extendedHoverZone = (0, _react.css)({
21
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
22
- '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
23
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
24
- display: 'none !important'
25
- },
26
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
27
- '.ProseMirror': {
28
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
29
- '&& [data-drag-handler-anchor-name]::after': {
30
- content: '""',
31
- position: 'absolute',
32
- top: 0,
33
- left: '-100%',
34
- width: '100%',
35
- height: '100%',
36
- background: 'transparent',
37
- cursor: 'default',
38
- zIndex: -1
20
+ var extendedHoverZone = function extendedHoverZone() {
21
+ return (0, _react.css)({
22
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
23
+ '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
24
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
25
+ display: 'none !important'
26
+ },
27
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
28
+ '.ProseMirror': {
29
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
30
+ '&& [data-drag-handler-anchor-name]::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: (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
41
+ }
42
+ },
43
+ // 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
44
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
45
+ 'hr[data-drag-handler-anchor-name]': {
46
+ overflow: 'visible'
47
+ },
48
+ //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
49
+ '[data-blocks-drag-handle-container="true"] + *::after': {
50
+ display: 'none'
39
51
  }
40
- },
41
- // 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
42
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
43
- 'hr[data-drag-handler-anchor-name]': {
44
- overflow: 'visible'
45
- },
46
- //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
47
- '[data-blocks-drag-handle-container="true"] + *::after': {
48
- display: 'none'
49
- }
50
- });
51
- var extendedHoverZoneNested = (0, _react.css)({
52
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
53
- '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
54
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
55
- display: 'none !important'
56
- },
57
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
58
- '.ProseMirror': {
59
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
60
- '&& [data-drag-handler-anchor-name]::after': {
61
- content: '""',
62
- position: 'absolute',
63
- top: 0,
64
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
65
- left: "-".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
66
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
67
- width: "".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
68
- height: '100%',
69
- cursor: 'default',
70
- zIndex: 1
52
+ });
53
+ };
54
+ var extendedHoverZoneNested = function extendedHoverZoneNested() {
55
+ return (0, _react.css)({
56
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
57
+ '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
58
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
59
+ display: 'none !important'
71
60
  },
72
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
73
- '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]::after': {
74
- content: '""',
75
- position: 'absolute',
76
- top: 0,
77
- left: '-100%',
78
- width: '100%',
79
- height: '100%',
80
- cursor: 'default',
81
- zIndex: -1
61
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
62
+ '.ProseMirror': {
63
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
64
+ '&& [data-drag-handler-anchor-name]::after': {
65
+ content: '""',
66
+ position: 'absolute',
67
+ top: 0,
68
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
69
+ left: "-".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
70
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
71
+ width: "".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
72
+ height: '100%',
73
+ cursor: 'default',
74
+ zIndex: 1
75
+ },
76
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
77
+ '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]::after': {
78
+ content: '""',
79
+ position: 'absolute',
80
+ top: 0,
81
+ left: '-100%',
82
+ width: '100%',
83
+ height: '100%',
84
+ cursor: 'default',
85
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
86
+ zIndex: (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
87
+ },
88
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
89
+ '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
90
+ content: '""',
91
+ position: 'absolute',
92
+ top: 0,
93
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
94
+ left: "-".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
95
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
96
+ width: "".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
97
+ height: '100%',
98
+ cursor: 'default',
99
+ zIndex: 1
100
+ }
82
101
  },
83
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
84
- '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
85
- content: '""',
86
- position: 'absolute',
87
- top: 0,
88
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
89
- left: "-".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
90
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
91
- width: "".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
92
- height: '100%',
93
- cursor: 'default',
94
- zIndex: 1
102
+ // 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
103
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
104
+ 'hr[data-drag-handler-anchor-name]': {
105
+ overflow: 'visible'
106
+ },
107
+ //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
108
+ //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
109
+ '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
110
+ display: 'none'
95
111
  }
96
- },
97
- // 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
98
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
99
- 'hr[data-drag-handler-anchor-name]': {
100
- overflow: 'visible'
101
- },
102
- //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
103
- //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
104
- '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
105
- display: 'none'
106
- }
107
- });
112
+ });
113
+ };
108
114
  var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
109
115
  var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
110
116
  var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
@@ -157,10 +163,19 @@ var withFormatInLayoutStyleFix = (0, _react.css)((0, _defineProperty2.default)({
157
163
  var getTextNodeStyle = function getTextNodeStyle() {
158
164
  return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
159
165
  };
166
+ var withRelativePosStyle = (0, _react.css)({
167
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
168
+ '.ProseMirror': {
169
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
170
+ '&& [data-drag-handler-anchor-name]': {
171
+ position: 'relative'
172
+ }
173
+ }
174
+ });
160
175
  var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
161
176
  return (0, _react.jsx)(_react.Global, {
162
- styles: [globalStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, (0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
177
+ styles: [globalStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, (0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
163
178
  exposure: false
164
- }) ? _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]
179
+ }) ? _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 : undefined]
165
180
  });
166
181
  };
package/dist/es2019/pm-plugins/decorations-anchor.js CHANGED
@@ -15,13 +15,11 @@ export const shouldDescendIntoNode = node => {
15
15
  return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
16
16
  };
17
17
  const shouldIgnoreNode = node => {
18
- // TODO use isWrappedMedia when clean up the featue flag
19
- if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
20
- if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
21
- return true;
22
- }
23
- }
24
- return IGNORE_NODES.includes(node.type.name);
18
+ const isEmbedCard = 'embedCard' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_3');
19
+
20
+ // TODO use isWrappedMedia when clean up the feature flag
21
+ const isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
22
+ return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : IGNORE_NODES.includes(node.type.name);
25
23
  };
26
24
 
27
25
  /**
@@ -76,7 +74,7 @@ export const nodeDecorations = (newState, from, to) => {
76
74
  anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : `--node-anchor-${node.type.name}-${index}`;
77
75
  }
78
76
  decs.push(Decoration.node(pos, pos + node.nodeSize, {
79
- style: `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}; position: relative; z-index: 1;`,
77
+ style: `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''} ${fg('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;'}`,
80
78
  ['data-drag-handler-anchor-name']: anchorName,
81
79
  ['data-drag-handler-node-type']: node.type.name,
82
80
  ['data-drag-handler-anchor-depth']: `${depth}`
package/dist/es2019/ui/global-styles.js CHANGED
@@ -8,7 +8,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
8
8
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
9
9
  import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
10
10
  import { emptyBlockExperimentGlobalStyles } from './empty-block-experiment/global-styles';
11
- const extendedHoverZone = css({
11
+ const extendedHoverZone = () => css({
12
12
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
13
13
  '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
14
14
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
@@ -26,7 +26,8 @@ const extendedHoverZone = css({
26
26
  height: '100%',
27
27
  background: 'transparent',
28
28
  cursor: 'default',
29
- zIndex: -1
29
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
30
+ zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
30
31
  }
31
32
  },
32
33
  // 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
@@ -39,7 +40,7 @@ const extendedHoverZone = css({
39
40
  display: 'none'
40
41
  }
41
42
  });
42
- const extendedHoverZoneNested = css({
43
+ const extendedHoverZoneNested = () => css({
43
44
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
44
45
  '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
45
46
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
@@ -69,7 +70,8 @@ const extendedHoverZoneNested = css({
69
70
  width: '100%',
70
71
  height: '100%',
71
72
  cursor: 'default',
72
- zIndex: -1
73
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
74
+ zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
73
75
  },
74
76
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
75
77
  '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
@@ -166,10 +168,19 @@ const withFormatInLayoutStyleFix = css({
166
168
  const getTextNodeStyle = () => {
167
169
  return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
168
170
  };
171
+ const withRelativePosStyle = css({
172
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
173
+ '.ProseMirror': {
174
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
175
+ '&& [data-drag-handler-anchor-name]': {
176
+ position: 'relative'
177
+ }
178
+ }
179
+ });
169
180
  export const GlobalStylesWrapper = () => {
170
181
  return jsx(Global, {
171
- styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
182
+ styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
172
183
  exposure: false
173
- }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined]
184
+ }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? withRelativePosStyle : undefined]
174
185
  });
175
186
  };
package/dist/esm/pm-plugins/decorations-anchor.js CHANGED
@@ -16,13 +16,11 @@ export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
16
16
  return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
17
17
  };
18
18
  var shouldIgnoreNode = function shouldIgnoreNode(node) {
19
- // TODO use isWrappedMedia when clean up the featue flag
20
- if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
21
- if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
22
- return true;
23
- }
24
- }
25
- return IGNORE_NODES.includes(node.type.name);
19
+ var isEmbedCard = 'embedCard' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_3');
20
+
21
+ // TODO use isWrappedMedia when clean up the feature flag
22
+ var isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
23
+ return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : IGNORE_NODES.includes(node.type.name);
26
24
  };
27
25
 
28
26
  /**
@@ -80,7 +78,7 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
80
78
  anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
81
79
  }
82
80
  decs.push(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
83
- style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;")
81
+ style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', " ").concat(fg('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;')
84
82
  }, _defineProperty(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node, 'data-drag-handler-node-type', node.type.name), _defineProperty(_Decoration$node, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node), {
85
83
  type: TYPE_NODE_DEC,
86
84
  anchorName: anchorName,
package/dist/esm/ui/global-styles.js CHANGED
@@ -9,94 +9,100 @@ import { fg } from '@atlaskit/platform-feature-flags';
9
9
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
10
10
  import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
11
11
  import { emptyBlockExperimentGlobalStyles } from './empty-block-experiment/global-styles';
12
- var extendedHoverZone = css({
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
14
- '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
15
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
16
- display: 'none !important'
17
- },
18
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
19
- '.ProseMirror': {
20
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
21
- '&& [data-drag-handler-anchor-name]::after': {
22
- content: '""',
23
- position: 'absolute',
24
- top: 0,
25
- left: '-100%',
26
- width: '100%',
27
- height: '100%',
28
- background: 'transparent',
29
- cursor: 'default',
30
- zIndex: -1
12
+ var extendedHoverZone = function extendedHoverZone() {
13
+ return css({
14
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
15
+ '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
16
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
17
+ display: 'none !important'
18
+ },
19
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
20
+ '.ProseMirror': {
21
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
22
+ '&& [data-drag-handler-anchor-name]::after': {
23
+ content: '""',
24
+ position: 'absolute',
25
+ top: 0,
26
+ left: '-100%',
27
+ width: '100%',
28
+ height: '100%',
29
+ background: 'transparent',
30
+ cursor: 'default',
31
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
32
+ zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
33
+ }
34
+ },
35
+ // 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
36
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
37
+ 'hr[data-drag-handler-anchor-name]': {
38
+ overflow: 'visible'
39
+ },
40
+ //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
41
+ '[data-blocks-drag-handle-container="true"] + *::after': {
42
+ display: 'none'
31
43
  }
32
- },
33
- // 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
34
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
35
- 'hr[data-drag-handler-anchor-name]': {
36
- overflow: 'visible'
37
- },
38
- //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
39
- '[data-blocks-drag-handle-container="true"] + *::after': {
40
- display: 'none'
41
- }
42
- });
43
- var extendedHoverZoneNested = css({
44
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
45
- '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
46
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
47
- display: 'none !important'
48
- },
49
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
50
- '.ProseMirror': {
51
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
52
- '&& [data-drag-handler-anchor-name]::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(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(DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
60
- height: '100%',
61
- cursor: 'default',
62
- zIndex: 1
44
+ });
45
+ };
46
+ var extendedHoverZoneNested = function extendedHoverZoneNested() {
47
+ return css({
48
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
49
+ '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
50
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
51
+ display: 'none !important'
63
52
  },
64
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
65
- '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]::after': {
66
- content: '""',
67
- position: 'absolute',
68
- top: 0,
69
- left: '-100%',
70
- width: '100%',
71
- height: '100%',
72
- cursor: 'default',
73
- zIndex: -1
53
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
54
+ '.ProseMirror': {
55
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
56
+ '&& [data-drag-handler-anchor-name]::after': {
57
+ content: '""',
58
+ position: 'absolute',
59
+ top: 0,
60
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
61
+ left: "-".concat(DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
62
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
63
+ width: "".concat(DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
64
+ height: '100%',
65
+ cursor: 'default',
66
+ zIndex: 1
67
+ },
68
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
69
+ '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]::after': {
70
+ content: '""',
71
+ position: 'absolute',
72
+ top: 0,
73
+ left: '-100%',
74
+ width: '100%',
75
+ height: '100%',
76
+ cursor: 'default',
77
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
78
+ zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
79
+ },
80
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
81
+ '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
82
+ content: '""',
83
+ position: 'absolute',
84
+ top: 0,
85
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
86
+ left: "-".concat(editorExperiment('table-nested-dnd', true) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
87
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
88
+ width: "".concat(editorExperiment('table-nested-dnd', true) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
89
+ height: '100%',
90
+ cursor: 'default',
91
+ zIndex: 1
92
+ }
74
93
  },
75
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
76
- '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
77
- content: '""',
78
- position: 'absolute',
79
- top: 0,
80
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
81
- left: "-".concat(editorExperiment('table-nested-dnd', true) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
82
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
83
- width: "".concat(editorExperiment('table-nested-dnd', true) ? DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
84
- height: '100%',
85
- cursor: 'default',
86
- zIndex: 1
94
+ // 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
95
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
96
+ 'hr[data-drag-handler-anchor-name]': {
97
+ overflow: 'visible'
98
+ },
99
+ //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
100
+ //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
101
+ '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
102
+ display: 'none'
87
103
  }
88
- },
89
- // 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
90
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
91
- 'hr[data-drag-handler-anchor-name]': {
92
- overflow: 'visible'
93
- },
94
- //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
95
- //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
96
- '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
97
- display: 'none'
98
- }
99
- });
104
+ });
105
+ };
100
106
  var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
101
107
  var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
102
108
  var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
@@ -149,10 +155,19 @@ var withFormatInLayoutStyleFix = css(_defineProperty({}, "".concat(withFormatInL
149
155
  var getTextNodeStyle = function getTextNodeStyle() {
150
156
  return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
151
157
  };
158
+ var withRelativePosStyle = css({
159
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
160
+ '.ProseMirror': {
161
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
162
+ '&& [data-drag-handler-anchor-name]': {
163
+ position: 'relative'
164
+ }
165
+ }
166
+ });
152
167
  export var GlobalStylesWrapper = function GlobalStylesWrapper() {
153
168
  return jsx(Global, {
154
- styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
169
+ styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
155
170
  exposure: false
156
- }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined]
171
+ }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? withRelativePosStyle : undefined]
157
172
  });
158
173
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "2.10.1",
3
+ "version": "2.11.0",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,7 +31,7 @@
31
31
  },
32
32
  "dependencies": {
33
33
  "@atlaskit/adf-schema": "^42.3.1",
34
- "@atlaskit/editor-common": "^94.3.0",
34
+ "@atlaskit/editor-common": "^94.4.0",
35
35
  "@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.10.0",
37
37
  "@atlaskit/editor-plugin-editor-disabled": "^1.3.0",