@atlaskit/editor-common 116.33.0 → 116.33.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.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/extensibility/Extension/Extension/index.js +0 -3
- package/dist/cjs/extensibility/Extension/InlineExtension/index.js +0 -3
- package/dist/cjs/extensibility/Extension/Lozenge/ExtensionFloatingLabel.compiled.css +20 -0
- package/dist/cjs/extensibility/Extension/Lozenge/ExtensionFloatingLabel.js +31 -0
- package/dist/cjs/extensibility/Extension/Lozenge/ExtensionLabel.js +6 -9
- package/dist/cjs/extensibility/Extension/Lozenge/LozengeComponent.js +2 -6
- package/dist/cjs/extensibility/Extension/Lozenge/index.js +2 -6
- package/dist/cjs/extensibility/ExtensionComponent.js +2 -0
- package/dist/cjs/extensibility/MultiBodiedExtension/index.js +23 -10
- package/dist/cjs/extensibility/MultiBodiedExtension/styles.js +4 -0
- 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 +0 -3
- package/dist/es2019/extensibility/Extension/InlineExtension/index.js +0 -3
- package/dist/es2019/extensibility/Extension/Lozenge/ExtensionFloatingLabel.compiled.css +20 -0
- package/dist/es2019/extensibility/Extension/Lozenge/ExtensionFloatingLabel.js +22 -0
- package/dist/es2019/extensibility/Extension/Lozenge/ExtensionLabel.js +6 -9
- package/dist/es2019/extensibility/Extension/Lozenge/LozengeComponent.js +2 -6
- package/dist/es2019/extensibility/Extension/Lozenge/index.js +2 -6
- package/dist/es2019/extensibility/ExtensionComponent.js +2 -0
- package/dist/es2019/extensibility/MultiBodiedExtension/index.js +23 -10
- package/dist/es2019/extensibility/MultiBodiedExtension/styles.js +4 -0
- 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 +0 -3
- package/dist/esm/extensibility/Extension/InlineExtension/index.js +0 -3
- package/dist/esm/extensibility/Extension/Lozenge/ExtensionFloatingLabel.compiled.css +20 -0
- package/dist/esm/extensibility/Extension/Lozenge/ExtensionFloatingLabel.js +23 -0
- package/dist/esm/extensibility/Extension/Lozenge/ExtensionLabel.js +6 -9
- package/dist/esm/extensibility/Extension/Lozenge/LozengeComponent.js +2 -6
- package/dist/esm/extensibility/Extension/Lozenge/index.js +2 -6
- package/dist/esm/extensibility/ExtensionComponent.js +2 -0
- package/dist/esm/extensibility/MultiBodiedExtension/index.js +23 -10
- package/dist/esm/extensibility/MultiBodiedExtension/styles.js +4 -0
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/types/extensibility/Extension/Lozenge/ExtensionFloatingLabel.d.ts +12 -0
- package/dist/types/extensibility/Extension/Lozenge/ExtensionLabel.d.ts +1 -3
- package/dist/types/extensibility/Extension/Lozenge/LozengeComponent.d.ts +1 -3
- package/dist/types/extensibility/Extension/Lozenge/index.d.ts +0 -2
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-common
|
|
2
2
|
|
|
3
|
+
## 116.33.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 116.33.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`0635ddbca5ddf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0635ddbca5ddf) -
|
|
14
|
+
Align multi bodied extension chrome with active interaction states.
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 116.33.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
|
@@ -51,7 +51,6 @@ function ExtensionWithPluginState(props) {
|
|
|
51
51
|
hideFrame = props.hideFrame,
|
|
52
52
|
editorAppearance = props.editorAppearance,
|
|
53
53
|
macroInteractionDesignFeatureFlags = props.macroInteractionDesignFeatureFlags,
|
|
54
|
-
isNodeSelected = props.isNodeSelected,
|
|
55
54
|
isNodeHovered = props.isNodeHovered,
|
|
56
55
|
isNodeNested = props.isNodeNested,
|
|
57
56
|
setIsNodeHovered = props.setIsNodeHovered,
|
|
@@ -144,7 +143,6 @@ function ExtensionWithPluginState(props) {
|
|
|
144
143
|
}
|
|
145
144
|
};
|
|
146
145
|
return (0, _react2.jsx)(_react.Fragment, null, !showLegacyContentHeader && showMacroInteractionDesignUpdates && !isLivePageViewMode && (0, _react2.jsx)(_Lozenge.default, {
|
|
147
|
-
isNodeSelected: isNodeSelected,
|
|
148
146
|
isNodeHovered: isNodeHovered,
|
|
149
147
|
isNodeNested: isNodeNested,
|
|
150
148
|
node: node,
|
|
@@ -200,7 +198,6 @@ function ExtensionWithPluginState(props) {
|
|
|
200
198
|
,
|
|
201
199
|
className: headerClassNames
|
|
202
200
|
}, !removeBorder && (0, _react2.jsx)(_Lozenge.default, {
|
|
203
|
-
isNodeSelected: isNodeSelected,
|
|
204
201
|
node: node,
|
|
205
202
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
206
203
|
pluginInjectionApi: pluginInjectionApi
|
|
@@ -62,7 +62,6 @@ var InlineExtension = function InlineExtension(props) {
|
|
|
62
62
|
var node = props.node,
|
|
63
63
|
pluginInjectionApi = props.pluginInjectionApi,
|
|
64
64
|
macroInteractionDesignFeatureFlags = props.macroInteractionDesignFeatureFlags,
|
|
65
|
-
isNodeSelected = props.isNodeSelected,
|
|
66
65
|
children = props.children,
|
|
67
66
|
isNodeHovered = props.isNodeHovered,
|
|
68
67
|
setIsNodeHovered = props.setIsNodeHovered,
|
|
@@ -100,7 +99,6 @@ var InlineExtension = function InlineExtension(props) {
|
|
|
100
99
|
};
|
|
101
100
|
var inlineExtensionInternal = (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && !isLivePageViewMode && (0, _react2.jsx)(_Lozenge.default, {
|
|
102
101
|
node: node,
|
|
103
|
-
isNodeSelected: isNodeSelected,
|
|
104
102
|
isNodeHovered: isNodeHovered,
|
|
105
103
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
106
104
|
setIsNodeHovered: setIsNodeHovered,
|
|
@@ -129,7 +127,6 @@ var InlineExtension = function InlineExtension(props) {
|
|
|
129
127
|
className: "extension-overlay"
|
|
130
128
|
}), children ? children : (0, _react2.jsx)(_Lozenge.default, {
|
|
131
129
|
node: node,
|
|
132
|
-
isNodeSelected: isNodeSelected,
|
|
133
130
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
134
131
|
pluginInjectionApi: pluginInjectionApi
|
|
135
132
|
})));
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
|
|
2
|
+
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
3
|
+
._zulp1b66{gap:var(--ds-space-050,4px)}._154i14id{top:-10px}
|
|
4
|
+
._154id439{top:-14px}
|
|
5
|
+
._16qsglyw{box-shadow:none}
|
|
6
|
+
._19bvu2gc{padding-left:var(--ds-space-100,8px)}
|
|
7
|
+
._1bah1h6o{justify-content:center}
|
|
8
|
+
._1e0c1txw{display:flex}
|
|
9
|
+
._1pbycs5v{z-index:2}
|
|
10
|
+
._1xi2utpp{right:var(--ds-space-150,9pt)}
|
|
11
|
+
._3um0ewfl{visibility:visible}
|
|
12
|
+
._4cvr1h6o{align-items:center}
|
|
13
|
+
._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
|
|
14
|
+
._bfhkvuon{background-color:var(--ds-surface,#fff)}
|
|
15
|
+
._ca0q1b66{padding-top:var(--ds-space-050,4px)}
|
|
16
|
+
._kqswstnw{position:absolute}
|
|
17
|
+
._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
|
|
18
|
+
._p12f11ux{max-width:140px}
|
|
19
|
+
._tzy4kb7n{opacity:1}
|
|
20
|
+
._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/* ExtensionFloatingLabel.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.ExtensionFloatingLabel = void 0;
|
|
9
|
+
require("./ExtensionFloatingLabel.compiled.css");
|
|
10
|
+
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _runtime = require("@compiled/react/runtime");
|
|
12
|
+
var _compiled = require("@atlaskit/primitives/compiled");
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
14
|
+
var floatingLabelStyles = {
|
|
15
|
+
base: "_2rkofajl _zulp1b66 _4cvr1h6o _bfhkvuon _16qsglyw _1e0c1txw _1bah1h6o _p12f11ux _tzy4kb7n _19bvu2gc _u5f3u2gc _kqswstnw _1xi2utpp _154i14id _3um0ewfl _1pbycs5v",
|
|
16
|
+
selected: "_bfhk15s3 _n3td1b66 _ca0q1b66 _154id439"
|
|
17
|
+
};
|
|
18
|
+
var ExtensionFloatingLabel = exports.ExtensionFloatingLabel = function ExtensionFloatingLabel(_ref) {
|
|
19
|
+
var isSelected = _ref.isSelected,
|
|
20
|
+
testId = _ref.testId,
|
|
21
|
+
title = _ref.title;
|
|
22
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
23
|
+
contentEditable: false,
|
|
24
|
+
"data-testid": testId,
|
|
25
|
+
className: (0, _runtime.ax)([floatingLabelStyles.base, isSelected && floatingLabelStyles.selected])
|
|
26
|
+
}, /*#__PURE__*/React.createElement(_compiled.Text, {
|
|
27
|
+
maxLines: 1,
|
|
28
|
+
size: "small",
|
|
29
|
+
color: isSelected ? 'color.text.selected' : 'color.text.subtle'
|
|
30
|
+
}, title));
|
|
31
|
+
};
|
|
@@ -123,19 +123,16 @@ var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
|
|
|
123
123
|
extensionName = _ref.extensionName,
|
|
124
124
|
customContainerStyles = _ref.customContainerStyles,
|
|
125
125
|
isNodeNested = _ref.isNodeNested,
|
|
126
|
-
isNodeSelected = _ref.isNodeSelected,
|
|
127
126
|
setIsNodeHovered = _ref.setIsNodeHovered,
|
|
128
127
|
isBodiedMacro = _ref.isBodiedMacro,
|
|
129
128
|
showUpdatedLivePages1PBodiedExtensionUI = _ref.showUpdatedLivePages1PBodiedExtensionUI,
|
|
130
129
|
showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView,
|
|
131
130
|
showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
|
|
132
|
-
_pluginInjectionApi = _ref.pluginInjectionApi
|
|
133
|
-
isMultiBodiedMacro = _ref.isMultiBodiedMacro;
|
|
131
|
+
_pluginInjectionApi = _ref.pluginInjectionApi;
|
|
134
132
|
var isInlineExtension = extensionName === 'inlineExtension';
|
|
135
133
|
var showDefaultBodiedStyles = isBodiedMacro;
|
|
136
|
-
var shouldUseMultiBodiedMacroPresentation = isMultiBodiedMacro && (0, _expValEquals.expValEquals)('confluence_native_tabs_experiment', 'isEnabled', true);
|
|
137
134
|
var containerClassNames = (0, _classnames.default)({
|
|
138
|
-
bodied: isBodiedMacro
|
|
135
|
+
bodied: isBodiedMacro
|
|
139
136
|
});
|
|
140
137
|
var labelClassNames = (0, _classnames.default)('extension-label', {
|
|
141
138
|
nested: isNodeNested,
|
|
@@ -146,8 +143,8 @@ var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
|
|
|
146
143
|
'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
|
|
147
144
|
'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView,
|
|
148
145
|
// Need this separate class since we don't ever want to show the label during view mode
|
|
149
|
-
'remove-left-margin':
|
|
150
|
-
'remove-nested-left-margin': isNodeNested &&
|
|
146
|
+
'remove-left-margin': !isBodiedMacro && !isInlineExtension && !isNodeNested,
|
|
147
|
+
'remove-nested-left-margin': isNodeNested && !isBodiedMacro && !isInlineExtension
|
|
151
148
|
});
|
|
152
149
|
var iconClassNames = (0, _classnames.default)({
|
|
153
150
|
'extension-icon': true
|
|
@@ -199,12 +196,12 @@ var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
|
|
|
199
196
|
// Ignored via go/ees005
|
|
200
197
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
201
198
|
}, tooltipProps, {
|
|
202
|
-
css: [labelStyles, !showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI
|
|
199
|
+
css: [labelStyles, !showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) && hideLabelStyles]
|
|
203
200
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
204
201
|
,
|
|
205
202
|
className: labelClassNames
|
|
206
203
|
}), text, (0, _react2.jsx)("span", {
|
|
207
|
-
css: [iconStyles, isBodiedMacro &&
|
|
204
|
+
css: [iconStyles, isBodiedMacro && bodiedMacroIconStyles]
|
|
208
205
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
209
206
|
,
|
|
210
207
|
className: iconClassNames,
|
|
@@ -32,15 +32,13 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
|
|
|
32
32
|
customContainerStyles = _ref.customContainerStyles,
|
|
33
33
|
isNodeHovered = _ref.isNodeHovered,
|
|
34
34
|
isNodeNested = _ref.isNodeNested,
|
|
35
|
-
isNodeSelected = _ref.isNodeSelected,
|
|
36
35
|
setIsNodeHovered = _ref.setIsNodeHovered,
|
|
37
36
|
isBodiedMacro = _ref.isBodiedMacro,
|
|
38
37
|
showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView,
|
|
39
38
|
showUpdatedLivePages1PBodiedExtensionUI = _ref.showUpdatedLivePages1PBodiedExtensionUI,
|
|
40
39
|
showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
|
|
41
40
|
setShowBodiedExtensionRendererView = _ref.setShowBodiedExtensionRendererView,
|
|
42
|
-
pluginInjectionApi = _ref.pluginInjectionApi
|
|
43
|
-
isMultiBodiedMacro = _ref.isMultiBodiedMacro;
|
|
41
|
+
pluginInjectionApi = _ref.pluginInjectionApi;
|
|
44
42
|
var capitalizedTitle = capitalizeFirstLetter(title);
|
|
45
43
|
if (showMacroInteractionDesignUpdates) {
|
|
46
44
|
return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ExtensionLabel.ExtensionLabel, {
|
|
@@ -48,15 +46,13 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
|
|
|
48
46
|
extensionName: extensionName,
|
|
49
47
|
isNodeHovered: isNodeHovered,
|
|
50
48
|
isNodeNested: isNodeNested,
|
|
51
|
-
isNodeSelected: isNodeSelected,
|
|
52
49
|
customContainerStyles: customContainerStyles,
|
|
53
50
|
setIsNodeHovered: setIsNodeHovered,
|
|
54
51
|
isBodiedMacro: isBodiedMacro,
|
|
55
52
|
showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
|
|
56
53
|
showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
|
|
57
54
|
showBodiedExtensionRendererView: showBodiedExtensionRendererView,
|
|
58
|
-
pluginInjectionApi: pluginInjectionApi
|
|
59
|
-
isMultiBodiedMacro: isMultiBodiedMacro
|
|
55
|
+
pluginInjectionApi: pluginInjectionApi
|
|
60
56
|
}), showLivePagesBodiedMacrosRendererView && isBodiedMacro && (0, _react2.jsx)(_EditToggle.EditToggle, {
|
|
61
57
|
isNodeHovered: isNodeHovered,
|
|
62
58
|
setIsNodeHovered: setIsNodeHovered,
|
|
@@ -49,7 +49,6 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
49
49
|
(0, _defineProperty2.default)(_this, "renderFallback", function (lozengeData) {
|
|
50
50
|
var _this$props = _this.props,
|
|
51
51
|
showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
|
|
52
|
-
isNodeSelected = _this$props.isNodeSelected,
|
|
53
52
|
isNodeHovered = _this$props.isNodeHovered,
|
|
54
53
|
isNodeNested = _this$props.isNodeNested,
|
|
55
54
|
customContainerStyles = _this$props.customContainerStyles,
|
|
@@ -59,8 +58,7 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
59
58
|
showUpdatedLivePages1PBodiedExtensionUI = _this$props.showUpdatedLivePages1PBodiedExtensionUI,
|
|
60
59
|
showBodiedExtensionRendererView = _this$props.showBodiedExtensionRendererView,
|
|
61
60
|
setShowBodiedExtensionRendererView = _this$props.setShowBodiedExtensionRendererView,
|
|
62
|
-
pluginInjectionApi = _this$props.pluginInjectionApi
|
|
63
|
-
isMultiBodiedMacro = _this$props.isMultiBodiedMacro;
|
|
61
|
+
pluginInjectionApi = _this$props.pluginInjectionApi;
|
|
64
62
|
var _this$props$node$attr = _this.props.node.attrs,
|
|
65
63
|
parameters = _this$props$node$attr.parameters,
|
|
66
64
|
extensionKey = _this$props$node$attr.extensionKey;
|
|
@@ -69,7 +67,6 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
69
67
|
var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
|
|
70
68
|
return (0, _react2.jsx)(_LozengeComponent.LozengeComponent, {
|
|
71
69
|
isNodeHovered: isNodeHovered,
|
|
72
|
-
isNodeSelected: isNodeSelected,
|
|
73
70
|
isNodeNested: isNodeNested,
|
|
74
71
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
75
72
|
extensionName: name,
|
|
@@ -84,8 +81,7 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
84
81
|
showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
|
|
85
82
|
showBodiedExtensionRendererView: showBodiedExtensionRendererView,
|
|
86
83
|
setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView,
|
|
87
|
-
pluginInjectionApi: pluginInjectionApi
|
|
88
|
-
isMultiBodiedMacro: isMultiBodiedMacro
|
|
84
|
+
pluginInjectionApi: pluginInjectionApi
|
|
89
85
|
});
|
|
90
86
|
});
|
|
91
87
|
return _this;
|
|
@@ -260,7 +260,9 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
|
|
|
260
260
|
editorAppearance: editorAppearance,
|
|
261
261
|
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
262
262
|
isNodeSelected: selectedNode === node,
|
|
263
|
+
isNodeHovered: this.state.isNodeHovered,
|
|
263
264
|
isNodeNested: isNodeNested,
|
|
265
|
+
setIsNodeHovered: this.setIsNodeHovered,
|
|
264
266
|
isLivePageViewMode: isLivePageViewMode,
|
|
265
267
|
allowBodiedOverride: allowBodiedOverride
|
|
266
268
|
});
|
|
@@ -21,6 +21,7 @@ var _hooks = require("../../hooks");
|
|
|
21
21
|
var _MultiBodiedExtension = require("../../ui/MultiBodiedExtension");
|
|
22
22
|
var _utils = require("../../utils");
|
|
23
23
|
var _Lozenge = _interopRequireDefault(require("../Extension/Lozenge"));
|
|
24
|
+
var _ExtensionFloatingLabel = require("../Extension/Lozenge/ExtensionFloatingLabel");
|
|
24
25
|
var _shouldExtensionBreakout = require("../utils/should-extension-breakout");
|
|
25
26
|
var _actionApi = require("./action-api");
|
|
26
27
|
var _styles = require("./styles");
|
|
@@ -49,6 +50,11 @@ var imageStyles = (0, _react2.css)({
|
|
|
49
50
|
maxWidth: '24px'
|
|
50
51
|
});
|
|
51
52
|
var hoverStyles = (0, _react2.css)({
|
|
53
|
+
'&:hover': {
|
|
54
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
var hoverStylesOld = (0, _react2.css)({
|
|
52
58
|
'&:hover': {
|
|
53
59
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8C8F97)")
|
|
54
60
|
}
|
|
@@ -236,11 +242,14 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
|
|
|
236
242
|
breakoutStyles = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_calculateBreakoutSty), _calculateBreakoutSty));
|
|
237
243
|
mbeWrapperStyles = breakoutStyles;
|
|
238
244
|
}
|
|
239
|
-
var
|
|
240
|
-
var isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos,
|
|
245
|
+
var shouldUseUpdatedChrome = (0, _expValEquals.expValEquals)('confluence_native_tabs_experiment', 'isEnabled', true);
|
|
246
|
+
var isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseUpdatedChrome && !isLivePageViewMode);
|
|
241
247
|
var isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
|
|
248
|
+
var shouldShowChromeOnInteraction = isNodeHovered || isMultiBodiedExtensionActive;
|
|
249
|
+
var shouldShowMultiBodiedExtensionChrome = shouldUseUpdatedChrome ? !isLivePageViewMode && shouldShowChromeOnInteraction : true;
|
|
242
250
|
var wrapperClassNames = (0, _classnames.default)('multiBodiedExtension--wrapper', 'extension-container', 'block', {
|
|
243
|
-
'with-border': showMacroInteractionDesignUpdates &&
|
|
251
|
+
'with-border': showMacroInteractionDesignUpdates && shouldShowMultiBodiedExtensionChrome,
|
|
252
|
+
'with-selected-border': showMacroInteractionDesignUpdates && shouldUseUpdatedChrome && !isLivePageViewMode && isNodeSelected,
|
|
244
253
|
'with-danger-overlay': showMacroInteractionDesignUpdates,
|
|
245
254
|
'with-padding-background-styles': showMacroInteractionDesignUpdates,
|
|
246
255
|
'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested
|
|
@@ -261,8 +270,9 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
|
|
|
261
270
|
setIsNodeHovered(didHover);
|
|
262
271
|
}
|
|
263
272
|
};
|
|
264
|
-
|
|
265
|
-
|
|
273
|
+
var shouldRenderExtensionLozenge = showMacroInteractionDesignUpdates && !isLivePageViewMode && !shouldUseUpdatedChrome;
|
|
274
|
+
var shouldRenderFloatingLabel = showMacroInteractionDesignUpdates && !isLivePageViewMode && shouldUseUpdatedChrome && shouldShowChromeOnInteraction;
|
|
275
|
+
return (0, _react2.jsx)(_react.Fragment, null, shouldRenderExtensionLozenge && (0, _react2.jsx)(_Lozenge.default, {
|
|
266
276
|
node: node,
|
|
267
277
|
showMacroInteractionDesignUpdates: true,
|
|
268
278
|
customContainerStyles: mbeWrapperStyles,
|
|
@@ -270,14 +280,13 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
|
|
|
270
280
|
isNodeNested: isNodeNested,
|
|
271
281
|
setIsNodeHovered: setIsNodeHovered,
|
|
272
282
|
isBodiedMacro: true,
|
|
273
|
-
isMultiBodiedMacro: shouldUseNativeTabsPresentation,
|
|
274
283
|
pluginInjectionApi: pluginInjectionApi
|
|
275
284
|
}), (0, _react2.jsx)("div", {
|
|
276
285
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
277
286
|
className: wrapperClassNames,
|
|
278
287
|
css: [/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
|
|
279
|
-
|
|
280
|
-
showMacroInteractionDesignUpdates && !isLivePageViewMode && hoverStyles],
|
|
288
|
+
shouldUseUpdatedChrome ? _styles.mbeExtensionWrapperCSSStyles : _styles.mbeExtensionWrapperCSSStylesOld, /* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage */
|
|
289
|
+
showMacroInteractionDesignUpdates && !isLivePageViewMode && (shouldUseUpdatedChrome ? hoverStyles : hoverStylesOld)],
|
|
281
290
|
"data-testid": "multiBodiedExtension--wrapper-editor",
|
|
282
291
|
"data-layout": node.attrs.layout
|
|
283
292
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
@@ -294,9 +303,13 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
|
|
|
294
303
|
return handleMouseEvent(false);
|
|
295
304
|
},
|
|
296
305
|
onBlur: (0, _expValEquals.expValEquals)('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined
|
|
297
|
-
}, (0, _react2.jsx)(
|
|
306
|
+
}, shouldRenderFloatingLabel && (0, _react2.jsx)(_ExtensionFloatingLabel.ExtensionFloatingLabel, {
|
|
307
|
+
title: title,
|
|
308
|
+
isSelected: isNodeSelected,
|
|
309
|
+
testId: "multiBodiedExtension-floating-label"
|
|
310
|
+
}), (0, _react2.jsx)("div", {
|
|
298
311
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
299
|
-
css:
|
|
312
|
+
css: shouldUseUpdatedChrome ? _styles.overlayStyles : _styles.overlayStylesOld
|
|
300
313
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
301
314
|
,
|
|
302
315
|
className: overlayClassNames,
|
|
@@ -40,6 +40,10 @@ var mbeExtensionWrapperCSSStyles = exports.mbeExtensionWrapperCSSStyles = (0, _r
|
|
|
40
40
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
|
|
41
41
|
},
|
|
42
42
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
43
|
+
'&.with-selected-border': {
|
|
44
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-focused, #4688EC)")
|
|
45
|
+
},
|
|
46
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
43
47
|
'&.with-hover-border': {
|
|
44
48
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8C8F97)")
|
|
45
49
|
},
|
|
@@ -28,7 +28,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
|
|
|
28
28
|
var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
|
|
29
29
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
30
30
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
31
|
-
var packageVersion = "116.
|
|
31
|
+
var packageVersion = "116.33.1";
|
|
32
32
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
33
33
|
// Remove URL as it has UGC
|
|
34
34
|
// Ignored via go/ees007
|
|
@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
24
24
|
* @jsx jsx
|
|
25
25
|
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
26
26
|
var packageName = "@atlaskit/editor-common";
|
|
27
|
-
var packageVersion = "116.
|
|
27
|
+
var packageVersion = "116.33.1";
|
|
28
28
|
var halfFocusRing = 1;
|
|
29
29
|
var dropOffset = '0, 8';
|
|
30
30
|
var fadeIn = (0, _react2.keyframes)({
|
|
@@ -40,7 +40,6 @@ function ExtensionWithPluginState(props) {
|
|
|
40
40
|
hideFrame,
|
|
41
41
|
editorAppearance,
|
|
42
42
|
macroInteractionDesignFeatureFlags,
|
|
43
|
-
isNodeSelected,
|
|
44
43
|
isNodeHovered,
|
|
45
44
|
isNodeNested,
|
|
46
45
|
setIsNodeHovered,
|
|
@@ -144,7 +143,6 @@ function ExtensionWithPluginState(props) {
|
|
|
144
143
|
}
|
|
145
144
|
};
|
|
146
145
|
return jsx(Fragment, null, !showLegacyContentHeader && showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
|
|
147
|
-
isNodeSelected: isNodeSelected,
|
|
148
146
|
isNodeHovered: isNodeHovered,
|
|
149
147
|
isNodeNested: isNodeNested,
|
|
150
148
|
node: node,
|
|
@@ -196,7 +194,6 @@ function ExtensionWithPluginState(props) {
|
|
|
196
194
|
,
|
|
197
195
|
className: headerClassNames
|
|
198
196
|
}, !removeBorder && jsx(ExtensionLozenge, {
|
|
199
|
-
isNodeSelected: isNodeSelected,
|
|
200
197
|
node: node,
|
|
201
198
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
202
199
|
pluginInjectionApi: pluginInjectionApi
|
|
@@ -53,7 +53,6 @@ const InlineExtension = props => {
|
|
|
53
53
|
node,
|
|
54
54
|
pluginInjectionApi,
|
|
55
55
|
macroInteractionDesignFeatureFlags,
|
|
56
|
-
isNodeSelected,
|
|
57
56
|
children,
|
|
58
57
|
isNodeHovered,
|
|
59
58
|
setIsNodeHovered,
|
|
@@ -94,7 +93,6 @@ const InlineExtension = props => {
|
|
|
94
93
|
};
|
|
95
94
|
const inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
|
|
96
95
|
node: node,
|
|
97
|
-
isNodeSelected: isNodeSelected,
|
|
98
96
|
isNodeHovered: isNodeHovered,
|
|
99
97
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
100
98
|
setIsNodeHovered: setIsNodeHovered,
|
|
@@ -119,7 +117,6 @@ const InlineExtension = props => {
|
|
|
119
117
|
className: "extension-overlay"
|
|
120
118
|
}), children ? children : jsx(ExtensionLozenge, {
|
|
121
119
|
node: node,
|
|
122
|
-
isNodeSelected: isNodeSelected,
|
|
123
120
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
124
121
|
pluginInjectionApi: pluginInjectionApi
|
|
125
122
|
})));
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
|
|
2
|
+
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
3
|
+
._zulp1b66{gap:var(--ds-space-050,4px)}._154i14id{top:-10px}
|
|
4
|
+
._154id439{top:-14px}
|
|
5
|
+
._16qsglyw{box-shadow:none}
|
|
6
|
+
._19bvu2gc{padding-left:var(--ds-space-100,8px)}
|
|
7
|
+
._1bah1h6o{justify-content:center}
|
|
8
|
+
._1e0c1txw{display:flex}
|
|
9
|
+
._1pbycs5v{z-index:2}
|
|
10
|
+
._1xi2utpp{right:var(--ds-space-150,9pt)}
|
|
11
|
+
._3um0ewfl{visibility:visible}
|
|
12
|
+
._4cvr1h6o{align-items:center}
|
|
13
|
+
._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
|
|
14
|
+
._bfhkvuon{background-color:var(--ds-surface,#fff)}
|
|
15
|
+
._ca0q1b66{padding-top:var(--ds-space-050,4px)}
|
|
16
|
+
._kqswstnw{position:absolute}
|
|
17
|
+
._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
|
|
18
|
+
._p12f11ux{max-width:140px}
|
|
19
|
+
._tzy4kb7n{opacity:1}
|
|
20
|
+
._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/* ExtensionFloatingLabel.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import "./ExtensionFloatingLabel.compiled.css";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
+
import { Text } from '@atlaskit/primitives/compiled';
|
|
6
|
+
const floatingLabelStyles = {
|
|
7
|
+
base: "_2rkofajl _zulp1b66 _4cvr1h6o _bfhkvuon _16qsglyw _1e0c1txw _1bah1h6o _p12f11ux _tzy4kb7n _19bvu2gc _u5f3u2gc _kqswstnw _1xi2utpp _154i14id _3um0ewfl _1pbycs5v",
|
|
8
|
+
selected: "_bfhk15s3 _n3td1b66 _ca0q1b66 _154id439"
|
|
9
|
+
};
|
|
10
|
+
export const ExtensionFloatingLabel = ({
|
|
11
|
+
isSelected,
|
|
12
|
+
testId,
|
|
13
|
+
title
|
|
14
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
15
|
+
contentEditable: false,
|
|
16
|
+
"data-testid": testId,
|
|
17
|
+
className: ax([floatingLabelStyles.base, isSelected && floatingLabelStyles.selected])
|
|
18
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
19
|
+
maxLines: 1,
|
|
20
|
+
size: "small",
|
|
21
|
+
color: isSelected ? 'color.text.selected' : 'color.text.subtle'
|
|
22
|
+
}, title));
|
|
@@ -114,20 +114,17 @@ export const ExtensionLabel = ({
|
|
|
114
114
|
extensionName,
|
|
115
115
|
customContainerStyles,
|
|
116
116
|
isNodeNested,
|
|
117
|
-
isNodeSelected,
|
|
118
117
|
setIsNodeHovered,
|
|
119
118
|
isBodiedMacro,
|
|
120
119
|
showUpdatedLivePages1PBodiedExtensionUI,
|
|
121
120
|
showLivePagesBodiedMacrosRendererView,
|
|
122
121
|
showBodiedExtensionRendererView,
|
|
123
|
-
pluginInjectionApi: _pluginInjectionApi
|
|
124
|
-
isMultiBodiedMacro
|
|
122
|
+
pluginInjectionApi: _pluginInjectionApi
|
|
125
123
|
}) => {
|
|
126
124
|
const isInlineExtension = extensionName === 'inlineExtension';
|
|
127
125
|
const showDefaultBodiedStyles = isBodiedMacro;
|
|
128
|
-
const shouldUseMultiBodiedMacroPresentation = isMultiBodiedMacro && expValEquals('confluence_native_tabs_experiment', 'isEnabled', true);
|
|
129
126
|
const containerClassNames = classnames({
|
|
130
|
-
bodied: isBodiedMacro
|
|
127
|
+
bodied: isBodiedMacro
|
|
131
128
|
});
|
|
132
129
|
const labelClassNames = classnames('extension-label', {
|
|
133
130
|
nested: isNodeNested,
|
|
@@ -138,8 +135,8 @@ export const ExtensionLabel = ({
|
|
|
138
135
|
'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
|
|
139
136
|
'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView,
|
|
140
137
|
// Need this separate class since we don't ever want to show the label during view mode
|
|
141
|
-
'remove-left-margin':
|
|
142
|
-
'remove-nested-left-margin': isNodeNested &&
|
|
138
|
+
'remove-left-margin': !isBodiedMacro && !isInlineExtension && !isNodeNested,
|
|
139
|
+
'remove-nested-left-margin': isNodeNested && !isBodiedMacro && !isInlineExtension
|
|
143
140
|
});
|
|
144
141
|
const iconClassNames = classnames({
|
|
145
142
|
'extension-icon': true
|
|
@@ -188,12 +185,12 @@ export const ExtensionLabel = ({
|
|
|
188
185
|
// Ignored via go/ees005
|
|
189
186
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
190
187
|
}, tooltipProps, {
|
|
191
|
-
css: [labelStyles, !showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI
|
|
188
|
+
css: [labelStyles, !showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) && hideLabelStyles]
|
|
192
189
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
193
190
|
,
|
|
194
191
|
className: labelClassNames
|
|
195
192
|
}), text, jsx("span", {
|
|
196
|
-
css: [iconStyles, isBodiedMacro &&
|
|
193
|
+
css: [iconStyles, isBodiedMacro && bodiedMacroIconStyles]
|
|
197
194
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
198
195
|
,
|
|
199
196
|
className: iconClassNames,
|
|
@@ -26,15 +26,13 @@ export const LozengeComponent = ({
|
|
|
26
26
|
customContainerStyles,
|
|
27
27
|
isNodeHovered,
|
|
28
28
|
isNodeNested,
|
|
29
|
-
isNodeSelected,
|
|
30
29
|
setIsNodeHovered,
|
|
31
30
|
isBodiedMacro,
|
|
32
31
|
showLivePagesBodiedMacrosRendererView,
|
|
33
32
|
showUpdatedLivePages1PBodiedExtensionUI,
|
|
34
33
|
showBodiedExtensionRendererView,
|
|
35
34
|
setShowBodiedExtensionRendererView,
|
|
36
|
-
pluginInjectionApi
|
|
37
|
-
isMultiBodiedMacro
|
|
35
|
+
pluginInjectionApi
|
|
38
36
|
}) => {
|
|
39
37
|
const capitalizedTitle = capitalizeFirstLetter(title);
|
|
40
38
|
if (showMacroInteractionDesignUpdates) {
|
|
@@ -43,15 +41,13 @@ export const LozengeComponent = ({
|
|
|
43
41
|
extensionName: extensionName,
|
|
44
42
|
isNodeHovered: isNodeHovered,
|
|
45
43
|
isNodeNested: isNodeNested,
|
|
46
|
-
isNodeSelected: isNodeSelected,
|
|
47
44
|
customContainerStyles: customContainerStyles,
|
|
48
45
|
setIsNodeHovered: setIsNodeHovered,
|
|
49
46
|
isBodiedMacro: isBodiedMacro,
|
|
50
47
|
showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
|
|
51
48
|
showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
|
|
52
49
|
showBodiedExtensionRendererView: showBodiedExtensionRendererView,
|
|
53
|
-
pluginInjectionApi: pluginInjectionApi
|
|
54
|
-
isMultiBodiedMacro: isMultiBodiedMacro
|
|
50
|
+
pluginInjectionApi: pluginInjectionApi
|
|
55
51
|
}), showLivePagesBodiedMacrosRendererView && isBodiedMacro && jsx(EditToggle, {
|
|
56
52
|
isNodeHovered: isNodeHovered,
|
|
57
53
|
setIsNodeHovered: setIsNodeHovered,
|
|
@@ -34,7 +34,6 @@ export default class ExtensionLozenge extends Component {
|
|
|
34
34
|
_defineProperty(this, "renderFallback", lozengeData => {
|
|
35
35
|
const {
|
|
36
36
|
showMacroInteractionDesignUpdates,
|
|
37
|
-
isNodeSelected,
|
|
38
37
|
isNodeHovered,
|
|
39
38
|
isNodeNested,
|
|
40
39
|
customContainerStyles,
|
|
@@ -44,8 +43,7 @@ export default class ExtensionLozenge extends Component {
|
|
|
44
43
|
showUpdatedLivePages1PBodiedExtensionUI,
|
|
45
44
|
showBodiedExtensionRendererView,
|
|
46
45
|
setShowBodiedExtensionRendererView,
|
|
47
|
-
pluginInjectionApi
|
|
48
|
-
isMultiBodiedMacro
|
|
46
|
+
pluginInjectionApi
|
|
49
47
|
} = this.props;
|
|
50
48
|
const {
|
|
51
49
|
parameters,
|
|
@@ -58,7 +56,6 @@ export default class ExtensionLozenge extends Component {
|
|
|
58
56
|
const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
|
|
59
57
|
return jsx(LozengeComponent, {
|
|
60
58
|
isNodeHovered: isNodeHovered,
|
|
61
|
-
isNodeSelected: isNodeSelected,
|
|
62
59
|
isNodeNested: isNodeNested,
|
|
63
60
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
64
61
|
extensionName: name,
|
|
@@ -73,8 +70,7 @@ export default class ExtensionLozenge extends Component {
|
|
|
73
70
|
showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
|
|
74
71
|
showBodiedExtensionRendererView: showBodiedExtensionRendererView,
|
|
75
72
|
setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView,
|
|
76
|
-
pluginInjectionApi: pluginInjectionApi
|
|
77
|
-
isMultiBodiedMacro: isMultiBodiedMacro
|
|
73
|
+
pluginInjectionApi: pluginInjectionApi
|
|
78
74
|
});
|
|
79
75
|
});
|
|
80
76
|
}
|
|
@@ -215,7 +215,9 @@ class ExtensionComponentInner extends Component {
|
|
|
215
215
|
editorAppearance: editorAppearance,
|
|
216
216
|
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
217
217
|
isNodeSelected: selectedNode === node,
|
|
218
|
+
isNodeHovered: this.state.isNodeHovered,
|
|
218
219
|
isNodeNested: isNodeNested,
|
|
220
|
+
setIsNodeHovered: this.setIsNodeHovered,
|
|
219
221
|
isLivePageViewMode: isLivePageViewMode,
|
|
220
222
|
allowBodiedOverride: allowBodiedOverride
|
|
221
223
|
});
|
|
@@ -17,6 +17,7 @@ import { useSharedPluginStateWithSelector } from '../../hooks';
|
|
|
17
17
|
import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
|
|
18
18
|
import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
|
|
19
19
|
import ExtensionLozenge from '../Extension/Lozenge';
|
|
20
|
+
import { ExtensionFloatingLabel } from '../Extension/Lozenge/ExtensionFloatingLabel';
|
|
20
21
|
import { shouldExtensionBreakout } from '../utils/should-extension-breakout';
|
|
21
22
|
import { useMultiBodiedExtensionActions } from './action-api';
|
|
22
23
|
import { mbeExtensionWrapperCSSStyles, mbeExtensionWrapperCSSStylesOld, overlayStyles, overlayStylesOld } from './styles';
|
|
@@ -37,6 +38,11 @@ const imageStyles = css({
|
|
|
37
38
|
maxWidth: '24px'
|
|
38
39
|
});
|
|
39
40
|
const hoverStyles = css({
|
|
41
|
+
'&:hover': {
|
|
42
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
const hoverStylesOld = css({
|
|
40
46
|
'&:hover': {
|
|
41
47
|
boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8C8F97)"}`
|
|
42
48
|
}
|
|
@@ -222,11 +228,14 @@ const MultiBodiedExtensionWithWidth = ({
|
|
|
222
228
|
});
|
|
223
229
|
mbeWrapperStyles = breakoutStyles;
|
|
224
230
|
}
|
|
225
|
-
const
|
|
226
|
-
const isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos,
|
|
231
|
+
const shouldUseUpdatedChrome = expValEquals('confluence_native_tabs_experiment', 'isEnabled', true);
|
|
232
|
+
const isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseUpdatedChrome && !isLivePageViewMode);
|
|
227
233
|
const isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
|
|
234
|
+
const shouldShowChromeOnInteraction = isNodeHovered || isMultiBodiedExtensionActive;
|
|
235
|
+
const shouldShowMultiBodiedExtensionChrome = shouldUseUpdatedChrome ? !isLivePageViewMode && shouldShowChromeOnInteraction : true;
|
|
228
236
|
const wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block', {
|
|
229
|
-
'with-border': showMacroInteractionDesignUpdates &&
|
|
237
|
+
'with-border': showMacroInteractionDesignUpdates && shouldShowMultiBodiedExtensionChrome,
|
|
238
|
+
'with-selected-border': showMacroInteractionDesignUpdates && shouldUseUpdatedChrome && !isLivePageViewMode && isNodeSelected,
|
|
230
239
|
'with-danger-overlay': showMacroInteractionDesignUpdates,
|
|
231
240
|
'with-padding-background-styles': showMacroInteractionDesignUpdates,
|
|
232
241
|
'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested
|
|
@@ -247,8 +256,9 @@ const MultiBodiedExtensionWithWidth = ({
|
|
|
247
256
|
setIsNodeHovered(didHover);
|
|
248
257
|
}
|
|
249
258
|
};
|
|
250
|
-
|
|
251
|
-
|
|
259
|
+
const shouldRenderExtensionLozenge = showMacroInteractionDesignUpdates && !isLivePageViewMode && !shouldUseUpdatedChrome;
|
|
260
|
+
const shouldRenderFloatingLabel = showMacroInteractionDesignUpdates && !isLivePageViewMode && shouldUseUpdatedChrome && shouldShowChromeOnInteraction;
|
|
261
|
+
return jsx(Fragment, null, shouldRenderExtensionLozenge && jsx(ExtensionLozenge, {
|
|
252
262
|
node: node,
|
|
253
263
|
showMacroInteractionDesignUpdates: true,
|
|
254
264
|
customContainerStyles: mbeWrapperStyles,
|
|
@@ -256,14 +266,13 @@ const MultiBodiedExtensionWithWidth = ({
|
|
|
256
266
|
isNodeNested: isNodeNested,
|
|
257
267
|
setIsNodeHovered: setIsNodeHovered,
|
|
258
268
|
isBodiedMacro: true,
|
|
259
|
-
isMultiBodiedMacro: shouldUseNativeTabsPresentation,
|
|
260
269
|
pluginInjectionApi: pluginInjectionApi
|
|
261
270
|
}), jsx("div", {
|
|
262
271
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
263
272
|
className: wrapperClassNames,
|
|
264
273
|
css: [/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
|
|
265
|
-
|
|
266
|
-
showMacroInteractionDesignUpdates && !isLivePageViewMode && hoverStyles],
|
|
274
|
+
shouldUseUpdatedChrome ? mbeExtensionWrapperCSSStyles : mbeExtensionWrapperCSSStylesOld, /* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage */
|
|
275
|
+
showMacroInteractionDesignUpdates && !isLivePageViewMode && (shouldUseUpdatedChrome ? hoverStyles : hoverStylesOld)],
|
|
267
276
|
"data-testid": "multiBodiedExtension--wrapper-editor",
|
|
268
277
|
"data-layout": node.attrs.layout
|
|
269
278
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
@@ -276,9 +285,13 @@ const MultiBodiedExtensionWithWidth = ({
|
|
|
276
285
|
onFocus: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? () => {} : undefined,
|
|
277
286
|
onMouseLeave: () => handleMouseEvent(false),
|
|
278
287
|
onBlur: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? () => {} : undefined
|
|
279
|
-
}, jsx(
|
|
288
|
+
}, shouldRenderFloatingLabel && jsx(ExtensionFloatingLabel, {
|
|
289
|
+
title: title,
|
|
290
|
+
isSelected: isNodeSelected,
|
|
291
|
+
testId: "multiBodiedExtension-floating-label"
|
|
292
|
+
}), jsx("div", {
|
|
280
293
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
281
|
-
css:
|
|
294
|
+
css: shouldUseUpdatedChrome ? overlayStyles : overlayStylesOld
|
|
282
295
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
283
296
|
,
|
|
284
297
|
className: overlayClassNames,
|
|
@@ -34,6 +34,10 @@ export const mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
|
|
|
34
34
|
boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`
|
|
35
35
|
},
|
|
36
36
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
37
|
+
'&.with-selected-border': {
|
|
38
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-focused, #4688EC)"}`
|
|
39
|
+
},
|
|
40
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
37
41
|
'&.with-hover-border': {
|
|
38
42
|
boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8C8F97)"}`
|
|
39
43
|
},
|
|
@@ -14,7 +14,7 @@ const NETWORK_FAILURE_REGEX = /^network failure/i;
|
|
|
14
14
|
const RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
|
|
15
15
|
const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
16
16
|
const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
17
|
-
const packageVersion = "116.
|
|
17
|
+
const packageVersion = "116.33.1";
|
|
18
18
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
19
19
|
// Remove URL as it has UGC
|
|
20
20
|
// Ignored via go/ees007
|
|
@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
|
14
14
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
15
|
import Layer from '../Layer';
|
|
16
16
|
const packageName = "@atlaskit/editor-common";
|
|
17
|
-
const packageVersion = "116.
|
|
17
|
+
const packageVersion = "116.33.1";
|
|
18
18
|
const halfFocusRing = 1;
|
|
19
19
|
const dropOffset = '0, 8';
|
|
20
20
|
const fadeIn = keyframes({
|
|
@@ -44,7 +44,6 @@ function ExtensionWithPluginState(props) {
|
|
|
44
44
|
hideFrame = props.hideFrame,
|
|
45
45
|
editorAppearance = props.editorAppearance,
|
|
46
46
|
macroInteractionDesignFeatureFlags = props.macroInteractionDesignFeatureFlags,
|
|
47
|
-
isNodeSelected = props.isNodeSelected,
|
|
48
47
|
isNodeHovered = props.isNodeHovered,
|
|
49
48
|
isNodeNested = props.isNodeNested,
|
|
50
49
|
setIsNodeHovered = props.setIsNodeHovered,
|
|
@@ -137,7 +136,6 @@ function ExtensionWithPluginState(props) {
|
|
|
137
136
|
}
|
|
138
137
|
};
|
|
139
138
|
return jsx(Fragment, null, !showLegacyContentHeader && showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
|
|
140
|
-
isNodeSelected: isNodeSelected,
|
|
141
139
|
isNodeHovered: isNodeHovered,
|
|
142
140
|
isNodeNested: isNodeNested,
|
|
143
141
|
node: node,
|
|
@@ -193,7 +191,6 @@ function ExtensionWithPluginState(props) {
|
|
|
193
191
|
,
|
|
194
192
|
className: headerClassNames
|
|
195
193
|
}, !removeBorder && jsx(ExtensionLozenge, {
|
|
196
|
-
isNodeSelected: isNodeSelected,
|
|
197
194
|
node: node,
|
|
198
195
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
199
196
|
pluginInjectionApi: pluginInjectionApi
|
|
@@ -52,7 +52,6 @@ var InlineExtension = function InlineExtension(props) {
|
|
|
52
52
|
var node = props.node,
|
|
53
53
|
pluginInjectionApi = props.pluginInjectionApi,
|
|
54
54
|
macroInteractionDesignFeatureFlags = props.macroInteractionDesignFeatureFlags,
|
|
55
|
-
isNodeSelected = props.isNodeSelected,
|
|
56
55
|
children = props.children,
|
|
57
56
|
isNodeHovered = props.isNodeHovered,
|
|
58
57
|
setIsNodeHovered = props.setIsNodeHovered,
|
|
@@ -90,7 +89,6 @@ var InlineExtension = function InlineExtension(props) {
|
|
|
90
89
|
};
|
|
91
90
|
var inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
|
|
92
91
|
node: node,
|
|
93
|
-
isNodeSelected: isNodeSelected,
|
|
94
92
|
isNodeHovered: isNodeHovered,
|
|
95
93
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
96
94
|
setIsNodeHovered: setIsNodeHovered,
|
|
@@ -119,7 +117,6 @@ var InlineExtension = function InlineExtension(props) {
|
|
|
119
117
|
className: "extension-overlay"
|
|
120
118
|
}), children ? children : jsx(ExtensionLozenge, {
|
|
121
119
|
node: node,
|
|
122
|
-
isNodeSelected: isNodeSelected,
|
|
123
120
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
124
121
|
pluginInjectionApi: pluginInjectionApi
|
|
125
122
|
})));
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
|
|
2
|
+
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
3
|
+
._zulp1b66{gap:var(--ds-space-050,4px)}._154i14id{top:-10px}
|
|
4
|
+
._154id439{top:-14px}
|
|
5
|
+
._16qsglyw{box-shadow:none}
|
|
6
|
+
._19bvu2gc{padding-left:var(--ds-space-100,8px)}
|
|
7
|
+
._1bah1h6o{justify-content:center}
|
|
8
|
+
._1e0c1txw{display:flex}
|
|
9
|
+
._1pbycs5v{z-index:2}
|
|
10
|
+
._1xi2utpp{right:var(--ds-space-150,9pt)}
|
|
11
|
+
._3um0ewfl{visibility:visible}
|
|
12
|
+
._4cvr1h6o{align-items:center}
|
|
13
|
+
._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
|
|
14
|
+
._bfhkvuon{background-color:var(--ds-surface,#fff)}
|
|
15
|
+
._ca0q1b66{padding-top:var(--ds-space-050,4px)}
|
|
16
|
+
._kqswstnw{position:absolute}
|
|
17
|
+
._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
|
|
18
|
+
._p12f11ux{max-width:140px}
|
|
19
|
+
._tzy4kb7n{opacity:1}
|
|
20
|
+
._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/* ExtensionFloatingLabel.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import "./ExtensionFloatingLabel.compiled.css";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
+
import { Text } from '@atlaskit/primitives/compiled';
|
|
6
|
+
var floatingLabelStyles = {
|
|
7
|
+
base: "_2rkofajl _zulp1b66 _4cvr1h6o _bfhkvuon _16qsglyw _1e0c1txw _1bah1h6o _p12f11ux _tzy4kb7n _19bvu2gc _u5f3u2gc _kqswstnw _1xi2utpp _154i14id _3um0ewfl _1pbycs5v",
|
|
8
|
+
selected: "_bfhk15s3 _n3td1b66 _ca0q1b66 _154id439"
|
|
9
|
+
};
|
|
10
|
+
export var ExtensionFloatingLabel = function ExtensionFloatingLabel(_ref) {
|
|
11
|
+
var isSelected = _ref.isSelected,
|
|
12
|
+
testId = _ref.testId,
|
|
13
|
+
title = _ref.title;
|
|
14
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
15
|
+
contentEditable: false,
|
|
16
|
+
"data-testid": testId,
|
|
17
|
+
className: ax([floatingLabelStyles.base, isSelected && floatingLabelStyles.selected])
|
|
18
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
19
|
+
maxLines: 1,
|
|
20
|
+
size: "small",
|
|
21
|
+
color: isSelected ? 'color.text.selected' : 'color.text.subtle'
|
|
22
|
+
}, title));
|
|
23
|
+
};
|
|
@@ -114,19 +114,16 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
|
|
|
114
114
|
extensionName = _ref.extensionName,
|
|
115
115
|
customContainerStyles = _ref.customContainerStyles,
|
|
116
116
|
isNodeNested = _ref.isNodeNested,
|
|
117
|
-
isNodeSelected = _ref.isNodeSelected,
|
|
118
117
|
setIsNodeHovered = _ref.setIsNodeHovered,
|
|
119
118
|
isBodiedMacro = _ref.isBodiedMacro,
|
|
120
119
|
showUpdatedLivePages1PBodiedExtensionUI = _ref.showUpdatedLivePages1PBodiedExtensionUI,
|
|
121
120
|
showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView,
|
|
122
121
|
showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
|
|
123
|
-
_pluginInjectionApi = _ref.pluginInjectionApi
|
|
124
|
-
isMultiBodiedMacro = _ref.isMultiBodiedMacro;
|
|
122
|
+
_pluginInjectionApi = _ref.pluginInjectionApi;
|
|
125
123
|
var isInlineExtension = extensionName === 'inlineExtension';
|
|
126
124
|
var showDefaultBodiedStyles = isBodiedMacro;
|
|
127
|
-
var shouldUseMultiBodiedMacroPresentation = isMultiBodiedMacro && expValEquals('confluence_native_tabs_experiment', 'isEnabled', true);
|
|
128
125
|
var containerClassNames = classnames({
|
|
129
|
-
bodied: isBodiedMacro
|
|
126
|
+
bodied: isBodiedMacro
|
|
130
127
|
});
|
|
131
128
|
var labelClassNames = classnames('extension-label', {
|
|
132
129
|
nested: isNodeNested,
|
|
@@ -137,8 +134,8 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
|
|
|
137
134
|
'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
|
|
138
135
|
'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView,
|
|
139
136
|
// Need this separate class since we don't ever want to show the label during view mode
|
|
140
|
-
'remove-left-margin':
|
|
141
|
-
'remove-nested-left-margin': isNodeNested &&
|
|
137
|
+
'remove-left-margin': !isBodiedMacro && !isInlineExtension && !isNodeNested,
|
|
138
|
+
'remove-nested-left-margin': isNodeNested && !isBodiedMacro && !isInlineExtension
|
|
142
139
|
});
|
|
143
140
|
var iconClassNames = classnames({
|
|
144
141
|
'extension-icon': true
|
|
@@ -190,12 +187,12 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
|
|
|
190
187
|
// Ignored via go/ees005
|
|
191
188
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
192
189
|
}, tooltipProps, {
|
|
193
|
-
css: [labelStyles, !showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI
|
|
190
|
+
css: [labelStyles, !showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) && hideLabelStyles]
|
|
194
191
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
195
192
|
,
|
|
196
193
|
className: labelClassNames
|
|
197
194
|
}), text, jsx("span", {
|
|
198
|
-
css: [iconStyles, isBodiedMacro &&
|
|
195
|
+
css: [iconStyles, isBodiedMacro && bodiedMacroIconStyles]
|
|
199
196
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
200
197
|
,
|
|
201
198
|
className: iconClassNames,
|
|
@@ -29,15 +29,13 @@ export var LozengeComponent = function LozengeComponent(_ref) {
|
|
|
29
29
|
customContainerStyles = _ref.customContainerStyles,
|
|
30
30
|
isNodeHovered = _ref.isNodeHovered,
|
|
31
31
|
isNodeNested = _ref.isNodeNested,
|
|
32
|
-
isNodeSelected = _ref.isNodeSelected,
|
|
33
32
|
setIsNodeHovered = _ref.setIsNodeHovered,
|
|
34
33
|
isBodiedMacro = _ref.isBodiedMacro,
|
|
35
34
|
showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView,
|
|
36
35
|
showUpdatedLivePages1PBodiedExtensionUI = _ref.showUpdatedLivePages1PBodiedExtensionUI,
|
|
37
36
|
showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
|
|
38
37
|
setShowBodiedExtensionRendererView = _ref.setShowBodiedExtensionRendererView,
|
|
39
|
-
pluginInjectionApi = _ref.pluginInjectionApi
|
|
40
|
-
isMultiBodiedMacro = _ref.isMultiBodiedMacro;
|
|
38
|
+
pluginInjectionApi = _ref.pluginInjectionApi;
|
|
41
39
|
var capitalizedTitle = capitalizeFirstLetter(title);
|
|
42
40
|
if (showMacroInteractionDesignUpdates) {
|
|
43
41
|
return jsx(Fragment, null, jsx(ExtensionLabel, {
|
|
@@ -45,15 +43,13 @@ export var LozengeComponent = function LozengeComponent(_ref) {
|
|
|
45
43
|
extensionName: extensionName,
|
|
46
44
|
isNodeHovered: isNodeHovered,
|
|
47
45
|
isNodeNested: isNodeNested,
|
|
48
|
-
isNodeSelected: isNodeSelected,
|
|
49
46
|
customContainerStyles: customContainerStyles,
|
|
50
47
|
setIsNodeHovered: setIsNodeHovered,
|
|
51
48
|
isBodiedMacro: isBodiedMacro,
|
|
52
49
|
showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
|
|
53
50
|
showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
|
|
54
51
|
showBodiedExtensionRendererView: showBodiedExtensionRendererView,
|
|
55
|
-
pluginInjectionApi: pluginInjectionApi
|
|
56
|
-
isMultiBodiedMacro: isMultiBodiedMacro
|
|
52
|
+
pluginInjectionApi: pluginInjectionApi
|
|
57
53
|
}), showLivePagesBodiedMacrosRendererView && isBodiedMacro && jsx(EditToggle, {
|
|
58
54
|
isNodeHovered: isNodeHovered,
|
|
59
55
|
setIsNodeHovered: setIsNodeHovered,
|
|
@@ -44,7 +44,6 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
|
|
|
44
44
|
_defineProperty(_this, "renderFallback", function (lozengeData) {
|
|
45
45
|
var _this$props = _this.props,
|
|
46
46
|
showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
|
|
47
|
-
isNodeSelected = _this$props.isNodeSelected,
|
|
48
47
|
isNodeHovered = _this$props.isNodeHovered,
|
|
49
48
|
isNodeNested = _this$props.isNodeNested,
|
|
50
49
|
customContainerStyles = _this$props.customContainerStyles,
|
|
@@ -54,8 +53,7 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
|
|
|
54
53
|
showUpdatedLivePages1PBodiedExtensionUI = _this$props.showUpdatedLivePages1PBodiedExtensionUI,
|
|
55
54
|
showBodiedExtensionRendererView = _this$props.showBodiedExtensionRendererView,
|
|
56
55
|
setShowBodiedExtensionRendererView = _this$props.setShowBodiedExtensionRendererView,
|
|
57
|
-
pluginInjectionApi = _this$props.pluginInjectionApi
|
|
58
|
-
isMultiBodiedMacro = _this$props.isMultiBodiedMacro;
|
|
56
|
+
pluginInjectionApi = _this$props.pluginInjectionApi;
|
|
59
57
|
var _this$props$node$attr = _this.props.node.attrs,
|
|
60
58
|
parameters = _this$props$node$attr.parameters,
|
|
61
59
|
extensionKey = _this$props$node$attr.extensionKey;
|
|
@@ -64,7 +62,6 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
|
|
|
64
62
|
var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
|
|
65
63
|
return jsx(LozengeComponent, {
|
|
66
64
|
isNodeHovered: isNodeHovered,
|
|
67
|
-
isNodeSelected: isNodeSelected,
|
|
68
65
|
isNodeNested: isNodeNested,
|
|
69
66
|
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
|
|
70
67
|
extensionName: name,
|
|
@@ -79,8 +76,7 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
|
|
|
79
76
|
showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
|
|
80
77
|
showBodiedExtensionRendererView: showBodiedExtensionRendererView,
|
|
81
78
|
setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView,
|
|
82
|
-
pluginInjectionApi: pluginInjectionApi
|
|
83
|
-
isMultiBodiedMacro: isMultiBodiedMacro
|
|
79
|
+
pluginInjectionApi: pluginInjectionApi
|
|
84
80
|
});
|
|
85
81
|
});
|
|
86
82
|
return _this;
|
|
@@ -251,7 +251,9 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component) {
|
|
|
251
251
|
editorAppearance: editorAppearance,
|
|
252
252
|
macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
|
|
253
253
|
isNodeSelected: selectedNode === node,
|
|
254
|
+
isNodeHovered: this.state.isNodeHovered,
|
|
254
255
|
isNodeNested: isNodeNested,
|
|
256
|
+
setIsNodeHovered: this.setIsNodeHovered,
|
|
255
257
|
isLivePageViewMode: isLivePageViewMode,
|
|
256
258
|
allowBodiedOverride: allowBodiedOverride
|
|
257
259
|
});
|
|
@@ -22,6 +22,7 @@ import { useSharedPluginStateWithSelector } from '../../hooks';
|
|
|
22
22
|
import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
|
|
23
23
|
import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
|
|
24
24
|
import ExtensionLozenge from '../Extension/Lozenge';
|
|
25
|
+
import { ExtensionFloatingLabel } from '../Extension/Lozenge/ExtensionFloatingLabel';
|
|
25
26
|
import { shouldExtensionBreakout } from '../utils/should-extension-breakout';
|
|
26
27
|
import { useMultiBodiedExtensionActions } from './action-api';
|
|
27
28
|
import { mbeExtensionWrapperCSSStyles, mbeExtensionWrapperCSSStylesOld, overlayStyles, overlayStylesOld } from './styles';
|
|
@@ -42,6 +43,11 @@ var imageStyles = css({
|
|
|
42
43
|
maxWidth: '24px'
|
|
43
44
|
});
|
|
44
45
|
var hoverStyles = css({
|
|
46
|
+
'&:hover': {
|
|
47
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
var hoverStylesOld = css({
|
|
45
51
|
'&:hover': {
|
|
46
52
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8C8F97)")
|
|
47
53
|
}
|
|
@@ -229,11 +235,14 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
|
|
|
229
235
|
breakoutStyles = _extends({}, (_objectDestructuringEmpty(_calculateBreakoutSty), _calculateBreakoutSty));
|
|
230
236
|
mbeWrapperStyles = breakoutStyles;
|
|
231
237
|
}
|
|
232
|
-
var
|
|
233
|
-
var isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos,
|
|
238
|
+
var shouldUseUpdatedChrome = expValEquals('confluence_native_tabs_experiment', 'isEnabled', true);
|
|
239
|
+
var isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseUpdatedChrome && !isLivePageViewMode);
|
|
234
240
|
var isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
|
|
241
|
+
var shouldShowChromeOnInteraction = isNodeHovered || isMultiBodiedExtensionActive;
|
|
242
|
+
var shouldShowMultiBodiedExtensionChrome = shouldUseUpdatedChrome ? !isLivePageViewMode && shouldShowChromeOnInteraction : true;
|
|
235
243
|
var wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block', {
|
|
236
|
-
'with-border': showMacroInteractionDesignUpdates &&
|
|
244
|
+
'with-border': showMacroInteractionDesignUpdates && shouldShowMultiBodiedExtensionChrome,
|
|
245
|
+
'with-selected-border': showMacroInteractionDesignUpdates && shouldUseUpdatedChrome && !isLivePageViewMode && isNodeSelected,
|
|
237
246
|
'with-danger-overlay': showMacroInteractionDesignUpdates,
|
|
238
247
|
'with-padding-background-styles': showMacroInteractionDesignUpdates,
|
|
239
248
|
'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested
|
|
@@ -254,8 +263,9 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
|
|
|
254
263
|
setIsNodeHovered(didHover);
|
|
255
264
|
}
|
|
256
265
|
};
|
|
257
|
-
|
|
258
|
-
|
|
266
|
+
var shouldRenderExtensionLozenge = showMacroInteractionDesignUpdates && !isLivePageViewMode && !shouldUseUpdatedChrome;
|
|
267
|
+
var shouldRenderFloatingLabel = showMacroInteractionDesignUpdates && !isLivePageViewMode && shouldUseUpdatedChrome && shouldShowChromeOnInteraction;
|
|
268
|
+
return jsx(Fragment, null, shouldRenderExtensionLozenge && jsx(ExtensionLozenge, {
|
|
259
269
|
node: node,
|
|
260
270
|
showMacroInteractionDesignUpdates: true,
|
|
261
271
|
customContainerStyles: mbeWrapperStyles,
|
|
@@ -263,14 +273,13 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
|
|
|
263
273
|
isNodeNested: isNodeNested,
|
|
264
274
|
setIsNodeHovered: setIsNodeHovered,
|
|
265
275
|
isBodiedMacro: true,
|
|
266
|
-
isMultiBodiedMacro: shouldUseNativeTabsPresentation,
|
|
267
276
|
pluginInjectionApi: pluginInjectionApi
|
|
268
277
|
}), jsx("div", {
|
|
269
278
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
270
279
|
className: wrapperClassNames,
|
|
271
280
|
css: [/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
|
|
272
|
-
|
|
273
|
-
showMacroInteractionDesignUpdates && !isLivePageViewMode && hoverStyles],
|
|
281
|
+
shouldUseUpdatedChrome ? mbeExtensionWrapperCSSStyles : mbeExtensionWrapperCSSStylesOld, /* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage */
|
|
282
|
+
showMacroInteractionDesignUpdates && !isLivePageViewMode && (shouldUseUpdatedChrome ? hoverStyles : hoverStylesOld)],
|
|
274
283
|
"data-testid": "multiBodiedExtension--wrapper-editor",
|
|
275
284
|
"data-layout": node.attrs.layout
|
|
276
285
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
@@ -287,9 +296,13 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
|
|
|
287
296
|
return handleMouseEvent(false);
|
|
288
297
|
},
|
|
289
298
|
onBlur: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined
|
|
290
|
-
}, jsx(
|
|
299
|
+
}, shouldRenderFloatingLabel && jsx(ExtensionFloatingLabel, {
|
|
300
|
+
title: title,
|
|
301
|
+
isSelected: isNodeSelected,
|
|
302
|
+
testId: "multiBodiedExtension-floating-label"
|
|
303
|
+
}), jsx("div", {
|
|
291
304
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
292
|
-
css:
|
|
305
|
+
css: shouldUseUpdatedChrome ? overlayStyles : overlayStylesOld
|
|
293
306
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
294
307
|
,
|
|
295
308
|
className: overlayClassNames,
|
|
@@ -34,6 +34,10 @@ export var mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
|
|
|
34
34
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
|
|
35
35
|
},
|
|
36
36
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
37
|
+
'&.with-selected-border': {
|
|
38
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-focused, #4688EC)")
|
|
39
|
+
},
|
|
40
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
37
41
|
'&.with-hover-border': {
|
|
38
42
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8C8F97)")
|
|
39
43
|
},
|
|
@@ -20,7 +20,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
|
|
|
20
20
|
var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
|
|
21
21
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
22
22
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
23
|
-
var packageVersion = "116.
|
|
23
|
+
var packageVersion = "116.33.1";
|
|
24
24
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
25
25
|
// Remove URL as it has UGC
|
|
26
26
|
// Ignored via go/ees007
|
|
@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
|
21
21
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
22
22
|
import Layer from '../Layer';
|
|
23
23
|
var packageName = "@atlaskit/editor-common";
|
|
24
|
-
var packageVersion = "116.
|
|
24
|
+
var packageVersion = "116.33.1";
|
|
25
25
|
var halfFocusRing = 1;
|
|
26
26
|
var dropOffset = '0, 8';
|
|
27
27
|
var fadeIn = keyframes({
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import type { ReactElement } from 'react';
|
|
6
|
+
type Props = {
|
|
7
|
+
isSelected?: boolean;
|
|
8
|
+
testId?: string;
|
|
9
|
+
title: string;
|
|
10
|
+
};
|
|
11
|
+
export declare const ExtensionFloatingLabel: ({ isSelected, testId, title }: Props) => ReactElement;
|
|
12
|
+
export {};
|
|
@@ -9,10 +9,8 @@ type ExtensionLabelProps = {
|
|
|
9
9
|
customContainerStyles?: CSSProperties;
|
|
10
10
|
extensionName: string;
|
|
11
11
|
isBodiedMacro?: boolean;
|
|
12
|
-
isMultiBodiedMacro?: boolean;
|
|
13
12
|
isNodeHovered?: boolean;
|
|
14
13
|
isNodeNested?: boolean;
|
|
15
|
-
isNodeSelected?: boolean;
|
|
16
14
|
pluginInjectionApi?: ExtensionsPluginInjectionAPI;
|
|
17
15
|
setIsNodeHovered?: (isHovered: boolean) => void;
|
|
18
16
|
showBodiedExtensionRendererView?: boolean;
|
|
@@ -20,5 +18,5 @@ type ExtensionLabelProps = {
|
|
|
20
18
|
showUpdatedLivePages1PBodiedExtensionUI?: boolean;
|
|
21
19
|
text: string;
|
|
22
20
|
};
|
|
23
|
-
export declare const ExtensionLabel: ({ text, extensionName, customContainerStyles, isNodeNested,
|
|
21
|
+
export declare const ExtensionLabel: ({ text, extensionName, customContainerStyles, isNodeNested, setIsNodeHovered, isBodiedMacro, showUpdatedLivePages1PBodiedExtensionUI, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, pluginInjectionApi: _pluginInjectionApi, }: ExtensionLabelProps) => jsx.JSX.Element;
|
|
24
22
|
export {};
|
|
@@ -11,10 +11,8 @@ type LozengeComponentProps = {
|
|
|
11
11
|
customContainerStyles?: CSSProperties;
|
|
12
12
|
extensionName: string;
|
|
13
13
|
isBodiedMacro?: boolean;
|
|
14
|
-
isMultiBodiedMacro?: boolean;
|
|
15
14
|
isNodeHovered?: boolean;
|
|
16
15
|
isNodeNested?: boolean;
|
|
17
|
-
isNodeSelected?: boolean;
|
|
18
16
|
lozengeData?: LozengeData;
|
|
19
17
|
params: any;
|
|
20
18
|
pluginInjectionApi?: ExtensionsPluginInjectionAPI;
|
|
@@ -27,5 +25,5 @@ type LozengeComponentProps = {
|
|
|
27
25
|
showUpdatedLivePages1PBodiedExtensionUI?: boolean;
|
|
28
26
|
title: string;
|
|
29
27
|
};
|
|
30
|
-
export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, isNodeNested,
|
|
28
|
+
export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, isNodeNested, setIsNodeHovered, isBodiedMacro, showLivePagesBodiedMacrosRendererView, showUpdatedLivePages1PBodiedExtensionUI, showBodiedExtensionRendererView, setShowBodiedExtensionRendererView, pluginInjectionApi, }: LozengeComponentProps) => jsx.JSX.Element;
|
|
31
29
|
export {};
|
|
@@ -10,10 +10,8 @@ import type { ExtensionsPluginInjectionAPI } from '../../types';
|
|
|
10
10
|
export interface Props {
|
|
11
11
|
customContainerStyles?: CSSProperties;
|
|
12
12
|
isBodiedMacro?: boolean;
|
|
13
|
-
isMultiBodiedMacro?: boolean;
|
|
14
13
|
isNodeHovered?: boolean;
|
|
15
14
|
isNodeNested?: boolean;
|
|
16
|
-
isNodeSelected?: boolean;
|
|
17
15
|
node: PmNode;
|
|
18
16
|
pluginInjectionApi?: ExtensionsPluginInjectionAPI;
|
|
19
17
|
setIsNodeHovered?: (isHovered: boolean) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-common",
|
|
3
|
-
"version": "116.33.
|
|
3
|
+
"version": "116.33.2",
|
|
4
4
|
"description": "A package that contains common classes and components for editor and renderer",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"@atlaskit/platform-feature-flags": "^2.0.0",
|
|
70
70
|
"@atlaskit/platform-feature-flags-react": "^1.1.0",
|
|
71
71
|
"@atlaskit/primitives": "^22.0.0",
|
|
72
|
-
"@atlaskit/profilecard": "^26.
|
|
72
|
+
"@atlaskit/profilecard": "^26.11.0",
|
|
73
73
|
"@atlaskit/prosemirror-history": "^1.0.0",
|
|
74
74
|
"@atlaskit/react-compiler-gating": "^0.2.0",
|
|
75
75
|
"@atlaskit/react-ufo": "^7.3.0",
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
"@atlaskit/task-decision": "^21.4.0",
|
|
81
81
|
"@atlaskit/teams-app-config": "^2.1.0",
|
|
82
82
|
"@atlaskit/textfield": "^9.1.0",
|
|
83
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
83
|
+
"@atlaskit/tmp-editor-statsig": "^128.0.0",
|
|
84
84
|
"@atlaskit/tokens": "^16.0.0",
|
|
85
85
|
"@atlaskit/tooltip": "^23.1.0",
|
|
86
86
|
"@atlaskit/width-detector": "^6.2.0",
|