@atlaskit/editor-plugin-media-insert 9.0.0 → 9.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/mediaInsertPlugin.js +2 -1
  3. package/dist/cjs/ui/MediaFromURL.js +27 -13
  4. package/dist/cjs/ui/MediaFromURLWithForm.js +26 -12
  5. package/dist/cjs/ui/MediaInsertPicker.js +7 -3
  6. package/dist/es2019/mediaInsertPlugin.js +2 -1
  7. package/dist/es2019/ui/MediaFromURL.js +26 -12
  8. package/dist/es2019/ui/MediaFromURLWithForm.js +25 -11
  9. package/dist/es2019/ui/MediaInsertPicker.js +6 -3
  10. package/dist/esm/mediaInsertPlugin.js +2 -1
  11. package/dist/esm/ui/MediaFromURL.js +27 -13
  12. package/dist/esm/ui/MediaFromURLWithForm.js +26 -12
  13. package/dist/esm/ui/MediaInsertPicker.js +7 -3
  14. package/dist/types/mediaInsertPluginType.d.ts +1 -0
  15. package/dist/types/types/index.d.ts +1 -0
  16. package/dist/types/ui/MediaFromURL.d.ts +3 -1
  17. package/dist/types/ui/MediaFromURLWithForm.d.ts +3 -1
  18. package/dist/types/ui/MediaInsertPicker.d.ts +1 -1
  19. package/dist/types-ts4.5/mediaInsertPluginType.d.ts +1 -0
  20. package/dist/types-ts4.5/types/index.d.ts +1 -0
  21. package/dist/types-ts4.5/ui/MediaFromURL.d.ts +3 -1
  22. package/dist/types-ts4.5/ui/MediaFromURLWithForm.d.ts +3 -1
  23. package/dist/types-ts4.5/ui/MediaInsertPicker.d.ts +1 -1
  24. package/package.json +8 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/editor-plugin-media-insert
2
2
 
3
+ ## 9.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`4903edc4a60f8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4903edc4a60f8) -
8
+ [ux] Adds a configuration for media insert to allow for smart value input
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
14
+ ## 9.0.1
15
+
16
+ ### Patch Changes
17
+
18
+ - [#195649](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195649)
19
+ [`231bb33e06dfe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/231bb33e06dfe) -
20
+ EDITOR-1131 Bump adf-schema version to 50.2.0
21
+ - Updated dependencies
22
+
3
23
  ## 9.0.0
4
24
 
5
25
  ### Patch Changes
package/dist/cjs/mediaInsertPlugin.js CHANGED
@@ -118,7 +118,8 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
118
118
  insertMediaSingle: insertMediaSingle,
119
119
  insertExternalMediaSingle: insertExternalMediaSingle,
120
120
  insertFile: insertFile,
121
- isOnlyExternalLinks: config === null || config === void 0 ? void 0 : config.isOnlyExternalLinks
121
+ isOnlyExternalLinks: config === null || config === void 0 ? void 0 : config.isOnlyExternalLinks,
122
+ isUrlValidationOff: config === null || config === void 0 ? void 0 : config.isUrlValidationOff
122
123
  });
123
124
  },
124
125
  pluginsOptions: {
package/dist/cjs/ui/MediaFromURL.js CHANGED
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.MediaFromURL = MediaFromURL;
9
- exports.isValidUrl = void 0;
9
+ exports.isValidUrl = exports.isValidSmartValue = void 0;
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
12
  var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
13
13
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
14
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
15
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
- var _react = _interopRequireDefault(require("react"));
16
+ var _react = _interopRequireWildcard(require("react"));
17
17
  var _reactIntlNext = require("react-intl-next");
18
18
  var _adfSchema = require("@atlaskit/adf-schema");
19
19
  var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
@@ -52,6 +52,18 @@ var INITIAL_PREVIEW_STATE = Object.freeze({
52
52
  warning: null,
53
53
  previewInfo: null
54
54
  });
55
+ var isValidInput = function isValidInput(value, isUrlValidationOff) {
56
+ if (isUrlValidationOff) {
57
+ return isValidUrl(value) || isValidSmartValue(value);
58
+ }
59
+ return isValidUrl(value);
60
+ };
61
+ var isValidSmartValue = exports.isValidSmartValue = function isValidSmartValue(value) {
62
+ if (/^\{\{(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])+\}\}$/.test(value) && value.length < MAX_URL_LENGTH) {
63
+ return true;
64
+ }
65
+ return false;
66
+ };
55
67
  var MAX_URL_LENGTH = 2048;
56
68
  var isValidUrl = exports.isValidUrl = function isValidUrl(value) {
57
69
  try {
@@ -97,7 +109,8 @@ function MediaFromURL(_ref) {
97
109
  closeMediaInsertPicker = _ref.closeMediaInsertPicker,
98
110
  insertMediaSingle = _ref.insertMediaSingle,
99
111
  insertExternalMediaSingle = _ref.insertExternalMediaSingle,
100
- isOnlyExternalLinks = _ref.isOnlyExternalLinks;
112
+ isOnlyExternalLinks = _ref.isOnlyExternalLinks,
113
+ isUrlValidationOff = _ref.isUrlValidationOff;
101
114
  var intl = (0, _reactIntlNext.useIntl)();
102
115
  var strings = {
103
116
  loadPreview: intl.formatMessage(_messages.mediaInsertMessages.loadPreview),
@@ -106,7 +119,8 @@ function MediaFromURL(_ref) {
106
119
  cancel: intl.formatMessage(_messages.mediaInsertMessages.cancel),
107
120
  errorMessage: intl.formatMessage(_messages.mediaInsertMessages.fromUrlErrorMessage),
108
121
  warning: intl.formatMessage(_messages.mediaInsertMessages.fromUrlWarning),
109
- invalidUrl: intl.formatMessage(_messages.mediaInsertMessages.invalidUrlErrorMessage)
122
+ invalidUrl: intl.formatMessage(_messages.mediaInsertMessages.invalidUrlErrorMessage),
123
+ insertSmartValueHelperMessage: intl.formatMessage(_messages.mediaInsertMessages.insertSmartValueHelperMessage)
110
124
  };
111
125
  var _React$useReducer = _react.default.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE),
112
126
  _React$useReducer2 = (0, _slicedToArray2.default)(_React$useReducer, 2),
@@ -114,8 +128,8 @@ function MediaFromURL(_ref) {
114
128
  dispatch = _React$useReducer2[1];
115
129
  var _React$useState = _react.default.useState(''),
116
130
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
117
- url = _React$useState2[0],
118
- setUrl = _React$useState2[1];
131
+ input = _React$useState2[0],
132
+ setInput = _React$useState2[1];
119
133
  var pasteFlag = _react.default.useRef(false);
120
134
  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(dispatchAnalyticsEvent),
121
135
  onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
@@ -205,8 +219,8 @@ function MediaFromURL(_ref) {
205
219
  dispatch({
206
220
  type: 'reset'
207
221
  });
208
- setUrl(url);
209
- if (!isValidUrl(url)) {
222
+ setInput(url);
223
+ if (!isValidInput(url, isUrlValidationOff)) {
210
224
  return;
211
225
  }
212
226
  if (pasteFlag.current) {
@@ -215,7 +229,7 @@ function MediaFromURL(_ref) {
215
229
  uploadExternalMedia(url);
216
230
  }
217
231
  }
218
- }, [uploadExternalMedia, isOnlyExternalLinks]);
232
+ }, [uploadExternalMedia, isOnlyExternalLinks, isUrlValidationOff]);
219
233
  var _onPaste = _react.default.useCallback(function (e, inputUrl) {
220
234
  // Note: this is a little weird, but the paste event will always be
221
235
  // fired before the change event when pasting. We don't really want to
@@ -308,7 +322,7 @@ function MediaFromURL(_ref) {
308
322
  isRequired: true,
309
323
  name: "inputUrl",
310
324
  validate: function validate(value) {
311
- return value && isValidUrl(value) ? undefined : strings.invalidUrl;
325
+ return value && isValidInput(value, isUrlValidationOff) ? undefined : strings.invalidUrl;
312
326
  }
313
327
  }, function (_ref5) {
314
328
  var _ref5$fieldProps = _ref5.fieldProps,
@@ -341,7 +355,7 @@ function MediaFromURL(_ref) {
341
355
  formProps.onSubmit();
342
356
  }
343
357
  }
344
- })), /*#__PURE__*/_react.default.createElement(_form.MessageWrapper, null, error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
358
+ })), isUrlValidationOff && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_form.HelperMessage, null, strings.insertSmartValueHelperMessage)), /*#__PURE__*/_react.default.createElement(_form.MessageWrapper, null, error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
345
359
  as: "span"
346
360
  }, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
347
361
  xcss: PreviewBoxStyles,
@@ -377,9 +391,9 @@ function MediaFromURL(_ref) {
377
391
  appearance: "subtle",
378
392
  onClick: onCancel
379
393
  }, strings.cancel), /*#__PURE__*/_react.default.createElement(_new.default, {
380
- type: "button",
394
+ type: "submit",
381
395
  appearance: "primary",
382
- isDisabled: isOnlyExternalLinks ? !url || !isValidUrl(url) : !previewState.previewInfo && !previewState.warning,
396
+ isDisabled: isOnlyExternalLinks ? !input || !isValidInput(input, isUrlValidationOff) : !previewState.previewInfo && !previewState.warning,
383
397
  onClick: function onClick() {
384
398
  return formProps.onSubmit();
385
399
  }
package/dist/cjs/ui/MediaFromURLWithForm.js CHANGED
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.MediaFromURLWithForm = MediaFromURLWithForm;
9
- exports.isValidUrl = void 0;
9
+ exports.isValidUrl = exports.isValidSmartValue = void 0;
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
12
  var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
13
13
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
14
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
15
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
- var _react = _interopRequireDefault(require("react"));
16
+ var _react = _interopRequireWildcard(require("react"));
17
17
  var _reactIntlNext = require("react-intl-next");
18
18
  var _adfSchema = require("@atlaskit/adf-schema");
19
19
  var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
@@ -53,6 +53,18 @@ var INITIAL_PREVIEW_STATE = Object.freeze({
53
53
  previewInfo: null
54
54
  });
55
55
  var MAX_URL_LENGTH = 2048;
56
+ var isValidInput = function isValidInput(value, isUrlValidationOff) {
57
+ if (isUrlValidationOff) {
58
+ return isValidUrl(value) || isValidSmartValue(value);
59
+ }
60
+ return isValidUrl(value);
61
+ };
62
+ var isValidSmartValue = exports.isValidSmartValue = function isValidSmartValue(value) {
63
+ if (/^\{\{(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])+\}\}$/.test(value) && value.length < MAX_URL_LENGTH) {
64
+ return true;
65
+ }
66
+ return false;
67
+ };
56
68
  var isValidUrl = exports.isValidUrl = function isValidUrl(value) {
57
69
  try {
58
70
  // Check for spaces and length first to avoid the expensive URL parsing
@@ -97,7 +109,8 @@ function MediaFromURLWithForm(_ref) {
97
109
  closeMediaInsertPicker = _ref.closeMediaInsertPicker,
98
110
  insertMediaSingle = _ref.insertMediaSingle,
99
111
  insertExternalMediaSingle = _ref.insertExternalMediaSingle,
100
- isOnlyExternalLinks = _ref.isOnlyExternalLinks;
112
+ isOnlyExternalLinks = _ref.isOnlyExternalLinks,
113
+ isUrlValidationOff = _ref.isUrlValidationOff;
101
114
  var intl = (0, _reactIntlNext.useIntl)();
102
115
  var strings = {
103
116
  loadPreview: intl.formatMessage(_messages.mediaInsertMessages.loadPreview),
@@ -106,7 +119,8 @@ function MediaFromURLWithForm(_ref) {
106
119
  cancel: intl.formatMessage(_messages.mediaInsertMessages.cancel),
107
120
  errorMessage: intl.formatMessage(_messages.mediaInsertMessages.fromUrlErrorMessage),
108
121
  warning: intl.formatMessage(_messages.mediaInsertMessages.fromUrlWarning),
109
- invalidUrl: intl.formatMessage(_messages.mediaInsertMessages.invalidUrlErrorMessage)
122
+ invalidUrl: intl.formatMessage(_messages.mediaInsertMessages.invalidUrlErrorMessage),
123
+ insertSmartValueHelperMessage: intl.formatMessage(_messages.mediaInsertMessages.insertSmartValueHelperMessage)
110
124
  };
111
125
  var _React$useReducer = _react.default.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE),
112
126
  _React$useReducer2 = (0, _slicedToArray2.default)(_React$useReducer, 2),
@@ -114,8 +128,8 @@ function MediaFromURLWithForm(_ref) {
114
128
  dispatch = _React$useReducer2[1];
115
129
  var _React$useState = _react.default.useState(''),
116
130
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
117
- url = _React$useState2[0],
118
- setUrl = _React$useState2[1];
131
+ input = _React$useState2[0],
132
+ setInput = _React$useState2[1];
119
133
  var pasteFlag = _react.default.useRef(false);
120
134
  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(dispatchAnalyticsEvent),
121
135
  onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
@@ -205,8 +219,8 @@ function MediaFromURLWithForm(_ref) {
205
219
  dispatch({
206
220
  type: 'reset'
207
221
  });
208
- setUrl(url);
209
- if (!isValidUrl(url)) {
222
+ setInput(url);
223
+ if (!isValidInput(url, isUrlValidationOff)) {
210
224
  return;
211
225
  }
212
226
  if (pasteFlag.current) {
@@ -215,7 +229,7 @@ function MediaFromURLWithForm(_ref) {
215
229
  uploadExternalMedia(url);
216
230
  }
217
231
  }
218
- }, [uploadExternalMedia, isOnlyExternalLinks]);
232
+ }, [uploadExternalMedia, isOnlyExternalLinks, isUrlValidationOff]);
219
233
  var _onPaste = _react.default.useCallback(function (e, inputUrl) {
220
234
  // Note: this is a little weird, but the paste event will always be
221
235
  // fired before the change event when pasting. We don't really want to
@@ -310,7 +324,7 @@ function MediaFromURLWithForm(_ref) {
310
324
  isRequired: true,
311
325
  name: "inputUrl",
312
326
  validate: function validate(value) {
313
- return value && isValidUrl(value) ? undefined : strings.invalidUrl;
327
+ return value && isValidInput(value, isUrlValidationOff) ? undefined : strings.invalidUrl;
314
328
  }
315
329
  }, function (_ref5) {
316
330
  var _ref5$fieldProps = _ref5.fieldProps,
@@ -337,7 +351,7 @@ function MediaFromURLWithForm(_ref) {
337
351
  onURLChange(value);
338
352
  _onChange(value);
339
353
  }
340
- })), /*#__PURE__*/_react.default.createElement(_form.MessageWrapper, null, error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
354
+ })), isUrlValidationOff && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_form.HelperMessage, null, strings.insertSmartValueHelperMessage)), /*#__PURE__*/_react.default.createElement(_form.MessageWrapper, null, error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
341
355
  as: "span"
342
356
  }, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
343
357
  xcss: PreviewBoxStyles,
@@ -372,7 +386,7 @@ function MediaFromURLWithForm(_ref) {
372
386
  }, strings.cancel), /*#__PURE__*/_react.default.createElement(_new.default, {
373
387
  type: "submit",
374
388
  appearance: "primary",
375
- isDisabled: isOnlyExternalLinks ? !url || !isValidUrl(url) : !previewState.previewInfo && !previewState.warning
389
+ isDisabled: isOnlyExternalLinks ? !input || !isValidInput(input, isUrlValidationOff) : !previewState.previewInfo && !previewState.warning
376
390
  }, strings.insert)))))
377
391
  );
378
392
  });
package/dist/cjs/ui/MediaInsertPicker.js CHANGED
@@ -75,7 +75,9 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
75
75
  insertExternalMediaSingle = _ref2.insertExternalMediaSingle,
76
76
  insertFile = _ref2.insertFile,
77
77
  _ref2$isOnlyExternalL = _ref2.isOnlyExternalLinks,
78
- isOnlyExternalLinks = _ref2$isOnlyExternalL === void 0 ? false : _ref2$isOnlyExternalL;
78
+ isOnlyExternalLinks = _ref2$isOnlyExternalL === void 0 ? false : _ref2$isOnlyExternalL,
79
+ _ref2$isUrlValidation = _ref2.isUrlValidationOff,
80
+ isUrlValidationOff = _ref2$isUrlValidation === void 0 ? false : _ref2$isUrlValidation;
79
81
  var _useSharedState = useSharedState(api),
80
82
  mediaProvider = _useSharedState.mediaProvider,
81
83
  isOpen = _useSharedState.isOpen,
@@ -160,7 +162,8 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
160
162
  },
161
163
  insertMediaSingle: insertMediaSingle,
162
164
  insertExternalMediaSingle: insertExternalMediaSingle,
163
- isOnlyExternalLinks: isOnlyExternalLinks
165
+ isOnlyExternalLinks: isOnlyExternalLinks,
166
+ isUrlValidationOff: isUrlValidationOff
164
167
  }) : /*#__PURE__*/_react.default.createElement(_MediaFromURLWithForm.MediaFromURLWithForm, {
165
168
  mediaProvider: mediaProvider,
166
169
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -170,7 +173,8 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
170
173
  },
171
174
  insertMediaSingle: insertMediaSingle,
172
175
  insertExternalMediaSingle: insertExternalMediaSingle,
173
- isOnlyExternalLinks: isOnlyExternalLinks
176
+ isOnlyExternalLinks: isOnlyExternalLinks,
177
+ isUrlValidationOff: isUrlValidationOff
174
178
  }))));
175
179
  }));
176
180
  };
package/dist/es2019/mediaInsertPlugin.js CHANGED
@@ -112,7 +112,8 @@ export const mediaInsertPlugin = ({
112
112
  insertMediaSingle: insertMediaSingle,
113
113
  insertExternalMediaSingle: insertExternalMediaSingle,
114
114
  insertFile: insertFile,
115
- isOnlyExternalLinks: config === null || config === void 0 ? void 0 : config.isOnlyExternalLinks
115
+ isOnlyExternalLinks: config === null || config === void 0 ? void 0 : config.isOnlyExternalLinks,
116
+ isUrlValidationOff: config === null || config === void 0 ? void 0 : config.isUrlValidationOff
116
117
  });
117
118
  },
118
119
  pluginsOptions: {
package/dist/es2019/ui/MediaFromURL.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import React from 'react';
2
+ import React, { Fragment } from 'react';
3
3
  import { useIntl } from 'react-intl-next';
4
4
  import { isSafeUrl } from '@atlaskit/adf-schema';
5
5
  import ButtonGroup from '@atlaskit/button/button-group';
6
6
  import Button from '@atlaskit/button/new';
7
7
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
8
8
  import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
9
- import Form, { ErrorMessage, Field, FormFooter, MessageWrapper } from '@atlaskit/form';
9
+ import Form, { ErrorMessage, Field, FormFooter, HelperMessage, MessageWrapper } from '@atlaskit/form';
10
10
  import ExpandIcon from '@atlaskit/icon/core/grow-diagonal';
11
11
  import { default as EditorFilePreviewIconLegacy } from '@atlaskit/icon/glyph/editor/file-preview';
12
12
  import { getMediaClient } from '@atlaskit/media-client-react';
@@ -35,6 +35,18 @@ const INITIAL_PREVIEW_STATE = Object.freeze({
35
35
  warning: null,
36
36
  previewInfo: null
37
37
  });
38
+ const isValidInput = (value, isUrlValidationOff) => {
39
+ if (isUrlValidationOff) {
40
+ return isValidUrl(value) || isValidSmartValue(value);
41
+ }
42
+ return isValidUrl(value);
43
+ };
44
+ export const isValidSmartValue = value => {
45
+ if (/^\{\{.+\}\}$/u.test(value) && value.length < MAX_URL_LENGTH) {
46
+ return true;
47
+ }
48
+ return false;
49
+ };
38
50
  const MAX_URL_LENGTH = 2048;
39
51
  export const isValidUrl = value => {
40
52
  try {
@@ -84,7 +96,8 @@ export function MediaFromURL({
84
96
  closeMediaInsertPicker,
85
97
  insertMediaSingle,
86
98
  insertExternalMediaSingle,
87
- isOnlyExternalLinks
99
+ isOnlyExternalLinks,
100
+ isUrlValidationOff
88
101
  }) {
89
102
  const intl = useIntl();
90
103
  const strings = {
@@ -94,10 +107,11 @@ export function MediaFromURL({
94
107
  cancel: intl.formatMessage(mediaInsertMessages.cancel),
95
108
  errorMessage: intl.formatMessage(mediaInsertMessages.fromUrlErrorMessage),
96
109
  warning: intl.formatMessage(mediaInsertMessages.fromUrlWarning),
97
- invalidUrl: intl.formatMessage(mediaInsertMessages.invalidUrlErrorMessage)
110
+ invalidUrl: intl.formatMessage(mediaInsertMessages.invalidUrlErrorMessage),
111
+ insertSmartValueHelperMessage: intl.formatMessage(mediaInsertMessages.insertSmartValueHelperMessage)
98
112
  };
99
113
  const [previewState, dispatch] = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE);
100
- const [url, setUrl] = React.useState('');
114
+ const [input, setInput] = React.useState('');
101
115
  const pasteFlag = React.useRef(false);
102
116
  const {
103
117
  onUploadButtonClickedAnalytics,
@@ -169,8 +183,8 @@ export function MediaFromURL({
169
183
  dispatch({
170
184
  type: 'reset'
171
185
  });
172
- setUrl(url);
173
- if (!isValidUrl(url)) {
186
+ setInput(url);
187
+ if (!isValidInput(url, isUrlValidationOff)) {
174
188
  return;
175
189
  }
176
190
  if (pasteFlag.current) {
@@ -179,7 +193,7 @@ export function MediaFromURL({
179
193
  uploadExternalMedia(url);
180
194
  }
181
195
  }
182
- }, [uploadExternalMedia, isOnlyExternalLinks]);
196
+ }, [uploadExternalMedia, isOnlyExternalLinks, isUrlValidationOff]);
183
197
  const onPaste = React.useCallback((e, inputUrl) => {
184
198
  // Note: this is a little weird, but the paste event will always be
185
199
  // fired before the change event when pasting. We don't really want to
@@ -272,7 +286,7 @@ export function MediaFromURL({
272
286
  "aria-required": true,
273
287
  isRequired: true,
274
288
  name: "inputUrl",
275
- validate: value => value && isValidUrl(value) ? undefined : strings.invalidUrl
289
+ validate: value => value && isValidInput(value, isUrlValidationOff) ? undefined : strings.invalidUrl
276
290
  }, ({
277
291
  fieldProps: {
278
292
  value,
@@ -303,7 +317,7 @@ export function MediaFromURL({
303
317
  formProps.onSubmit();
304
318
  }
305
319
  }
306
- })), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
320
+ })), isUrlValidationOff && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(HelperMessage, null, strings.insertSmartValueHelperMessage)), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
307
321
  as: "span"
308
322
  }, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Flex, {
309
323
  xcss: PreviewBoxStyles,
@@ -334,9 +348,9 @@ export function MediaFromURL({
334
348
  appearance: "subtle",
335
349
  onClick: onCancel
336
350
  }, strings.cancel), /*#__PURE__*/React.createElement(Button, {
337
- type: "button",
351
+ type: "submit",
338
352
  appearance: "primary",
339
- isDisabled: isOnlyExternalLinks ? !url || !isValidUrl(url) : !previewState.previewInfo && !previewState.warning,
353
+ isDisabled: isOnlyExternalLinks ? !input || !isValidInput(input, isUrlValidationOff) : !previewState.previewInfo && !previewState.warning,
340
354
  onClick: () => formProps.onSubmit()
341
355
  }, strings.insert))))));
342
356
  }
package/dist/es2019/ui/MediaFromURLWithForm.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import React from 'react';
2
+ import React, { Fragment } from 'react';
3
3
  import { useIntl } from 'react-intl-next';
4
4
  import { isSafeUrl } from '@atlaskit/adf-schema';
5
5
  import ButtonGroup from '@atlaskit/button/button-group';
6
6
  import Button from '@atlaskit/button/new';
7
7
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
8
8
  import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
9
- import Form, { ErrorMessage, Field, FormFooter, MessageWrapper } from '@atlaskit/form';
9
+ import Form, { ErrorMessage, Field, FormFooter, MessageWrapper, HelperMessage } from '@atlaskit/form';
10
10
  import ExpandIcon from '@atlaskit/icon/core/grow-diagonal';
11
11
  import { default as EditorFilePreviewIconLegacy } from '@atlaskit/icon/glyph/editor/file-preview';
12
12
  import { getMediaClient } from '@atlaskit/media-client-react';
@@ -36,6 +36,18 @@ const INITIAL_PREVIEW_STATE = Object.freeze({
36
36
  previewInfo: null
37
37
  });
38
38
  const MAX_URL_LENGTH = 2048;
39
+ const isValidInput = (value, isUrlValidationOff) => {
40
+ if (isUrlValidationOff) {
41
+ return isValidUrl(value) || isValidSmartValue(value);
42
+ }
43
+ return isValidUrl(value);
44
+ };
45
+ export const isValidSmartValue = value => {
46
+ if (/^\{\{.+\}\}$/u.test(value) && value.length < MAX_URL_LENGTH) {
47
+ return true;
48
+ }
49
+ return false;
50
+ };
39
51
  export const isValidUrl = value => {
40
52
  try {
41
53
  // Check for spaces and length first to avoid the expensive URL parsing
@@ -84,7 +96,8 @@ export function MediaFromURLWithForm({
84
96
  closeMediaInsertPicker,
85
97
  insertMediaSingle,
86
98
  insertExternalMediaSingle,
87
- isOnlyExternalLinks
99
+ isOnlyExternalLinks,
100
+ isUrlValidationOff
88
101
  }) {
89
102
  const intl = useIntl();
90
103
  const strings = {
@@ -94,10 +107,11 @@ export function MediaFromURLWithForm({
94
107
  cancel: intl.formatMessage(mediaInsertMessages.cancel),
95
108
  errorMessage: intl.formatMessage(mediaInsertMessages.fromUrlErrorMessage),
96
109
  warning: intl.formatMessage(mediaInsertMessages.fromUrlWarning),
97
- invalidUrl: intl.formatMessage(mediaInsertMessages.invalidUrlErrorMessage)
110
+ invalidUrl: intl.formatMessage(mediaInsertMessages.invalidUrlErrorMessage),
111
+ insertSmartValueHelperMessage: intl.formatMessage(mediaInsertMessages.insertSmartValueHelperMessage)
98
112
  };
99
113
  const [previewState, dispatch] = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE);
100
- const [url, setUrl] = React.useState('');
114
+ const [input, setInput] = React.useState('');
101
115
  const pasteFlag = React.useRef(false);
102
116
  const {
103
117
  onUploadButtonClickedAnalytics,
@@ -169,8 +183,8 @@ export function MediaFromURLWithForm({
169
183
  dispatch({
170
184
  type: 'reset'
171
185
  });
172
- setUrl(url);
173
- if (!isValidUrl(url)) {
186
+ setInput(url);
187
+ if (!isValidInput(url, isUrlValidationOff)) {
174
188
  return;
175
189
  }
176
190
  if (pasteFlag.current) {
@@ -179,7 +193,7 @@ export function MediaFromURLWithForm({
179
193
  uploadExternalMedia(url);
180
194
  }
181
195
  }
182
- }, [uploadExternalMedia, isOnlyExternalLinks]);
196
+ }, [uploadExternalMedia, isOnlyExternalLinks, isUrlValidationOff]);
183
197
  const onPaste = React.useCallback((e, inputUrl) => {
184
198
  // Note: this is a little weird, but the paste event will always be
185
199
  // fired before the change event when pasting. We don't really want to
@@ -274,7 +288,7 @@ export function MediaFromURLWithForm({
274
288
  "aria-required": true,
275
289
  isRequired: true,
276
290
  name: "inputUrl",
277
- validate: value => value && isValidUrl(value) ? undefined : strings.invalidUrl
291
+ validate: value => value && isValidInput(value, isUrlValidationOff) ? undefined : strings.invalidUrl
278
292
  }, ({
279
293
  fieldProps: {
280
294
  value,
@@ -299,7 +313,7 @@ export function MediaFromURLWithForm({
299
313
  onURLChange(value);
300
314
  onChange(value);
301
315
  }
302
- })), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
316
+ })), isUrlValidationOff && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(HelperMessage, null, strings.insertSmartValueHelperMessage)), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
303
317
  as: "span"
304
318
  }, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Flex, {
305
319
  xcss: PreviewBoxStyles,
@@ -331,6 +345,6 @@ export function MediaFromURLWithForm({
331
345
  }, strings.cancel), /*#__PURE__*/React.createElement(Button, {
332
346
  type: "submit",
333
347
  appearance: "primary",
334
- isDisabled: isOnlyExternalLinks ? !url || !isValidUrl(url) : !previewState.previewInfo && !previewState.warning
348
+ isDisabled: isOnlyExternalLinks ? !input || !isValidInput(input, isUrlValidationOff) : !previewState.previewInfo && !previewState.warning
335
349
  }, strings.insert))))));
336
350
  }
package/dist/es2019/ui/MediaInsertPicker.js CHANGED
@@ -67,7 +67,8 @@ export const MediaInsertPicker = ({
67
67
  insertMediaSingle,
68
68
  insertExternalMediaSingle,
69
69
  insertFile,
70
- isOnlyExternalLinks = false
70
+ isOnlyExternalLinks = false,
71
+ isUrlValidationOff = false
71
72
  }) => {
72
73
  const {
73
74
  mediaProvider,
@@ -152,7 +153,8 @@ export const MediaInsertPicker = ({
152
153
  },
153
154
  insertMediaSingle: insertMediaSingle,
154
155
  insertExternalMediaSingle: insertExternalMediaSingle,
155
- isOnlyExternalLinks: isOnlyExternalLinks
156
+ isOnlyExternalLinks: isOnlyExternalLinks,
157
+ isUrlValidationOff: isUrlValidationOff
156
158
  }) : /*#__PURE__*/React.createElement(MediaFromURLWithForm, {
157
159
  mediaProvider: mediaProvider,
158
160
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -162,6 +164,7 @@ export const MediaInsertPicker = ({
162
164
  },
163
165
  insertMediaSingle: insertMediaSingle,
164
166
  insertExternalMediaSingle: insertExternalMediaSingle,
165
- isOnlyExternalLinks: isOnlyExternalLinks
167
+ isOnlyExternalLinks: isOnlyExternalLinks,
168
+ isUrlValidationOff: isUrlValidationOff
166
169
  }))))));
167
170
  };
package/dist/esm/mediaInsertPlugin.js CHANGED
@@ -111,7 +111,8 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
111
111
  insertMediaSingle: insertMediaSingle,
112
112
  insertExternalMediaSingle: insertExternalMediaSingle,
113
113
  insertFile: insertFile,
114
- isOnlyExternalLinks: config === null || config === void 0 ? void 0 : config.isOnlyExternalLinks
114
+ isOnlyExternalLinks: config === null || config === void 0 ? void 0 : config.isOnlyExternalLinks,
115
+ isUrlValidationOff: config === null || config === void 0 ? void 0 : config.isUrlValidationOff
115
116
  });
116
117
  },
117
118
  pluginsOptions: {
package/dist/esm/ui/MediaFromURL.js CHANGED
@@ -7,14 +7,14 @@ var _excluded = ["value", "onChange"];
7
7
  import _regeneratorRuntime from "@babel/runtime/regenerator";
8
8
  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; }
9
9
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
10
- import React from 'react';
10
+ import React, { Fragment } from 'react';
11
11
  import { useIntl } from 'react-intl-next';
12
12
  import { isSafeUrl } from '@atlaskit/adf-schema';
13
13
  import ButtonGroup from '@atlaskit/button/button-group';
14
14
  import Button from '@atlaskit/button/new';
15
15
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
16
16
  import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
17
- import Form, { ErrorMessage, Field, FormFooter, MessageWrapper } from '@atlaskit/form';
17
+ import Form, { ErrorMessage, Field, FormFooter, HelperMessage, MessageWrapper } from '@atlaskit/form';
18
18
  import ExpandIcon from '@atlaskit/icon/core/grow-diagonal';
19
19
  import { default as EditorFilePreviewIconLegacy } from '@atlaskit/icon/glyph/editor/file-preview';
20
20
  import { getMediaClient } from '@atlaskit/media-client-react';
@@ -43,6 +43,18 @@ var INITIAL_PREVIEW_STATE = Object.freeze({
43
43
  warning: null,
44
44
  previewInfo: null
45
45
  });
46
+ var isValidInput = function isValidInput(value, isUrlValidationOff) {
47
+ if (isUrlValidationOff) {
48
+ return isValidUrl(value) || isValidSmartValue(value);
49
+ }
50
+ return isValidUrl(value);
51
+ };
52
+ export var isValidSmartValue = function isValidSmartValue(value) {
53
+ if (/^\{\{(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])+\}\}$/.test(value) && value.length < MAX_URL_LENGTH) {
54
+ return true;
55
+ }
56
+ return false;
57
+ };
46
58
  var MAX_URL_LENGTH = 2048;
47
59
  export var isValidUrl = function isValidUrl(value) {
48
60
  try {
@@ -88,7 +100,8 @@ export function MediaFromURL(_ref) {
88
100
  closeMediaInsertPicker = _ref.closeMediaInsertPicker,
89
101
  insertMediaSingle = _ref.insertMediaSingle,
90
102
  insertExternalMediaSingle = _ref.insertExternalMediaSingle,
91
- isOnlyExternalLinks = _ref.isOnlyExternalLinks;
103
+ isOnlyExternalLinks = _ref.isOnlyExternalLinks,
104
+ isUrlValidationOff = _ref.isUrlValidationOff;
92
105
  var intl = useIntl();
93
106
  var strings = {
94
107
  loadPreview: intl.formatMessage(mediaInsertMessages.loadPreview),
@@ -97,7 +110,8 @@ export function MediaFromURL(_ref) {
97
110
  cancel: intl.formatMessage(mediaInsertMessages.cancel),
98
111
  errorMessage: intl.formatMessage(mediaInsertMessages.fromUrlErrorMessage),
99
112
  warning: intl.formatMessage(mediaInsertMessages.fromUrlWarning),
100
- invalidUrl: intl.formatMessage(mediaInsertMessages.invalidUrlErrorMessage)
113
+ invalidUrl: intl.formatMessage(mediaInsertMessages.invalidUrlErrorMessage),
114
+ insertSmartValueHelperMessage: intl.formatMessage(mediaInsertMessages.insertSmartValueHelperMessage)
101
115
  };
102
116
  var _React$useReducer = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE),
103
117
  _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
@@ -105,8 +119,8 @@ export function MediaFromURL(_ref) {
105
119
  dispatch = _React$useReducer2[1];
106
120
  var _React$useState = React.useState(''),
107
121
  _React$useState2 = _slicedToArray(_React$useState, 2),
108
- url = _React$useState2[0],
109
- setUrl = _React$useState2[1];
122
+ input = _React$useState2[0],
123
+ setInput = _React$useState2[1];
110
124
  var pasteFlag = React.useRef(false);
111
125
  var _useAnalyticsEvents = useAnalyticsEvents(dispatchAnalyticsEvent),
112
126
  onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
@@ -196,8 +210,8 @@ export function MediaFromURL(_ref) {
196
210
  dispatch({
197
211
  type: 'reset'
198
212
  });
199
- setUrl(url);
200
- if (!isValidUrl(url)) {
213
+ setInput(url);
214
+ if (!isValidInput(url, isUrlValidationOff)) {
201
215
  return;
202
216
  }
203
217
  if (pasteFlag.current) {
@@ -206,7 +220,7 @@ export function MediaFromURL(_ref) {
206
220
  uploadExternalMedia(url);
207
221
  }
208
222
  }
209
- }, [uploadExternalMedia, isOnlyExternalLinks]);
223
+ }, [uploadExternalMedia, isOnlyExternalLinks, isUrlValidationOff]);
210
224
  var _onPaste = React.useCallback(function (e, inputUrl) {
211
225
  // Note: this is a little weird, but the paste event will always be
212
226
  // fired before the change event when pasting. We don't really want to
@@ -299,7 +313,7 @@ export function MediaFromURL(_ref) {
299
313
  isRequired: true,
300
314
  name: "inputUrl",
301
315
  validate: function validate(value) {
302
- return value && isValidUrl(value) ? undefined : strings.invalidUrl;
316
+ return value && isValidInput(value, isUrlValidationOff) ? undefined : strings.invalidUrl;
303
317
  }
304
318
  }, function (_ref5) {
305
319
  var _ref5$fieldProps = _ref5.fieldProps,
@@ -332,7 +346,7 @@ export function MediaFromURL(_ref) {
332
346
  formProps.onSubmit();
333
347
  }
334
348
  }
335
- })), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
349
+ })), isUrlValidationOff && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(HelperMessage, null, strings.insertSmartValueHelperMessage)), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
336
350
  as: "span"
337
351
  }, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Flex, {
338
352
  xcss: PreviewBoxStyles,
@@ -368,9 +382,9 @@ export function MediaFromURL(_ref) {
368
382
  appearance: "subtle",
369
383
  onClick: onCancel
370
384
  }, strings.cancel), /*#__PURE__*/React.createElement(Button, {
371
- type: "button",
385
+ type: "submit",
372
386
  appearance: "primary",
373
- isDisabled: isOnlyExternalLinks ? !url || !isValidUrl(url) : !previewState.previewInfo && !previewState.warning,
387
+ isDisabled: isOnlyExternalLinks ? !input || !isValidInput(input, isUrlValidationOff) : !previewState.previewInfo && !previewState.warning,
374
388
  onClick: function onClick() {
375
389
  return formProps.onSubmit();
376
390
  }
package/dist/esm/ui/MediaFromURLWithForm.js CHANGED
@@ -7,14 +7,14 @@ var _excluded = ["value", "onChange"];
7
7
  import _regeneratorRuntime from "@babel/runtime/regenerator";
8
8
  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; }
9
9
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
10
- import React from 'react';
10
+ import React, { Fragment } from 'react';
11
11
  import { useIntl } from 'react-intl-next';
12
12
  import { isSafeUrl } from '@atlaskit/adf-schema';
13
13
  import ButtonGroup from '@atlaskit/button/button-group';
14
14
  import Button from '@atlaskit/button/new';
15
15
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
16
16
  import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
17
- import Form, { ErrorMessage, Field, FormFooter, MessageWrapper } from '@atlaskit/form';
17
+ import Form, { ErrorMessage, Field, FormFooter, MessageWrapper, HelperMessage } from '@atlaskit/form';
18
18
  import ExpandIcon from '@atlaskit/icon/core/grow-diagonal';
19
19
  import { default as EditorFilePreviewIconLegacy } from '@atlaskit/icon/glyph/editor/file-preview';
20
20
  import { getMediaClient } from '@atlaskit/media-client-react';
@@ -44,6 +44,18 @@ var INITIAL_PREVIEW_STATE = Object.freeze({
44
44
  previewInfo: null
45
45
  });
46
46
  var MAX_URL_LENGTH = 2048;
47
+ var isValidInput = function isValidInput(value, isUrlValidationOff) {
48
+ if (isUrlValidationOff) {
49
+ return isValidUrl(value) || isValidSmartValue(value);
50
+ }
51
+ return isValidUrl(value);
52
+ };
53
+ export var isValidSmartValue = function isValidSmartValue(value) {
54
+ if (/^\{\{(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])+\}\}$/.test(value) && value.length < MAX_URL_LENGTH) {
55
+ return true;
56
+ }
57
+ return false;
58
+ };
47
59
  export var isValidUrl = function isValidUrl(value) {
48
60
  try {
49
61
  // Check for spaces and length first to avoid the expensive URL parsing
@@ -88,7 +100,8 @@ export function MediaFromURLWithForm(_ref) {
88
100
  closeMediaInsertPicker = _ref.closeMediaInsertPicker,
89
101
  insertMediaSingle = _ref.insertMediaSingle,
90
102
  insertExternalMediaSingle = _ref.insertExternalMediaSingle,
91
- isOnlyExternalLinks = _ref.isOnlyExternalLinks;
103
+ isOnlyExternalLinks = _ref.isOnlyExternalLinks,
104
+ isUrlValidationOff = _ref.isUrlValidationOff;
92
105
  var intl = useIntl();
93
106
  var strings = {
94
107
  loadPreview: intl.formatMessage(mediaInsertMessages.loadPreview),
@@ -97,7 +110,8 @@ export function MediaFromURLWithForm(_ref) {
97
110
  cancel: intl.formatMessage(mediaInsertMessages.cancel),
98
111
  errorMessage: intl.formatMessage(mediaInsertMessages.fromUrlErrorMessage),
99
112
  warning: intl.formatMessage(mediaInsertMessages.fromUrlWarning),
100
- invalidUrl: intl.formatMessage(mediaInsertMessages.invalidUrlErrorMessage)
113
+ invalidUrl: intl.formatMessage(mediaInsertMessages.invalidUrlErrorMessage),
114
+ insertSmartValueHelperMessage: intl.formatMessage(mediaInsertMessages.insertSmartValueHelperMessage)
101
115
  };
102
116
  var _React$useReducer = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE),
103
117
  _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
@@ -105,8 +119,8 @@ export function MediaFromURLWithForm(_ref) {
105
119
  dispatch = _React$useReducer2[1];
106
120
  var _React$useState = React.useState(''),
107
121
  _React$useState2 = _slicedToArray(_React$useState, 2),
108
- url = _React$useState2[0],
109
- setUrl = _React$useState2[1];
122
+ input = _React$useState2[0],
123
+ setInput = _React$useState2[1];
110
124
  var pasteFlag = React.useRef(false);
111
125
  var _useAnalyticsEvents = useAnalyticsEvents(dispatchAnalyticsEvent),
112
126
  onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
@@ -196,8 +210,8 @@ export function MediaFromURLWithForm(_ref) {
196
210
  dispatch({
197
211
  type: 'reset'
198
212
  });
199
- setUrl(url);
200
- if (!isValidUrl(url)) {
213
+ setInput(url);
214
+ if (!isValidInput(url, isUrlValidationOff)) {
201
215
  return;
202
216
  }
203
217
  if (pasteFlag.current) {
@@ -206,7 +220,7 @@ export function MediaFromURLWithForm(_ref) {
206
220
  uploadExternalMedia(url);
207
221
  }
208
222
  }
209
- }, [uploadExternalMedia, isOnlyExternalLinks]);
223
+ }, [uploadExternalMedia, isOnlyExternalLinks, isUrlValidationOff]);
210
224
  var _onPaste = React.useCallback(function (e, inputUrl) {
211
225
  // Note: this is a little weird, but the paste event will always be
212
226
  // fired before the change event when pasting. We don't really want to
@@ -301,7 +315,7 @@ export function MediaFromURLWithForm(_ref) {
301
315
  isRequired: true,
302
316
  name: "inputUrl",
303
317
  validate: function validate(value) {
304
- return value && isValidUrl(value) ? undefined : strings.invalidUrl;
318
+ return value && isValidInput(value, isUrlValidationOff) ? undefined : strings.invalidUrl;
305
319
  }
306
320
  }, function (_ref5) {
307
321
  var _ref5$fieldProps = _ref5.fieldProps,
@@ -328,7 +342,7 @@ export function MediaFromURLWithForm(_ref) {
328
342
  onURLChange(value);
329
343
  _onChange(value);
330
344
  }
331
- })), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
345
+ })), isUrlValidationOff && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(HelperMessage, null, strings.insertSmartValueHelperMessage)), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
332
346
  as: "span"
333
347
  }, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Flex, {
334
348
  xcss: PreviewBoxStyles,
@@ -363,7 +377,7 @@ export function MediaFromURLWithForm(_ref) {
363
377
  }, strings.cancel), /*#__PURE__*/React.createElement(Button, {
364
378
  type: "submit",
365
379
  appearance: "primary",
366
- isDisabled: isOnlyExternalLinks ? !url || !isValidUrl(url) : !previewState.previewInfo && !previewState.warning
380
+ isDisabled: isOnlyExternalLinks ? !input || !isValidInput(input, isUrlValidationOff) : !previewState.previewInfo && !previewState.warning
367
381
  }, strings.insert)))))
368
382
  );
369
383
  });
package/dist/esm/ui/MediaInsertPicker.js CHANGED
@@ -66,7 +66,9 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
66
66
  insertExternalMediaSingle = _ref2.insertExternalMediaSingle,
67
67
  insertFile = _ref2.insertFile,
68
68
  _ref2$isOnlyExternalL = _ref2.isOnlyExternalLinks,
69
- isOnlyExternalLinks = _ref2$isOnlyExternalL === void 0 ? false : _ref2$isOnlyExternalL;
69
+ isOnlyExternalLinks = _ref2$isOnlyExternalL === void 0 ? false : _ref2$isOnlyExternalL,
70
+ _ref2$isUrlValidation = _ref2.isUrlValidationOff,
71
+ isUrlValidationOff = _ref2$isUrlValidation === void 0 ? false : _ref2$isUrlValidation;
70
72
  var _useSharedState = useSharedState(api),
71
73
  mediaProvider = _useSharedState.mediaProvider,
72
74
  isOpen = _useSharedState.isOpen,
@@ -151,7 +153,8 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
151
153
  },
152
154
  insertMediaSingle: insertMediaSingle,
153
155
  insertExternalMediaSingle: insertExternalMediaSingle,
154
- isOnlyExternalLinks: isOnlyExternalLinks
156
+ isOnlyExternalLinks: isOnlyExternalLinks,
157
+ isUrlValidationOff: isUrlValidationOff
155
158
  }) : /*#__PURE__*/React.createElement(MediaFromURLWithForm, {
156
159
  mediaProvider: mediaProvider,
157
160
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -161,7 +164,8 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
161
164
  },
162
165
  insertMediaSingle: insertMediaSingle,
163
166
  insertExternalMediaSingle: insertExternalMediaSingle,
164
- isOnlyExternalLinks: isOnlyExternalLinks
167
+ isOnlyExternalLinks: isOnlyExternalLinks,
168
+ isUrlValidationOff: isUrlValidationOff
165
169
  }))));
166
170
  }));
167
171
  };
package/dist/types/mediaInsertPluginType.d.ts CHANGED
@@ -50,6 +50,7 @@ export type MediaInsertPluginConfig = {
50
50
  * ```
51
51
  */
52
52
  isOnlyExternalLinks?: boolean;
53
+ isUrlValidationOff?: boolean;
53
54
  };
54
55
  export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
55
56
  dependencies: MediaInsertPluginDependencies;
package/dist/types/types/index.d.ts CHANGED
@@ -25,4 +25,5 @@ export type MediaInsertPickerProps = Pick<UiComponentFactoryParams, 'editorView'
25
25
  insertExternalMediaSingle: InsertExternalMediaSingle;
26
26
  insertFile: InsertFile;
27
27
  isOnlyExternalLinks: MediaInsertPluginConfig['isOnlyExternalLinks'];
28
+ isUrlValidationOff: MediaInsertPluginConfig['isUrlValidationOff'];
28
29
  };
package/dist/types/ui/MediaFromURL.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
3
3
  import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
4
4
  import { type InsertExternalMediaSingle, type InsertMediaSingle } from '../types';
5
+ export declare const isValidSmartValue: (value: string) => boolean;
5
6
  export declare const isValidUrl: (value: string) => boolean;
6
7
  type Props = {
7
8
  mediaProvider: MediaProvider;
@@ -10,6 +11,7 @@ type Props = {
10
11
  insertMediaSingle: InsertMediaSingle;
11
12
  insertExternalMediaSingle: InsertExternalMediaSingle;
12
13
  isOnlyExternalLinks: boolean;
14
+ isUrlValidationOff: boolean;
13
15
  };
14
- export declare function MediaFromURL({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, }: Props): React.JSX.Element;
16
+ export declare function MediaFromURL({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, isUrlValidationOff, }: Props): React.JSX.Element;
15
17
  export {};
package/dist/types/ui/MediaFromURLWithForm.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
3
3
  import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
4
4
  import { type InsertExternalMediaSingle, type InsertMediaSingle } from '../types';
5
+ export declare const isValidSmartValue: (value: string) => boolean;
5
6
  export declare const isValidUrl: (value: string) => boolean;
6
7
  type Props = {
7
8
  mediaProvider: MediaProvider;
@@ -10,6 +11,7 @@ type Props = {
10
11
  insertMediaSingle: InsertMediaSingle;
11
12
  insertExternalMediaSingle: InsertExternalMediaSingle;
12
13
  isOnlyExternalLinks: boolean;
14
+ isUrlValidationOff: boolean;
13
15
  };
14
- export declare function MediaFromURLWithForm({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, }: Props): React.JSX.Element;
16
+ export declare function MediaFromURLWithForm({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, isUrlValidationOff, }: Props): React.JSX.Element;
15
17
  export {};
package/dist/types/ui/MediaInsertPicker.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import { type MediaInsertPickerProps } from '../types';
3
- export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, insertFile, isOnlyExternalLinks, }: MediaInsertPickerProps) => React.JSX.Element | null;
3
+ export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, insertFile, isOnlyExternalLinks, isUrlValidationOff, }: MediaInsertPickerProps) => React.JSX.Element | null;
package/dist/types-ts4.5/mediaInsertPluginType.d.ts CHANGED
@@ -50,6 +50,7 @@ export type MediaInsertPluginConfig = {
50
50
  * ```
51
51
  */
52
52
  isOnlyExternalLinks?: boolean;
53
+ isUrlValidationOff?: boolean;
53
54
  };
54
55
  export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
55
56
  dependencies: MediaInsertPluginDependencies;
package/dist/types-ts4.5/types/index.d.ts CHANGED
@@ -25,4 +25,5 @@ export type MediaInsertPickerProps = Pick<UiComponentFactoryParams, 'editorView'
25
25
  insertExternalMediaSingle: InsertExternalMediaSingle;
26
26
  insertFile: InsertFile;
27
27
  isOnlyExternalLinks: MediaInsertPluginConfig['isOnlyExternalLinks'];
28
+ isUrlValidationOff: MediaInsertPluginConfig['isUrlValidationOff'];
28
29
  };
package/dist/types-ts4.5/ui/MediaFromURL.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
3
3
  import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
4
4
  import { type InsertExternalMediaSingle, type InsertMediaSingle } from '../types';
5
+ export declare const isValidSmartValue: (value: string) => boolean;
5
6
  export declare const isValidUrl: (value: string) => boolean;
6
7
  type Props = {
7
8
  mediaProvider: MediaProvider;
@@ -10,6 +11,7 @@ type Props = {
10
11
  insertMediaSingle: InsertMediaSingle;
11
12
  insertExternalMediaSingle: InsertExternalMediaSingle;
12
13
  isOnlyExternalLinks: boolean;
14
+ isUrlValidationOff: boolean;
13
15
  };
14
- export declare function MediaFromURL({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, }: Props): React.JSX.Element;
16
+ export declare function MediaFromURL({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, isUrlValidationOff, }: Props): React.JSX.Element;
15
17
  export {};
package/dist/types-ts4.5/ui/MediaFromURLWithForm.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
3
3
  import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
4
4
  import { type InsertExternalMediaSingle, type InsertMediaSingle } from '../types';
5
+ export declare const isValidSmartValue: (value: string) => boolean;
5
6
  export declare const isValidUrl: (value: string) => boolean;
6
7
  type Props = {
7
8
  mediaProvider: MediaProvider;
@@ -10,6 +11,7 @@ type Props = {
10
11
  insertMediaSingle: InsertMediaSingle;
11
12
  insertExternalMediaSingle: InsertExternalMediaSingle;
12
13
  isOnlyExternalLinks: boolean;
14
+ isUrlValidationOff: boolean;
13
15
  };
14
- export declare function MediaFromURLWithForm({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, }: Props): React.JSX.Element;
16
+ export declare function MediaFromURLWithForm({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, isUrlValidationOff, }: Props): React.JSX.Element;
15
17
  export {};
package/dist/types-ts4.5/ui/MediaInsertPicker.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import { type MediaInsertPickerProps } from '../types';
3
- export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, insertFile, isOnlyExternalLinks, }: MediaInsertPickerProps) => React.JSX.Element | null;
3
+ export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, insertFile, isOnlyExternalLinks, isUrlValidationOff, }: MediaInsertPickerProps) => React.JSX.Element | null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media-insert",
3
- "version": "9.0.0",
3
+ "version": "9.1.0",
4
4
  "description": "Media Insert plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -24,16 +24,16 @@
24
24
  ".": "./src/index.ts"
25
25
  },
26
26
  "dependencies": {
27
- "@atlaskit/adf-schema": "^50.0.1",
27
+ "@atlaskit/adf-schema": "^50.2.0",
28
28
  "@atlaskit/button": "^23.3.0",
29
29
  "@atlaskit/editor-plugin-analytics": "^3.0.0",
30
30
  "@atlaskit/editor-plugin-media": "^5.2.0",
31
31
  "@atlaskit/editor-prosemirror": "7.0.0",
32
- "@atlaskit/editor-shared-styles": "^3.5.0",
32
+ "@atlaskit/editor-shared-styles": "^3.6.0",
33
33
  "@atlaskit/form": "^12.0.0",
34
- "@atlaskit/icon": "^27.9.0",
35
- "@atlaskit/media-card": "^79.4.0",
36
- "@atlaskit/media-client": "^35.2.0",
34
+ "@atlaskit/icon": "^27.10.0",
35
+ "@atlaskit/media-card": "^79.5.0",
36
+ "@atlaskit/media-client": "^35.3.0",
37
37
  "@atlaskit/media-client-react": "^4.1.0",
38
38
  "@atlaskit/media-picker": "^70.0.0",
39
39
  "@atlaskit/platform-feature-flags": "^1.1.0",
@@ -41,19 +41,16 @@
41
41
  "@atlaskit/section-message": "^8.5.0",
42
42
  "@atlaskit/tabs": "^18.1.0",
43
43
  "@atlaskit/textfield": "^8.0.0",
44
- "@atlaskit/tmp-editor-statsig": "^9.22.0",
44
+ "@atlaskit/tmp-editor-statsig": "^9.26.0",
45
45
  "@babel/runtime": "^7.0.0",
46
46
  "react-intl-next": "npm:react-intl@^5.18.1"
47
47
  },
48
48
  "peerDependencies": {
49
- "@atlaskit/editor-common": "^107.16.0",
49
+ "@atlaskit/editor-common": "^107.20.0",
50
50
  "@atlaskit/tokens": "^6.0.0",
51
51
  "react": "^18.2.0",
52
52
  "react-dom": "^18.2.0"
53
53
  },
54
- "devDependencies": {
55
- "typescript": "~5.4.2"
56
- },
57
54
  "techstack": {
58
55
  "@atlassian/frontend": {
59
56
  "code-structure": [