@atlaskit/editor-plugin-card 5.0.7 → 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.
- package/CHANGELOG.md +19 -0
- package/dist/cjs/ui/LinkToolbarAppearanceDropdown.js +180 -0
- package/dist/cjs/ui/toolbar.js +32 -11
- package/dist/es2019/ui/LinkToolbarAppearanceDropdown.js +160 -0
- package/dist/es2019/ui/toolbar.js +32 -11
- package/dist/esm/ui/LinkToolbarAppearanceDropdown.js +170 -0
- package/dist/esm/ui/toolbar.js +32 -11
- package/dist/types/ui/LinkToolbarAppearanceDropdown.d.ts +5 -0
- package/dist/types-ts4.5/ui/LinkToolbarAppearanceDropdown.d.ts +5 -0
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
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
|
+
|
|
3
22
|
## 5.0.7
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -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)), [
|
|
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
|
-
}
|
|
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 (
|
|
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
|
-
|
|
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) {
|
|
@@ -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
|
+
};
|
|
@@ -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),
|
|
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
|
-
}
|
|
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 (
|
|
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
|
-
|
|
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, {
|
|
@@ -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)), [
|
|
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
|
-
}
|
|
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 (
|
|
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
|
-
|
|
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) {
|
|
@@ -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>;
|
|
@@ -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
|
|
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.
|
|
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.
|
|
40
|
-
"@atlaskit/editor-common": "^100.
|
|
41
|
-
"@atlaskit/editor-plugin-analytics": "^2.
|
|
42
|
-
"@atlaskit/editor-plugin-base": "^2.
|
|
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.
|
|
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.
|
|
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.
|
|
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",
|