@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 +22 -0
- package/dist/cjs/ui/HyperlinkToolbarAppearanceDropdown.js +184 -0
- package/dist/cjs/ui/LinkToolbarAppearance.js +2 -2
- package/dist/cjs/ui/LinkToolbarAppearanceDropdown.js +7 -23
- package/dist/cjs/ui/toolbar.js +62 -9
- package/dist/es2019/ui/HyperlinkToolbarAppearanceDropdown.js +108 -0
- package/dist/es2019/ui/LinkToolbarAppearance.js +1 -1
- package/dist/es2019/ui/LinkToolbarAppearanceDropdown.js +4 -17
- package/dist/es2019/ui/toolbar.js +60 -9
- package/dist/esm/ui/HyperlinkToolbarAppearanceDropdown.js +174 -0
- package/dist/esm/ui/LinkToolbarAppearance.js +1 -1
- package/dist/esm/ui/LinkToolbarAppearanceDropdown.js +4 -17
- package/dist/esm/ui/toolbar.js +62 -9
- package/dist/types/ui/HyperlinkToolbarAppearanceDropdown.d.ts +7 -0
- package/dist/types/ui/LinkToolbarAppearance.d.ts +1 -0
- package/dist/types/ui/LinkToolbarAppearanceDropdown.d.ts +6 -1
- package/dist/types/ui/toolbar.d.ts +2 -1
- package/dist/types-ts4.5/ui/HyperlinkToolbarAppearanceDropdown.d.ts +7 -0
- package/dist/types-ts4.5/ui/LinkToolbarAppearance.d.ts +1 -0
- package/dist/types-ts4.5/ui/LinkToolbarAppearanceDropdown.d.ts +6 -1
- package/dist/types-ts4.5/ui/toolbar.d.ts +2 -1
- package/package.json +5 -5
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 =
|
|
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
|
-
|
|
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
|
|
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(
|
|
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
|
};
|
package/dist/cjs/ui/toolbar.js
CHANGED
|
@@ -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
|
-
}]) : [
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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
|
|
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
|
-
|
|
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(
|
|
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
|
-
}] : [
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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
|
|
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
|
-
|
|
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(
|
|
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
|
};
|
package/dist/esm/ui/toolbar.js
CHANGED
|
@@ -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
|
-
}]) : [
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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
|
|
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
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
64
|
-
"@atlaskit/theme": "^
|
|
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",
|