@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.
Files changed (10) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/ui/HyperlinkToolbarAppearanceDropdown.js +225 -1
  3. package/dist/cjs/ui/toolbar.js +29 -19
  4. package/dist/es2019/ui/HyperlinkToolbarAppearanceDropdown.js +152 -0
  5. package/dist/es2019/ui/toolbar.js +29 -19
  6. package/dist/esm/ui/HyperlinkToolbarAppearanceDropdown.js +224 -0
  7. package/dist/esm/ui/toolbar.js +30 -20
  8. package/dist/types/ui/HyperlinkToolbarAppearanceDropdown.d.ts +6 -1
  9. package/dist/types-ts4.5/ui/HyperlinkToolbarAppearanceDropdown.d.ts +6 -1
  10. 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
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/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 && (0, _platformFeatureFlags.fg)('platform_inline_node_as_valid_annotation_selection');
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
- }, (0, _HyperlinkToolbarAppearanceDropdown.getHyperlinkAppearanceDropdown)({
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$analytics4;
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$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,
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$analytics5;
753
+ var _api$analytics7;
744
754
  return [{
745
755
  type: 'separator'
746
- }, 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)];
747
757
  }
748
758
  return [];
749
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/toolbar.js CHANGED
@@ -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 && fg('platform_inline_node_as_valid_annotation_selection');
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
- return [{
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
- }, ...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];
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$analytics4;
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$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,
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$analytics5;
737
+ var _api$analytics7;
728
738
  return [{
729
739
  type: 'separator'
730
- }, 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)];
731
741
  }
732
742
  return [];
733
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/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 && fg('platform_inline_node_as_valid_annotation_selection');
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
- }, getHyperlinkAppearanceDropdown({
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$analytics4;
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$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,
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$analytics5;
743
+ var _api$analytics7;
734
744
  return [{
735
745
  type: 'separator'
736
- }, 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)];
737
747
  }
738
748
  return [];
739
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.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": "^21.1.0",
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.1.0",
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.1.0",
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
  },