@atlaskit/editor-plugin-block-controls 7.3.0 → 7.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/blockControlsPlugin.js +15 -7
  3. package/dist/cjs/pm-plugins/handle-mouse-down.js +28 -1
  4. package/dist/cjs/ui/global-styles.js +22 -13
  5. package/dist/es2019/blockControlsPlugin.js +15 -7
  6. package/dist/es2019/pm-plugins/handle-mouse-down.js +29 -1
  7. package/dist/es2019/ui/global-styles.js +30 -16
  8. package/dist/esm/blockControlsPlugin.js +15 -7
  9. package/dist/esm/pm-plugins/handle-mouse-down.js +28 -1
  10. package/dist/esm/ui/global-styles.js +22 -13
  11. package/package.json +8 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 7.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`9ca86d5ced1c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9ca86d5ced1c4) -
8
+ ED-294112 fix extended hover zone for platform_editor_native_anchor_support to match existing
9
+ behaviour; no hover zones for inline elements, headerCells or (when advanced_layouts is off)
10
+ layout columns
11
+ - Updated dependencies
12
+
13
+ ## 7.4.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [`4f5569bde5e64`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4f5569bde5e64) -
18
+ Add new 'dragHandleSelected' user intent, use this to control table toolbar when drag handle is
19
+ selected
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies
24
+
3
25
  ## 7.3.0
4
26
 
5
27
  ### Minor Changes
package/dist/cjs/blockControlsPlugin.js CHANGED
@@ -125,18 +125,26 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
125
125
  toggleMenu: toggleMenuMeta
126
126
  }));
127
127
  if ((menuTriggerBy === undefined || !!menuTriggerBy && menuTriggerBy === (options === null || options === void 0 ? void 0 : options.anchorName)) && currentUserIntent === 'blockMenuOpen') {
128
- var _api$userIntent4;
129
- // Toggled from drag handle
130
- api === null || api === void 0 || (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 || _api$userIntent4.commands.setCurrentUserIntent('default')({
131
- tr: tr
132
- });
128
+ var state = api === null || api === void 0 ? void 0 : api.blockControls.sharedState.currentState();
129
+ if (state !== null && state !== void 0 && state.isSelectedViaDragHandle && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_user_intent_fix')) {
130
+ var _api$userIntent4;
131
+ api === null || api === void 0 || (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 || _api$userIntent4.commands.setCurrentUserIntent('dragHandleSelected')({
132
+ tr: tr
133
+ });
134
+ } else {
135
+ var _api$userIntent5;
136
+ // Toggled from drag handle
137
+ api === null || api === void 0 || (_api$userIntent5 = api.userIntent) === null || _api$userIntent5 === void 0 || _api$userIntent5.commands.setCurrentUserIntent('default')({
138
+ tr: tr
139
+ });
140
+ }
133
141
  }
134
142
  return tr;
135
143
  };
136
144
  },
137
145
  setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
138
146
  return function (_ref5) {
139
- var _api$userIntent5;
147
+ var _api$userIntent6;
140
148
  var tr = _ref5.tr;
141
149
  var pos = getPos();
142
150
  if (pos === undefined) {
@@ -160,7 +168,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
160
168
  tr: tr
161
169
  });
162
170
  }
163
- api === null || api === void 0 || (_api$userIntent5 = api.userIntent) === null || _api$userIntent5 === void 0 || _api$userIntent5.commands.setCurrentUserIntent('dragging')({
171
+ api === null || api === void 0 || (_api$userIntent6 = api.userIntent) === null || _api$userIntent6 === void 0 || _api$userIntent6.commands.setCurrentUserIntent('dragging')({
164
172
  tr: tr
165
173
  });
166
174
  return tr;
package/dist/cjs/pm-plugins/handle-mouse-down.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.handleMouseDown = void 0;
7
7
  var _styles = require("@atlaskit/editor-common/styles");
8
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
8
9
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
9
10
  var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
10
11
  var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
@@ -35,7 +36,33 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
35
36
  }
36
37
  } else {
37
38
  var isDragHandle = event.target.closest((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? _styles.DRAG_HANDLE_SELECTOR : '[data-editor-block-ctrl-drag-handle]') !== null;
38
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
39
+ api === null || api === void 0 || api.core.actions.execute(function (_ref) {
40
+ var tr = _ref.tr;
41
+ api === null || api === void 0 || api.blockControls.commands.setSelectedViaDragHandle(isDragHandle)({
42
+ tr: tr
43
+ });
44
+ /**
45
+ * When block menu is enabled, reset intent back to 'default' as editor-plugin-block-menu sets the user intent to 'blockMenuOpen', and setting here
46
+ * causes flickering as this runs before editor-plugin-block-menu.
47
+ */
48
+ if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_user_intent_fix')) {
49
+ if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
50
+ // if target is drag handle, block menu will be opened
51
+ if (!isDragHandle) {
52
+ var _api$userIntent;
53
+ api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('default')({
54
+ tr: tr
55
+ });
56
+ }
57
+ } else {
58
+ var _api$userIntent2;
59
+ (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(isDragHandle ? 'dragHandleSelected' : 'default')({
60
+ tr: tr
61
+ });
62
+ }
63
+ }
64
+ return tr;
65
+ });
39
66
  }
40
67
  return false;
41
68
  };
package/dist/cjs/ui/global-styles.js CHANGED
@@ -27,7 +27,10 @@ var _domAttrName = require("./utils/dom-attr-name");
27
27
  * including those within table rows and media.
28
28
  */
29
29
  var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
30
- var dragHandlerAnchorSelectorNext = "[".concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "]:not([data-prosemirror-node-name=\"tableRow\"], [data-prosemirror-node-name=\"tableCell\"], [data-prosemirror-node-name=\"media\"])");
30
+ /**
31
+ * Disregards anchors that can not have handles next to them, and so shouldn't have an extended hover zone
32
+ */
33
+ var dragHandlerAnchorSelectorNext = "[".concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "]:not([data-prosemirror-node-name=\"tableRow\"], [data-prosemirror-node-name=\"tableCell\"], [data-prosemirror-node-name=\"tableHeader\"], [data-prosemirror-node-name=\"media\"], [data-prosemirror-node-inline=\"true\"])");
31
34
  var gutterPaddingWidth = function gutterPaddingWidth() {
32
35
  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '100%';
33
36
  };
@@ -95,7 +98,7 @@ var extendedHoverZoneNext = function extendedHoverZoneNext() {
95
98
  return (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelectorNext, "::after"), {
96
99
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
97
100
  display: 'none !important'
98
- }), '.ProseMirror', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelectorNext, "::after"), {
101
+ }), '.ProseMirror', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelectorNext, "::after"), {
99
102
  content: '""',
100
103
  position: 'absolute',
101
104
  top: 0,
@@ -122,32 +125,38 @@ var extendedHoverZoneNext = function extendedHoverZoneNext() {
122
125
  content: '""',
123
126
  position: 'absolute',
124
127
  top: 0,
125
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
126
128
  left: 0,
127
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
128
129
  width: 0,
129
130
  height: '100%',
130
131
  cursor: 'default',
131
132
  zIndex: 1
132
- }), "&&& ".concat(dragHandlerAnchorSelectorNext, "[data-layout-column]::after"), {
133
+ })), 'hr[data-drag-handler-anchor-name]', {
134
+ overflow: 'visible'
135
+ }), "[data-blocks-drag-handle-container=\"true\"] + ".concat(dragHandlerAnchorSelectorNext, ":not([").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "] [").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "])::after"), {
136
+ display: 'none'
137
+ }));
138
+ };
139
+ var layoutColumnExtendedHoverZone = (0, _react.css)({
140
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
141
+ '.ProseMirror': (0, _defineProperty2.default)({}, "&&& ".concat(dragHandlerAnchorSelectorNext, "[data-layout-column]::after"), {
133
142
  content: '""',
134
143
  position: 'absolute',
135
144
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
136
145
  top: "".concat(-_styles.DRAG_HANDLE_WIDTH / 2, "px"),
137
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
138
146
  left: 0,
139
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
140
147
  width: '100%',
141
148
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
142
149
  height: "".concat(_styles.DRAG_HANDLE_WIDTH, "px"),
143
150
  cursor: 'default',
144
151
  zIndex: 1
145
- })), 'hr[data-drag-handler-anchor-name]', {
146
- overflow: 'visible'
147
- }), "[data-blocks-drag-handle-container=\"true\"] + ".concat(dragHandlerAnchorSelectorNext, ":not([").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "] [").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "])::after"), {
152
+ })
153
+ });
154
+ var layoutColumnWithoutHoverZone = (0, _react.css)({
155
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
156
+ '.ProseMirror': (0, _defineProperty2.default)({}, "&&& ".concat(dragHandlerAnchorSelectorNext, "[data-layout-column]::after"), {
148
157
  display: 'none'
149
- }));
150
- };
158
+ })
159
+ });
151
160
  var extendHoverZoneReduced = (0, _react.css)({
152
161
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
153
162
  '.ProseMirror': (0, _defineProperty2.default)({}, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), (0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
@@ -403,6 +412,6 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
403
412
  return (0, _react.jsx)(_react.Global, {
404
413
  styles: [globalStyles(), globalDnDStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
405
414
  exposure: true
406
- }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle]
415
+ }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone]
407
416
  });
408
417
  };
package/dist/es2019/blockControlsPlugin.js CHANGED
@@ -119,18 +119,26 @@ export const blockControlsPlugin = ({
119
119
  toggleMenu: toggleMenuMeta
120
120
  });
121
121
  if ((menuTriggerBy === undefined || !!menuTriggerBy && menuTriggerBy === (options === null || options === void 0 ? void 0 : options.anchorName)) && currentUserIntent === 'blockMenuOpen') {
122
- var _api$userIntent4;
123
- // Toggled from drag handle
124
- api === null || api === void 0 ? void 0 : (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 ? void 0 : _api$userIntent4.commands.setCurrentUserIntent('default')({
125
- tr
126
- });
122
+ const state = api === null || api === void 0 ? void 0 : api.blockControls.sharedState.currentState();
123
+ if (state !== null && state !== void 0 && state.isSelectedViaDragHandle && fg('platform_editor_toolbar_aifc_user_intent_fix')) {
124
+ var _api$userIntent4;
125
+ api === null || api === void 0 ? void 0 : (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 ? void 0 : _api$userIntent4.commands.setCurrentUserIntent('dragHandleSelected')({
126
+ tr
127
+ });
128
+ } else {
129
+ var _api$userIntent5;
130
+ // Toggled from drag handle
131
+ api === null || api === void 0 ? void 0 : (_api$userIntent5 = api.userIntent) === null || _api$userIntent5 === void 0 ? void 0 : _api$userIntent5.commands.setCurrentUserIntent('default')({
132
+ tr
133
+ });
134
+ }
127
135
  }
128
136
  return tr;
129
137
  },
130
138
  setNodeDragged: (getPos, anchorName, nodeType) => ({
131
139
  tr
132
140
  }) => {
133
- var _api$userIntent5;
141
+ var _api$userIntent6;
134
142
  const pos = getPos();
135
143
  if (pos === undefined) {
136
144
  return tr;
@@ -154,7 +162,7 @@ export const blockControlsPlugin = ({
154
162
  tr
155
163
  });
156
164
  }
157
- api === null || api === void 0 ? void 0 : (_api$userIntent5 = api.userIntent) === null || _api$userIntent5 === void 0 ? void 0 : _api$userIntent5.commands.setCurrentUserIntent('dragging')({
165
+ api === null || api === void 0 ? void 0 : (_api$userIntent6 = api.userIntent) === null || _api$userIntent6 === void 0 ? void 0 : _api$userIntent6.commands.setCurrentUserIntent('dragging')({
158
166
  tr
159
167
  });
160
168
  return tr;
package/dist/es2019/pm-plugins/handle-mouse-down.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
2
3
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
3
4
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
4
5
  export const handleMouseDown = api => (view, event) => {
@@ -28,7 +29,34 @@ export const handleMouseDown = api => (view, event) => {
28
29
  }
29
30
  } else {
30
31
  const isDragHandle = event.target.closest(expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? DRAG_HANDLE_SELECTOR : '[data-editor-block-ctrl-drag-handle]') !== null;
31
- api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
32
+ api === null || api === void 0 ? void 0 : api.core.actions.execute(({
33
+ tr
34
+ }) => {
35
+ api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle)({
36
+ tr
37
+ });
38
+ /**
39
+ * When block menu is enabled, reset intent back to 'default' as editor-plugin-block-menu sets the user intent to 'blockMenuOpen', and setting here
40
+ * causes flickering as this runs before editor-plugin-block-menu.
41
+ */
42
+ if (fg('platform_editor_toolbar_aifc_user_intent_fix')) {
43
+ if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
44
+ // if target is drag handle, block menu will be opened
45
+ if (!isDragHandle) {
46
+ var _api$userIntent;
47
+ api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('default')({
48
+ tr
49
+ });
50
+ }
51
+ } else {
52
+ var _api$userIntent2;
53
+ (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent(isDragHandle ? 'dragHandleSelected' : 'default')({
54
+ tr
55
+ });
56
+ }
57
+ }
58
+ return tr;
59
+ });
32
60
  }
33
61
  return false;
34
62
  };
package/dist/es2019/ui/global-styles.js CHANGED
@@ -19,7 +19,10 @@ import { NODE_ANCHOR_ATTR_NAME } from './utils/dom-attr-name';
19
19
  * including those within table rows and media.
20
20
  */
21
21
  const dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
22
- const dragHandlerAnchorSelectorNext = `[${NODE_ANCHOR_ATTR_NAME}]:not([data-prosemirror-node-name="tableRow"], [data-prosemirror-node-name="tableCell"], [data-prosemirror-node-name="media"])`;
22
+ /**
23
+ * Disregards anchors that can not have handles next to them, and so shouldn't have an extended hover zone
24
+ */
25
+ const dragHandlerAnchorSelectorNext = `[${NODE_ANCHOR_ATTR_NAME}]:not([data-prosemirror-node-name="tableRow"], [data-prosemirror-node-name="tableCell"], [data-prosemirror-node-name="tableHeader"], [data-prosemirror-node-name="media"], [data-prosemirror-node-inline="true"])`;
23
26
  const gutterPaddingWidth = () => editorExperiment('platform_editor_controls', 'variant1') ? `${akEditorGutterPaddingDynamic()}px` : '100%';
24
27
  const gutterPaddingLeft = () => editorExperiment('platform_editor_controls', 'variant1') ? `-${akEditorGutterPaddingDynamic()}px` : '-100px';
25
28
  const extendedHoverZone = () => css({
@@ -140,14 +143,27 @@ const extendedHoverZoneNext = () => css({
140
143
  content: '""',
141
144
  position: 'absolute',
142
145
  top: 0,
143
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
144
146
  left: 0,
145
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
146
147
  width: 0,
147
148
  height: '100%',
148
149
  cursor: 'default',
149
150
  zIndex: 1
150
- },
151
+ }
152
+ },
153
+ // 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
154
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
155
+ 'hr[data-drag-handler-anchor-name]': {
156
+ overflow: 'visible'
157
+ },
158
+ //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
159
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
160
+ [`[data-blocks-drag-handle-container="true"] + ${dragHandlerAnchorSelectorNext}:not([${NODE_ANCHOR_ATTR_NAME}] [${NODE_ANCHOR_ATTR_NAME}])::after`]: {
161
+ display: 'none'
162
+ }
163
+ });
164
+ const layoutColumnExtendedHoverZone = css({
165
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
166
+ '.ProseMirror': {
151
167
  // hover zone for layout column should be placed near the top of the column (where drag handle is)
152
168
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
153
169
  [`&&& ${dragHandlerAnchorSelectorNext}[data-layout-column]::after`]: {
@@ -155,25 +171,23 @@ const extendedHoverZoneNext = () => css({
155
171
  position: 'absolute',
156
172
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
157
173
  top: `${-DRAG_HANDLE_WIDTH / 2}px`,
158
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
159
174
  left: 0,
160
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
161
175
  width: '100%',
162
176
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
163
177
  height: `${DRAG_HANDLE_WIDTH}px`,
164
178
  cursor: 'default',
165
179
  zIndex: 1
166
180
  }
167
- },
168
- // 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
181
+ }
182
+ });
183
+ const layoutColumnWithoutHoverZone = css({
169
184
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
170
- 'hr[data-drag-handler-anchor-name]': {
171
- overflow: 'visible'
172
- },
173
- //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
174
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
175
- [`[data-blocks-drag-handle-container="true"] + ${dragHandlerAnchorSelectorNext}:not([${NODE_ANCHOR_ATTR_NAME}] [${NODE_ANCHOR_ATTR_NAME}])::after`]: {
176
- display: 'none'
185
+ '.ProseMirror': {
186
+ // when advanced_layouts is off, layout columns should not have hover zones, because there aren't any drag handles for layout columns
187
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
188
+ [`&&& ${dragHandlerAnchorSelectorNext}[data-layout-column]::after`]: {
189
+ display: 'none'
190
+ }
177
191
  }
178
192
  });
179
193
  const extendHoverZoneReduced = css({
@@ -477,6 +491,6 @@ export const GlobalStylesWrapper = ({
477
491
  return jsx(Global, {
478
492
  styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
479
493
  exposure: true
480
- }) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle]
494
+ }) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone]
481
495
  });
482
496
  };
package/dist/esm/blockControlsPlugin.js CHANGED
@@ -118,18 +118,26 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
118
118
  toggleMenu: toggleMenuMeta
119
119
  }));
120
120
  if ((menuTriggerBy === undefined || !!menuTriggerBy && menuTriggerBy === (options === null || options === void 0 ? void 0 : options.anchorName)) && currentUserIntent === 'blockMenuOpen') {
121
- var _api$userIntent4;
122
- // Toggled from drag handle
123
- api === null || api === void 0 || (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 || _api$userIntent4.commands.setCurrentUserIntent('default')({
124
- tr: tr
125
- });
121
+ var state = api === null || api === void 0 ? void 0 : api.blockControls.sharedState.currentState();
122
+ if (state !== null && state !== void 0 && state.isSelectedViaDragHandle && fg('platform_editor_toolbar_aifc_user_intent_fix')) {
123
+ var _api$userIntent4;
124
+ api === null || api === void 0 || (_api$userIntent4 = api.userIntent) === null || _api$userIntent4 === void 0 || _api$userIntent4.commands.setCurrentUserIntent('dragHandleSelected')({
125
+ tr: tr
126
+ });
127
+ } else {
128
+ var _api$userIntent5;
129
+ // Toggled from drag handle
130
+ api === null || api === void 0 || (_api$userIntent5 = api.userIntent) === null || _api$userIntent5 === void 0 || _api$userIntent5.commands.setCurrentUserIntent('default')({
131
+ tr: tr
132
+ });
133
+ }
126
134
  }
127
135
  return tr;
128
136
  };
129
137
  },
130
138
  setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
131
139
  return function (_ref5) {
132
- var _api$userIntent5;
140
+ var _api$userIntent6;
133
141
  var tr = _ref5.tr;
134
142
  var pos = getPos();
135
143
  if (pos === undefined) {
@@ -153,7 +161,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
153
161
  tr: tr
154
162
  });
155
163
  }
156
- api === null || api === void 0 || (_api$userIntent5 = api.userIntent) === null || _api$userIntent5 === void 0 || _api$userIntent5.commands.setCurrentUserIntent('dragging')({
164
+ api === null || api === void 0 || (_api$userIntent6 = api.userIntent) === null || _api$userIntent6 === void 0 || _api$userIntent6.commands.setCurrentUserIntent('dragging')({
157
165
  tr: tr
158
166
  });
159
167
  return tr;
package/dist/esm/pm-plugins/handle-mouse-down.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
2
3
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
3
4
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
4
5
  export var handleMouseDown = function handleMouseDown(api) {
@@ -29,7 +30,33 @@ export var handleMouseDown = function handleMouseDown(api) {
29
30
  }
30
31
  } else {
31
32
  var isDragHandle = event.target.closest(expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? DRAG_HANDLE_SELECTOR : '[data-editor-block-ctrl-drag-handle]') !== null;
32
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
33
+ api === null || api === void 0 || api.core.actions.execute(function (_ref) {
34
+ var tr = _ref.tr;
35
+ api === null || api === void 0 || api.blockControls.commands.setSelectedViaDragHandle(isDragHandle)({
36
+ tr: tr
37
+ });
38
+ /**
39
+ * When block menu is enabled, reset intent back to 'default' as editor-plugin-block-menu sets the user intent to 'blockMenuOpen', and setting here
40
+ * causes flickering as this runs before editor-plugin-block-menu.
41
+ */
42
+ if (fg('platform_editor_toolbar_aifc_user_intent_fix')) {
43
+ if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
44
+ // if target is drag handle, block menu will be opened
45
+ if (!isDragHandle) {
46
+ var _api$userIntent;
47
+ api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('default')({
48
+ tr: tr
49
+ });
50
+ }
51
+ } else {
52
+ var _api$userIntent2;
53
+ (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(isDragHandle ? 'dragHandleSelected' : 'default')({
54
+ tr: tr
55
+ });
56
+ }
57
+ }
58
+ return tr;
59
+ });
33
60
  }
34
61
  return false;
35
62
  };
package/dist/esm/ui/global-styles.js CHANGED
@@ -20,7 +20,10 @@ import { NODE_ANCHOR_ATTR_NAME } from './utils/dom-attr-name';
20
20
  * including those within table rows and media.
21
21
  */
22
22
  var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
23
- var dragHandlerAnchorSelectorNext = "[".concat(NODE_ANCHOR_ATTR_NAME, "]:not([data-prosemirror-node-name=\"tableRow\"], [data-prosemirror-node-name=\"tableCell\"], [data-prosemirror-node-name=\"media\"])");
23
+ /**
24
+ * Disregards anchors that can not have handles next to them, and so shouldn't have an extended hover zone
25
+ */
26
+ var dragHandlerAnchorSelectorNext = "[".concat(NODE_ANCHOR_ATTR_NAME, "]:not([data-prosemirror-node-name=\"tableRow\"], [data-prosemirror-node-name=\"tableCell\"], [data-prosemirror-node-name=\"tableHeader\"], [data-prosemirror-node-name=\"media\"], [data-prosemirror-node-inline=\"true\"])");
24
27
  var gutterPaddingWidth = function gutterPaddingWidth() {
25
28
  return editorExperiment('platform_editor_controls', 'variant1') ? "".concat(akEditorGutterPaddingDynamic(), "px") : '100%';
26
29
  };
@@ -88,7 +91,7 @@ var extendedHoverZoneNext = function extendedHoverZoneNext() {
88
91
  return css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelectorNext, "::after"), {
89
92
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
90
93
  display: 'none !important'
91
- }), '.ProseMirror', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&& ".concat(dragHandlerAnchorSelectorNext, "::after"), {
94
+ }), '.ProseMirror', _defineProperty(_defineProperty(_defineProperty({}, "&& ".concat(dragHandlerAnchorSelectorNext, "::after"), {
92
95
  content: '""',
93
96
  position: 'absolute',
94
97
  top: 0,
@@ -115,32 +118,38 @@ var extendedHoverZoneNext = function extendedHoverZoneNext() {
115
118
  content: '""',
116
119
  position: 'absolute',
117
120
  top: 0,
118
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
119
121
  left: 0,
120
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
121
122
  width: 0,
122
123
  height: '100%',
123
124
  cursor: 'default',
124
125
  zIndex: 1
125
- }), "&&& ".concat(dragHandlerAnchorSelectorNext, "[data-layout-column]::after"), {
126
+ })), 'hr[data-drag-handler-anchor-name]', {
127
+ overflow: 'visible'
128
+ }), "[data-blocks-drag-handle-container=\"true\"] + ".concat(dragHandlerAnchorSelectorNext, ":not([").concat(NODE_ANCHOR_ATTR_NAME, "] [").concat(NODE_ANCHOR_ATTR_NAME, "])::after"), {
129
+ display: 'none'
130
+ }));
131
+ };
132
+ var layoutColumnExtendedHoverZone = css({
133
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
134
+ '.ProseMirror': _defineProperty({}, "&&& ".concat(dragHandlerAnchorSelectorNext, "[data-layout-column]::after"), {
126
135
  content: '""',
127
136
  position: 'absolute',
128
137
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
129
138
  top: "".concat(-DRAG_HANDLE_WIDTH / 2, "px"),
130
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
131
139
  left: 0,
132
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
133
140
  width: '100%',
134
141
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
135
142
  height: "".concat(DRAG_HANDLE_WIDTH, "px"),
136
143
  cursor: 'default',
137
144
  zIndex: 1
138
- })), 'hr[data-drag-handler-anchor-name]', {
139
- overflow: 'visible'
140
- }), "[data-blocks-drag-handle-container=\"true\"] + ".concat(dragHandlerAnchorSelectorNext, ":not([").concat(NODE_ANCHOR_ATTR_NAME, "] [").concat(NODE_ANCHOR_ATTR_NAME, "])::after"), {
145
+ })
146
+ });
147
+ var layoutColumnWithoutHoverZone = css({
148
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
149
+ '.ProseMirror': _defineProperty({}, "&&& ".concat(dragHandlerAnchorSelectorNext, "[data-layout-column]::after"), {
141
150
  display: 'none'
142
- }));
143
- };
151
+ })
152
+ });
144
153
  var extendHoverZoneReduced = css({
145
154
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
146
155
  '.ProseMirror': _defineProperty({}, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), _defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
@@ -396,6 +405,6 @@ export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
396
405
  return jsx(Global, {
397
406
  styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
398
407
  exposure: true
399
- }) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle]
408
+ }) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone]
400
409
  });
401
410
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "7.3.0",
3
+ "version": "7.4.1",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -42,7 +42,7 @@
42
42
  "@atlaskit/editor-plugin-user-intent": "^4.0.0",
43
43
  "@atlaskit/editor-plugin-width": "^7.0.0",
44
44
  "@atlaskit/editor-prosemirror": "7.0.0",
45
- "@atlaskit/editor-shared-styles": "^3.7.0",
45
+ "@atlaskit/editor-shared-styles": "^3.8.0",
46
46
  "@atlaskit/editor-tables": "^2.9.0",
47
47
  "@atlaskit/icon": "^28.5.0",
48
48
  "@atlaskit/link": "^3.2.0",
@@ -52,9 +52,9 @@
52
52
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
53
53
  "@atlaskit/primitives": "^16.0.0",
54
54
  "@atlaskit/theme": "^21.0.0",
55
- "@atlaskit/tmp-editor-statsig": "^13.13.0",
55
+ "@atlaskit/tmp-editor-statsig": "^13.17.0",
56
56
  "@atlaskit/tokens": "^7.0.0",
57
- "@atlaskit/tooltip": "^20.5.0",
57
+ "@atlaskit/tooltip": "^20.6.0",
58
58
  "@babel/runtime": "^7.0.0",
59
59
  "@emotion/react": "^11.7.1",
60
60
  "@popperjs/core": "^2.11.8",
@@ -64,7 +64,7 @@
64
64
  "uuid": "^3.1.0"
65
65
  },
66
66
  "peerDependencies": {
67
- "@atlaskit/editor-common": "^110.14.0",
67
+ "@atlaskit/editor-common": "^110.16.0",
68
68
  "react": "^18.2.0",
69
69
  "react-dom": "^18.2.0",
70
70
  "react-intl-next": "npm:react-intl@^5.18.1"
@@ -158,6 +158,9 @@
158
158
  },
159
159
  "platform_editor_content_mode_button_mvp": {
160
160
  "type": "boolean"
161
+ },
162
+ "platform_editor_toolbar_aifc_user_intent_fix": {
163
+ "type": "boolean"
161
164
  }
162
165
  }
163
166
  }