@atlaskit/editor-plugin-media-insert 2.5.3 → 2.6.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 +11 -0
- package/dist/cjs/plugin.js +12 -3
- package/dist/cjs/ui/LocalMedia.js +31 -15
- package/dist/cjs/ui/MediaInsertPicker.js +4 -3
- package/dist/es2019/plugin.js +11 -1
- package/dist/es2019/ui/LocalMedia.js +33 -15
- package/dist/es2019/ui/MediaInsertPicker.js +4 -3
- package/dist/esm/plugin.js +12 -3
- package/dist/esm/ui/LocalMedia.js +31 -15
- package/dist/esm/ui/MediaInsertPicker.js +4 -3
- package/dist/types/types.d.ts +7 -1
- package/dist/types/ui/LocalMedia.d.ts +2 -2
- package/dist/types/ui/MediaInsertPicker.d.ts +1 -1
- package/dist/types-ts4.5/types.d.ts +7 -1
- package/dist/types-ts4.5/ui/LocalMedia.d.ts +2 -2
- package/dist/types-ts4.5/ui/MediaInsertPicker.d.ts +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media-insert
|
|
2
2
|
|
|
3
|
+
## 2.6.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#140146](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140146)
|
|
8
|
+
[`1d9fce7fc2523`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1d9fce7fc2523) -
|
|
9
|
+
[ux] [ED-24912] **@atlaskit/editor-plugin-media-insert**: Makes sure that users can upload
|
|
10
|
+
non-media files, users can also select multiple files from their local media browser to upload at
|
|
11
|
+
once **@atlaskit/editor-plugin-media**: Adds a type export for `MediaStateEventListener` &
|
|
12
|
+
`MediaStateEventSubscriber`
|
|
13
|
+
|
|
3
14
|
## 2.5.3
|
|
4
15
|
|
|
5
16
|
### Patch Changes
|
package/dist/cjs/plugin.js
CHANGED
|
@@ -86,6 +86,14 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
|
|
|
86
86
|
});
|
|
87
87
|
return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
|
|
88
88
|
};
|
|
89
|
+
var insertFile = function insertFile(_ref7) {
|
|
90
|
+
var _api$media$sharedStat, _api$media$sharedStat2;
|
|
91
|
+
var mediaState = _ref7.mediaState,
|
|
92
|
+
inputMethod = _ref7.inputMethod,
|
|
93
|
+
onMediaStateChanged = _ref7.onMediaStateChanged;
|
|
94
|
+
var collection = mediaState.collection;
|
|
95
|
+
return collection !== undefined ? (_api$media$sharedStat = api === null || api === void 0 || (_api$media$sharedStat2 = api.media.sharedState.currentState()) === null || _api$media$sharedStat2 === void 0 ? void 0 : _api$media$sharedStat2.insertFile(mediaState, onMediaStateChanged, inputMethod)) !== null && _api$media$sharedStat !== void 0 ? _api$media$sharedStat : false : false;
|
|
96
|
+
};
|
|
89
97
|
return /*#__PURE__*/_react.default.createElement(_MediaInsertPicker.MediaInsertPicker, {
|
|
90
98
|
api: api,
|
|
91
99
|
editorView: editorView,
|
|
@@ -97,12 +105,13 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
|
|
|
97
105
|
return editorView.dispatch((0, _actions.closeMediaInsertPicker)(editorView.state.tr));
|
|
98
106
|
},
|
|
99
107
|
insertMediaSingle: insertMediaSingle,
|
|
100
|
-
insertExternalMediaSingle: insertExternalMediaSingle
|
|
108
|
+
insertExternalMediaSingle: insertExternalMediaSingle,
|
|
109
|
+
insertFile: insertFile
|
|
101
110
|
});
|
|
102
111
|
},
|
|
103
112
|
pluginsOptions: {
|
|
104
|
-
quickInsert: function quickInsert(
|
|
105
|
-
var formatMessage =
|
|
113
|
+
quickInsert: function quickInsert(_ref8) {
|
|
114
|
+
var formatMessage = _ref8.formatMessage;
|
|
106
115
|
return [{
|
|
107
116
|
id: 'media-insert',
|
|
108
117
|
title: formatMessage(_messages.toolbarInsertBlockMessages.insertMediaFromUrl),
|
|
@@ -49,9 +49,9 @@ var isImagePreview = function isImagePreview(preview) {
|
|
|
49
49
|
};
|
|
50
50
|
var LocalMedia = exports.LocalMedia = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
51
51
|
var mediaProvider = _ref.mediaProvider,
|
|
52
|
-
insertMediaSingle = _ref.insertMediaSingle,
|
|
53
52
|
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
|
|
54
|
-
closeMediaInsertPicker = _ref.closeMediaInsertPicker
|
|
53
|
+
closeMediaInsertPicker = _ref.closeMediaInsertPicker,
|
|
54
|
+
insertFile = _ref.insertFile;
|
|
55
55
|
var intl = (0, _reactIntlNext.useIntl)();
|
|
56
56
|
var strings = {
|
|
57
57
|
upload: intl.formatMessage(_messages.mediaInsertMessages.upload),
|
|
@@ -67,28 +67,36 @@ var LocalMedia = exports.LocalMedia = /*#__PURE__*/_react.default.forwardRef(fun
|
|
|
67
67
|
_React$useReducer2 = (0, _slicedToArray2.default)(_React$useReducer, 2),
|
|
68
68
|
uploadState = _React$useReducer2[0],
|
|
69
69
|
dispatch = _React$useReducer2[1];
|
|
70
|
+
var erroredFileIds = _react.default.useState(new Set())[0];
|
|
70
71
|
var onUpload = function onUpload(_ref2) {
|
|
71
72
|
var _mediaProvider$upload;
|
|
72
73
|
var file = _ref2.file,
|
|
73
74
|
preview = _ref2.preview;
|
|
74
75
|
onUploadSuccessAnalytics('local');
|
|
76
|
+
var isErroredFile = erroredFileIds.has(file.id);
|
|
77
|
+
var _ref3 = isImagePreview(preview) ? preview : {
|
|
78
|
+
dimensions: undefined,
|
|
79
|
+
scaleFactor: undefined
|
|
80
|
+
},
|
|
81
|
+
dimensions = _ref3.dimensions,
|
|
82
|
+
scaleFactor = _ref3.scaleFactor;
|
|
75
83
|
var mediaState = {
|
|
76
84
|
id: file.id,
|
|
77
85
|
collection: (_mediaProvider$upload = mediaProvider.uploadParams) === null || _mediaProvider$upload === void 0 ? void 0 : _mediaProvider$upload.collection,
|
|
78
86
|
fileMimeType: file.type,
|
|
79
87
|
fileSize: file.size,
|
|
80
88
|
fileName: file.name,
|
|
81
|
-
dimensions:
|
|
89
|
+
dimensions: dimensions,
|
|
90
|
+
scaleFactor: scaleFactor,
|
|
91
|
+
status: isErroredFile ? 'error' : undefined
|
|
82
92
|
};
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
};
|
|
88
|
-
}
|
|
89
|
-
insertMediaSingle({
|
|
93
|
+
var onStateChanged = function onStateChanged(_cb) {
|
|
94
|
+
// no-op
|
|
95
|
+
};
|
|
96
|
+
insertFile({
|
|
90
97
|
mediaState: mediaState,
|
|
91
|
-
inputMethod: _analytics.INPUT_METHOD.MEDIA_PICKER
|
|
98
|
+
inputMethod: _analytics.INPUT_METHOD.MEDIA_PICKER,
|
|
99
|
+
onMediaStateChanged: onStateChanged
|
|
92
100
|
});
|
|
93
101
|
closeMediaInsertPicker();
|
|
94
102
|
|
|
@@ -118,7 +126,8 @@ var LocalMedia = exports.LocalMedia = /*#__PURE__*/_react.default.forwardRef(fun
|
|
|
118
126
|
}, strings.upload), uploadMediaClientConfig && uploadParams && /*#__PURE__*/_react.default.createElement(_mediaPicker.Browser, {
|
|
119
127
|
isOpen: uploadState.isOpen,
|
|
120
128
|
config: {
|
|
121
|
-
uploadParams: uploadParams
|
|
129
|
+
uploadParams: uploadParams,
|
|
130
|
+
multiple: true
|
|
122
131
|
},
|
|
123
132
|
mediaClientConfig: uploadMediaClientConfig,
|
|
124
133
|
onUploadsStart: function onUploadsStart() {
|
|
@@ -129,14 +138,21 @@ var LocalMedia = exports.LocalMedia = /*#__PURE__*/_react.default.forwardRef(fun
|
|
|
129
138
|
// for others like empty files. Those have their own feedback toast
|
|
130
139
|
// owned by media.
|
|
131
140
|
,
|
|
132
|
-
onError: function onError(
|
|
133
|
-
|
|
141
|
+
onError: function onError(_ref4) {
|
|
142
|
+
var error = _ref4.error,
|
|
143
|
+
fileId = _ref4.fileId;
|
|
144
|
+
// Dispatch the error events
|
|
145
|
+
onUploadFailureAnalytics(error.name, 'local');
|
|
134
146
|
dispatch({
|
|
135
147
|
type: 'error',
|
|
136
|
-
error:
|
|
148
|
+
error: error.name
|
|
137
149
|
});
|
|
150
|
+
|
|
151
|
+
// Update the status of the errored file
|
|
152
|
+
erroredFileIds.add(fileId);
|
|
138
153
|
},
|
|
139
154
|
onClose: function onClose() {
|
|
155
|
+
erroredFileIds.clear();
|
|
140
156
|
dispatch({
|
|
141
157
|
type: 'close'
|
|
142
158
|
});
|
|
@@ -71,7 +71,8 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
|
|
|
71
71
|
popupsScrollableElement = _ref2.popupsScrollableElement,
|
|
72
72
|
_closeMediaInsertPicker = _ref2.closeMediaInsertPicker,
|
|
73
73
|
insertMediaSingle = _ref2.insertMediaSingle,
|
|
74
|
-
insertExternalMediaSingle = _ref2.insertExternalMediaSingle
|
|
74
|
+
insertExternalMediaSingle = _ref2.insertExternalMediaSingle,
|
|
75
|
+
insertFile = _ref2.insertFile;
|
|
75
76
|
var targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
|
|
76
77
|
var isOpen = (_useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.isOpen;
|
|
77
78
|
var mediaProvider = (_useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media'])) === null || _useSharedPluginState2 === void 0 || (_useSharedPluginState2 = _useSharedPluginState2.mediaState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaProvider;
|
|
@@ -126,12 +127,12 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
|
|
|
126
127
|
}, /*#__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, {
|
|
127
128
|
ref: autofocusRef,
|
|
128
129
|
mediaProvider: mediaProvider,
|
|
129
|
-
insertMediaSingle: insertMediaSingle,
|
|
130
130
|
closeMediaInsertPicker: function closeMediaInsertPicker() {
|
|
131
131
|
_closeMediaInsertPicker();
|
|
132
132
|
focusEditor();
|
|
133
133
|
},
|
|
134
|
-
dispatchAnalyticsEvent: dispatchAnalyticsEvent
|
|
134
|
+
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
135
|
+
insertFile: insertFile
|
|
135
136
|
})), /*#__PURE__*/_react.default.createElement(CustomTabPanel, null, /*#__PURE__*/_react.default.createElement(_MediaFromURL.MediaFromURL, {
|
|
136
137
|
mediaProvider: mediaProvider,
|
|
137
138
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -84,6 +84,15 @@ export const mediaInsertPlugin = ({
|
|
|
84
84
|
});
|
|
85
85
|
return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
|
|
86
86
|
};
|
|
87
|
+
const insertFile = ({
|
|
88
|
+
mediaState,
|
|
89
|
+
inputMethod,
|
|
90
|
+
onMediaStateChanged
|
|
91
|
+
}) => {
|
|
92
|
+
var _api$media$sharedStat, _api$media$sharedStat2;
|
|
93
|
+
const collection = mediaState.collection;
|
|
94
|
+
return collection !== undefined ? (_api$media$sharedStat = api === null || api === void 0 ? void 0 : (_api$media$sharedStat2 = api.media.sharedState.currentState()) === null || _api$media$sharedStat2 === void 0 ? void 0 : _api$media$sharedStat2.insertFile(mediaState, onMediaStateChanged, inputMethod)) !== null && _api$media$sharedStat !== void 0 ? _api$media$sharedStat : false : false;
|
|
95
|
+
};
|
|
87
96
|
return /*#__PURE__*/React.createElement(MediaInsertPicker, {
|
|
88
97
|
api: api,
|
|
89
98
|
editorView: editorView,
|
|
@@ -93,7 +102,8 @@ export const mediaInsertPlugin = ({
|
|
|
93
102
|
popupsScrollableElement: popupsScrollableElement,
|
|
94
103
|
closeMediaInsertPicker: () => editorView.dispatch(closeMediaInsertPicker(editorView.state.tr)),
|
|
95
104
|
insertMediaSingle: insertMediaSingle,
|
|
96
|
-
insertExternalMediaSingle: insertExternalMediaSingle
|
|
105
|
+
insertExternalMediaSingle: insertExternalMediaSingle,
|
|
106
|
+
insertFile: insertFile
|
|
97
107
|
});
|
|
98
108
|
},
|
|
99
109
|
pluginsOptions: {
|
|
@@ -41,9 +41,9 @@ const isImagePreview = preview => {
|
|
|
41
41
|
};
|
|
42
42
|
export const LocalMedia = /*#__PURE__*/React.forwardRef(({
|
|
43
43
|
mediaProvider,
|
|
44
|
-
insertMediaSingle,
|
|
45
44
|
dispatchAnalyticsEvent,
|
|
46
|
-
closeMediaInsertPicker
|
|
45
|
+
closeMediaInsertPicker,
|
|
46
|
+
insertFile
|
|
47
47
|
}, ref) => {
|
|
48
48
|
const intl = useIntl();
|
|
49
49
|
const strings = {
|
|
@@ -58,29 +58,38 @@ export const LocalMedia = /*#__PURE__*/React.forwardRef(({
|
|
|
58
58
|
onUploadFailureAnalytics
|
|
59
59
|
} = useAnalyticsEvents(dispatchAnalyticsEvent);
|
|
60
60
|
const [uploadState, dispatch] = React.useReducer(uploadReducer, INITIAL_UPLOAD_STATE);
|
|
61
|
+
const erroredFileIds = React.useState(new Set())[0];
|
|
61
62
|
const onUpload = ({
|
|
62
63
|
file,
|
|
63
64
|
preview
|
|
64
65
|
}) => {
|
|
65
66
|
var _mediaProvider$upload;
|
|
66
67
|
onUploadSuccessAnalytics('local');
|
|
68
|
+
const isErroredFile = erroredFileIds.has(file.id);
|
|
69
|
+
const {
|
|
70
|
+
dimensions,
|
|
71
|
+
scaleFactor
|
|
72
|
+
} = isImagePreview(preview) ? preview : {
|
|
73
|
+
dimensions: undefined,
|
|
74
|
+
scaleFactor: undefined
|
|
75
|
+
};
|
|
67
76
|
const mediaState = {
|
|
68
77
|
id: file.id,
|
|
69
78
|
collection: (_mediaProvider$upload = mediaProvider.uploadParams) === null || _mediaProvider$upload === void 0 ? void 0 : _mediaProvider$upload.collection,
|
|
70
79
|
fileMimeType: file.type,
|
|
71
80
|
fileSize: file.size,
|
|
72
81
|
fileName: file.name,
|
|
73
|
-
dimensions
|
|
82
|
+
dimensions,
|
|
83
|
+
scaleFactor,
|
|
84
|
+
status: isErroredFile ? 'error' : undefined
|
|
74
85
|
};
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
};
|
|
80
|
-
}
|
|
81
|
-
insertMediaSingle({
|
|
86
|
+
const onStateChanged = _cb => {
|
|
87
|
+
// no-op
|
|
88
|
+
};
|
|
89
|
+
insertFile({
|
|
82
90
|
mediaState,
|
|
83
|
-
inputMethod: INPUT_METHOD.MEDIA_PICKER
|
|
91
|
+
inputMethod: INPUT_METHOD.MEDIA_PICKER,
|
|
92
|
+
onMediaStateChanged: onStateChanged
|
|
84
93
|
});
|
|
85
94
|
closeMediaInsertPicker();
|
|
86
95
|
|
|
@@ -112,7 +121,8 @@ export const LocalMedia = /*#__PURE__*/React.forwardRef(({
|
|
|
112
121
|
}, strings.upload), uploadMediaClientConfig && uploadParams && /*#__PURE__*/React.createElement(Browser, {
|
|
113
122
|
isOpen: uploadState.isOpen,
|
|
114
123
|
config: {
|
|
115
|
-
uploadParams: uploadParams
|
|
124
|
+
uploadParams: uploadParams,
|
|
125
|
+
multiple: true
|
|
116
126
|
},
|
|
117
127
|
mediaClientConfig: uploadMediaClientConfig,
|
|
118
128
|
onUploadsStart: () => {
|
|
@@ -123,14 +133,22 @@ export const LocalMedia = /*#__PURE__*/React.forwardRef(({
|
|
|
123
133
|
// for others like empty files. Those have their own feedback toast
|
|
124
134
|
// owned by media.
|
|
125
135
|
,
|
|
126
|
-
onError:
|
|
127
|
-
|
|
136
|
+
onError: ({
|
|
137
|
+
error,
|
|
138
|
+
fileId
|
|
139
|
+
}) => {
|
|
140
|
+
// Dispatch the error events
|
|
141
|
+
onUploadFailureAnalytics(error.name, 'local');
|
|
128
142
|
dispatch({
|
|
129
143
|
type: 'error',
|
|
130
|
-
error:
|
|
144
|
+
error: error.name
|
|
131
145
|
});
|
|
146
|
+
|
|
147
|
+
// Update the status of the errored file
|
|
148
|
+
erroredFileIds.add(fileId);
|
|
132
149
|
},
|
|
133
150
|
onClose: () => {
|
|
151
|
+
erroredFileIds.clear();
|
|
134
152
|
dispatch({
|
|
135
153
|
type: 'close'
|
|
136
154
|
});
|
|
@@ -61,7 +61,8 @@ export const MediaInsertPicker = ({
|
|
|
61
61
|
popupsScrollableElement,
|
|
62
62
|
closeMediaInsertPicker,
|
|
63
63
|
insertMediaSingle,
|
|
64
|
-
insertExternalMediaSingle
|
|
64
|
+
insertExternalMediaSingle,
|
|
65
|
+
insertFile
|
|
65
66
|
}) => {
|
|
66
67
|
var _useSharedPluginState, _useSharedPluginState2, _useSharedPluginState3, _useSharedPluginState4;
|
|
67
68
|
const targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
|
|
@@ -117,12 +118,12 @@ export const MediaInsertPicker = ({
|
|
|
117
118
|
}, /*#__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
119
|
ref: autofocusRef,
|
|
119
120
|
mediaProvider: mediaProvider,
|
|
120
|
-
insertMediaSingle: insertMediaSingle,
|
|
121
121
|
closeMediaInsertPicker: () => {
|
|
122
122
|
closeMediaInsertPicker();
|
|
123
123
|
focusEditor();
|
|
124
124
|
},
|
|
125
|
-
dispatchAnalyticsEvent: dispatchAnalyticsEvent
|
|
125
|
+
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
126
|
+
insertFile: insertFile
|
|
126
127
|
})), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
|
|
127
128
|
mediaProvider: mediaProvider,
|
|
128
129
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
package/dist/esm/plugin.js
CHANGED
|
@@ -79,6 +79,14 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
|
|
|
79
79
|
});
|
|
80
80
|
return (_api$media$actions$in2 = api === null || api === void 0 ? void 0 : api.media.actions.insertMediaAsMediaSingle(editorView, node, inputMethod)) !== null && _api$media$actions$in2 !== void 0 ? _api$media$actions$in2 : false;
|
|
81
81
|
};
|
|
82
|
+
var insertFile = function insertFile(_ref7) {
|
|
83
|
+
var _api$media$sharedStat, _api$media$sharedStat2;
|
|
84
|
+
var mediaState = _ref7.mediaState,
|
|
85
|
+
inputMethod = _ref7.inputMethod,
|
|
86
|
+
onMediaStateChanged = _ref7.onMediaStateChanged;
|
|
87
|
+
var collection = mediaState.collection;
|
|
88
|
+
return collection !== undefined ? (_api$media$sharedStat = api === null || api === void 0 || (_api$media$sharedStat2 = api.media.sharedState.currentState()) === null || _api$media$sharedStat2 === void 0 ? void 0 : _api$media$sharedStat2.insertFile(mediaState, onMediaStateChanged, inputMethod)) !== null && _api$media$sharedStat !== void 0 ? _api$media$sharedStat : false : false;
|
|
89
|
+
};
|
|
82
90
|
return /*#__PURE__*/React.createElement(MediaInsertPicker, {
|
|
83
91
|
api: api,
|
|
84
92
|
editorView: editorView,
|
|
@@ -90,12 +98,13 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
|
|
|
90
98
|
return editorView.dispatch(_closeMediaInsertPicker(editorView.state.tr));
|
|
91
99
|
},
|
|
92
100
|
insertMediaSingle: insertMediaSingle,
|
|
93
|
-
insertExternalMediaSingle: insertExternalMediaSingle
|
|
101
|
+
insertExternalMediaSingle: insertExternalMediaSingle,
|
|
102
|
+
insertFile: insertFile
|
|
94
103
|
});
|
|
95
104
|
},
|
|
96
105
|
pluginsOptions: {
|
|
97
|
-
quickInsert: function quickInsert(
|
|
98
|
-
var formatMessage =
|
|
106
|
+
quickInsert: function quickInsert(_ref8) {
|
|
107
|
+
var formatMessage = _ref8.formatMessage;
|
|
99
108
|
return [{
|
|
100
109
|
id: 'media-insert',
|
|
101
110
|
title: formatMessage(messages.insertMediaFromUrl),
|
|
@@ -42,9 +42,9 @@ var isImagePreview = function isImagePreview(preview) {
|
|
|
42
42
|
};
|
|
43
43
|
export var LocalMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
44
44
|
var mediaProvider = _ref.mediaProvider,
|
|
45
|
-
insertMediaSingle = _ref.insertMediaSingle,
|
|
46
45
|
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
|
|
47
|
-
closeMediaInsertPicker = _ref.closeMediaInsertPicker
|
|
46
|
+
closeMediaInsertPicker = _ref.closeMediaInsertPicker,
|
|
47
|
+
insertFile = _ref.insertFile;
|
|
48
48
|
var intl = useIntl();
|
|
49
49
|
var strings = {
|
|
50
50
|
upload: intl.formatMessage(mediaInsertMessages.upload),
|
|
@@ -60,28 +60,36 @@ export var LocalMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
60
60
|
_React$useReducer2 = _slicedToArray(_React$useReducer, 2),
|
|
61
61
|
uploadState = _React$useReducer2[0],
|
|
62
62
|
dispatch = _React$useReducer2[1];
|
|
63
|
+
var erroredFileIds = React.useState(new Set())[0];
|
|
63
64
|
var onUpload = function onUpload(_ref2) {
|
|
64
65
|
var _mediaProvider$upload;
|
|
65
66
|
var file = _ref2.file,
|
|
66
67
|
preview = _ref2.preview;
|
|
67
68
|
onUploadSuccessAnalytics('local');
|
|
69
|
+
var isErroredFile = erroredFileIds.has(file.id);
|
|
70
|
+
var _ref3 = isImagePreview(preview) ? preview : {
|
|
71
|
+
dimensions: undefined,
|
|
72
|
+
scaleFactor: undefined
|
|
73
|
+
},
|
|
74
|
+
dimensions = _ref3.dimensions,
|
|
75
|
+
scaleFactor = _ref3.scaleFactor;
|
|
68
76
|
var mediaState = {
|
|
69
77
|
id: file.id,
|
|
70
78
|
collection: (_mediaProvider$upload = mediaProvider.uploadParams) === null || _mediaProvider$upload === void 0 ? void 0 : _mediaProvider$upload.collection,
|
|
71
79
|
fileMimeType: file.type,
|
|
72
80
|
fileSize: file.size,
|
|
73
81
|
fileName: file.name,
|
|
74
|
-
dimensions:
|
|
82
|
+
dimensions: dimensions,
|
|
83
|
+
scaleFactor: scaleFactor,
|
|
84
|
+
status: isErroredFile ? 'error' : undefined
|
|
75
85
|
};
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
insertMediaSingle({
|
|
86
|
+
var onStateChanged = function onStateChanged(_cb) {
|
|
87
|
+
// no-op
|
|
88
|
+
};
|
|
89
|
+
insertFile({
|
|
83
90
|
mediaState: mediaState,
|
|
84
|
-
inputMethod: INPUT_METHOD.MEDIA_PICKER
|
|
91
|
+
inputMethod: INPUT_METHOD.MEDIA_PICKER,
|
|
92
|
+
onMediaStateChanged: onStateChanged
|
|
85
93
|
});
|
|
86
94
|
closeMediaInsertPicker();
|
|
87
95
|
|
|
@@ -111,7 +119,8 @@ export var LocalMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
111
119
|
}, strings.upload), uploadMediaClientConfig && uploadParams && /*#__PURE__*/React.createElement(Browser, {
|
|
112
120
|
isOpen: uploadState.isOpen,
|
|
113
121
|
config: {
|
|
114
|
-
uploadParams: uploadParams
|
|
122
|
+
uploadParams: uploadParams,
|
|
123
|
+
multiple: true
|
|
115
124
|
},
|
|
116
125
|
mediaClientConfig: uploadMediaClientConfig,
|
|
117
126
|
onUploadsStart: function onUploadsStart() {
|
|
@@ -122,14 +131,21 @@ export var LocalMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
122
131
|
// for others like empty files. Those have their own feedback toast
|
|
123
132
|
// owned by media.
|
|
124
133
|
,
|
|
125
|
-
onError: function onError(
|
|
126
|
-
|
|
134
|
+
onError: function onError(_ref4) {
|
|
135
|
+
var error = _ref4.error,
|
|
136
|
+
fileId = _ref4.fileId;
|
|
137
|
+
// Dispatch the error events
|
|
138
|
+
onUploadFailureAnalytics(error.name, 'local');
|
|
127
139
|
dispatch({
|
|
128
140
|
type: 'error',
|
|
129
|
-
error:
|
|
141
|
+
error: error.name
|
|
130
142
|
});
|
|
143
|
+
|
|
144
|
+
// Update the status of the errored file
|
|
145
|
+
erroredFileIds.add(fileId);
|
|
131
146
|
},
|
|
132
147
|
onClose: function onClose() {
|
|
148
|
+
erroredFileIds.clear();
|
|
133
149
|
dispatch({
|
|
134
150
|
type: 'close'
|
|
135
151
|
});
|
|
@@ -61,7 +61,8 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
|
|
|
61
61
|
popupsScrollableElement = _ref2.popupsScrollableElement,
|
|
62
62
|
_closeMediaInsertPicker = _ref2.closeMediaInsertPicker,
|
|
63
63
|
insertMediaSingle = _ref2.insertMediaSingle,
|
|
64
|
-
insertExternalMediaSingle = _ref2.insertExternalMediaSingle
|
|
64
|
+
insertExternalMediaSingle = _ref2.insertExternalMediaSingle,
|
|
65
|
+
insertFile = _ref2.insertFile;
|
|
65
66
|
var targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
|
|
66
67
|
var isOpen = (_useSharedPluginState = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.isOpen;
|
|
67
68
|
var mediaProvider = (_useSharedPluginState2 = useSharedPluginState(api, ['media'])) === null || _useSharedPluginState2 === void 0 || (_useSharedPluginState2 = _useSharedPluginState2.mediaState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaProvider;
|
|
@@ -116,12 +117,12 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
|
|
|
116
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, {
|
|
117
118
|
ref: autofocusRef,
|
|
118
119
|
mediaProvider: mediaProvider,
|
|
119
|
-
insertMediaSingle: insertMediaSingle,
|
|
120
120
|
closeMediaInsertPicker: function closeMediaInsertPicker() {
|
|
121
121
|
_closeMediaInsertPicker();
|
|
122
122
|
focusEditor();
|
|
123
123
|
},
|
|
124
|
-
dispatchAnalyticsEvent: dispatchAnalyticsEvent
|
|
124
|
+
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
125
|
+
insertFile: insertFile
|
|
125
126
|
})), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
|
|
126
127
|
mediaProvider: mediaProvider,
|
|
127
128
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
package/dist/types/types.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import type { NextEditorPlugin, OptionalPlugin, UiComponentFactoryParams } from
|
|
|
4
4
|
import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
5
5
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
6
6
|
import type { MediaPlugin } from '@atlaskit/editor-plugin-media';
|
|
7
|
-
import { type MediaState } from '@atlaskit/editor-plugin-media/types';
|
|
7
|
+
import { type MediaState, type MediaStateEventSubscriber } from '@atlaskit/editor-plugin-media/types';
|
|
8
8
|
export type MediaInsertPluginState = {
|
|
9
9
|
isOpen?: boolean;
|
|
10
10
|
};
|
|
@@ -21,10 +21,16 @@ export type InsertExternalMediaSingle = (props: {
|
|
|
21
21
|
alt: string;
|
|
22
22
|
inputMethod: InputMethodInsertMedia;
|
|
23
23
|
}) => boolean;
|
|
24
|
+
export type InsertFile = (props: {
|
|
25
|
+
mediaState: MediaState;
|
|
26
|
+
inputMethod: InputMethodInsertMedia;
|
|
27
|
+
onMediaStateChanged: MediaStateEventSubscriber;
|
|
28
|
+
}) => boolean;
|
|
24
29
|
export type MediaInsertPickerProps = Pick<UiComponentFactoryParams, 'editorView' | 'dispatchAnalyticsEvent' | 'popupsMountPoint' | 'popupsBoundariesElement' | 'popupsScrollableElement'> & {
|
|
25
30
|
api?: ExtractInjectionAPI<MediaInsertPlugin>;
|
|
26
31
|
closeMediaInsertPicker: () => void;
|
|
27
32
|
mediaProvider?: Providers['mediaProvider'];
|
|
28
33
|
insertMediaSingle: InsertMediaSingle;
|
|
29
34
|
insertExternalMediaSingle: InsertExternalMediaSingle;
|
|
35
|
+
insertFile: InsertFile;
|
|
30
36
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
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
|
-
import { type
|
|
4
|
+
import { type InsertFile } from '../types';
|
|
5
5
|
type Props = {
|
|
6
6
|
mediaProvider: MediaProvider;
|
|
7
|
-
|
|
7
|
+
insertFile: InsertFile;
|
|
8
8
|
closeMediaInsertPicker: () => void;
|
|
9
9
|
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
10
10
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { type MediaInsertPickerProps } from '../types';
|
|
3
|
-
export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: MediaInsertPickerProps) => JSX.Element | null;
|
|
3
|
+
export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, insertFile, }: MediaInsertPickerProps) => JSX.Element | null;
|
|
@@ -4,7 +4,7 @@ import type { NextEditorPlugin, OptionalPlugin, UiComponentFactoryParams } from
|
|
|
4
4
|
import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
5
5
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
6
6
|
import type { MediaPlugin } from '@atlaskit/editor-plugin-media';
|
|
7
|
-
import { type MediaState } from '@atlaskit/editor-plugin-media/types';
|
|
7
|
+
import { type MediaState, type MediaStateEventSubscriber } from '@atlaskit/editor-plugin-media/types';
|
|
8
8
|
export type MediaInsertPluginState = {
|
|
9
9
|
isOpen?: boolean;
|
|
10
10
|
};
|
|
@@ -24,10 +24,16 @@ export type InsertExternalMediaSingle = (props: {
|
|
|
24
24
|
alt: string;
|
|
25
25
|
inputMethod: InputMethodInsertMedia;
|
|
26
26
|
}) => boolean;
|
|
27
|
+
export type InsertFile = (props: {
|
|
28
|
+
mediaState: MediaState;
|
|
29
|
+
inputMethod: InputMethodInsertMedia;
|
|
30
|
+
onMediaStateChanged: MediaStateEventSubscriber;
|
|
31
|
+
}) => boolean;
|
|
27
32
|
export type MediaInsertPickerProps = Pick<UiComponentFactoryParams, 'editorView' | 'dispatchAnalyticsEvent' | 'popupsMountPoint' | 'popupsBoundariesElement' | 'popupsScrollableElement'> & {
|
|
28
33
|
api?: ExtractInjectionAPI<MediaInsertPlugin>;
|
|
29
34
|
closeMediaInsertPicker: () => void;
|
|
30
35
|
mediaProvider?: Providers['mediaProvider'];
|
|
31
36
|
insertMediaSingle: InsertMediaSingle;
|
|
32
37
|
insertExternalMediaSingle: InsertExternalMediaSingle;
|
|
38
|
+
insertFile: InsertFile;
|
|
33
39
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
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
|
-
import { type
|
|
4
|
+
import { type InsertFile } from '../types';
|
|
5
5
|
type Props = {
|
|
6
6
|
mediaProvider: MediaProvider;
|
|
7
|
-
|
|
7
|
+
insertFile: InsertFile;
|
|
8
8
|
closeMediaInsertPicker: () => void;
|
|
9
9
|
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
10
10
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { type MediaInsertPickerProps } from '../types';
|
|
3
|
-
export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, }: MediaInsertPickerProps) => JSX.Element | null;
|
|
3
|
+
export declare const MediaInsertPicker: ({ api, editorView, dispatchAnalyticsEvent, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, closeMediaInsertPicker, insertMediaSingle, insertExternalMediaSingle, insertFile, }: MediaInsertPickerProps) => JSX.Element | null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-media-insert",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.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/editor-plugin-media": "^1.31.0",
|
|
30
30
|
"@atlaskit/editor-prosemirror": "6.0.0",
|
|
31
31
|
"@atlaskit/editor-shared-styles": "^2.13.0",
|
|
32
|
-
"@atlaskit/icon": "^22.
|
|
32
|
+
"@atlaskit/icon": "^22.17.0",
|
|
33
33
|
"@atlaskit/media-card": "^78.2.0",
|
|
34
34
|
"@atlaskit/media-client": "^27.6.0",
|
|
35
35
|
"@atlaskit/media-client-react": "^2.2.0",
|