@atlaskit/editor-plugin-card 5.4.5 → 5.4.7

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/ui/HyperlinkToolbarAppearanceDropdown.js +225 -1
  3. package/dist/cjs/ui/OpenButtonOverlay/index.js +2 -1
  4. package/dist/cjs/ui/toolbar.js +29 -18
  5. package/dist/es2019/ui/HyperlinkToolbarAppearanceDropdown.js +152 -0
  6. package/dist/es2019/ui/OpenButtonOverlay/index.js +2 -1
  7. package/dist/es2019/ui/toolbar.js +29 -18
  8. package/dist/esm/ui/HyperlinkToolbarAppearanceDropdown.js +224 -0
  9. package/dist/esm/ui/OpenButtonOverlay/index.js +2 -1
  10. package/dist/esm/ui/toolbar.js +30 -19
  11. package/dist/types/ui/HyperlinkToolbarAppearanceDropdown.d.ts +6 -1
  12. package/dist/types-ts4.5/ui/HyperlinkToolbarAppearanceDropdown.d.ts +6 -1
  13. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 5.4.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [#132269](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132269)
8
+ [`f6984f0b31c02`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f6984f0b31c02) -
9
+ [ux] Fixed alignment of the icon in OpenButtonOverlay on header link.
10
+ - Updated dependencies
11
+
12
+ ## 5.4.6
13
+
14
+ ### Patch Changes
15
+
16
+ - [#133060](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133060)
17
+ [`4e22e38db002e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4e22e38db002e) -
18
+ [ux] Fix for Editor Controls. When link appearance options are not available, we do not render
19
+ these options in the floating toolbar.
20
+
3
21
  ## 5.4.5
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/ui/HyperlinkToolbarAppearanceDropdown.js CHANGED
@@ -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/OpenButtonOverlay/index.js CHANGED
@@ -99,7 +99,8 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
99
99
  href: url,
100
100
  target: "_blank"
101
101
  }, (0, _react2.jsx)(_primitives.Box, {
102
- xcss: iconWrapperStyles
102
+ xcss: iconWrapperStyles,
103
+ "data-inlinecard-button-overlay": "icon-wrapper-line-height"
103
104
  }, (0, _react2.jsx)(_linkExternal.default, {
104
105
  label: ""
105
106
  })), showLabel && (0, _react2.jsx)(_primitives.Text, {
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
- }, (0, _HyperlinkToolbarAppearanceDropdown.getHyperlinkAppearanceDropdown)({
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$analytics4;
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$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
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$analytics5;
753
+ var _api$analytics7;
743
754
  return [{
744
755
  type: 'separator'
745
- }, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, options.userPreferencesLink)];
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
  };
package/dist/es2019/ui/HyperlinkToolbarAppearanceDropdown.js CHANGED
@@ -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
  };
package/dist/es2019/ui/OpenButtonOverlay/index.js CHANGED
@@ -83,7 +83,8 @@ const OpenButtonOverlay = ({
83
83
  href: url,
84
84
  target: "_blank"
85
85
  }, jsx(Box, {
86
- xcss: iconWrapperStyles
86
+ xcss: iconWrapperStyles,
87
+ "data-inlinecard-button-overlay": "icon-wrapper-line-height"
87
88
  }, jsx(LinkExternalIcon, {
88
89
  label: ""
89
90
  })), showLabel && jsx(Text, {
package/dist/es2019/ui/toolbar.js CHANGED
@@ -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
- return [{
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
- }, ...editLinkItem];
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$analytics4;
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$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
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$analytics5;
737
+ var _api$analytics7;
727
738
  return [{
728
739
  type: 'separator'
729
- }, 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)];
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
  };
package/dist/esm/ui/HyperlinkToolbarAppearanceDropdown.js CHANGED
@@ -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/OpenButtonOverlay/index.js CHANGED
@@ -89,7 +89,8 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
89
89
  href: url,
90
90
  target: "_blank"
91
91
  }, jsx(Box, {
92
- xcss: iconWrapperStyles
92
+ xcss: iconWrapperStyles,
93
+ "data-inlinecard-button-overlay": "icon-wrapper-line-height"
93
94
  }, jsx(LinkExternalIcon, {
94
95
  label: ""
95
96
  })), showLabel && jsx(Text, {
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
- }, getHyperlinkAppearanceDropdown({
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$analytics4;
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$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
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$analytics5;
743
+ var _api$analytics7;
733
744
  return [{
734
745
  type: 'separator'
735
- }, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, options.userPreferencesLink)];
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
  };
package/dist/types/ui/HyperlinkToolbarAppearanceDropdown.d.ts CHANGED
@@ -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/dist/types-ts4.5/ui/HyperlinkToolbarAppearanceDropdown.d.ts CHANGED
@@ -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.5",
3
+ "version": "5.4.7",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/analytics-next": "^11.0.0",
38
38
  "@atlaskit/button": "^22.0.0",
39
39
  "@atlaskit/custom-steps": "^0.11.0",
40
- "@atlaskit/editor-common": "^102.13.0",
40
+ "@atlaskit/editor-common": "^102.14.0",
41
41
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
42
42
  "@atlaskit/editor-plugin-base": "^2.3.0",
43
43
  "@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -57,7 +57,7 @@
57
57
  "@atlaskit/link-datasource": "^4.1.0",
58
58
  "@atlaskit/linking-common": "^8.0.0",
59
59
  "@atlaskit/linking-types": "^9.6.0",
60
- "@atlaskit/menu": "^3.1.0",
60
+ "@atlaskit/menu": "^3.2.0",
61
61
  "@atlaskit/platform-feature-flags": "^1.1.0",
62
62
  "@atlaskit/primitives": "^14.2.0",
63
63
  "@atlaskit/smart-card": "^36.2.0",