@atlaskit/editor-plugin-block-controls 7.4.0 → 7.4.2

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 +18 -0
  2. package/dist/cjs/ui/drag-handle.js +2 -2
  3. package/dist/cjs/ui/global-styles.js +22 -13
  4. package/dist/cjs/ui/quick-insert-button.js +2 -2
  5. package/dist/es2019/ui/drag-handle.js +3 -3
  6. package/dist/es2019/ui/global-styles.js +30 -16
  7. package/dist/es2019/ui/quick-insert-button.js +3 -3
  8. package/dist/esm/ui/drag-handle.js +3 -3
  9. package/dist/esm/ui/global-styles.js +22 -13
  10. package/dist/esm/ui/quick-insert-button.js +3 -3
  11. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 7.4.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`c219d22cf0788`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c219d22cf0788) -
8
+ [ux] Card hover link overlay in compact mode
9
+ - Updated dependencies
10
+
11
+ ## 7.4.1
12
+
13
+ ### Patch Changes
14
+
15
+ - [`9ca86d5ced1c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9ca86d5ced1c4) -
16
+ ED-294112 fix extended hover zone for platform_editor_native_anchor_support to match existing
17
+ behaviour; no hover zones for inline elements, headerCells or (when advanced_layouts is off)
18
+ layout columns
19
+ - Updated dependencies
20
+
3
21
  ## 7.4.0
4
22
 
5
23
  ### Minor Changes
package/dist/cjs/ui/drag-handle.js CHANGED
@@ -141,9 +141,9 @@ var dragHandleButtonStyles = (0, _react2.css)({
141
141
  // Standard: 16px -> 24h x 12w, Dense: 13px -> 18h x 9w
142
142
  var dragHandleButtonDenseModeStyles = (0, _react2.css)({
143
143
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
144
- height: "calc(".concat(_consts2.DRAG_HANDLE_HEIGHT, "px * var(--ak-editor-base-font-size) / ").concat(_consts.akEditorFullPageDefaultFontSize, "px)"),
144
+ height: (0, _consts.relativeSizeToBaseFontSize)(_consts2.DRAG_HANDLE_HEIGHT),
145
145
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
146
- width: "calc(".concat(_styles.DRAG_HANDLE_WIDTH, "px * var(--ak-editor-base-font-size) / ").concat(_consts.akEditorFullPageDefaultFontSize, "px)")
146
+ width: (0, _consts.relativeSizeToBaseFontSize)(_styles.DRAG_HANDLE_WIDTH)
147
147
  });
148
148
  var dragHandleButtonSmallScreenStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_consts.akEditorFullPageNarrowBreakout, "px)"), {
149
149
  opacity: 0,
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/cjs/ui/quick-insert-button.js CHANGED
@@ -71,9 +71,9 @@ var stickyButtonStyles = (0, _primitives.xcss)({
71
71
  // Standard: 16px -> 24px x 24px, Dense: 13px -> ~18.5px x ~18.5px
72
72
  var stickyButtonDenseModeStyles = (0, _primitives.xcss)({
73
73
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
74
- height: "calc(".concat(_consts.QUICK_INSERT_HEIGHT, "px * var(--ak-editor-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, "px)"),
74
+ height: (0, _editorSharedStyles.relativeSizeToBaseFontSize)(_consts.QUICK_INSERT_HEIGHT),
75
75
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
76
- width: "calc(".concat(_consts.QUICK_INSERT_WIDTH, "px * var(--ak-editor-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, "px)")
76
+ width: (0, _editorSharedStyles.relativeSizeToBaseFontSize)(_consts.QUICK_INSERT_WIDTH)
77
77
  });
78
78
  var containerStaticStyles = (0, _primitives.xcss)({
79
79
  position: 'absolute',
package/dist/es2019/ui/drag-handle.js CHANGED
@@ -17,7 +17,7 @@ import { tableControlsSpacing, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common
17
17
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
18
18
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
19
19
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
20
- import { akEditorTableToolbarSize, akEditorFullPageNarrowBreakout, akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles/consts';
20
+ import { akEditorTableToolbarSize, akEditorFullPageNarrowBreakout, relativeSizeToBaseFontSize } from '@atlaskit/editor-shared-styles/consts';
21
21
  import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
22
22
  import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
23
23
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -133,9 +133,9 @@ const dragHandleButtonStyles = css({
133
133
  // Standard: 16px -> 24h x 12w, Dense: 13px -> 18h x 9w
134
134
  const dragHandleButtonDenseModeStyles = css({
135
135
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
136
- height: `calc(${DRAG_HANDLE_HEIGHT}px * var(--ak-editor-base-font-size) / ${akEditorFullPageDefaultFontSize}px)`,
136
+ height: relativeSizeToBaseFontSize(DRAG_HANDLE_HEIGHT),
137
137
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
138
- width: `calc(${DRAG_HANDLE_WIDTH}px * var(--ak-editor-base-font-size) / ${akEditorFullPageDefaultFontSize}px)`
138
+ width: relativeSizeToBaseFontSize(DRAG_HANDLE_WIDTH)
139
139
  });
140
140
  const dragHandleButtonSmallScreenStyles = css({
141
141
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
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/es2019/ui/quick-insert-button.js CHANGED
@@ -14,7 +14,7 @@ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
14
14
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
15
15
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
16
16
  import { findParentNode, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
17
- import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
17
+ import { relativeSizeToBaseFontSize } from '@atlaskit/editor-shared-styles';
18
18
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
19
19
  import AddIcon from '@atlaskit/icon/core/add';
20
20
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -62,9 +62,9 @@ const stickyButtonStyles = xcss({
62
62
  // Standard: 16px -> 24px x 24px, Dense: 13px -> ~18.5px x ~18.5px
63
63
  const stickyButtonDenseModeStyles = xcss({
64
64
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
65
- height: `calc(${QUICK_INSERT_HEIGHT}px * var(--ak-editor-base-font-size) / ${akEditorFullPageDefaultFontSize}px)`,
65
+ height: relativeSizeToBaseFontSize(QUICK_INSERT_HEIGHT),
66
66
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
67
- width: `calc(${QUICK_INSERT_WIDTH}px * var(--ak-editor-base-font-size) / ${akEditorFullPageDefaultFontSize}px)`
67
+ width: relativeSizeToBaseFontSize(QUICK_INSERT_WIDTH)
68
68
  });
69
69
  const containerStaticStyles = xcss({
70
70
  position: 'absolute',
package/dist/esm/ui/drag-handle.js CHANGED
@@ -22,7 +22,7 @@ import { tableControlsSpacing, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common
22
22
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
23
23
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
24
24
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
25
- import { akEditorTableToolbarSize, akEditorFullPageNarrowBreakout, akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles/consts';
25
+ import { akEditorTableToolbarSize, akEditorFullPageNarrowBreakout, relativeSizeToBaseFontSize } from '@atlaskit/editor-shared-styles/consts';
26
26
  import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
27
27
  import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
28
28
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -138,9 +138,9 @@ var dragHandleButtonStyles = css({
138
138
  // Standard: 16px -> 24h x 12w, Dense: 13px -> 18h x 9w
139
139
  var dragHandleButtonDenseModeStyles = css({
140
140
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
141
- height: "calc(".concat(DRAG_HANDLE_HEIGHT, "px * var(--ak-editor-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, "px)"),
141
+ height: relativeSizeToBaseFontSize(DRAG_HANDLE_HEIGHT),
142
142
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
143
- width: "calc(".concat(DRAG_HANDLE_WIDTH, "px * var(--ak-editor-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, "px)")
143
+ width: relativeSizeToBaseFontSize(DRAG_HANDLE_WIDTH)
144
144
  });
145
145
  var dragHandleButtonSmallScreenStyles = css(_defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
146
146
  opacity: 0,
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/dist/esm/ui/quick-insert-button.js CHANGED
@@ -18,7 +18,7 @@ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
18
18
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
19
19
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
20
20
  import { findParentNode, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
21
- import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
21
+ import { relativeSizeToBaseFontSize } from '@atlaskit/editor-shared-styles';
22
22
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
23
23
  import AddIcon from '@atlaskit/icon/core/add';
24
24
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -66,9 +66,9 @@ var stickyButtonStyles = xcss({
66
66
  // Standard: 16px -> 24px x 24px, Dense: 13px -> ~18.5px x ~18.5px
67
67
  var stickyButtonDenseModeStyles = xcss({
68
68
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
69
- height: "calc(".concat(QUICK_INSERT_HEIGHT, "px * var(--ak-editor-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, "px)"),
69
+ height: relativeSizeToBaseFontSize(QUICK_INSERT_HEIGHT),
70
70
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
71
- width: "calc(".concat(QUICK_INSERT_WIDTH, "px * var(--ak-editor-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, "px)")
71
+ width: relativeSizeToBaseFontSize(QUICK_INSERT_WIDTH)
72
72
  });
73
73
  var containerStaticStyles = xcss({
74
74
  position: 'absolute',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "7.4.0",
3
+ "version": "7.4.2",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -52,7 +52,7 @@
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.16.0",
55
+ "@atlaskit/tmp-editor-statsig": "^13.18.0",
56
56
  "@atlaskit/tokens": "^7.0.0",
57
57
  "@atlaskit/tooltip": "^20.6.0",
58
58
  "@babel/runtime": "^7.0.0",
@@ -64,7 +64,7 @@
64
64
  "uuid": "^3.1.0"
65
65
  },
66
66
  "peerDependencies": {
67
- "@atlaskit/editor-common": "^110.15.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"