@ckeditor/ckeditor5-ckbox 39.0.2 → 40.0.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/build/ckbox.js +1 -1
- package/build/ckbox.js.map +1 -0
- package/package.json +2 -2
- package/src/augmentation.d.ts +22 -22
- package/src/augmentation.js +5 -5
- package/src/ckbox.d.ts +33 -33
- package/src/ckbox.js +37 -37
- package/src/ckboxcommand.d.ts +110 -110
- package/src/ckboxcommand.js +302 -333
- package/src/ckboxconfig.d.ts +283 -283
- package/src/ckboxconfig.js +5 -5
- package/src/ckboxediting.d.ts +52 -52
- package/src/ckboxediting.js +362 -362
- package/src/ckboxui.d.ts +21 -21
- package/src/ckboxui.js +47 -47
- package/src/ckboxuploadadapter.d.ts +38 -38
- package/src/ckboxuploadadapter.js +275 -275
- package/src/index.d.ts +13 -13
- package/src/index.js +11 -11
- package/src/utils.d.ts +28 -28
- package/src/utils.js +49 -49
@@ -1,275 +1,275 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
-
*/
|
5
|
-
/* globals AbortController, FormData, URL, XMLHttpRequest, window */
|
6
|
-
/**
|
7
|
-
* @module ckbox/ckboxuploadadapter
|
8
|
-
*/
|
9
|
-
import { Plugin } from 'ckeditor5/src/core';
|
10
|
-
import { FileRepository } from 'ckeditor5/src/upload';
|
11
|
-
import { logError } from 'ckeditor5/src/utils';
|
12
|
-
import CKBoxEditing from './ckboxediting';
|
13
|
-
import { getImageUrls, getWorkspaceId } from './utils';
|
14
|
-
/**
|
15
|
-
* A plugin that enables file uploads in CKEditor 5 using the CKBox server–side connector.
|
16
|
-
* See the {@glink features/file-management/ckbox CKBox file manager integration} guide to learn how to configure
|
17
|
-
* and use this feature as well as find out more about the full integration with the file manager
|
18
|
-
* provided by the {@link module:ckbox/ckbox~CKBox} plugin.
|
19
|
-
*
|
20
|
-
* Check out the {@glink features/images/image-upload/image-upload Image upload overview} guide to learn about
|
21
|
-
* other ways to upload images into CKEditor 5.
|
22
|
-
*/
|
23
|
-
export default class CKBoxUploadAdapter extends Plugin {
|
24
|
-
/**
|
25
|
-
* @inheritDoc
|
26
|
-
*/
|
27
|
-
static get requires() {
|
28
|
-
return ['ImageUploadEditing', 'ImageUploadProgress', FileRepository, CKBoxEditing];
|
29
|
-
}
|
30
|
-
/**
|
31
|
-
* @inheritDoc
|
32
|
-
*/
|
33
|
-
static get pluginName() {
|
34
|
-
return 'CKBoxUploadAdapter';
|
35
|
-
}
|
36
|
-
/**
|
37
|
-
* @inheritDoc
|
38
|
-
*/
|
39
|
-
async afterInit() {
|
40
|
-
const editor = this.editor;
|
41
|
-
const hasConfiguration = !!editor.config.get('ckbox');
|
42
|
-
const isLibraryLoaded = !!window.CKBox;
|
43
|
-
// Editor supports only one upload adapter. Register the CKBox upload adapter (and potentially overwrite other one) only when the
|
44
|
-
// integrator intentionally wants to use the CKBox plugin, i.e. when the `config.ckbox` exists or the CKBox JavaScript library is
|
45
|
-
// loaded.
|
46
|
-
if (!hasConfiguration && !isLibraryLoaded) {
|
47
|
-
return;
|
48
|
-
}
|
49
|
-
const fileRepository = editor.plugins.get(FileRepository);
|
50
|
-
const ckboxEditing = editor.plugins.get(CKBoxEditing);
|
51
|
-
fileRepository.createUploadAdapter = loader => {
|
52
|
-
return new Adapter(loader, ckboxEditing.getToken(), editor);
|
53
|
-
};
|
54
|
-
const shouldInsertDataId = !editor.config.get('ckbox.ignoreDataId');
|
55
|
-
const imageUploadEditing = editor.plugins.get('ImageUploadEditing');
|
56
|
-
// Mark uploaded assets with the `ckboxImageId` attribute. Its value represents an ID in CKBox.
|
57
|
-
if (shouldInsertDataId) {
|
58
|
-
imageUploadEditing.on('uploadComplete', (evt, { imageElement, data }) => {
|
59
|
-
editor.model.change(writer => {
|
60
|
-
writer.setAttribute('ckboxImageId', data.ckboxImageId, imageElement);
|
61
|
-
});
|
62
|
-
});
|
63
|
-
}
|
64
|
-
}
|
65
|
-
}
|
66
|
-
/**
|
67
|
-
* Upload adapter for CKBox.
|
68
|
-
*/
|
69
|
-
class Adapter {
|
70
|
-
/**
|
71
|
-
* Creates a new adapter instance.
|
72
|
-
*/
|
73
|
-
constructor(loader, token, editor) {
|
74
|
-
this.loader = loader;
|
75
|
-
this.token = token;
|
76
|
-
this.editor = editor;
|
77
|
-
this.controller = new AbortController();
|
78
|
-
this.serviceOrigin = editor.config.get('ckbox.serviceOrigin');
|
79
|
-
}
|
80
|
-
/**
|
81
|
-
* The ID of workspace to use.
|
82
|
-
*/
|
83
|
-
getWorkspaceId() {
|
84
|
-
const t = this.editor.t;
|
85
|
-
const cannotAccessDefaultWorkspaceError = t('Cannot access default workspace.');
|
86
|
-
const defaultWorkspaceId = this.editor.config.get('ckbox.defaultUploadWorkspaceId');
|
87
|
-
const workspaceId = getWorkspaceId(this.token, defaultWorkspaceId);
|
88
|
-
if (workspaceId == null) {
|
89
|
-
/**
|
90
|
-
* The user is not authorized to access the workspace defined in the`ckbox.defaultUploadWorkspaceId` configuration.
|
91
|
-
*
|
92
|
-
* @error ckbox-access-default-workspace-error
|
93
|
-
*/
|
94
|
-
logError('ckbox-access-default-workspace-error');
|
95
|
-
throw cannotAccessDefaultWorkspaceError;
|
96
|
-
}
|
97
|
-
return workspaceId;
|
98
|
-
}
|
99
|
-
/**
|
100
|
-
* Resolves a promise with an array containing available categories with which the uploaded file can be associated.
|
101
|
-
*
|
102
|
-
* If the API returns limited results, the method will collect all items.
|
103
|
-
*/
|
104
|
-
async getAvailableCategories(offset = 0) {
|
105
|
-
const ITEMS_PER_REQUEST = 50;
|
106
|
-
const categoryUrl = new URL('categories', this.serviceOrigin);
|
107
|
-
categoryUrl.searchParams.set('limit', ITEMS_PER_REQUEST.toString());
|
108
|
-
categoryUrl.searchParams.set('offset', offset.toString());
|
109
|
-
categoryUrl.searchParams.set('workspaceId', this.getWorkspaceId());
|
110
|
-
return this._sendHttpRequest({ url: categoryUrl })
|
111
|
-
.then(async (data) => {
|
112
|
-
const remainingItems = data.totalCount - (offset + ITEMS_PER_REQUEST);
|
113
|
-
if (remainingItems > 0) {
|
114
|
-
const offsetItems = await this.getAvailableCategories(offset + ITEMS_PER_REQUEST);
|
115
|
-
return [
|
116
|
-
...data.items,
|
117
|
-
...offsetItems
|
118
|
-
];
|
119
|
-
}
|
120
|
-
return data.items;
|
121
|
-
})
|
122
|
-
.catch(() => {
|
123
|
-
this.controller.signal.throwIfAborted();
|
124
|
-
/**
|
125
|
-
* Fetching a list of available categories with which an uploaded file can be associated failed.
|
126
|
-
*
|
127
|
-
* @error ckbox-fetch-category-http-error
|
128
|
-
*/
|
129
|
-
logError('ckbox-fetch-category-http-error');
|
130
|
-
});
|
131
|
-
}
|
132
|
-
/**
|
133
|
-
* Resolves a promise with an object containing a category with which the uploaded file is associated or an error code.
|
134
|
-
*/
|
135
|
-
async getCategoryIdForFile(file) {
|
136
|
-
const extension = getFileExtension(file.name);
|
137
|
-
const allCategories = await this.getAvailableCategories();
|
138
|
-
// Couldn't fetch all categories. Perhaps the authorization token is invalid.
|
139
|
-
if (!allCategories) {
|
140
|
-
return null;
|
141
|
-
}
|
142
|
-
// The plugin allows defining to which category the uploaded file should be assigned.
|
143
|
-
const defaultCategories = this.editor.config.get('ckbox.defaultUploadCategories');
|
144
|
-
// If a user specifies the plugin configuration, find the first category that accepts the uploaded file.
|
145
|
-
if (defaultCategories) {
|
146
|
-
const userCategory = Object.keys(defaultCategories).find(category => {
|
147
|
-
return defaultCategories[category].find(e => e.toLowerCase() == extension);
|
148
|
-
});
|
149
|
-
// If found, return its ID if the category exists on the server side.
|
150
|
-
if (userCategory) {
|
151
|
-
const serverCategory = allCategories.find(category => category.id === userCategory || category.name === userCategory);
|
152
|
-
if (!serverCategory) {
|
153
|
-
return null;
|
154
|
-
}
|
155
|
-
return serverCategory.id;
|
156
|
-
}
|
157
|
-
}
|
158
|
-
// Otherwise, find the first category that accepts the uploaded file and returns its ID.
|
159
|
-
const category = allCategories.find(category => category.extensions.find(e => e.toLowerCase() == extension));
|
160
|
-
if (!category) {
|
161
|
-
return null;
|
162
|
-
}
|
163
|
-
return category.id;
|
164
|
-
}
|
165
|
-
/**
|
166
|
-
* Starts the upload process.
|
167
|
-
*
|
168
|
-
* @see module:upload/filerepository~UploadAdapter#upload
|
169
|
-
*/
|
170
|
-
async upload() {
|
171
|
-
const t = this.editor.t;
|
172
|
-
const cannotFindCategoryError = t('Cannot determine a category for the uploaded file.');
|
173
|
-
const file = (await this.loader.file);
|
174
|
-
const category = await this.getCategoryIdForFile(file);
|
175
|
-
if (!category) {
|
176
|
-
return Promise.reject(cannotFindCategoryError);
|
177
|
-
}
|
178
|
-
const uploadUrl = new URL('assets', this.serviceOrigin);
|
179
|
-
const formData = new FormData();
|
180
|
-
uploadUrl.searchParams.set('workspaceId', this.getWorkspaceId());
|
181
|
-
formData.append('categoryId', category);
|
182
|
-
formData.append('file', file);
|
183
|
-
const requestConfig = {
|
184
|
-
method: 'POST',
|
185
|
-
url: uploadUrl,
|
186
|
-
data: formData,
|
187
|
-
onUploadProgress: (evt) => {
|
188
|
-
/* istanbul ignore else -- @preserve */
|
189
|
-
if (evt.lengthComputable) {
|
190
|
-
this.loader.uploadTotal = evt.total;
|
191
|
-
this.loader.uploaded = evt.loaded;
|
192
|
-
}
|
193
|
-
}
|
194
|
-
};
|
195
|
-
return this._sendHttpRequest(requestConfig)
|
196
|
-
.then(async (data) => {
|
197
|
-
const imageUrls = getImageUrls(data.imageUrls);
|
198
|
-
return {
|
199
|
-
ckboxImageId: data.id,
|
200
|
-
default: imageUrls.imageFallbackUrl,
|
201
|
-
sources: imageUrls.imageSources
|
202
|
-
};
|
203
|
-
})
|
204
|
-
.catch(() => {
|
205
|
-
const genericError = t('Cannot upload file:') + ` ${file.name}.`;
|
206
|
-
return Promise.reject(genericError);
|
207
|
-
});
|
208
|
-
}
|
209
|
-
/**
|
210
|
-
* Aborts the upload process.
|
211
|
-
*
|
212
|
-
* @see module:upload/filerepository~UploadAdapter#abort
|
213
|
-
*/
|
214
|
-
abort() {
|
215
|
-
this.controller.abort();
|
216
|
-
}
|
217
|
-
/**
|
218
|
-
* Sends the HTTP request.
|
219
|
-
*
|
220
|
-
* @param config.url the URL where the request will be sent.
|
221
|
-
* @param config.method The HTTP method.
|
222
|
-
* @param config.data Additional data to send.
|
223
|
-
* @param config.onUploadProgress A callback informing about the upload progress.
|
224
|
-
*/
|
225
|
-
_sendHttpRequest({ url, method = 'GET', data, onUploadProgress }) {
|
226
|
-
const signal = this.controller.signal;
|
227
|
-
const xhr = new XMLHttpRequest();
|
228
|
-
xhr.open(method, url.toString(), true);
|
229
|
-
xhr.setRequestHeader('Authorization', this.token.value);
|
230
|
-
xhr.setRequestHeader('CKBox-Version', 'CKEditor 5');
|
231
|
-
xhr.responseType = 'json';
|
232
|
-
// The callback is attached to the `signal#abort` event.
|
233
|
-
const abortCallback = () => {
|
234
|
-
xhr.abort();
|
235
|
-
};
|
236
|
-
return new Promise((resolve, reject) => {
|
237
|
-
signal.addEventListener('abort', abortCallback);
|
238
|
-
xhr.addEventListener('loadstart', () => {
|
239
|
-
signal.addEventListener('abort', abortCallback);
|
240
|
-
});
|
241
|
-
xhr.addEventListener('loadend', () => {
|
242
|
-
signal.removeEventListener('abort', abortCallback);
|
243
|
-
});
|
244
|
-
xhr.addEventListener('error', () => {
|
245
|
-
reject();
|
246
|
-
});
|
247
|
-
xhr.addEventListener('abort', () => {
|
248
|
-
reject();
|
249
|
-
});
|
250
|
-
xhr.addEventListener('load', async () => {
|
251
|
-
const response = xhr.response;
|
252
|
-
if (!response || response.statusCode >= 400) {
|
253
|
-
return reject(response && response.message);
|
254
|
-
}
|
255
|
-
return resolve(response);
|
256
|
-
});
|
257
|
-
/* istanbul ignore else -- @preserve */
|
258
|
-
if (onUploadProgress) {
|
259
|
-
xhr.upload.addEventListener('progress', evt => {
|
260
|
-
onUploadProgress(evt);
|
261
|
-
});
|
262
|
-
}
|
263
|
-
// Send the request.
|
264
|
-
xhr.send(data);
|
265
|
-
});
|
266
|
-
}
|
267
|
-
}
|
268
|
-
/**
|
269
|
-
* Returns an extension from the given value.
|
270
|
-
*/
|
271
|
-
function getFileExtension(value) {
|
272
|
-
const extensionRegExp = /\.(?<ext>[^.]+)$/;
|
273
|
-
const match = value.match(extensionRegExp);
|
274
|
-
return match.groups.ext.toLowerCase();
|
275
|
-
}
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
+
*/
|
5
|
+
/* globals AbortController, FormData, URL, XMLHttpRequest, window */
|
6
|
+
/**
|
7
|
+
* @module ckbox/ckboxuploadadapter
|
8
|
+
*/
|
9
|
+
import { Plugin } from 'ckeditor5/src/core';
|
10
|
+
import { FileRepository } from 'ckeditor5/src/upload';
|
11
|
+
import { logError } from 'ckeditor5/src/utils';
|
12
|
+
import CKBoxEditing from './ckboxediting';
|
13
|
+
import { getImageUrls, getWorkspaceId } from './utils';
|
14
|
+
/**
|
15
|
+
* A plugin that enables file uploads in CKEditor 5 using the CKBox server–side connector.
|
16
|
+
* See the {@glink features/file-management/ckbox CKBox file manager integration} guide to learn how to configure
|
17
|
+
* and use this feature as well as find out more about the full integration with the file manager
|
18
|
+
* provided by the {@link module:ckbox/ckbox~CKBox} plugin.
|
19
|
+
*
|
20
|
+
* Check out the {@glink features/images/image-upload/image-upload Image upload overview} guide to learn about
|
21
|
+
* other ways to upload images into CKEditor 5.
|
22
|
+
*/
|
23
|
+
export default class CKBoxUploadAdapter extends Plugin {
|
24
|
+
/**
|
25
|
+
* @inheritDoc
|
26
|
+
*/
|
27
|
+
static get requires() {
|
28
|
+
return ['ImageUploadEditing', 'ImageUploadProgress', FileRepository, CKBoxEditing];
|
29
|
+
}
|
30
|
+
/**
|
31
|
+
* @inheritDoc
|
32
|
+
*/
|
33
|
+
static get pluginName() {
|
34
|
+
return 'CKBoxUploadAdapter';
|
35
|
+
}
|
36
|
+
/**
|
37
|
+
* @inheritDoc
|
38
|
+
*/
|
39
|
+
async afterInit() {
|
40
|
+
const editor = this.editor;
|
41
|
+
const hasConfiguration = !!editor.config.get('ckbox');
|
42
|
+
const isLibraryLoaded = !!window.CKBox;
|
43
|
+
// Editor supports only one upload adapter. Register the CKBox upload adapter (and potentially overwrite other one) only when the
|
44
|
+
// integrator intentionally wants to use the CKBox plugin, i.e. when the `config.ckbox` exists or the CKBox JavaScript library is
|
45
|
+
// loaded.
|
46
|
+
if (!hasConfiguration && !isLibraryLoaded) {
|
47
|
+
return;
|
48
|
+
}
|
49
|
+
const fileRepository = editor.plugins.get(FileRepository);
|
50
|
+
const ckboxEditing = editor.plugins.get(CKBoxEditing);
|
51
|
+
fileRepository.createUploadAdapter = loader => {
|
52
|
+
return new Adapter(loader, ckboxEditing.getToken(), editor);
|
53
|
+
};
|
54
|
+
const shouldInsertDataId = !editor.config.get('ckbox.ignoreDataId');
|
55
|
+
const imageUploadEditing = editor.plugins.get('ImageUploadEditing');
|
56
|
+
// Mark uploaded assets with the `ckboxImageId` attribute. Its value represents an ID in CKBox.
|
57
|
+
if (shouldInsertDataId) {
|
58
|
+
imageUploadEditing.on('uploadComplete', (evt, { imageElement, data }) => {
|
59
|
+
editor.model.change(writer => {
|
60
|
+
writer.setAttribute('ckboxImageId', data.ckboxImageId, imageElement);
|
61
|
+
});
|
62
|
+
});
|
63
|
+
}
|
64
|
+
}
|
65
|
+
}
|
66
|
+
/**
|
67
|
+
* Upload adapter for CKBox.
|
68
|
+
*/
|
69
|
+
class Adapter {
|
70
|
+
/**
|
71
|
+
* Creates a new adapter instance.
|
72
|
+
*/
|
73
|
+
constructor(loader, token, editor) {
|
74
|
+
this.loader = loader;
|
75
|
+
this.token = token;
|
76
|
+
this.editor = editor;
|
77
|
+
this.controller = new AbortController();
|
78
|
+
this.serviceOrigin = editor.config.get('ckbox.serviceOrigin');
|
79
|
+
}
|
80
|
+
/**
|
81
|
+
* The ID of workspace to use.
|
82
|
+
*/
|
83
|
+
getWorkspaceId() {
|
84
|
+
const t = this.editor.t;
|
85
|
+
const cannotAccessDefaultWorkspaceError = t('Cannot access default workspace.');
|
86
|
+
const defaultWorkspaceId = this.editor.config.get('ckbox.defaultUploadWorkspaceId');
|
87
|
+
const workspaceId = getWorkspaceId(this.token, defaultWorkspaceId);
|
88
|
+
if (workspaceId == null) {
|
89
|
+
/**
|
90
|
+
* The user is not authorized to access the workspace defined in the`ckbox.defaultUploadWorkspaceId` configuration.
|
91
|
+
*
|
92
|
+
* @error ckbox-access-default-workspace-error
|
93
|
+
*/
|
94
|
+
logError('ckbox-access-default-workspace-error');
|
95
|
+
throw cannotAccessDefaultWorkspaceError;
|
96
|
+
}
|
97
|
+
return workspaceId;
|
98
|
+
}
|
99
|
+
/**
|
100
|
+
* Resolves a promise with an array containing available categories with which the uploaded file can be associated.
|
101
|
+
*
|
102
|
+
* If the API returns limited results, the method will collect all items.
|
103
|
+
*/
|
104
|
+
async getAvailableCategories(offset = 0) {
|
105
|
+
const ITEMS_PER_REQUEST = 50;
|
106
|
+
const categoryUrl = new URL('categories', this.serviceOrigin);
|
107
|
+
categoryUrl.searchParams.set('limit', ITEMS_PER_REQUEST.toString());
|
108
|
+
categoryUrl.searchParams.set('offset', offset.toString());
|
109
|
+
categoryUrl.searchParams.set('workspaceId', this.getWorkspaceId());
|
110
|
+
return this._sendHttpRequest({ url: categoryUrl })
|
111
|
+
.then(async (data) => {
|
112
|
+
const remainingItems = data.totalCount - (offset + ITEMS_PER_REQUEST);
|
113
|
+
if (remainingItems > 0) {
|
114
|
+
const offsetItems = await this.getAvailableCategories(offset + ITEMS_PER_REQUEST);
|
115
|
+
return [
|
116
|
+
...data.items,
|
117
|
+
...offsetItems
|
118
|
+
];
|
119
|
+
}
|
120
|
+
return data.items;
|
121
|
+
})
|
122
|
+
.catch(() => {
|
123
|
+
this.controller.signal.throwIfAborted();
|
124
|
+
/**
|
125
|
+
* Fetching a list of available categories with which an uploaded file can be associated failed.
|
126
|
+
*
|
127
|
+
* @error ckbox-fetch-category-http-error
|
128
|
+
*/
|
129
|
+
logError('ckbox-fetch-category-http-error');
|
130
|
+
});
|
131
|
+
}
|
132
|
+
/**
|
133
|
+
* Resolves a promise with an object containing a category with which the uploaded file is associated or an error code.
|
134
|
+
*/
|
135
|
+
async getCategoryIdForFile(file) {
|
136
|
+
const extension = getFileExtension(file.name);
|
137
|
+
const allCategories = await this.getAvailableCategories();
|
138
|
+
// Couldn't fetch all categories. Perhaps the authorization token is invalid.
|
139
|
+
if (!allCategories) {
|
140
|
+
return null;
|
141
|
+
}
|
142
|
+
// The plugin allows defining to which category the uploaded file should be assigned.
|
143
|
+
const defaultCategories = this.editor.config.get('ckbox.defaultUploadCategories');
|
144
|
+
// If a user specifies the plugin configuration, find the first category that accepts the uploaded file.
|
145
|
+
if (defaultCategories) {
|
146
|
+
const userCategory = Object.keys(defaultCategories).find(category => {
|
147
|
+
return defaultCategories[category].find(e => e.toLowerCase() == extension);
|
148
|
+
});
|
149
|
+
// If found, return its ID if the category exists on the server side.
|
150
|
+
if (userCategory) {
|
151
|
+
const serverCategory = allCategories.find(category => category.id === userCategory || category.name === userCategory);
|
152
|
+
if (!serverCategory) {
|
153
|
+
return null;
|
154
|
+
}
|
155
|
+
return serverCategory.id;
|
156
|
+
}
|
157
|
+
}
|
158
|
+
// Otherwise, find the first category that accepts the uploaded file and returns its ID.
|
159
|
+
const category = allCategories.find(category => category.extensions.find(e => e.toLowerCase() == extension));
|
160
|
+
if (!category) {
|
161
|
+
return null;
|
162
|
+
}
|
163
|
+
return category.id;
|
164
|
+
}
|
165
|
+
/**
|
166
|
+
* Starts the upload process.
|
167
|
+
*
|
168
|
+
* @see module:upload/filerepository~UploadAdapter#upload
|
169
|
+
*/
|
170
|
+
async upload() {
|
171
|
+
const t = this.editor.t;
|
172
|
+
const cannotFindCategoryError = t('Cannot determine a category for the uploaded file.');
|
173
|
+
const file = (await this.loader.file);
|
174
|
+
const category = await this.getCategoryIdForFile(file);
|
175
|
+
if (!category) {
|
176
|
+
return Promise.reject(cannotFindCategoryError);
|
177
|
+
}
|
178
|
+
const uploadUrl = new URL('assets', this.serviceOrigin);
|
179
|
+
const formData = new FormData();
|
180
|
+
uploadUrl.searchParams.set('workspaceId', this.getWorkspaceId());
|
181
|
+
formData.append('categoryId', category);
|
182
|
+
formData.append('file', file);
|
183
|
+
const requestConfig = {
|
184
|
+
method: 'POST',
|
185
|
+
url: uploadUrl,
|
186
|
+
data: formData,
|
187
|
+
onUploadProgress: (evt) => {
|
188
|
+
/* istanbul ignore else -- @preserve */
|
189
|
+
if (evt.lengthComputable) {
|
190
|
+
this.loader.uploadTotal = evt.total;
|
191
|
+
this.loader.uploaded = evt.loaded;
|
192
|
+
}
|
193
|
+
}
|
194
|
+
};
|
195
|
+
return this._sendHttpRequest(requestConfig)
|
196
|
+
.then(async (data) => {
|
197
|
+
const imageUrls = getImageUrls(data.imageUrls);
|
198
|
+
return {
|
199
|
+
ckboxImageId: data.id,
|
200
|
+
default: imageUrls.imageFallbackUrl,
|
201
|
+
sources: imageUrls.imageSources
|
202
|
+
};
|
203
|
+
})
|
204
|
+
.catch(() => {
|
205
|
+
const genericError = t('Cannot upload file:') + ` ${file.name}.`;
|
206
|
+
return Promise.reject(genericError);
|
207
|
+
});
|
208
|
+
}
|
209
|
+
/**
|
210
|
+
* Aborts the upload process.
|
211
|
+
*
|
212
|
+
* @see module:upload/filerepository~UploadAdapter#abort
|
213
|
+
*/
|
214
|
+
abort() {
|
215
|
+
this.controller.abort();
|
216
|
+
}
|
217
|
+
/**
|
218
|
+
* Sends the HTTP request.
|
219
|
+
*
|
220
|
+
* @param config.url the URL where the request will be sent.
|
221
|
+
* @param config.method The HTTP method.
|
222
|
+
* @param config.data Additional data to send.
|
223
|
+
* @param config.onUploadProgress A callback informing about the upload progress.
|
224
|
+
*/
|
225
|
+
_sendHttpRequest({ url, method = 'GET', data, onUploadProgress }) {
|
226
|
+
const signal = this.controller.signal;
|
227
|
+
const xhr = new XMLHttpRequest();
|
228
|
+
xhr.open(method, url.toString(), true);
|
229
|
+
xhr.setRequestHeader('Authorization', this.token.value);
|
230
|
+
xhr.setRequestHeader('CKBox-Version', 'CKEditor 5');
|
231
|
+
xhr.responseType = 'json';
|
232
|
+
// The callback is attached to the `signal#abort` event.
|
233
|
+
const abortCallback = () => {
|
234
|
+
xhr.abort();
|
235
|
+
};
|
236
|
+
return new Promise((resolve, reject) => {
|
237
|
+
signal.addEventListener('abort', abortCallback);
|
238
|
+
xhr.addEventListener('loadstart', () => {
|
239
|
+
signal.addEventListener('abort', abortCallback);
|
240
|
+
});
|
241
|
+
xhr.addEventListener('loadend', () => {
|
242
|
+
signal.removeEventListener('abort', abortCallback);
|
243
|
+
});
|
244
|
+
xhr.addEventListener('error', () => {
|
245
|
+
reject();
|
246
|
+
});
|
247
|
+
xhr.addEventListener('abort', () => {
|
248
|
+
reject();
|
249
|
+
});
|
250
|
+
xhr.addEventListener('load', async () => {
|
251
|
+
const response = xhr.response;
|
252
|
+
if (!response || response.statusCode >= 400) {
|
253
|
+
return reject(response && response.message);
|
254
|
+
}
|
255
|
+
return resolve(response);
|
256
|
+
});
|
257
|
+
/* istanbul ignore else -- @preserve */
|
258
|
+
if (onUploadProgress) {
|
259
|
+
xhr.upload.addEventListener('progress', evt => {
|
260
|
+
onUploadProgress(evt);
|
261
|
+
});
|
262
|
+
}
|
263
|
+
// Send the request.
|
264
|
+
xhr.send(data);
|
265
|
+
});
|
266
|
+
}
|
267
|
+
}
|
268
|
+
/**
|
269
|
+
* Returns an extension from the given value.
|
270
|
+
*/
|
271
|
+
function getFileExtension(value) {
|
272
|
+
const extensionRegExp = /\.(?<ext>[^.]+)$/;
|
273
|
+
const match = value.match(extensionRegExp);
|
274
|
+
return match.groups.ext.toLowerCase();
|
275
|
+
}
|
package/src/index.d.ts
CHANGED
@@ -1,13 +1,13 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
-
*/
|
5
|
-
/**
|
6
|
-
* @module ckbox
|
7
|
-
*/
|
8
|
-
export { default as CKBox } from './ckbox';
|
9
|
-
export { default as CKBoxEditing } from './ckboxediting';
|
10
|
-
export { default as CKBoxUI } from './ckboxui';
|
11
|
-
export type { default as CKBoxCommand } from './ckboxcommand';
|
12
|
-
export type { CKBoxConfig } from './ckboxconfig';
|
13
|
-
import './augmentation';
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
+
*/
|
5
|
+
/**
|
6
|
+
* @module ckbox
|
7
|
+
*/
|
8
|
+
export { default as CKBox } from './ckbox';
|
9
|
+
export { default as CKBoxEditing } from './ckboxediting';
|
10
|
+
export { default as CKBoxUI } from './ckboxui';
|
11
|
+
export type { default as CKBoxCommand } from './ckboxcommand';
|
12
|
+
export type { CKBoxConfig } from './ckboxconfig';
|
13
|
+
import './augmentation';
|
package/src/index.js
CHANGED
@@ -1,11 +1,11 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
-
*/
|
5
|
-
/**
|
6
|
-
* @module ckbox
|
7
|
-
*/
|
8
|
-
export { default as CKBox } from './ckbox';
|
9
|
-
export { default as CKBoxEditing } from './ckboxediting';
|
10
|
-
export { default as CKBoxUI } from './ckboxui';
|
11
|
-
import './augmentation';
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
+
*/
|
5
|
+
/**
|
6
|
+
* @module ckbox
|
7
|
+
*/
|
8
|
+
export { default as CKBox } from './ckbox';
|
9
|
+
export { default as CKBoxEditing } from './ckboxediting';
|
10
|
+
export { default as CKBoxUI } from './ckboxui';
|
11
|
+
import './augmentation';
|
package/src/utils.d.ts
CHANGED
@@ -1,28 +1,28 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
-
*/
|
5
|
-
/**
|
6
|
-
* @module ckbox/utils
|
7
|
-
*/
|
8
|
-
import type { InitializedToken } from '@ckeditor/ckeditor5-cloud-services';
|
9
|
-
import type { CKBoxImageUrls } from './ckboxconfig';
|
10
|
-
/**
|
11
|
-
* Converts image source set provided by the CKBox into an object containing:
|
12
|
-
* - responsive URLs for the "webp" image format,
|
13
|
-
* - one fallback URL for browsers that do not support the "webp" format.
|
14
|
-
*/
|
15
|
-
export declare function getImageUrls(imageUrls: CKBoxImageUrls): {
|
16
|
-
imageFallbackUrl: string;
|
17
|
-
imageSources: Array<{
|
18
|
-
srcset: string;
|
19
|
-
sizes: string;
|
20
|
-
type: string;
|
21
|
-
}>;
|
22
|
-
};
|
23
|
-
/**
|
24
|
-
* Returns a workspace id to use for communication with the CKBox service.
|
25
|
-
*
|
26
|
-
* @param defaultWorkspaceId The default workspace to use taken from editor config.
|
27
|
-
*/
|
28
|
-
export declare function getWorkspaceId(token: InitializedToken, defaultWorkspaceId?: string): string | null;
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
+
*/
|
5
|
+
/**
|
6
|
+
* @module ckbox/utils
|
7
|
+
*/
|
8
|
+
import type { InitializedToken } from '@ckeditor/ckeditor5-cloud-services';
|
9
|
+
import type { CKBoxImageUrls } from './ckboxconfig';
|
10
|
+
/**
|
11
|
+
* Converts image source set provided by the CKBox into an object containing:
|
12
|
+
* - responsive URLs for the "webp" image format,
|
13
|
+
* - one fallback URL for browsers that do not support the "webp" format.
|
14
|
+
*/
|
15
|
+
export declare function getImageUrls(imageUrls: CKBoxImageUrls): {
|
16
|
+
imageFallbackUrl: string;
|
17
|
+
imageSources: Array<{
|
18
|
+
srcset: string;
|
19
|
+
sizes: string;
|
20
|
+
type: string;
|
21
|
+
}>;
|
22
|
+
};
|
23
|
+
/**
|
24
|
+
* Returns a workspace id to use for communication with the CKBox service.
|
25
|
+
*
|
26
|
+
* @param defaultWorkspaceId The default workspace to use taken from editor config.
|
27
|
+
*/
|
28
|
+
export declare function getWorkspaceId(token: InitializedToken, defaultWorkspaceId?: string): string | null;
|