@atlaskit/editor-common 78.31.0 → 78.31.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.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/extensibility/Extension/Extension/index.js +2 -1
- package/dist/cjs/extensibility/Extension/InlineExtension/index.js +2 -1
- package/dist/cjs/extensibility/Extension/Lozenge/ExtensionLabel.js +23 -8
- package/dist/cjs/extensibility/Extension/Lozenge/LozengeComponent.js +4 -2
- package/dist/cjs/extensibility/Extension/Lozenge/index.js +4 -2
- package/dist/cjs/extensibility/MultiBodiedExtension/index.js +2 -1
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/es2019/extensibility/Extension/Extension/index.js +2 -1
- package/dist/es2019/extensibility/Extension/InlineExtension/index.js +2 -1
- package/dist/es2019/extensibility/Extension/Lozenge/ExtensionLabel.js +17 -3
- package/dist/es2019/extensibility/Extension/Lozenge/LozengeComponent.js +4 -2
- package/dist/es2019/extensibility/Extension/Lozenge/index.js +4 -2
- package/dist/es2019/extensibility/MultiBodiedExtension/index.js +2 -1
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/esm/extensibility/Extension/Extension/index.js +2 -1
- package/dist/esm/extensibility/Extension/InlineExtension/index.js +2 -1
- package/dist/esm/extensibility/Extension/Lozenge/ExtensionLabel.js +17 -3
- package/dist/esm/extensibility/Extension/Lozenge/LozengeComponent.js +4 -2
- package/dist/esm/extensibility/Extension/Lozenge/index.js +4 -2
- package/dist/esm/extensibility/MultiBodiedExtension/index.js +2 -1
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/types/extensibility/Extension/Lozenge/ExtensionLabel.d.ts +2 -2
- package/dist/types/extensibility/Extension/Lozenge/LozengeComponent.d.ts +2 -1
- package/dist/types/extensibility/Extension/Lozenge/index.d.ts +1 -0
- package/dist/types-ts4.5/extensibility/Extension/Lozenge/ExtensionLabel.d.ts +2 -2
- package/dist/types-ts4.5/extensibility/Extension/Lozenge/LozengeComponent.d.ts +2 -1
- package/dist/types-ts4.5/extensibility/Extension/Lozenge/index.d.ts +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/editor-common
|
|
2
2
|
|
|
3
|
+
## 78.31.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#92744](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92744) [`3f06e77a6006`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3f06e77a6006) - [ux] Makes macro label lozenge clickable for new macro interaction design updates
|
|
8
|
+
|
|
3
9
|
## 78.31.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
|
@@ -109,7 +109,8 @@ function ExtensionWithPluginState(props) {
|
|
|
109
109
|
isNodeNested: isNodeNested,
|
|
110
110
|
node: node,
|
|
111
111
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
112
|
-
customContainerStyles: customContainerStyles
|
|
112
|
+
customContainerStyles: customContainerStyles,
|
|
113
|
+
setIsNodeHovered: setIsNodeHovered
|
|
113
114
|
}), (0, _react2.jsx)("div", {
|
|
114
115
|
ref: handleRef,
|
|
115
116
|
"data-layout": node.attrs.layout,
|
|
@@ -49,7 +49,8 @@ var InlineExtension = function InlineExtension(props) {
|
|
|
49
49
|
node: node,
|
|
50
50
|
isNodeSelected: isNodeSelected,
|
|
51
51
|
isNodeHovered: isNodeHovered,
|
|
52
|
-
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
|
|
52
|
+
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
53
|
+
setIsNodeHovered: setIsNodeHovered
|
|
53
54
|
}), (0, _react2.jsx)("div", {
|
|
54
55
|
"data-testid": "inline-extension-wrapper",
|
|
55
56
|
css: [_styles2.wrapperStyle, extendedInlineExtension && _styles2.inlineWrapperStyles],
|
|
@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.ExtensionLabel = void 0;
|
|
8
|
-
var _react = require("
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _react2 = require("@emotion/react");
|
|
9
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
11
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
12
|
/** @jsx jsx */
|
|
12
13
|
|
|
13
|
-
var labelStyles = (0,
|
|
14
|
+
var labelStyles = (0, _react2.css)({
|
|
14
15
|
opacity: 0,
|
|
15
16
|
display: 'inline-flex',
|
|
16
17
|
width: 'max-content',
|
|
@@ -25,6 +26,7 @@ var labelStyles = (0, _react.css)({
|
|
|
25
26
|
marginLeft: "var(--ds-space-150, 12px)"
|
|
26
27
|
},
|
|
27
28
|
'&.hovered': {
|
|
29
|
+
cursor: 'pointer',
|
|
28
30
|
background: "var(--ds-background-accent-gray-subtle-pressed, ".concat(_colors.N300, ")"),
|
|
29
31
|
color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
|
|
30
32
|
opacity: 1
|
|
@@ -37,7 +39,7 @@ var labelStyles = (0, _react.css)({
|
|
|
37
39
|
marginLeft: "var(--ds-space-150, 12px)"
|
|
38
40
|
}
|
|
39
41
|
});
|
|
40
|
-
var textStyles = (0,
|
|
42
|
+
var textStyles = (0, _react2.css)({
|
|
41
43
|
fontSize: '14px',
|
|
42
44
|
fontWeight: 'normal',
|
|
43
45
|
padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
|
|
@@ -47,19 +49,32 @@ var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
|
|
|
47
49
|
extensionName = _ref.extensionName,
|
|
48
50
|
isNodeHovered = _ref.isNodeHovered,
|
|
49
51
|
customContainerStyles = _ref.customContainerStyles,
|
|
50
|
-
isNodeNested = _ref.isNodeNested
|
|
52
|
+
isNodeNested = _ref.isNodeNested,
|
|
53
|
+
setIsNodeHovered = _ref.setIsNodeHovered;
|
|
51
54
|
var classNames = (0, _classnames.default)('extension-title', 'extension-label', {
|
|
52
55
|
'inline-extension': extensionName === 'inlineExtension',
|
|
53
56
|
hovered: isNodeHovered,
|
|
54
57
|
nested: isNodeNested
|
|
55
58
|
});
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
+
var handleMouseEnter = (0, _react.useCallback)(function () {
|
|
60
|
+
// If current node is hovered and the label is hovered,
|
|
61
|
+
// consider the node as hovered so we can display the label for users to click on
|
|
62
|
+
if (isNodeHovered) {
|
|
63
|
+
setIsNodeHovered === null || setIsNodeHovered === void 0 || setIsNodeHovered(true);
|
|
64
|
+
}
|
|
65
|
+
}, [isNodeHovered, setIsNodeHovered]);
|
|
66
|
+
var handleMouseLeave = (0, _react.useCallback)(function () {
|
|
67
|
+
setIsNodeHovered === null || setIsNodeHovered === void 0 || setIsNodeHovered(false);
|
|
68
|
+
}, [setIsNodeHovered]);
|
|
69
|
+
return (0, _react2.jsx)("div", {
|
|
70
|
+
style: customContainerStyles,
|
|
71
|
+
onMouseEnter: handleMouseEnter,
|
|
72
|
+
onMouseLeave: handleMouseLeave
|
|
73
|
+
}, (0, _react2.jsx)("span", {
|
|
59
74
|
"data-testid": "new-lozenge",
|
|
60
75
|
css: labelStyles,
|
|
61
76
|
className: classNames
|
|
62
|
-
}, (0,
|
|
77
|
+
}, (0, _react2.jsx)("span", {
|
|
63
78
|
css: textStyles
|
|
64
79
|
}, text)));
|
|
65
80
|
};
|
|
@@ -25,7 +25,8 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
|
|
|
25
25
|
showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
|
|
26
26
|
customContainerStyles = _ref.customContainerStyles,
|
|
27
27
|
isNodeHovered = _ref.isNodeHovered,
|
|
28
|
-
isNodeNested = _ref.isNodeNested
|
|
28
|
+
isNodeNested = _ref.isNodeNested,
|
|
29
|
+
setIsNodeHovered = _ref.setIsNodeHovered;
|
|
29
30
|
var capitalizedTitle = capitalizeFirstLetter(title);
|
|
30
31
|
if (showMacroInteractionDesignUpdates) {
|
|
31
32
|
return (0, _react.jsx)(_ExtensionLabel.ExtensionLabel, {
|
|
@@ -33,7 +34,8 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
|
|
|
33
34
|
extensionName: extensionName,
|
|
34
35
|
isNodeHovered: isNodeHovered,
|
|
35
36
|
isNodeNested: isNodeNested,
|
|
36
|
-
customContainerStyles: customContainerStyles
|
|
37
|
+
customContainerStyles: customContainerStyles,
|
|
38
|
+
setIsNodeHovered: setIsNodeHovered
|
|
37
39
|
});
|
|
38
40
|
}
|
|
39
41
|
var isBlockExtension = extensionName === 'extension';
|
|
@@ -49,7 +49,8 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
49
49
|
isNodeSelected = _this$props.isNodeSelected,
|
|
50
50
|
isNodeHovered = _this$props.isNodeHovered,
|
|
51
51
|
isNodeNested = _this$props.isNodeNested,
|
|
52
|
-
customContainerStyles = _this$props.customContainerStyles
|
|
52
|
+
customContainerStyles = _this$props.customContainerStyles,
|
|
53
|
+
setIsNodeHovered = _this$props.setIsNodeHovered;
|
|
53
54
|
var _this$props$node$attr = _this.props.node.attrs,
|
|
54
55
|
parameters = _this$props$node$attr.parameters,
|
|
55
56
|
extensionKey = _this$props$node$attr.extensionKey;
|
|
@@ -66,7 +67,8 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
66
67
|
params: params,
|
|
67
68
|
title: title,
|
|
68
69
|
renderImage: _this.renderImage,
|
|
69
|
-
customContainerStyles: customContainerStyles
|
|
70
|
+
customContainerStyles: customContainerStyles,
|
|
71
|
+
setIsNodeHovered: setIsNodeHovered
|
|
70
72
|
});
|
|
71
73
|
});
|
|
72
74
|
return _this;
|
|
@@ -149,7 +149,8 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
|
|
|
149
149
|
showMacroInteractionDesignUpdates: true,
|
|
150
150
|
customContainerStyles: mbeWrapperStyles,
|
|
151
151
|
isNodeHovered: isNodeHovered,
|
|
152
|
-
isNodeNested: isNodeNested
|
|
152
|
+
isNodeNested: isNodeNested,
|
|
153
|
+
setIsNodeHovered: setIsNodeHovered
|
|
153
154
|
}), (0, _react2.jsx)("div", {
|
|
154
155
|
className: wrapperClassNames,
|
|
155
156
|
css: _styles.mbeExtensionWrapperCSSStyles,
|
|
@@ -16,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
16
16
|
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 && Object.prototype.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; }
|
|
17
17
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
18
18
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
19
|
-
var packageVersion = "78.31.
|
|
19
|
+
var packageVersion = "78.31.1";
|
|
20
20
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
21
21
|
// Remove URL as it has UGC
|
|
22
22
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -20,7 +20,7 @@ var _Layer = _interopRequireDefault(require("../Layer"));
|
|
|
20
20
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
21
21
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
|
|
22
22
|
var packageName = "@atlaskit/editor-common";
|
|
23
|
-
var packageVersion = "78.31.
|
|
23
|
+
var packageVersion = "78.31.1";
|
|
24
24
|
var halfFocusRing = 1;
|
|
25
25
|
var dropOffset = '0, 8';
|
|
26
26
|
var DropList = /*#__PURE__*/function (_Component) {
|
|
@@ -105,7 +105,8 @@ function ExtensionWithPluginState(props) {
|
|
|
105
105
|
isNodeNested: isNodeNested,
|
|
106
106
|
node: node,
|
|
107
107
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
108
|
-
customContainerStyles: customContainerStyles
|
|
108
|
+
customContainerStyles: customContainerStyles,
|
|
109
|
+
setIsNodeHovered: setIsNodeHovered
|
|
109
110
|
}), jsx("div", {
|
|
110
111
|
ref: handleRef,
|
|
111
112
|
"data-layout": node.attrs.layout,
|
|
@@ -41,7 +41,8 @@ const InlineExtension = props => {
|
|
|
41
41
|
node: node,
|
|
42
42
|
isNodeSelected: isNodeSelected,
|
|
43
43
|
isNodeHovered: isNodeHovered,
|
|
44
|
-
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
|
|
44
|
+
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
45
|
+
setIsNodeHovered: setIsNodeHovered
|
|
45
46
|
}), jsx("div", {
|
|
46
47
|
"data-testid": "inline-extension-wrapper",
|
|
47
48
|
css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyles],
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
-
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
3
|
import { css, jsx } from '@emotion/react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { N300, N500 } from '@atlaskit/theme/colors';
|
|
@@ -18,6 +18,7 @@ const labelStyles = css({
|
|
|
18
18
|
marginLeft: "var(--ds-space-150, 12px)"
|
|
19
19
|
},
|
|
20
20
|
'&.hovered': {
|
|
21
|
+
cursor: 'pointer',
|
|
21
22
|
background: `var(--ds-background-accent-gray-subtle-pressed, ${N300})`,
|
|
22
23
|
color: `var(--ds-text-subtle, ${N500})`,
|
|
23
24
|
opacity: 1
|
|
@@ -40,15 +41,28 @@ export const ExtensionLabel = ({
|
|
|
40
41
|
extensionName,
|
|
41
42
|
isNodeHovered,
|
|
42
43
|
customContainerStyles,
|
|
43
|
-
isNodeNested
|
|
44
|
+
isNodeNested,
|
|
45
|
+
setIsNodeHovered
|
|
44
46
|
}) => {
|
|
45
47
|
const classNames = classnames('extension-title', 'extension-label', {
|
|
46
48
|
'inline-extension': extensionName === 'inlineExtension',
|
|
47
49
|
hovered: isNodeHovered,
|
|
48
50
|
nested: isNodeNested
|
|
49
51
|
});
|
|
52
|
+
const handleMouseEnter = useCallback(() => {
|
|
53
|
+
// If current node is hovered and the label is hovered,
|
|
54
|
+
// consider the node as hovered so we can display the label for users to click on
|
|
55
|
+
if (isNodeHovered) {
|
|
56
|
+
setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true);
|
|
57
|
+
}
|
|
58
|
+
}, [isNodeHovered, setIsNodeHovered]);
|
|
59
|
+
const handleMouseLeave = useCallback(() => {
|
|
60
|
+
setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
|
|
61
|
+
}, [setIsNodeHovered]);
|
|
50
62
|
return jsx("div", {
|
|
51
|
-
style: customContainerStyles
|
|
63
|
+
style: customContainerStyles,
|
|
64
|
+
onMouseEnter: handleMouseEnter,
|
|
65
|
+
onMouseLeave: handleMouseLeave
|
|
52
66
|
}, jsx("span", {
|
|
53
67
|
"data-testid": "new-lozenge",
|
|
54
68
|
css: labelStyles,
|
|
@@ -17,7 +17,8 @@ export const LozengeComponent = ({
|
|
|
17
17
|
showMacroInteractionDesignUpdates,
|
|
18
18
|
customContainerStyles,
|
|
19
19
|
isNodeHovered,
|
|
20
|
-
isNodeNested
|
|
20
|
+
isNodeNested,
|
|
21
|
+
setIsNodeHovered
|
|
21
22
|
}) => {
|
|
22
23
|
const capitalizedTitle = capitalizeFirstLetter(title);
|
|
23
24
|
if (showMacroInteractionDesignUpdates) {
|
|
@@ -26,7 +27,8 @@ export const LozengeComponent = ({
|
|
|
26
27
|
extensionName: extensionName,
|
|
27
28
|
isNodeHovered: isNodeHovered,
|
|
28
29
|
isNodeNested: isNodeNested,
|
|
29
|
-
customContainerStyles: customContainerStyles
|
|
30
|
+
customContainerStyles: customContainerStyles,
|
|
31
|
+
setIsNodeHovered: setIsNodeHovered
|
|
30
32
|
});
|
|
31
33
|
}
|
|
32
34
|
const isBlockExtension = extensionName === 'extension';
|
|
@@ -30,7 +30,8 @@ export default class ExtensionLozenge extends Component {
|
|
|
30
30
|
isNodeSelected,
|
|
31
31
|
isNodeHovered,
|
|
32
32
|
isNodeNested,
|
|
33
|
-
customContainerStyles
|
|
33
|
+
customContainerStyles,
|
|
34
|
+
setIsNodeHovered
|
|
34
35
|
} = this.props;
|
|
35
36
|
const {
|
|
36
37
|
parameters,
|
|
@@ -51,7 +52,8 @@ export default class ExtensionLozenge extends Component {
|
|
|
51
52
|
params: params,
|
|
52
53
|
title: title,
|
|
53
54
|
renderImage: this.renderImage,
|
|
54
|
-
customContainerStyles: customContainerStyles
|
|
55
|
+
customContainerStyles: customContainerStyles,
|
|
56
|
+
setIsNodeHovered: setIsNodeHovered
|
|
55
57
|
});
|
|
56
58
|
});
|
|
57
59
|
}
|
|
@@ -137,7 +137,8 @@ const MultiBodiedExtensionWithWidth = ({
|
|
|
137
137
|
showMacroInteractionDesignUpdates: true,
|
|
138
138
|
customContainerStyles: mbeWrapperStyles,
|
|
139
139
|
isNodeHovered: isNodeHovered,
|
|
140
|
-
isNodeNested: isNodeNested
|
|
140
|
+
isNodeNested: isNodeNested,
|
|
141
|
+
setIsNodeHovered: setIsNodeHovered
|
|
141
142
|
}), jsx("div", {
|
|
142
143
|
className: wrapperClassNames,
|
|
143
144
|
css: mbeExtensionWrapperCSSStyles,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
2
2
|
const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
3
|
-
const packageVersion = "78.31.
|
|
3
|
+
const packageVersion = "78.31.1";
|
|
4
4
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
5
5
|
// Remove URL as it has UGC
|
|
6
6
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
7
7
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
8
8
|
import Layer from '../Layer';
|
|
9
9
|
const packageName = "@atlaskit/editor-common";
|
|
10
|
-
const packageVersion = "78.31.
|
|
10
|
+
const packageVersion = "78.31.1";
|
|
11
11
|
const halfFocusRing = 1;
|
|
12
12
|
const dropOffset = '0, 8';
|
|
13
13
|
class DropList extends Component {
|
|
@@ -100,7 +100,8 @@ function ExtensionWithPluginState(props) {
|
|
|
100
100
|
isNodeNested: isNodeNested,
|
|
101
101
|
node: node,
|
|
102
102
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
103
|
-
customContainerStyles: customContainerStyles
|
|
103
|
+
customContainerStyles: customContainerStyles,
|
|
104
|
+
setIsNodeHovered: setIsNodeHovered
|
|
104
105
|
}), jsx("div", {
|
|
105
106
|
ref: handleRef,
|
|
106
107
|
"data-layout": node.attrs.layout,
|
|
@@ -38,7 +38,8 @@ var InlineExtension = function InlineExtension(props) {
|
|
|
38
38
|
node: node,
|
|
39
39
|
isNodeSelected: isNodeSelected,
|
|
40
40
|
isNodeHovered: isNodeHovered,
|
|
41
|
-
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
|
|
41
|
+
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
42
|
+
setIsNodeHovered: setIsNodeHovered
|
|
42
43
|
}), jsx("div", {
|
|
43
44
|
"data-testid": "inline-extension-wrapper",
|
|
44
45
|
css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyles],
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
-
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
3
|
import { css, jsx } from '@emotion/react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { N300, N500 } from '@atlaskit/theme/colors';
|
|
@@ -18,6 +18,7 @@ var labelStyles = css({
|
|
|
18
18
|
marginLeft: "var(--ds-space-150, 12px)"
|
|
19
19
|
},
|
|
20
20
|
'&.hovered': {
|
|
21
|
+
cursor: 'pointer',
|
|
21
22
|
background: "var(--ds-background-accent-gray-subtle-pressed, ".concat(N300, ")"),
|
|
22
23
|
color: "var(--ds-text-subtle, ".concat(N500, ")"),
|
|
23
24
|
opacity: 1
|
|
@@ -40,14 +41,27 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
|
|
|
40
41
|
extensionName = _ref.extensionName,
|
|
41
42
|
isNodeHovered = _ref.isNodeHovered,
|
|
42
43
|
customContainerStyles = _ref.customContainerStyles,
|
|
43
|
-
isNodeNested = _ref.isNodeNested
|
|
44
|
+
isNodeNested = _ref.isNodeNested,
|
|
45
|
+
setIsNodeHovered = _ref.setIsNodeHovered;
|
|
44
46
|
var classNames = classnames('extension-title', 'extension-label', {
|
|
45
47
|
'inline-extension': extensionName === 'inlineExtension',
|
|
46
48
|
hovered: isNodeHovered,
|
|
47
49
|
nested: isNodeNested
|
|
48
50
|
});
|
|
51
|
+
var handleMouseEnter = useCallback(function () {
|
|
52
|
+
// If current node is hovered and the label is hovered,
|
|
53
|
+
// consider the node as hovered so we can display the label for users to click on
|
|
54
|
+
if (isNodeHovered) {
|
|
55
|
+
setIsNodeHovered === null || setIsNodeHovered === void 0 || setIsNodeHovered(true);
|
|
56
|
+
}
|
|
57
|
+
}, [isNodeHovered, setIsNodeHovered]);
|
|
58
|
+
var handleMouseLeave = useCallback(function () {
|
|
59
|
+
setIsNodeHovered === null || setIsNodeHovered === void 0 || setIsNodeHovered(false);
|
|
60
|
+
}, [setIsNodeHovered]);
|
|
49
61
|
return jsx("div", {
|
|
50
|
-
style: customContainerStyles
|
|
62
|
+
style: customContainerStyles,
|
|
63
|
+
onMouseEnter: handleMouseEnter,
|
|
64
|
+
onMouseLeave: handleMouseLeave
|
|
51
65
|
}, jsx("span", {
|
|
52
66
|
"data-testid": "new-lozenge",
|
|
53
67
|
css: labelStyles,
|
|
@@ -20,7 +20,8 @@ export var LozengeComponent = function LozengeComponent(_ref) {
|
|
|
20
20
|
showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
|
|
21
21
|
customContainerStyles = _ref.customContainerStyles,
|
|
22
22
|
isNodeHovered = _ref.isNodeHovered,
|
|
23
|
-
isNodeNested = _ref.isNodeNested
|
|
23
|
+
isNodeNested = _ref.isNodeNested,
|
|
24
|
+
setIsNodeHovered = _ref.setIsNodeHovered;
|
|
24
25
|
var capitalizedTitle = capitalizeFirstLetter(title);
|
|
25
26
|
if (showMacroInteractionDesignUpdates) {
|
|
26
27
|
return jsx(ExtensionLabel, {
|
|
@@ -28,7 +29,8 @@ export var LozengeComponent = function LozengeComponent(_ref) {
|
|
|
28
29
|
extensionName: extensionName,
|
|
29
30
|
isNodeHovered: isNodeHovered,
|
|
30
31
|
isNodeNested: isNodeNested,
|
|
31
|
-
customContainerStyles: customContainerStyles
|
|
32
|
+
customContainerStyles: customContainerStyles,
|
|
33
|
+
setIsNodeHovered: setIsNodeHovered
|
|
32
34
|
});
|
|
33
35
|
}
|
|
34
36
|
var isBlockExtension = extensionName === 'extension';
|
|
@@ -43,7 +43,8 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
|
|
|
43
43
|
isNodeSelected = _this$props.isNodeSelected,
|
|
44
44
|
isNodeHovered = _this$props.isNodeHovered,
|
|
45
45
|
isNodeNested = _this$props.isNodeNested,
|
|
46
|
-
customContainerStyles = _this$props.customContainerStyles
|
|
46
|
+
customContainerStyles = _this$props.customContainerStyles,
|
|
47
|
+
setIsNodeHovered = _this$props.setIsNodeHovered;
|
|
47
48
|
var _this$props$node$attr = _this.props.node.attrs,
|
|
48
49
|
parameters = _this$props$node$attr.parameters,
|
|
49
50
|
extensionKey = _this$props$node$attr.extensionKey;
|
|
@@ -60,7 +61,8 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
|
|
|
60
61
|
params: params,
|
|
61
62
|
title: title,
|
|
62
63
|
renderImage: _this.renderImage,
|
|
63
|
-
customContainerStyles: customContainerStyles
|
|
64
|
+
customContainerStyles: customContainerStyles,
|
|
65
|
+
setIsNodeHovered: setIsNodeHovered
|
|
64
66
|
});
|
|
65
67
|
});
|
|
66
68
|
return _this;
|
|
@@ -140,7 +140,8 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
|
|
|
140
140
|
showMacroInteractionDesignUpdates: true,
|
|
141
141
|
customContainerStyles: mbeWrapperStyles,
|
|
142
142
|
isNodeHovered: isNodeHovered,
|
|
143
|
-
isNodeNested: isNodeNested
|
|
143
|
+
isNodeNested: isNodeNested,
|
|
144
|
+
setIsNodeHovered: setIsNodeHovered
|
|
144
145
|
}), jsx("div", {
|
|
145
146
|
className: wrapperClassNames,
|
|
146
147
|
css: mbeExtensionWrapperCSSStyles,
|
|
@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
6
6
|
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; }
|
|
7
7
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
8
8
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
9
|
-
var packageVersion = "78.31.
|
|
9
|
+
var packageVersion = "78.31.1";
|
|
10
10
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
11
11
|
// Remove URL as it has UGC
|
|
12
12
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -15,7 +15,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
15
15
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
16
16
|
import Layer from '../Layer';
|
|
17
17
|
var packageName = "@atlaskit/editor-common";
|
|
18
|
-
var packageVersion = "78.31.
|
|
18
|
+
var packageVersion = "78.31.1";
|
|
19
19
|
var halfFocusRing = 1;
|
|
20
20
|
var dropOffset = '0, 8';
|
|
21
21
|
var DropList = /*#__PURE__*/function (_Component) {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
1
|
import type { CSSProperties } from 'react';
|
|
3
2
|
import { jsx } from '@emotion/react';
|
|
4
3
|
type ExtensionLabelProps = {
|
|
@@ -7,6 +6,7 @@ type ExtensionLabelProps = {
|
|
|
7
6
|
isNodeHovered?: boolean;
|
|
8
7
|
isNodeNested?: boolean;
|
|
9
8
|
customContainerStyles?: CSSProperties;
|
|
9
|
+
setIsNodeHovered?: (isHovered: boolean) => void;
|
|
10
10
|
};
|
|
11
|
-
export declare const ExtensionLabel: ({ text, extensionName, isNodeHovered, customContainerStyles, isNodeNested, }: ExtensionLabelProps) => jsx.JSX.Element;
|
|
11
|
+
export declare const ExtensionLabel: ({ text, extensionName, isNodeHovered, customContainerStyles, isNodeNested, setIsNodeHovered, }: ExtensionLabelProps) => jsx.JSX.Element;
|
|
12
12
|
export {};
|
|
@@ -14,6 +14,7 @@ type LozengeComponentProps = {
|
|
|
14
14
|
customContainerStyles?: CSSProperties;
|
|
15
15
|
isNodeHovered?: boolean;
|
|
16
16
|
isNodeNested?: boolean;
|
|
17
|
+
setIsNodeHovered?: (isHovered: boolean) => void;
|
|
17
18
|
};
|
|
18
|
-
export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, isNodeNested, }: LozengeComponentProps) => jsx.JSX.Element;
|
|
19
|
+
export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, isNodeNested, setIsNodeHovered, }: LozengeComponentProps) => jsx.JSX.Element;
|
|
19
20
|
export {};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
1
|
import type { CSSProperties } from 'react';
|
|
3
2
|
import { jsx } from '@emotion/react';
|
|
4
3
|
type ExtensionLabelProps = {
|
|
@@ -7,6 +6,7 @@ type ExtensionLabelProps = {
|
|
|
7
6
|
isNodeHovered?: boolean;
|
|
8
7
|
isNodeNested?: boolean;
|
|
9
8
|
customContainerStyles?: CSSProperties;
|
|
9
|
+
setIsNodeHovered?: (isHovered: boolean) => void;
|
|
10
10
|
};
|
|
11
|
-
export declare const ExtensionLabel: ({ text, extensionName, isNodeHovered, customContainerStyles, isNodeNested, }: ExtensionLabelProps) => jsx.JSX.Element;
|
|
11
|
+
export declare const ExtensionLabel: ({ text, extensionName, isNodeHovered, customContainerStyles, isNodeNested, setIsNodeHovered, }: ExtensionLabelProps) => jsx.JSX.Element;
|
|
12
12
|
export {};
|
|
@@ -14,6 +14,7 @@ type LozengeComponentProps = {
|
|
|
14
14
|
customContainerStyles?: CSSProperties;
|
|
15
15
|
isNodeHovered?: boolean;
|
|
16
16
|
isNodeNested?: boolean;
|
|
17
|
+
setIsNodeHovered?: (isHovered: boolean) => void;
|
|
17
18
|
};
|
|
18
|
-
export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, isNodeNested, }: LozengeComponentProps) => jsx.JSX.Element;
|
|
19
|
+
export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, isNodeNested, setIsNodeHovered, }: LozengeComponentProps) => jsx.JSX.Element;
|
|
19
20
|
export {};
|
package/package.json
CHANGED