@atlaskit/editor-plugin-block-controls 4.0.8 → 4.1.0
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 +22 -0
- package/dist/cjs/ui/drag-handle.js +7 -2
- package/dist/cjs/ui/visibility-container.js +31 -1
- package/dist/es2019/ui/drag-handle.js +10 -2
- package/dist/es2019/ui/visibility-container.js +31 -1
- package/dist/esm/ui/drag-handle.js +8 -3
- package/dist/esm/ui/visibility-container.js +30 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/ui/visibility-container.d.ts +6 -1
- package/dist/types-ts4.5/index.d.ts +1 -1
- package/dist/types-ts4.5/ui/visibility-container.d.ts +6 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 4.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#189314](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189314)
|
|
8
|
+
[`22c6251496010`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22c6251496010) -
|
|
9
|
+
Exported missing types that were already being inferred from existing exports
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
15
|
+
## 4.0.9
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- [#188277](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188277)
|
|
20
|
+
[`9e6d67b625ac9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e6d67b625ac9) -
|
|
21
|
+
[ux] Hides drag controls for all nodes and resize handles on expands and layouts on narrow
|
|
22
|
+
screens.
|
|
23
|
+
- Updated dependencies
|
|
24
|
+
|
|
3
25
|
## 4.0.8
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
|
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.DragHandleWithVisibility = exports.DragHandle = void 0;
|
|
8
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
11
|
var _react = require("react");
|
|
12
12
|
var _react2 = require("@emotion/react");
|
|
13
13
|
var _bindEventListener = require("bind-event-listener");
|
|
@@ -27,6 +27,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
27
27
|
var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
|
|
28
28
|
var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
|
|
29
29
|
var _primitives = require("@atlaskit/primitives");
|
|
30
|
+
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
30
31
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
31
32
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
32
33
|
var _main = require("../pm-plugins/main");
|
|
@@ -134,6 +135,10 @@ var dragHandleButtonStyles = (0, _react2.css)({
|
|
|
134
135
|
backgroundColor: "var(--ds-background-disabled, transparent)"
|
|
135
136
|
}
|
|
136
137
|
});
|
|
138
|
+
var dragHandleButtonSmallScreenStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_consts.akEditorFullPageNarrowBreakout, "px)"), {
|
|
139
|
+
opacity: 0,
|
|
140
|
+
visibility: 'hidden'
|
|
141
|
+
}));
|
|
137
142
|
var dragHandleButtonStylesOld = (0, _react2.css)({
|
|
138
143
|
position: 'absolute',
|
|
139
144
|
paddingTop: "var(--ds-space-025, 2px)",
|
|
@@ -878,7 +883,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
878
883
|
css: [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
|
|
879
884
|
// ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
|
|
880
885
|
// See https://product-fabric.atlassian.net/browse/ED-26266
|
|
881
|
-
_browser.browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles],
|
|
886
|
+
_browser.browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
|
|
882
887
|
ref: buttonRef
|
|
883
888
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
884
889
|
,
|
|
@@ -5,9 +5,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.VisibilityContainer = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
8
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _react2 = require("@emotion/react");
|
|
9
11
|
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
12
|
+
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
10
13
|
var _primitives = require("@atlaskit/primitives");
|
|
14
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
15
|
+
/**
|
|
16
|
+
* @jsxRuntime classic
|
|
17
|
+
* @jsx jsx
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
21
|
+
|
|
11
22
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
12
23
|
|
|
13
24
|
var baseStyles = (0, _primitives.xcss)({
|
|
@@ -21,6 +32,20 @@ var hiddenStyles = (0, _primitives.xcss)({
|
|
|
21
32
|
opacity: 0,
|
|
22
33
|
visibility: 'hidden'
|
|
23
34
|
});
|
|
35
|
+
var baseStylesCSS = (0, _react2.css)((0, _defineProperty2.default)({
|
|
36
|
+
transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
|
|
37
|
+
}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
|
|
38
|
+
opacity: 0,
|
|
39
|
+
visibility: 'hidden'
|
|
40
|
+
}));
|
|
41
|
+
var visibleStylesCSS = (0, _react2.css)({
|
|
42
|
+
opacity: 1,
|
|
43
|
+
visibility: 'visible'
|
|
44
|
+
});
|
|
45
|
+
var hiddenStylesCSS = (0, _react2.css)({
|
|
46
|
+
opacity: 0,
|
|
47
|
+
visibility: 'hidden'
|
|
48
|
+
});
|
|
24
49
|
var VisibilityContainer = exports.VisibilityContainer = function VisibilityContainer(_ref) {
|
|
25
50
|
var api = _ref.api,
|
|
26
51
|
children = _ref.children;
|
|
@@ -28,7 +53,12 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
|
|
|
28
53
|
var isEditing = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isEditing');
|
|
29
54
|
var isMouseOut = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isMouseOut');
|
|
30
55
|
var shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
|
|
31
|
-
|
|
56
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
|
|
57
|
+
return (0, _react2.jsx)("div", {
|
|
58
|
+
css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
|
|
59
|
+
}, children);
|
|
60
|
+
}
|
|
61
|
+
return (0, _react2.jsx)(_primitives.Box, {
|
|
32
62
|
xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
|
|
33
63
|
}, children);
|
|
34
64
|
};
|
|
@@ -17,7 +17,7 @@ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
|
|
|
17
17
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
18
18
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
19
19
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
20
|
-
import { akEditorTableToolbarSize } from '@atlaskit/editor-shared-styles/consts';
|
|
20
|
+
import { akEditorTableToolbarSize, akEditorFullPageNarrowBreakout } 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';
|
|
@@ -25,6 +25,7 @@ import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
|
25
25
|
import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
|
|
26
26
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
27
27
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
28
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
28
29
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
29
30
|
import Tooltip from '@atlaskit/tooltip';
|
|
30
31
|
import { key } from '../pm-plugins/main';
|
|
@@ -126,6 +127,13 @@ const dragHandleButtonStyles = css({
|
|
|
126
127
|
backgroundColor: "var(--ds-background-disabled, transparent)"
|
|
127
128
|
}
|
|
128
129
|
});
|
|
130
|
+
const dragHandleButtonSmallScreenStyles = css({
|
|
131
|
+
// 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
|
|
132
|
+
[`@container editor-area (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
|
|
133
|
+
opacity: 0,
|
|
134
|
+
visibility: 'hidden'
|
|
135
|
+
}
|
|
136
|
+
});
|
|
129
137
|
const dragHandleButtonStylesOld = css({
|
|
130
138
|
position: 'absolute',
|
|
131
139
|
paddingTop: `${"var(--ds-space-025, 2px)"}`,
|
|
@@ -866,7 +874,7 @@ export const DragHandle = ({
|
|
|
866
874
|
css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
|
|
867
875
|
// ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
|
|
868
876
|
// See https://product-fabric.atlassian.net/browse/ED-26266
|
|
869
|
-
browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles],
|
|
877
|
+
browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
|
|
870
878
|
ref: buttonRef
|
|
871
879
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
872
880
|
,
|
|
@@ -1,7 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
1
5
|
import React from 'react';
|
|
6
|
+
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
|
+
import { css, jsx } from '@emotion/react';
|
|
2
9
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
10
|
+
import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
|
|
3
11
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
4
12
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
13
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
5
14
|
const baseStyles = xcss({
|
|
6
15
|
transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
|
|
7
16
|
});
|
|
@@ -13,6 +22,22 @@ const hiddenStyles = xcss({
|
|
|
13
22
|
opacity: 0,
|
|
14
23
|
visibility: 'hidden'
|
|
15
24
|
});
|
|
25
|
+
const baseStylesCSS = css({
|
|
26
|
+
transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out',
|
|
27
|
+
// 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
|
|
28
|
+
[`@container editor-area (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
|
|
29
|
+
opacity: 0,
|
|
30
|
+
visibility: 'hidden'
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
const visibleStylesCSS = css({
|
|
34
|
+
opacity: 1,
|
|
35
|
+
visibility: 'visible'
|
|
36
|
+
});
|
|
37
|
+
const hiddenStylesCSS = css({
|
|
38
|
+
opacity: 0,
|
|
39
|
+
visibility: 'hidden'
|
|
40
|
+
});
|
|
16
41
|
export const VisibilityContainer = ({
|
|
17
42
|
api,
|
|
18
43
|
children
|
|
@@ -21,7 +46,12 @@ export const VisibilityContainer = ({
|
|
|
21
46
|
const isEditing = useSharedPluginStateSelector(api, 'blockControls.isEditing');
|
|
22
47
|
const isMouseOut = useSharedPluginStateSelector(api, 'blockControls.isMouseOut');
|
|
23
48
|
const shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
|
|
24
|
-
|
|
49
|
+
if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
|
|
50
|
+
return jsx("div", {
|
|
51
|
+
css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
|
|
52
|
+
}, children);
|
|
53
|
+
}
|
|
54
|
+
return jsx(Box, {
|
|
25
55
|
xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
|
|
26
56
|
}, children);
|
|
27
57
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
4
|
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; }
|
|
5
5
|
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; }
|
|
6
6
|
/**
|
|
@@ -22,7 +22,7 @@ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
|
|
|
22
22
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
23
23
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
24
24
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
25
|
-
import { akEditorTableToolbarSize } from '@atlaskit/editor-shared-styles/consts';
|
|
25
|
+
import { akEditorTableToolbarSize, akEditorFullPageNarrowBreakout } 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';
|
|
@@ -30,6 +30,7 @@ import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
|
30
30
|
import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
|
|
31
31
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
32
32
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
33
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
33
34
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
34
35
|
import Tooltip from '@atlaskit/tooltip';
|
|
35
36
|
import { key } from '../pm-plugins/main';
|
|
@@ -131,6 +132,10 @@ var dragHandleButtonStyles = css({
|
|
|
131
132
|
backgroundColor: "var(--ds-background-disabled, transparent)"
|
|
132
133
|
}
|
|
133
134
|
});
|
|
135
|
+
var dragHandleButtonSmallScreenStyles = css(_defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
|
|
136
|
+
opacity: 0,
|
|
137
|
+
visibility: 'hidden'
|
|
138
|
+
}));
|
|
134
139
|
var dragHandleButtonStylesOld = css({
|
|
135
140
|
position: 'absolute',
|
|
136
141
|
paddingTop: "var(--ds-space-025, 2px)",
|
|
@@ -875,7 +880,7 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
875
880
|
css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
|
|
876
881
|
// ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
|
|
877
882
|
// See https://product-fabric.atlassian.net/browse/ED-26266
|
|
878
|
-
browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles],
|
|
883
|
+
browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
|
|
879
884
|
ref: buttonRef
|
|
880
885
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
881
886
|
,
|
|
@@ -1,7 +1,17 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
/**
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
5
|
+
*/
|
|
1
6
|
import React 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 { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
11
|
+
import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
|
|
3
12
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
4
13
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
14
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
5
15
|
var baseStyles = xcss({
|
|
6
16
|
transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
|
|
7
17
|
});
|
|
@@ -13,6 +23,20 @@ var hiddenStyles = xcss({
|
|
|
13
23
|
opacity: 0,
|
|
14
24
|
visibility: 'hidden'
|
|
15
25
|
});
|
|
26
|
+
var baseStylesCSS = css(_defineProperty({
|
|
27
|
+
transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
|
|
28
|
+
}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
|
|
29
|
+
opacity: 0,
|
|
30
|
+
visibility: 'hidden'
|
|
31
|
+
}));
|
|
32
|
+
var visibleStylesCSS = css({
|
|
33
|
+
opacity: 1,
|
|
34
|
+
visibility: 'visible'
|
|
35
|
+
});
|
|
36
|
+
var hiddenStylesCSS = css({
|
|
37
|
+
opacity: 0,
|
|
38
|
+
visibility: 'hidden'
|
|
39
|
+
});
|
|
16
40
|
export var VisibilityContainer = function VisibilityContainer(_ref) {
|
|
17
41
|
var api = _ref.api,
|
|
18
42
|
children = _ref.children;
|
|
@@ -20,7 +44,12 @@ export var VisibilityContainer = function VisibilityContainer(_ref) {
|
|
|
20
44
|
var isEditing = useSharedPluginStateSelector(api, 'blockControls.isEditing');
|
|
21
45
|
var isMouseOut = useSharedPluginStateSelector(api, 'blockControls.isMouseOut');
|
|
22
46
|
var shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
|
|
23
|
-
|
|
47
|
+
if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
|
|
48
|
+
return jsx("div", {
|
|
49
|
+
css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
|
|
50
|
+
}, children);
|
|
51
|
+
}
|
|
52
|
+
return jsx(Box, {
|
|
24
53
|
xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
|
|
25
54
|
}, children);
|
|
26
55
|
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { blockControlsPlugin } from './blockControlsPlugin';
|
|
2
|
-
export type { BlockControlsPlugin, BlockControlsSharedState, HandleOptions, MoveNodeMethod, } from './blockControlsPluginType';
|
|
2
|
+
export type { BlockControlsPlugin, BlockControlsSharedState, HandleOptions, MoveNodeMethod, BlockControlsPluginDependencies, PluginState, MoveNode, } from './blockControlsPluginType';
|
|
@@ -1,9 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
1
5
|
import React from 'react';
|
|
6
|
+
import { jsx } from '@emotion/react';
|
|
2
7
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
8
|
import type { BlockControlsPlugin } from '../blockControlsPluginType';
|
|
4
9
|
interface VisibilityContainerProps {
|
|
5
10
|
api?: ExtractInjectionAPI<BlockControlsPlugin>;
|
|
6
11
|
children: React.ReactNode;
|
|
7
12
|
}
|
|
8
|
-
export declare const VisibilityContainer: ({ api, children }: VisibilityContainerProps) =>
|
|
13
|
+
export declare const VisibilityContainer: ({ api, children }: VisibilityContainerProps) => jsx.JSX.Element;
|
|
9
14
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { blockControlsPlugin } from './blockControlsPlugin';
|
|
2
|
-
export type { BlockControlsPlugin, BlockControlsSharedState, HandleOptions, MoveNodeMethod, } from './blockControlsPluginType';
|
|
2
|
+
export type { BlockControlsPlugin, BlockControlsSharedState, HandleOptions, MoveNodeMethod, BlockControlsPluginDependencies, PluginState, MoveNode, } from './blockControlsPluginType';
|
|
@@ -1,9 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
1
5
|
import React from 'react';
|
|
6
|
+
import { jsx } from '@emotion/react';
|
|
2
7
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
8
|
import type { BlockControlsPlugin } from '../blockControlsPluginType';
|
|
4
9
|
interface VisibilityContainerProps {
|
|
5
10
|
api?: ExtractInjectionAPI<BlockControlsPlugin>;
|
|
6
11
|
children: React.ReactNode;
|
|
7
12
|
}
|
|
8
|
-
export declare const VisibilityContainer: ({ api, children }: VisibilityContainerProps) =>
|
|
13
|
+
export declare const VisibilityContainer: ({ api, children }: VisibilityContainerProps) => jsx.JSX.Element;
|
|
9
14
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "4.0
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
"@atlaskit/editor-plugin-metrics": "^4.0.0",
|
|
41
41
|
"@atlaskit/editor-plugin-quick-insert": "^3.0.0",
|
|
42
42
|
"@atlaskit/editor-plugin-selection": "^3.0.0",
|
|
43
|
-
"@atlaskit/editor-plugin-type-ahead": "^3.
|
|
44
|
-
"@atlaskit/editor-plugin-user-intent": "^1.
|
|
43
|
+
"@atlaskit/editor-plugin-type-ahead": "^3.1.0",
|
|
44
|
+
"@atlaskit/editor-plugin-user-intent": "^1.1.0",
|
|
45
45
|
"@atlaskit/editor-plugin-width": "^4.0.0",
|
|
46
46
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
47
47
|
"@atlaskit/editor-shared-styles": "^3.5.0",
|
|
48
48
|
"@atlaskit/editor-tables": "^2.9.0",
|
|
49
|
-
"@atlaskit/icon": "^27.
|
|
49
|
+
"@atlaskit/icon": "^27.5.0",
|
|
50
50
|
"@atlaskit/link": "^3.2.0",
|
|
51
51
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
52
52
|
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
|
@@ -54,8 +54,8 @@
|
|
|
54
54
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
|
|
55
55
|
"@atlaskit/primitives": "^14.10.0",
|
|
56
56
|
"@atlaskit/theme": "^19.0.0",
|
|
57
|
-
"@atlaskit/tmp-editor-statsig": "^9.
|
|
58
|
-
"@atlaskit/tokens": "^5.
|
|
57
|
+
"@atlaskit/tmp-editor-statsig": "^9.9.0",
|
|
58
|
+
"@atlaskit/tokens": "^5.6.0",
|
|
59
59
|
"@atlaskit/tooltip": "^20.3.0",
|
|
60
60
|
"@babel/runtime": "^7.0.0",
|
|
61
61
|
"@emotion/react": "^11.7.1",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"uuid": "^3.1.0"
|
|
67
67
|
},
|
|
68
68
|
"peerDependencies": {
|
|
69
|
-
"@atlaskit/editor-common": "^107.
|
|
69
|
+
"@atlaskit/editor-common": "^107.9.0",
|
|
70
70
|
"react": "^18.2.0",
|
|
71
71
|
"react-dom": "^18.2.0",
|
|
72
72
|
"react-intl-next": "npm:react-intl@^5.18.1"
|