@atlaskit/editor-plugin-card 5.1.1 → 5.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 5.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 5.2.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#121851](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121851)
14
+ [`71823ac860883`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71823ac860883) -
15
+ Add 'state' as an optional param to GetStartingToolbarItems type, display new appearance dropdown
16
+ for url nodes
17
+
18
+ ### Patch Changes
19
+
20
+ - [#122152](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122152)
21
+ [`c3187eef09138`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c3187eef09138) -
22
+ [ux] Update editor floating toolbar icons
23
+ - Updated dependencies
24
+
3
25
  ## 5.1.1
4
26
 
5
27
  ### Patch Changes
@@ -0,0 +1,184 @@
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.getHyperlinkAppearanceDropdown = void 0;
9
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
10
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
11
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
12
+ var _react = _interopRequireWildcard(require("react"));
13
+ var _card = require("@atlaskit/editor-common/card");
14
+ var _LinkToolbarAppearanceDropdown = require("./LinkToolbarAppearanceDropdown");
15
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
+ 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; }
17
+ var HyperlinkDropdown = function HyperlinkDropdown(props) {
18
+ var _props$cardOptions3;
19
+ var _useState = (0, _react.useState)(new Map()),
20
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
21
+ supportedUrlsMap = _useState2[0],
22
+ setSupportedUrlsMap = _useState2[1];
23
+ var cardProvider = (0, _react.useRef)(undefined);
24
+ var url = props.url,
25
+ intl = props.intl,
26
+ editorState = props.editorState,
27
+ cardOptions = props.cardOptions,
28
+ editorAnalyticsApi = props.editorAnalyticsApi;
29
+
30
+ // Ignored via go/ees005
31
+ // eslint-disable-next-line require-await
32
+ var getProvider = /*#__PURE__*/function () {
33
+ var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
34
+ var _props$cardOptions;
35
+ var _props$cardOptions2;
36
+ return _regenerator.default.wrap(function _callee$(_context) {
37
+ while (1) switch (_context.prev = _context.next) {
38
+ case 0:
39
+ if (!((_props$cardOptions = props.cardOptions) !== null && _props$cardOptions !== void 0 && _props$cardOptions.provider)) {
40
+ _context.next = 2;
41
+ break;
42
+ }
43
+ return _context.abrupt("return", (_props$cardOptions2 = props.cardOptions) === null || _props$cardOptions2 === void 0 ? void 0 : _props$cardOptions2.provider);
44
+ case 2:
45
+ if (!cardProvider.current) {
46
+ _context.next = 4;
47
+ break;
48
+ }
49
+ return _context.abrupt("return", cardProvider.current);
50
+ case 4:
51
+ return _context.abrupt("return", new Promise(function (resolve) {
52
+ var _props$editorPluginAp;
53
+ var cardProvider = (_props$editorPluginAp = props.editorPluginApi) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.card) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.sharedState) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.currentState()) === null || _props$editorPluginAp === void 0 ? void 0 : _props$editorPluginAp.provider;
54
+ if (cardProvider) {
55
+ resolve(cardProvider);
56
+ }
57
+ }));
58
+ case 5:
59
+ case "end":
60
+ return _context.stop();
61
+ }
62
+ }, _callee);
63
+ }));
64
+ return function getProvider() {
65
+ return _ref.apply(this, arguments);
66
+ };
67
+ }();
68
+ var resolveUrl = /*#__PURE__*/function () {
69
+ var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(url) {
70
+ var isUrlSupported, _yield$provider$findP, provider, newMap;
71
+ return _regenerator.default.wrap(function _callee2$(_context2) {
72
+ while (1) switch (_context2.prev = _context2.next) {
73
+ case 0:
74
+ if (!supportedUrlsMap.has(url)) {
75
+ _context2.next = 2;
76
+ break;
77
+ }
78
+ return _context2.abrupt("return");
79
+ case 2:
80
+ isUrlSupported = false;
81
+ _context2.prev = 3;
82
+ _context2.next = 6;
83
+ return getProvider();
84
+ case 6:
85
+ provider = _context2.sent;
86
+ _context2.next = 9;
87
+ return provider === null || provider === void 0 ? void 0 : provider.findPattern(url);
88
+ case 9:
89
+ _context2.t1 = _yield$provider$findP = _context2.sent;
90
+ _context2.t0 = _context2.t1 !== null;
91
+ if (!_context2.t0) {
92
+ _context2.next = 13;
93
+ break;
94
+ }
95
+ _context2.t0 = _yield$provider$findP !== void 0;
96
+ case 13:
97
+ if (!_context2.t0) {
98
+ _context2.next = 17;
99
+ break;
100
+ }
101
+ _context2.t2 = _yield$provider$findP;
102
+ _context2.next = 18;
103
+ break;
104
+ case 17:
105
+ _context2.t2 = false;
106
+ case 18:
107
+ isUrlSupported = _context2.t2;
108
+ _context2.next = 24;
109
+ break;
110
+ case 21:
111
+ _context2.prev = 21;
112
+ _context2.t3 = _context2["catch"](3);
113
+ isUrlSupported = false;
114
+ case 24:
115
+ newMap = new Map(supportedUrlsMap);
116
+ newMap.set(url, isUrlSupported);
117
+ setSupportedUrlsMap(newMap);
118
+ case 27:
119
+ case "end":
120
+ return _context2.stop();
121
+ }
122
+ }, _callee2, null, [[3, 21]]);
123
+ }));
124
+ return function resolveUrl(_x) {
125
+ return _ref2.apply(this, arguments);
126
+ };
127
+ }();
128
+ (0, _react.useEffect)(function () {
129
+ resolveUrl(url);
130
+ // before migrating from a class to a functional component, we were only reacting to changes in the url
131
+ // eslint-disable-next-line react-hooks/exhaustive-deps
132
+ }, [url, (_props$cardOptions3 = props.cardOptions) === null || _props$cardOptions3 === void 0 ? void 0 : _props$cardOptions3.provider, props.editorPluginApi]);
133
+ if (!supportedUrlsMap.get(url)) {
134
+ return null;
135
+ }
136
+ return /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearanceDropdown.LinkAppearanceMenu, {
137
+ url: url,
138
+ intl: intl,
139
+ editorState: editorState,
140
+ allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
141
+ allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
142
+ editorAnalyticsApi: editorAnalyticsApi,
143
+ dispatchCommand: props.dispatchCommand,
144
+ settingsConfig: props.settingsConfig
145
+ });
146
+ };
147
+ var getHyperlinkAppearanceDropdown = exports.getHyperlinkAppearanceDropdown = function getHyperlinkAppearanceDropdown(_ref3) {
148
+ var url = _ref3.url,
149
+ intl = _ref3.intl,
150
+ editorState = _ref3.editorState,
151
+ editorAnalyticsApi = _ref3.editorAnalyticsApi,
152
+ editorPluginApi = _ref3.editorPluginApi,
153
+ settingsConfig = _ref3.settingsConfig,
154
+ cardOptions = _ref3.cardOptions;
155
+ var alignmentItemOptions = {
156
+ render: function render(props) {
157
+ if (!editorState) {
158
+ return null;
159
+ }
160
+ return /*#__PURE__*/_react.default.createElement(HyperlinkDropdown, {
161
+ intl: intl,
162
+ editorState: editorState,
163
+ url: url,
164
+ editorAnalyticsApi: editorAnalyticsApi,
165
+ editorPluginApi: editorPluginApi,
166
+ dispatchCommand: props.dispatchCommand,
167
+ settingsConfig: settingsConfig,
168
+ cardOptions: cardOptions
169
+ });
170
+ },
171
+ width: 200,
172
+ height: 400
173
+ };
174
+ var currentAppearanceDisplayInformation = _card.appearancePropsMap['url'];
175
+ var alignmentToolbarItem = {
176
+ id: 'hyperlink-appearance',
177
+ testId: 'hyperlink-appearance-dropdown',
178
+ type: 'dropdown',
179
+ options: alignmentItemOptions,
180
+ title: intl.formatMessage(currentAppearanceDisplayInformation.title),
181
+ iconBefore: currentAppearanceDisplayInformation.icon
182
+ };
183
+ return alignmentToolbarItem;
184
+ };
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.LinkToolbarAppearance = void 0;
8
+ exports.getUnavailableMessage = exports.LinkToolbarAppearance = void 0;
9
9
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
10
10
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
11
11
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -152,7 +152,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
152
152
  }
153
153
  }]);
154
154
  }(_react.default.Component);
155
- var getUnavailableMessage = function getUnavailableMessage(state, intl) {
155
+ var getUnavailableMessage = exports.getUnavailableMessage = function getUnavailableMessage(state, intl) {
156
156
  try {
157
157
  var parentNode = state.selection.$from.node(1);
158
158
  var parentName = intl.formatMessage(_messages.default[parentNode.type.name]);
@@ -1,26 +1,24 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
- exports.getLinkAppearanceDropdown = void 0;
7
+ exports.getLinkAppearanceDropdown = exports.LinkAppearanceMenu = void 0;
9
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
9
  var _react = _interopRequireDefault(require("react"));
11
10
  var _analytics = require("@atlaskit/editor-common/analytics");
12
11
  var _card = require("@atlaskit/editor-common/card");
13
- var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
12
+ var _messages = require("@atlaskit/editor-common/messages");
14
13
  var _utils = require("@atlaskit/editor-common/utils");
15
14
  var _model = require("@atlaskit/editor-prosemirror/model");
16
15
  var _linkProvider = require("@atlaskit/link-provider");
17
16
  var _menu = require("@atlaskit/menu");
18
17
  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; }
18
+ var _LinkToolbarAppearance = require("./LinkToolbarAppearance");
21
19
  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
20
  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) {
21
+ var LinkAppearanceMenu = exports.LinkAppearanceMenu = function LinkAppearanceMenu(_ref) {
24
22
  var _cardContext$value, _setSelectedCardAppea, _setSelectedCardAppea2, _changeSelectedCardTo, _setSelectedCardAppea3;
25
23
  var url = _ref.url,
26
24
  intl = _ref.intl,
@@ -57,7 +55,7 @@ var AppearanceMenu = function AppearanceMenu(_ref) {
57
55
  hidden: false,
58
56
  testId: 'embed-appearance',
59
57
  disabled: !isEmbedCardLinkSupportedInParent,
60
- tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
58
+ tooltip: isEmbedCardLinkSupportedInParent ? undefined : (0, _LinkToolbarAppearance.getUnavailableMessage)(editorState, intl)
61
59
  };
62
60
  var blockCardOption = allowBlockCards && {
63
61
  appearance: 'block',
@@ -66,7 +64,7 @@ var AppearanceMenu = function AppearanceMenu(_ref) {
66
64
  selected: currentAppearance === 'block' && !isDatasourceView,
67
65
  testId: 'block-appearance',
68
66
  disabled: !isBlockCardLinkSupportedInParent,
69
- tooltip: isBlockCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
67
+ tooltip: isBlockCardLinkSupportedInParent ? undefined : (0, _LinkToolbarAppearance.getUnavailableMessage)(editorState, intl)
70
68
  };
71
69
  var options = [{
72
70
  title: intl.formatMessage(_messages.cardMessages.url),
@@ -136,7 +134,7 @@ var getLinkAppearanceDropdown = exports.getLinkAppearanceDropdown = function get
136
134
  settingsConfig = _ref2.settingsConfig;
137
135
  var alignmentItemOptions = {
138
136
  render: function render(props) {
139
- return /*#__PURE__*/_react.default.createElement(AppearanceMenu, {
137
+ return /*#__PURE__*/_react.default.createElement(LinkAppearanceMenu, {
140
138
  url: url,
141
139
  intl: intl,
142
140
  currentAppearance: currentAppearance,
@@ -163,18 +161,4 @@ var getLinkAppearanceDropdown = exports.getLinkAppearanceDropdown = function get
163
161
  iconBefore: currentAppearanceDisplayInformation.icon
164
162
  };
165
163
  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
164
  };
@@ -21,6 +21,7 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
21
21
  var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
22
22
  var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
23
23
  var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
24
+ var _link2 = _interopRequireDefault(require("@atlaskit/icon/core/link"));
24
25
  var _linkBroken = _interopRequireDefault(require("@atlaskit/icon/core/link-broken"));
25
26
  var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
26
27
  var _settings = _interopRequireDefault(require("@atlaskit/icon/core/settings"));
@@ -38,6 +39,7 @@ var _DatasourceAppearanceButton = require("./DatasourceAppearanceButton");
38
39
  var _EditLinkToolbar = require("./EditLinkToolbar");
39
40
  var _EditToolbarButton = require("./EditToolbarButton");
40
41
  var _HyperlinkToolbarAppearance = require("./HyperlinkToolbarAppearance");
42
+ var _HyperlinkToolbarAppearanceDropdown = require("./HyperlinkToolbarAppearanceDropdown");
41
43
  var _LinkToolbarAppearance = require("./LinkToolbarAppearance");
42
44
  var _LinkToolbarAppearanceDropdown = require("./LinkToolbarAppearanceDropdown");
43
45
  var _ToolbarViewedEvent = require("./ToolbarViewedEvent");
@@ -332,7 +334,18 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
332
334
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
333
335
  title: intl.formatMessage(_messages.default.remove),
334
336
  onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
335
- }]) : [].concat(editItems, (0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
337
+ }]) : [{
338
+ id: 'editor.link.edit',
339
+ type: 'button',
340
+ selected: false,
341
+ metadata: metadata,
342
+ title: intl.formatMessage(_messages.linkToolbarMessages.editLink),
343
+ icon: _link2.default,
344
+ testId: 'link-toolbar-edit-link-button',
345
+ onClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, true)
346
+ }, {
347
+ type: 'separator'
348
+ }].concat((0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
336
349
  id: 'editor.link.openLink',
337
350
  type: 'button',
338
351
  icon: _linkExternal.default,
@@ -505,8 +518,6 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
505
518
  allowBlockCards: allowBlockCards,
506
519
  editorAnalyticsApi: editorAnalyticsApi,
507
520
  showUpgradeDiscoverability: showUpgradeDiscoverability,
508
- // TODO: find a way to inject editorView here
509
- // editorView: view,
510
521
  settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)
511
522
  }), {
512
523
  type: 'custom',
@@ -589,7 +600,7 @@ var shouldRenderToolbarPulse = exports.shouldRenderToolbarPulse = function shoul
589
600
  return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled;
590
601
  };
591
602
  var getStartingToolbarItems = exports.getStartingToolbarItems = function getStartingToolbarItems(options, api) {
592
- return function (intl, link, onEditLink, metadata) {
603
+ return function (intl, link, onEditLink, metadata, state) {
593
604
  var editLinkItem = options.allowDatasource ? [{
594
605
  type: 'custom',
595
606
  fallback: [],
@@ -619,6 +630,48 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
619
630
  }, {
620
631
  type: 'separator'
621
632
  }];
633
+ if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
634
+ var _api$analytics2, _api$analytics3;
635
+ return [{
636
+ type: 'custom',
637
+ fallback: [],
638
+ render: function render(editorView) {
639
+ return /*#__PURE__*/_react.default.createElement(_ToolbarViewedEvent.ToolbarViewedEvent, {
640
+ key: "edit.link.menu.viewed",
641
+ url: link,
642
+ display: "url",
643
+ editorView: editorView
644
+ });
645
+ }
646
+ }, (0, _HyperlinkToolbarAppearanceDropdown.getHyperlinkAppearanceDropdown)({
647
+ url: link,
648
+ intl: intl,
649
+ editorState: state,
650
+ editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
651
+ editorPluginApi: api,
652
+ cardOptions: options,
653
+ settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)
654
+ })].concat((0, _toConsumableArray2.default)(options !== null && options !== void 0 && options.allowDatasource ? [{
655
+ type: 'custom',
656
+ fallback: [],
657
+ render: function render(editorView) {
658
+ var _api$analytics4;
659
+ if (!editorView) {
660
+ return null;
661
+ }
662
+ return /*#__PURE__*/_react.default.createElement(_DatasourceAppearanceButton.DatasourceAppearanceButton, {
663
+ intl: intl,
664
+ editorAnalyticsApi: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
665
+ url: link,
666
+ editorView: editorView,
667
+ editorState: editorView.state,
668
+ inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
669
+ });
670
+ }
671
+ }] : []), [{
672
+ type: 'separator'
673
+ }], editLinkItem);
674
+ }
622
675
  return [{
623
676
  type: 'custom',
624
677
  fallback: [],
@@ -634,7 +687,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
634
687
  type: 'custom',
635
688
  fallback: [],
636
689
  render: function render(editorView) {
637
- var _api$analytics2;
690
+ var _api$analytics5;
638
691
  if (!editorView) {
639
692
  return null;
640
693
  }
@@ -645,7 +698,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
645
698
  editorView: editorView,
646
699
  editorState: editorView.state,
647
700
  cardOptions: options,
648
- editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
701
+ editorAnalyticsApi: api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions,
649
702
  editorPluginApi: api
650
703
  });
651
704
  }
@@ -658,11 +711,11 @@ var getEndingToolbarItems = exports.getEndingToolbarItems = function getEndingTo
658
711
  * Require either provider to be supplied (controls link preferences)
659
712
  * Or explicit user preferences config in order to enable button
660
713
  */
661
- if (options.provider || options.userPreferencesLink) {
662
- var _api$analytics3;
714
+ if ((options.provider || options.userPreferencesLink) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
715
+ var _api$analytics6;
663
716
  return [{
664
717
  type: 'separator'
665
- }, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)];
718
+ }, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, options.userPreferencesLink)];
666
719
  }
667
720
  return [];
668
721
  };
@@ -0,0 +1,108 @@
1
+ import React, { useEffect, useRef, useState } from 'react';
2
+ import { appearancePropsMap } from '@atlaskit/editor-common/card';
3
+ import { LinkAppearanceMenu } from './LinkToolbarAppearanceDropdown';
4
+ const HyperlinkDropdown = props => {
5
+ var _props$cardOptions3;
6
+ const [supportedUrlsMap, setSupportedUrlsMap] = useState(new Map());
7
+ const cardProvider = useRef(undefined);
8
+ const {
9
+ url,
10
+ intl,
11
+ editorState,
12
+ cardOptions,
13
+ editorAnalyticsApi
14
+ } = props;
15
+
16
+ // Ignored via go/ees005
17
+ // eslint-disable-next-line require-await
18
+ const getProvider = async () => {
19
+ var _props$cardOptions;
20
+ if ((_props$cardOptions = props.cardOptions) !== null && _props$cardOptions !== void 0 && _props$cardOptions.provider) {
21
+ var _props$cardOptions2;
22
+ return (_props$cardOptions2 = props.cardOptions) === null || _props$cardOptions2 === void 0 ? void 0 : _props$cardOptions2.provider;
23
+ }
24
+ if (cardProvider.current) {
25
+ return cardProvider.current;
26
+ }
27
+ return new Promise(resolve => {
28
+ var _props$editorPluginAp, _props$editorPluginAp2, _props$editorPluginAp3, _props$editorPluginAp4;
29
+ const cardProvider = (_props$editorPluginAp = props.editorPluginApi) === null || _props$editorPluginAp === void 0 ? void 0 : (_props$editorPluginAp2 = _props$editorPluginAp.card) === null || _props$editorPluginAp2 === void 0 ? void 0 : (_props$editorPluginAp3 = _props$editorPluginAp2.sharedState) === null || _props$editorPluginAp3 === void 0 ? void 0 : (_props$editorPluginAp4 = _props$editorPluginAp3.currentState()) === null || _props$editorPluginAp4 === void 0 ? void 0 : _props$editorPluginAp4.provider;
30
+ if (cardProvider) {
31
+ resolve(cardProvider);
32
+ }
33
+ });
34
+ };
35
+ const resolveUrl = async url => {
36
+ if (supportedUrlsMap.has(url)) {
37
+ return;
38
+ }
39
+ let isUrlSupported = false;
40
+ try {
41
+ var _await$provider$findP;
42
+ const provider = await getProvider();
43
+ isUrlSupported = (_await$provider$findP = await (provider === null || provider === void 0 ? void 0 : provider.findPattern(url))) !== null && _await$provider$findP !== void 0 ? _await$provider$findP : false;
44
+ } catch (error) {
45
+ isUrlSupported = false;
46
+ }
47
+ const newMap = new Map(supportedUrlsMap);
48
+ newMap.set(url, isUrlSupported);
49
+ setSupportedUrlsMap(newMap);
50
+ };
51
+ useEffect(() => {
52
+ resolveUrl(url);
53
+ // before migrating from a class to a functional component, we were only reacting to changes in the url
54
+ // eslint-disable-next-line react-hooks/exhaustive-deps
55
+ }, [url, (_props$cardOptions3 = props.cardOptions) === null || _props$cardOptions3 === void 0 ? void 0 : _props$cardOptions3.provider, props.editorPluginApi]);
56
+ if (!supportedUrlsMap.get(url)) {
57
+ return null;
58
+ }
59
+ return /*#__PURE__*/React.createElement(LinkAppearanceMenu, {
60
+ url: url,
61
+ intl: intl,
62
+ editorState: editorState,
63
+ allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
64
+ allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
65
+ editorAnalyticsApi: editorAnalyticsApi,
66
+ dispatchCommand: props.dispatchCommand,
67
+ settingsConfig: props.settingsConfig
68
+ });
69
+ };
70
+ export const getHyperlinkAppearanceDropdown = ({
71
+ url,
72
+ intl,
73
+ editorState,
74
+ editorAnalyticsApi,
75
+ editorPluginApi,
76
+ settingsConfig,
77
+ cardOptions
78
+ }) => {
79
+ const alignmentItemOptions = {
80
+ render: props => {
81
+ if (!editorState) {
82
+ return null;
83
+ }
84
+ return /*#__PURE__*/React.createElement(HyperlinkDropdown, {
85
+ intl: intl,
86
+ editorState: editorState,
87
+ url: url,
88
+ editorAnalyticsApi: editorAnalyticsApi,
89
+ editorPluginApi: editorPluginApi,
90
+ dispatchCommand: props.dispatchCommand,
91
+ settingsConfig: settingsConfig,
92
+ cardOptions: cardOptions
93
+ });
94
+ },
95
+ width: 200,
96
+ height: 400
97
+ };
98
+ const currentAppearanceDisplayInformation = appearancePropsMap['url'];
99
+ const alignmentToolbarItem = {
100
+ id: 'hyperlink-appearance',
101
+ testId: 'hyperlink-appearance-dropdown',
102
+ type: 'dropdown',
103
+ options: alignmentItemOptions,
104
+ title: intl.formatMessage(currentAppearanceDisplayInformation.title),
105
+ iconBefore: currentAppearanceDisplayInformation.icon
106
+ };
107
+ return alignmentToolbarItem;
108
+ };
@@ -120,7 +120,7 @@ export class LinkToolbarAppearance extends React.Component {
120
120
  return /*#__PURE__*/React.createElement(WithCardContext, null, cardContext => this.renderDropdown(editorView, cardContext && cardContext.value));
121
121
  }
122
122
  }
123
- const getUnavailableMessage = (state, intl) => {
123
+ export const getUnavailableMessage = (state, intl) => {
124
124
  try {
125
125
  const parentNode = state.selection.$from.node(1);
126
126
  const parentName = intl.formatMessage(nodeNames[parentNode.type.name]);
@@ -1,13 +1,14 @@
1
1
  import React from 'react';
2
2
  import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
3
  import { appearancePropsMap, commandWithMetadata, getDropdownOption } from '@atlaskit/editor-common/card';
4
- import nodeNames, { cardMessages as messages } from '@atlaskit/editor-common/messages';
4
+ import { cardMessages as messages } from '@atlaskit/editor-common/messages';
5
5
  import { isSupportedInParent } from '@atlaskit/editor-common/utils';
6
6
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
7
7
  import { useSmartCardContext } from '@atlaskit/link-provider';
8
8
  import { ButtonItem, LinkItem, MenuGroup, Section } from '@atlaskit/menu';
9
9
  import { changeSelectedCardToLink, setSelectedCardAppearance } from '../pm-plugins/doc';
10
- const AppearanceMenu = ({
10
+ import { getUnavailableMessage } from './LinkToolbarAppearance';
11
+ export const LinkAppearanceMenu = ({
11
12
  url,
12
13
  intl,
13
14
  currentAppearance,
@@ -116,7 +117,7 @@ export const getLinkAppearanceDropdown = ({
116
117
  }) => {
117
118
  const alignmentItemOptions = {
118
119
  render: props => {
119
- return /*#__PURE__*/React.createElement(AppearanceMenu, {
120
+ return /*#__PURE__*/React.createElement(LinkAppearanceMenu, {
120
121
  url: url,
121
122
  intl: intl,
122
123
  currentAppearance: currentAppearance,
@@ -143,18 +144,4 @@ export const getLinkAppearanceDropdown = ({
143
144
  iconBefore: currentAppearanceDisplayInformation.icon
144
145
  };
145
146
  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
147
  };
@@ -11,6 +11,7 @@ import { findDomRefAtPos, removeSelectedNode } from '@atlaskit/editor-prosemirro
11
11
  import CommentIcon from '@atlaskit/icon/core/comment';
12
12
  import CopyIcon from '@atlaskit/icon/core/copy';
13
13
  import DeleteIcon from '@atlaskit/icon/core/delete';
14
+ import LinkIcon from '@atlaskit/icon/core/link';
14
15
  import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
15
16
  import LinkExternalIcon from '@atlaskit/icon/core/link-external';
16
17
  import SettingsIcon from '@atlaskit/icon/core/settings';
@@ -28,6 +29,7 @@ import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
28
29
  import { buildEditLinkToolbar, editLinkToolbarConfig, getEditLinkCallback } from './EditLinkToolbar';
29
30
  import { EditToolbarButton } from './EditToolbarButton';
30
31
  import { HyperlinkToolbarAppearance } from './HyperlinkToolbarAppearance';
32
+ import { getHyperlinkAppearanceDropdown } from './HyperlinkToolbarAppearanceDropdown';
31
33
  import { LinkToolbarAppearance } from './LinkToolbarAppearance';
32
34
  import { getLinkAppearanceDropdown } from './LinkToolbarAppearanceDropdown';
33
35
  import { ToolbarViewedEvent } from './ToolbarViewedEvent';
@@ -324,7 +326,18 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
324
326
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
325
327
  title: intl.formatMessage(commonMessages.remove),
326
328
  onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
327
- }] : [...editItems, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), {
329
+ }] : [{
330
+ id: 'editor.link.edit',
331
+ type: 'button',
332
+ selected: false,
333
+ metadata: metadata,
334
+ title: intl.formatMessage(linkToolbarMessages.editLink),
335
+ icon: LinkIcon,
336
+ testId: 'link-toolbar-edit-link-button',
337
+ onClick: getEditLinkCallback(editorAnalyticsApi, true)
338
+ }, {
339
+ type: 'separator'
340
+ }, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), {
328
341
  id: 'editor.link.openLink',
329
342
  type: 'button',
330
343
  icon: LinkExternalIcon,
@@ -498,8 +511,6 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
498
511
  allowBlockCards: allowBlockCards,
499
512
  editorAnalyticsApi,
500
513
  showUpgradeDiscoverability: showUpgradeDiscoverability,
501
- // TODO: find a way to inject editorView here
502
- // editorView: view,
503
514
  settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)
504
515
  }), {
505
516
  type: 'custom',
@@ -578,7 +589,7 @@ export const shouldRenderToolbarPulse = (embedEnabled, appearance, status, isDis
578
589
  return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled;
579
590
  };
580
591
  export const getStartingToolbarItems = (options, api) => {
581
- return (intl, link, onEditLink, metadata) => {
592
+ return (intl, link, onEditLink, metadata, state) => {
582
593
  const editLinkItem = options.allowDatasource ? [{
583
594
  type: 'custom',
584
595
  fallback: [],
@@ -608,6 +619,46 @@ export const getStartingToolbarItems = (options, api) => {
608
619
  }, {
609
620
  type: 'separator'
610
621
  }];
622
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
623
+ var _api$analytics2, _api$analytics3;
624
+ return [{
625
+ type: 'custom',
626
+ fallback: [],
627
+ render: editorView => /*#__PURE__*/React.createElement(ToolbarViewedEvent, {
628
+ key: "edit.link.menu.viewed",
629
+ url: link,
630
+ display: "url",
631
+ editorView: editorView
632
+ })
633
+ }, getHyperlinkAppearanceDropdown({
634
+ url: link,
635
+ intl,
636
+ editorState: state,
637
+ editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
638
+ editorPluginApi: api,
639
+ cardOptions: options,
640
+ settingsConfig: getSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)
641
+ }), ...(options !== null && options !== void 0 && options.allowDatasource ? [{
642
+ type: 'custom',
643
+ fallback: [],
644
+ render: editorView => {
645
+ var _api$analytics4;
646
+ if (!editorView) {
647
+ return null;
648
+ }
649
+ return /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
650
+ intl: intl,
651
+ editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
652
+ url: link,
653
+ editorView: editorView,
654
+ editorState: editorView.state,
655
+ inputMethod: INPUT_METHOD.FLOATING_TB
656
+ });
657
+ }
658
+ }] : []), {
659
+ type: 'separator'
660
+ }, ...editLinkItem];
661
+ }
611
662
  return [{
612
663
  type: 'custom',
613
664
  fallback: [],
@@ -621,7 +672,7 @@ export const getStartingToolbarItems = (options, api) => {
621
672
  type: 'custom',
622
673
  fallback: [],
623
674
  render: editorView => {
624
- var _api$analytics2;
675
+ var _api$analytics5;
625
676
  if (!editorView) {
626
677
  return null;
627
678
  }
@@ -632,7 +683,7 @@ export const getStartingToolbarItems = (options, api) => {
632
683
  editorView: editorView,
633
684
  editorState: editorView.state,
634
685
  cardOptions: options,
635
- editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
686
+ editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions,
636
687
  editorPluginApi: api
637
688
  });
638
689
  }
@@ -644,11 +695,11 @@ export const getEndingToolbarItems = (options, api) => (intl, link) => {
644
695
  * Require either provider to be supplied (controls link preferences)
645
696
  * Or explicit user preferences config in order to enable button
646
697
  */
647
- if (options.provider || options.userPreferencesLink) {
648
- var _api$analytics3;
698
+ if ((options.provider || options.userPreferencesLink) && editorExperiment('platform_editor_controls', 'control')) {
699
+ var _api$analytics6;
649
700
  return [{
650
701
  type: 'separator'
651
- }, getSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)];
702
+ }, getSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, options.userPreferencesLink)];
652
703
  }
653
704
  return [];
654
705
  };
@@ -0,0 +1,174 @@
1
+ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ import _regeneratorRuntime from "@babel/runtime/regenerator";
4
+ import React, { useEffect, useRef, useState } from 'react';
5
+ import { appearancePropsMap } from '@atlaskit/editor-common/card';
6
+ import { LinkAppearanceMenu } from './LinkToolbarAppearanceDropdown';
7
+ var HyperlinkDropdown = function HyperlinkDropdown(props) {
8
+ var _props$cardOptions3;
9
+ var _useState = useState(new Map()),
10
+ _useState2 = _slicedToArray(_useState, 2),
11
+ supportedUrlsMap = _useState2[0],
12
+ setSupportedUrlsMap = _useState2[1];
13
+ var cardProvider = useRef(undefined);
14
+ var url = props.url,
15
+ intl = props.intl,
16
+ editorState = props.editorState,
17
+ cardOptions = props.cardOptions,
18
+ editorAnalyticsApi = props.editorAnalyticsApi;
19
+
20
+ // Ignored via go/ees005
21
+ // eslint-disable-next-line require-await
22
+ var getProvider = /*#__PURE__*/function () {
23
+ var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
24
+ var _props$cardOptions;
25
+ var _props$cardOptions2;
26
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
27
+ while (1) switch (_context.prev = _context.next) {
28
+ case 0:
29
+ if (!((_props$cardOptions = props.cardOptions) !== null && _props$cardOptions !== void 0 && _props$cardOptions.provider)) {
30
+ _context.next = 2;
31
+ break;
32
+ }
33
+ return _context.abrupt("return", (_props$cardOptions2 = props.cardOptions) === null || _props$cardOptions2 === void 0 ? void 0 : _props$cardOptions2.provider);
34
+ case 2:
35
+ if (!cardProvider.current) {
36
+ _context.next = 4;
37
+ break;
38
+ }
39
+ return _context.abrupt("return", cardProvider.current);
40
+ case 4:
41
+ return _context.abrupt("return", new Promise(function (resolve) {
42
+ var _props$editorPluginAp;
43
+ var cardProvider = (_props$editorPluginAp = props.editorPluginApi) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.card) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.sharedState) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.currentState()) === null || _props$editorPluginAp === void 0 ? void 0 : _props$editorPluginAp.provider;
44
+ if (cardProvider) {
45
+ resolve(cardProvider);
46
+ }
47
+ }));
48
+ case 5:
49
+ case "end":
50
+ return _context.stop();
51
+ }
52
+ }, _callee);
53
+ }));
54
+ return function getProvider() {
55
+ return _ref.apply(this, arguments);
56
+ };
57
+ }();
58
+ var resolveUrl = /*#__PURE__*/function () {
59
+ var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(url) {
60
+ var isUrlSupported, _yield$provider$findP, provider, newMap;
61
+ return _regeneratorRuntime.wrap(function _callee2$(_context2) {
62
+ while (1) switch (_context2.prev = _context2.next) {
63
+ case 0:
64
+ if (!supportedUrlsMap.has(url)) {
65
+ _context2.next = 2;
66
+ break;
67
+ }
68
+ return _context2.abrupt("return");
69
+ case 2:
70
+ isUrlSupported = false;
71
+ _context2.prev = 3;
72
+ _context2.next = 6;
73
+ return getProvider();
74
+ case 6:
75
+ provider = _context2.sent;
76
+ _context2.next = 9;
77
+ return provider === null || provider === void 0 ? void 0 : provider.findPattern(url);
78
+ case 9:
79
+ _context2.t1 = _yield$provider$findP = _context2.sent;
80
+ _context2.t0 = _context2.t1 !== null;
81
+ if (!_context2.t0) {
82
+ _context2.next = 13;
83
+ break;
84
+ }
85
+ _context2.t0 = _yield$provider$findP !== void 0;
86
+ case 13:
87
+ if (!_context2.t0) {
88
+ _context2.next = 17;
89
+ break;
90
+ }
91
+ _context2.t2 = _yield$provider$findP;
92
+ _context2.next = 18;
93
+ break;
94
+ case 17:
95
+ _context2.t2 = false;
96
+ case 18:
97
+ isUrlSupported = _context2.t2;
98
+ _context2.next = 24;
99
+ break;
100
+ case 21:
101
+ _context2.prev = 21;
102
+ _context2.t3 = _context2["catch"](3);
103
+ isUrlSupported = false;
104
+ case 24:
105
+ newMap = new Map(supportedUrlsMap);
106
+ newMap.set(url, isUrlSupported);
107
+ setSupportedUrlsMap(newMap);
108
+ case 27:
109
+ case "end":
110
+ return _context2.stop();
111
+ }
112
+ }, _callee2, null, [[3, 21]]);
113
+ }));
114
+ return function resolveUrl(_x) {
115
+ return _ref2.apply(this, arguments);
116
+ };
117
+ }();
118
+ useEffect(function () {
119
+ resolveUrl(url);
120
+ // before migrating from a class to a functional component, we were only reacting to changes in the url
121
+ // eslint-disable-next-line react-hooks/exhaustive-deps
122
+ }, [url, (_props$cardOptions3 = props.cardOptions) === null || _props$cardOptions3 === void 0 ? void 0 : _props$cardOptions3.provider, props.editorPluginApi]);
123
+ if (!supportedUrlsMap.get(url)) {
124
+ return null;
125
+ }
126
+ return /*#__PURE__*/React.createElement(LinkAppearanceMenu, {
127
+ url: url,
128
+ intl: intl,
129
+ editorState: editorState,
130
+ allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
131
+ allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
132
+ editorAnalyticsApi: editorAnalyticsApi,
133
+ dispatchCommand: props.dispatchCommand,
134
+ settingsConfig: props.settingsConfig
135
+ });
136
+ };
137
+ export var getHyperlinkAppearanceDropdown = function getHyperlinkAppearanceDropdown(_ref3) {
138
+ var url = _ref3.url,
139
+ intl = _ref3.intl,
140
+ editorState = _ref3.editorState,
141
+ editorAnalyticsApi = _ref3.editorAnalyticsApi,
142
+ editorPluginApi = _ref3.editorPluginApi,
143
+ settingsConfig = _ref3.settingsConfig,
144
+ cardOptions = _ref3.cardOptions;
145
+ var alignmentItemOptions = {
146
+ render: function render(props) {
147
+ if (!editorState) {
148
+ return null;
149
+ }
150
+ return /*#__PURE__*/React.createElement(HyperlinkDropdown, {
151
+ intl: intl,
152
+ editorState: editorState,
153
+ url: url,
154
+ editorAnalyticsApi: editorAnalyticsApi,
155
+ editorPluginApi: editorPluginApi,
156
+ dispatchCommand: props.dispatchCommand,
157
+ settingsConfig: settingsConfig,
158
+ cardOptions: cardOptions
159
+ });
160
+ },
161
+ width: 200,
162
+ height: 400
163
+ };
164
+ var currentAppearanceDisplayInformation = appearancePropsMap['url'];
165
+ var alignmentToolbarItem = {
166
+ id: 'hyperlink-appearance',
167
+ testId: 'hyperlink-appearance-dropdown',
168
+ type: 'dropdown',
169
+ options: alignmentItemOptions,
170
+ title: intl.formatMessage(currentAppearanceDisplayInformation.title),
171
+ iconBefore: currentAppearanceDisplayInformation.icon
172
+ };
173
+ return alignmentToolbarItem;
174
+ };
@@ -142,7 +142,7 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
142
142
  }
143
143
  }]);
144
144
  }(React.Component);
145
- var getUnavailableMessage = function getUnavailableMessage(state, intl) {
145
+ export var getUnavailableMessage = function getUnavailableMessage(state, intl) {
146
146
  try {
147
147
  var parentNode = state.selection.$from.node(1);
148
148
  var parentName = intl.formatMessage(nodeNames[parentNode.type.name]);
@@ -4,13 +4,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
4
4
  import React from 'react';
5
5
  import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
6
6
  import { appearancePropsMap, commandWithMetadata, getDropdownOption } from '@atlaskit/editor-common/card';
7
- import nodeNames, { cardMessages as messages } from '@atlaskit/editor-common/messages';
7
+ import { cardMessages as messages } from '@atlaskit/editor-common/messages';
8
8
  import { isSupportedInParent } from '@atlaskit/editor-common/utils';
9
9
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
10
10
  import { useSmartCardContext } from '@atlaskit/link-provider';
11
11
  import { ButtonItem, LinkItem, MenuGroup, Section } from '@atlaskit/menu';
12
12
  import { changeSelectedCardToLink, setSelectedCardAppearance } from '../pm-plugins/doc';
13
- var AppearanceMenu = function AppearanceMenu(_ref) {
13
+ import { getUnavailableMessage } from './LinkToolbarAppearance';
14
+ export var LinkAppearanceMenu = function LinkAppearanceMenu(_ref) {
14
15
  var _cardContext$value, _setSelectedCardAppea, _setSelectedCardAppea2, _changeSelectedCardTo, _setSelectedCardAppea3;
15
16
  var url = _ref.url,
16
17
  intl = _ref.intl,
@@ -126,7 +127,7 @@ export var getLinkAppearanceDropdown = function getLinkAppearanceDropdown(_ref2)
126
127
  settingsConfig = _ref2.settingsConfig;
127
128
  var alignmentItemOptions = {
128
129
  render: function render(props) {
129
- return /*#__PURE__*/React.createElement(AppearanceMenu, {
130
+ return /*#__PURE__*/React.createElement(LinkAppearanceMenu, {
130
131
  url: url,
131
132
  intl: intl,
132
133
  currentAppearance: currentAppearance,
@@ -153,18 +154,4 @@ export var getLinkAppearanceDropdown = function getLinkAppearanceDropdown(_ref2)
153
154
  iconBefore: currentAppearanceDisplayInformation.icon
154
155
  };
155
156
  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
157
  };
@@ -15,6 +15,7 @@ import { findDomRefAtPos, removeSelectedNode } from '@atlaskit/editor-prosemirro
15
15
  import CommentIcon from '@atlaskit/icon/core/comment';
16
16
  import CopyIcon from '@atlaskit/icon/core/copy';
17
17
  import DeleteIcon from '@atlaskit/icon/core/delete';
18
+ import LinkIcon from '@atlaskit/icon/core/link';
18
19
  import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
19
20
  import LinkExternalIcon from '@atlaskit/icon/core/link-external';
20
21
  import SettingsIcon from '@atlaskit/icon/core/settings';
@@ -32,6 +33,7 @@ import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
32
33
  import { buildEditLinkToolbar, editLinkToolbarConfig, getEditLinkCallback } from './EditLinkToolbar';
33
34
  import { EditToolbarButton } from './EditToolbarButton';
34
35
  import { HyperlinkToolbarAppearance } from './HyperlinkToolbarAppearance';
36
+ import { getHyperlinkAppearanceDropdown } from './HyperlinkToolbarAppearanceDropdown';
35
37
  import { LinkToolbarAppearance } from './LinkToolbarAppearance';
36
38
  import { getLinkAppearanceDropdown } from './LinkToolbarAppearanceDropdown';
37
39
  import { ToolbarViewedEvent } from './ToolbarViewedEvent';
@@ -322,7 +324,18 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
322
324
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
323
325
  title: intl.formatMessage(commonMessages.remove),
324
326
  onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
325
- }]) : [].concat(editItems, _toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
327
+ }]) : [{
328
+ id: 'editor.link.edit',
329
+ type: 'button',
330
+ selected: false,
331
+ metadata: metadata,
332
+ title: intl.formatMessage(linkToolbarMessages.editLink),
333
+ icon: LinkIcon,
334
+ testId: 'link-toolbar-edit-link-button',
335
+ onClick: getEditLinkCallback(editorAnalyticsApi, true)
336
+ }, {
337
+ type: 'separator'
338
+ }].concat(_toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
326
339
  id: 'editor.link.openLink',
327
340
  type: 'button',
328
341
  icon: LinkExternalIcon,
@@ -495,8 +508,6 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
495
508
  allowBlockCards: allowBlockCards,
496
509
  editorAnalyticsApi: editorAnalyticsApi,
497
510
  showUpgradeDiscoverability: showUpgradeDiscoverability,
498
- // TODO: find a way to inject editorView here
499
- // editorView: view,
500
511
  settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)
501
512
  }), {
502
513
  type: 'custom',
@@ -579,7 +590,7 @@ export var shouldRenderToolbarPulse = function shouldRenderToolbarPulse(embedEna
579
590
  return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled;
580
591
  };
581
592
  export var getStartingToolbarItems = function getStartingToolbarItems(options, api) {
582
- return function (intl, link, onEditLink, metadata) {
593
+ return function (intl, link, onEditLink, metadata, state) {
583
594
  var editLinkItem = options.allowDatasource ? [{
584
595
  type: 'custom',
585
596
  fallback: [],
@@ -609,6 +620,48 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
609
620
  }, {
610
621
  type: 'separator'
611
622
  }];
623
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
624
+ var _api$analytics2, _api$analytics3;
625
+ return [{
626
+ type: 'custom',
627
+ fallback: [],
628
+ render: function render(editorView) {
629
+ return /*#__PURE__*/React.createElement(ToolbarViewedEvent, {
630
+ key: "edit.link.menu.viewed",
631
+ url: link,
632
+ display: "url",
633
+ editorView: editorView
634
+ });
635
+ }
636
+ }, getHyperlinkAppearanceDropdown({
637
+ url: link,
638
+ intl: intl,
639
+ editorState: state,
640
+ editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
641
+ editorPluginApi: api,
642
+ cardOptions: options,
643
+ settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)
644
+ })].concat(_toConsumableArray(options !== null && options !== void 0 && options.allowDatasource ? [{
645
+ type: 'custom',
646
+ fallback: [],
647
+ render: function render(editorView) {
648
+ var _api$analytics4;
649
+ if (!editorView) {
650
+ return null;
651
+ }
652
+ return /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
653
+ intl: intl,
654
+ editorAnalyticsApi: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
655
+ url: link,
656
+ editorView: editorView,
657
+ editorState: editorView.state,
658
+ inputMethod: INPUT_METHOD.FLOATING_TB
659
+ });
660
+ }
661
+ }] : []), [{
662
+ type: 'separator'
663
+ }], editLinkItem);
664
+ }
612
665
  return [{
613
666
  type: 'custom',
614
667
  fallback: [],
@@ -624,7 +677,7 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
624
677
  type: 'custom',
625
678
  fallback: [],
626
679
  render: function render(editorView) {
627
- var _api$analytics2;
680
+ var _api$analytics5;
628
681
  if (!editorView) {
629
682
  return null;
630
683
  }
@@ -635,7 +688,7 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
635
688
  editorView: editorView,
636
689
  editorState: editorView.state,
637
690
  cardOptions: options,
638
- editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
691
+ editorAnalyticsApi: api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions,
639
692
  editorPluginApi: api
640
693
  });
641
694
  }
@@ -648,11 +701,11 @@ export var getEndingToolbarItems = function getEndingToolbarItems(options, api)
648
701
  * Require either provider to be supplied (controls link preferences)
649
702
  * Or explicit user preferences config in order to enable button
650
703
  */
651
- if (options.provider || options.userPreferencesLink) {
652
- var _api$analytics3;
704
+ if ((options.provider || options.userPreferencesLink) && editorExperiment('platform_editor_controls', 'control')) {
705
+ var _api$analytics6;
653
706
  return [{
654
707
  type: 'separator'
655
- }, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)];
708
+ }, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, options.userPreferencesLink)];
656
709
  }
657
710
  return [];
658
711
  };
@@ -0,0 +1,7 @@
1
+ import type { Command, FloatingToolbarDropdown, FloatingToolbarItem } from '@atlaskit/editor-common/types';
2
+ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
3
+ import type { HyperlinkToolbarAppearanceProps } from './HyperlinkToolbarAppearance';
4
+ export declare const getHyperlinkAppearanceDropdown: ({ url, intl, editorState, editorAnalyticsApi, editorPluginApi, settingsConfig, cardOptions, }: Omit<HyperlinkToolbarAppearanceProps, "editorState"> & {
5
+ settingsConfig: FloatingToolbarItem<Command>;
6
+ editorState?: EditorState | undefined;
7
+ }) => FloatingToolbarDropdown<Command>;
@@ -21,3 +21,4 @@ export declare class LinkToolbarAppearance extends React.Component<LinkToolbarAp
21
21
  renderDropdown: (view?: EditorView, cardContext?: CardContext) => React.JSX.Element | null;
22
22
  render(): React.JSX.Element;
23
23
  }
24
+ export declare const getUnavailableMessage: (state: EditorState, intl: IntlShape) => string;
@@ -1,5 +1,10 @@
1
+ import React from 'react';
1
2
  import type { Command, FloatingToolbarDropdown, FloatingToolbarItem } from '@atlaskit/editor-common/types';
2
- import type { LinkToolbarAppearanceProps } from './LinkToolbarAppearance';
3
+ import { type LinkToolbarAppearanceProps } from './LinkToolbarAppearance';
4
+ export declare const LinkAppearanceMenu: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, dispatchCommand, settingsConfig, }: LinkToolbarAppearanceProps & {
5
+ dispatchCommand: (command: Command) => void;
6
+ settingsConfig: FloatingToolbarItem<Command>;
7
+ }) => React.JSX.Element | null;
3
8
  export declare const getLinkAppearanceDropdown: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, settingsConfig, }: LinkToolbarAppearanceProps & {
4
9
  settingsConfig: FloatingToolbarItem<Command>;
5
10
  }) => FloatingToolbarDropdown<Command>;
@@ -2,6 +2,7 @@ import type { IntlShape } from 'react-intl-next';
2
2
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
3
  import type { CardOptions } from '@atlaskit/editor-common/card';
4
4
  import type { Command, ExtractInjectionAPI, FloatingToolbarHandler, FloatingToolbarItem, LinkPickerOptions } from '@atlaskit/editor-common/types';
5
+ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
5
6
  import type { cardPlugin } from '../index';
6
7
  import type { CardPluginOptions } from '../types';
7
8
  export declare const removeCard: (editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
@@ -13,5 +14,5 @@ export declare const shouldRenderToolbarPulse: (embedEnabled: boolean, appearanc
13
14
  export declare const getStartingToolbarItems: (options: CardPluginOptions, api?: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (intl: IntlShape, link: string, onEditLink: Command, metadata: {
14
15
  url: string;
15
16
  title: string;
16
- }) => FloatingToolbarItem<Command>[];
17
+ }, state?: EditorState) => FloatingToolbarItem<Command>[];
17
18
  export declare const getEndingToolbarItems: (options: CardPluginOptions, api?: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (intl: IntlShape, link: string) => FloatingToolbarItem<Command>[];
@@ -0,0 +1,7 @@
1
+ import type { Command, FloatingToolbarDropdown, FloatingToolbarItem } from '@atlaskit/editor-common/types';
2
+ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
3
+ import type { HyperlinkToolbarAppearanceProps } from './HyperlinkToolbarAppearance';
4
+ export declare const getHyperlinkAppearanceDropdown: ({ url, intl, editorState, editorAnalyticsApi, editorPluginApi, settingsConfig, cardOptions, }: Omit<HyperlinkToolbarAppearanceProps, "editorState"> & {
5
+ settingsConfig: FloatingToolbarItem<Command>;
6
+ editorState?: EditorState | undefined;
7
+ }) => FloatingToolbarDropdown<Command>;
@@ -21,3 +21,4 @@ export declare class LinkToolbarAppearance extends React.Component<LinkToolbarAp
21
21
  renderDropdown: (view?: EditorView, cardContext?: CardContext) => React.JSX.Element | null;
22
22
  render(): React.JSX.Element;
23
23
  }
24
+ export declare const getUnavailableMessage: (state: EditorState, intl: IntlShape) => string;
@@ -1,5 +1,10 @@
1
+ import React from 'react';
1
2
  import type { Command, FloatingToolbarDropdown, FloatingToolbarItem } from '@atlaskit/editor-common/types';
2
- import type { LinkToolbarAppearanceProps } from './LinkToolbarAppearance';
3
+ import { type LinkToolbarAppearanceProps } from './LinkToolbarAppearance';
4
+ export declare const LinkAppearanceMenu: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, dispatchCommand, settingsConfig, }: LinkToolbarAppearanceProps & {
5
+ dispatchCommand: (command: Command) => void;
6
+ settingsConfig: FloatingToolbarItem<Command>;
7
+ }) => React.JSX.Element | null;
3
8
  export declare const getLinkAppearanceDropdown: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, settingsConfig, }: LinkToolbarAppearanceProps & {
4
9
  settingsConfig: FloatingToolbarItem<Command>;
5
10
  }) => FloatingToolbarDropdown<Command>;
@@ -2,6 +2,7 @@ import type { IntlShape } from 'react-intl-next';
2
2
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
3
  import type { CardOptions } from '@atlaskit/editor-common/card';
4
4
  import type { Command, ExtractInjectionAPI, FloatingToolbarHandler, FloatingToolbarItem, LinkPickerOptions } from '@atlaskit/editor-common/types';
5
+ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
5
6
  import type { cardPlugin } from '../index';
6
7
  import type { CardPluginOptions } from '../types';
7
8
  export declare const removeCard: (editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
@@ -13,5 +14,5 @@ export declare const shouldRenderToolbarPulse: (embedEnabled: boolean, appearanc
13
14
  export declare const getStartingToolbarItems: (options: CardPluginOptions, api?: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (intl: IntlShape, link: string, onEditLink: Command, metadata: {
14
15
  url: string;
15
16
  title: string;
16
- }) => FloatingToolbarItem<Command>[];
17
+ }, state?: EditorState) => FloatingToolbarItem<Command>[];
17
18
  export declare const getEndingToolbarItems: (options: CardPluginOptions, api?: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (intl: IntlShape, link: string) => FloatingToolbarItem<Command>[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "5.1.1",
3
+ "version": "5.2.1",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/analytics-next": "^11.0.0",
38
38
  "@atlaskit/button": "^21.1.0",
39
39
  "@atlaskit/custom-steps": "^0.11.0",
40
- "@atlaskit/editor-common": "^101.0.0",
40
+ "@atlaskit/editor-common": "^101.1.0",
41
41
  "@atlaskit/editor-plugin-analytics": "^2.1.0",
42
42
  "@atlaskit/editor-plugin-base": "^2.3.0",
43
43
  "@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -57,11 +57,11 @@
57
57
  "@atlaskit/link-datasource": "^3.22.0",
58
58
  "@atlaskit/linking-common": "^8.0.0",
59
59
  "@atlaskit/linking-types": "^9.6.0",
60
- "@atlaskit/menu": "3.1.0",
60
+ "@atlaskit/menu": "3.1.1",
61
61
  "@atlaskit/platform-feature-flags": "^1.1.0",
62
62
  "@atlaskit/primitives": "^14.1.0",
63
- "@atlaskit/smart-card": "^35.1.0",
64
- "@atlaskit/theme": "^17.0.0",
63
+ "@atlaskit/smart-card": "^35.2.0",
64
+ "@atlaskit/theme": "^18.0.0",
65
65
  "@atlaskit/tmp-editor-statsig": "^3.4.0",
66
66
  "@atlaskit/tokens": "^4.3.0",
67
67
  "@babel/runtime": "^7.0.0",