@atlaskit/editor-plugin-card 5.4.11 → 5.4.12
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 +9 -0
- package/dist/cjs/nodeviews/inlineCardWithAwareness.js +1 -1
- package/dist/cjs/ui/AwarenessWrapper/index.js +3 -17
- package/dist/cjs/ui/HyperlinkToolbarAppearanceDropdown.js +19 -194
- package/dist/cjs/ui/OpenButtonOverlay/index.js +18 -45
- package/dist/cjs/ui/toolbar.js +9 -22
- package/dist/es2019/nodeviews/inlineCardWithAwareness.js +1 -1
- package/dist/es2019/ui/AwarenessWrapper/index.js +3 -13
- package/dist/es2019/ui/HyperlinkToolbarAppearanceDropdown.js +6 -118
- package/dist/es2019/ui/OpenButtonOverlay/index.js +14 -41
- package/dist/es2019/ui/toolbar.js +10 -23
- package/dist/esm/nodeviews/inlineCardWithAwareness.js +1 -1
- package/dist/esm/ui/AwarenessWrapper/index.js +3 -17
- package/dist/esm/ui/HyperlinkToolbarAppearanceDropdown.js +18 -193
- package/dist/esm/ui/OpenButtonOverlay/index.js +18 -45
- package/dist/esm/ui/toolbar.js +10 -23
- package/dist/types/ui/HyperlinkToolbarAppearanceDropdown.d.ts +1 -8
- package/dist/types-ts4.5/ui/HyperlinkToolbarAppearanceDropdown.d.ts +1 -8
- package/package.json +9 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-card
|
|
2
2
|
|
|
3
|
+
## 5.4.12
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#139216](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139216)
|
|
8
|
+
[`e8f596d2b1910`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e8f596d2b1910) -
|
|
9
|
+
[ux] Cleaned up platform_editor_controls_patch_1 FG
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 5.4.11
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -108,7 +108,7 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
|
|
|
108
108
|
isPageSSRed: isPageSSRed
|
|
109
109
|
});
|
|
110
110
|
}, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed]);
|
|
111
|
-
var innerCard = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
|
|
111
|
+
var innerCard = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? innerCardWithOpenButtonOverlay : innerCardOriginal;
|
|
112
112
|
return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/_react.default.createElement(_AwarenessWrapper.AwarenessWrapper, {
|
|
113
113
|
isOverlayEnabled: isOverlayEnabled,
|
|
114
114
|
isPulseEnabled: isPulseEnabled,
|
|
@@ -9,13 +9,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
9
9
|
var _react = require("react");
|
|
10
10
|
var _react2 = require("@emotion/react");
|
|
11
11
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
12
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
12
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
14
13
|
var _utils = require("../../pm-plugins/utils");
|
|
15
14
|
var _useLinkUpgradeDiscoverability = _interopRequireDefault(require("../hooks/useLinkUpgradeDiscoverability"));
|
|
16
15
|
var _InlineCardOverlay = _interopRequireDefault(require("../InlineCardOverlay"));
|
|
17
16
|
var _localStorage = require("../local-storage");
|
|
18
|
-
var _OpenButtonOverlay = _interopRequireDefault(require("../OpenButtonOverlay"));
|
|
19
17
|
var _Pulse = require("../Pulse");
|
|
20
18
|
/**
|
|
21
19
|
* @jsxRuntime classic
|
|
@@ -87,7 +85,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
|
|
|
87
85
|
setOverlayHoveredStyles(isHovered);
|
|
88
86
|
}, [setOverlayHoveredStyles]);
|
|
89
87
|
var cardWithOverlay = (0, _react.useMemo)(function () {
|
|
90
|
-
if (shouldShowLinkOverlay && !(
|
|
88
|
+
if (shouldShowLinkOverlay && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
91
89
|
return (0, _react2.jsx)(_InlineCardOverlay.default, {
|
|
92
90
|
isSelected: isSelected,
|
|
93
91
|
isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
|
|
@@ -102,18 +100,6 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
|
|
|
102
100
|
}
|
|
103
101
|
return children;
|
|
104
102
|
}, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
|
|
105
|
-
var cardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
|
|
106
|
-
return (0, _react2.jsx)(_OpenButtonOverlay.default, {
|
|
107
|
-
isVisible: isResolvedViewRendered && isHovered,
|
|
108
|
-
onMouseEnter: function onMouseEnter() {
|
|
109
|
-
return handleOverlayChange(true);
|
|
110
|
-
},
|
|
111
|
-
onMouseLeave: function onMouseLeave() {
|
|
112
|
-
return handleOverlayChange(false);
|
|
113
|
-
},
|
|
114
|
-
url: url
|
|
115
|
-
}, children);
|
|
116
|
-
}, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
|
|
117
103
|
var isInline = appearance === 'inline';
|
|
118
104
|
return (0, _react.useMemo)(function () {
|
|
119
105
|
var _cardContext$value;
|
|
@@ -133,7 +119,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
|
|
|
133
119
|
shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
|
|
134
120
|
testId: "link-discovery-pulse",
|
|
135
121
|
isInline: isInline
|
|
136
|
-
},
|
|
122
|
+
}, cardWithOverlay)))
|
|
137
123
|
);
|
|
138
|
-
}, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay,
|
|
124
|
+
}, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, isInline]);
|
|
139
125
|
};
|
|
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.getCustomHyperlinkAppearanceDropdown = void 0;
|
|
9
9
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
10
10
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
11
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
@@ -18,20 +18,26 @@ var _primitives = require("@atlaskit/primitives");
|
|
|
18
18
|
var _LinkToolbarAppearanceDropdown = require("./LinkToolbarAppearanceDropdown");
|
|
19
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
20
20
|
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 && {}.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; }
|
|
21
|
-
var
|
|
21
|
+
var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
|
|
22
22
|
var _props$cardOptions3;
|
|
23
23
|
var _useState = (0, _react.useState)(new Map()),
|
|
24
24
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
25
25
|
supportedUrlsMap = _useState2[0],
|
|
26
26
|
setSupportedUrlsMap = _useState2[1];
|
|
27
|
+
var _useState3 = (0, _react.useState)(false),
|
|
28
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
29
|
+
isOpen = _useState4[0],
|
|
30
|
+
setIsOpen = _useState4[1];
|
|
27
31
|
var cardProvider = (0, _react.useRef)(undefined);
|
|
32
|
+
var containerRef = (0, _react.useRef)(undefined);
|
|
28
33
|
var url = props.url,
|
|
29
34
|
intl = props.intl,
|
|
30
|
-
|
|
35
|
+
editorView = props.editorView,
|
|
31
36
|
cardOptions = props.cardOptions,
|
|
32
37
|
editorAnalyticsApi = props.editorAnalyticsApi,
|
|
33
38
|
allowDatasource = props.allowDatasource,
|
|
34
|
-
isDatasourceView = props.isDatasourceView
|
|
39
|
+
isDatasourceView = props.isDatasourceView,
|
|
40
|
+
settingsConfig = props.settingsConfig;
|
|
35
41
|
// Ignored via go/ees005
|
|
36
42
|
// eslint-disable-next-line require-await
|
|
37
43
|
var getProvider = /*#__PURE__*/function () {
|
|
@@ -138,187 +144,6 @@ var HyperlinkDropdown = function HyperlinkDropdown(props) {
|
|
|
138
144
|
if (!supportedUrlsMap.get(url)) {
|
|
139
145
|
return null;
|
|
140
146
|
}
|
|
141
|
-
return /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearanceDropdown.LinkAppearanceMenu, {
|
|
142
|
-
url: url,
|
|
143
|
-
intl: intl,
|
|
144
|
-
editorState: editorState,
|
|
145
|
-
allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
|
|
146
|
-
allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
|
|
147
|
-
allowDatasource: allowDatasource,
|
|
148
|
-
editorAnalyticsApi: editorAnalyticsApi,
|
|
149
|
-
dispatchCommand: props.dispatchCommand,
|
|
150
|
-
settingsConfig: props.settingsConfig,
|
|
151
|
-
isDatasourceView: isDatasourceView
|
|
152
|
-
});
|
|
153
|
-
};
|
|
154
|
-
var getHyperlinkAppearanceDropdown = exports.getHyperlinkAppearanceDropdown = function getHyperlinkAppearanceDropdown(_ref3) {
|
|
155
|
-
var url = _ref3.url,
|
|
156
|
-
intl = _ref3.intl,
|
|
157
|
-
editorState = _ref3.editorState,
|
|
158
|
-
editorAnalyticsApi = _ref3.editorAnalyticsApi,
|
|
159
|
-
editorPluginApi = _ref3.editorPluginApi,
|
|
160
|
-
settingsConfig = _ref3.settingsConfig,
|
|
161
|
-
cardOptions = _ref3.cardOptions,
|
|
162
|
-
allowDatasource = _ref3.allowDatasource,
|
|
163
|
-
isDatasourceView = _ref3.isDatasourceView;
|
|
164
|
-
var alignmentItemOptions = {
|
|
165
|
-
render: function render(props) {
|
|
166
|
-
if (!editorState) {
|
|
167
|
-
return null;
|
|
168
|
-
}
|
|
169
|
-
return /*#__PURE__*/_react.default.createElement(HyperlinkDropdown, {
|
|
170
|
-
intl: intl,
|
|
171
|
-
editorState: editorState,
|
|
172
|
-
url: url,
|
|
173
|
-
editorAnalyticsApi: editorAnalyticsApi,
|
|
174
|
-
editorPluginApi: editorPluginApi,
|
|
175
|
-
dispatchCommand: props.dispatchCommand,
|
|
176
|
-
settingsConfig: settingsConfig,
|
|
177
|
-
cardOptions: cardOptions,
|
|
178
|
-
allowDatasource: allowDatasource,
|
|
179
|
-
isDatasourceView: isDatasourceView
|
|
180
|
-
});
|
|
181
|
-
},
|
|
182
|
-
width: 200,
|
|
183
|
-
height: 400
|
|
184
|
-
};
|
|
185
|
-
var currentAppearanceDisplayInformation = _card.appearancePropsMap['url'];
|
|
186
|
-
var alignmentToolbarItem = {
|
|
187
|
-
id: 'hyperlink-appearance',
|
|
188
|
-
testId: 'hyperlink-appearance-dropdown',
|
|
189
|
-
type: 'dropdown',
|
|
190
|
-
options: alignmentItemOptions,
|
|
191
|
-
title: intl.formatMessage(currentAppearanceDisplayInformation.title),
|
|
192
|
-
iconBefore: currentAppearanceDisplayInformation.icon
|
|
193
|
-
};
|
|
194
|
-
return alignmentToolbarItem;
|
|
195
|
-
};
|
|
196
|
-
var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
|
|
197
|
-
var _props$cardOptions6;
|
|
198
|
-
var _useState3 = (0, _react.useState)(new Map()),
|
|
199
|
-
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
200
|
-
supportedUrlsMap = _useState4[0],
|
|
201
|
-
setSupportedUrlsMap = _useState4[1];
|
|
202
|
-
var _useState5 = (0, _react.useState)(false),
|
|
203
|
-
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
204
|
-
isOpen = _useState6[0],
|
|
205
|
-
setIsOpen = _useState6[1];
|
|
206
|
-
var cardProvider = (0, _react.useRef)(undefined);
|
|
207
|
-
var containerRef = (0, _react.useRef)(undefined);
|
|
208
|
-
var url = props.url,
|
|
209
|
-
intl = props.intl,
|
|
210
|
-
editorView = props.editorView,
|
|
211
|
-
cardOptions = props.cardOptions,
|
|
212
|
-
editorAnalyticsApi = props.editorAnalyticsApi,
|
|
213
|
-
allowDatasource = props.allowDatasource,
|
|
214
|
-
isDatasourceView = props.isDatasourceView,
|
|
215
|
-
settingsConfig = props.settingsConfig;
|
|
216
|
-
// Ignored via go/ees005
|
|
217
|
-
// eslint-disable-next-line require-await
|
|
218
|
-
var getProvider = /*#__PURE__*/function () {
|
|
219
|
-
var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
|
|
220
|
-
var _props$cardOptions4;
|
|
221
|
-
var _props$cardOptions5;
|
|
222
|
-
return _regenerator.default.wrap(function _callee3$(_context3) {
|
|
223
|
-
while (1) switch (_context3.prev = _context3.next) {
|
|
224
|
-
case 0:
|
|
225
|
-
if (!((_props$cardOptions4 = props.cardOptions) !== null && _props$cardOptions4 !== void 0 && _props$cardOptions4.provider)) {
|
|
226
|
-
_context3.next = 2;
|
|
227
|
-
break;
|
|
228
|
-
}
|
|
229
|
-
return _context3.abrupt("return", (_props$cardOptions5 = props.cardOptions) === null || _props$cardOptions5 === void 0 ? void 0 : _props$cardOptions5.provider);
|
|
230
|
-
case 2:
|
|
231
|
-
if (!cardProvider.current) {
|
|
232
|
-
_context3.next = 4;
|
|
233
|
-
break;
|
|
234
|
-
}
|
|
235
|
-
return _context3.abrupt("return", cardProvider.current);
|
|
236
|
-
case 4:
|
|
237
|
-
return _context3.abrupt("return", new Promise(function (resolve) {
|
|
238
|
-
var _props$editorPluginAp2;
|
|
239
|
-
var cardProvider = (_props$editorPluginAp2 = props.editorPluginApi) === null || _props$editorPluginAp2 === void 0 || (_props$editorPluginAp2 = _props$editorPluginAp2.card) === null || _props$editorPluginAp2 === void 0 || (_props$editorPluginAp2 = _props$editorPluginAp2.sharedState) === null || _props$editorPluginAp2 === void 0 || (_props$editorPluginAp2 = _props$editorPluginAp2.currentState()) === null || _props$editorPluginAp2 === void 0 ? void 0 : _props$editorPluginAp2.provider;
|
|
240
|
-
if (cardProvider) {
|
|
241
|
-
resolve(cardProvider);
|
|
242
|
-
}
|
|
243
|
-
}));
|
|
244
|
-
case 5:
|
|
245
|
-
case "end":
|
|
246
|
-
return _context3.stop();
|
|
247
|
-
}
|
|
248
|
-
}, _callee3);
|
|
249
|
-
}));
|
|
250
|
-
return function getProvider() {
|
|
251
|
-
return _ref4.apply(this, arguments);
|
|
252
|
-
};
|
|
253
|
-
}();
|
|
254
|
-
var resolveUrl = /*#__PURE__*/function () {
|
|
255
|
-
var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(url) {
|
|
256
|
-
var isUrlSupported, _yield$provider$findP2, provider, newMap;
|
|
257
|
-
return _regenerator.default.wrap(function _callee4$(_context4) {
|
|
258
|
-
while (1) switch (_context4.prev = _context4.next) {
|
|
259
|
-
case 0:
|
|
260
|
-
if (!supportedUrlsMap.has(url)) {
|
|
261
|
-
_context4.next = 2;
|
|
262
|
-
break;
|
|
263
|
-
}
|
|
264
|
-
return _context4.abrupt("return");
|
|
265
|
-
case 2:
|
|
266
|
-
isUrlSupported = false;
|
|
267
|
-
_context4.prev = 3;
|
|
268
|
-
_context4.next = 6;
|
|
269
|
-
return getProvider();
|
|
270
|
-
case 6:
|
|
271
|
-
provider = _context4.sent;
|
|
272
|
-
_context4.next = 9;
|
|
273
|
-
return provider === null || provider === void 0 ? void 0 : provider.findPattern(url);
|
|
274
|
-
case 9:
|
|
275
|
-
_context4.t1 = _yield$provider$findP2 = _context4.sent;
|
|
276
|
-
_context4.t0 = _context4.t1 !== null;
|
|
277
|
-
if (!_context4.t0) {
|
|
278
|
-
_context4.next = 13;
|
|
279
|
-
break;
|
|
280
|
-
}
|
|
281
|
-
_context4.t0 = _yield$provider$findP2 !== void 0;
|
|
282
|
-
case 13:
|
|
283
|
-
if (!_context4.t0) {
|
|
284
|
-
_context4.next = 17;
|
|
285
|
-
break;
|
|
286
|
-
}
|
|
287
|
-
_context4.t2 = _yield$provider$findP2;
|
|
288
|
-
_context4.next = 18;
|
|
289
|
-
break;
|
|
290
|
-
case 17:
|
|
291
|
-
_context4.t2 = false;
|
|
292
|
-
case 18:
|
|
293
|
-
isUrlSupported = _context4.t2;
|
|
294
|
-
_context4.next = 24;
|
|
295
|
-
break;
|
|
296
|
-
case 21:
|
|
297
|
-
_context4.prev = 21;
|
|
298
|
-
_context4.t3 = _context4["catch"](3);
|
|
299
|
-
isUrlSupported = false;
|
|
300
|
-
case 24:
|
|
301
|
-
newMap = new Map(supportedUrlsMap);
|
|
302
|
-
newMap.set(url, isUrlSupported);
|
|
303
|
-
setSupportedUrlsMap(newMap);
|
|
304
|
-
case 27:
|
|
305
|
-
case "end":
|
|
306
|
-
return _context4.stop();
|
|
307
|
-
}
|
|
308
|
-
}, _callee4, null, [[3, 21]]);
|
|
309
|
-
}));
|
|
310
|
-
return function resolveUrl(_x2) {
|
|
311
|
-
return _ref5.apply(this, arguments);
|
|
312
|
-
};
|
|
313
|
-
}();
|
|
314
|
-
(0, _react.useEffect)(function () {
|
|
315
|
-
resolveUrl(url);
|
|
316
|
-
// before migrating from a class to a functional component, we were only reacting to changes in the url
|
|
317
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
318
|
-
}, [url, (_props$cardOptions6 = props.cardOptions) === null || _props$cardOptions6 === void 0 ? void 0 : _props$cardOptions6.provider, props.editorPluginApi]);
|
|
319
|
-
if (!supportedUrlsMap.get(url)) {
|
|
320
|
-
return null;
|
|
321
|
-
}
|
|
322
147
|
if (!editorView) {
|
|
323
148
|
return null;
|
|
324
149
|
}
|
|
@@ -383,15 +208,15 @@ var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
|
|
|
383
208
|
settingsConfig: settingsConfig
|
|
384
209
|
})), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
|
|
385
210
|
};
|
|
386
|
-
var getCustomHyperlinkAppearanceDropdown = exports.getCustomHyperlinkAppearanceDropdown = function getCustomHyperlinkAppearanceDropdown(
|
|
387
|
-
var url =
|
|
388
|
-
intl =
|
|
389
|
-
editorAnalyticsApi =
|
|
390
|
-
editorPluginApi =
|
|
391
|
-
settingsConfig =
|
|
392
|
-
cardOptions =
|
|
393
|
-
allowDatasource =
|
|
394
|
-
isDatasourceView =
|
|
211
|
+
var getCustomHyperlinkAppearanceDropdown = exports.getCustomHyperlinkAppearanceDropdown = function getCustomHyperlinkAppearanceDropdown(_ref3) {
|
|
212
|
+
var url = _ref3.url,
|
|
213
|
+
intl = _ref3.intl,
|
|
214
|
+
editorAnalyticsApi = _ref3.editorAnalyticsApi,
|
|
215
|
+
editorPluginApi = _ref3.editorPluginApi,
|
|
216
|
+
settingsConfig = _ref3.settingsConfig,
|
|
217
|
+
cardOptions = _ref3.cardOptions,
|
|
218
|
+
allowDatasource = _ref3.allowDatasource,
|
|
219
|
+
isDatasourceView = _ref3.isDatasourceView;
|
|
395
220
|
return {
|
|
396
221
|
type: 'custom',
|
|
397
222
|
fallback: [],
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
12
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -127,52 +126,26 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
|
|
|
127
126
|
var handleOverlayChange = function handleOverlayChange(isHovered) {
|
|
128
127
|
setHovered(isHovered);
|
|
129
128
|
};
|
|
130
|
-
if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1')) {
|
|
131
|
-
return (
|
|
132
|
-
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
133
|
-
(0, _react2.jsx)("span", {
|
|
134
|
-
ref: containerRef,
|
|
135
|
-
css: containerStyles,
|
|
136
|
-
onDoubleClick: handleDoubleClick,
|
|
137
|
-
onMouseEnter: function onMouseEnter() {
|
|
138
|
-
return handleOverlayChange(true);
|
|
139
|
-
},
|
|
140
|
-
onMouseLeave: function onMouseLeave() {
|
|
141
|
-
return handleOverlayChange(false);
|
|
142
|
-
}
|
|
143
|
-
}, children, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2') && (0, _react2.jsx)("span", {
|
|
144
|
-
css: hiddenTextStyle,
|
|
145
|
-
"aria-hidden": "true"
|
|
146
|
-
}, (0, _react2.jsx)(_primitives.Text, {
|
|
147
|
-
ref: hiddenTextRef,
|
|
148
|
-
size: "small",
|
|
149
|
-
maxLines: 1
|
|
150
|
-
}, label)), isHovered && (0, _react2.jsx)(_primitives.Anchor, {
|
|
151
|
-
ref: openButtonRef,
|
|
152
|
-
xcss: linkStyles,
|
|
153
|
-
href: url,
|
|
154
|
-
target: "_blank"
|
|
155
|
-
}, (0, _react2.jsx)(_primitives.Box, {
|
|
156
|
-
xcss: iconWrapperStyles,
|
|
157
|
-
"data-inlinecard-button-overlay": "icon-wrapper-line-height"
|
|
158
|
-
}, (0, _react2.jsx)(_linkExternal.default, {
|
|
159
|
-
label: ""
|
|
160
|
-
})), showLabel && (0, _react2.jsx)(_primitives.Text, {
|
|
161
|
-
size: "small",
|
|
162
|
-
color: "color.text.subtle",
|
|
163
|
-
maxLines: 1
|
|
164
|
-
}, label)))
|
|
165
|
-
);
|
|
166
|
-
}
|
|
167
129
|
return (
|
|
168
|
-
//
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
ref: containerRef
|
|
172
|
-
}, props, {
|
|
130
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
131
|
+
(0, _react2.jsx)("span", {
|
|
132
|
+
ref: containerRef,
|
|
173
133
|
css: containerStyles,
|
|
174
|
-
onDoubleClick: handleDoubleClick
|
|
175
|
-
|
|
134
|
+
onDoubleClick: handleDoubleClick,
|
|
135
|
+
onMouseEnter: function onMouseEnter() {
|
|
136
|
+
return handleOverlayChange(true);
|
|
137
|
+
},
|
|
138
|
+
onMouseLeave: function onMouseLeave() {
|
|
139
|
+
return handleOverlayChange(false);
|
|
140
|
+
}
|
|
141
|
+
}, children, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2') && (0, _react2.jsx)("span", {
|
|
142
|
+
css: hiddenTextStyle,
|
|
143
|
+
"aria-hidden": "true"
|
|
144
|
+
}, (0, _react2.jsx)(_primitives.Text, {
|
|
145
|
+
ref: hiddenTextRef,
|
|
146
|
+
size: "small",
|
|
147
|
+
maxLines: 1
|
|
148
|
+
}, label)), isHovered && (0, _react2.jsx)(_primitives.Anchor, {
|
|
176
149
|
ref: openButtonRef,
|
|
177
150
|
xcss: linkStyles,
|
|
178
151
|
href: url,
|
package/dist/cjs/ui/toolbar.js
CHANGED
|
@@ -31,7 +31,6 @@ var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove
|
|
|
31
31
|
var _settings2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/settings"));
|
|
32
32
|
var _unlink = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/unlink"));
|
|
33
33
|
var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
|
|
34
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
35
34
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
36
35
|
var _doc = require("../pm-plugins/doc");
|
|
37
36
|
var _pluginKey = require("../pm-plugins/plugin-key");
|
|
@@ -425,12 +424,12 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
|
|
|
425
424
|
}
|
|
426
425
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
427
426
|
var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
|
|
428
|
-
return
|
|
427
|
+
return {
|
|
429
428
|
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
|
|
430
429
|
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
|
|
431
430
|
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
|
|
432
431
|
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
|
|
433
|
-
}
|
|
432
|
+
};
|
|
434
433
|
};
|
|
435
434
|
var overflowMenuConfig = [{
|
|
436
435
|
type: 'separator',
|
|
@@ -691,8 +690,8 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
|
|
|
691
690
|
type: 'separator'
|
|
692
691
|
}];
|
|
693
692
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
694
|
-
var _api$analytics2, _api$analytics3
|
|
695
|
-
var hyperlinkAppearance =
|
|
693
|
+
var _api$analytics2, _api$analytics3;
|
|
694
|
+
var hyperlinkAppearance = [(0, _HyperlinkToolbarAppearanceDropdown.getCustomHyperlinkAppearanceDropdown)({
|
|
696
695
|
url: link,
|
|
697
696
|
intl: intl,
|
|
698
697
|
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
|
|
@@ -701,19 +700,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
|
|
|
701
700
|
cardOptions: options,
|
|
702
701
|
settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink),
|
|
703
702
|
isDatasourceView: false
|
|
704
|
-
})]
|
|
705
|
-
url: link,
|
|
706
|
-
intl: intl,
|
|
707
|
-
editorState: state,
|
|
708
|
-
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
|
|
709
|
-
allowDatasource: options.allowDatasource,
|
|
710
|
-
editorPluginApi: api,
|
|
711
|
-
cardOptions: options,
|
|
712
|
-
settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, options.userPreferencesLink),
|
|
713
|
-
isDatasourceView: false
|
|
714
|
-
}), {
|
|
715
|
-
type: 'separator'
|
|
716
|
-
}];
|
|
703
|
+
})];
|
|
717
704
|
return [{
|
|
718
705
|
type: 'custom',
|
|
719
706
|
fallback: [],
|
|
@@ -742,7 +729,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
|
|
|
742
729
|
type: 'custom',
|
|
743
730
|
fallback: [],
|
|
744
731
|
render: function render(editorView) {
|
|
745
|
-
var _api$
|
|
732
|
+
var _api$analytics4;
|
|
746
733
|
if (!editorView) {
|
|
747
734
|
return null;
|
|
748
735
|
}
|
|
@@ -753,7 +740,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
|
|
|
753
740
|
editorView: editorView,
|
|
754
741
|
editorState: editorView.state,
|
|
755
742
|
cardOptions: options,
|
|
756
|
-
editorAnalyticsApi: api === null || api === void 0 || (_api$
|
|
743
|
+
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
|
|
757
744
|
editorPluginApi: api
|
|
758
745
|
});
|
|
759
746
|
}
|
|
@@ -767,10 +754,10 @@ var getEndingToolbarItems = exports.getEndingToolbarItems = function getEndingTo
|
|
|
767
754
|
* Or explicit user preferences config in order to enable button
|
|
768
755
|
*/
|
|
769
756
|
if ((options.provider || options.userPreferencesLink) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
|
|
770
|
-
var _api$
|
|
757
|
+
var _api$analytics5;
|
|
771
758
|
return [{
|
|
772
759
|
type: 'separator'
|
|
773
|
-
}, getSettingsButton(intl, api === null || api === void 0 || (_api$
|
|
760
|
+
}, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, options.userPreferencesLink)];
|
|
774
761
|
}
|
|
775
762
|
return [];
|
|
776
763
|
};
|
|
@@ -80,7 +80,7 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
|
|
|
80
80
|
isHovered: isHovered,
|
|
81
81
|
isPageSSRed: isPageSSRed
|
|
82
82
|
}), [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed]);
|
|
83
|
-
const innerCard = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' && editorExperiment('platform_editor_controls', 'variant1')
|
|
83
|
+
const innerCard = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' && editorExperiment('platform_editor_controls', 'variant1') ? innerCardWithOpenButtonOverlay : innerCardOriginal;
|
|
84
84
|
return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/React.createElement(AwarenessWrapper, {
|
|
85
85
|
isOverlayEnabled: isOverlayEnabled,
|
|
86
86
|
isPulseEnabled: isPulseEnabled,
|
|
@@ -7,13 +7,11 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
9
9
|
import { AnalyticsContext } from '@atlaskit/analytics-next';
|
|
10
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
10
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
12
11
|
import { getResolvedAttributesFromStore } from '../../pm-plugins/utils';
|
|
13
12
|
import useLinkUpgradeDiscoverability from '../hooks/useLinkUpgradeDiscoverability';
|
|
14
13
|
import InlineCardOverlay from '../InlineCardOverlay';
|
|
15
14
|
import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR, markLocalStorageKeyDiscovered, ONE_DAY_IN_MILLISECONDS } from '../local-storage';
|
|
16
|
-
import OpenButtonOverlay from '../OpenButtonOverlay';
|
|
17
15
|
import { DiscoveryPulse } from '../Pulse';
|
|
18
16
|
// editor adds a standard line-height that is bigger than an inline smart link
|
|
19
17
|
// due to that the link has a bit of white space around it, which doesn't look right when there is pulse around it
|
|
@@ -77,7 +75,7 @@ export const AwarenessWrapper = ({
|
|
|
77
75
|
setOverlayHoveredStyles(isHovered);
|
|
78
76
|
}, [setOverlayHoveredStyles]);
|
|
79
77
|
const cardWithOverlay = useMemo(() => {
|
|
80
|
-
if (shouldShowLinkOverlay && !
|
|
78
|
+
if (shouldShowLinkOverlay && !editorExperiment('platform_editor_controls', 'variant1')) {
|
|
81
79
|
return jsx(InlineCardOverlay, {
|
|
82
80
|
isSelected: isSelected,
|
|
83
81
|
isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
|
|
@@ -88,14 +86,6 @@ export const AwarenessWrapper = ({
|
|
|
88
86
|
}
|
|
89
87
|
return children;
|
|
90
88
|
}, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
|
|
91
|
-
const cardWithOpenButtonOverlay = useMemo(() => {
|
|
92
|
-
return jsx(OpenButtonOverlay, {
|
|
93
|
-
isVisible: isResolvedViewRendered && isHovered,
|
|
94
|
-
onMouseEnter: () => handleOverlayChange(true),
|
|
95
|
-
onMouseLeave: () => handleOverlayChange(false),
|
|
96
|
-
url: url
|
|
97
|
-
}, children);
|
|
98
|
-
}, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
|
|
99
89
|
const isInline = appearance === 'inline';
|
|
100
90
|
return useMemo(() => {
|
|
101
91
|
var _cardContext$value;
|
|
@@ -115,7 +105,7 @@ export const AwarenessWrapper = ({
|
|
|
115
105
|
shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
|
|
116
106
|
testId: "link-discovery-pulse",
|
|
117
107
|
isInline: isInline
|
|
118
|
-
},
|
|
108
|
+
}, cardWithOverlay)))
|
|
119
109
|
);
|
|
120
|
-
}, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay,
|
|
110
|
+
}, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, isInline]);
|
|
121
111
|
};
|