@atlaskit/editor-plugin-card 5.4.4 → 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 +15 -0
- package/dist/cjs/ui/HyperlinkToolbarAppearanceDropdown.js +225 -1
- package/dist/cjs/ui/toolbar.js +29 -19
- package/dist/es2019/ui/HyperlinkToolbarAppearanceDropdown.js +152 -0
- package/dist/es2019/ui/toolbar.js +29 -19
- package/dist/esm/ui/HyperlinkToolbarAppearanceDropdown.js +224 -0
- package/dist/esm/ui/toolbar.js +30 -20
- package/dist/types/ui/HyperlinkToolbarAppearanceDropdown.d.ts +6 -1
- package/dist/types-ts4.5/ui/HyperlinkToolbarAppearanceDropdown.d.ts +6 -1
- package/package.json +4 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
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
|
+
|
|
12
|
+
## 5.4.5
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 5.4.4
|
|
4
19
|
|
|
5
20
|
### 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
|
@@ -225,7 +225,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
|
|
|
225
225
|
var activeCommentMark = node.marks.find(function (mark) {
|
|
226
226
|
return mark.type.name === 'annotation' && (annotationApiState === null || annotationApiState === void 0 ? void 0 : annotationApiState.annotations[mark.attrs.id]) === false;
|
|
227
227
|
});
|
|
228
|
-
var isCommentEnabled = annotationApiState && annotationApiState.isVisible && !annotationApiState.bookmark && !annotationApiState.mouseData.isSelecting && !activeCommentMark && node.type === state.schema.nodes.inlineCard
|
|
228
|
+
var isCommentEnabled = annotationApiState && annotationApiState.isVisible && !annotationApiState.bookmark && !annotationApiState.mouseData.isSelecting && !activeCommentMark && node.type === state.schema.nodes.inlineCard;
|
|
229
229
|
var onCommentButtonClick = function onCommentButtonClick(state, dispatch) {
|
|
230
230
|
var _pluginInjectionApi$a3;
|
|
231
231
|
if (!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.annotation) || !isCommentEnabled) {
|
|
@@ -674,7 +674,29 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
|
|
|
674
674
|
type: 'separator'
|
|
675
675
|
}];
|
|
676
676
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
677
|
-
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
|
+
}];
|
|
678
700
|
return [{
|
|
679
701
|
type: 'custom',
|
|
680
702
|
fallback: [],
|
|
@@ -686,19 +708,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
|
|
|
686
708
|
editorView: editorView
|
|
687
709
|
});
|
|
688
710
|
}
|
|
689
|
-
}
|
|
690
|
-
url: link,
|
|
691
|
-
intl: intl,
|
|
692
|
-
editorState: state,
|
|
693
|
-
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
|
|
694
|
-
allowDatasource: options.allowDatasource,
|
|
695
|
-
editorPluginApi: api,
|
|
696
|
-
cardOptions: options,
|
|
697
|
-
settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink),
|
|
698
|
-
isDatasourceView: false
|
|
699
|
-
}), {
|
|
700
|
-
type: 'separator'
|
|
701
|
-
}].concat(editLinkItem);
|
|
711
|
+
}].concat(hyperlinkAppearance, editLinkItem);
|
|
702
712
|
}
|
|
703
713
|
return [{
|
|
704
714
|
type: 'custom',
|
|
@@ -715,7 +725,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
|
|
|
715
725
|
type: 'custom',
|
|
716
726
|
fallback: [],
|
|
717
727
|
render: function render(editorView) {
|
|
718
|
-
var _api$
|
|
728
|
+
var _api$analytics6;
|
|
719
729
|
if (!editorView) {
|
|
720
730
|
return null;
|
|
721
731
|
}
|
|
@@ -726,7 +736,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
|
|
|
726
736
|
editorView: editorView,
|
|
727
737
|
editorState: editorView.state,
|
|
728
738
|
cardOptions: options,
|
|
729
|
-
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,
|
|
730
740
|
editorPluginApi: api
|
|
731
741
|
});
|
|
732
742
|
}
|
|
@@ -740,10 +750,10 @@ var getEndingToolbarItems = exports.getEndingToolbarItems = function getEndingTo
|
|
|
740
750
|
* Or explicit user preferences config in order to enable button
|
|
741
751
|
*/
|
|
742
752
|
if ((options.provider || options.userPreferencesLink) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
|
|
743
|
-
var _api$
|
|
753
|
+
var _api$analytics7;
|
|
744
754
|
return [{
|
|
745
755
|
type: 'separator'
|
|
746
|
-
}, 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)];
|
|
747
757
|
}
|
|
748
758
|
return [];
|
|
749
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
|
};
|
|
@@ -29,7 +29,7 @@ import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
|
|
|
29
29
|
import { buildEditLinkToolbar, editLinkToolbarConfig, getEditLinkCallback } from './EditLinkToolbar';
|
|
30
30
|
import { EditToolbarButton } from './EditToolbarButton';
|
|
31
31
|
import { HyperlinkToolbarAppearance } from './HyperlinkToolbarAppearance';
|
|
32
|
-
import { getHyperlinkAppearanceDropdown } from './HyperlinkToolbarAppearanceDropdown';
|
|
32
|
+
import { getCustomHyperlinkAppearanceDropdown, getHyperlinkAppearanceDropdown } from './HyperlinkToolbarAppearanceDropdown';
|
|
33
33
|
import { LinkToolbarAppearance } from './LinkToolbarAppearance';
|
|
34
34
|
import { getLinkAppearanceDropdown } from './LinkToolbarAppearanceDropdown';
|
|
35
35
|
import { ToolbarViewedEvent } from './ToolbarViewedEvent';
|
|
@@ -215,7 +215,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
|
|
|
215
215
|
const pluginState = pluginKey.getState(state);
|
|
216
216
|
const annotationApiState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.annotation) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.sharedState.currentState();
|
|
217
217
|
const activeCommentMark = node.marks.find(mark => mark.type.name === 'annotation' && (annotationApiState === null || annotationApiState === void 0 ? void 0 : annotationApiState.annotations[mark.attrs.id]) === false);
|
|
218
|
-
const isCommentEnabled = annotationApiState && annotationApiState.isVisible && !annotationApiState.bookmark && !annotationApiState.mouseData.isSelecting && !activeCommentMark && node.type === state.schema.nodes.inlineCard
|
|
218
|
+
const isCommentEnabled = annotationApiState && annotationApiState.isVisible && !annotationApiState.bookmark && !annotationApiState.mouseData.isSelecting && !activeCommentMark && node.type === state.schema.nodes.inlineCard;
|
|
219
219
|
const onCommentButtonClick = (state, dispatch) => {
|
|
220
220
|
var _pluginInjectionApi$a3, _pluginInjectionApi$a4;
|
|
221
221
|
if (!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.annotation) || !isCommentEnabled) {
|
|
@@ -663,29 +663,39 @@ export const getStartingToolbarItems = (options, api) => {
|
|
|
663
663
|
type: 'separator'
|
|
664
664
|
}];
|
|
665
665
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
666
|
-
var _api$analytics2, _api$analytics3;
|
|
667
|
-
|
|
668
|
-
type: 'custom',
|
|
669
|
-
fallback: [],
|
|
670
|
-
render: editorView => /*#__PURE__*/React.createElement(ToolbarViewedEvent, {
|
|
671
|
-
key: "edit.link.menu.viewed",
|
|
672
|
-
url: link,
|
|
673
|
-
display: "url",
|
|
674
|
-
editorView: editorView
|
|
675
|
-
})
|
|
676
|
-
}, getHyperlinkAppearanceDropdown({
|
|
666
|
+
var _api$analytics2, _api$analytics3, _api$analytics4, _api$analytics5;
|
|
667
|
+
const hyperlinkAppearance = fg('platform_editor_controls_patch_1') ? [getCustomHyperlinkAppearanceDropdown({
|
|
677
668
|
url: link,
|
|
678
669
|
intl,
|
|
679
|
-
editorState: state,
|
|
680
670
|
editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
|
|
681
671
|
allowDatasource: options.allowDatasource,
|
|
682
672
|
editorPluginApi: api,
|
|
683
673
|
cardOptions: options,
|
|
684
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),
|
|
685
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
|
|
686
686
|
}), {
|
|
687
687
|
type: 'separator'
|
|
688
|
-
}
|
|
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];
|
|
689
699
|
}
|
|
690
700
|
return [{
|
|
691
701
|
type: 'custom',
|
|
@@ -700,7 +710,7 @@ export const getStartingToolbarItems = (options, api) => {
|
|
|
700
710
|
type: 'custom',
|
|
701
711
|
fallback: [],
|
|
702
712
|
render: editorView => {
|
|
703
|
-
var _api$
|
|
713
|
+
var _api$analytics6;
|
|
704
714
|
if (!editorView) {
|
|
705
715
|
return null;
|
|
706
716
|
}
|
|
@@ -711,7 +721,7 @@ export const getStartingToolbarItems = (options, api) => {
|
|
|
711
721
|
editorView: editorView,
|
|
712
722
|
editorState: editorView.state,
|
|
713
723
|
cardOptions: options,
|
|
714
|
-
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,
|
|
715
725
|
editorPluginApi: api
|
|
716
726
|
});
|
|
717
727
|
}
|
|
@@ -724,10 +734,10 @@ export const getEndingToolbarItems = (options, api) => (intl, link) => {
|
|
|
724
734
|
* Or explicit user preferences config in order to enable button
|
|
725
735
|
*/
|
|
726
736
|
if ((options.provider || options.userPreferencesLink) && editorExperiment('platform_editor_controls', 'control')) {
|
|
727
|
-
var _api$
|
|
737
|
+
var _api$analytics7;
|
|
728
738
|
return [{
|
|
729
739
|
type: 'separator'
|
|
730
|
-
}, 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)];
|
|
731
741
|
}
|
|
732
742
|
return [];
|
|
733
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
|
@@ -33,7 +33,7 @@ import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
|
|
|
33
33
|
import { buildEditLinkToolbar, editLinkToolbarConfig, getEditLinkCallback } from './EditLinkToolbar';
|
|
34
34
|
import { EditToolbarButton } from './EditToolbarButton';
|
|
35
35
|
import { HyperlinkToolbarAppearance } from './HyperlinkToolbarAppearance';
|
|
36
|
-
import { getHyperlinkAppearanceDropdown } from './HyperlinkToolbarAppearanceDropdown';
|
|
36
|
+
import { getCustomHyperlinkAppearanceDropdown, getHyperlinkAppearanceDropdown } from './HyperlinkToolbarAppearanceDropdown';
|
|
37
37
|
import { LinkToolbarAppearance } from './LinkToolbarAppearance';
|
|
38
38
|
import { getLinkAppearanceDropdown } from './LinkToolbarAppearanceDropdown';
|
|
39
39
|
import { ToolbarViewedEvent } from './ToolbarViewedEvent';
|
|
@@ -215,7 +215,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
|
|
|
215
215
|
var activeCommentMark = node.marks.find(function (mark) {
|
|
216
216
|
return mark.type.name === 'annotation' && (annotationApiState === null || annotationApiState === void 0 ? void 0 : annotationApiState.annotations[mark.attrs.id]) === false;
|
|
217
217
|
});
|
|
218
|
-
var isCommentEnabled = annotationApiState && annotationApiState.isVisible && !annotationApiState.bookmark && !annotationApiState.mouseData.isSelecting && !activeCommentMark && node.type === state.schema.nodes.inlineCard
|
|
218
|
+
var isCommentEnabled = annotationApiState && annotationApiState.isVisible && !annotationApiState.bookmark && !annotationApiState.mouseData.isSelecting && !activeCommentMark && node.type === state.schema.nodes.inlineCard;
|
|
219
219
|
var onCommentButtonClick = function onCommentButtonClick(state, dispatch) {
|
|
220
220
|
var _pluginInjectionApi$a3;
|
|
221
221
|
if (!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.annotation) || !isCommentEnabled) {
|
|
@@ -664,7 +664,29 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
|
|
|
664
664
|
type: 'separator'
|
|
665
665
|
}];
|
|
666
666
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
667
|
-
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
|
+
}];
|
|
668
690
|
return [{
|
|
669
691
|
type: 'custom',
|
|
670
692
|
fallback: [],
|
|
@@ -676,19 +698,7 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
|
|
|
676
698
|
editorView: editorView
|
|
677
699
|
});
|
|
678
700
|
}
|
|
679
|
-
},
|
|
680
|
-
url: link,
|
|
681
|
-
intl: intl,
|
|
682
|
-
editorState: state,
|
|
683
|
-
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
|
|
684
|
-
allowDatasource: options.allowDatasource,
|
|
685
|
-
editorPluginApi: api,
|
|
686
|
-
cardOptions: options,
|
|
687
|
-
settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink),
|
|
688
|
-
isDatasourceView: false
|
|
689
|
-
}), {
|
|
690
|
-
type: 'separator'
|
|
691
|
-
}].concat(editLinkItem);
|
|
701
|
+
}].concat(hyperlinkAppearance, editLinkItem);
|
|
692
702
|
}
|
|
693
703
|
return [{
|
|
694
704
|
type: 'custom',
|
|
@@ -705,7 +715,7 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
|
|
|
705
715
|
type: 'custom',
|
|
706
716
|
fallback: [],
|
|
707
717
|
render: function render(editorView) {
|
|
708
|
-
var _api$
|
|
718
|
+
var _api$analytics6;
|
|
709
719
|
if (!editorView) {
|
|
710
720
|
return null;
|
|
711
721
|
}
|
|
@@ -716,7 +726,7 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
|
|
|
716
726
|
editorView: editorView,
|
|
717
727
|
editorState: editorView.state,
|
|
718
728
|
cardOptions: options,
|
|
719
|
-
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,
|
|
720
730
|
editorPluginApi: api
|
|
721
731
|
});
|
|
722
732
|
}
|
|
@@ -730,10 +740,10 @@ export var getEndingToolbarItems = function getEndingToolbarItems(options, api)
|
|
|
730
740
|
* Or explicit user preferences config in order to enable button
|
|
731
741
|
*/
|
|
732
742
|
if ((options.provider || options.userPreferencesLink) && editorExperiment('platform_editor_controls', 'control')) {
|
|
733
|
-
var _api$
|
|
743
|
+
var _api$analytics7;
|
|
734
744
|
return [{
|
|
735
745
|
type: 'separator'
|
|
736
|
-
}, 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)];
|
|
737
747
|
}
|
|
738
748
|
return [];
|
|
739
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>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-card",
|
|
3
|
-
"version": "5.4.
|
|
3
|
+
"version": "5.4.6",
|
|
4
4
|
"description": "Card plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
37
37
|
"@atlaskit/analytics-next": "^11.0.0",
|
|
38
|
-
"@atlaskit/button": "^
|
|
38
|
+
"@atlaskit/button": "^22.0.0",
|
|
39
39
|
"@atlaskit/custom-steps": "^0.11.0",
|
|
40
40
|
"@atlaskit/editor-common": "^102.13.0",
|
|
41
41
|
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
52
52
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
53
53
|
"@atlaskit/frontend-utilities": "^3.0.0",
|
|
54
|
-
"@atlaskit/icon": "^25.
|
|
54
|
+
"@atlaskit/icon": "^25.2.0",
|
|
55
55
|
"@atlaskit/link-analytics": "^9.1.0",
|
|
56
56
|
"@atlaskit/link-client-extension": "^4.0.0",
|
|
57
57
|
"@atlaskit/link-datasource": "^4.1.0",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"@atlaskit/menu": "^3.1.0",
|
|
61
61
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
62
62
|
"@atlaskit/primitives": "^14.2.0",
|
|
63
|
-
"@atlaskit/smart-card": "^36.
|
|
63
|
+
"@atlaskit/smart-card": "^36.2.0",
|
|
64
64
|
"@atlaskit/theme": "^18.0.0",
|
|
65
65
|
"@atlaskit/tmp-editor-statsig": "^4.4.0",
|
|
66
66
|
"@atlaskit/tokens": "^4.5.0",
|
|
@@ -131,9 +131,6 @@
|
|
|
131
131
|
"platform_editor_ssr_fix_smartlinks": {
|
|
132
132
|
"type": "boolean"
|
|
133
133
|
},
|
|
134
|
-
"platform_inline_node_as_valid_annotation_selection": {
|
|
135
|
-
"type": "boolean"
|
|
136
|
-
},
|
|
137
134
|
"platform_editor_fix_card_plugin_state": {
|
|
138
135
|
"type": "boolean"
|
|
139
136
|
},
|