@atlaskit/editor-plugin-card 5.0.7 → 5.1.1

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 (16) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/cjs/nodeviews/toDOM-fixes/inlineCard.js +1 -0
  3. package/dist/cjs/ui/InlineCardOverlay/index.js +1 -1
  4. package/dist/cjs/ui/LinkToolbarAppearanceDropdown.js +180 -0
  5. package/dist/cjs/ui/toolbar.js +32 -11
  6. package/dist/es2019/nodeviews/toDOM-fixes/inlineCard.js +1 -0
  7. package/dist/es2019/ui/InlineCardOverlay/index.js +1 -1
  8. package/dist/es2019/ui/LinkToolbarAppearanceDropdown.js +160 -0
  9. package/dist/es2019/ui/toolbar.js +32 -11
  10. package/dist/esm/nodeviews/toDOM-fixes/inlineCard.js +1 -0
  11. package/dist/esm/ui/InlineCardOverlay/index.js +1 -1
  12. package/dist/esm/ui/LinkToolbarAppearanceDropdown.js +170 -0
  13. package/dist/esm/ui/toolbar.js +32 -11
  14. package/dist/types/ui/LinkToolbarAppearanceDropdown.d.ts +5 -0
  15. package/dist/types-ts4.5/ui/LinkToolbarAppearanceDropdown.d.ts +5 -0
  16. package/package.json +12 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 5.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 5.1.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#120472](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120472)
14
+ [`73c800ab5f2fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/73c800ab5f2fc) -
15
+ ED-26766 update adf-schema from 47.2.1 to 47.6.0 and adf-schema-json from 1.27.0 to 1.31.0
16
+
17
+ ### Patch Changes
18
+
19
+ - [#121533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121533)
20
+ [`9efef36af09aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9efef36af09aa) -
21
+ Wire up the copy functionality in floating toolbar overflow menu
22
+ - [#121044](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121044)
23
+ [`048ca2b813e3a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/048ca2b813e3a) -
24
+ Add new dropdown menu to change link appearance and visit settings preferences, under
25
+ platform_editor_controls
26
+ - Updated dependencies
27
+
3
28
  ## 5.0.7
4
29
 
5
30
  ### Patch Changes
package/dist/cjs/nodeviews/toDOM-fixes/inlineCard.js CHANGED
@@ -24,6 +24,7 @@ var inlineCardSpecWithFixedToDOM = exports.inlineCardSpecWithFixedToDOM = functi
24
24
  class: 'inlineCardView-content-wrap inlineNodeView'
25
25
  };
26
26
  var cardAttrs = {
27
+ 'aria-busy': 'true',
27
28
  class: 'card'
28
29
  };
29
30
  var attrs = {
package/dist/cjs/ui/InlineCardOverlay/index.js CHANGED
@@ -86,7 +86,7 @@ var iconStyles = (0, _react2.css)({
86
86
  }
87
87
  });
88
88
  var labelStyles = (0, _react2.css)({
89
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
89
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
90
90
  fontWeight: "var(--ds-font-weight-semibold, 600)",
91
91
  width: 'max-content'
92
92
  });
package/dist/cjs/ui/LinkToolbarAppearanceDropdown.js ADDED
@@ -0,0 +1,180 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.getLinkAppearanceDropdown = void 0;
9
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
+ var _react = _interopRequireDefault(require("react"));
11
+ var _analytics = require("@atlaskit/editor-common/analytics");
12
+ var _card = require("@atlaskit/editor-common/card");
13
+ var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
14
+ var _utils = require("@atlaskit/editor-common/utils");
15
+ var _model = require("@atlaskit/editor-prosemirror/model");
16
+ var _linkProvider = require("@atlaskit/link-provider");
17
+ var _menu = require("@atlaskit/menu");
18
+ var _doc = require("../pm-plugins/doc");
19
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
21
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
22
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
23
+ var AppearanceMenu = function AppearanceMenu(_ref) {
24
+ var _cardContext$value, _setSelectedCardAppea, _setSelectedCardAppea2, _changeSelectedCardTo, _setSelectedCardAppea3;
25
+ var url = _ref.url,
26
+ intl = _ref.intl,
27
+ currentAppearance = _ref.currentAppearance,
28
+ editorState = _ref.editorState,
29
+ allowEmbeds = _ref.allowEmbeds,
30
+ _ref$allowBlockCards = _ref.allowBlockCards,
31
+ allowBlockCards = _ref$allowBlockCards === void 0 ? true : _ref$allowBlockCards,
32
+ editorAnalyticsApi = _ref.editorAnalyticsApi,
33
+ _ref$showUpgradeDisco = _ref.showUpgradeDiscoverability,
34
+ showUpgradeDiscoverability = _ref$showUpgradeDisco === void 0 ? true : _ref$showUpgradeDisco,
35
+ isDatasourceView = _ref.isDatasourceView,
36
+ dispatchCommand = _ref.dispatchCommand,
37
+ settingsConfig = _ref.settingsConfig;
38
+ var cardContext = (0, _linkProvider.useSmartCardContext)();
39
+ var preview = allowEmbeds && cardContext && url && ((_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.extractors.getPreview(url, 'web'));
40
+ var defaultCommand = function defaultCommand() {
41
+ return false;
42
+ };
43
+ if (url) {
44
+ var _cardContext$value2, _urlState$error;
45
+ var urlState = (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 || (_cardContext$value2 = _cardContext$value2.store) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.getState()[url];
46
+ if ((urlState === null || urlState === void 0 || (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
47
+ return null;
48
+ }
49
+ }
50
+ var isBlockCardLinkSupportedInParent = allowBlockCards ? (0, _utils.isSupportedInParent)(editorState, _model.Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance) : false;
51
+ var isEmbedCardLinkSupportedInParent = allowEmbeds ? (0, _utils.isSupportedInParent)(editorState, _model.Fragment.from(editorState.schema.nodes.embedCard.createChecked({})), currentAppearance) : false;
52
+ var embedOption = allowEmbeds && preview && {
53
+ appearance: 'embed',
54
+ title: intl.formatMessage(_messages.cardMessages.embed),
55
+ onClick: (_setSelectedCardAppea = (0, _doc.setSelectedCardAppearance)('embed', editorAnalyticsApi)) !== null && _setSelectedCardAppea !== void 0 ? _setSelectedCardAppea : defaultCommand,
56
+ selected: currentAppearance === 'embed',
57
+ hidden: false,
58
+ testId: 'embed-appearance',
59
+ disabled: !isEmbedCardLinkSupportedInParent,
60
+ tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
61
+ };
62
+ var blockCardOption = allowBlockCards && {
63
+ appearance: 'block',
64
+ title: intl.formatMessage(_messages.cardMessages.block),
65
+ onClick: (_setSelectedCardAppea2 = (0, _doc.setSelectedCardAppearance)('block', editorAnalyticsApi)) !== null && _setSelectedCardAppea2 !== void 0 ? _setSelectedCardAppea2 : defaultCommand,
66
+ selected: currentAppearance === 'block' && !isDatasourceView,
67
+ testId: 'block-appearance',
68
+ disabled: !isBlockCardLinkSupportedInParent,
69
+ tooltip: isBlockCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
70
+ };
71
+ var options = [{
72
+ title: intl.formatMessage(_messages.cardMessages.url),
73
+ onClick: (0, _card.commandWithMetadata)((_changeSelectedCardTo = (0, _doc.changeSelectedCardToLink)(url, url, true, undefined, undefined, editorAnalyticsApi)) !== null && _changeSelectedCardTo !== void 0 ? _changeSelectedCardTo : defaultCommand, {
74
+ action: _analytics.ACTION.CHANGED_TYPE
75
+ }),
76
+ selected: !currentAppearance && !isDatasourceView,
77
+ testId: 'url-appearance'
78
+ }, {
79
+ appearance: 'inline',
80
+ title: intl.formatMessage(_messages.cardMessages.inline),
81
+ onClick: (_setSelectedCardAppea3 = (0, _doc.setSelectedCardAppearance)('inline', editorAnalyticsApi)) !== null && _setSelectedCardAppea3 !== void 0 ? _setSelectedCardAppea3 : defaultCommand,
82
+ selected: currentAppearance === 'inline',
83
+ testId: 'inline-appearance'
84
+ }];
85
+ if (blockCardOption) {
86
+ options.push(blockCardOption);
87
+ }
88
+ if (embedOption) {
89
+ options.push(embedOption);
90
+ }
91
+ var finalOptions = options.map(function (option) {
92
+ return (0, _card.getDropdownOption)(intl, dispatchCommand, _objectSpread(_objectSpread({}, option), {}, {
93
+ onClick: (0, _card.commandWithMetadata)(option.onClick, {
94
+ inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
95
+ })
96
+ }));
97
+ });
98
+ var Icon;
99
+ if ('icon' in settingsConfig && settingsConfig.icon !== undefined) {
100
+ Icon = settingsConfig.icon;
101
+ }
102
+
103
+ // TODO: packages/editor/editor-plugin-card/src/ui/LinkToolbarAppearance.tsx supports change boarding via pulse
104
+ // this implementation doesn't
105
+ return /*#__PURE__*/_react.default.createElement(_menu.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu.Section, null, finalOptions.map(function (option) {
106
+ return /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, {
107
+ key: option.title,
108
+ iconBefore: option.icon,
109
+ onClick: function onClick() {
110
+ return option.onClick();
111
+ },
112
+ isSelected: option.selected
113
+ }, option.title);
114
+ })), /*#__PURE__*/_react.default.createElement(_menu.Section, {
115
+ hasSeparator: true
116
+ }, /*#__PURE__*/_react.default.createElement(_menu.LinkItem, {
117
+ iconBefore: Icon && /*#__PURE__*/_react.default.createElement(Icon, {
118
+ label: "Settings"
119
+ }),
120
+ href: 'href' in settingsConfig ? settingsConfig.href : undefined,
121
+ target: 'target' in settingsConfig ? settingsConfig.target : undefined
122
+ }, "Link Preferences")));
123
+ };
124
+ var getLinkAppearanceDropdown = exports.getLinkAppearanceDropdown = function getLinkAppearanceDropdown(_ref2) {
125
+ var url = _ref2.url,
126
+ intl = _ref2.intl,
127
+ currentAppearance = _ref2.currentAppearance,
128
+ editorState = _ref2.editorState,
129
+ allowEmbeds = _ref2.allowEmbeds,
130
+ _ref2$allowBlockCards = _ref2.allowBlockCards,
131
+ allowBlockCards = _ref2$allowBlockCards === void 0 ? true : _ref2$allowBlockCards,
132
+ editorAnalyticsApi = _ref2.editorAnalyticsApi,
133
+ _ref2$showUpgradeDisc = _ref2.showUpgradeDiscoverability,
134
+ showUpgradeDiscoverability = _ref2$showUpgradeDisc === void 0 ? true : _ref2$showUpgradeDisc,
135
+ isDatasourceView = _ref2.isDatasourceView,
136
+ settingsConfig = _ref2.settingsConfig;
137
+ var alignmentItemOptions = {
138
+ render: function render(props) {
139
+ return /*#__PURE__*/_react.default.createElement(AppearanceMenu, {
140
+ url: url,
141
+ intl: intl,
142
+ currentAppearance: currentAppearance,
143
+ editorState: editorState,
144
+ allowEmbeds: allowEmbeds,
145
+ allowBlockCards: allowBlockCards,
146
+ editorAnalyticsApi: editorAnalyticsApi,
147
+ showUpgradeDiscoverability: showUpgradeDiscoverability,
148
+ isDatasourceView: isDatasourceView,
149
+ dispatchCommand: props.dispatchCommand,
150
+ settingsConfig: settingsConfig
151
+ });
152
+ },
153
+ width: 200,
154
+ height: 400
155
+ };
156
+ var currentAppearanceDisplayInformation = _card.appearancePropsMap[currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : 'url'];
157
+ var alignmentToolbarItem = {
158
+ id: 'card-appearance',
159
+ testId: 'card-appearance-dropdown',
160
+ type: 'dropdown',
161
+ options: alignmentItemOptions,
162
+ title: intl.formatMessage(currentAppearanceDisplayInformation.title),
163
+ iconBefore: currentAppearanceDisplayInformation.icon
164
+ };
165
+ return alignmentToolbarItem;
166
+ };
167
+ var getUnavailableMessage = function getUnavailableMessage(state, intl) {
168
+ try {
169
+ var parentNode = state.selection.$from.node(1);
170
+ var parentName = intl.formatMessage(_messages.default[parentNode.type.name]);
171
+ var tooltip = intl.formatMessage(_messages.cardMessages.displayOptionUnavailableInParentNode, {
172
+ node: parentName
173
+ });
174
+ return tooltip;
175
+ } catch (e) {
176
+ return intl.formatMessage(_messages.cardMessages.displayOptionUnavailableInParentNode, {
177
+ node: intl.formatMessage(_messages.default.defaultBlockNode)
178
+ });
179
+ }
180
+ };
package/dist/cjs/ui/toolbar.js CHANGED
@@ -39,6 +39,7 @@ var _EditLinkToolbar = require("./EditLinkToolbar");
39
39
  var _EditToolbarButton = require("./EditToolbarButton");
40
40
  var _HyperlinkToolbarAppearance = require("./HyperlinkToolbarAppearance");
41
41
  var _LinkToolbarAppearance = require("./LinkToolbarAppearance");
42
+ var _LinkToolbarAppearanceDropdown = require("./LinkToolbarAppearanceDropdown");
42
43
  var _ToolbarViewedEvent = require("./ToolbarViewedEvent");
43
44
  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); }
44
45
  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; }
@@ -331,10 +332,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
331
332
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
332
333
  title: intl.formatMessage(_messages.default.remove),
333
334
  onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
334
- }]) : [].concat(editItems, (0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink), {
335
- type: 'separator',
336
- fullHeight: true
337
- }, {
335
+ }]) : [].concat(editItems, (0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
338
336
  id: 'editor.link.openLink',
339
337
  type: 'button',
340
338
  icon: _linkExternal.default,
@@ -365,7 +363,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
365
363
  // For url appearance, please see HyperlinkToolbarAppearanceProps
366
364
  if (currentAppearance) {
367
365
  var showDatasourceAppearance = allowDatasource && url;
368
- toolbarItems.unshift.apply(toolbarItems, (0, _toConsumableArray2.default)(getToolbarViewedItem(url, currentAppearance)).concat([{
366
+ toolbarItems.unshift.apply(toolbarItems, (0, _toConsumableArray2.default)(getToolbarViewedItem(url, currentAppearance)).concat([(0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? {
369
367
  type: 'custom',
370
368
  fallback: [],
371
369
  render: function render(editorView) {
@@ -382,7 +380,17 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
382
380
  showUpgradeDiscoverability: showUpgradeDiscoverability
383
381
  });
384
382
  }
385
- }], (0, _toConsumableArray2.default)(showDatasourceAppearance ? [{
383
+ } : (0, _LinkToolbarAppearanceDropdown.getLinkAppearanceDropdown)({
384
+ url: url,
385
+ intl: intl,
386
+ currentAppearance: currentAppearance,
387
+ editorState: state,
388
+ allowEmbeds: allowEmbeds,
389
+ allowBlockCards: allowBlockCards,
390
+ editorAnalyticsApi: editorAnalyticsApi,
391
+ showUpgradeDiscoverability: showUpgradeDiscoverability,
392
+ settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)
393
+ })], (0, _toConsumableArray2.default)(showDatasourceAppearance ? [{
386
394
  type: 'custom',
387
395
  fallback: [],
388
396
  render: function render(editorView) {
@@ -399,17 +407,18 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
399
407
  type: 'separator'
400
408
  }]));
401
409
  }
402
- if (toolbarItems.length > 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
410
+ if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
403
411
  var overflowMenuConfig = [{
404
412
  type: 'separator',
405
- supportsViewMode: true,
406
413
  fullHeight: true
407
414
  }, {
408
415
  type: 'overflow-dropdown',
409
416
  options: [{
410
417
  title: 'Copy',
411
418
  onClick: function onClick() {
412
- // TODO replace with copy-button plugin
419
+ var _pluginInjectionApi$c2, _pluginInjectionApi$f;
420
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 || _pluginInjectionApi$c2.actions.execute( // @ts-ignore
421
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.commands.copyNode(node.type));
413
422
  return true;
414
423
  },
415
424
  icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
@@ -469,7 +478,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
469
478
  allowEmbeds = cardOptions.allowEmbeds,
470
479
  showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
471
480
  var url = metadata.url;
472
- toolbarItems.push({
481
+ toolbarItems.push((0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? {
473
482
  type: 'custom',
474
483
  fallback: [],
475
484
  render: function render(editorView) {
@@ -487,7 +496,19 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
487
496
  isDatasourceView: true
488
497
  });
489
498
  }
490
- }, {
499
+ } : (0, _LinkToolbarAppearanceDropdown.getLinkAppearanceDropdown)({
500
+ url: url,
501
+ intl: intl,
502
+ currentAppearance: currentAppearance,
503
+ editorState: state,
504
+ allowEmbeds: allowEmbeds,
505
+ allowBlockCards: allowBlockCards,
506
+ editorAnalyticsApi: editorAnalyticsApi,
507
+ showUpgradeDiscoverability: showUpgradeDiscoverability,
508
+ // TODO: find a way to inject editorView here
509
+ // editorView: view,
510
+ settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)
511
+ }), {
491
512
  type: 'custom',
492
513
  fallback: [],
493
514
  render: function render(editorView) {
package/dist/es2019/nodeviews/toDOM-fixes/inlineCard.js CHANGED
@@ -15,6 +15,7 @@ export const inlineCardSpecWithFixedToDOM = () => {
15
15
  class: 'inlineCardView-content-wrap inlineNodeView'
16
16
  };
17
17
  const cardAttrs = {
18
+ 'aria-busy': 'true',
18
19
  class: 'card'
19
20
  };
20
21
  const attrs = {
package/dist/es2019/ui/InlineCardOverlay/index.js CHANGED
@@ -78,7 +78,7 @@ const iconStyles = css({
78
78
  }
79
79
  });
80
80
  const labelStyles = css({
81
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
81
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
82
82
  fontWeight: "var(--ds-font-weight-semibold, 600)",
83
83
  width: 'max-content'
84
84
  });
package/dist/es2019/ui/LinkToolbarAppearanceDropdown.js ADDED
@@ -0,0 +1,160 @@
1
+ import React from 'react';
2
+ import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
+ import { appearancePropsMap, commandWithMetadata, getDropdownOption } from '@atlaskit/editor-common/card';
4
+ import nodeNames, { cardMessages as messages } from '@atlaskit/editor-common/messages';
5
+ import { isSupportedInParent } from '@atlaskit/editor-common/utils';
6
+ import { Fragment } from '@atlaskit/editor-prosemirror/model';
7
+ import { useSmartCardContext } from '@atlaskit/link-provider';
8
+ import { ButtonItem, LinkItem, MenuGroup, Section } from '@atlaskit/menu';
9
+ import { changeSelectedCardToLink, setSelectedCardAppearance } from '../pm-plugins/doc';
10
+ const AppearanceMenu = ({
11
+ url,
12
+ intl,
13
+ currentAppearance,
14
+ editorState,
15
+ allowEmbeds,
16
+ allowBlockCards = true,
17
+ editorAnalyticsApi,
18
+ showUpgradeDiscoverability = true,
19
+ isDatasourceView,
20
+ dispatchCommand,
21
+ settingsConfig
22
+ }) => {
23
+ var _cardContext$value, _setSelectedCardAppea, _setSelectedCardAppea2, _changeSelectedCardTo, _setSelectedCardAppea3;
24
+ const cardContext = useSmartCardContext();
25
+ const preview = allowEmbeds && cardContext && url && ((_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.extractors.getPreview(url, 'web'));
26
+ const defaultCommand = () => false;
27
+ if (url) {
28
+ var _cardContext$value2, _cardContext$value2$s, _urlState$error;
29
+ const urlState = (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : (_cardContext$value2$s = _cardContext$value2.store) === null || _cardContext$value2$s === void 0 ? void 0 : _cardContext$value2$s.getState()[url];
30
+ if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
31
+ return null;
32
+ }
33
+ }
34
+ const isBlockCardLinkSupportedInParent = allowBlockCards ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance) : false;
35
+ const isEmbedCardLinkSupportedInParent = allowEmbeds ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.embedCard.createChecked({})), currentAppearance) : false;
36
+ const embedOption = allowEmbeds && preview && {
37
+ appearance: 'embed',
38
+ title: intl.formatMessage(messages.embed),
39
+ onClick: (_setSelectedCardAppea = setSelectedCardAppearance('embed', editorAnalyticsApi)) !== null && _setSelectedCardAppea !== void 0 ? _setSelectedCardAppea : defaultCommand,
40
+ selected: currentAppearance === 'embed',
41
+ hidden: false,
42
+ testId: 'embed-appearance',
43
+ disabled: !isEmbedCardLinkSupportedInParent,
44
+ tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
45
+ };
46
+ const blockCardOption = allowBlockCards && {
47
+ appearance: 'block',
48
+ title: intl.formatMessage(messages.block),
49
+ onClick: (_setSelectedCardAppea2 = setSelectedCardAppearance('block', editorAnalyticsApi)) !== null && _setSelectedCardAppea2 !== void 0 ? _setSelectedCardAppea2 : defaultCommand,
50
+ selected: currentAppearance === 'block' && !isDatasourceView,
51
+ testId: 'block-appearance',
52
+ disabled: !isBlockCardLinkSupportedInParent,
53
+ tooltip: isBlockCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
54
+ };
55
+ const options = [{
56
+ title: intl.formatMessage(messages.url),
57
+ onClick: commandWithMetadata((_changeSelectedCardTo = changeSelectedCardToLink(url, url, true, undefined, undefined, editorAnalyticsApi)) !== null && _changeSelectedCardTo !== void 0 ? _changeSelectedCardTo : defaultCommand, {
58
+ action: ACTION.CHANGED_TYPE
59
+ }),
60
+ selected: !currentAppearance && !isDatasourceView,
61
+ testId: 'url-appearance'
62
+ }, {
63
+ appearance: 'inline',
64
+ title: intl.formatMessage(messages.inline),
65
+ onClick: (_setSelectedCardAppea3 = setSelectedCardAppearance('inline', editorAnalyticsApi)) !== null && _setSelectedCardAppea3 !== void 0 ? _setSelectedCardAppea3 : defaultCommand,
66
+ selected: currentAppearance === 'inline',
67
+ testId: 'inline-appearance'
68
+ }];
69
+ if (blockCardOption) {
70
+ options.push(blockCardOption);
71
+ }
72
+ if (embedOption) {
73
+ options.push(embedOption);
74
+ }
75
+ const finalOptions = options.map(option => getDropdownOption(intl, dispatchCommand, {
76
+ ...option,
77
+ onClick: commandWithMetadata(option.onClick, {
78
+ inputMethod: INPUT_METHOD.FLOATING_TB
79
+ })
80
+ }));
81
+ let Icon;
82
+ if ('icon' in settingsConfig && settingsConfig.icon !== undefined) {
83
+ Icon = settingsConfig.icon;
84
+ }
85
+
86
+ // TODO: packages/editor/editor-plugin-card/src/ui/LinkToolbarAppearance.tsx supports change boarding via pulse
87
+ // this implementation doesn't
88
+ return /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(Section, null, finalOptions.map(option => {
89
+ return /*#__PURE__*/React.createElement(ButtonItem, {
90
+ key: option.title,
91
+ iconBefore: option.icon,
92
+ onClick: () => option.onClick(),
93
+ isSelected: option.selected
94
+ }, option.title);
95
+ })), /*#__PURE__*/React.createElement(Section, {
96
+ hasSeparator: true
97
+ }, /*#__PURE__*/React.createElement(LinkItem, {
98
+ iconBefore: Icon && /*#__PURE__*/React.createElement(Icon, {
99
+ label: "Settings"
100
+ }),
101
+ href: 'href' in settingsConfig ? settingsConfig.href : undefined,
102
+ target: 'target' in settingsConfig ? settingsConfig.target : undefined
103
+ }, "Link Preferences")));
104
+ };
105
+ export const getLinkAppearanceDropdown = ({
106
+ url,
107
+ intl,
108
+ currentAppearance,
109
+ editorState,
110
+ allowEmbeds,
111
+ allowBlockCards = true,
112
+ editorAnalyticsApi,
113
+ showUpgradeDiscoverability = true,
114
+ isDatasourceView,
115
+ settingsConfig
116
+ }) => {
117
+ const alignmentItemOptions = {
118
+ render: props => {
119
+ return /*#__PURE__*/React.createElement(AppearanceMenu, {
120
+ url: url,
121
+ intl: intl,
122
+ currentAppearance: currentAppearance,
123
+ editorState: editorState,
124
+ allowEmbeds: allowEmbeds,
125
+ allowBlockCards: allowBlockCards,
126
+ editorAnalyticsApi: editorAnalyticsApi,
127
+ showUpgradeDiscoverability: showUpgradeDiscoverability,
128
+ isDatasourceView: isDatasourceView,
129
+ dispatchCommand: props.dispatchCommand,
130
+ settingsConfig: settingsConfig
131
+ });
132
+ },
133
+ width: 200,
134
+ height: 400
135
+ };
136
+ const currentAppearanceDisplayInformation = appearancePropsMap[currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : 'url'];
137
+ const alignmentToolbarItem = {
138
+ id: 'card-appearance',
139
+ testId: 'card-appearance-dropdown',
140
+ type: 'dropdown',
141
+ options: alignmentItemOptions,
142
+ title: intl.formatMessage(currentAppearanceDisplayInformation.title),
143
+ iconBefore: currentAppearanceDisplayInformation.icon
144
+ };
145
+ return alignmentToolbarItem;
146
+ };
147
+ const getUnavailableMessage = (state, intl) => {
148
+ try {
149
+ const parentNode = state.selection.$from.node(1);
150
+ const parentName = intl.formatMessage(nodeNames[parentNode.type.name]);
151
+ const tooltip = intl.formatMessage(messages.displayOptionUnavailableInParentNode, {
152
+ node: parentName
153
+ });
154
+ return tooltip;
155
+ } catch (e) {
156
+ return intl.formatMessage(messages.displayOptionUnavailableInParentNode, {
157
+ node: intl.formatMessage(nodeNames.defaultBlockNode)
158
+ });
159
+ }
160
+ };
package/dist/es2019/ui/toolbar.js CHANGED
@@ -29,6 +29,7 @@ import { buildEditLinkToolbar, editLinkToolbarConfig, getEditLinkCallback } from
29
29
  import { EditToolbarButton } from './EditToolbarButton';
30
30
  import { HyperlinkToolbarAppearance } from './HyperlinkToolbarAppearance';
31
31
  import { LinkToolbarAppearance } from './LinkToolbarAppearance';
32
+ import { getLinkAppearanceDropdown } from './LinkToolbarAppearanceDropdown';
32
33
  import { ToolbarViewedEvent } from './ToolbarViewedEvent';
33
34
  export const removeCard = editorAnalyticsApi => commandWithMetadata((state, dispatch) => {
34
35
  if (!(state.selection instanceof NodeSelection)) {
@@ -323,10 +324,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
323
324
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
324
325
  title: intl.formatMessage(commonMessages.remove),
325
326
  onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
326
- }] : [...editItems, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink), {
327
- type: 'separator',
328
- fullHeight: true
329
- }, {
327
+ }] : [...editItems, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), {
330
328
  id: 'editor.link.openLink',
331
329
  type: 'button',
332
330
  icon: LinkExternalIcon,
@@ -359,7 +357,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
359
357
  // For url appearance, please see HyperlinkToolbarAppearanceProps
360
358
  if (currentAppearance) {
361
359
  const showDatasourceAppearance = allowDatasource && url;
362
- toolbarItems.unshift(...getToolbarViewedItem(url, currentAppearance), {
360
+ toolbarItems.unshift(...getToolbarViewedItem(url, currentAppearance), editorExperiment('platform_editor_controls', 'control') ? {
363
361
  type: 'custom',
364
362
  fallback: [],
365
363
  render: editorView => /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
@@ -374,7 +372,17 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
374
372
  editorAnalyticsApi: editorAnalyticsApi,
375
373
  showUpgradeDiscoverability: showUpgradeDiscoverability
376
374
  })
377
- }, ...(showDatasourceAppearance ? [{
375
+ } : getLinkAppearanceDropdown({
376
+ url,
377
+ intl,
378
+ currentAppearance,
379
+ editorState: state,
380
+ allowEmbeds,
381
+ allowBlockCards: allowBlockCards,
382
+ editorAnalyticsApi,
383
+ showUpgradeDiscoverability: showUpgradeDiscoverability,
384
+ settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)
385
+ }), ...(showDatasourceAppearance ? [{
378
386
  type: 'custom',
379
387
  fallback: [],
380
388
  render: editorView => /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
@@ -389,17 +397,18 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
389
397
  type: 'separator'
390
398
  });
391
399
  }
392
- if (toolbarItems.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
400
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
393
401
  const overflowMenuConfig = [{
394
402
  type: 'separator',
395
- supportsViewMode: true,
396
403
  fullHeight: true
397
404
  }, {
398
405
  type: 'overflow-dropdown',
399
406
  options: [{
400
407
  title: 'Copy',
401
408
  onClick: () => {
402
- // TODO replace with copy-button plugin
409
+ var _pluginInjectionApi$c4, _pluginInjectionApi$f;
410
+ pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute( // @ts-ignore
411
+ pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.commands.copyNode(node.type));
403
412
  return true;
404
413
  },
405
414
  icon: /*#__PURE__*/React.createElement(CopyIcon, {
@@ -462,7 +471,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
462
471
  const {
463
472
  url
464
473
  } = metadata;
465
- toolbarItems.push({
474
+ toolbarItems.push(editorExperiment('platform_editor_controls', 'control') ? {
466
475
  type: 'custom',
467
476
  fallback: [],
468
477
  render: editorView => {
@@ -480,7 +489,19 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
480
489
  isDatasourceView: true
481
490
  });
482
491
  }
483
- }, {
492
+ } : getLinkAppearanceDropdown({
493
+ url,
494
+ intl,
495
+ currentAppearance,
496
+ editorState: state,
497
+ allowEmbeds,
498
+ allowBlockCards: allowBlockCards,
499
+ editorAnalyticsApi,
500
+ showUpgradeDiscoverability: showUpgradeDiscoverability,
501
+ // TODO: find a way to inject editorView here
502
+ // editorView: view,
503
+ settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)
504
+ }), {
484
505
  type: 'custom',
485
506
  fallback: [],
486
507
  render: editorView => /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
package/dist/esm/nodeviews/toDOM-fixes/inlineCard.js CHANGED
@@ -17,6 +17,7 @@ export var inlineCardSpecWithFixedToDOM = function inlineCardSpecWithFixedToDOM(
17
17
  class: 'inlineCardView-content-wrap inlineNodeView'
18
18
  };
19
19
  var cardAttrs = {
20
+ 'aria-busy': 'true',
20
21
  class: 'card'
21
22
  };
22
23
  var attrs = {
package/dist/esm/ui/InlineCardOverlay/index.js CHANGED
@@ -77,7 +77,7 @@ var iconStyles = css({
77
77
  }
78
78
  });
79
79
  var labelStyles = css({
80
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
80
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
81
81
  fontWeight: "var(--ds-font-weight-semibold, 600)",
82
82
  width: 'max-content'
83
83
  });
package/dist/esm/ui/LinkToolbarAppearanceDropdown.js ADDED
@@ -0,0 +1,170 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
+ import React from 'react';
5
+ import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
6
+ import { appearancePropsMap, commandWithMetadata, getDropdownOption } from '@atlaskit/editor-common/card';
7
+ import nodeNames, { cardMessages as messages } from '@atlaskit/editor-common/messages';
8
+ import { isSupportedInParent } from '@atlaskit/editor-common/utils';
9
+ import { Fragment } from '@atlaskit/editor-prosemirror/model';
10
+ import { useSmartCardContext } from '@atlaskit/link-provider';
11
+ import { ButtonItem, LinkItem, MenuGroup, Section } from '@atlaskit/menu';
12
+ import { changeSelectedCardToLink, setSelectedCardAppearance } from '../pm-plugins/doc';
13
+ var AppearanceMenu = function AppearanceMenu(_ref) {
14
+ var _cardContext$value, _setSelectedCardAppea, _setSelectedCardAppea2, _changeSelectedCardTo, _setSelectedCardAppea3;
15
+ var url = _ref.url,
16
+ intl = _ref.intl,
17
+ currentAppearance = _ref.currentAppearance,
18
+ editorState = _ref.editorState,
19
+ allowEmbeds = _ref.allowEmbeds,
20
+ _ref$allowBlockCards = _ref.allowBlockCards,
21
+ allowBlockCards = _ref$allowBlockCards === void 0 ? true : _ref$allowBlockCards,
22
+ editorAnalyticsApi = _ref.editorAnalyticsApi,
23
+ _ref$showUpgradeDisco = _ref.showUpgradeDiscoverability,
24
+ showUpgradeDiscoverability = _ref$showUpgradeDisco === void 0 ? true : _ref$showUpgradeDisco,
25
+ isDatasourceView = _ref.isDatasourceView,
26
+ dispatchCommand = _ref.dispatchCommand,
27
+ settingsConfig = _ref.settingsConfig;
28
+ var cardContext = useSmartCardContext();
29
+ var preview = allowEmbeds && cardContext && url && ((_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.extractors.getPreview(url, 'web'));
30
+ var defaultCommand = function defaultCommand() {
31
+ return false;
32
+ };
33
+ if (url) {
34
+ var _cardContext$value2, _urlState$error;
35
+ var urlState = (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 || (_cardContext$value2 = _cardContext$value2.store) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.getState()[url];
36
+ if ((urlState === null || urlState === void 0 || (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
37
+ return null;
38
+ }
39
+ }
40
+ var isBlockCardLinkSupportedInParent = allowBlockCards ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance) : false;
41
+ var isEmbedCardLinkSupportedInParent = allowEmbeds ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.embedCard.createChecked({})), currentAppearance) : false;
42
+ var embedOption = allowEmbeds && preview && {
43
+ appearance: 'embed',
44
+ title: intl.formatMessage(messages.embed),
45
+ onClick: (_setSelectedCardAppea = setSelectedCardAppearance('embed', editorAnalyticsApi)) !== null && _setSelectedCardAppea !== void 0 ? _setSelectedCardAppea : defaultCommand,
46
+ selected: currentAppearance === 'embed',
47
+ hidden: false,
48
+ testId: 'embed-appearance',
49
+ disabled: !isEmbedCardLinkSupportedInParent,
50
+ tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
51
+ };
52
+ var blockCardOption = allowBlockCards && {
53
+ appearance: 'block',
54
+ title: intl.formatMessage(messages.block),
55
+ onClick: (_setSelectedCardAppea2 = setSelectedCardAppearance('block', editorAnalyticsApi)) !== null && _setSelectedCardAppea2 !== void 0 ? _setSelectedCardAppea2 : defaultCommand,
56
+ selected: currentAppearance === 'block' && !isDatasourceView,
57
+ testId: 'block-appearance',
58
+ disabled: !isBlockCardLinkSupportedInParent,
59
+ tooltip: isBlockCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
60
+ };
61
+ var options = [{
62
+ title: intl.formatMessage(messages.url),
63
+ onClick: commandWithMetadata((_changeSelectedCardTo = changeSelectedCardToLink(url, url, true, undefined, undefined, editorAnalyticsApi)) !== null && _changeSelectedCardTo !== void 0 ? _changeSelectedCardTo : defaultCommand, {
64
+ action: ACTION.CHANGED_TYPE
65
+ }),
66
+ selected: !currentAppearance && !isDatasourceView,
67
+ testId: 'url-appearance'
68
+ }, {
69
+ appearance: 'inline',
70
+ title: intl.formatMessage(messages.inline),
71
+ onClick: (_setSelectedCardAppea3 = setSelectedCardAppearance('inline', editorAnalyticsApi)) !== null && _setSelectedCardAppea3 !== void 0 ? _setSelectedCardAppea3 : defaultCommand,
72
+ selected: currentAppearance === 'inline',
73
+ testId: 'inline-appearance'
74
+ }];
75
+ if (blockCardOption) {
76
+ options.push(blockCardOption);
77
+ }
78
+ if (embedOption) {
79
+ options.push(embedOption);
80
+ }
81
+ var finalOptions = options.map(function (option) {
82
+ return getDropdownOption(intl, dispatchCommand, _objectSpread(_objectSpread({}, option), {}, {
83
+ onClick: commandWithMetadata(option.onClick, {
84
+ inputMethod: INPUT_METHOD.FLOATING_TB
85
+ })
86
+ }));
87
+ });
88
+ var Icon;
89
+ if ('icon' in settingsConfig && settingsConfig.icon !== undefined) {
90
+ Icon = settingsConfig.icon;
91
+ }
92
+
93
+ // TODO: packages/editor/editor-plugin-card/src/ui/LinkToolbarAppearance.tsx supports change boarding via pulse
94
+ // this implementation doesn't
95
+ return /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(Section, null, finalOptions.map(function (option) {
96
+ return /*#__PURE__*/React.createElement(ButtonItem, {
97
+ key: option.title,
98
+ iconBefore: option.icon,
99
+ onClick: function onClick() {
100
+ return option.onClick();
101
+ },
102
+ isSelected: option.selected
103
+ }, option.title);
104
+ })), /*#__PURE__*/React.createElement(Section, {
105
+ hasSeparator: true
106
+ }, /*#__PURE__*/React.createElement(LinkItem, {
107
+ iconBefore: Icon && /*#__PURE__*/React.createElement(Icon, {
108
+ label: "Settings"
109
+ }),
110
+ href: 'href' in settingsConfig ? settingsConfig.href : undefined,
111
+ target: 'target' in settingsConfig ? settingsConfig.target : undefined
112
+ }, "Link Preferences")));
113
+ };
114
+ export var getLinkAppearanceDropdown = function getLinkAppearanceDropdown(_ref2) {
115
+ var url = _ref2.url,
116
+ intl = _ref2.intl,
117
+ currentAppearance = _ref2.currentAppearance,
118
+ editorState = _ref2.editorState,
119
+ allowEmbeds = _ref2.allowEmbeds,
120
+ _ref2$allowBlockCards = _ref2.allowBlockCards,
121
+ allowBlockCards = _ref2$allowBlockCards === void 0 ? true : _ref2$allowBlockCards,
122
+ editorAnalyticsApi = _ref2.editorAnalyticsApi,
123
+ _ref2$showUpgradeDisc = _ref2.showUpgradeDiscoverability,
124
+ showUpgradeDiscoverability = _ref2$showUpgradeDisc === void 0 ? true : _ref2$showUpgradeDisc,
125
+ isDatasourceView = _ref2.isDatasourceView,
126
+ settingsConfig = _ref2.settingsConfig;
127
+ var alignmentItemOptions = {
128
+ render: function render(props) {
129
+ return /*#__PURE__*/React.createElement(AppearanceMenu, {
130
+ url: url,
131
+ intl: intl,
132
+ currentAppearance: currentAppearance,
133
+ editorState: editorState,
134
+ allowEmbeds: allowEmbeds,
135
+ allowBlockCards: allowBlockCards,
136
+ editorAnalyticsApi: editorAnalyticsApi,
137
+ showUpgradeDiscoverability: showUpgradeDiscoverability,
138
+ isDatasourceView: isDatasourceView,
139
+ dispatchCommand: props.dispatchCommand,
140
+ settingsConfig: settingsConfig
141
+ });
142
+ },
143
+ width: 200,
144
+ height: 400
145
+ };
146
+ var currentAppearanceDisplayInformation = appearancePropsMap[currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : 'url'];
147
+ var alignmentToolbarItem = {
148
+ id: 'card-appearance',
149
+ testId: 'card-appearance-dropdown',
150
+ type: 'dropdown',
151
+ options: alignmentItemOptions,
152
+ title: intl.formatMessage(currentAppearanceDisplayInformation.title),
153
+ iconBefore: currentAppearanceDisplayInformation.icon
154
+ };
155
+ return alignmentToolbarItem;
156
+ };
157
+ var getUnavailableMessage = function getUnavailableMessage(state, intl) {
158
+ try {
159
+ var parentNode = state.selection.$from.node(1);
160
+ var parentName = intl.formatMessage(nodeNames[parentNode.type.name]);
161
+ var tooltip = intl.formatMessage(messages.displayOptionUnavailableInParentNode, {
162
+ node: parentName
163
+ });
164
+ return tooltip;
165
+ } catch (e) {
166
+ return intl.formatMessage(messages.displayOptionUnavailableInParentNode, {
167
+ node: intl.formatMessage(nodeNames.defaultBlockNode)
168
+ });
169
+ }
170
+ };
package/dist/esm/ui/toolbar.js CHANGED
@@ -33,6 +33,7 @@ import { buildEditLinkToolbar, editLinkToolbarConfig, getEditLinkCallback } from
33
33
  import { EditToolbarButton } from './EditToolbarButton';
34
34
  import { HyperlinkToolbarAppearance } from './HyperlinkToolbarAppearance';
35
35
  import { LinkToolbarAppearance } from './LinkToolbarAppearance';
36
+ import { getLinkAppearanceDropdown } from './LinkToolbarAppearanceDropdown';
36
37
  import { ToolbarViewedEvent } from './ToolbarViewedEvent';
37
38
  export var removeCard = function removeCard(editorAnalyticsApi) {
38
39
  return commandWithMetadata(function (state, dispatch) {
@@ -321,10 +322,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
321
322
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
322
323
  title: intl.formatMessage(commonMessages.remove),
323
324
  onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
324
- }]) : [].concat(editItems, _toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink), {
325
- type: 'separator',
326
- fullHeight: true
327
- }, {
325
+ }]) : [].concat(editItems, _toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
328
326
  id: 'editor.link.openLink',
329
327
  type: 'button',
330
328
  icon: LinkExternalIcon,
@@ -355,7 +353,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
355
353
  // For url appearance, please see HyperlinkToolbarAppearanceProps
356
354
  if (currentAppearance) {
357
355
  var showDatasourceAppearance = allowDatasource && url;
358
- toolbarItems.unshift.apply(toolbarItems, _toConsumableArray(getToolbarViewedItem(url, currentAppearance)).concat([{
356
+ toolbarItems.unshift.apply(toolbarItems, _toConsumableArray(getToolbarViewedItem(url, currentAppearance)).concat([editorExperiment('platform_editor_controls', 'control') ? {
359
357
  type: 'custom',
360
358
  fallback: [],
361
359
  render: function render(editorView) {
@@ -372,7 +370,17 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
372
370
  showUpgradeDiscoverability: showUpgradeDiscoverability
373
371
  });
374
372
  }
375
- }], _toConsumableArray(showDatasourceAppearance ? [{
373
+ } : getLinkAppearanceDropdown({
374
+ url: url,
375
+ intl: intl,
376
+ currentAppearance: currentAppearance,
377
+ editorState: state,
378
+ allowEmbeds: allowEmbeds,
379
+ allowBlockCards: allowBlockCards,
380
+ editorAnalyticsApi: editorAnalyticsApi,
381
+ showUpgradeDiscoverability: showUpgradeDiscoverability,
382
+ settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)
383
+ })], _toConsumableArray(showDatasourceAppearance ? [{
376
384
  type: 'custom',
377
385
  fallback: [],
378
386
  render: function render(editorView) {
@@ -389,17 +397,18 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
389
397
  type: 'separator'
390
398
  }]));
391
399
  }
392
- if (toolbarItems.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
400
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
393
401
  var overflowMenuConfig = [{
394
402
  type: 'separator',
395
- supportsViewMode: true,
396
403
  fullHeight: true
397
404
  }, {
398
405
  type: 'overflow-dropdown',
399
406
  options: [{
400
407
  title: 'Copy',
401
408
  onClick: function onClick() {
402
- // TODO replace with copy-button plugin
409
+ var _pluginInjectionApi$c2, _pluginInjectionApi$f;
410
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 || _pluginInjectionApi$c2.actions.execute( // @ts-ignore
411
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.commands.copyNode(node.type));
403
412
  return true;
404
413
  },
405
414
  icon: /*#__PURE__*/React.createElement(CopyIcon, {
@@ -459,7 +468,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
459
468
  allowEmbeds = cardOptions.allowEmbeds,
460
469
  showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
461
470
  var url = metadata.url;
462
- toolbarItems.push({
471
+ toolbarItems.push(editorExperiment('platform_editor_controls', 'control') ? {
463
472
  type: 'custom',
464
473
  fallback: [],
465
474
  render: function render(editorView) {
@@ -477,7 +486,19 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
477
486
  isDatasourceView: true
478
487
  });
479
488
  }
480
- }, {
489
+ } : getLinkAppearanceDropdown({
490
+ url: url,
491
+ intl: intl,
492
+ currentAppearance: currentAppearance,
493
+ editorState: state,
494
+ allowEmbeds: allowEmbeds,
495
+ allowBlockCards: allowBlockCards,
496
+ editorAnalyticsApi: editorAnalyticsApi,
497
+ showUpgradeDiscoverability: showUpgradeDiscoverability,
498
+ // TODO: find a way to inject editorView here
499
+ // editorView: view,
500
+ settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)
501
+ }), {
481
502
  type: 'custom',
482
503
  fallback: [],
483
504
  render: function render(editorView) {
package/dist/types/ui/LinkToolbarAppearanceDropdown.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import type { Command, FloatingToolbarDropdown, FloatingToolbarItem } from '@atlaskit/editor-common/types';
2
+ import type { LinkToolbarAppearanceProps } from './LinkToolbarAppearance';
3
+ export declare const getLinkAppearanceDropdown: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, settingsConfig, }: LinkToolbarAppearanceProps & {
4
+ settingsConfig: FloatingToolbarItem<Command>;
5
+ }) => FloatingToolbarDropdown<Command>;
package/dist/types-ts4.5/ui/LinkToolbarAppearanceDropdown.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import type { Command, FloatingToolbarDropdown, FloatingToolbarItem } from '@atlaskit/editor-common/types';
2
+ import type { LinkToolbarAppearanceProps } from './LinkToolbarAppearance';
3
+ export declare const getLinkAppearanceDropdown: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, settingsConfig, }: LinkToolbarAppearanceProps & {
4
+ settingsConfig: FloatingToolbarItem<Command>;
5
+ }) => FloatingToolbarDropdown<Command>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "5.0.7",
3
+ "version": "5.1.1",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -33,19 +33,19 @@
33
33
  ".": "./src/index.ts"
34
34
  },
35
35
  "dependencies": {
36
- "@atlaskit/adf-schema": "^47.2.1",
36
+ "@atlaskit/adf-schema": "^47.6.0",
37
37
  "@atlaskit/analytics-next": "^11.0.0",
38
38
  "@atlaskit/button": "^21.1.0",
39
- "@atlaskit/custom-steps": "^0.10.0",
40
- "@atlaskit/editor-common": "^100.4.0",
41
- "@atlaskit/editor-plugin-analytics": "^2.0.0",
42
- "@atlaskit/editor-plugin-base": "^2.2.0",
39
+ "@atlaskit/custom-steps": "^0.11.0",
40
+ "@atlaskit/editor-common": "^101.0.0",
41
+ "@atlaskit/editor-plugin-analytics": "^2.1.0",
42
+ "@atlaskit/editor-plugin-base": "^2.3.0",
43
43
  "@atlaskit/editor-plugin-connectivity": "^2.0.0",
44
44
  "@atlaskit/editor-plugin-decorations": "^2.0.0",
45
45
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
46
46
  "@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
47
47
  "@atlaskit/editor-plugin-feature-flags": "^1.3.0",
48
- "@atlaskit/editor-plugin-floating-toolbar": "^3.0.0",
48
+ "@atlaskit/editor-plugin-floating-toolbar": "^3.1.0",
49
49
  "@atlaskit/editor-plugin-grid": "^2.0.0",
50
50
  "@atlaskit/editor-plugin-width": "^3.0.0",
51
51
  "@atlaskit/editor-prosemirror": "7.0.0",
@@ -54,7 +54,7 @@
54
54
  "@atlaskit/icon": "^24.1.0",
55
55
  "@atlaskit/link-analytics": "^9.0.0",
56
56
  "@atlaskit/link-client-extension": "^4.0.0",
57
- "@atlaskit/link-datasource": "^3.21.0",
57
+ "@atlaskit/link-datasource": "^3.22.0",
58
58
  "@atlaskit/linking-common": "^8.0.0",
59
59
  "@atlaskit/linking-types": "^9.6.0",
60
60
  "@atlaskit/menu": "3.1.0",
@@ -62,7 +62,7 @@
62
62
  "@atlaskit/primitives": "^14.1.0",
63
63
  "@atlaskit/smart-card": "^35.1.0",
64
64
  "@atlaskit/theme": "^17.0.0",
65
- "@atlaskit/tmp-editor-statsig": "^3.3.0",
65
+ "@atlaskit/tmp-editor-statsig": "^3.4.0",
66
66
  "@atlaskit/tokens": "^4.3.0",
67
67
  "@babel/runtime": "^7.0.0",
68
68
  "@emotion/react": "^11.7.1",
@@ -142,6 +142,9 @@
142
142
  },
143
143
  "platform-editor-plugin-card-icon-migration": {
144
144
  "type": "boolean"
145
+ },
146
+ "platform_editor_lego__inline_node_virtualization": {
147
+ "type": "boolean"
145
148
  }
146
149
  },
147
150
  "stricter": {