@atlaskit/editor-plugin-card 5.4.5 → 5.4.6
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/ui/HyperlinkToolbarAppearanceDropdown.js +225 -1
- package/dist/cjs/ui/toolbar.js +29 -18
- package/dist/es2019/ui/HyperlinkToolbarAppearanceDropdown.js +152 -0
- package/dist/es2019/ui/toolbar.js +29 -18
- package/dist/esm/ui/HyperlinkToolbarAppearanceDropdown.js +224 -0
- package/dist/esm/ui/toolbar.js +30 -19
- package/dist/types/ui/HyperlinkToolbarAppearanceDropdown.d.ts +6 -1
- package/dist/types-ts4.5/ui/HyperlinkToolbarAppearanceDropdown.d.ts +6 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-card
|
|
2
2
|
|
|
3
|
+
## 5.4.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#133060](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133060)
|
|
8
|
+
[`4e22e38db002e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4e22e38db002e) -
|
|
9
|
+
[ux] Fix for Editor Controls. When link appearance options are not available, we do not render
|
|
10
|
+
these options in the floating toolbar.
|
|
11
|
+
|
|
3
12
|
## 5.4.5
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -5,12 +5,16 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.getHyperlinkAppearanceDropdown = void 0;
|
|
8
|
+
exports.getHyperlinkAppearanceDropdown = 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"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _card = require("@atlaskit/editor-common/card");
|
|
14
|
+
var _ui = require("@atlaskit/editor-common/ui");
|
|
15
|
+
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
|
|
16
|
+
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
|
|
17
|
+
var _primitives = require("@atlaskit/primitives");
|
|
14
18
|
var _LinkToolbarAppearanceDropdown = require("./LinkToolbarAppearanceDropdown");
|
|
15
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); }
|
|
16
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; }
|
|
@@ -188,4 +192,224 @@ var getHyperlinkAppearanceDropdown = exports.getHyperlinkAppearanceDropdown = fu
|
|
|
188
192
|
iconBefore: currentAppearanceDisplayInformation.icon
|
|
189
193
|
};
|
|
190
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
|
+
if (!editorView) {
|
|
323
|
+
return null;
|
|
324
|
+
}
|
|
325
|
+
var dispatchCommand = function dispatchCommand(fn) {
|
|
326
|
+
fn && fn(editorView && editorView.state, editorView && editorView.dispatch);
|
|
327
|
+
// Refocus the view to ensure the editor has focus
|
|
328
|
+
if (editorView && !editorView.hasFocus()) {
|
|
329
|
+
editorView.focus();
|
|
330
|
+
}
|
|
331
|
+
};
|
|
332
|
+
var toggleOpen = function toggleOpen() {
|
|
333
|
+
return setIsOpen(function (open) {
|
|
334
|
+
return !open;
|
|
335
|
+
});
|
|
336
|
+
};
|
|
337
|
+
var close = function close() {
|
|
338
|
+
return setIsOpen(false);
|
|
339
|
+
};
|
|
340
|
+
var currentAppearanceDisplayInformation = _card.appearancePropsMap['url'];
|
|
341
|
+
var title = intl.formatMessage(currentAppearanceDisplayInformation.title);
|
|
342
|
+
var trigger = /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
|
|
343
|
+
selected: isOpen,
|
|
344
|
+
title: title,
|
|
345
|
+
"aria-label": title,
|
|
346
|
+
"aria-expanded": isOpen,
|
|
347
|
+
"aria-haspopup": true,
|
|
348
|
+
onClick: toggleOpen,
|
|
349
|
+
icon: currentAppearanceDisplayInformation.icon({
|
|
350
|
+
label: ''
|
|
351
|
+
}),
|
|
352
|
+
iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
|
|
353
|
+
label: "",
|
|
354
|
+
spacing: "compact"
|
|
355
|
+
})
|
|
356
|
+
}, title);
|
|
357
|
+
return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
|
|
358
|
+
ref: containerRef,
|
|
359
|
+
gap: "space.075"
|
|
360
|
+
}, /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownContainer, {
|
|
361
|
+
mountTo: containerRef.current,
|
|
362
|
+
isOpen: isOpen,
|
|
363
|
+
handleClickOutside: close,
|
|
364
|
+
handleEscapeKeydown: close,
|
|
365
|
+
trigger: trigger,
|
|
366
|
+
scrollableElement: containerRef.current,
|
|
367
|
+
arrowKeyNavigationProviderOptions: {
|
|
368
|
+
type: _uiMenu.ArrowKeyNavigationType.MENU
|
|
369
|
+
},
|
|
370
|
+
fitHeight: 400,
|
|
371
|
+
fitWidth: 200
|
|
372
|
+
}, /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearanceDropdown.LinkAppearanceMenu, {
|
|
373
|
+
url: url,
|
|
374
|
+
intl: intl,
|
|
375
|
+
currentAppearance: undefined,
|
|
376
|
+
editorState: editorView.state,
|
|
377
|
+
allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
|
|
378
|
+
allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
|
|
379
|
+
editorAnalyticsApi: editorAnalyticsApi,
|
|
380
|
+
isDatasourceView: isDatasourceView,
|
|
381
|
+
allowDatasource: allowDatasource,
|
|
382
|
+
dispatchCommand: dispatchCommand,
|
|
383
|
+
settingsConfig: settingsConfig
|
|
384
|
+
})), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
|
|
385
|
+
};
|
|
386
|
+
var getCustomHyperlinkAppearanceDropdown = exports.getCustomHyperlinkAppearanceDropdown = function getCustomHyperlinkAppearanceDropdown(_ref6) {
|
|
387
|
+
var url = _ref6.url,
|
|
388
|
+
intl = _ref6.intl,
|
|
389
|
+
editorAnalyticsApi = _ref6.editorAnalyticsApi,
|
|
390
|
+
editorPluginApi = _ref6.editorPluginApi,
|
|
391
|
+
settingsConfig = _ref6.settingsConfig,
|
|
392
|
+
cardOptions = _ref6.cardOptions,
|
|
393
|
+
allowDatasource = _ref6.allowDatasource,
|
|
394
|
+
isDatasourceView = _ref6.isDatasourceView;
|
|
395
|
+
return {
|
|
396
|
+
type: 'custom',
|
|
397
|
+
fallback: [],
|
|
398
|
+
render: function render(editorView) {
|
|
399
|
+
if (!editorView) {
|
|
400
|
+
return;
|
|
401
|
+
}
|
|
402
|
+
return /*#__PURE__*/_react.default.createElement(CustomHyperlinkDropdown, {
|
|
403
|
+
intl: intl,
|
|
404
|
+
url: url,
|
|
405
|
+
editorAnalyticsApi: editorAnalyticsApi,
|
|
406
|
+
editorPluginApi: editorPluginApi,
|
|
407
|
+
editorView: editorView,
|
|
408
|
+
settingsConfig: settingsConfig,
|
|
409
|
+
cardOptions: cardOptions,
|
|
410
|
+
allowDatasource: allowDatasource,
|
|
411
|
+
isDatasourceView: isDatasourceView
|
|
412
|
+
});
|
|
413
|
+
}
|
|
414
|
+
};
|
|
191
415
|
};
|
package/dist/cjs/ui/toolbar.js
CHANGED
|
@@ -30,6 +30,7 @@ var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove
|
|
|
30
30
|
var _settings2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/settings"));
|
|
31
31
|
var _unlink = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/unlink"));
|
|
32
32
|
var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
|
|
33
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
33
34
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
34
35
|
var _doc = require("../pm-plugins/doc");
|
|
35
36
|
var _pluginKey = require("../pm-plugins/plugin-key");
|
|
@@ -673,7 +674,29 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
|
|
|
673
674
|
type: 'separator'
|
|
674
675
|
}];
|
|
675
676
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
676
|
-
var _api$analytics2, _api$analytics3;
|
|
677
|
+
var _api$analytics2, _api$analytics3, _api$analytics4, _api$analytics5;
|
|
678
|
+
var hyperlinkAppearance = (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? [(0, _HyperlinkToolbarAppearanceDropdown.getCustomHyperlinkAppearanceDropdown)({
|
|
679
|
+
url: link,
|
|
680
|
+
intl: intl,
|
|
681
|
+
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
|
|
682
|
+
allowDatasource: options.allowDatasource,
|
|
683
|
+
editorPluginApi: api,
|
|
684
|
+
cardOptions: options,
|
|
685
|
+
settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink),
|
|
686
|
+
isDatasourceView: false
|
|
687
|
+
})] : [(0, _HyperlinkToolbarAppearanceDropdown.getHyperlinkAppearanceDropdown)({
|
|
688
|
+
url: link,
|
|
689
|
+
intl: intl,
|
|
690
|
+
editorState: state,
|
|
691
|
+
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
|
|
692
|
+
allowDatasource: options.allowDatasource,
|
|
693
|
+
editorPluginApi: api,
|
|
694
|
+
cardOptions: options,
|
|
695
|
+
settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, options.userPreferencesLink),
|
|
696
|
+
isDatasourceView: false
|
|
697
|
+
}), {
|
|
698
|
+
type: 'separator'
|
|
699
|
+
}];
|
|
677
700
|
return [{
|
|
678
701
|
type: 'custom',
|
|
679
702
|
fallback: [],
|
|
@@ -685,19 +708,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
|
|
|
685
708
|
editorView: editorView
|
|
686
709
|
});
|
|
687
710
|
}
|
|
688
|
-
}
|
|
689
|
-
url: link,
|
|
690
|
-
intl: intl,
|
|
691
|
-
editorState: state,
|
|
692
|
-
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
|
|
693
|
-
allowDatasource: options.allowDatasource,
|
|
694
|
-
editorPluginApi: api,
|
|
695
|
-
cardOptions: options,
|
|
696
|
-
settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink),
|
|
697
|
-
isDatasourceView: false
|
|
698
|
-
}), {
|
|
699
|
-
type: 'separator'
|
|
700
|
-
}].concat(editLinkItem);
|
|
711
|
+
}].concat(hyperlinkAppearance, editLinkItem);
|
|
701
712
|
}
|
|
702
713
|
return [{
|
|
703
714
|
type: 'custom',
|
|
@@ -714,7 +725,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
|
|
|
714
725
|
type: 'custom',
|
|
715
726
|
fallback: [],
|
|
716
727
|
render: function render(editorView) {
|
|
717
|
-
var _api$
|
|
728
|
+
var _api$analytics6;
|
|
718
729
|
if (!editorView) {
|
|
719
730
|
return null;
|
|
720
731
|
}
|
|
@@ -725,7 +736,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
|
|
|
725
736
|
editorView: editorView,
|
|
726
737
|
editorState: editorView.state,
|
|
727
738
|
cardOptions: options,
|
|
728
|
-
editorAnalyticsApi: api === null || api === void 0 || (_api$
|
|
739
|
+
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions,
|
|
729
740
|
editorPluginApi: api
|
|
730
741
|
});
|
|
731
742
|
}
|
|
@@ -739,10 +750,10 @@ var getEndingToolbarItems = exports.getEndingToolbarItems = function getEndingTo
|
|
|
739
750
|
* Or explicit user preferences config in order to enable button
|
|
740
751
|
*/
|
|
741
752
|
if ((options.provider || options.userPreferencesLink) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
|
|
742
|
-
var _api$
|
|
753
|
+
var _api$analytics7;
|
|
743
754
|
return [{
|
|
744
755
|
type: 'separator'
|
|
745
|
-
}, getSettingsButton(intl, api === null || api === void 0 || (_api$
|
|
756
|
+
}, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, options.userPreferencesLink)];
|
|
746
757
|
}
|
|
747
758
|
return [];
|
|
748
759
|
};
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState } from 'react';
|
|
2
2
|
import { appearancePropsMap } from '@atlaskit/editor-common/card';
|
|
3
|
+
import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
|
|
4
|
+
import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
|
|
5
|
+
import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
|
|
6
|
+
import { Flex } from '@atlaskit/primitives';
|
|
3
7
|
import { LinkAppearanceMenu } from './LinkToolbarAppearanceDropdown';
|
|
4
8
|
const HyperlinkDropdown = props => {
|
|
5
9
|
var _props$cardOptions3;
|
|
@@ -112,4 +116,152 @@ export const getHyperlinkAppearanceDropdown = ({
|
|
|
112
116
|
iconBefore: currentAppearanceDisplayInformation.icon
|
|
113
117
|
};
|
|
114
118
|
return alignmentToolbarItem;
|
|
119
|
+
};
|
|
120
|
+
const CustomHyperlinkDropdown = props => {
|
|
121
|
+
var _props$cardOptions6;
|
|
122
|
+
const [supportedUrlsMap, setSupportedUrlsMap] = useState(new Map());
|
|
123
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
124
|
+
const cardProvider = useRef(undefined);
|
|
125
|
+
const containerRef = useRef(undefined);
|
|
126
|
+
const {
|
|
127
|
+
url,
|
|
128
|
+
intl,
|
|
129
|
+
editorView,
|
|
130
|
+
cardOptions,
|
|
131
|
+
editorAnalyticsApi,
|
|
132
|
+
allowDatasource,
|
|
133
|
+
isDatasourceView,
|
|
134
|
+
settingsConfig
|
|
135
|
+
} = props;
|
|
136
|
+
// Ignored via go/ees005
|
|
137
|
+
// eslint-disable-next-line require-await
|
|
138
|
+
const getProvider = async () => {
|
|
139
|
+
var _props$cardOptions4;
|
|
140
|
+
if ((_props$cardOptions4 = props.cardOptions) !== null && _props$cardOptions4 !== void 0 && _props$cardOptions4.provider) {
|
|
141
|
+
var _props$cardOptions5;
|
|
142
|
+
return (_props$cardOptions5 = props.cardOptions) === null || _props$cardOptions5 === void 0 ? void 0 : _props$cardOptions5.provider;
|
|
143
|
+
}
|
|
144
|
+
if (cardProvider.current) {
|
|
145
|
+
return cardProvider.current;
|
|
146
|
+
}
|
|
147
|
+
return new Promise(resolve => {
|
|
148
|
+
var _props$editorPluginAp5, _props$editorPluginAp6, _props$editorPluginAp7, _props$editorPluginAp8;
|
|
149
|
+
const cardProvider = (_props$editorPluginAp5 = props.editorPluginApi) === null || _props$editorPluginAp5 === void 0 ? void 0 : (_props$editorPluginAp6 = _props$editorPluginAp5.card) === null || _props$editorPluginAp6 === void 0 ? void 0 : (_props$editorPluginAp7 = _props$editorPluginAp6.sharedState) === null || _props$editorPluginAp7 === void 0 ? void 0 : (_props$editorPluginAp8 = _props$editorPluginAp7.currentState()) === null || _props$editorPluginAp8 === void 0 ? void 0 : _props$editorPluginAp8.provider;
|
|
150
|
+
if (cardProvider) {
|
|
151
|
+
resolve(cardProvider);
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
};
|
|
155
|
+
const resolveUrl = async url => {
|
|
156
|
+
if (supportedUrlsMap.has(url)) {
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
159
|
+
let isUrlSupported = false;
|
|
160
|
+
try {
|
|
161
|
+
var _await$provider$findP2;
|
|
162
|
+
const provider = await getProvider();
|
|
163
|
+
isUrlSupported = (_await$provider$findP2 = await (provider === null || provider === void 0 ? void 0 : provider.findPattern(url))) !== null && _await$provider$findP2 !== void 0 ? _await$provider$findP2 : false;
|
|
164
|
+
} catch (error) {
|
|
165
|
+
isUrlSupported = false;
|
|
166
|
+
}
|
|
167
|
+
const newMap = new Map(supportedUrlsMap);
|
|
168
|
+
newMap.set(url, isUrlSupported);
|
|
169
|
+
setSupportedUrlsMap(newMap);
|
|
170
|
+
};
|
|
171
|
+
useEffect(() => {
|
|
172
|
+
resolveUrl(url);
|
|
173
|
+
// before migrating from a class to a functional component, we were only reacting to changes in the url
|
|
174
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
175
|
+
}, [url, (_props$cardOptions6 = props.cardOptions) === null || _props$cardOptions6 === void 0 ? void 0 : _props$cardOptions6.provider, props.editorPluginApi]);
|
|
176
|
+
if (!supportedUrlsMap.get(url)) {
|
|
177
|
+
return null;
|
|
178
|
+
}
|
|
179
|
+
if (!editorView) {
|
|
180
|
+
return null;
|
|
181
|
+
}
|
|
182
|
+
const dispatchCommand = fn => {
|
|
183
|
+
fn && fn(editorView && editorView.state, editorView && editorView.dispatch);
|
|
184
|
+
// Refocus the view to ensure the editor has focus
|
|
185
|
+
if (editorView && !editorView.hasFocus()) {
|
|
186
|
+
editorView.focus();
|
|
187
|
+
}
|
|
188
|
+
};
|
|
189
|
+
const toggleOpen = () => setIsOpen(open => !open);
|
|
190
|
+
const close = () => setIsOpen(false);
|
|
191
|
+
const currentAppearanceDisplayInformation = appearancePropsMap['url'];
|
|
192
|
+
const title = intl.formatMessage(currentAppearanceDisplayInformation.title);
|
|
193
|
+
const trigger = /*#__PURE__*/React.createElement(Button, {
|
|
194
|
+
selected: isOpen,
|
|
195
|
+
title: title,
|
|
196
|
+
"aria-label": title,
|
|
197
|
+
"aria-expanded": isOpen,
|
|
198
|
+
"aria-haspopup": true,
|
|
199
|
+
onClick: toggleOpen,
|
|
200
|
+
icon: currentAppearanceDisplayInformation.icon({
|
|
201
|
+
label: ''
|
|
202
|
+
}),
|
|
203
|
+
iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
|
|
204
|
+
label: "",
|
|
205
|
+
spacing: "compact"
|
|
206
|
+
})
|
|
207
|
+
}, title);
|
|
208
|
+
return /*#__PURE__*/React.createElement(Flex, {
|
|
209
|
+
ref: containerRef,
|
|
210
|
+
gap: "space.075"
|
|
211
|
+
}, /*#__PURE__*/React.createElement(UiDropdown, {
|
|
212
|
+
mountTo: containerRef.current,
|
|
213
|
+
isOpen: isOpen,
|
|
214
|
+
handleClickOutside: close,
|
|
215
|
+
handleEscapeKeydown: close,
|
|
216
|
+
trigger: trigger,
|
|
217
|
+
scrollableElement: containerRef.current,
|
|
218
|
+
arrowKeyNavigationProviderOptions: {
|
|
219
|
+
type: ArrowKeyNavigationType.MENU
|
|
220
|
+
},
|
|
221
|
+
fitHeight: 400,
|
|
222
|
+
fitWidth: 200
|
|
223
|
+
}, /*#__PURE__*/React.createElement(LinkAppearanceMenu, {
|
|
224
|
+
url: url,
|
|
225
|
+
intl: intl,
|
|
226
|
+
currentAppearance: undefined,
|
|
227
|
+
editorState: editorView.state,
|
|
228
|
+
allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
|
|
229
|
+
allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
|
|
230
|
+
editorAnalyticsApi: editorAnalyticsApi,
|
|
231
|
+
isDatasourceView: isDatasourceView,
|
|
232
|
+
allowDatasource: allowDatasource,
|
|
233
|
+
dispatchCommand: dispatchCommand,
|
|
234
|
+
settingsConfig: settingsConfig
|
|
235
|
+
})), /*#__PURE__*/React.createElement(Separator, null));
|
|
236
|
+
};
|
|
237
|
+
export const getCustomHyperlinkAppearanceDropdown = ({
|
|
238
|
+
url,
|
|
239
|
+
intl,
|
|
240
|
+
editorAnalyticsApi,
|
|
241
|
+
editorPluginApi,
|
|
242
|
+
settingsConfig,
|
|
243
|
+
cardOptions,
|
|
244
|
+
allowDatasource,
|
|
245
|
+
isDatasourceView
|
|
246
|
+
}) => {
|
|
247
|
+
return {
|
|
248
|
+
type: 'custom',
|
|
249
|
+
fallback: [],
|
|
250
|
+
render: editorView => {
|
|
251
|
+
if (!editorView) {
|
|
252
|
+
return;
|
|
253
|
+
}
|
|
254
|
+
return /*#__PURE__*/React.createElement(CustomHyperlinkDropdown, {
|
|
255
|
+
intl: intl,
|
|
256
|
+
url: url,
|
|
257
|
+
editorAnalyticsApi: editorAnalyticsApi,
|
|
258
|
+
editorPluginApi: editorPluginApi,
|
|
259
|
+
editorView: editorView,
|
|
260
|
+
settingsConfig: settingsConfig,
|
|
261
|
+
cardOptions: cardOptions,
|
|
262
|
+
allowDatasource: allowDatasource,
|
|
263
|
+
isDatasourceView: isDatasourceView
|
|
264
|
+
});
|
|
265
|
+
}
|
|
266
|
+
};
|
|
115
267
|
};
|
|
@@ -20,6 +20,7 @@ import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
|
20
20
|
import CogIcon from '@atlaskit/icon/glyph/editor/settings';
|
|
21
21
|
import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
|
|
22
22
|
import OpenIcon from '@atlaskit/icon/glyph/shortcut';
|
|
23
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
23
24
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
24
25
|
import { changeSelectedCardToText } from '../pm-plugins/doc';
|
|
25
26
|
import { pluginKey } from '../pm-plugins/plugin-key';
|
|
@@ -28,7 +29,7 @@ import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
|
|
|
28
29
|
import { buildEditLinkToolbar, editLinkToolbarConfig, getEditLinkCallback } from './EditLinkToolbar';
|
|
29
30
|
import { EditToolbarButton } from './EditToolbarButton';
|
|
30
31
|
import { HyperlinkToolbarAppearance } from './HyperlinkToolbarAppearance';
|
|
31
|
-
import { getHyperlinkAppearanceDropdown } from './HyperlinkToolbarAppearanceDropdown';
|
|
32
|
+
import { getCustomHyperlinkAppearanceDropdown, getHyperlinkAppearanceDropdown } from './HyperlinkToolbarAppearanceDropdown';
|
|
32
33
|
import { LinkToolbarAppearance } from './LinkToolbarAppearance';
|
|
33
34
|
import { getLinkAppearanceDropdown } from './LinkToolbarAppearanceDropdown';
|
|
34
35
|
import { ToolbarViewedEvent } from './ToolbarViewedEvent';
|
|
@@ -662,29 +663,39 @@ export const getStartingToolbarItems = (options, api) => {
|
|
|
662
663
|
type: 'separator'
|
|
663
664
|
}];
|
|
664
665
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
665
|
-
var _api$analytics2, _api$analytics3;
|
|
666
|
-
|
|
667
|
-
type: 'custom',
|
|
668
|
-
fallback: [],
|
|
669
|
-
render: editorView => /*#__PURE__*/React.createElement(ToolbarViewedEvent, {
|
|
670
|
-
key: "edit.link.menu.viewed",
|
|
671
|
-
url: link,
|
|
672
|
-
display: "url",
|
|
673
|
-
editorView: editorView
|
|
674
|
-
})
|
|
675
|
-
}, getHyperlinkAppearanceDropdown({
|
|
666
|
+
var _api$analytics2, _api$analytics3, _api$analytics4, _api$analytics5;
|
|
667
|
+
const hyperlinkAppearance = fg('platform_editor_controls_patch_1') ? [getCustomHyperlinkAppearanceDropdown({
|
|
676
668
|
url: link,
|
|
677
669
|
intl,
|
|
678
|
-
editorState: state,
|
|
679
670
|
editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
|
|
680
671
|
allowDatasource: options.allowDatasource,
|
|
681
672
|
editorPluginApi: api,
|
|
682
673
|
cardOptions: options,
|
|
683
674
|
settingsConfig: getSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink),
|
|
684
675
|
isDatasourceView: false
|
|
676
|
+
})] : [getHyperlinkAppearanceDropdown({
|
|
677
|
+
url: link,
|
|
678
|
+
intl,
|
|
679
|
+
editorState: state,
|
|
680
|
+
editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
|
|
681
|
+
allowDatasource: options.allowDatasource,
|
|
682
|
+
editorPluginApi: api,
|
|
683
|
+
cardOptions: options,
|
|
684
|
+
settingsConfig: getSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, options.userPreferencesLink),
|
|
685
|
+
isDatasourceView: false
|
|
685
686
|
}), {
|
|
686
687
|
type: 'separator'
|
|
687
|
-
}
|
|
688
|
+
}];
|
|
689
|
+
return [{
|
|
690
|
+
type: 'custom',
|
|
691
|
+
fallback: [],
|
|
692
|
+
render: editorView => /*#__PURE__*/React.createElement(ToolbarViewedEvent, {
|
|
693
|
+
key: "edit.link.menu.viewed",
|
|
694
|
+
url: link,
|
|
695
|
+
display: "url",
|
|
696
|
+
editorView: editorView
|
|
697
|
+
})
|
|
698
|
+
}, ...hyperlinkAppearance, ...editLinkItem];
|
|
688
699
|
}
|
|
689
700
|
return [{
|
|
690
701
|
type: 'custom',
|
|
@@ -699,7 +710,7 @@ export const getStartingToolbarItems = (options, api) => {
|
|
|
699
710
|
type: 'custom',
|
|
700
711
|
fallback: [],
|
|
701
712
|
render: editorView => {
|
|
702
|
-
var _api$
|
|
713
|
+
var _api$analytics6;
|
|
703
714
|
if (!editorView) {
|
|
704
715
|
return null;
|
|
705
716
|
}
|
|
@@ -710,7 +721,7 @@ export const getStartingToolbarItems = (options, api) => {
|
|
|
710
721
|
editorView: editorView,
|
|
711
722
|
editorState: editorView.state,
|
|
712
723
|
cardOptions: options,
|
|
713
|
-
editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$
|
|
724
|
+
editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions,
|
|
714
725
|
editorPluginApi: api
|
|
715
726
|
});
|
|
716
727
|
}
|
|
@@ -723,10 +734,10 @@ export const getEndingToolbarItems = (options, api) => (intl, link) => {
|
|
|
723
734
|
* Or explicit user preferences config in order to enable button
|
|
724
735
|
*/
|
|
725
736
|
if ((options.provider || options.userPreferencesLink) && editorExperiment('platform_editor_controls', 'control')) {
|
|
726
|
-
var _api$
|
|
737
|
+
var _api$analytics7;
|
|
727
738
|
return [{
|
|
728
739
|
type: 'separator'
|
|
729
|
-
}, getSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$
|
|
740
|
+
}, getSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, options.userPreferencesLink)];
|
|
730
741
|
}
|
|
731
742
|
return [];
|
|
732
743
|
};
|
|
@@ -3,6 +3,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
3
3
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
4
4
|
import React, { useEffect, useRef, useState } from 'react';
|
|
5
5
|
import { appearancePropsMap } from '@atlaskit/editor-common/card';
|
|
6
|
+
import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
|
|
7
|
+
import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
|
|
8
|
+
import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
|
|
9
|
+
import { Flex } from '@atlaskit/primitives';
|
|
6
10
|
import { LinkAppearanceMenu } from './LinkToolbarAppearanceDropdown';
|
|
7
11
|
var HyperlinkDropdown = function HyperlinkDropdown(props) {
|
|
8
12
|
var _props$cardOptions3;
|
|
@@ -178,4 +182,224 @@ export var getHyperlinkAppearanceDropdown = function getHyperlinkAppearanceDropd
|
|
|
178
182
|
iconBefore: currentAppearanceDisplayInformation.icon
|
|
179
183
|
};
|
|
180
184
|
return alignmentToolbarItem;
|
|
185
|
+
};
|
|
186
|
+
var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
|
|
187
|
+
var _props$cardOptions6;
|
|
188
|
+
var _useState3 = useState(new Map()),
|
|
189
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
190
|
+
supportedUrlsMap = _useState4[0],
|
|
191
|
+
setSupportedUrlsMap = _useState4[1];
|
|
192
|
+
var _useState5 = useState(false),
|
|
193
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
194
|
+
isOpen = _useState6[0],
|
|
195
|
+
setIsOpen = _useState6[1];
|
|
196
|
+
var cardProvider = useRef(undefined);
|
|
197
|
+
var containerRef = useRef(undefined);
|
|
198
|
+
var url = props.url,
|
|
199
|
+
intl = props.intl,
|
|
200
|
+
editorView = props.editorView,
|
|
201
|
+
cardOptions = props.cardOptions,
|
|
202
|
+
editorAnalyticsApi = props.editorAnalyticsApi,
|
|
203
|
+
allowDatasource = props.allowDatasource,
|
|
204
|
+
isDatasourceView = props.isDatasourceView,
|
|
205
|
+
settingsConfig = props.settingsConfig;
|
|
206
|
+
// Ignored via go/ees005
|
|
207
|
+
// eslint-disable-next-line require-await
|
|
208
|
+
var getProvider = /*#__PURE__*/function () {
|
|
209
|
+
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
|
|
210
|
+
var _props$cardOptions4;
|
|
211
|
+
var _props$cardOptions5;
|
|
212
|
+
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
|
|
213
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
214
|
+
case 0:
|
|
215
|
+
if (!((_props$cardOptions4 = props.cardOptions) !== null && _props$cardOptions4 !== void 0 && _props$cardOptions4.provider)) {
|
|
216
|
+
_context3.next = 2;
|
|
217
|
+
break;
|
|
218
|
+
}
|
|
219
|
+
return _context3.abrupt("return", (_props$cardOptions5 = props.cardOptions) === null || _props$cardOptions5 === void 0 ? void 0 : _props$cardOptions5.provider);
|
|
220
|
+
case 2:
|
|
221
|
+
if (!cardProvider.current) {
|
|
222
|
+
_context3.next = 4;
|
|
223
|
+
break;
|
|
224
|
+
}
|
|
225
|
+
return _context3.abrupt("return", cardProvider.current);
|
|
226
|
+
case 4:
|
|
227
|
+
return _context3.abrupt("return", new Promise(function (resolve) {
|
|
228
|
+
var _props$editorPluginAp2;
|
|
229
|
+
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;
|
|
230
|
+
if (cardProvider) {
|
|
231
|
+
resolve(cardProvider);
|
|
232
|
+
}
|
|
233
|
+
}));
|
|
234
|
+
case 5:
|
|
235
|
+
case "end":
|
|
236
|
+
return _context3.stop();
|
|
237
|
+
}
|
|
238
|
+
}, _callee3);
|
|
239
|
+
}));
|
|
240
|
+
return function getProvider() {
|
|
241
|
+
return _ref4.apply(this, arguments);
|
|
242
|
+
};
|
|
243
|
+
}();
|
|
244
|
+
var resolveUrl = /*#__PURE__*/function () {
|
|
245
|
+
var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(url) {
|
|
246
|
+
var isUrlSupported, _yield$provider$findP2, provider, newMap;
|
|
247
|
+
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
|
|
248
|
+
while (1) switch (_context4.prev = _context4.next) {
|
|
249
|
+
case 0:
|
|
250
|
+
if (!supportedUrlsMap.has(url)) {
|
|
251
|
+
_context4.next = 2;
|
|
252
|
+
break;
|
|
253
|
+
}
|
|
254
|
+
return _context4.abrupt("return");
|
|
255
|
+
case 2:
|
|
256
|
+
isUrlSupported = false;
|
|
257
|
+
_context4.prev = 3;
|
|
258
|
+
_context4.next = 6;
|
|
259
|
+
return getProvider();
|
|
260
|
+
case 6:
|
|
261
|
+
provider = _context4.sent;
|
|
262
|
+
_context4.next = 9;
|
|
263
|
+
return provider === null || provider === void 0 ? void 0 : provider.findPattern(url);
|
|
264
|
+
case 9:
|
|
265
|
+
_context4.t1 = _yield$provider$findP2 = _context4.sent;
|
|
266
|
+
_context4.t0 = _context4.t1 !== null;
|
|
267
|
+
if (!_context4.t0) {
|
|
268
|
+
_context4.next = 13;
|
|
269
|
+
break;
|
|
270
|
+
}
|
|
271
|
+
_context4.t0 = _yield$provider$findP2 !== void 0;
|
|
272
|
+
case 13:
|
|
273
|
+
if (!_context4.t0) {
|
|
274
|
+
_context4.next = 17;
|
|
275
|
+
break;
|
|
276
|
+
}
|
|
277
|
+
_context4.t2 = _yield$provider$findP2;
|
|
278
|
+
_context4.next = 18;
|
|
279
|
+
break;
|
|
280
|
+
case 17:
|
|
281
|
+
_context4.t2 = false;
|
|
282
|
+
case 18:
|
|
283
|
+
isUrlSupported = _context4.t2;
|
|
284
|
+
_context4.next = 24;
|
|
285
|
+
break;
|
|
286
|
+
case 21:
|
|
287
|
+
_context4.prev = 21;
|
|
288
|
+
_context4.t3 = _context4["catch"](3);
|
|
289
|
+
isUrlSupported = false;
|
|
290
|
+
case 24:
|
|
291
|
+
newMap = new Map(supportedUrlsMap);
|
|
292
|
+
newMap.set(url, isUrlSupported);
|
|
293
|
+
setSupportedUrlsMap(newMap);
|
|
294
|
+
case 27:
|
|
295
|
+
case "end":
|
|
296
|
+
return _context4.stop();
|
|
297
|
+
}
|
|
298
|
+
}, _callee4, null, [[3, 21]]);
|
|
299
|
+
}));
|
|
300
|
+
return function resolveUrl(_x2) {
|
|
301
|
+
return _ref5.apply(this, arguments);
|
|
302
|
+
};
|
|
303
|
+
}();
|
|
304
|
+
useEffect(function () {
|
|
305
|
+
resolveUrl(url);
|
|
306
|
+
// before migrating from a class to a functional component, we were only reacting to changes in the url
|
|
307
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
308
|
+
}, [url, (_props$cardOptions6 = props.cardOptions) === null || _props$cardOptions6 === void 0 ? void 0 : _props$cardOptions6.provider, props.editorPluginApi]);
|
|
309
|
+
if (!supportedUrlsMap.get(url)) {
|
|
310
|
+
return null;
|
|
311
|
+
}
|
|
312
|
+
if (!editorView) {
|
|
313
|
+
return null;
|
|
314
|
+
}
|
|
315
|
+
var dispatchCommand = function dispatchCommand(fn) {
|
|
316
|
+
fn && fn(editorView && editorView.state, editorView && editorView.dispatch);
|
|
317
|
+
// Refocus the view to ensure the editor has focus
|
|
318
|
+
if (editorView && !editorView.hasFocus()) {
|
|
319
|
+
editorView.focus();
|
|
320
|
+
}
|
|
321
|
+
};
|
|
322
|
+
var toggleOpen = function toggleOpen() {
|
|
323
|
+
return setIsOpen(function (open) {
|
|
324
|
+
return !open;
|
|
325
|
+
});
|
|
326
|
+
};
|
|
327
|
+
var close = function close() {
|
|
328
|
+
return setIsOpen(false);
|
|
329
|
+
};
|
|
330
|
+
var currentAppearanceDisplayInformation = appearancePropsMap['url'];
|
|
331
|
+
var title = intl.formatMessage(currentAppearanceDisplayInformation.title);
|
|
332
|
+
var trigger = /*#__PURE__*/React.createElement(Button, {
|
|
333
|
+
selected: isOpen,
|
|
334
|
+
title: title,
|
|
335
|
+
"aria-label": title,
|
|
336
|
+
"aria-expanded": isOpen,
|
|
337
|
+
"aria-haspopup": true,
|
|
338
|
+
onClick: toggleOpen,
|
|
339
|
+
icon: currentAppearanceDisplayInformation.icon({
|
|
340
|
+
label: ''
|
|
341
|
+
}),
|
|
342
|
+
iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
|
|
343
|
+
label: "",
|
|
344
|
+
spacing: "compact"
|
|
345
|
+
})
|
|
346
|
+
}, title);
|
|
347
|
+
return /*#__PURE__*/React.createElement(Flex, {
|
|
348
|
+
ref: containerRef,
|
|
349
|
+
gap: "space.075"
|
|
350
|
+
}, /*#__PURE__*/React.createElement(UiDropdown, {
|
|
351
|
+
mountTo: containerRef.current,
|
|
352
|
+
isOpen: isOpen,
|
|
353
|
+
handleClickOutside: close,
|
|
354
|
+
handleEscapeKeydown: close,
|
|
355
|
+
trigger: trigger,
|
|
356
|
+
scrollableElement: containerRef.current,
|
|
357
|
+
arrowKeyNavigationProviderOptions: {
|
|
358
|
+
type: ArrowKeyNavigationType.MENU
|
|
359
|
+
},
|
|
360
|
+
fitHeight: 400,
|
|
361
|
+
fitWidth: 200
|
|
362
|
+
}, /*#__PURE__*/React.createElement(LinkAppearanceMenu, {
|
|
363
|
+
url: url,
|
|
364
|
+
intl: intl,
|
|
365
|
+
currentAppearance: undefined,
|
|
366
|
+
editorState: editorView.state,
|
|
367
|
+
allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
|
|
368
|
+
allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
|
|
369
|
+
editorAnalyticsApi: editorAnalyticsApi,
|
|
370
|
+
isDatasourceView: isDatasourceView,
|
|
371
|
+
allowDatasource: allowDatasource,
|
|
372
|
+
dispatchCommand: dispatchCommand,
|
|
373
|
+
settingsConfig: settingsConfig
|
|
374
|
+
})), /*#__PURE__*/React.createElement(Separator, null));
|
|
375
|
+
};
|
|
376
|
+
export var getCustomHyperlinkAppearanceDropdown = function getCustomHyperlinkAppearanceDropdown(_ref6) {
|
|
377
|
+
var url = _ref6.url,
|
|
378
|
+
intl = _ref6.intl,
|
|
379
|
+
editorAnalyticsApi = _ref6.editorAnalyticsApi,
|
|
380
|
+
editorPluginApi = _ref6.editorPluginApi,
|
|
381
|
+
settingsConfig = _ref6.settingsConfig,
|
|
382
|
+
cardOptions = _ref6.cardOptions,
|
|
383
|
+
allowDatasource = _ref6.allowDatasource,
|
|
384
|
+
isDatasourceView = _ref6.isDatasourceView;
|
|
385
|
+
return {
|
|
386
|
+
type: 'custom',
|
|
387
|
+
fallback: [],
|
|
388
|
+
render: function render(editorView) {
|
|
389
|
+
if (!editorView) {
|
|
390
|
+
return;
|
|
391
|
+
}
|
|
392
|
+
return /*#__PURE__*/React.createElement(CustomHyperlinkDropdown, {
|
|
393
|
+
intl: intl,
|
|
394
|
+
url: url,
|
|
395
|
+
editorAnalyticsApi: editorAnalyticsApi,
|
|
396
|
+
editorPluginApi: editorPluginApi,
|
|
397
|
+
editorView: editorView,
|
|
398
|
+
settingsConfig: settingsConfig,
|
|
399
|
+
cardOptions: cardOptions,
|
|
400
|
+
allowDatasource: allowDatasource,
|
|
401
|
+
isDatasourceView: isDatasourceView
|
|
402
|
+
});
|
|
403
|
+
}
|
|
404
|
+
};
|
|
181
405
|
};
|
package/dist/esm/ui/toolbar.js
CHANGED
|
@@ -24,6 +24,7 @@ import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
|
24
24
|
import CogIcon from '@atlaskit/icon/glyph/editor/settings';
|
|
25
25
|
import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
|
|
26
26
|
import OpenIcon from '@atlaskit/icon/glyph/shortcut';
|
|
27
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
27
28
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
28
29
|
import { changeSelectedCardToText } from '../pm-plugins/doc';
|
|
29
30
|
import { pluginKey } from '../pm-plugins/plugin-key';
|
|
@@ -32,7 +33,7 @@ import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
|
|
|
32
33
|
import { buildEditLinkToolbar, editLinkToolbarConfig, getEditLinkCallback } from './EditLinkToolbar';
|
|
33
34
|
import { EditToolbarButton } from './EditToolbarButton';
|
|
34
35
|
import { HyperlinkToolbarAppearance } from './HyperlinkToolbarAppearance';
|
|
35
|
-
import { getHyperlinkAppearanceDropdown } from './HyperlinkToolbarAppearanceDropdown';
|
|
36
|
+
import { getCustomHyperlinkAppearanceDropdown, getHyperlinkAppearanceDropdown } from './HyperlinkToolbarAppearanceDropdown';
|
|
36
37
|
import { LinkToolbarAppearance } from './LinkToolbarAppearance';
|
|
37
38
|
import { getLinkAppearanceDropdown } from './LinkToolbarAppearanceDropdown';
|
|
38
39
|
import { ToolbarViewedEvent } from './ToolbarViewedEvent';
|
|
@@ -663,7 +664,29 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
|
|
|
663
664
|
type: 'separator'
|
|
664
665
|
}];
|
|
665
666
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
666
|
-
var _api$analytics2, _api$analytics3;
|
|
667
|
+
var _api$analytics2, _api$analytics3, _api$analytics4, _api$analytics5;
|
|
668
|
+
var hyperlinkAppearance = fg('platform_editor_controls_patch_1') ? [getCustomHyperlinkAppearanceDropdown({
|
|
669
|
+
url: link,
|
|
670
|
+
intl: intl,
|
|
671
|
+
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
|
|
672
|
+
allowDatasource: options.allowDatasource,
|
|
673
|
+
editorPluginApi: api,
|
|
674
|
+
cardOptions: options,
|
|
675
|
+
settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink),
|
|
676
|
+
isDatasourceView: false
|
|
677
|
+
})] : [getHyperlinkAppearanceDropdown({
|
|
678
|
+
url: link,
|
|
679
|
+
intl: intl,
|
|
680
|
+
editorState: state,
|
|
681
|
+
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
|
|
682
|
+
allowDatasource: options.allowDatasource,
|
|
683
|
+
editorPluginApi: api,
|
|
684
|
+
cardOptions: options,
|
|
685
|
+
settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, options.userPreferencesLink),
|
|
686
|
+
isDatasourceView: false
|
|
687
|
+
}), {
|
|
688
|
+
type: 'separator'
|
|
689
|
+
}];
|
|
667
690
|
return [{
|
|
668
691
|
type: 'custom',
|
|
669
692
|
fallback: [],
|
|
@@ -675,19 +698,7 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
|
|
|
675
698
|
editorView: editorView
|
|
676
699
|
});
|
|
677
700
|
}
|
|
678
|
-
},
|
|
679
|
-
url: link,
|
|
680
|
-
intl: intl,
|
|
681
|
-
editorState: state,
|
|
682
|
-
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
|
|
683
|
-
allowDatasource: options.allowDatasource,
|
|
684
|
-
editorPluginApi: api,
|
|
685
|
-
cardOptions: options,
|
|
686
|
-
settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink),
|
|
687
|
-
isDatasourceView: false
|
|
688
|
-
}), {
|
|
689
|
-
type: 'separator'
|
|
690
|
-
}].concat(editLinkItem);
|
|
701
|
+
}].concat(hyperlinkAppearance, editLinkItem);
|
|
691
702
|
}
|
|
692
703
|
return [{
|
|
693
704
|
type: 'custom',
|
|
@@ -704,7 +715,7 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
|
|
|
704
715
|
type: 'custom',
|
|
705
716
|
fallback: [],
|
|
706
717
|
render: function render(editorView) {
|
|
707
|
-
var _api$
|
|
718
|
+
var _api$analytics6;
|
|
708
719
|
if (!editorView) {
|
|
709
720
|
return null;
|
|
710
721
|
}
|
|
@@ -715,7 +726,7 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
|
|
|
715
726
|
editorView: editorView,
|
|
716
727
|
editorState: editorView.state,
|
|
717
728
|
cardOptions: options,
|
|
718
|
-
editorAnalyticsApi: api === null || api === void 0 || (_api$
|
|
729
|
+
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions,
|
|
719
730
|
editorPluginApi: api
|
|
720
731
|
});
|
|
721
732
|
}
|
|
@@ -729,10 +740,10 @@ export var getEndingToolbarItems = function getEndingToolbarItems(options, api)
|
|
|
729
740
|
* Or explicit user preferences config in order to enable button
|
|
730
741
|
*/
|
|
731
742
|
if ((options.provider || options.userPreferencesLink) && editorExperiment('platform_editor_controls', 'control')) {
|
|
732
|
-
var _api$
|
|
743
|
+
var _api$analytics7;
|
|
733
744
|
return [{
|
|
734
745
|
type: 'separator'
|
|
735
|
-
}, getSettingsButton(intl, api === null || api === void 0 || (_api$
|
|
746
|
+
}, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, options.userPreferencesLink)];
|
|
736
747
|
}
|
|
737
748
|
return [];
|
|
738
749
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Command, FloatingToolbarDropdown, FloatingToolbarItem } from '@atlaskit/editor-common/types';
|
|
1
|
+
import type { Command, FloatingToolbarDropdown, FloatingToolbarCustom, FloatingToolbarItem } from '@atlaskit/editor-common/types';
|
|
2
2
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import type { HyperlinkToolbarAppearanceProps } from './HyperlinkToolbarAppearance';
|
|
4
4
|
export declare const getHyperlinkAppearanceDropdown: ({ url, intl, editorState, editorAnalyticsApi, editorPluginApi, settingsConfig, cardOptions, allowDatasource, isDatasourceView, }: Omit<HyperlinkToolbarAppearanceProps, "editorState"> & {
|
|
@@ -7,3 +7,8 @@ export declare const getHyperlinkAppearanceDropdown: ({ url, intl, editorState,
|
|
|
7
7
|
allowDatasource?: boolean | undefined;
|
|
8
8
|
isDatasourceView?: boolean | undefined;
|
|
9
9
|
}) => FloatingToolbarDropdown<Command>;
|
|
10
|
+
export declare const getCustomHyperlinkAppearanceDropdown: ({ url, intl, editorAnalyticsApi, editorPluginApi, settingsConfig, cardOptions, allowDatasource, isDatasourceView, }: Omit<HyperlinkToolbarAppearanceProps, "editorState"> & {
|
|
11
|
+
settingsConfig: FloatingToolbarItem<Command>;
|
|
12
|
+
allowDatasource?: boolean | undefined;
|
|
13
|
+
isDatasourceView?: boolean | undefined;
|
|
14
|
+
}) => FloatingToolbarCustom<Command>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Command, FloatingToolbarDropdown, FloatingToolbarItem } from '@atlaskit/editor-common/types';
|
|
1
|
+
import type { Command, FloatingToolbarDropdown, FloatingToolbarCustom, FloatingToolbarItem } from '@atlaskit/editor-common/types';
|
|
2
2
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import type { HyperlinkToolbarAppearanceProps } from './HyperlinkToolbarAppearance';
|
|
4
4
|
export declare const getHyperlinkAppearanceDropdown: ({ url, intl, editorState, editorAnalyticsApi, editorPluginApi, settingsConfig, cardOptions, allowDatasource, isDatasourceView, }: Omit<HyperlinkToolbarAppearanceProps, "editorState"> & {
|
|
@@ -7,3 +7,8 @@ export declare const getHyperlinkAppearanceDropdown: ({ url, intl, editorState,
|
|
|
7
7
|
allowDatasource?: boolean | undefined;
|
|
8
8
|
isDatasourceView?: boolean | undefined;
|
|
9
9
|
}) => FloatingToolbarDropdown<Command>;
|
|
10
|
+
export declare const getCustomHyperlinkAppearanceDropdown: ({ url, intl, editorAnalyticsApi, editorPluginApi, settingsConfig, cardOptions, allowDatasource, isDatasourceView, }: Omit<HyperlinkToolbarAppearanceProps, "editorState"> & {
|
|
11
|
+
settingsConfig: FloatingToolbarItem<Command>;
|
|
12
|
+
allowDatasource?: boolean | undefined;
|
|
13
|
+
isDatasourceView?: boolean | undefined;
|
|
14
|
+
}) => FloatingToolbarCustom<Command>;
|