@atlaskit/link-picker 0.0.2 → 0.8.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 +152 -0
- package/README.md +27 -5
- package/dist/cjs/browser.js +39 -0
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/messages.js +102 -0
- package/dist/cjs/styles.js +90 -0
- package/dist/cjs/transformTimeStamp.js +55 -0
- package/dist/cjs/types.js +5 -0
- package/dist/cjs/ui/LinkSearchList.js +112 -0
- package/dist/cjs/ui/LinkSearchListItem.js +101 -0
- package/dist/cjs/ui/PanelTextInput.js +119 -0
- package/dist/cjs/ui/announcer.js +64 -0
- package/dist/cjs/ui/link-picker.js +582 -0
- package/dist/cjs/url.js +104 -0
- package/dist/cjs/utils.js +40 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/browser.js +34 -0
- package/dist/es2019/index.js +1 -1
- package/dist/es2019/messages.js +93 -0
- package/dist/es2019/styles.js +93 -0
- package/dist/es2019/transformTimeStamp.js +41 -0
- package/dist/es2019/types.js +1 -0
- package/dist/es2019/ui/LinkSearchList.js +65 -0
- package/dist/es2019/ui/LinkSearchListItem.js +88 -0
- package/dist/es2019/ui/PanelTextInput.js +93 -0
- package/dist/es2019/ui/announcer.js +38 -0
- package/dist/es2019/ui/link-picker.js +481 -0
- package/dist/es2019/url.js +88 -0
- package/dist/es2019/utils.js +24 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/browser.js +34 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/messages.js +93 -0
- package/dist/esm/styles.js +46 -0
- package/dist/esm/transformTimeStamp.js +41 -0
- package/dist/esm/types.js +1 -0
- package/dist/esm/ui/LinkSearchList.js +87 -0
- package/dist/esm/ui/LinkSearchListItem.js +88 -0
- package/dist/esm/ui/PanelTextInput.js +93 -0
- package/dist/esm/ui/announcer.js +51 -0
- package/dist/esm/ui/link-picker.js +560 -0
- package/dist/esm/url.js +90 -0
- package/dist/esm/utils.js +24 -0
- package/dist/esm/version.json +1 -1
- package/dist/types/browser.d.ts +15 -0
- package/dist/types/index.d.ts +3 -1
- package/dist/types/messages.d.ts +92 -0
- package/dist/types/styles.d.ts +18 -0
- package/dist/types/transformTimeStamp.d.ts +3 -0
- package/dist/types/types.d.ts +37 -0
- package/dist/types/ui/LinkSearchList.d.ts +20 -0
- package/dist/types/ui/LinkSearchListItem.d.ts +17 -0
- package/dist/types/ui/PanelTextInput.d.ts +17 -0
- package/dist/types/ui/announcer.d.ts +22 -0
- package/dist/types/ui/link-picker.d.ts +51 -0
- package/dist/types/url.d.ts +5 -0
- package/dist/types/utils.d.ts +4 -0
- package/example-helpers/flight-deck/_manifest.json +9 -0
- package/example-helpers/flight-deck/mockFDResponse.json +133 -0
- package/example-helpers/mock-data.ts +316 -0
- package/example-helpers/providers.ts +39 -0
- package/package.json +35 -6
- package/dist/cjs/link-picker.js +0 -12
- package/dist/es2019/link-picker.js +0 -3
- package/dist/esm/link-picker.js +0 -3
- package/dist/types/link-picker.d.ts +0 -1
|
@@ -0,0 +1,560 @@
|
|
|
1
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
4
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
5
|
+
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
6
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
7
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
8
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
9
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
10
|
+
|
|
11
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
12
|
+
|
|
13
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
14
|
+
|
|
15
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
16
|
+
|
|
17
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
18
|
+
|
|
19
|
+
/** @jsx jsx */
|
|
20
|
+
import React, { PureComponent } from 'react';
|
|
21
|
+
import { jsx } from '@emotion/core';
|
|
22
|
+
import { injectIntl } from 'react-intl-next';
|
|
23
|
+
import { messages } from '../messages';
|
|
24
|
+
import PanelTextInput from './PanelTextInput';
|
|
25
|
+
import LinkSearchList from './LinkSearchList';
|
|
26
|
+
import { normalizeUrl, isSafeUrl } from '../url';
|
|
27
|
+
import { recentListStyles, Container, SearchIconWrapper, ListTitleStyles } from '../styles';
|
|
28
|
+
import { browser } from '../browser';
|
|
29
|
+
import { transformTimeStamp } from '../transformTimeStamp';
|
|
30
|
+
import Announcer from './announcer';
|
|
31
|
+
import Button, { ButtonGroup } from '@atlaskit/button';
|
|
32
|
+
import { FormFooter } from '@atlaskit/form';
|
|
33
|
+
import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
|
|
34
|
+
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
35
|
+
export var RECENT_SEARCH_LIST_SIZE = 5;
|
|
36
|
+
|
|
37
|
+
var LinkPicker = /*#__PURE__*/function (_PureComponent) {
|
|
38
|
+
_inherits(LinkPicker, _PureComponent);
|
|
39
|
+
|
|
40
|
+
var _super = _createSuper(LinkPicker);
|
|
41
|
+
|
|
42
|
+
function LinkPicker(props) {
|
|
43
|
+
var _this;
|
|
44
|
+
|
|
45
|
+
_classCallCheck(this, LinkPicker);
|
|
46
|
+
|
|
47
|
+
_this = _super.call(this, props);
|
|
48
|
+
|
|
49
|
+
_defineProperty(_assertThisInitialized(_this), "wrapperRef", /*#__PURE__*/React.createRef());
|
|
50
|
+
|
|
51
|
+
_defineProperty(_assertThisInitialized(_this), "queryVersion", 0);
|
|
52
|
+
|
|
53
|
+
_defineProperty(_assertThisInitialized(_this), "updateInput", /*#__PURE__*/function () {
|
|
54
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(input) {
|
|
55
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
56
|
+
while (1) {
|
|
57
|
+
switch (_context.prev = _context.next) {
|
|
58
|
+
case 0:
|
|
59
|
+
if (!(input.length && isSafeUrl(input))) {
|
|
60
|
+
_context.next = 2;
|
|
61
|
+
break;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
return _context.abrupt("return", _this.setState({
|
|
65
|
+
url: input,
|
|
66
|
+
selectedIndex: -1,
|
|
67
|
+
items: [],
|
|
68
|
+
isLoading: false,
|
|
69
|
+
invalidUrl: null
|
|
70
|
+
}));
|
|
71
|
+
|
|
72
|
+
case 2:
|
|
73
|
+
return _context.abrupt("return", _this.setState({
|
|
74
|
+
url: input,
|
|
75
|
+
// Unset selection on any input change
|
|
76
|
+
selectedIndex: -1,
|
|
77
|
+
invalidUrl: null
|
|
78
|
+
}, function () {
|
|
79
|
+
_this.updateResults();
|
|
80
|
+
}));
|
|
81
|
+
|
|
82
|
+
case 3:
|
|
83
|
+
case "end":
|
|
84
|
+
return _context.stop();
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}, _callee);
|
|
88
|
+
}));
|
|
89
|
+
|
|
90
|
+
return function (_x) {
|
|
91
|
+
return _ref.apply(this, arguments);
|
|
92
|
+
};
|
|
93
|
+
}());
|
|
94
|
+
|
|
95
|
+
_defineProperty(_assertThisInitialized(_this), "createClearHandler", function (field) {
|
|
96
|
+
return function () {
|
|
97
|
+
switch (field) {
|
|
98
|
+
case 'url':
|
|
99
|
+
{
|
|
100
|
+
_this.updateInput('');
|
|
101
|
+
|
|
102
|
+
break;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
case 'displayText':
|
|
106
|
+
{
|
|
107
|
+
_this.setState(_defineProperty({}, field, ''));
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
_defineProperty(_assertThisInitialized(_this), "getScreenReaderText", function () {
|
|
114
|
+
var intl = _this.props.intl;
|
|
115
|
+
var _this$state = _this.state,
|
|
116
|
+
items = _this$state.items,
|
|
117
|
+
selectedIndex = _this$state.selectedIndex;
|
|
118
|
+
|
|
119
|
+
if (items.length && selectedIndex > -1) {
|
|
120
|
+
var _items$selectedIndex = items[selectedIndex],
|
|
121
|
+
name = _items$selectedIndex.name,
|
|
122
|
+
container = _items$selectedIndex.container,
|
|
123
|
+
lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
|
|
124
|
+
lastViewedDate = _items$selectedIndex.lastViewedDate;
|
|
125
|
+
var date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
|
|
126
|
+
return "".concat(name, ", ").concat(container, ", ").concat(date === null || date === void 0 ? void 0 : date.pageAction, " ").concat(date === null || date === void 0 ? void 0 : date.dateString, " ").concat((date === null || date === void 0 ? void 0 : date.timeSince) || '');
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
_defineProperty(_assertThisInitialized(_this), "isUrlPopulatedWithSelectedItem", function () {
|
|
131
|
+
/**
|
|
132
|
+
* When we use ArrowKey to navigate through result items,
|
|
133
|
+
* the URL field will be populated with the content of
|
|
134
|
+
* selected item.
|
|
135
|
+
* This function will check if the URL field is populated
|
|
136
|
+
* with selected item.
|
|
137
|
+
* It can be useful to detect whether we want to insert a
|
|
138
|
+
* smartlink or a hyperlink with customized title
|
|
139
|
+
*/
|
|
140
|
+
var _this$state2 = _this.state,
|
|
141
|
+
items = _this$state2.items,
|
|
142
|
+
selectedIndex = _this$state2.selectedIndex,
|
|
143
|
+
url = _this$state2.url;
|
|
144
|
+
var selectedItem = items[selectedIndex];
|
|
145
|
+
|
|
146
|
+
if (selectedItem && selectedItem.url === url) {
|
|
147
|
+
return true;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
return false;
|
|
151
|
+
});
|
|
152
|
+
|
|
153
|
+
_defineProperty(_assertThisInitialized(_this), "handleSelected", function (objectId) {
|
|
154
|
+
var items = _this.state.items;
|
|
155
|
+
var selectedItem = items.find(function (item) {
|
|
156
|
+
return item.objectId === objectId;
|
|
157
|
+
});
|
|
158
|
+
|
|
159
|
+
if (selectedItem) {
|
|
160
|
+
var url = selectedItem.url,
|
|
161
|
+
name = selectedItem.name;
|
|
162
|
+
|
|
163
|
+
_this.handleInsert(url, name, 'typeAhead');
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
|
|
167
|
+
_defineProperty(_assertThisInitialized(_this), "handleInsert", function (url, title, inputType) {
|
|
168
|
+
var onSubmit = _this.props.onSubmit;
|
|
169
|
+
var _this$state3 = _this.state,
|
|
170
|
+
rawUrl = _this$state3.url,
|
|
171
|
+
displayText = _this$state3.displayText;
|
|
172
|
+
|
|
173
|
+
if (onSubmit) {
|
|
174
|
+
onSubmit(_objectSpread({
|
|
175
|
+
url: url,
|
|
176
|
+
displayText: displayText || null,
|
|
177
|
+
title: title || null,
|
|
178
|
+
meta: {
|
|
179
|
+
inputMethod: inputType
|
|
180
|
+
}
|
|
181
|
+
}, inputType === 'manual' ? {
|
|
182
|
+
rawUrl: rawUrl
|
|
183
|
+
} : {}));
|
|
184
|
+
}
|
|
185
|
+
});
|
|
186
|
+
|
|
187
|
+
_defineProperty(_assertThisInitialized(_this), "handleMouseEnterResultItem", function (objectId) {
|
|
188
|
+
var items = _this.state.items;
|
|
189
|
+
var index = findIndex(items, function (item) {
|
|
190
|
+
return item.objectId === objectId;
|
|
191
|
+
});
|
|
192
|
+
|
|
193
|
+
_this.setState({
|
|
194
|
+
activeIndex: index
|
|
195
|
+
});
|
|
196
|
+
});
|
|
197
|
+
|
|
198
|
+
_defineProperty(_assertThisInitialized(_this), "handleMouseLeaveResultItem", function (objectId) {
|
|
199
|
+
var _this$state4 = _this.state,
|
|
200
|
+
items = _this$state4.items,
|
|
201
|
+
activeIndex = _this$state4.activeIndex;
|
|
202
|
+
var index = findIndex(items, function (item) {
|
|
203
|
+
return item.objectId === objectId;
|
|
204
|
+
}); // This is to avoid updating index that was set by other mouseenter event
|
|
205
|
+
|
|
206
|
+
if (activeIndex === index) {
|
|
207
|
+
_this.setState({
|
|
208
|
+
activeIndex: -1
|
|
209
|
+
});
|
|
210
|
+
}
|
|
211
|
+
});
|
|
212
|
+
|
|
213
|
+
_defineProperty(_assertThisInitialized(_this), "handleSubmit", function () {
|
|
214
|
+
var _this$state5 = _this.state,
|
|
215
|
+
url = _this$state5.url,
|
|
216
|
+
selectedIndex = _this$state5.selectedIndex,
|
|
217
|
+
items = _this$state5.items;
|
|
218
|
+
var selectedItem = items[selectedIndex];
|
|
219
|
+
|
|
220
|
+
if (_this.isUrlPopulatedWithSelectedItem()) {
|
|
221
|
+
_this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
|
|
222
|
+
} else if (url.length > 0) {
|
|
223
|
+
var normalized = normalizeUrl(url);
|
|
224
|
+
|
|
225
|
+
if (normalized) {
|
|
226
|
+
_this.handleInsert(normalized, null, 'manual');
|
|
227
|
+
} else {
|
|
228
|
+
var intl = _this.props.intl;
|
|
229
|
+
var linkInvalid = intl.formatMessage(messages.linkInvalid);
|
|
230
|
+
|
|
231
|
+
_this.setState({
|
|
232
|
+
invalidUrl: linkInvalid
|
|
233
|
+
});
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
});
|
|
237
|
+
|
|
238
|
+
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
|
|
239
|
+
var _this$state6 = _this.state,
|
|
240
|
+
items = _this$state6.items,
|
|
241
|
+
activeIndex = _this$state6.activeIndex;
|
|
242
|
+
var keyCode = event.keyCode;
|
|
243
|
+
var KEY_CODE_ARROW_DOWN = 40;
|
|
244
|
+
var KEY_CODE_ARROW_UP = 38;
|
|
245
|
+
|
|
246
|
+
if (!items || !items.length) {
|
|
247
|
+
return;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
var updatedIndex = activeIndex;
|
|
251
|
+
|
|
252
|
+
switch (keyCode) {
|
|
253
|
+
case KEY_CODE_ARROW_DOWN:
|
|
254
|
+
// down
|
|
255
|
+
event.preventDefault();
|
|
256
|
+
updatedIndex = (activeIndex + 1) % items.length;
|
|
257
|
+
break;
|
|
258
|
+
|
|
259
|
+
case KEY_CODE_ARROW_UP:
|
|
260
|
+
// up
|
|
261
|
+
event.preventDefault();
|
|
262
|
+
updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
|
|
263
|
+
break;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && items[updatedIndex]) {
|
|
267
|
+
_this.setState({
|
|
268
|
+
activeIndex: updatedIndex,
|
|
269
|
+
selectedIndex: updatedIndex,
|
|
270
|
+
url: items[updatedIndex].url,
|
|
271
|
+
invalidUrl: null
|
|
272
|
+
});
|
|
273
|
+
}
|
|
274
|
+
});
|
|
275
|
+
|
|
276
|
+
_defineProperty(_assertThisInitialized(_this), "handleCancel", function () {
|
|
277
|
+
var onCancel = _this.props.onCancel;
|
|
278
|
+
|
|
279
|
+
if (onCancel) {
|
|
280
|
+
onCancel();
|
|
281
|
+
}
|
|
282
|
+
});
|
|
283
|
+
|
|
284
|
+
_defineProperty(_assertThisInitialized(_this), "updateTextInput", function (displayText) {
|
|
285
|
+
_this.setState({
|
|
286
|
+
displayText: displayText
|
|
287
|
+
});
|
|
288
|
+
});
|
|
289
|
+
|
|
290
|
+
_this.state = {
|
|
291
|
+
selectedIndex: -1,
|
|
292
|
+
activeIndex: -1,
|
|
293
|
+
isLoading: false,
|
|
294
|
+
url: normalizeUrl(props.url) || '',
|
|
295
|
+
displayText: props.displayText || '',
|
|
296
|
+
items: [],
|
|
297
|
+
invalidUrl: null
|
|
298
|
+
};
|
|
299
|
+
/* Cache functions */
|
|
300
|
+
|
|
301
|
+
_this.handleClearUrl = _this.createClearHandler('url');
|
|
302
|
+
_this.handleClearDisplayText = _this.createClearHandler('displayText');
|
|
303
|
+
return _this;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
_createClass(LinkPicker, [{
|
|
307
|
+
key: "componentDidMount",
|
|
308
|
+
value: function componentDidMount() {
|
|
309
|
+
this.loadInitialLinkSearchResult();
|
|
310
|
+
}
|
|
311
|
+
}, {
|
|
312
|
+
key: "loadInitialLinkSearchResult",
|
|
313
|
+
value: function loadInitialLinkSearchResult() {
|
|
314
|
+
var url = this.state.url;
|
|
315
|
+
|
|
316
|
+
if (!url) {
|
|
317
|
+
this.updateResults();
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
}, {
|
|
321
|
+
key: "getActivePlugin",
|
|
322
|
+
value: function getActivePlugin() {
|
|
323
|
+
if (!this.props.plugins || this.props.plugins.length === 0) {
|
|
324
|
+
return null;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
return this.props.plugins[0];
|
|
328
|
+
}
|
|
329
|
+
/**
|
|
330
|
+
* Interface between link picker and plugins to update results
|
|
331
|
+
*/
|
|
332
|
+
|
|
333
|
+
}, {
|
|
334
|
+
key: "updateResults",
|
|
335
|
+
value: function () {
|
|
336
|
+
var _updateResults = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
|
|
337
|
+
var queryVersion, activePlugin, updates, _yield$updates$next, done, value;
|
|
338
|
+
|
|
339
|
+
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
340
|
+
while (1) {
|
|
341
|
+
switch (_context2.prev = _context2.next) {
|
|
342
|
+
case 0:
|
|
343
|
+
queryVersion = ++this.queryVersion;
|
|
344
|
+
activePlugin = this.getActivePlugin();
|
|
345
|
+
|
|
346
|
+
if (activePlugin) {
|
|
347
|
+
_context2.next = 4;
|
|
348
|
+
break;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
return _context2.abrupt("return");
|
|
352
|
+
|
|
353
|
+
case 4:
|
|
354
|
+
updates = activePlugin.resolve({
|
|
355
|
+
query: this.state.url
|
|
356
|
+
});
|
|
357
|
+
this.setState({
|
|
358
|
+
isLoading: true,
|
|
359
|
+
items: []
|
|
360
|
+
});
|
|
361
|
+
_context2.prev = 6;
|
|
362
|
+
|
|
363
|
+
case 7:
|
|
364
|
+
if (!(queryVersion === this.queryVersion)) {
|
|
365
|
+
_context2.next = 20;
|
|
366
|
+
break;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
_context2.next = 10;
|
|
370
|
+
return updates.next();
|
|
371
|
+
|
|
372
|
+
case 10:
|
|
373
|
+
_yield$updates$next = _context2.sent;
|
|
374
|
+
done = _yield$updates$next.done;
|
|
375
|
+
value = _yield$updates$next.value;
|
|
376
|
+
|
|
377
|
+
if (!(queryVersion !== this.queryVersion)) {
|
|
378
|
+
_context2.next = 15;
|
|
379
|
+
break;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
return _context2.abrupt("return");
|
|
383
|
+
|
|
384
|
+
case 15:
|
|
385
|
+
this.setState({
|
|
386
|
+
items: limit(value),
|
|
387
|
+
isLoading: !done
|
|
388
|
+
});
|
|
389
|
+
|
|
390
|
+
if (!done) {
|
|
391
|
+
_context2.next = 18;
|
|
392
|
+
break;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
return _context2.abrupt("return");
|
|
396
|
+
|
|
397
|
+
case 18:
|
|
398
|
+
_context2.next = 7;
|
|
399
|
+
break;
|
|
400
|
+
|
|
401
|
+
case 20:
|
|
402
|
+
_context2.next = 25;
|
|
403
|
+
break;
|
|
404
|
+
|
|
405
|
+
case 22:
|
|
406
|
+
_context2.prev = 22;
|
|
407
|
+
_context2.t0 = _context2["catch"](6);
|
|
408
|
+
this.setState({
|
|
409
|
+
isLoading: false
|
|
410
|
+
});
|
|
411
|
+
|
|
412
|
+
case 25:
|
|
413
|
+
case "end":
|
|
414
|
+
return _context2.stop();
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
}, _callee2, this, [[6, 22]]);
|
|
418
|
+
}));
|
|
419
|
+
|
|
420
|
+
function updateResults() {
|
|
421
|
+
return _updateResults.apply(this, arguments);
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
return updateResults;
|
|
425
|
+
}()
|
|
426
|
+
}, {
|
|
427
|
+
key: "render",
|
|
428
|
+
value: function render() {
|
|
429
|
+
var _this$state7 = this.state,
|
|
430
|
+
items = _this$state7.items,
|
|
431
|
+
isLoading = _this$state7.isLoading,
|
|
432
|
+
activeIndex = _this$state7.activeIndex,
|
|
433
|
+
selectedIndex = _this$state7.selectedIndex,
|
|
434
|
+
url = _this$state7.url,
|
|
435
|
+
displayText = _this$state7.displayText;
|
|
436
|
+
var formatMessage = this.props.intl.formatMessage;
|
|
437
|
+
var activePlugin = this.getActivePlugin();
|
|
438
|
+
var linkPlaceHolder = formatMessage(activePlugin ? messages.placeholder : messages.linkPlaceholder);
|
|
439
|
+
var linkLabel = formatMessage(messages.linkLabel);
|
|
440
|
+
var linkTextLabel = formatMessage(messages.linkTextLabel);
|
|
441
|
+
var linkTextPlaceHolder = formatMessage(messages.linkTextPlaceholder);
|
|
442
|
+
var screenReaderDescriptionId = 'search-recent-links-field-description';
|
|
443
|
+
var linkSearchListId = 'link-picker-search-list';
|
|
444
|
+
var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
|
|
445
|
+
// as the Aria design pattern for combobox does not work in this case
|
|
446
|
+
// for details: https://a11y-internal.atlassian.net/browse/AK-740
|
|
447
|
+
|
|
448
|
+
var screenReaderText = browser.safari && this.getScreenReaderText();
|
|
449
|
+
var searchIcon = activePlugin && jsx(SearchIconWrapper, {
|
|
450
|
+
"data-testid": "link-picker-search-icon"
|
|
451
|
+
}, jsx(EditorSearchIcon, {
|
|
452
|
+
size: "medium",
|
|
453
|
+
label: ''
|
|
454
|
+
}));
|
|
455
|
+
return jsx("div", {
|
|
456
|
+
"data-testid": "link-picker",
|
|
457
|
+
className: "recent-list",
|
|
458
|
+
css: recentListStyles
|
|
459
|
+
}, jsx(Container, {
|
|
460
|
+
innerRef: this.wrapperRef
|
|
461
|
+
}, screenReaderText && jsx(Announcer, {
|
|
462
|
+
ariaLive: "assertive",
|
|
463
|
+
text: screenReaderText,
|
|
464
|
+
ariaRelevant: "additions",
|
|
465
|
+
delay: 250
|
|
466
|
+
}), jsx(VisuallyHidden, null, jsx("span", {
|
|
467
|
+
"aria-hidden": "true",
|
|
468
|
+
id: screenReaderDescriptionId
|
|
469
|
+
}, formatMessage(messages.searchLinkAriaDescription))), jsx(PanelTextInput, {
|
|
470
|
+
name: "link",
|
|
471
|
+
testId: "link-url",
|
|
472
|
+
role: "combobox",
|
|
473
|
+
label: linkLabel,
|
|
474
|
+
placeholder: linkPlaceHolder,
|
|
475
|
+
value: url,
|
|
476
|
+
autoFocus: true,
|
|
477
|
+
autoComplete: "off",
|
|
478
|
+
elemBeforeInput: searchIcon,
|
|
479
|
+
onSubmit: this.handleSubmit,
|
|
480
|
+
onChange: this.updateInput,
|
|
481
|
+
onKeyDown: this.handleKeyDown,
|
|
482
|
+
onClear: this.handleClearUrl,
|
|
483
|
+
error: this.state.invalidUrl,
|
|
484
|
+
clearLabel: formatMessage(messages.clearLink),
|
|
485
|
+
"aria-controls": linkSearchListId,
|
|
486
|
+
"aria-autocomplete": "list",
|
|
487
|
+
"aria-activedescendant": ariaActiveDescendant,
|
|
488
|
+
"aria-describedby": screenReaderDescriptionId,
|
|
489
|
+
"aria-expanded": true
|
|
490
|
+
}), jsx(PanelTextInput, {
|
|
491
|
+
name: "link-text",
|
|
492
|
+
testId: "link-text",
|
|
493
|
+
autoComplete: "off",
|
|
494
|
+
label: linkTextLabel,
|
|
495
|
+
placeholder: linkTextPlaceHolder,
|
|
496
|
+
"aria-label": formatMessage(messages.linkAriaLabel),
|
|
497
|
+
value: displayText,
|
|
498
|
+
onSubmit: this.handleSubmit,
|
|
499
|
+
onKeyDown: this.handleKeyDown,
|
|
500
|
+
onChange: this.updateTextInput,
|
|
501
|
+
onClear: this.handleClearDisplayText,
|
|
502
|
+
clearLabel: formatMessage(messages.clearText)
|
|
503
|
+
}), !!items.length && jsx("div", {
|
|
504
|
+
css: ListTitleStyles,
|
|
505
|
+
id: "link-picker-list-title",
|
|
506
|
+
"data-testid": "link-picker-list-title"
|
|
507
|
+
}, formatMessage(this.state.url ? messages.titleResults : messages.titleRecentlyViewed)), jsx(VisuallyHidden, null, jsx("span", {
|
|
508
|
+
"aria-live": "polite",
|
|
509
|
+
"aria-atomic": "true",
|
|
510
|
+
id: "fabric.smartcard.linkpicker.suggested.results"
|
|
511
|
+
}, url && formatMessage(messages.searchLinkResults, {
|
|
512
|
+
count: items.length
|
|
513
|
+
}))), jsx(LinkSearchList, {
|
|
514
|
+
ariaLabelledBy: "link-picker-list-title",
|
|
515
|
+
ariaControls: "fabric.smartcard.linkpicker.suggested.results",
|
|
516
|
+
id: linkSearchListId,
|
|
517
|
+
role: "listbox",
|
|
518
|
+
items: items,
|
|
519
|
+
isLoading: isLoading,
|
|
520
|
+
selectedIndex: selectedIndex,
|
|
521
|
+
activeIndex: activeIndex,
|
|
522
|
+
onSelect: this.handleSelected,
|
|
523
|
+
onMouseEnter: this.handleMouseEnterResultItem,
|
|
524
|
+
onMouseLeave: this.handleMouseLeaveResultItem
|
|
525
|
+
}), jsx(FormFooter, {
|
|
526
|
+
align: "end"
|
|
527
|
+
}, jsx(ButtonGroup, null, jsx(Button, {
|
|
528
|
+
appearance: "default",
|
|
529
|
+
onClick: this.handleCancel,
|
|
530
|
+
testId: "link-picker-cancel-button"
|
|
531
|
+
}, formatMessage(messages.cancelButton)), jsx(Button, {
|
|
532
|
+
type: "submit",
|
|
533
|
+
appearance: "primary",
|
|
534
|
+
onClick: this.handleSubmit,
|
|
535
|
+
testId: "link-picker-insert-button"
|
|
536
|
+
}, formatMessage(messages.insertButton))))));
|
|
537
|
+
}
|
|
538
|
+
}]);
|
|
539
|
+
|
|
540
|
+
return LinkPicker;
|
|
541
|
+
}(PureComponent);
|
|
542
|
+
|
|
543
|
+
function findIndex(array, predicate) {
|
|
544
|
+
var index = -1;
|
|
545
|
+
array.some(function (item, i) {
|
|
546
|
+
if (predicate(item)) {
|
|
547
|
+
index = i;
|
|
548
|
+
return true;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
return false;
|
|
552
|
+
});
|
|
553
|
+
return index;
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
function limit(items) {
|
|
557
|
+
return items.slice(0, RECENT_SEARCH_LIST_SIZE);
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
export var LinkPickerWithIntl = injectIntl(LinkPicker);
|
package/dist/esm/url.js
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import LinkifyIt from 'linkify-it';
|
|
2
|
+
var linkify = LinkifyIt();
|
|
3
|
+
linkify.add('sourcetree:', 'http:');
|
|
4
|
+
var tlds = 'biz|com|edu|gov|net|org|pro|web|xxx|aero|asia|coop|info|museum|name|shop|рф'.split('|');
|
|
5
|
+
var tlds2Char = 'a[cdefgilmnoqrtuwxz]|b[abdefghijmnorstvwyz]|c[acdfghiklmnoruvwxyz]|d[ejkmoz]|e[cegrstu]|f[ijkmor]|g[abdefghilmnpqrstuwy]|h[kmnrtu]|i[delmnoqrst]|j[emop]|k[eghimnprwyz]|l[abcikrstuvy]|m[acdeghklmnopqrtuvwxyz]|n[acefgilopruz]|om|p[aefghkmnrtw]|qa|r[eosuw]|s[abcdegijklmnrtuvxyz]|t[cdfghjklmnortvwz]|u[agksyz]|v[aceginu]|w[fs]|y[et]|z[amw]';
|
|
6
|
+
tlds.push(tlds2Char);
|
|
7
|
+
linkify.tlds(tlds, false);
|
|
8
|
+
var whitelistedURLPatterns = [/^https?:\/\/[^\s]*$/im, /^ftps?:\/\//im, /^\//im, /^mailto:/im, /^skype:/im, /^callto:[^\s]*$/im, /^facetime:[^\s]*$/im, /^git:/im, /^irc6?:/im, /^news:/im, /^nntp:/im, /^feed:/im, /^cvs:/im, /^svn:/im, /^mvn:/im, /^ssh:/im, /^scp:\/\//im, /^sftp:\/\//im, /^itms:/im, /^notes:/im, /^hipchat:\/\//im, /^sourcetree:/im, /^urn:/im, /^tel:/im, /^xmpp:/im, /^telnet:/im, /^vnc:/im, /^rdp:/im, /^whatsapp:/im, /^slack:/im, /^sips?:/im, /^magnet:/im, /^foo:/im, /^#/im];
|
|
9
|
+
|
|
10
|
+
var normaliseLinkHref = function normaliseLinkHref(url) {
|
|
11
|
+
var match = getLinkMatch(url);
|
|
12
|
+
return match && match.url || null;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
var getLinkMatch = function getLinkMatch(str) {
|
|
16
|
+
if (!str) {
|
|
17
|
+
return null;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
var match = linkifyMatch(str);
|
|
21
|
+
|
|
22
|
+
if (!match.length) {
|
|
23
|
+
match = linkify.match(str);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return match && match.length > 0 && match[0].index === 0 && match[0].lastIndex === str.trim().length ? match[0] : null;
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
var LINK_REGEXP = /(https?|ftp):\/\/[^\s]+/;
|
|
30
|
+
|
|
31
|
+
var linkifyMatch = function linkifyMatch(text) {
|
|
32
|
+
var matches = [];
|
|
33
|
+
|
|
34
|
+
if (!LINK_REGEXP.test(text)) {
|
|
35
|
+
return matches;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
var startpos = 0;
|
|
39
|
+
var substr;
|
|
40
|
+
|
|
41
|
+
while (substr = text.substr(startpos)) {
|
|
42
|
+
var link = (substr.match(LINK_REGEXP) || [''])[0];
|
|
43
|
+
|
|
44
|
+
if (link) {
|
|
45
|
+
var index = substr.search(LINK_REGEXP);
|
|
46
|
+
var start = index >= 0 ? index + startpos : index;
|
|
47
|
+
var end = start + link.length;
|
|
48
|
+
matches.push({
|
|
49
|
+
index: start,
|
|
50
|
+
lastIndex: end,
|
|
51
|
+
raw: link,
|
|
52
|
+
url: link,
|
|
53
|
+
text: link,
|
|
54
|
+
schema: ''
|
|
55
|
+
});
|
|
56
|
+
startpos += end;
|
|
57
|
+
} else {
|
|
58
|
+
break;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
return matches;
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export var isSafeUrl = function isSafeUrl(url) {
|
|
66
|
+
var urlTrimmed = url.trim();
|
|
67
|
+
|
|
68
|
+
if (urlTrimmed.length === 0) {
|
|
69
|
+
return true;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
return whitelistedURLPatterns.some(function (p) {
|
|
73
|
+
return p.test(urlTrimmed);
|
|
74
|
+
});
|
|
75
|
+
};
|
|
76
|
+
/**
|
|
77
|
+
* Adds protocol to url if needed.
|
|
78
|
+
*/
|
|
79
|
+
|
|
80
|
+
export function normalizeUrl(url) {
|
|
81
|
+
if (!url) {
|
|
82
|
+
return '';
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
if (isSafeUrl(url)) {
|
|
86
|
+
return url.trim();
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
return normaliseLinkHref(url);
|
|
90
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { browser } from './browser';
|
|
2
|
+
export var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
|
|
3
|
+
if (typeof px === 'string') {
|
|
4
|
+
px = parseInt(px);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
if (isNaN(px)) {
|
|
8
|
+
throw new Error("Invalid font size: '".concat(px, "'"));
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
return "".concat(px / 16, "rem");
|
|
12
|
+
};
|
|
13
|
+
var KeyZCode = 90;
|
|
14
|
+
var KeyYCode = 89;
|
|
15
|
+
export var isUndoEvent = function isUndoEvent(e) {
|
|
16
|
+
return e.keyCode === KeyZCode && ( // cmd + z for mac
|
|
17
|
+
browser.mac && e.metaKey && !e.shiftKey || // ctrl + z for non-mac
|
|
18
|
+
!browser.mac && e.ctrlKey);
|
|
19
|
+
};
|
|
20
|
+
export var isRedoEvent = function isRedoEvent(e) {
|
|
21
|
+
return (// ctrl + y for non-mac
|
|
22
|
+
!browser.mac && e.ctrlKey && e.keyCode === KeyYCode || browser.mac && e.metaKey && e.shiftKey && e.keyCode === KeyZCode || e.ctrlKey && e.shiftKey && e.keyCode === KeyZCode
|
|
23
|
+
);
|
|
24
|
+
};
|
package/dist/esm/version.json
CHANGED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
declare const result: {
|
|
2
|
+
mac: boolean;
|
|
3
|
+
ie: boolean;
|
|
4
|
+
ie_version: number;
|
|
5
|
+
gecko: boolean;
|
|
6
|
+
chrome: boolean;
|
|
7
|
+
chrome_version: number;
|
|
8
|
+
android: boolean;
|
|
9
|
+
ios: boolean;
|
|
10
|
+
webkit: boolean;
|
|
11
|
+
safari: boolean;
|
|
12
|
+
supportsIntersectionObserver: boolean;
|
|
13
|
+
supportsResizeObserver: boolean;
|
|
14
|
+
};
|
|
15
|
+
export { result as browser };
|