@atlaskit/editor-plugin-media-insert 6.2.5 → 6.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/mediaInsertPlugin.js +4 -2
- package/dist/cjs/ui/MediaFromURL.js +16 -8
- package/dist/cjs/ui/MediaFromURLWithForm.js +15 -7
- package/dist/cjs/ui/MediaInsertPicker.js +8 -4
- package/dist/es2019/mediaInsertPlugin.js +4 -2
- package/dist/es2019/ui/MediaFromURL.js +13 -8
- package/dist/es2019/ui/MediaFromURLWithForm.js +12 -7
- package/dist/es2019/ui/MediaInsertPicker.js +7 -4
- package/dist/esm/mediaInsertPlugin.js +4 -2
- package/dist/esm/ui/MediaFromURL.js +16 -8
- package/dist/esm/ui/MediaFromURLWithForm.js +15 -7
- package/dist/esm/ui/MediaInsertPicker.js +8 -4
- package/dist/types/mediaInsertPluginType.d.ts +32 -0
- package/dist/types/types/index.d.ts +2 -1
- package/dist/types/ui/MediaFromURL.d.ts +2 -1
- package/dist/types/ui/MediaFromURLWithForm.d.ts +2 -1
- package/dist/types/ui/MediaInsertPicker.d.ts +1 -1
- package/dist/types-ts4.5/mediaInsertPluginType.d.ts +32 -0
- package/dist/types-ts4.5/types/index.d.ts +2 -1
- package/dist/types-ts4.5/ui/MediaFromURL.d.ts +2 -1
- package/dist/types-ts4.5/ui/MediaFromURLWithForm.d.ts +2 -1
- package/dist/types-ts4.5/ui/MediaInsertPicker.d.ts +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media-insert
|
|
2
2
|
|
|
3
|
+
## 6.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#143009](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/143009)
|
|
8
|
+
[`8ddfe6d95ad26`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8ddfe6d95ad26) -
|
|
9
|
+
[UX-3339] Adds a configuration for media insert to only allow for external links.
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 6.2.5
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -14,7 +14,8 @@ var _main = require("./pm-plugins/main");
|
|
|
14
14
|
var _pluginKey = require("./pm-plugins/plugin-key");
|
|
15
15
|
var _MediaInsertPicker = require("./ui/MediaInsertPicker");
|
|
16
16
|
var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_ref) {
|
|
17
|
-
var api = _ref.api
|
|
17
|
+
var api = _ref.api,
|
|
18
|
+
config = _ref.config;
|
|
18
19
|
return {
|
|
19
20
|
name: 'mediaInsert',
|
|
20
21
|
pmPlugins: function pmPlugins() {
|
|
@@ -116,7 +117,8 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
|
|
|
116
117
|
},
|
|
117
118
|
insertMediaSingle: insertMediaSingle,
|
|
118
119
|
insertExternalMediaSingle: insertExternalMediaSingle,
|
|
119
|
-
insertFile: insertFile
|
|
120
|
+
insertFile: insertFile,
|
|
121
|
+
isOnlyExternalLinks: config === null || config === void 0 ? void 0 : config.isOnlyExternalLinks
|
|
120
122
|
});
|
|
121
123
|
},
|
|
122
124
|
pluginsOptions: {
|
|
@@ -97,7 +97,8 @@ function MediaFromURL(_ref) {
|
|
|
97
97
|
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
|
|
98
98
|
closeMediaInsertPicker = _ref.closeMediaInsertPicker,
|
|
99
99
|
insertMediaSingle = _ref.insertMediaSingle,
|
|
100
|
-
insertExternalMediaSingle = _ref.insertExternalMediaSingle
|
|
100
|
+
insertExternalMediaSingle = _ref.insertExternalMediaSingle,
|
|
101
|
+
isOnlyExternalLinks = _ref.isOnlyExternalLinks;
|
|
101
102
|
var intl = (0, _reactIntlNext.useIntl)();
|
|
102
103
|
var strings = {
|
|
103
104
|
loadPreview: intl.formatMessage(_messages.mediaInsertMessages.loadPreview),
|
|
@@ -112,6 +113,10 @@ function MediaFromURL(_ref) {
|
|
|
112
113
|
_React$useReducer2 = (0, _slicedToArray2.default)(_React$useReducer, 2),
|
|
113
114
|
previewState = _React$useReducer2[0],
|
|
114
115
|
dispatch = _React$useReducer2[1];
|
|
116
|
+
var _React$useState = _react.default.useState(''),
|
|
117
|
+
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
118
|
+
url = _React$useState2[0],
|
|
119
|
+
setUrl = _React$useState2[1];
|
|
115
120
|
var pasteFlag = _react.default.useRef(false);
|
|
116
121
|
var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(dispatchAnalyticsEvent),
|
|
117
122
|
onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
|
|
@@ -201,14 +206,17 @@ function MediaFromURL(_ref) {
|
|
|
201
206
|
dispatch({
|
|
202
207
|
type: 'reset'
|
|
203
208
|
});
|
|
209
|
+
setUrl(url);
|
|
204
210
|
if (!isValidUrl(url)) {
|
|
205
211
|
return;
|
|
206
212
|
}
|
|
207
213
|
if (pasteFlag.current) {
|
|
208
214
|
pasteFlag.current = false;
|
|
209
|
-
|
|
215
|
+
if (!isOnlyExternalLinks) {
|
|
216
|
+
uploadExternalMedia(url);
|
|
217
|
+
}
|
|
210
218
|
}
|
|
211
|
-
}, [uploadExternalMedia]);
|
|
219
|
+
}, [uploadExternalMedia, isOnlyExternalLinks]);
|
|
212
220
|
var _onPaste = _react.default.useCallback(function (e, inputUrl) {
|
|
213
221
|
// Note: this is a little weird, but the paste event will always be
|
|
214
222
|
// fired before the change event when pasting. We don't really want to
|
|
@@ -230,7 +238,7 @@ function MediaFromURL(_ref) {
|
|
|
230
238
|
closeMediaInsertPicker();
|
|
231
239
|
}, [closeMediaInsertPicker, insertMediaSingle, previewState.previewInfo]);
|
|
232
240
|
var onExternalInsert = _react.default.useCallback(function (url) {
|
|
233
|
-
if (previewState.warning) {
|
|
241
|
+
if (previewState.warning || isOnlyExternalLinks) {
|
|
234
242
|
insertExternalMediaSingle({
|
|
235
243
|
url: url,
|
|
236
244
|
alt: '',
|
|
@@ -238,7 +246,7 @@ function MediaFromURL(_ref) {
|
|
|
238
246
|
});
|
|
239
247
|
}
|
|
240
248
|
closeMediaInsertPicker();
|
|
241
|
-
}, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning]);
|
|
249
|
+
}, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning, isOnlyExternalLinks]);
|
|
242
250
|
var onInputKeyPress = _react.default.useCallback(function (event) {
|
|
243
251
|
if (event && event.key === 'Esc') {
|
|
244
252
|
if (dispatchAnalyticsEvent) {
|
|
@@ -280,7 +288,7 @@ function MediaFromURL(_ref) {
|
|
|
280
288
|
if (previewState.previewInfo) {
|
|
281
289
|
return onInsert();
|
|
282
290
|
}
|
|
283
|
-
if (previewState.warning) {
|
|
291
|
+
if (previewState.warning || isOnlyExternalLinks) {
|
|
284
292
|
return onExternalInsert(inputUrl);
|
|
285
293
|
}
|
|
286
294
|
return uploadExternalMedia(inputUrl);
|
|
@@ -336,7 +344,7 @@ function MediaFromURL(_ref) {
|
|
|
336
344
|
}
|
|
337
345
|
})), /*#__PURE__*/_react.default.createElement(_form.MessageWrapper, null, error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
338
346
|
as: "span"
|
|
339
|
-
}, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
|
|
347
|
+
}, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
|
|
340
348
|
xcss: PreviewBoxStyles,
|
|
341
349
|
alignItems: "center",
|
|
342
350
|
justifyContent: "center"
|
|
@@ -372,7 +380,7 @@ function MediaFromURL(_ref) {
|
|
|
372
380
|
}, strings.cancel), /*#__PURE__*/_react.default.createElement(_new.default, {
|
|
373
381
|
type: "button",
|
|
374
382
|
appearance: "primary",
|
|
375
|
-
isDisabled: !previewState.previewInfo && !previewState.warning,
|
|
383
|
+
isDisabled: isOnlyExternalLinks ? !url || !isValidUrl(url) : !previewState.previewInfo && !previewState.warning,
|
|
376
384
|
onClick: function onClick() {
|
|
377
385
|
return formProps.onSubmit();
|
|
378
386
|
}
|
|
@@ -97,7 +97,8 @@ function MediaFromURLWithForm(_ref) {
|
|
|
97
97
|
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
|
|
98
98
|
closeMediaInsertPicker = _ref.closeMediaInsertPicker,
|
|
99
99
|
insertMediaSingle = _ref.insertMediaSingle,
|
|
100
|
-
insertExternalMediaSingle = _ref.insertExternalMediaSingle
|
|
100
|
+
insertExternalMediaSingle = _ref.insertExternalMediaSingle,
|
|
101
|
+
isOnlyExternalLinks = _ref.isOnlyExternalLinks;
|
|
101
102
|
var intl = (0, _reactIntlNext.useIntl)();
|
|
102
103
|
var strings = {
|
|
103
104
|
loadPreview: intl.formatMessage(_messages.mediaInsertMessages.loadPreview),
|
|
@@ -112,6 +113,10 @@ function MediaFromURLWithForm(_ref) {
|
|
|
112
113
|
_React$useReducer2 = (0, _slicedToArray2.default)(_React$useReducer, 2),
|
|
113
114
|
previewState = _React$useReducer2[0],
|
|
114
115
|
dispatch = _React$useReducer2[1];
|
|
116
|
+
var _React$useState = _react.default.useState(''),
|
|
117
|
+
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
118
|
+
url = _React$useState2[0],
|
|
119
|
+
setUrl = _React$useState2[1];
|
|
115
120
|
var pasteFlag = _react.default.useRef(false);
|
|
116
121
|
var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(dispatchAnalyticsEvent),
|
|
117
122
|
onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
|
|
@@ -201,14 +206,17 @@ function MediaFromURLWithForm(_ref) {
|
|
|
201
206
|
dispatch({
|
|
202
207
|
type: 'reset'
|
|
203
208
|
});
|
|
209
|
+
setUrl(url);
|
|
204
210
|
if (!isValidUrl(url)) {
|
|
205
211
|
return;
|
|
206
212
|
}
|
|
207
213
|
if (pasteFlag.current) {
|
|
208
214
|
pasteFlag.current = false;
|
|
209
|
-
|
|
215
|
+
if (!isOnlyExternalLinks) {
|
|
216
|
+
uploadExternalMedia(url);
|
|
217
|
+
}
|
|
210
218
|
}
|
|
211
|
-
}, [uploadExternalMedia]);
|
|
219
|
+
}, [uploadExternalMedia, isOnlyExternalLinks]);
|
|
212
220
|
var _onPaste = _react.default.useCallback(function (e, inputUrl) {
|
|
213
221
|
// Note: this is a little weird, but the paste event will always be
|
|
214
222
|
// fired before the change event when pasting. We don't really want to
|
|
@@ -230,7 +238,7 @@ function MediaFromURLWithForm(_ref) {
|
|
|
230
238
|
closeMediaInsertPicker();
|
|
231
239
|
}, [closeMediaInsertPicker, insertMediaSingle, previewState.previewInfo]);
|
|
232
240
|
var onExternalInsert = _react.default.useCallback(function (url) {
|
|
233
|
-
if (previewState.warning) {
|
|
241
|
+
if (previewState.warning || isOnlyExternalLinks) {
|
|
234
242
|
insertExternalMediaSingle({
|
|
235
243
|
url: url,
|
|
236
244
|
alt: '',
|
|
@@ -238,7 +246,7 @@ function MediaFromURLWithForm(_ref) {
|
|
|
238
246
|
});
|
|
239
247
|
}
|
|
240
248
|
closeMediaInsertPicker();
|
|
241
|
-
}, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning]);
|
|
249
|
+
}, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning, isOnlyExternalLinks]);
|
|
242
250
|
var onInputKeyPress = _react.default.useCallback(function (event) {
|
|
243
251
|
if (event && event.key === 'Esc') {
|
|
244
252
|
if (dispatchAnalyticsEvent) {
|
|
@@ -332,7 +340,7 @@ function MediaFromURLWithForm(_ref) {
|
|
|
332
340
|
}
|
|
333
341
|
})), /*#__PURE__*/_react.default.createElement(_form.MessageWrapper, null, error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
334
342
|
as: "span"
|
|
335
|
-
}, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
|
|
343
|
+
}, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
|
|
336
344
|
xcss: PreviewBoxStyles,
|
|
337
345
|
alignItems: "center",
|
|
338
346
|
justifyContent: "center"
|
|
@@ -365,7 +373,7 @@ function MediaFromURLWithForm(_ref) {
|
|
|
365
373
|
}, strings.cancel), /*#__PURE__*/_react.default.createElement(_new.default, {
|
|
366
374
|
type: "submit",
|
|
367
375
|
appearance: "primary",
|
|
368
|
-
isDisabled: !previewState.previewInfo && !previewState.warning
|
|
376
|
+
isDisabled: isOnlyExternalLinks ? !url || !isValidUrl(url) : !previewState.previewInfo && !previewState.warning
|
|
369
377
|
}, strings.insert)))))
|
|
370
378
|
);
|
|
371
379
|
});
|
|
@@ -56,7 +56,9 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
|
|
|
56
56
|
_closeMediaInsertPicker = _ref2.closeMediaInsertPicker,
|
|
57
57
|
insertMediaSingle = _ref2.insertMediaSingle,
|
|
58
58
|
insertExternalMediaSingle = _ref2.insertExternalMediaSingle,
|
|
59
|
-
insertFile = _ref2.insertFile
|
|
59
|
+
insertFile = _ref2.insertFile,
|
|
60
|
+
_ref2$isOnlyExternalL = _ref2.isOnlyExternalLinks,
|
|
61
|
+
isOnlyExternalLinks = _ref2$isOnlyExternalL === void 0 ? false : _ref2$isOnlyExternalL;
|
|
60
62
|
var _ref3 = (_useSharedPluginState = (_useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['mediaInsert'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaInsertState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {},
|
|
61
63
|
isOpen = _ref3.isOpen,
|
|
62
64
|
mountInfo = _ref3.mountInfo;
|
|
@@ -123,7 +125,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
|
|
|
123
125
|
id: "media-insert-tab-navigation"
|
|
124
126
|
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
125
127
|
paddingBlockEnd: "space.150"
|
|
126
|
-
}, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle)), /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/_react.default.createElement(CustomTabPanel, null, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
|
|
128
|
+
}, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle)), /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(CustomTabPanel, null, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
|
|
127
129
|
ref: autofocusRef,
|
|
128
130
|
mediaProvider: mediaProvider,
|
|
129
131
|
closeMediaInsertPicker: function closeMediaInsertPicker() {
|
|
@@ -140,7 +142,8 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
|
|
|
140
142
|
focusEditor();
|
|
141
143
|
},
|
|
142
144
|
insertMediaSingle: insertMediaSingle,
|
|
143
|
-
insertExternalMediaSingle: insertExternalMediaSingle
|
|
145
|
+
insertExternalMediaSingle: insertExternalMediaSingle,
|
|
146
|
+
isOnlyExternalLinks: isOnlyExternalLinks
|
|
144
147
|
}) : /*#__PURE__*/_react.default.createElement(_MediaFromURLWithForm.MediaFromURLWithForm, {
|
|
145
148
|
mediaProvider: mediaProvider,
|
|
146
149
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
@@ -149,7 +152,8 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
|
|
|
149
152
|
focusEditor();
|
|
150
153
|
},
|
|
151
154
|
insertMediaSingle: insertMediaSingle,
|
|
152
|
-
insertExternalMediaSingle: insertExternalMediaSingle
|
|
155
|
+
insertExternalMediaSingle: insertExternalMediaSingle,
|
|
156
|
+
isOnlyExternalLinks: isOnlyExternalLinks
|
|
153
157
|
}))));
|
|
154
158
|
}));
|
|
155
159
|
};
|
|
@@ -7,7 +7,8 @@ import { createPlugin } from './pm-plugins/main';
|
|
|
7
7
|
import { pluginKey } from './pm-plugins/plugin-key';
|
|
8
8
|
import { MediaInsertPicker } from './ui/MediaInsertPicker';
|
|
9
9
|
export const mediaInsertPlugin = ({
|
|
10
|
-
api
|
|
10
|
+
api,
|
|
11
|
+
config
|
|
11
12
|
}) => {
|
|
12
13
|
return {
|
|
13
14
|
name: 'mediaInsert',
|
|
@@ -110,7 +111,8 @@ export const mediaInsertPlugin = ({
|
|
|
110
111
|
closeMediaInsertPicker: () => editorView.dispatch(closeMediaInsertPicker(editorView.state.tr)),
|
|
111
112
|
insertMediaSingle: insertMediaSingle,
|
|
112
113
|
insertExternalMediaSingle: insertExternalMediaSingle,
|
|
113
|
-
insertFile: insertFile
|
|
114
|
+
insertFile: insertFile,
|
|
115
|
+
isOnlyExternalLinks: config === null || config === void 0 ? void 0 : config.isOnlyExternalLinks
|
|
114
116
|
});
|
|
115
117
|
},
|
|
116
118
|
pluginsOptions: {
|
|
@@ -82,7 +82,8 @@ export function MediaFromURL({
|
|
|
82
82
|
dispatchAnalyticsEvent,
|
|
83
83
|
closeMediaInsertPicker,
|
|
84
84
|
insertMediaSingle,
|
|
85
|
-
insertExternalMediaSingle
|
|
85
|
+
insertExternalMediaSingle,
|
|
86
|
+
isOnlyExternalLinks
|
|
86
87
|
}) {
|
|
87
88
|
const intl = useIntl();
|
|
88
89
|
const strings = {
|
|
@@ -95,6 +96,7 @@ export function MediaFromURL({
|
|
|
95
96
|
invalidUrl: intl.formatMessage(mediaInsertMessages.invalidUrlErrorMessage)
|
|
96
97
|
};
|
|
97
98
|
const [previewState, dispatch] = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE);
|
|
99
|
+
const [url, setUrl] = React.useState('');
|
|
98
100
|
const pasteFlag = React.useRef(false);
|
|
99
101
|
const {
|
|
100
102
|
onUploadButtonClickedAnalytics,
|
|
@@ -166,14 +168,17 @@ export function MediaFromURL({
|
|
|
166
168
|
dispatch({
|
|
167
169
|
type: 'reset'
|
|
168
170
|
});
|
|
171
|
+
setUrl(url);
|
|
169
172
|
if (!isValidUrl(url)) {
|
|
170
173
|
return;
|
|
171
174
|
}
|
|
172
175
|
if (pasteFlag.current) {
|
|
173
176
|
pasteFlag.current = false;
|
|
174
|
-
|
|
177
|
+
if (!isOnlyExternalLinks) {
|
|
178
|
+
uploadExternalMedia(url);
|
|
179
|
+
}
|
|
175
180
|
}
|
|
176
|
-
}, [uploadExternalMedia]);
|
|
181
|
+
}, [uploadExternalMedia, isOnlyExternalLinks]);
|
|
177
182
|
const onPaste = React.useCallback((e, inputUrl) => {
|
|
178
183
|
// Note: this is a little weird, but the paste event will always be
|
|
179
184
|
// fired before the change event when pasting. We don't really want to
|
|
@@ -195,7 +200,7 @@ export function MediaFromURL({
|
|
|
195
200
|
closeMediaInsertPicker();
|
|
196
201
|
}, [closeMediaInsertPicker, insertMediaSingle, previewState.previewInfo]);
|
|
197
202
|
const onExternalInsert = React.useCallback(url => {
|
|
198
|
-
if (previewState.warning) {
|
|
203
|
+
if (previewState.warning || isOnlyExternalLinks) {
|
|
199
204
|
insertExternalMediaSingle({
|
|
200
205
|
url,
|
|
201
206
|
alt: '',
|
|
@@ -203,7 +208,7 @@ export function MediaFromURL({
|
|
|
203
208
|
});
|
|
204
209
|
}
|
|
205
210
|
closeMediaInsertPicker();
|
|
206
|
-
}, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning]);
|
|
211
|
+
}, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning, isOnlyExternalLinks]);
|
|
207
212
|
const onInputKeyPress = React.useCallback(event => {
|
|
208
213
|
if (event && event.key === 'Esc') {
|
|
209
214
|
if (dispatchAnalyticsEvent) {
|
|
@@ -246,7 +251,7 @@ export function MediaFromURL({
|
|
|
246
251
|
if (previewState.previewInfo) {
|
|
247
252
|
return onInsert();
|
|
248
253
|
}
|
|
249
|
-
if (previewState.warning) {
|
|
254
|
+
if (previewState.warning || isOnlyExternalLinks) {
|
|
250
255
|
return onExternalInsert(inputUrl);
|
|
251
256
|
}
|
|
252
257
|
return uploadExternalMedia(inputUrl);
|
|
@@ -299,7 +304,7 @@ export function MediaFromURL({
|
|
|
299
304
|
}
|
|
300
305
|
})), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
|
|
301
306
|
as: "span"
|
|
302
|
-
}, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && /*#__PURE__*/React.createElement(Flex, {
|
|
307
|
+
}, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Flex, {
|
|
303
308
|
xcss: PreviewBoxStyles,
|
|
304
309
|
alignItems: "center",
|
|
305
310
|
justifyContent: "center"
|
|
@@ -330,7 +335,7 @@ export function MediaFromURL({
|
|
|
330
335
|
}, strings.cancel), /*#__PURE__*/React.createElement(Button, {
|
|
331
336
|
type: "button",
|
|
332
337
|
appearance: "primary",
|
|
333
|
-
isDisabled: !previewState.previewInfo && !previewState.warning,
|
|
338
|
+
isDisabled: isOnlyExternalLinks ? !url || !isValidUrl(url) : !previewState.previewInfo && !previewState.warning,
|
|
334
339
|
onClick: () => formProps.onSubmit()
|
|
335
340
|
}, strings.insert))))));
|
|
336
341
|
}
|
|
@@ -82,7 +82,8 @@ export function MediaFromURLWithForm({
|
|
|
82
82
|
dispatchAnalyticsEvent,
|
|
83
83
|
closeMediaInsertPicker,
|
|
84
84
|
insertMediaSingle,
|
|
85
|
-
insertExternalMediaSingle
|
|
85
|
+
insertExternalMediaSingle,
|
|
86
|
+
isOnlyExternalLinks
|
|
86
87
|
}) {
|
|
87
88
|
const intl = useIntl();
|
|
88
89
|
const strings = {
|
|
@@ -95,6 +96,7 @@ export function MediaFromURLWithForm({
|
|
|
95
96
|
invalidUrl: intl.formatMessage(mediaInsertMessages.invalidUrlErrorMessage)
|
|
96
97
|
};
|
|
97
98
|
const [previewState, dispatch] = React.useReducer(previewStateReducer, INITIAL_PREVIEW_STATE);
|
|
99
|
+
const [url, setUrl] = React.useState('');
|
|
98
100
|
const pasteFlag = React.useRef(false);
|
|
99
101
|
const {
|
|
100
102
|
onUploadButtonClickedAnalytics,
|
|
@@ -166,14 +168,17 @@ export function MediaFromURLWithForm({
|
|
|
166
168
|
dispatch({
|
|
167
169
|
type: 'reset'
|
|
168
170
|
});
|
|
171
|
+
setUrl(url);
|
|
169
172
|
if (!isValidUrl(url)) {
|
|
170
173
|
return;
|
|
171
174
|
}
|
|
172
175
|
if (pasteFlag.current) {
|
|
173
176
|
pasteFlag.current = false;
|
|
174
|
-
|
|
177
|
+
if (!isOnlyExternalLinks) {
|
|
178
|
+
uploadExternalMedia(url);
|
|
179
|
+
}
|
|
175
180
|
}
|
|
176
|
-
}, [uploadExternalMedia]);
|
|
181
|
+
}, [uploadExternalMedia, isOnlyExternalLinks]);
|
|
177
182
|
const onPaste = React.useCallback((e, inputUrl) => {
|
|
178
183
|
// Note: this is a little weird, but the paste event will always be
|
|
179
184
|
// fired before the change event when pasting. We don't really want to
|
|
@@ -195,7 +200,7 @@ export function MediaFromURLWithForm({
|
|
|
195
200
|
closeMediaInsertPicker();
|
|
196
201
|
}, [closeMediaInsertPicker, insertMediaSingle, previewState.previewInfo]);
|
|
197
202
|
const onExternalInsert = React.useCallback(url => {
|
|
198
|
-
if (previewState.warning) {
|
|
203
|
+
if (previewState.warning || isOnlyExternalLinks) {
|
|
199
204
|
insertExternalMediaSingle({
|
|
200
205
|
url,
|
|
201
206
|
alt: '',
|
|
@@ -203,7 +208,7 @@ export function MediaFromURLWithForm({
|
|
|
203
208
|
});
|
|
204
209
|
}
|
|
205
210
|
closeMediaInsertPicker();
|
|
206
|
-
}, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning]);
|
|
211
|
+
}, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning, isOnlyExternalLinks]);
|
|
207
212
|
const onInputKeyPress = React.useCallback(event => {
|
|
208
213
|
if (event && event.key === 'Esc') {
|
|
209
214
|
if (dispatchAnalyticsEvent) {
|
|
@@ -295,7 +300,7 @@ export function MediaFromURLWithForm({
|
|
|
295
300
|
}
|
|
296
301
|
})), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
|
|
297
302
|
as: "span"
|
|
298
|
-
}, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && /*#__PURE__*/React.createElement(Flex, {
|
|
303
|
+
}, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Flex, {
|
|
299
304
|
xcss: PreviewBoxStyles,
|
|
300
305
|
alignItems: "center",
|
|
301
306
|
justifyContent: "center"
|
|
@@ -325,6 +330,6 @@ export function MediaFromURLWithForm({
|
|
|
325
330
|
}, strings.cancel), /*#__PURE__*/React.createElement(Button, {
|
|
326
331
|
type: "submit",
|
|
327
332
|
appearance: "primary",
|
|
328
|
-
isDisabled: !previewState.previewInfo && !previewState.warning
|
|
333
|
+
isDisabled: isOnlyExternalLinks ? !url || !isValidUrl(url) : !previewState.previewInfo && !previewState.warning
|
|
329
334
|
}, strings.insert))))));
|
|
330
335
|
}
|
|
@@ -46,7 +46,8 @@ export const MediaInsertPicker = ({
|
|
|
46
46
|
closeMediaInsertPicker,
|
|
47
47
|
insertMediaSingle,
|
|
48
48
|
insertExternalMediaSingle,
|
|
49
|
-
insertFile
|
|
49
|
+
insertFile,
|
|
50
|
+
isOnlyExternalLinks = false
|
|
50
51
|
}) => {
|
|
51
52
|
var _useSharedPluginState, _useSharedPluginState2, _useSharedPluginState3, _useSharedPluginState4;
|
|
52
53
|
const {
|
|
@@ -114,7 +115,7 @@ export const MediaInsertPicker = ({
|
|
|
114
115
|
id: "media-insert-tab-navigation"
|
|
115
116
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
116
117
|
paddingBlockEnd: "space.150"
|
|
117
|
-
}, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
|
|
118
|
+
}, /*#__PURE__*/React.createElement(TabList, null, !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), !isOnlyExternalLinks && /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
|
|
118
119
|
ref: autofocusRef,
|
|
119
120
|
mediaProvider: mediaProvider,
|
|
120
121
|
closeMediaInsertPicker: () => {
|
|
@@ -131,7 +132,8 @@ export const MediaInsertPicker = ({
|
|
|
131
132
|
focusEditor();
|
|
132
133
|
},
|
|
133
134
|
insertMediaSingle: insertMediaSingle,
|
|
134
|
-
insertExternalMediaSingle: insertExternalMediaSingle
|
|
135
|
+
insertExternalMediaSingle: insertExternalMediaSingle,
|
|
136
|
+
isOnlyExternalLinks: isOnlyExternalLinks
|
|
135
137
|
}) : /*#__PURE__*/React.createElement(MediaFromURLWithForm, {
|
|
136
138
|
mediaProvider: mediaProvider,
|
|
137
139
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
@@ -140,6 +142,7 @@ export const MediaInsertPicker = ({
|
|
|
140
142
|
focusEditor();
|
|
141
143
|
},
|
|
142
144
|
insertMediaSingle: insertMediaSingle,
|
|
143
|
-
insertExternalMediaSingle: insertExternalMediaSingle
|
|
145
|
+
insertExternalMediaSingle: insertExternalMediaSingle,
|
|
146
|
+
isOnlyExternalLinks: isOnlyExternalLinks
|
|
144
147
|
}))))));
|
|
145
148
|
};
|
|
@@ -7,7 +7,8 @@ import { createPlugin } from './pm-plugins/main';
|
|
|
7
7
|
import { pluginKey } from './pm-plugins/plugin-key';
|
|
8
8
|
import { MediaInsertPicker } from './ui/MediaInsertPicker';
|
|
9
9
|
export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
|
|
10
|
-
var api = _ref.api
|
|
10
|
+
var api = _ref.api,
|
|
11
|
+
config = _ref.config;
|
|
11
12
|
return {
|
|
12
13
|
name: 'mediaInsert',
|
|
13
14
|
pmPlugins: function pmPlugins() {
|
|
@@ -109,7 +110,8 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
|
|
|
109
110
|
},
|
|
110
111
|
insertMediaSingle: insertMediaSingle,
|
|
111
112
|
insertExternalMediaSingle: insertExternalMediaSingle,
|
|
112
|
-
insertFile: insertFile
|
|
113
|
+
insertFile: insertFile,
|
|
114
|
+
isOnlyExternalLinks: config === null || config === void 0 ? void 0 : config.isOnlyExternalLinks
|
|
113
115
|
});
|
|
114
116
|
},
|
|
115
117
|
pluginsOptions: {
|
|
@@ -86,7 +86,8 @@ export function MediaFromURL(_ref) {
|
|
|
86
86
|
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
|
|
87
87
|
closeMediaInsertPicker = _ref.closeMediaInsertPicker,
|
|
88
88
|
insertMediaSingle = _ref.insertMediaSingle,
|
|
89
|
-
insertExternalMediaSingle = _ref.insertExternalMediaSingle
|
|
89
|
+
insertExternalMediaSingle = _ref.insertExternalMediaSingle,
|
|
90
|
+
isOnlyExternalLinks = _ref.isOnlyExternalLinks;
|
|
90
91
|
var intl = useIntl();
|
|
91
92
|
var strings = {
|
|
92
93
|
loadPreview: intl.formatMessage(mediaInsertMessages.loadPreview),
|
|
@@ -101,6 +102,10 @@ export function MediaFromURL(_ref) {
|
|
|
101
102
|
_React$useReducer2 = _slicedToArray(_React$useReducer, 2),
|
|
102
103
|
previewState = _React$useReducer2[0],
|
|
103
104
|
dispatch = _React$useReducer2[1];
|
|
105
|
+
var _React$useState = React.useState(''),
|
|
106
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
107
|
+
url = _React$useState2[0],
|
|
108
|
+
setUrl = _React$useState2[1];
|
|
104
109
|
var pasteFlag = React.useRef(false);
|
|
105
110
|
var _useAnalyticsEvents = useAnalyticsEvents(dispatchAnalyticsEvent),
|
|
106
111
|
onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
|
|
@@ -190,14 +195,17 @@ export function MediaFromURL(_ref) {
|
|
|
190
195
|
dispatch({
|
|
191
196
|
type: 'reset'
|
|
192
197
|
});
|
|
198
|
+
setUrl(url);
|
|
193
199
|
if (!isValidUrl(url)) {
|
|
194
200
|
return;
|
|
195
201
|
}
|
|
196
202
|
if (pasteFlag.current) {
|
|
197
203
|
pasteFlag.current = false;
|
|
198
|
-
|
|
204
|
+
if (!isOnlyExternalLinks) {
|
|
205
|
+
uploadExternalMedia(url);
|
|
206
|
+
}
|
|
199
207
|
}
|
|
200
|
-
}, [uploadExternalMedia]);
|
|
208
|
+
}, [uploadExternalMedia, isOnlyExternalLinks]);
|
|
201
209
|
var _onPaste = React.useCallback(function (e, inputUrl) {
|
|
202
210
|
// Note: this is a little weird, but the paste event will always be
|
|
203
211
|
// fired before the change event when pasting. We don't really want to
|
|
@@ -219,7 +227,7 @@ export function MediaFromURL(_ref) {
|
|
|
219
227
|
closeMediaInsertPicker();
|
|
220
228
|
}, [closeMediaInsertPicker, insertMediaSingle, previewState.previewInfo]);
|
|
221
229
|
var onExternalInsert = React.useCallback(function (url) {
|
|
222
|
-
if (previewState.warning) {
|
|
230
|
+
if (previewState.warning || isOnlyExternalLinks) {
|
|
223
231
|
insertExternalMediaSingle({
|
|
224
232
|
url: url,
|
|
225
233
|
alt: '',
|
|
@@ -227,7 +235,7 @@ export function MediaFromURL(_ref) {
|
|
|
227
235
|
});
|
|
228
236
|
}
|
|
229
237
|
closeMediaInsertPicker();
|
|
230
|
-
}, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning]);
|
|
238
|
+
}, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning, isOnlyExternalLinks]);
|
|
231
239
|
var onInputKeyPress = React.useCallback(function (event) {
|
|
232
240
|
if (event && event.key === 'Esc') {
|
|
233
241
|
if (dispatchAnalyticsEvent) {
|
|
@@ -269,7 +277,7 @@ export function MediaFromURL(_ref) {
|
|
|
269
277
|
if (previewState.previewInfo) {
|
|
270
278
|
return onInsert();
|
|
271
279
|
}
|
|
272
|
-
if (previewState.warning) {
|
|
280
|
+
if (previewState.warning || isOnlyExternalLinks) {
|
|
273
281
|
return onExternalInsert(inputUrl);
|
|
274
282
|
}
|
|
275
283
|
return uploadExternalMedia(inputUrl);
|
|
@@ -325,7 +333,7 @@ export function MediaFromURL(_ref) {
|
|
|
325
333
|
}
|
|
326
334
|
})), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
|
|
327
335
|
as: "span"
|
|
328
|
-
}, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && /*#__PURE__*/React.createElement(Flex, {
|
|
336
|
+
}, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Flex, {
|
|
329
337
|
xcss: PreviewBoxStyles,
|
|
330
338
|
alignItems: "center",
|
|
331
339
|
justifyContent: "center"
|
|
@@ -361,7 +369,7 @@ export function MediaFromURL(_ref) {
|
|
|
361
369
|
}, strings.cancel), /*#__PURE__*/React.createElement(Button, {
|
|
362
370
|
type: "button",
|
|
363
371
|
appearance: "primary",
|
|
364
|
-
isDisabled: !previewState.previewInfo && !previewState.warning,
|
|
372
|
+
isDisabled: isOnlyExternalLinks ? !url || !isValidUrl(url) : !previewState.previewInfo && !previewState.warning,
|
|
365
373
|
onClick: function onClick() {
|
|
366
374
|
return formProps.onSubmit();
|
|
367
375
|
}
|
|
@@ -86,7 +86,8 @@ export function MediaFromURLWithForm(_ref) {
|
|
|
86
86
|
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
|
|
87
87
|
closeMediaInsertPicker = _ref.closeMediaInsertPicker,
|
|
88
88
|
insertMediaSingle = _ref.insertMediaSingle,
|
|
89
|
-
insertExternalMediaSingle = _ref.insertExternalMediaSingle
|
|
89
|
+
insertExternalMediaSingle = _ref.insertExternalMediaSingle,
|
|
90
|
+
isOnlyExternalLinks = _ref.isOnlyExternalLinks;
|
|
90
91
|
var intl = useIntl();
|
|
91
92
|
var strings = {
|
|
92
93
|
loadPreview: intl.formatMessage(mediaInsertMessages.loadPreview),
|
|
@@ -101,6 +102,10 @@ export function MediaFromURLWithForm(_ref) {
|
|
|
101
102
|
_React$useReducer2 = _slicedToArray(_React$useReducer, 2),
|
|
102
103
|
previewState = _React$useReducer2[0],
|
|
103
104
|
dispatch = _React$useReducer2[1];
|
|
105
|
+
var _React$useState = React.useState(''),
|
|
106
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
107
|
+
url = _React$useState2[0],
|
|
108
|
+
setUrl = _React$useState2[1];
|
|
104
109
|
var pasteFlag = React.useRef(false);
|
|
105
110
|
var _useAnalyticsEvents = useAnalyticsEvents(dispatchAnalyticsEvent),
|
|
106
111
|
onUploadButtonClickedAnalytics = _useAnalyticsEvents.onUploadButtonClickedAnalytics,
|
|
@@ -190,14 +195,17 @@ export function MediaFromURLWithForm(_ref) {
|
|
|
190
195
|
dispatch({
|
|
191
196
|
type: 'reset'
|
|
192
197
|
});
|
|
198
|
+
setUrl(url);
|
|
193
199
|
if (!isValidUrl(url)) {
|
|
194
200
|
return;
|
|
195
201
|
}
|
|
196
202
|
if (pasteFlag.current) {
|
|
197
203
|
pasteFlag.current = false;
|
|
198
|
-
|
|
204
|
+
if (!isOnlyExternalLinks) {
|
|
205
|
+
uploadExternalMedia(url);
|
|
206
|
+
}
|
|
199
207
|
}
|
|
200
|
-
}, [uploadExternalMedia]);
|
|
208
|
+
}, [uploadExternalMedia, isOnlyExternalLinks]);
|
|
201
209
|
var _onPaste = React.useCallback(function (e, inputUrl) {
|
|
202
210
|
// Note: this is a little weird, but the paste event will always be
|
|
203
211
|
// fired before the change event when pasting. We don't really want to
|
|
@@ -219,7 +227,7 @@ export function MediaFromURLWithForm(_ref) {
|
|
|
219
227
|
closeMediaInsertPicker();
|
|
220
228
|
}, [closeMediaInsertPicker, insertMediaSingle, previewState.previewInfo]);
|
|
221
229
|
var onExternalInsert = React.useCallback(function (url) {
|
|
222
|
-
if (previewState.warning) {
|
|
230
|
+
if (previewState.warning || isOnlyExternalLinks) {
|
|
223
231
|
insertExternalMediaSingle({
|
|
224
232
|
url: url,
|
|
225
233
|
alt: '',
|
|
@@ -227,7 +235,7 @@ export function MediaFromURLWithForm(_ref) {
|
|
|
227
235
|
});
|
|
228
236
|
}
|
|
229
237
|
closeMediaInsertPicker();
|
|
230
|
-
}, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning]);
|
|
238
|
+
}, [closeMediaInsertPicker, insertExternalMediaSingle, previewState.warning, isOnlyExternalLinks]);
|
|
231
239
|
var onInputKeyPress = React.useCallback(function (event) {
|
|
232
240
|
if (event && event.key === 'Esc') {
|
|
233
241
|
if (dispatchAnalyticsEvent) {
|
|
@@ -321,7 +329,7 @@ export function MediaFromURLWithForm(_ref) {
|
|
|
321
329
|
}
|
|
322
330
|
})), /*#__PURE__*/React.createElement(MessageWrapper, null, error && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(Box, {
|
|
323
331
|
as: "span"
|
|
324
|
-
}, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && /*#__PURE__*/React.createElement(Flex, {
|
|
332
|
+
}, error)))), !previewState.previewInfo && !previewState.error && !previewState.warning && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Flex, {
|
|
325
333
|
xcss: PreviewBoxStyles,
|
|
326
334
|
alignItems: "center",
|
|
327
335
|
justifyContent: "center"
|
|
@@ -354,7 +362,7 @@ export function MediaFromURLWithForm(_ref) {
|
|
|
354
362
|
}, strings.cancel), /*#__PURE__*/React.createElement(Button, {
|
|
355
363
|
type: "submit",
|
|
356
364
|
appearance: "primary",
|
|
357
|
-
isDisabled: !previewState.previewInfo && !previewState.warning
|
|
365
|
+
isDisabled: isOnlyExternalLinks ? !url || !isValidUrl(url) : !previewState.previewInfo && !previewState.warning
|
|
358
366
|
}, strings.insert)))))
|
|
359
367
|
);
|
|
360
368
|
});
|
|
@@ -46,7 +46,9 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
|
|
|
46
46
|
_closeMediaInsertPicker = _ref2.closeMediaInsertPicker,
|
|
47
47
|
insertMediaSingle = _ref2.insertMediaSingle,
|
|
48
48
|
insertExternalMediaSingle = _ref2.insertExternalMediaSingle,
|
|
49
|
-
insertFile = _ref2.insertFile
|
|
49
|
+
insertFile = _ref2.insertFile,
|
|
50
|
+
_ref2$isOnlyExternalL = _ref2.isOnlyExternalLinks,
|
|
51
|
+
isOnlyExternalLinks = _ref2$isOnlyExternalL === void 0 ? false : _ref2$isOnlyExternalL;
|
|
50
52
|
var _ref3 = (_useSharedPluginState = (_useSharedPluginState2 = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaInsertState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {},
|
|
51
53
|
isOpen = _ref3.isOpen,
|
|
52
54
|
mountInfo = _ref3.mountInfo;
|
|
@@ -113,7 +115,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
|
|
|
113
115
|
id: "media-insert-tab-navigation"
|
|
114
116
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
115
117
|
paddingBlockEnd: "space.150"
|
|
116
|
-
}, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
|
|
118
|
+
}, /*#__PURE__*/React.createElement(TabList, null, !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), !isOnlyExternalLinks && /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
|
|
117
119
|
ref: autofocusRef,
|
|
118
120
|
mediaProvider: mediaProvider,
|
|
119
121
|
closeMediaInsertPicker: function closeMediaInsertPicker() {
|
|
@@ -130,7 +132,8 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
|
|
|
130
132
|
focusEditor();
|
|
131
133
|
},
|
|
132
134
|
insertMediaSingle: insertMediaSingle,
|
|
133
|
-
insertExternalMediaSingle: insertExternalMediaSingle
|
|
135
|
+
insertExternalMediaSingle: insertExternalMediaSingle,
|
|
136
|
+
isOnlyExternalLinks: isOnlyExternalLinks
|
|
134
137
|
}) : /*#__PURE__*/React.createElement(MediaFromURLWithForm, {
|
|
135
138
|
mediaProvider: mediaProvider,
|
|
136
139
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
@@ -139,7 +142,8 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
|
|
|
139
142
|
focusEditor();
|
|
140
143
|
},
|
|
141
144
|
insertMediaSingle: insertMediaSingle,
|
|
142
|
-
insertExternalMediaSingle: insertExternalMediaSingle
|
|
145
|
+
insertExternalMediaSingle: insertExternalMediaSingle,
|
|
146
|
+
isOnlyExternalLinks: isOnlyExternalLinks
|
|
143
147
|
}))));
|
|
144
148
|
}));
|
|
145
149
|
};
|
|
@@ -20,8 +20,40 @@ export type MediaInsertPluginCommands = {
|
|
|
20
20
|
mountPoint: HTMLElement;
|
|
21
21
|
}) => EditorCommand;
|
|
22
22
|
};
|
|
23
|
+
export type MediaInsertPluginConfig = {
|
|
24
|
+
/**
|
|
25
|
+
* This will only allow users to insert media using URLs, they cannot insert media using files from their computer.
|
|
26
|
+
* Files that are inserted with a URL will attempt to be uploaded using `editor-plugin-media`
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```typescript
|
|
30
|
+
* createDefaultPreset({ featureFlags: {}, paste: {} })
|
|
31
|
+
* .add(listPlugin)
|
|
32
|
+
* .add(gridPlugin)
|
|
33
|
+
* .add([mediaPlugin, { provider, allowMediaSingle: true, }])
|
|
34
|
+
* .add(insertBlockPlugin)
|
|
35
|
+
* .add(contentInsertionPlugin)
|
|
36
|
+
* .add([mediaInsertPlugin, { isOnlyExternalLinks: true }])
|
|
37
|
+
* ```
|
|
38
|
+
*
|
|
39
|
+
* To disable trying to upload media from the external URLs we also need to disable this auto upload, in the media plugin:
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```typescript
|
|
43
|
+
* createDefaultPreset({ featureFlags: {}, paste: {} })
|
|
44
|
+
* .add(listPlugin)
|
|
45
|
+
* .add(gridPlugin)
|
|
46
|
+
* .add([mediaPlugin, { provider, allowMediaSingle: true, isExternalMediaUploadDisabled: true }])
|
|
47
|
+
* .add(insertBlockPlugin)
|
|
48
|
+
* .add(contentInsertionPlugin)
|
|
49
|
+
* .add([mediaInsertPlugin, { isOnlyExternalLinks: true }])
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
isOnlyExternalLinks?: boolean;
|
|
53
|
+
};
|
|
23
54
|
export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
|
|
24
55
|
dependencies: MediaInsertPluginDependencies;
|
|
25
56
|
sharedState: MediaInsertPluginState;
|
|
26
57
|
commands: MediaInsertPluginCommands;
|
|
58
|
+
pluginConfiguration: MediaInsertPluginConfig | undefined;
|
|
27
59
|
}>;
|
|
@@ -2,7 +2,7 @@ import type { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
|
|
|
2
2
|
import type { Providers } from '@atlaskit/editor-common/provider-factory';
|
|
3
3
|
import type { UiComponentFactoryParams, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
4
|
import { type MediaState, type MediaStateEventSubscriber } from '@atlaskit/editor-plugin-media/types';
|
|
5
|
-
import type { MediaInsertPlugin } from '../mediaInsertPluginType';
|
|
5
|
+
import type { MediaInsertPlugin, MediaInsertPluginConfig } from '../mediaInsertPluginType';
|
|
6
6
|
export type InsertMediaSingle = (props: {
|
|
7
7
|
mediaState: MediaState;
|
|
8
8
|
inputMethod: InputMethodInsertMedia;
|
|
@@ -24,4 +24,5 @@ export type MediaInsertPickerProps = Pick<UiComponentFactoryParams, 'editorView'
|
|
|
24
24
|
insertMediaSingle: InsertMediaSingle;
|
|
25
25
|
insertExternalMediaSingle: InsertExternalMediaSingle;
|
|
26
26
|
insertFile: InsertFile;
|
|
27
|
+
isOnlyExternalLinks: MediaInsertPluginConfig['isOnlyExternalLinks'];
|
|
27
28
|
};
|
|
@@ -9,6 +9,7 @@ type Props = {
|
|
|
9
9
|
closeMediaInsertPicker: () => void;
|
|
10
10
|
insertMediaSingle: InsertMediaSingle;
|
|
11
11
|
insertExternalMediaSingle: InsertExternalMediaSingle;
|
|
12
|
+
isOnlyExternalLinks: boolean;
|
|
12
13
|
};
|
|
13
|
-
export declare function MediaFromURL({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: Props): React.JSX.Element;
|
|
14
|
+
export declare function MediaFromURL({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, }: Props): React.JSX.Element;
|
|
14
15
|
export {};
|
|
@@ -9,6 +9,7 @@ type Props = {
|
|
|
9
9
|
closeMediaInsertPicker: () => void;
|
|
10
10
|
insertMediaSingle: InsertMediaSingle;
|
|
11
11
|
insertExternalMediaSingle: InsertExternalMediaSingle;
|
|
12
|
+
isOnlyExternalLinks: boolean;
|
|
12
13
|
};
|
|
13
|
-
export declare function MediaFromURLWithForm({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: Props): React.JSX.Element;
|
|
14
|
+
export declare function MediaFromURLWithForm({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, }: Props): React.JSX.Element;
|
|
14
15
|
export {};
|
|
@@ -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, }: MediaInsertPickerProps) => React.JSX.Element | null;
|
|
3
|
+
export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, insertFile, isOnlyExternalLinks, }: MediaInsertPickerProps) => React.JSX.Element | null;
|
|
@@ -20,8 +20,40 @@ export type MediaInsertPluginCommands = {
|
|
|
20
20
|
mountPoint: HTMLElement;
|
|
21
21
|
}) => EditorCommand;
|
|
22
22
|
};
|
|
23
|
+
export type MediaInsertPluginConfig = {
|
|
24
|
+
/**
|
|
25
|
+
* This will only allow users to insert media using URLs, they cannot insert media using files from their computer.
|
|
26
|
+
* Files that are inserted with a URL will attempt to be uploaded using `editor-plugin-media`
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```typescript
|
|
30
|
+
* createDefaultPreset({ featureFlags: {}, paste: {} })
|
|
31
|
+
* .add(listPlugin)
|
|
32
|
+
* .add(gridPlugin)
|
|
33
|
+
* .add([mediaPlugin, { provider, allowMediaSingle: true, }])
|
|
34
|
+
* .add(insertBlockPlugin)
|
|
35
|
+
* .add(contentInsertionPlugin)
|
|
36
|
+
* .add([mediaInsertPlugin, { isOnlyExternalLinks: true }])
|
|
37
|
+
* ```
|
|
38
|
+
*
|
|
39
|
+
* To disable trying to upload media from the external URLs we also need to disable this auto upload, in the media plugin:
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```typescript
|
|
43
|
+
* createDefaultPreset({ featureFlags: {}, paste: {} })
|
|
44
|
+
* .add(listPlugin)
|
|
45
|
+
* .add(gridPlugin)
|
|
46
|
+
* .add([mediaPlugin, { provider, allowMediaSingle: true, isExternalMediaUploadDisabled: true }])
|
|
47
|
+
* .add(insertBlockPlugin)
|
|
48
|
+
* .add(contentInsertionPlugin)
|
|
49
|
+
* .add([mediaInsertPlugin, { isOnlyExternalLinks: true }])
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
isOnlyExternalLinks?: boolean;
|
|
53
|
+
};
|
|
23
54
|
export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
|
|
24
55
|
dependencies: MediaInsertPluginDependencies;
|
|
25
56
|
sharedState: MediaInsertPluginState;
|
|
26
57
|
commands: MediaInsertPluginCommands;
|
|
58
|
+
pluginConfiguration: MediaInsertPluginConfig | undefined;
|
|
27
59
|
}>;
|
|
@@ -2,7 +2,7 @@ import type { InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
|
|
|
2
2
|
import type { Providers } from '@atlaskit/editor-common/provider-factory';
|
|
3
3
|
import type { UiComponentFactoryParams, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
4
|
import { type MediaState, type MediaStateEventSubscriber } from '@atlaskit/editor-plugin-media/types';
|
|
5
|
-
import type { MediaInsertPlugin } from '../mediaInsertPluginType';
|
|
5
|
+
import type { MediaInsertPlugin, MediaInsertPluginConfig } from '../mediaInsertPluginType';
|
|
6
6
|
export type InsertMediaSingle = (props: {
|
|
7
7
|
mediaState: MediaState;
|
|
8
8
|
inputMethod: InputMethodInsertMedia;
|
|
@@ -24,4 +24,5 @@ export type MediaInsertPickerProps = Pick<UiComponentFactoryParams, 'editorView'
|
|
|
24
24
|
insertMediaSingle: InsertMediaSingle;
|
|
25
25
|
insertExternalMediaSingle: InsertExternalMediaSingle;
|
|
26
26
|
insertFile: InsertFile;
|
|
27
|
+
isOnlyExternalLinks: MediaInsertPluginConfig['isOnlyExternalLinks'];
|
|
27
28
|
};
|
|
@@ -9,6 +9,7 @@ type Props = {
|
|
|
9
9
|
closeMediaInsertPicker: () => void;
|
|
10
10
|
insertMediaSingle: InsertMediaSingle;
|
|
11
11
|
insertExternalMediaSingle: InsertExternalMediaSingle;
|
|
12
|
+
isOnlyExternalLinks: boolean;
|
|
12
13
|
};
|
|
13
|
-
export declare function MediaFromURL({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: Props): React.JSX.Element;
|
|
14
|
+
export declare function MediaFromURL({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, }: Props): React.JSX.Element;
|
|
14
15
|
export {};
|
|
@@ -9,6 +9,7 @@ type Props = {
|
|
|
9
9
|
closeMediaInsertPicker: () => void;
|
|
10
10
|
insertMediaSingle: InsertMediaSingle;
|
|
11
11
|
insertExternalMediaSingle: InsertExternalMediaSingle;
|
|
12
|
+
isOnlyExternalLinks: boolean;
|
|
12
13
|
};
|
|
13
|
-
export declare function MediaFromURLWithForm({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: Props): React.JSX.Element;
|
|
14
|
+
export declare function MediaFromURLWithForm({ mediaProvider, dispatchAnalyticsEvent, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, isOnlyExternalLinks, }: Props): React.JSX.Element;
|
|
14
15
|
export {};
|
|
@@ -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, }: MediaInsertPickerProps) => React.JSX.Element | null;
|
|
3
|
+
export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, insertFile, isOnlyExternalLinks, }: 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": "6.
|
|
3
|
+
"version": "6.3.0",
|
|
4
4
|
"description": "Media Insert plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"@atlaskit/button": "^23.0.0",
|
|
30
30
|
"@atlaskit/editor-common": "^103.19.0",
|
|
31
31
|
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
32
|
-
"@atlaskit/editor-plugin-media": "^2.
|
|
32
|
+
"@atlaskit/editor-plugin-media": "^2.7.0",
|
|
33
33
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
34
34
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
35
35
|
"@atlaskit/form": "^12.0.0",
|