@atlaskit/editor-plugin-block-controls 13.1.1 → 13.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 13.1.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 13.1.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [`0aced23fb1739`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0aced23fb1739) -
14
+ Clean up experiment platform_editor_fix_selection_wrapped_media_embed
15
+ - Updated dependencies
16
+
3
17
  ## 13.1.1
4
18
 
5
19
  ### Patch Changes
@@ -29,8 +29,6 @@ var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDesce
29
29
  };
30
30
  var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, parent) {
31
31
  var _nodeTypes$table, _node$attrs, _node$attrs2;
32
- var isEmbedCard = node.type.name === 'embedCard';
33
- var isMediaSingle = node.type.name === 'mediaSingle';
34
32
  var nodeTypes = node.type.schema.nodes;
35
33
  var isTable = node.type.name === (nodeTypes === null || nodeTypes === void 0 || (_nodeTypes$table = nodeTypes.table) === null || _nodeTypes$table === void 0 ? void 0 : _nodeTypes$table.name);
36
34
  var parentIsTable = parent && [nodeTypes.tableHeader, nodeTypes.tableCell].includes(parent.type);
@@ -46,9 +44,7 @@ var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, pare
46
44
  if (isLegacyContentMacroExtension) {
47
45
  return true;
48
46
  }
49
- return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) && !(0, _experiments.editorExperiment)('platform_editor_fix_selection_wrapped_media_embed', true, {
50
- exposure: true
51
- }) ? true : ignore_nodes.includes(node.type.name);
47
+ return ignore_nodes.includes(node.type.name);
52
48
  };
53
49
 
54
50
  /**
@@ -11,7 +11,6 @@ var _selection = require("@atlaskit/editor-common/selection");
11
11
  var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
12
12
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
13
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
14
- var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
15
14
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
16
15
  var _domAttrName = require("../ui/utils/dom-attr-name");
17
16
  var _decorationsAnchor = require("./decorations-anchor");
@@ -55,6 +54,33 @@ var getBlockMarkPanelIndexAdjustment = function getBlockMarkPanelIndexAdjustment
55
54
  }
56
55
  return index;
57
56
  };
57
+
58
+ /**
59
+ * If the hovered element is a paragraph adjacent to a wrapped mediaSingle/embedCard,
60
+ * redirect to the media node so only one drag handle shows (ED-26959).
61
+ */
62
+ var redirectParagraphToWrappedMedia = function redirectParagraphToWrappedMedia(rootElement, isNativeAnchorSupported) {
63
+ var hoveredNodeType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
64
+ if (hoveredNodeType !== 'paragraph') {
65
+ return rootElement;
66
+ }
67
+ var isWrappedMediaEmbedSibling = function isWrappedMediaEmbedSibling(sibling) {
68
+ if (!sibling || !sibling.getAttribute((0, _domAttrName.getAnchorAttrName)())) {
69
+ return false;
70
+ }
71
+ var siblingType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(sibling) : sibling.getAttribute('data-drag-handler-node-type');
72
+ var siblingLayout = sibling.getAttribute('layout') || '';
73
+ return (siblingType === 'mediaSingle' || siblingType === 'embedCard') && ['wrap-left', 'wrap-right'].includes(siblingLayout);
74
+ };
75
+ var prevSibling = rootElement.previousElementSibling;
76
+ var nextSibling = rootElement.nextElementSibling;
77
+ if (prevSibling && isWrappedMediaEmbedSibling(prevSibling)) {
78
+ return prevSibling;
79
+ } else if (nextSibling && isWrappedMediaEmbedSibling(nextSibling)) {
80
+ return nextSibling;
81
+ }
82
+ return rootElement;
83
+ };
58
84
  var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, event, api) {
59
85
  var _api$blockControls, _api$editorDisabled, _api$editorViewMode, _api$blockControls$sh, _api$blockControls2, _target$classList;
60
86
  var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -157,35 +183,14 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
157
183
  }
158
184
  }
159
185
 
160
- // When platform_editor_fix_selection_wrapped_media_embed is enabled, a wrapped mediaSingle/embedCard and the
161
- // paragraph(s) it floats next to both have anchor decorations. If the hovered rootElement
162
- // is a paragraph whose adjacent DOM sibling is a wrapped mediaSingle/embedCard with an
163
- // anchor, redirect the handle to the media node so only one handle shows (ED-26959).
186
+ // A wrapped mediaSingle/embedCard and the paragraph(s) it floats next to both have
187
+ // anchor decorations. If the hovered rootElement is a paragraph whose adjacent DOM sibling
188
+ // is a wrapped mediaSingle/embedCard with an anchor, redirect the handle to the media node
189
+ // so only one handle shows (ED-26959).
164
190
  // We check previousElementSibling (wrap-left: media precedes text in DOM) and
165
191
  // nextElementSibling (wrap-right: media follows text in DOM).
166
192
  // This must happen before anchorName is read so the correct node's handle is shown.
167
- if ((0, _experiments.editorExperiment)('platform_editor_fix_selection_wrapped_media_embed', true, {
168
- exposure: true
169
- })) {
170
- var _rootNodeType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
171
- if (_rootNodeType === 'paragraph') {
172
- var isWrappedMediaEmbedSibling = function isWrappedMediaEmbedSibling(sibling) {
173
- if (!sibling || !sibling.getAttribute((0, _domAttrName.getAnchorAttrName)())) {
174
- return false;
175
- }
176
- var siblingType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(sibling) : sibling.getAttribute('data-drag-handler-node-type');
177
- var siblingLayout = sibling.getAttribute('layout') || '';
178
- return (siblingType === 'mediaSingle' || siblingType === 'embedCard') && ['wrap-left', 'wrap-right'].includes(siblingLayout);
179
- };
180
- var prevSibling = rootElement.previousElementSibling;
181
- var nextSibling = rootElement.nextElementSibling;
182
- if (prevSibling && isWrappedMediaEmbedSibling(prevSibling)) {
183
- rootElement = prevSibling;
184
- } else if (nextSibling && isWrappedMediaEmbedSibling(nextSibling)) {
185
- rootElement = nextSibling;
186
- }
187
- }
188
- }
193
+ rootElement = redirectParagraphToWrappedMedia(rootElement, isNativeAnchorSupported);
189
194
  var anchorName;
190
195
  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
191
196
  anchorName = rootElement.getAttribute((0, _domAttrName.getAnchorAttrName)());
@@ -209,16 +214,6 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
209
214
  if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
210
215
  return false;
211
216
  }
212
- if (!(0, _experiments.editorExperiment)('platform_editor_fix_selection_wrapped_media_embed', true, {
213
- exposure: true
214
- })) {
215
- // We want to exclude handles from showing for wrapped nodes
216
- // TODO: ED-26959 - We should be able remove these check if we decided to
217
- // go we not decoration for wrapped image solution.
218
- if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')) {
219
- return false;
220
- }
221
- }
222
217
  var parentRootElement = rootElement.parentElement;
223
218
  var pos;
224
219
  if (parentRootElement) {
@@ -235,7 +230,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
235
230
  } else {
236
231
  pos = view.posAtDOM(rootElement, 0);
237
232
  }
238
- if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && (0, _experiments.editorExperiment)('advanced_layouts', true) && !(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
233
+ if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && (0, _experiments.editorExperiment)('advanced_layouts', true) && !(0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
239
234
  // Don't show drag handle for layout column in a single column layout,
240
235
  // unless the layout column menu is enabled (menu needs the handle to be accessible).
241
236
  return false;
@@ -122,7 +122,7 @@ var topPositionAdjustment = exports.topPositionAdjustment = function topPosition
122
122
  return DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT;
123
123
  }
124
124
  }
125
- if ((nodeType === 'mediaSingle' || nodeType === 'embedCard') && layout && ['wrap-left', 'wrap-right'].includes(layout) && (0, _experiments.editorExperiment)('platform_editor_fix_selection_wrapped_media_embed', true)) {
125
+ if ((nodeType === 'mediaSingle' || nodeType === 'embedCard') && layout && ['wrap-left', 'wrap-right'].includes(layout)) {
126
126
  return DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT;
127
127
  }
128
128
  switch (nodeType) {
@@ -510,7 +510,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
510
510
  if (startPos === undefined) {
511
511
  return tr;
512
512
  }
513
- if (nodeType === 'layoutColumn' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
513
+ if (nodeType === 'layoutColumn' && (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
514
514
  tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
515
515
  }
516
516
  var resolvedStartPos = tr.doc.resolve(startPos);
@@ -561,7 +561,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
561
561
  if (startPos === undefined) {
562
562
  return tr;
563
563
  }
564
- if (nodeType === 'layoutColumn' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
564
+ if (nodeType === 'layoutColumn' && (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
565
565
  tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
566
566
  }
567
567
  var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
@@ -649,7 +649,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
649
649
  api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.startPreservingSelection()({
650
650
  tr: tr
651
651
  });
652
- if (nodeType === 'layoutColumn' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
652
+ if (nodeType === 'layoutColumn' && (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
653
653
  tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, true));
654
654
  }
655
655
  var rootPos = (0, _experiments.editorExperiment)('platform_synced_block', true) ? tr.doc.resolve(startPos).before(1) : undefined;
@@ -949,7 +949,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
949
949
  }
950
950
  var mSelect = api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
951
951
  var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
952
- var isLayoutColumnMenuEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true);
952
+ var isLayoutColumnMenuEnabled = (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true);
953
953
  if (isShiftDown && !(isLayoutColumnMenuEnabled && isLayoutColumn) && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
954
954
  setDragHandleDisabled(true);
955
955
  } else {
@@ -961,7 +961,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
961
961
  }) : formatMessage(_messages.blockControlsMessages.dragToMove);
962
962
 
963
963
  // Create a string version for aria-label
964
- var dragHandleAriaLabel = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
964
+ var dragHandleAriaLabel = (0, _expValEquals.expValEquals)('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
965
965
  br: ' '
966
966
  }) : formatMessage(_messages.blockControlsMessages.dragToMove);
967
967
  var helpDescriptors = isTopLevelNodeValue ? [{
@@ -1163,7 +1163,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
1163
1163
  }
1164
1164
  }, renderButton());
1165
1165
  };
1166
- var tooltipContent = isLayoutColumn && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true) && currentUserIntent === 'layoutColumnMenuPopupOpen' ? null : (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
1166
+ var tooltipContent = isLayoutColumn && (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) && currentUserIntent === 'layoutColumnMenuPopupOpen' ? null : (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
1167
1167
  helpDescriptors: helpDescriptors
1168
1168
  });
1169
1169
  var isTooltip = !dragHandleDisabled;
@@ -21,8 +21,6 @@ export const shouldDescendIntoNode = node => {
21
21
  };
22
22
  const shouldIgnoreNode = (node, ignore_nodes, depth, parent) => {
23
23
  var _nodeTypes$table, _node$attrs, _node$attrs2;
24
- const isEmbedCard = node.type.name === 'embedCard';
25
- const isMediaSingle = node.type.name === 'mediaSingle';
26
24
  const nodeTypes = node.type.schema.nodes;
27
25
  const isTable = node.type.name === (nodeTypes === null || nodeTypes === void 0 ? void 0 : (_nodeTypes$table = nodeTypes.table) === null || _nodeTypes$table === void 0 ? void 0 : _nodeTypes$table.name);
28
26
  const parentIsTable = parent && [nodeTypes.tableHeader, nodeTypes.tableCell].includes(parent.type);
@@ -38,9 +36,7 @@ const shouldIgnoreNode = (node, ignore_nodes, depth, parent) => {
38
36
  if (isLegacyContentMacroExtension) {
39
37
  return true;
40
38
  }
41
- return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) && !editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true, {
42
- exposure: true
43
- }) ? true : ignore_nodes.includes(node.type.name);
39
+ return ignore_nodes.includes(node.type.name);
44
40
  };
45
41
 
46
42
  /**
@@ -3,7 +3,6 @@ import { isMultiBlockSelection } from '@atlaskit/editor-common/selection';
3
3
  import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
4
4
  import { fg } from '@atlaskit/platform-feature-flags';
5
5
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
6
- import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
7
6
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
8
7
  import { getAnchorAttrName, getTypeNameAttrName, getTypeNameFromDom, NODE_ANCHOR_ATTR_NAME } from '../ui/utils/dom-attr-name';
9
8
  import { IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT, IGNORE_NODES_NEXT } from './decorations-anchor';
@@ -45,6 +44,33 @@ const getBlockMarkPanelIndexAdjustment = (parentRootElement, index) => {
45
44
  }
46
45
  return index;
47
46
  };
47
+
48
+ /**
49
+ * If the hovered element is a paragraph adjacent to a wrapped mediaSingle/embedCard,
50
+ * redirect to the media node so only one drag handle shows (ED-26959).
51
+ */
52
+ const redirectParagraphToWrappedMedia = (rootElement, isNativeAnchorSupported) => {
53
+ const hoveredNodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
54
+ if (hoveredNodeType !== 'paragraph') {
55
+ return rootElement;
56
+ }
57
+ const isWrappedMediaEmbedSibling = sibling => {
58
+ if (!sibling || !sibling.getAttribute(getAnchorAttrName())) {
59
+ return false;
60
+ }
61
+ const siblingType = isNativeAnchorSupported ? getTypeNameFromDom(sibling) : sibling.getAttribute('data-drag-handler-node-type');
62
+ const siblingLayout = sibling.getAttribute('layout') || '';
63
+ return (siblingType === 'mediaSingle' || siblingType === 'embedCard') && ['wrap-left', 'wrap-right'].includes(siblingLayout);
64
+ };
65
+ const prevSibling = rootElement.previousElementSibling;
66
+ const nextSibling = rootElement.nextElementSibling;
67
+ if (prevSibling && isWrappedMediaEmbedSibling(prevSibling)) {
68
+ return prevSibling;
69
+ } else if (nextSibling && isWrappedMediaEmbedSibling(nextSibling)) {
70
+ return nextSibling;
71
+ }
72
+ return rootElement;
73
+ };
48
74
  export const handleMouseOver = (view, event, api) => {
49
75
  var _api$blockControls, _api$editorDisabled, _api$editorViewMode, _api$editorViewMode$s, _api$blockControls$sh, _api$blockControls2, _api$blockControls2$s, _target$classList;
50
76
  const {
@@ -149,35 +175,14 @@ export const handleMouseOver = (view, event, api) => {
149
175
  }
150
176
  }
151
177
 
152
- // When platform_editor_fix_selection_wrapped_media_embed is enabled, a wrapped mediaSingle/embedCard and the
153
- // paragraph(s) it floats next to both have anchor decorations. If the hovered rootElement
154
- // is a paragraph whose adjacent DOM sibling is a wrapped mediaSingle/embedCard with an
155
- // anchor, redirect the handle to the media node so only one handle shows (ED-26959).
178
+ // A wrapped mediaSingle/embedCard and the paragraph(s) it floats next to both have
179
+ // anchor decorations. If the hovered rootElement is a paragraph whose adjacent DOM sibling
180
+ // is a wrapped mediaSingle/embedCard with an anchor, redirect the handle to the media node
181
+ // so only one handle shows (ED-26959).
156
182
  // We check previousElementSibling (wrap-left: media precedes text in DOM) and
157
183
  // nextElementSibling (wrap-right: media follows text in DOM).
158
184
  // This must happen before anchorName is read so the correct node's handle is shown.
159
- if (editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true, {
160
- exposure: true
161
- })) {
162
- const rootNodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
163
- if (rootNodeType === 'paragraph') {
164
- const isWrappedMediaEmbedSibling = sibling => {
165
- if (!sibling || !sibling.getAttribute(getAnchorAttrName())) {
166
- return false;
167
- }
168
- const siblingType = isNativeAnchorSupported ? getTypeNameFromDom(sibling) : sibling.getAttribute('data-drag-handler-node-type');
169
- const siblingLayout = sibling.getAttribute('layout') || '';
170
- return (siblingType === 'mediaSingle' || siblingType === 'embedCard') && ['wrap-left', 'wrap-right'].includes(siblingLayout);
171
- };
172
- const prevSibling = rootElement.previousElementSibling;
173
- const nextSibling = rootElement.nextElementSibling;
174
- if (prevSibling && isWrappedMediaEmbedSibling(prevSibling)) {
175
- rootElement = prevSibling;
176
- } else if (nextSibling && isWrappedMediaEmbedSibling(nextSibling)) {
177
- rootElement = nextSibling;
178
- }
179
- }
180
- }
185
+ rootElement = redirectParagraphToWrappedMedia(rootElement, isNativeAnchorSupported);
181
186
  let anchorName;
182
187
  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
183
188
  anchorName = rootElement.getAttribute(getAnchorAttrName());
@@ -201,16 +206,6 @@ export const handleMouseOver = (view, event, api) => {
201
206
  if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
202
207
  return false;
203
208
  }
204
- if (!editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true, {
205
- exposure: true
206
- })) {
207
- // We want to exclude handles from showing for wrapped nodes
208
- // TODO: ED-26959 - We should be able remove these check if we decided to
209
- // go we not decoration for wrapped image solution.
210
- if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')) {
211
- return false;
212
- }
213
- }
214
209
  const parentRootElement = rootElement.parentElement;
215
210
  let pos;
216
211
  if (parentRootElement) {
@@ -227,7 +222,7 @@ export const handleMouseOver = (view, event, api) => {
227
222
  } else {
228
223
  pos = view.posAtDOM(rootElement, 0);
229
224
  }
230
- if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && editorExperiment('advanced_layouts', true) && !expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
225
+ if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && editorExperiment('advanced_layouts', true) && !expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
231
226
  // Don't show drag handle for layout column in a single column layout,
232
227
  // unless the layout column menu is enabled (menu needs the handle to be accessible).
233
228
  return false;
@@ -113,7 +113,7 @@ export const topPositionAdjustment = (nodeType, layout) => {
113
113
  return DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT;
114
114
  }
115
115
  }
116
- if ((nodeType === 'mediaSingle' || nodeType === 'embedCard') && layout && ['wrap-left', 'wrap-right'].includes(layout) && editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true)) {
116
+ if ((nodeType === 'mediaSingle' || nodeType === 'embedCard') && layout && ['wrap-left', 'wrap-right'].includes(layout)) {
117
117
  return DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT;
118
118
  }
119
119
  switch (nodeType) {
@@ -483,7 +483,7 @@ export const DragHandle = ({
483
483
  if (startPos === undefined) {
484
484
  return tr;
485
485
  }
486
- if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
486
+ if (nodeType === 'layoutColumn' && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
487
487
  tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
488
488
  }
489
489
  const resolvedStartPos = tr.doc.resolve(startPos);
@@ -535,7 +535,7 @@ export const DragHandle = ({
535
535
  if (startPos === undefined) {
536
536
  return tr;
537
537
  }
538
- if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
538
+ if (nodeType === 'layoutColumn' && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
539
539
  tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
540
540
  }
541
541
  const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
@@ -623,7 +623,7 @@ export const DragHandle = ({
623
623
  api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.startPreservingSelection()({
624
624
  tr
625
625
  });
626
- if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
626
+ if (nodeType === 'layoutColumn' && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
627
627
  tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, true));
628
628
  }
629
629
  const rootPos = editorExperiment('platform_synced_block', true) ? tr.doc.resolve(startPos).before(1) : undefined;
@@ -929,7 +929,7 @@ export const DragHandle = ({
929
929
  }
930
930
  const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
931
931
  const $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
932
- const isLayoutColumnMenuEnabled = expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true);
932
+ const isLayoutColumnMenuEnabled = expValEquals('platform_editor_layout_column_menu', 'isEnabled', true);
933
933
  if (isShiftDown && !(isLayoutColumnMenuEnabled && isLayoutColumn) && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
934
934
  setDragHandleDisabled(true);
935
935
  } else {
@@ -941,7 +941,7 @@ export const DragHandle = ({
941
941
  }) : formatMessage(blockControlsMessages.dragToMove);
942
942
 
943
943
  // Create a string version for aria-label
944
- const dragHandleAriaLabel = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
944
+ const dragHandleAriaLabel = expValEquals('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
945
945
  br: ' '
946
946
  }) : formatMessage(blockControlsMessages.dragToMove);
947
947
  let helpDescriptors = isTopLevelNodeValue ? [{
@@ -1135,7 +1135,7 @@ export const DragHandle = ({
1135
1135
  });
1136
1136
  }
1137
1137
  }, renderButton());
1138
- const tooltipContent = isLayoutColumn && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) && currentUserIntent === 'layoutColumnMenuPopupOpen' ? null : jsx(TooltipContentWithMultipleShortcuts, {
1138
+ const tooltipContent = isLayoutColumn && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && currentUserIntent === 'layoutColumnMenuPopupOpen' ? null : jsx(TooltipContentWithMultipleShortcuts, {
1139
1139
  helpDescriptors: helpDescriptors
1140
1140
  });
1141
1141
  const isTooltip = !dragHandleDisabled;
@@ -22,8 +22,6 @@ export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
22
22
  };
23
23
  var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, parent) {
24
24
  var _nodeTypes$table, _node$attrs, _node$attrs2;
25
- var isEmbedCard = node.type.name === 'embedCard';
26
- var isMediaSingle = node.type.name === 'mediaSingle';
27
25
  var nodeTypes = node.type.schema.nodes;
28
26
  var isTable = node.type.name === (nodeTypes === null || nodeTypes === void 0 || (_nodeTypes$table = nodeTypes.table) === null || _nodeTypes$table === void 0 ? void 0 : _nodeTypes$table.name);
29
27
  var parentIsTable = parent && [nodeTypes.tableHeader, nodeTypes.tableCell].includes(parent.type);
@@ -39,9 +37,7 @@ var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, pare
39
37
  if (isLegacyContentMacroExtension) {
40
38
  return true;
41
39
  }
42
- return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) && !editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true, {
43
- exposure: true
44
- }) ? true : ignore_nodes.includes(node.type.name);
40
+ return ignore_nodes.includes(node.type.name);
45
41
  };
46
42
 
47
43
  /**
@@ -4,7 +4,6 @@ import { isMultiBlockSelection } from '@atlaskit/editor-common/selection';
4
4
  import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
5
5
  import { fg } from '@atlaskit/platform-feature-flags';
6
6
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
7
- import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
8
7
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
9
8
  import { getAnchorAttrName, getTypeNameAttrName, getTypeNameFromDom, NODE_ANCHOR_ATTR_NAME } from '../ui/utils/dom-attr-name';
10
9
  import { IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT, IGNORE_NODES_NEXT } from './decorations-anchor';
@@ -48,6 +47,33 @@ var getBlockMarkPanelIndexAdjustment = function getBlockMarkPanelIndexAdjustment
48
47
  }
49
48
  return index;
50
49
  };
50
+
51
+ /**
52
+ * If the hovered element is a paragraph adjacent to a wrapped mediaSingle/embedCard,
53
+ * redirect to the media node so only one drag handle shows (ED-26959).
54
+ */
55
+ var redirectParagraphToWrappedMedia = function redirectParagraphToWrappedMedia(rootElement, isNativeAnchorSupported) {
56
+ var hoveredNodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
57
+ if (hoveredNodeType !== 'paragraph') {
58
+ return rootElement;
59
+ }
60
+ var isWrappedMediaEmbedSibling = function isWrappedMediaEmbedSibling(sibling) {
61
+ if (!sibling || !sibling.getAttribute(getAnchorAttrName())) {
62
+ return false;
63
+ }
64
+ var siblingType = isNativeAnchorSupported ? getTypeNameFromDom(sibling) : sibling.getAttribute('data-drag-handler-node-type');
65
+ var siblingLayout = sibling.getAttribute('layout') || '';
66
+ return (siblingType === 'mediaSingle' || siblingType === 'embedCard') && ['wrap-left', 'wrap-right'].includes(siblingLayout);
67
+ };
68
+ var prevSibling = rootElement.previousElementSibling;
69
+ var nextSibling = rootElement.nextElementSibling;
70
+ if (prevSibling && isWrappedMediaEmbedSibling(prevSibling)) {
71
+ return prevSibling;
72
+ } else if (nextSibling && isWrappedMediaEmbedSibling(nextSibling)) {
73
+ return nextSibling;
74
+ }
75
+ return rootElement;
76
+ };
51
77
  export var handleMouseOver = function handleMouseOver(view, event, api) {
52
78
  var _api$blockControls, _api$editorDisabled, _api$editorViewMode, _api$blockControls$sh, _api$blockControls2, _target$classList;
53
79
  var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -150,35 +176,14 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
150
176
  }
151
177
  }
152
178
 
153
- // When platform_editor_fix_selection_wrapped_media_embed is enabled, a wrapped mediaSingle/embedCard and the
154
- // paragraph(s) it floats next to both have anchor decorations. If the hovered rootElement
155
- // is a paragraph whose adjacent DOM sibling is a wrapped mediaSingle/embedCard with an
156
- // anchor, redirect the handle to the media node so only one handle shows (ED-26959).
179
+ // A wrapped mediaSingle/embedCard and the paragraph(s) it floats next to both have
180
+ // anchor decorations. If the hovered rootElement is a paragraph whose adjacent DOM sibling
181
+ // is a wrapped mediaSingle/embedCard with an anchor, redirect the handle to the media node
182
+ // so only one handle shows (ED-26959).
157
183
  // We check previousElementSibling (wrap-left: media precedes text in DOM) and
158
184
  // nextElementSibling (wrap-right: media follows text in DOM).
159
185
  // This must happen before anchorName is read so the correct node's handle is shown.
160
- if (editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true, {
161
- exposure: true
162
- })) {
163
- var _rootNodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
164
- if (_rootNodeType === 'paragraph') {
165
- var isWrappedMediaEmbedSibling = function isWrappedMediaEmbedSibling(sibling) {
166
- if (!sibling || !sibling.getAttribute(getAnchorAttrName())) {
167
- return false;
168
- }
169
- var siblingType = isNativeAnchorSupported ? getTypeNameFromDom(sibling) : sibling.getAttribute('data-drag-handler-node-type');
170
- var siblingLayout = sibling.getAttribute('layout') || '';
171
- return (siblingType === 'mediaSingle' || siblingType === 'embedCard') && ['wrap-left', 'wrap-right'].includes(siblingLayout);
172
- };
173
- var prevSibling = rootElement.previousElementSibling;
174
- var nextSibling = rootElement.nextElementSibling;
175
- if (prevSibling && isWrappedMediaEmbedSibling(prevSibling)) {
176
- rootElement = prevSibling;
177
- } else if (nextSibling && isWrappedMediaEmbedSibling(nextSibling)) {
178
- rootElement = nextSibling;
179
- }
180
- }
181
- }
186
+ rootElement = redirectParagraphToWrappedMedia(rootElement, isNativeAnchorSupported);
182
187
  var anchorName;
183
188
  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)) {
184
189
  anchorName = rootElement.getAttribute(getAnchorAttrName());
@@ -202,16 +207,6 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
202
207
  if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
203
208
  return false;
204
209
  }
205
- if (!editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true, {
206
- exposure: true
207
- })) {
208
- // We want to exclude handles from showing for wrapped nodes
209
- // TODO: ED-26959 - We should be able remove these check if we decided to
210
- // go we not decoration for wrapped image solution.
211
- if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '')) {
212
- return false;
213
- }
214
- }
215
210
  var parentRootElement = rootElement.parentElement;
216
211
  var pos;
217
212
  if (parentRootElement) {
@@ -228,7 +223,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
228
223
  } else {
229
224
  pos = view.posAtDOM(rootElement, 0);
230
225
  }
231
- if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && editorExperiment('advanced_layouts', true) && !expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
226
+ if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && editorExperiment('advanced_layouts', true) && !expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
232
227
  // Don't show drag handle for layout column in a single column layout,
233
228
  // unless the layout column menu is enabled (menu needs the handle to be accessible).
234
229
  return false;
@@ -115,7 +115,7 @@ export var topPositionAdjustment = function topPositionAdjustment(nodeType, layo
115
115
  return DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT;
116
116
  }
117
117
  }
118
- if ((nodeType === 'mediaSingle' || nodeType === 'embedCard') && layout && ['wrap-left', 'wrap-right'].includes(layout) && editorExperiment('platform_editor_fix_selection_wrapped_media_embed', true)) {
118
+ if ((nodeType === 'mediaSingle' || nodeType === 'embedCard') && layout && ['wrap-left', 'wrap-right'].includes(layout)) {
119
119
  return DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT;
120
120
  }
121
121
  switch (nodeType) {
@@ -506,7 +506,7 @@ export var DragHandle = function DragHandle(_ref) {
506
506
  if (startPos === undefined) {
507
507
  return tr;
508
508
  }
509
- if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
509
+ if (nodeType === 'layoutColumn' && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
510
510
  tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
511
511
  }
512
512
  var resolvedStartPos = tr.doc.resolve(startPos);
@@ -557,7 +557,7 @@ export var DragHandle = function DragHandle(_ref) {
557
557
  if (startPos === undefined) {
558
558
  return tr;
559
559
  }
560
- if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
560
+ if (nodeType === 'layoutColumn' && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
561
561
  tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
562
562
  }
563
563
  var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
@@ -645,7 +645,7 @@ export var DragHandle = function DragHandle(_ref) {
645
645
  api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.startPreservingSelection()({
646
646
  tr: tr
647
647
  });
648
- if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
648
+ if (nodeType === 'layoutColumn' && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
649
649
  tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, true));
650
650
  }
651
651
  var rootPos = editorExperiment('platform_synced_block', true) ? tr.doc.resolve(startPos).before(1) : undefined;
@@ -945,7 +945,7 @@ export var DragHandle = function DragHandle(_ref) {
945
945
  }
946
946
  var mSelect = api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
947
947
  var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
948
- var isLayoutColumnMenuEnabled = expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true);
948
+ var isLayoutColumnMenuEnabled = expValEquals('platform_editor_layout_column_menu', 'isEnabled', true);
949
949
  if (isShiftDown && !(isLayoutColumnMenuEnabled && isLayoutColumn) && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
950
950
  setDragHandleDisabled(true);
951
951
  } else {
@@ -957,7 +957,7 @@ export var DragHandle = function DragHandle(_ref) {
957
957
  }) : formatMessage(blockControlsMessages.dragToMove);
958
958
 
959
959
  // Create a string version for aria-label
960
- var dragHandleAriaLabel = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
960
+ var dragHandleAriaLabel = expValEquals('platform_editor_block_menu', 'isEnabled', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
961
961
  br: ' '
962
962
  }) : formatMessage(blockControlsMessages.dragToMove);
963
963
  var helpDescriptors = isTopLevelNodeValue ? [{
@@ -1159,7 +1159,7 @@ export var DragHandle = function DragHandle(_ref) {
1159
1159
  }
1160
1160
  }, renderButton());
1161
1161
  };
1162
- var tooltipContent = isLayoutColumn && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) && currentUserIntent === 'layoutColumnMenuPopupOpen' ? null : jsx(TooltipContentWithMultipleShortcuts, {
1162
+ var tooltipContent = isLayoutColumn && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && currentUserIntent === 'layoutColumnMenuPopupOpen' ? null : jsx(TooltipContentWithMultipleShortcuts, {
1163
1163
  helpDescriptors: helpDescriptors
1164
1164
  });
1165
1165
  var isTooltip = !dragHandleDisabled;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "13.1.1",
3
+ "version": "13.1.3",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -48,7 +48,7 @@
48
48
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^4.0.0",
49
49
  "@atlaskit/primitives": "^20.0.0",
50
50
  "@atlaskit/theme": "^26.0.0",
51
- "@atlaskit/tmp-editor-statsig": "^112.0.0",
51
+ "@atlaskit/tmp-editor-statsig": "^114.0.0",
52
52
  "@atlaskit/tokens": "^15.0.0",
53
53
  "@atlaskit/tooltip": "^23.0.0",
54
54
  "@babel/runtime": "^7.0.0",
@@ -59,7 +59,7 @@
59
59
  "uuid": "^3.1.0"
60
60
  },
61
61
  "peerDependencies": {
62
- "@atlaskit/editor-common": "^116.12.0",
62
+ "@atlaskit/editor-common": "^116.13.0",
63
63
  "react": "^18.2.0",
64
64
  "react-dom": "^18.2.0",
65
65
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"