@atlaskit/editor-plugin-card 5.0.6 → 5.1.0

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 +27 -0
  2. package/dist/cjs/ui/LinkToolbarAppearanceDropdown.js +180 -0
  3. package/dist/cjs/ui/toolbar.js +35 -11
  4. package/dist/es2019/ui/LinkToolbarAppearanceDropdown.js +160 -0
  5. package/dist/es2019/ui/toolbar.js +35 -11
  6. package/dist/esm/ui/LinkToolbarAppearanceDropdown.js +170 -0
  7. package/dist/esm/ui/toolbar.js +35 -11
  8. package/dist/types/ui/LinkToolbarAppearanceDropdown.d.ts +5 -0
  9. package/dist/types-ts4.5/ui/LinkToolbarAppearanceDropdown.d.ts +5 -0
  10. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 5.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#120472](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120472)
8
+ [`73c800ab5f2fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/73c800ab5f2fc) -
9
+ 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
10
+
11
+ ### Patch Changes
12
+
13
+ - [#121533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121533)
14
+ [`9efef36af09aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9efef36af09aa) -
15
+ Wire up the copy functionality in floating toolbar overflow menu
16
+ - [#121044](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121044)
17
+ [`048ca2b813e3a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/048ca2b813e3a) -
18
+ Add new dropdown menu to change link appearance and visit settings preferences, under
19
+ platform_editor_controls
20
+ - Updated dependencies
21
+
22
+ ## 5.0.7
23
+
24
+ ### Patch Changes
25
+
26
+ - [#121092](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121092)
27
+ [`8cd08b738070d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8cd08b738070d) -
28
+ [ux] Implemented full height separator as per design for media and card
29
+
3
30
  ## 5.0.6
4
31
 
5
32
  ### Patch Changes
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,9 +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
- }, {
335
+ }]) : [].concat(editItems, (0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
337
336
  id: 'editor.link.openLink',
338
337
  type: 'button',
339
338
  icon: _linkExternal.default,
@@ -343,7 +342,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
343
342
  title: intl.formatMessage(_messages.linkMessages.openLink),
344
343
  onClick: visitCardLink(editorAnalyticsApi)
345
344
  }], (0, _toConsumableArray2.default)(commentItems.length > 1 ? [{
346
- type: 'separator'
345
+ type: 'separator',
346
+ fullHeight: true
347
347
  }, commentItems[0]] : commentItems));
348
348
  if (currentAppearance === 'embed') {
349
349
  var _pluginInjectionApi$a4;
@@ -363,7 +363,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
363
363
  // For url appearance, please see HyperlinkToolbarAppearanceProps
364
364
  if (currentAppearance) {
365
365
  var showDatasourceAppearance = allowDatasource && url;
366
- 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') ? {
367
367
  type: 'custom',
368
368
  fallback: [],
369
369
  render: function render(editorView) {
@@ -380,7 +380,17 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
380
380
  showUpgradeDiscoverability: showUpgradeDiscoverability
381
381
  });
382
382
  }
383
- }], (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 ? [{
384
394
  type: 'custom',
385
395
  fallback: [],
386
396
  render: function render(editorView) {
@@ -397,16 +407,18 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
397
407
  type: 'separator'
398
408
  }]));
399
409
  }
400
- if (toolbarItems.length > 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
410
+ if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
401
411
  var overflowMenuConfig = [{
402
412
  type: 'separator',
403
- supportsViewMode: true
413
+ fullHeight: true
404
414
  }, {
405
415
  type: 'overflow-dropdown',
406
416
  options: [{
407
417
  title: 'Copy',
408
418
  onClick: function onClick() {
409
- // 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));
410
422
  return true;
411
423
  },
412
424
  icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
@@ -466,7 +478,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
466
478
  allowEmbeds = cardOptions.allowEmbeds,
467
479
  showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
468
480
  var url = metadata.url;
469
- toolbarItems.push({
481
+ toolbarItems.push((0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? {
470
482
  type: 'custom',
471
483
  fallback: [],
472
484
  render: function render(editorView) {
@@ -484,7 +496,19 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
484
496
  isDatasourceView: true
485
497
  });
486
498
  }
487
- }, {
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
+ }), {
488
512
  type: 'custom',
489
513
  fallback: [],
490
514
  render: function render(editorView) {
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,9 +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
- }, {
327
+ }] : [...editItems, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), {
329
328
  id: 'editor.link.openLink',
330
329
  type: 'button',
331
330
  icon: LinkExternalIcon,
@@ -335,7 +334,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
335
334
  title: intl.formatMessage(linkMessages.openLink),
336
335
  onClick: visitCardLink(editorAnalyticsApi)
337
336
  }, ...(commentItems.length > 1 ? [{
338
- type: 'separator'
337
+ type: 'separator',
338
+ fullHeight: true
339
339
  }, commentItems[0]] : commentItems)];
340
340
  if (currentAppearance === 'embed') {
341
341
  var _pluginInjectionApi$a5;
@@ -357,7 +357,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
357
357
  // For url appearance, please see HyperlinkToolbarAppearanceProps
358
358
  if (currentAppearance) {
359
359
  const showDatasourceAppearance = allowDatasource && url;
360
- toolbarItems.unshift(...getToolbarViewedItem(url, currentAppearance), {
360
+ toolbarItems.unshift(...getToolbarViewedItem(url, currentAppearance), editorExperiment('platform_editor_controls', 'control') ? {
361
361
  type: 'custom',
362
362
  fallback: [],
363
363
  render: editorView => /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
@@ -372,7 +372,17 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
372
372
  editorAnalyticsApi: editorAnalyticsApi,
373
373
  showUpgradeDiscoverability: showUpgradeDiscoverability
374
374
  })
375
- }, ...(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 ? [{
376
386
  type: 'custom',
377
387
  fallback: [],
378
388
  render: editorView => /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
@@ -387,16 +397,18 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
387
397
  type: 'separator'
388
398
  });
389
399
  }
390
- if (toolbarItems.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
400
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
391
401
  const overflowMenuConfig = [{
392
402
  type: 'separator',
393
- supportsViewMode: true
403
+ fullHeight: true
394
404
  }, {
395
405
  type: 'overflow-dropdown',
396
406
  options: [{
397
407
  title: 'Copy',
398
408
  onClick: () => {
399
- // 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));
400
412
  return true;
401
413
  },
402
414
  icon: /*#__PURE__*/React.createElement(CopyIcon, {
@@ -459,7 +471,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
459
471
  const {
460
472
  url
461
473
  } = metadata;
462
- toolbarItems.push({
474
+ toolbarItems.push(editorExperiment('platform_editor_controls', 'control') ? {
463
475
  type: 'custom',
464
476
  fallback: [],
465
477
  render: editorView => {
@@ -477,7 +489,19 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
477
489
  isDatasourceView: true
478
490
  });
479
491
  }
480
- }, {
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
+ }), {
481
505
  type: 'custom',
482
506
  fallback: [],
483
507
  render: editorView => /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
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,9 +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
- }, {
325
+ }]) : [].concat(editItems, _toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
327
326
  id: 'editor.link.openLink',
328
327
  type: 'button',
329
328
  icon: LinkExternalIcon,
@@ -333,7 +332,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
333
332
  title: intl.formatMessage(linkMessages.openLink),
334
333
  onClick: visitCardLink(editorAnalyticsApi)
335
334
  }], _toConsumableArray(commentItems.length > 1 ? [{
336
- type: 'separator'
335
+ type: 'separator',
336
+ fullHeight: true
337
337
  }, commentItems[0]] : commentItems));
338
338
  if (currentAppearance === 'embed') {
339
339
  var _pluginInjectionApi$a4;
@@ -353,7 +353,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
353
353
  // For url appearance, please see HyperlinkToolbarAppearanceProps
354
354
  if (currentAppearance) {
355
355
  var showDatasourceAppearance = allowDatasource && url;
356
- toolbarItems.unshift.apply(toolbarItems, _toConsumableArray(getToolbarViewedItem(url, currentAppearance)).concat([{
356
+ toolbarItems.unshift.apply(toolbarItems, _toConsumableArray(getToolbarViewedItem(url, currentAppearance)).concat([editorExperiment('platform_editor_controls', 'control') ? {
357
357
  type: 'custom',
358
358
  fallback: [],
359
359
  render: function render(editorView) {
@@ -370,7 +370,17 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
370
370
  showUpgradeDiscoverability: showUpgradeDiscoverability
371
371
  });
372
372
  }
373
- }], _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 ? [{
374
384
  type: 'custom',
375
385
  fallback: [],
376
386
  render: function render(editorView) {
@@ -387,16 +397,18 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
387
397
  type: 'separator'
388
398
  }]));
389
399
  }
390
- if (toolbarItems.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
400
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
391
401
  var overflowMenuConfig = [{
392
402
  type: 'separator',
393
- supportsViewMode: true
403
+ fullHeight: true
394
404
  }, {
395
405
  type: 'overflow-dropdown',
396
406
  options: [{
397
407
  title: 'Copy',
398
408
  onClick: function onClick() {
399
- // 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));
400
412
  return true;
401
413
  },
402
414
  icon: /*#__PURE__*/React.createElement(CopyIcon, {
@@ -456,7 +468,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
456
468
  allowEmbeds = cardOptions.allowEmbeds,
457
469
  showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
458
470
  var url = metadata.url;
459
- toolbarItems.push({
471
+ toolbarItems.push(editorExperiment('platform_editor_controls', 'control') ? {
460
472
  type: 'custom',
461
473
  fallback: [],
462
474
  render: function render(editorView) {
@@ -474,7 +486,19 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
474
486
  isDatasourceView: true
475
487
  });
476
488
  }
477
- }, {
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
+ }), {
478
502
  type: 'custom',
479
503
  fallback: [],
480
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.6",
3
+ "version": "5.1.0",
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": "^100.5.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,8 +62,8 @@
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",
66
- "@atlaskit/tokens": "^4.2.0",
65
+ "@atlaskit/tmp-editor-statsig": "^3.4.0",
66
+ "@atlaskit/tokens": "^4.3.0",
67
67
  "@babel/runtime": "^7.0.0",
68
68
  "@emotion/react": "^11.7.1",
69
69
  "lodash": "^4.17.21",