@atlaskit/editor-plugin-block-controls 6.3.1 → 6.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/ui/drag-handle.js +4 -4
- package/dist/cjs/ui/drop-target-layout.js +1 -1
- package/dist/cjs/ui/global-styles.js +4 -2
- package/dist/cjs/ui/inline-drop-target.js +1 -1
- package/dist/cjs/ui/quick-insert-button.js +1 -1
- package/dist/cjs/ui/visibility-container.js +4 -2
- package/dist/es2019/ui/drag-handle.js +4 -4
- package/dist/es2019/ui/drop-target-layout.js +1 -1
- package/dist/es2019/ui/global-styles.js +4 -2
- package/dist/es2019/ui/inline-drop-target.js +1 -1
- package/dist/es2019/ui/quick-insert-button.js +1 -1
- package/dist/es2019/ui/visibility-container.js +4 -2
- package/dist/esm/ui/drag-handle.js +4 -4
- package/dist/esm/ui/drop-target-layout.js +1 -1
- package/dist/esm/ui/global-styles.js +4 -2
- package/dist/esm/ui/inline-drop-target.js +1 -1
- package/dist/esm/ui/quick-insert-button.js +1 -1
- package/dist/esm/ui/visibility-container.js +4 -2
- package/package.json +4 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 6.3.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`6b6eca9cee16d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6b6eca9cee16d) -
|
|
8
|
+
Switch to use editorExperiment to use productKey for responsive preview panel changes.
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 6.3.2
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`6fb79942fc3a5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6fb79942fc3a5) -
|
|
16
|
+
Internal changes to how borders are applied.
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 6.3.1
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -128,7 +128,7 @@ var dragHandleButtonStyles = (0, _react2.css)({
|
|
|
128
128
|
backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
|
|
129
129
|
},
|
|
130
130
|
'&:focus': {
|
|
131
|
-
outline: "2px
|
|
131
|
+
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
|
|
132
132
|
},
|
|
133
133
|
'&:disabled': {
|
|
134
134
|
color: "var(--ds-icon-disabled, #8993A4)",
|
|
@@ -174,7 +174,7 @@ var dragHandleButtonStylesOld = (0, _react2.css)({
|
|
|
174
174
|
backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
|
|
175
175
|
},
|
|
176
176
|
'&:focus': {
|
|
177
|
-
outline: "2px
|
|
177
|
+
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
|
|
178
178
|
},
|
|
179
179
|
'&:disabled': {
|
|
180
180
|
color: "var(--ds-icon-disabled, #8993A4)",
|
|
@@ -238,7 +238,7 @@ var selectedStyles = (0, _react2.css)({
|
|
|
238
238
|
// icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
|
|
239
239
|
// with pragmatic DnD and pragmatic DnD is not triggered
|
|
240
240
|
var handleIconDragStart = function handleIconDragStart(e) {
|
|
241
|
-
if (!_browser.browser.chrome
|
|
241
|
+
if (!_browser.browser.chrome) {
|
|
242
242
|
return;
|
|
243
243
|
}
|
|
244
244
|
// prevent dragStart handler triggered by icon
|
|
@@ -881,7 +881,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
881
881
|
css: [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
|
|
882
882
|
// ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
|
|
883
883
|
// See https://product-fabric.atlassian.net/browse/ED-26266
|
|
884
|
-
_browser.browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0,
|
|
884
|
+
_browser.browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
|
|
885
885
|
ref: buttonRef
|
|
886
886
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
887
887
|
,
|
|
@@ -40,7 +40,7 @@ var dropTargetLayoutStyle = (0, _react2.css)({
|
|
|
40
40
|
var dropTargetLayoutHintStyle = (0, _react2.css)({
|
|
41
41
|
height: '100%',
|
|
42
42
|
position: 'relative',
|
|
43
|
-
borderRight: "1px
|
|
43
|
+
borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, ".concat(_colors.B200, ")")),
|
|
44
44
|
width: 0
|
|
45
45
|
});
|
|
46
46
|
var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(props) {
|
|
@@ -268,7 +268,7 @@ var quickInsertStyles = function quickInsertStyles() {
|
|
|
268
268
|
},
|
|
269
269
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
270
270
|
'.blocks-quick-insert-button:focus': {
|
|
271
|
-
outline: "2px
|
|
271
|
+
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
|
|
272
272
|
},
|
|
273
273
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
274
274
|
'.blocks-quick-insert-visible-container': {
|
|
@@ -404,6 +404,8 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
|
|
|
404
404
|
disabled: !(0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
|
|
405
405
|
});
|
|
406
406
|
return (0, _react.jsx)(_react.Global, {
|
|
407
|
-
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,
|
|
407
|
+
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, {
|
|
408
|
+
exposure: true
|
|
409
|
+
}) ? (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]
|
|
408
410
|
});
|
|
409
411
|
};
|
|
@@ -59,7 +59,7 @@ var GAP = 4;
|
|
|
59
59
|
var dropTargetLayoutHintStyle = (0, _react2.css)({
|
|
60
60
|
height: '100%',
|
|
61
61
|
position: 'absolute',
|
|
62
|
-
borderRight: "1px
|
|
62
|
+
borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, ".concat(_colors.B200, ")")),
|
|
63
63
|
width: 0,
|
|
64
64
|
left: 0
|
|
65
65
|
});
|
|
@@ -59,7 +59,7 @@ var stickyButtonStyles = (0, _primitives.xcss)({
|
|
|
59
59
|
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
60
60
|
},
|
|
61
61
|
':focus': {
|
|
62
|
-
outline: "2px
|
|
62
|
+
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
|
|
63
63
|
}
|
|
64
64
|
});
|
|
65
65
|
var containerStaticStyles = (0, _primitives.xcss)({
|
|
@@ -11,7 +11,7 @@ var _react2 = require("@emotion/react");
|
|
|
11
11
|
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
12
12
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
13
13
|
var _primitives = require("@atlaskit/primitives");
|
|
14
|
-
var
|
|
14
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
15
15
|
/**
|
|
16
16
|
* @jsxRuntime classic
|
|
17
17
|
* @jsx jsx
|
|
@@ -53,7 +53,9 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
|
|
|
53
53
|
var isEditing = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isEditing');
|
|
54
54
|
var isMouseOut = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isMouseOut');
|
|
55
55
|
var shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
|
|
56
|
-
if ((0,
|
|
56
|
+
if ((0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
|
|
57
|
+
exposure: true
|
|
58
|
+
})) {
|
|
57
59
|
return (0, _react2.jsx)("div", {
|
|
58
60
|
css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
|
|
59
61
|
}, children);
|
|
@@ -120,7 +120,7 @@ const dragHandleButtonStyles = css({
|
|
|
120
120
|
backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
|
|
121
121
|
},
|
|
122
122
|
'&:focus': {
|
|
123
|
-
outline:
|
|
123
|
+
outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
|
|
124
124
|
},
|
|
125
125
|
'&:disabled': {
|
|
126
126
|
color: "var(--ds-icon-disabled, #8993A4)",
|
|
@@ -169,7 +169,7 @@ const dragHandleButtonStylesOld = css({
|
|
|
169
169
|
backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
|
|
170
170
|
},
|
|
171
171
|
'&:focus': {
|
|
172
|
-
outline:
|
|
172
|
+
outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
|
|
173
173
|
},
|
|
174
174
|
'&:disabled': {
|
|
175
175
|
color: "var(--ds-icon-disabled, #8993A4)",
|
|
@@ -233,7 +233,7 @@ const selectedStyles = css({
|
|
|
233
233
|
// icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
|
|
234
234
|
// with pragmatic DnD and pragmatic DnD is not triggered
|
|
235
235
|
const handleIconDragStart = e => {
|
|
236
|
-
if (!browser.chrome
|
|
236
|
+
if (!browser.chrome) {
|
|
237
237
|
return;
|
|
238
238
|
}
|
|
239
239
|
// prevent dragStart handler triggered by icon
|
|
@@ -870,7 +870,7 @@ export const DragHandle = ({
|
|
|
870
870
|
css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
|
|
871
871
|
// ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
|
|
872
872
|
// See https://product-fabric.atlassian.net/browse/ED-26266
|
|
873
|
-
browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles,
|
|
873
|
+
browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
|
|
874
874
|
ref: buttonRef
|
|
875
875
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
876
876
|
,
|
|
@@ -31,7 +31,7 @@ const dropTargetLayoutStyle = css({
|
|
|
31
31
|
const dropTargetLayoutHintStyle = css({
|
|
32
32
|
height: '100%',
|
|
33
33
|
position: 'relative',
|
|
34
|
-
borderRight:
|
|
34
|
+
borderRight: `${"var(--ds-border-width, 1px)"} dashed ${`var(--ds-border-focused, ${B200})`}`,
|
|
35
35
|
width: 0
|
|
36
36
|
});
|
|
37
37
|
export const DropTargetLayout = props => {
|
|
@@ -314,7 +314,7 @@ const quickInsertStyles = () => css({
|
|
|
314
314
|
},
|
|
315
315
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
316
316
|
'.blocks-quick-insert-button:focus': {
|
|
317
|
-
outline:
|
|
317
|
+
outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
|
|
318
318
|
},
|
|
319
319
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
320
320
|
'.blocks-quick-insert-visible-container': {
|
|
@@ -475,6 +475,8 @@ export const GlobalStylesWrapper = ({
|
|
|
475
475
|
disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
|
|
476
476
|
});
|
|
477
477
|
return jsx(Global, {
|
|
478
|
-
styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone),
|
|
478
|
+
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
|
+
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]
|
|
479
481
|
});
|
|
480
482
|
};
|
|
@@ -49,7 +49,7 @@ const GAP = 4;
|
|
|
49
49
|
const dropTargetLayoutHintStyle = css({
|
|
50
50
|
height: '100%',
|
|
51
51
|
position: 'absolute',
|
|
52
|
-
borderRight:
|
|
52
|
+
borderRight: `${"var(--ds-border-width, 1px)"} dashed ${`var(--ds-border-focused, ${B200})`}`,
|
|
53
53
|
width: 0,
|
|
54
54
|
left: 0
|
|
55
55
|
});
|
|
@@ -50,7 +50,7 @@ const stickyButtonStyles = xcss({
|
|
|
50
50
|
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
51
51
|
},
|
|
52
52
|
':focus': {
|
|
53
|
-
outline:
|
|
53
|
+
outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
|
|
54
54
|
}
|
|
55
55
|
});
|
|
56
56
|
const containerStaticStyles = xcss({
|
|
@@ -10,7 +10,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
|
|
|
10
10
|
import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
|
|
11
11
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
12
12
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
13
|
-
import {
|
|
13
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
14
14
|
const baseStyles = xcss({
|
|
15
15
|
transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
|
|
16
16
|
});
|
|
@@ -46,7 +46,9 @@ export const VisibilityContainer = ({
|
|
|
46
46
|
const isEditing = useSharedPluginStateSelector(api, 'blockControls.isEditing');
|
|
47
47
|
const isMouseOut = useSharedPluginStateSelector(api, 'blockControls.isMouseOut');
|
|
48
48
|
const shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
|
|
49
|
-
if (
|
|
49
|
+
if (editorExperiment('platform_editor_preview_panel_responsiveness', true, {
|
|
50
|
+
exposure: true
|
|
51
|
+
})) {
|
|
50
52
|
return jsx("div", {
|
|
51
53
|
css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
|
|
52
54
|
}, children);
|
|
@@ -125,7 +125,7 @@ var dragHandleButtonStyles = css({
|
|
|
125
125
|
backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
|
|
126
126
|
},
|
|
127
127
|
'&:focus': {
|
|
128
|
-
outline: "2px
|
|
128
|
+
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
|
|
129
129
|
},
|
|
130
130
|
'&:disabled': {
|
|
131
131
|
color: "var(--ds-icon-disabled, #8993A4)",
|
|
@@ -171,7 +171,7 @@ var dragHandleButtonStylesOld = css({
|
|
|
171
171
|
backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
|
|
172
172
|
},
|
|
173
173
|
'&:focus': {
|
|
174
|
-
outline: "2px
|
|
174
|
+
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
|
|
175
175
|
},
|
|
176
176
|
'&:disabled': {
|
|
177
177
|
color: "var(--ds-icon-disabled, #8993A4)",
|
|
@@ -235,7 +235,7 @@ var selectedStyles = css({
|
|
|
235
235
|
// icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
|
|
236
236
|
// with pragmatic DnD and pragmatic DnD is not triggered
|
|
237
237
|
var handleIconDragStart = function handleIconDragStart(e) {
|
|
238
|
-
if (!browser.chrome
|
|
238
|
+
if (!browser.chrome) {
|
|
239
239
|
return;
|
|
240
240
|
}
|
|
241
241
|
// prevent dragStart handler triggered by icon
|
|
@@ -878,7 +878,7 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
878
878
|
css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
|
|
879
879
|
// ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
|
|
880
880
|
// See https://product-fabric.atlassian.net/browse/ED-26266
|
|
881
|
-
browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles,
|
|
881
|
+
browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
|
|
882
882
|
ref: buttonRef
|
|
883
883
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
884
884
|
,
|
|
@@ -33,7 +33,7 @@ var dropTargetLayoutStyle = css({
|
|
|
33
33
|
var dropTargetLayoutHintStyle = css({
|
|
34
34
|
height: '100%',
|
|
35
35
|
position: 'relative',
|
|
36
|
-
borderRight: "1px
|
|
36
|
+
borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, ".concat(B200, ")")),
|
|
37
37
|
width: 0
|
|
38
38
|
});
|
|
39
39
|
export var DropTargetLayout = function DropTargetLayout(props) {
|
|
@@ -261,7 +261,7 @@ var quickInsertStyles = function quickInsertStyles() {
|
|
|
261
261
|
},
|
|
262
262
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
263
263
|
'.blocks-quick-insert-button:focus': {
|
|
264
|
-
outline: "2px
|
|
264
|
+
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
|
|
265
265
|
},
|
|
266
266
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
267
267
|
'.blocks-quick-insert-visible-container': {
|
|
@@ -397,6 +397,8 @@ export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
|
|
|
397
397
|
disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
|
|
398
398
|
});
|
|
399
399
|
return jsx(Global, {
|
|
400
|
-
styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone),
|
|
400
|
+
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, {
|
|
401
|
+
exposure: true
|
|
402
|
+
}) ? 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]
|
|
401
403
|
});
|
|
402
404
|
};
|
|
@@ -51,7 +51,7 @@ var GAP = 4;
|
|
|
51
51
|
var dropTargetLayoutHintStyle = css({
|
|
52
52
|
height: '100%',
|
|
53
53
|
position: 'absolute',
|
|
54
|
-
borderRight: "1px
|
|
54
|
+
borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, ".concat(B200, ")")),
|
|
55
55
|
width: 0,
|
|
56
56
|
left: 0
|
|
57
57
|
});
|
|
@@ -54,7 +54,7 @@ var stickyButtonStyles = xcss({
|
|
|
54
54
|
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
55
55
|
},
|
|
56
56
|
':focus': {
|
|
57
|
-
outline: "2px
|
|
57
|
+
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
|
|
58
58
|
}
|
|
59
59
|
});
|
|
60
60
|
var containerStaticStyles = xcss({
|
|
@@ -11,7 +11,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
|
|
|
11
11
|
import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
|
|
12
12
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
13
13
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
14
|
-
import {
|
|
14
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
15
15
|
var baseStyles = xcss({
|
|
16
16
|
transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
|
|
17
17
|
});
|
|
@@ -44,7 +44,9 @@ export var VisibilityContainer = function VisibilityContainer(_ref) {
|
|
|
44
44
|
var isEditing = useSharedPluginStateSelector(api, 'blockControls.isEditing');
|
|
45
45
|
var isMouseOut = useSharedPluginStateSelector(api, 'blockControls.isMouseOut');
|
|
46
46
|
var shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
|
|
47
|
-
if (
|
|
47
|
+
if (editorExperiment('platform_editor_preview_panel_responsiveness', true, {
|
|
48
|
+
exposure: true
|
|
49
|
+
})) {
|
|
48
50
|
return jsx("div", {
|
|
49
51
|
css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
|
|
50
52
|
}, children);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "6.3.
|
|
3
|
+
"version": "6.3.3",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@atlaskit/editor-plugin-editor-disabled": "^5.0.0",
|
|
35
35
|
"@atlaskit/editor-plugin-feature-flags": "^4.0.0",
|
|
36
36
|
"@atlaskit/editor-plugin-interaction": "^7.0.0",
|
|
37
|
-
"@atlaskit/editor-plugin-limited-mode": "^2.
|
|
37
|
+
"@atlaskit/editor-plugin-limited-mode": "^2.1.0",
|
|
38
38
|
"@atlaskit/editor-plugin-metrics": "^6.2.0",
|
|
39
39
|
"@atlaskit/editor-plugin-quick-insert": "^5.0.0",
|
|
40
40
|
"@atlaskit/editor-plugin-selection": "^5.0.0",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
|
|
53
53
|
"@atlaskit/primitives": "^14.14.0",
|
|
54
54
|
"@atlaskit/theme": "^21.0.0",
|
|
55
|
-
"@atlaskit/tmp-editor-statsig": "^12.
|
|
55
|
+
"@atlaskit/tmp-editor-statsig": "^12.25.0",
|
|
56
56
|
"@atlaskit/tokens": "^6.3.0",
|
|
57
57
|
"@atlaskit/tooltip": "^20.4.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": "^109.
|
|
67
|
+
"@atlaskit/editor-common": "^109.10.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"
|
|
@@ -114,9 +114,6 @@
|
|
|
114
114
|
"platform_editor_use_nested_table_pm_nodes": {
|
|
115
115
|
"type": "boolean"
|
|
116
116
|
},
|
|
117
|
-
"platform_editor_dnd_update_drag_start_target": {
|
|
118
|
-
"type": "boolean"
|
|
119
|
-
},
|
|
120
117
|
"platform_editor_track_node_types": {
|
|
121
118
|
"type": "boolean"
|
|
122
119
|
},
|