@atlaskit/editor-plugin-block-controls 3.8.10 → 3.9.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 (10) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/ui/drag-handle.js +26 -8
  3. package/dist/cjs/ui/quick-insert-button.js +32 -11
  4. package/dist/es2019/ui/drag-handle.js +26 -8
  5. package/dist/es2019/ui/quick-insert-button.js +35 -10
  6. package/dist/esm/ui/drag-handle.js +26 -8
  7. package/dist/esm/ui/quick-insert-button.js +35 -10
  8. package/dist/types/ui/quick-insert-button.d.ts +7 -3
  9. package/dist/types-ts4.5/ui/quick-insert-button.d.ts +7 -3
  10. package/package.json +2 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 3.9.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#139810](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139810)
8
+ [`571a576ee18ef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/571a576ee18ef) -
9
+ Adjust controls to line up with sticky headers
10
+ - Updated dependencies
11
+
12
+ ## 3.9.0
13
+
14
+ ### Minor Changes
15
+
16
+ - [#134613](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134613)
17
+ [`be20cc186939b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be20cc186939b) -
18
+ ED-26247 Remove feature flag platform_media_extended_resize_experience and replace it with a new
19
+ media prop which defaults to false allowPixelResizing
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies
24
+
3
25
  ## 3.8.10
4
26
 
5
27
  ### Patch Changes
package/dist/cjs/ui/drag-handle.js CHANGED
@@ -16,6 +16,7 @@ var _browser = require("@atlaskit/editor-common/browser");
16
16
  var _hooks = require("@atlaskit/editor-common/hooks");
17
17
  var _keymaps = require("@atlaskit/editor-common/keymaps");
18
18
  var _messages = require("@atlaskit/editor-common/messages");
19
+ var _styles = require("@atlaskit/editor-common/styles");
19
20
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
20
21
  var _state = require("@atlaskit/editor-prosemirror/state");
21
22
  var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -90,7 +91,10 @@ var dragHandleButtonStyles = (0, _react2.css)({
90
91
  });
91
92
  var dragHandleButtonStylesOld = (0, _react2.css)({
92
93
  position: 'absolute',
93
- padding: "var(--ds-space-025, 2px)".concat(" 0"),
94
+ paddingTop: "var(--ds-space-025, 2px)",
95
+ paddingBottom: "var(--ds-space-025, 2px)",
96
+ paddingLeft: '0',
97
+ paddingRight: '0',
94
98
  boxSizing: 'border-box',
95
99
  display: 'flex',
96
100
  flexDirection: 'column',
@@ -131,12 +135,28 @@ var dragHandleContainerStyles = (0, _primitives.xcss)({
131
135
  position: 'absolute',
132
136
  boxSizing: 'border-box'
133
137
  });
134
- var tooltipContainerStyles = (0, _primitives.xcss)({
138
+ var tooltipContainerStyles = (0, _react2.css)({
135
139
  top: '8px',
136
140
  bottom: '-8px',
137
141
  position: 'sticky',
138
142
  zIndex: 'card'
139
143
  });
144
+ var tooltipContainerStylesStickyHeader = (0, _react2.css)({
145
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
146
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
147
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
148
+ top: _styles.tableControlsSpacing
149
+ }
150
+ });
151
+
152
+ // We need this to work around adjacent breakout marks wrapping the controls widget decorations
153
+ var tooltipContainerStylesStickyHeaderWithMarksFix = (0, _react2.css)({
154
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
155
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
156
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
157
+ top: _styles.tableControlsSpacing
158
+ }
159
+ });
140
160
  var dragHandleMultiLineSelectionFixFirefox = (0, _react2.css)({
141
161
  '&::selection': {
142
162
  backgroundColor: 'transparent'
@@ -731,9 +751,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
731
751
  xcss: [dragHandleContainerStyles],
732
752
  as: "span",
733
753
  testId: "block-ctrl-drag-handle-container"
734
- }, (0, _react2.jsx)(_primitives.Box, {
735
- xcss: [tooltipContainerStyles],
736
- as: "span"
754
+ }, (0, _react2.jsx)("span", {
755
+ css: [tooltipContainerStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
737
756
  }, (0, _react2.jsx)(_tooltip.default, {
738
757
  content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
739
758
  helpDescriptors: helpDescriptors
@@ -756,9 +775,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
756
775
  xcss: [dragHandleContainerStyles],
757
776
  as: "span",
758
777
  testId: "block-ctrl-drag-handle-container"
759
- }, (0, _react2.jsx)(_primitives.Box, {
760
- xcss: [tooltipContainerStyles],
761
- as: "span"
778
+ }, (0, _react2.jsx)("span", {
779
+ css: [tooltipContainerStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
762
780
  }, renderButton()));
763
781
  };
764
782
  var buttonWithTooltip = function buttonWithTooltip() {
package/dist/cjs/ui/quick-insert-button.js CHANGED
@@ -9,9 +9,11 @@ exports.TypeAheadControl = exports.QuickInsertWithVisibility = void 0;
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
+ var _react2 = require("@emotion/react");
12
13
  var _bindEventListener = require("bind-event-listener");
13
14
  var _keymaps = require("@atlaskit/editor-common/keymaps");
14
15
  var _messages = require("@atlaskit/editor-common/messages");
16
+ var _styles = require("@atlaskit/editor-common/styles");
15
17
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
16
18
  var _state = require("@atlaskit/editor-prosemirror/state");
17
19
  var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -30,7 +32,10 @@ var _visibilityContainer = require("./visibility-container");
30
32
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
31
33
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
32
34
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
33
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
35
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
36
+ * @jsxRuntime classic
37
+ * @jsx jsx
38
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
34
39
  var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
35
40
  var buttonStyles = (0, _primitives.xcss)({
36
41
  boxSizing: 'border-box',
@@ -96,12 +101,28 @@ var containerStaticStyles = (0, _primitives.xcss)({
96
101
  var disabledContainerStyles = (0, _primitives.xcss)({
97
102
  cursor: 'not-allowed'
98
103
  });
99
- var tooltipContainerStyles = (0, _primitives.xcss)({
104
+ var tooltipContainerStyles = (0, _react2.css)({
100
105
  top: '8px',
101
106
  bottom: '-8px',
102
107
  position: 'sticky',
103
108
  zIndex: 'card'
104
109
  });
110
+ var tooltipContainerStylesStickyHeader = (0, _react2.css)({
111
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
112
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
113
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
114
+ top: _styles.tableControlsSpacing
115
+ }
116
+ });
117
+
118
+ // We need this to work around adjacent breakout marks wrapping the controls widget decorations
119
+ var tooltipContainerStylesStickyHeaderWithMarksFix = (0, _react2.css)({
120
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
121
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
122
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
123
+ top: _styles.tableControlsSpacing
124
+ }
125
+ });
105
126
 
106
127
  // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
107
128
 
@@ -279,12 +300,12 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
279
300
  }
280
301
  }, [api, view.state]);
281
302
  var tooltipPressable = function tooltipPressable() {
282
- return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
303
+ return (0, _react2.jsx)(_tooltip.default, {
283
304
  position: "top",
284
- content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
305
+ content: (0, _react2.jsx)(_keymaps.ToolTipContent, {
285
306
  description: formatMessage(_messages.blockControlsMessages.insert)
286
307
  })
287
- }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
308
+ }, (0, _react2.jsx)(_primitives.Pressable, {
288
309
  testId: "editor-quick-insert-button",
289
310
  type: "button",
290
311
  "aria-label": formatMessage(_messages.blockControlsMessages.insert),
@@ -292,18 +313,18 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
292
313
  onClick: handleQuickInsert,
293
314
  onMouseDown: handleMouseDown,
294
315
  isDisabled: !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && isTypeAheadOpen
295
- }, /*#__PURE__*/_react.default.createElement(_add.default, {
316
+ }, (0, _react2.jsx)(_add.default, {
296
317
  label: "add",
297
318
  color: isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
298
319
  })));
299
320
  };
300
- return /*#__PURE__*/_react.default.createElement(_primitives.Box
321
+ return (0, _react2.jsx)(_primitives.Box
301
322
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
302
323
  , {
303
324
  style: positionStyles,
304
325
  xcss: [containerStaticStyles, isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && disabledContainerStyles]
305
- }, (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
306
- xcss: [tooltipContainerStyles]
326
+ }, (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _react2.jsx)("span", {
327
+ css: [tooltipContainerStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
307
328
  }, tooltipPressable()) : tooltipPressable());
308
329
  };
309
330
  var QuickInsertWithVisibility = exports.QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref5) {
@@ -316,9 +337,9 @@ var QuickInsertWithVisibility = exports.QuickInsertWithVisibility = function Qui
316
337
  rootAnchorName = _ref5.rootAnchorName,
317
338
  rootNodeType = _ref5.rootNodeType,
318
339
  anchorRectCache = _ref5.anchorRectCache;
319
- return /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
340
+ return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
320
341
  api: api
321
- }, /*#__PURE__*/_react.default.createElement(TypeAheadControl, {
342
+ }, (0, _react2.jsx)(TypeAheadControl, {
322
343
  view: view,
323
344
  api: api,
324
345
  formatMessage: formatMessage,
package/dist/es2019/ui/drag-handle.js CHANGED
@@ -13,6 +13,7 @@ import { browser } from '@atlaskit/editor-common/browser';
13
13
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
14
14
  import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
15
15
  import { blockControlsMessages } from '@atlaskit/editor-common/messages';
16
+ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
16
17
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
17
18
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
18
19
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
@@ -82,7 +83,10 @@ const dragHandleButtonStyles = css({
82
83
  });
83
84
  const dragHandleButtonStylesOld = css({
84
85
  position: 'absolute',
85
- padding: `${"var(--ds-space-025, 2px)"} 0`,
86
+ paddingTop: `${"var(--ds-space-025, 2px)"}`,
87
+ paddingBottom: `${"var(--ds-space-025, 2px)"}`,
88
+ paddingLeft: '0',
89
+ paddingRight: '0',
86
90
  boxSizing: 'border-box',
87
91
  display: 'flex',
88
92
  flexDirection: 'column',
@@ -123,12 +127,28 @@ const dragHandleContainerStyles = xcss({
123
127
  position: 'absolute',
124
128
  boxSizing: 'border-box'
125
129
  });
126
- const tooltipContainerStyles = xcss({
130
+ const tooltipContainerStyles = css({
127
131
  top: '8px',
128
132
  bottom: '-8px',
129
133
  position: 'sticky',
130
134
  zIndex: 'card'
131
135
  });
136
+ const tooltipContainerStylesStickyHeader = css({
137
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
138
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
139
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
140
+ top: tableControlsSpacing
141
+ }
142
+ });
143
+
144
+ // We need this to work around adjacent breakout marks wrapping the controls widget decorations
145
+ const tooltipContainerStylesStickyHeaderWithMarksFix = css({
146
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
147
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
148
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
149
+ top: tableControlsSpacing
150
+ }
151
+ });
132
152
  const dragHandleMultiLineSelectionFixFirefox = css({
133
153
  '&::selection': {
134
154
  backgroundColor: 'transparent'
@@ -715,9 +735,8 @@ export const DragHandle = ({
715
735
  xcss: [dragHandleContainerStyles],
716
736
  as: "span",
717
737
  testId: "block-ctrl-drag-handle-container"
718
- }, jsx(Box, {
719
- xcss: [tooltipContainerStyles],
720
- as: "span"
738
+ }, jsx("span", {
739
+ css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
721
740
  }, jsx(Tooltip, {
722
741
  content: jsx(TooltipContentWithMultipleShortcuts, {
723
742
  helpDescriptors: helpDescriptors
@@ -738,9 +757,8 @@ export const DragHandle = ({
738
757
  xcss: [dragHandleContainerStyles],
739
758
  as: "span",
740
759
  testId: "block-ctrl-drag-handle-container"
741
- }, jsx(Box, {
742
- xcss: [tooltipContainerStyles],
743
- as: "span"
760
+ }, jsx("span", {
761
+ css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
744
762
  }, renderButton()));
745
763
  const buttonWithTooltip = () => jsx(Tooltip, {
746
764
  content: jsx(TooltipContentWithMultipleShortcuts, {
package/dist/es2019/ui/quick-insert-button.js CHANGED
@@ -1,7 +1,16 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+
1
6
  import React, { useCallback, useEffect, useState } from 'react';
7
+
8
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
+ import { css, jsx } from '@emotion/react';
2
10
  import { bind } from 'bind-event-listener';
3
11
  import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
4
12
  import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
13
+ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
5
14
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
6
15
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
7
16
  import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
@@ -82,12 +91,28 @@ const containerStaticStyles = xcss({
82
91
  const disabledContainerStyles = xcss({
83
92
  cursor: 'not-allowed'
84
93
  });
85
- const tooltipContainerStyles = xcss({
94
+ const tooltipContainerStyles = css({
86
95
  top: '8px',
87
96
  bottom: '-8px',
88
97
  position: 'sticky',
89
98
  zIndex: 'card'
90
99
  });
100
+ const tooltipContainerStylesStickyHeader = css({
101
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
102
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
103
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
104
+ top: tableControlsSpacing
105
+ }
106
+ });
107
+
108
+ // We need this to work around adjacent breakout marks wrapping the controls widget decorations
109
+ const tooltipContainerStylesStickyHeaderWithMarksFix = css({
110
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
111
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
112
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
113
+ top: tableControlsSpacing
114
+ }
115
+ });
91
116
 
92
117
  // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
93
118
 
@@ -265,12 +290,12 @@ export const TypeAheadControl = ({
265
290
  });
266
291
  }
267
292
  }, [api, view.state]);
268
- const tooltipPressable = () => /*#__PURE__*/React.createElement(Tooltip, {
293
+ const tooltipPressable = () => jsx(Tooltip, {
269
294
  position: "top",
270
- content: /*#__PURE__*/React.createElement(ToolTipContent, {
295
+ content: jsx(ToolTipContent, {
271
296
  description: formatMessage(messages.insert)
272
297
  })
273
- }, /*#__PURE__*/React.createElement(Pressable, {
298
+ }, jsx(Pressable, {
274
299
  testId: "editor-quick-insert-button",
275
300
  type: "button",
276
301
  "aria-label": formatMessage(messages.insert),
@@ -278,17 +303,17 @@ export const TypeAheadControl = ({
278
303
  onClick: handleQuickInsert,
279
304
  onMouseDown: handleMouseDown,
280
305
  isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen
281
- }, /*#__PURE__*/React.createElement(AddIcon, {
306
+ }, jsx(AddIcon, {
282
307
  label: "add",
283
308
  color: isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
284
309
  })));
285
- return /*#__PURE__*/React.createElement(Box
310
+ return jsx(Box
286
311
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
287
312
  , {
288
313
  style: positionStyles,
289
314
  xcss: [containerStaticStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && disabledContainerStyles]
290
- }, fg('platform_editor_controls_sticky_controls') ? /*#__PURE__*/React.createElement(Box, {
291
- xcss: [tooltipContainerStyles]
315
+ }, fg('platform_editor_controls_sticky_controls') ? jsx("span", {
316
+ css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
292
317
  }, tooltipPressable()) : tooltipPressable());
293
318
  };
294
319
  export const QuickInsertWithVisibility = ({
@@ -302,9 +327,9 @@ export const QuickInsertWithVisibility = ({
302
327
  rootNodeType,
303
328
  anchorRectCache
304
329
  }) => {
305
- return /*#__PURE__*/React.createElement(VisibilityContainer, {
330
+ return jsx(VisibilityContainer, {
306
331
  api: api
307
- }, /*#__PURE__*/React.createElement(TypeAheadControl, {
332
+ }, jsx(TypeAheadControl, {
308
333
  view: view,
309
334
  api: api,
310
335
  formatMessage: formatMessage,
package/dist/esm/ui/drag-handle.js CHANGED
@@ -18,6 +18,7 @@ import { browser } from '@atlaskit/editor-common/browser';
18
18
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
19
19
  import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
20
20
  import { blockControlsMessages } from '@atlaskit/editor-common/messages';
21
+ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
21
22
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
22
23
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
23
24
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
@@ -87,7 +88,10 @@ var dragHandleButtonStyles = css({
87
88
  });
88
89
  var dragHandleButtonStylesOld = css({
89
90
  position: 'absolute',
90
- padding: "var(--ds-space-025, 2px)".concat(" 0"),
91
+ paddingTop: "var(--ds-space-025, 2px)",
92
+ paddingBottom: "var(--ds-space-025, 2px)",
93
+ paddingLeft: '0',
94
+ paddingRight: '0',
91
95
  boxSizing: 'border-box',
92
96
  display: 'flex',
93
97
  flexDirection: 'column',
@@ -128,12 +132,28 @@ var dragHandleContainerStyles = xcss({
128
132
  position: 'absolute',
129
133
  boxSizing: 'border-box'
130
134
  });
131
- var tooltipContainerStyles = xcss({
135
+ var tooltipContainerStyles = css({
132
136
  top: '8px',
133
137
  bottom: '-8px',
134
138
  position: 'sticky',
135
139
  zIndex: 'card'
136
140
  });
141
+ var tooltipContainerStylesStickyHeader = css({
142
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
143
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
144
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
145
+ top: tableControlsSpacing
146
+ }
147
+ });
148
+
149
+ // We need this to work around adjacent breakout marks wrapping the controls widget decorations
150
+ var tooltipContainerStylesStickyHeaderWithMarksFix = css({
151
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
152
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
153
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
154
+ top: tableControlsSpacing
155
+ }
156
+ });
137
157
  var dragHandleMultiLineSelectionFixFirefox = css({
138
158
  '&::selection': {
139
159
  backgroundColor: 'transparent'
@@ -728,9 +748,8 @@ export var DragHandle = function DragHandle(_ref) {
728
748
  xcss: [dragHandleContainerStyles],
729
749
  as: "span",
730
750
  testId: "block-ctrl-drag-handle-container"
731
- }, jsx(Box, {
732
- xcss: [tooltipContainerStyles],
733
- as: "span"
751
+ }, jsx("span", {
752
+ css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
734
753
  }, jsx(Tooltip, {
735
754
  content: jsx(TooltipContentWithMultipleShortcuts, {
736
755
  helpDescriptors: helpDescriptors
@@ -753,9 +772,8 @@ export var DragHandle = function DragHandle(_ref) {
753
772
  xcss: [dragHandleContainerStyles],
754
773
  as: "span",
755
774
  testId: "block-ctrl-drag-handle-container"
756
- }, jsx(Box, {
757
- xcss: [tooltipContainerStyles],
758
- as: "span"
775
+ }, jsx("span", {
776
+ css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
759
777
  }, renderButton()));
760
778
  };
761
779
  var buttonWithTooltip = function buttonWithTooltip() {
package/dist/esm/ui/quick-insert-button.js CHANGED
@@ -2,10 +2,19 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
4
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
+ /**
6
+ * @jsxRuntime classic
7
+ * @jsx jsx
8
+ */
9
+
5
10
  import React, { useCallback, useEffect, useState } from 'react';
11
+
12
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
13
+ import { css, jsx } from '@emotion/react';
6
14
  import { bind } from 'bind-event-listener';
7
15
  import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
8
16
  import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
17
+ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
9
18
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
10
19
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
11
20
  import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
@@ -86,12 +95,28 @@ var containerStaticStyles = xcss({
86
95
  var disabledContainerStyles = xcss({
87
96
  cursor: 'not-allowed'
88
97
  });
89
- var tooltipContainerStyles = xcss({
98
+ var tooltipContainerStyles = css({
90
99
  top: '8px',
91
100
  bottom: '-8px',
92
101
  position: 'sticky',
93
102
  zIndex: 'card'
94
103
  });
104
+ var tooltipContainerStylesStickyHeader = css({
105
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
106
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
107
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
108
+ top: tableControlsSpacing
109
+ }
110
+ });
111
+
112
+ // We need this to work around adjacent breakout marks wrapping the controls widget decorations
113
+ var tooltipContainerStylesStickyHeaderWithMarksFix = css({
114
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
115
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
116
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
117
+ top: tableControlsSpacing
118
+ }
119
+ });
95
120
 
96
121
  // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
97
122
 
@@ -269,12 +294,12 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
269
294
  }
270
295
  }, [api, view.state]);
271
296
  var tooltipPressable = function tooltipPressable() {
272
- return /*#__PURE__*/React.createElement(Tooltip, {
297
+ return jsx(Tooltip, {
273
298
  position: "top",
274
- content: /*#__PURE__*/React.createElement(ToolTipContent, {
299
+ content: jsx(ToolTipContent, {
275
300
  description: formatMessage(messages.insert)
276
301
  })
277
- }, /*#__PURE__*/React.createElement(Pressable, {
302
+ }, jsx(Pressable, {
278
303
  testId: "editor-quick-insert-button",
279
304
  type: "button",
280
305
  "aria-label": formatMessage(messages.insert),
@@ -282,18 +307,18 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
282
307
  onClick: handleQuickInsert,
283
308
  onMouseDown: handleMouseDown,
284
309
  isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen
285
- }, /*#__PURE__*/React.createElement(AddIcon, {
310
+ }, jsx(AddIcon, {
286
311
  label: "add",
287
312
  color: isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
288
313
  })));
289
314
  };
290
- return /*#__PURE__*/React.createElement(Box
315
+ return jsx(Box
291
316
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
292
317
  , {
293
318
  style: positionStyles,
294
319
  xcss: [containerStaticStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && disabledContainerStyles]
295
- }, fg('platform_editor_controls_sticky_controls') ? /*#__PURE__*/React.createElement(Box, {
296
- xcss: [tooltipContainerStyles]
320
+ }, fg('platform_editor_controls_sticky_controls') ? jsx("span", {
321
+ css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
297
322
  }, tooltipPressable()) : tooltipPressable());
298
323
  };
299
324
  export var QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref5) {
@@ -306,9 +331,9 @@ export var QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref5)
306
331
  rootAnchorName = _ref5.rootAnchorName,
307
332
  rootNodeType = _ref5.rootNodeType,
308
333
  anchorRectCache = _ref5.anchorRectCache;
309
- return /*#__PURE__*/React.createElement(VisibilityContainer, {
334
+ return jsx(VisibilityContainer, {
310
335
  api: api
311
- }, /*#__PURE__*/React.createElement(TypeAheadControl, {
336
+ }, jsx(TypeAheadControl, {
312
337
  view: view,
313
338
  api: api,
314
339
  formatMessage: formatMessage,
package/dist/types/ui/quick-insert-button.d.ts CHANGED
@@ -1,4 +1,8 @@
1
- import React from 'react';
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { jsx } from '@emotion/react';
2
6
  import { type IntlShape } from 'react-intl-next';
3
7
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
4
8
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -15,6 +19,6 @@ type Props = {
15
19
  rootNodeType: string;
16
20
  anchorRectCache?: AnchorRectCache;
17
21
  };
18
- export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
19
- export declare const QuickInsertWithVisibility: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
22
+ export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => jsx.JSX.Element;
23
+ export declare const QuickInsertWithVisibility: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => jsx.JSX.Element;
20
24
  export {};
package/dist/types-ts4.5/ui/quick-insert-button.d.ts CHANGED
@@ -1,4 +1,8 @@
1
- import React from 'react';
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { jsx } from '@emotion/react';
2
6
  import { type IntlShape } from 'react-intl-next';
3
7
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
4
8
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -15,6 +19,6 @@ type Props = {
15
19
  rootNodeType: string;
16
20
  anchorRectCache?: AnchorRectCache;
17
21
  };
18
- export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
19
- export declare const QuickInsertWithVisibility: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
22
+ export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => jsx.JSX.Element;
23
+ export declare const QuickInsertWithVisibility: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => jsx.JSX.Element;
20
24
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "3.8.10",
3
+ "version": "3.9.1",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@atlaskit/adf-schema": "^47.6.0",
36
- "@atlaskit/editor-common": "^103.5.0",
36
+ "@atlaskit/editor-common": "^103.6.0",
37
37
  "@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
39
39
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -107,10 +107,6 @@
107
107
  }
108
108
  },
109
109
  "platform-feature-flags": {
110
- "platform_editor_media_extended_resize_experience": {
111
- "type": "boolean",
112
- "referenceOnly": true
113
- },
114
110
  "platform_editor_element_drag_and_drop_ed_23873": {
115
111
  "type": "boolean"
116
112
  },