@ckeditor/ckeditor5-ckbox 48.2.0-alpha.7 → 48.3.0-alpha.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/dist/augmentation.d.ts +28 -28
- package/dist/ckbox.d.ts +32 -32
- package/dist/ckboxcommand.d.ts +120 -120
- package/dist/ckboxconfig.d.ts +417 -417
- package/dist/ckboxediting.d.ts +58 -58
- package/dist/ckboximageedit/ckboximageeditcommand.d.ts +100 -100
- package/dist/ckboximageedit/ckboximageeditediting.d.ts +28 -28
- package/dist/ckboximageedit/ckboximageeditui.d.ts +23 -23
- package/dist/ckboximageedit/utils.d.ts +8 -8
- package/dist/ckboximageedit.d.ts +23 -23
- package/dist/ckboxui.d.ts +51 -51
- package/dist/ckboxuploadadapter.d.ts +33 -33
- package/dist/ckboxutils.d.ts +54 -54
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +21 -21
- package/dist/index.js +1653 -1763
- package/dist/index.js.map +1 -1
- package/dist/utils.d.ts +58 -58
- package/package.json +10 -10
package/dist/index.js
CHANGED
|
@@ -2,1843 +2,1733 @@
|
|
|
2
2
|
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
3
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
4
|
*/
|
|
5
|
-
import {
|
|
6
|
-
import { ButtonView, MenuBarMenuListItemButtonView, Notification } from
|
|
7
|
-
import { IconBrowseFiles,
|
|
8
|
-
import { ModelRange } from
|
|
9
|
-
import {
|
|
10
|
-
import { LinkEditing } from
|
|
11
|
-
import { decode } from
|
|
12
|
-
import { FileRepository } from
|
|
13
|
-
import { ImageUploadEditing, ImageUploadProgress,
|
|
14
|
-
import { CloudServices } from
|
|
15
|
-
import { isEqual } from
|
|
5
|
+
import { Command, PendingActions, Plugin } from "@ckeditor/ckeditor5-core";
|
|
6
|
+
import { ButtonView, MenuBarMenuListItemButtonView, Notification } from "@ckeditor/ckeditor5-ui";
|
|
7
|
+
import { IconBrowseFiles, IconCkboxImageEdit, IconImageAssetManager } from "@ckeditor/ckeditor5-icons";
|
|
8
|
+
import { ModelRange } from "@ckeditor/ckeditor5-engine";
|
|
9
|
+
import { CKEditorError, abortableDebounce, createElement, delay, global, logError, retry, toMap } from "@ckeditor/ckeditor5-utils";
|
|
10
|
+
import { LinkEditing } from "@ckeditor/ckeditor5-link";
|
|
11
|
+
import { decode } from "blurhash";
|
|
12
|
+
import { FileRepository } from "@ckeditor/ckeditor5-upload";
|
|
13
|
+
import { ImageEditing, ImageUploadEditing, ImageUploadProgress, ImageUtils, PictureEditing } from "@ckeditor/ckeditor5-image";
|
|
14
|
+
import { CloudServices } from "@ckeditor/ckeditor5-cloud-services";
|
|
15
|
+
import { isEqual } from "es-toolkit/compat";
|
|
16
16
|
|
|
17
17
|
/**
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
18
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
19
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
20
|
+
*/
|
|
21
|
+
/**
|
|
22
|
+
* @module ckbox/ckboxui
|
|
23
|
+
*/
|
|
24
|
+
/**
|
|
25
|
+
* Introduces UI components for the `CKBox` plugin.
|
|
26
|
+
*
|
|
27
|
+
* The plugin introduces two UI components to the {@link module:ui/componentfactory~ComponentFactory UI component factory}:
|
|
28
|
+
*
|
|
29
|
+
* * the `'ckbox'` toolbar button,
|
|
30
|
+
* * the `'menuBar:ckbox'` menu bar component, which is by default added to the `'Insert'` menu.
|
|
31
|
+
*
|
|
32
|
+
* It also integrates with the `insertImage` toolbar component and `menuBar:insertImage` menu component.
|
|
33
|
+
*/
|
|
34
|
+
var CKBoxUI = class extends Plugin {
|
|
35
|
+
/**
|
|
36
|
+
* @inheritDoc
|
|
37
|
+
*/
|
|
38
|
+
static get pluginName() {
|
|
39
|
+
return "CKBoxUI";
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* @inheritDoc
|
|
43
|
+
*/
|
|
44
|
+
static get isOfficialPlugin() {
|
|
45
|
+
return true;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* @inheritDoc
|
|
49
|
+
*/
|
|
50
|
+
afterInit() {
|
|
51
|
+
const editor = this.editor;
|
|
52
|
+
if (!editor.commands.get("ckbox")) return;
|
|
53
|
+
editor.ui.componentFactory.add("ckbox", () => this._createFileToolbarButton());
|
|
54
|
+
editor.ui.componentFactory.add("menuBar:ckbox", () => this._createFileMenuBarButton());
|
|
55
|
+
if (editor.plugins.has("ImageInsertUI")) editor.plugins.get("ImageInsertUI").registerIntegration({
|
|
56
|
+
name: "assetManager",
|
|
57
|
+
observable: () => editor.commands.get("ckbox"),
|
|
58
|
+
buttonViewCreator: () => this._createImageToolbarButton(),
|
|
59
|
+
formViewCreator: () => this._createImageDropdownButton(),
|
|
60
|
+
menuBarButtonViewCreator: (isOnly) => this._createImageMenuBarButton(isOnly ? "insertOnly" : "insertNested")
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Creates the base for various kinds of the button component provided by this feature.
|
|
65
|
+
*/
|
|
66
|
+
_createButton(ButtonClass) {
|
|
67
|
+
const editor = this.editor;
|
|
68
|
+
const locale = editor.locale;
|
|
69
|
+
const view = new ButtonClass(locale);
|
|
70
|
+
const command = editor.commands.get("ckbox");
|
|
71
|
+
view.bind("isOn", "isEnabled").to(command, "value", "isEnabled");
|
|
72
|
+
view.on("execute", () => {
|
|
73
|
+
editor.execute("ckbox");
|
|
74
|
+
});
|
|
75
|
+
return view;
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Creates a simple toolbar button for files management, with an icon and a tooltip.
|
|
79
|
+
*/
|
|
80
|
+
_createFileToolbarButton() {
|
|
81
|
+
const t = this.editor.locale.t;
|
|
82
|
+
const button = this._createButton(ButtonView);
|
|
83
|
+
button.icon = IconBrowseFiles;
|
|
84
|
+
button.label = t("Open file manager");
|
|
85
|
+
button.tooltip = true;
|
|
86
|
+
return button;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Creates a simple toolbar button for images management, with an icon and a tooltip.
|
|
90
|
+
*/
|
|
91
|
+
_createImageToolbarButton() {
|
|
92
|
+
const t = this.editor.locale.t;
|
|
93
|
+
const imageInsertUI = this.editor.plugins.get("ImageInsertUI");
|
|
94
|
+
const button = this._createButton(ButtonView);
|
|
95
|
+
button.icon = IconImageAssetManager;
|
|
96
|
+
button.bind("label").to(imageInsertUI, "isImageSelected", (isImageSelected) => isImageSelected ? t("Replace image with file manager") : t("Insert image with file manager"));
|
|
97
|
+
button.tooltip = true;
|
|
98
|
+
return button;
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* Creates a button for images management for the dropdown view, with an icon, text and no tooltip.
|
|
102
|
+
*/
|
|
103
|
+
_createImageDropdownButton() {
|
|
104
|
+
const t = this.editor.locale.t;
|
|
105
|
+
const imageInsertUI = this.editor.plugins.get("ImageInsertUI");
|
|
106
|
+
const button = this._createButton(ButtonView);
|
|
107
|
+
button.icon = IconImageAssetManager;
|
|
108
|
+
button.withText = true;
|
|
109
|
+
button.bind("label").to(imageInsertUI, "isImageSelected", (isImageSelected) => isImageSelected ? t("Replace with file manager") : t("Insert with file manager"));
|
|
110
|
+
button.on("execute", () => {
|
|
111
|
+
imageInsertUI.dropdownView.isOpen = false;
|
|
112
|
+
});
|
|
113
|
+
return button;
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* Creates a button for files management for the menu bar.
|
|
117
|
+
*/
|
|
118
|
+
_createFileMenuBarButton() {
|
|
119
|
+
const t = this.editor.locale.t;
|
|
120
|
+
const button = this._createButton(MenuBarMenuListItemButtonView);
|
|
121
|
+
button.icon = IconBrowseFiles;
|
|
122
|
+
button.withText = true;
|
|
123
|
+
button.label = t("File");
|
|
124
|
+
return button;
|
|
125
|
+
}
|
|
126
|
+
/**
|
|
127
|
+
* Creates a button for images management for the menu bar.
|
|
128
|
+
*/
|
|
129
|
+
_createImageMenuBarButton(type) {
|
|
130
|
+
const translateVariableKey = this.editor.locale.t;
|
|
131
|
+
const t = this.editor.locale.t;
|
|
132
|
+
const button = this._createButton(MenuBarMenuListItemButtonView);
|
|
133
|
+
button.icon = IconImageAssetManager;
|
|
134
|
+
button.withText = true;
|
|
135
|
+
switch (type) {
|
|
136
|
+
case "insertOnly":
|
|
137
|
+
button.label = translateVariableKey("Image");
|
|
138
|
+
break;
|
|
139
|
+
case "insertNested":
|
|
140
|
+
button.label = t("With file manager");
|
|
141
|
+
break;
|
|
142
|
+
}
|
|
143
|
+
return button;
|
|
144
|
+
}
|
|
145
|
+
};
|
|
136
146
|
|
|
137
147
|
/**
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
148
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
149
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
150
|
+
*/
|
|
151
|
+
/**
|
|
152
|
+
* Converts image source set provided by the CKBox into an object containing:
|
|
153
|
+
* - responsive URLs for the "webp" image format,
|
|
154
|
+
* - one fallback URL for browsers that do not support the "webp" format.
|
|
155
|
+
*
|
|
156
|
+
* @internal
|
|
157
|
+
*/
|
|
158
|
+
function getImageUrls(imageUrls) {
|
|
159
|
+
const responsiveUrls = [];
|
|
160
|
+
let maxWidth = 0;
|
|
161
|
+
for (const key in imageUrls) {
|
|
162
|
+
const width = parseInt(key, 10);
|
|
163
|
+
if (!isNaN(width)) {
|
|
164
|
+
if (width > maxWidth) maxWidth = width;
|
|
165
|
+
responsiveUrls.push(`${imageUrls[key]} ${key}w`);
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
const imageSources = [{
|
|
169
|
+
srcset: responsiveUrls.join(","),
|
|
170
|
+
sizes: `(max-width: ${maxWidth}px) 100vw, ${maxWidth}px`,
|
|
171
|
+
type: "image/webp"
|
|
172
|
+
}];
|
|
173
|
+
return {
|
|
174
|
+
imageFallbackUrl: imageUrls.default,
|
|
175
|
+
imageSources
|
|
176
|
+
};
|
|
166
177
|
}
|
|
167
178
|
/**
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
}
|
|
181
|
-
if (payload.auth?.ckbox?.role == 'superadmin' || workspaces.includes(defaultWorkspaceId)) {
|
|
182
|
-
return defaultWorkspaceId;
|
|
183
|
-
}
|
|
184
|
-
return null;
|
|
179
|
+
* Returns a workspace id to use for communication with the CKBox service.
|
|
180
|
+
*
|
|
181
|
+
* @param defaultWorkspaceId The default workspace to use taken from editor config.
|
|
182
|
+
* @internal
|
|
183
|
+
*/
|
|
184
|
+
function getWorkspaceId(token, defaultWorkspaceId) {
|
|
185
|
+
const [, binaryTokenPayload] = token.value.split(".");
|
|
186
|
+
const payload = JSON.parse(atob(binaryTokenPayload));
|
|
187
|
+
const workspaces = payload.auth?.ckbox?.workspaces || [payload.aud];
|
|
188
|
+
if (!defaultWorkspaceId) return workspaces[0];
|
|
189
|
+
if (payload.auth?.ckbox?.role == "superadmin" || workspaces.includes(defaultWorkspaceId)) return defaultWorkspaceId;
|
|
190
|
+
return null;
|
|
185
191
|
}
|
|
186
192
|
/**
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
193
|
+
* Default resolution for decoding blurhash values.
|
|
194
|
+
* Relatively small values must be used in order to ensure acceptable performance.
|
|
195
|
+
*/
|
|
196
|
+
const BLUR_RESOLUTION = 32;
|
|
190
197
|
/**
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
return undefined;
|
|
214
|
-
}
|
|
198
|
+
* Generates an image data URL from its `blurhash` representation.
|
|
199
|
+
*
|
|
200
|
+
* @internal
|
|
201
|
+
*/
|
|
202
|
+
function blurHashToDataUrl(hash) {
|
|
203
|
+
if (!hash) return;
|
|
204
|
+
try {
|
|
205
|
+
const resolutionInPx = `${BLUR_RESOLUTION}px`;
|
|
206
|
+
const canvas = document.createElement("canvas");
|
|
207
|
+
canvas.setAttribute("width", resolutionInPx);
|
|
208
|
+
canvas.setAttribute("height", resolutionInPx);
|
|
209
|
+
const ctx = canvas.getContext("2d");
|
|
210
|
+
/* istanbul ignore next -- @preserve */
|
|
211
|
+
if (!ctx) return;
|
|
212
|
+
const imageData = ctx.createImageData(BLUR_RESOLUTION, BLUR_RESOLUTION);
|
|
213
|
+
const decoded = decode(hash, BLUR_RESOLUTION, BLUR_RESOLUTION);
|
|
214
|
+
imageData.data.set(decoded);
|
|
215
|
+
ctx.putImageData(imageData, 0, 0);
|
|
216
|
+
return canvas.toDataURL();
|
|
217
|
+
} catch {
|
|
218
|
+
return;
|
|
219
|
+
}
|
|
215
220
|
}
|
|
216
221
|
/**
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
}
|
|
264
|
-
// Send the request.
|
|
265
|
-
xhr.send(data);
|
|
266
|
-
});
|
|
222
|
+
* Sends the HTTP request.
|
|
223
|
+
*
|
|
224
|
+
* @internal
|
|
225
|
+
* @param options Configuration options
|
|
226
|
+
* @param options.url The URL where the request will be sent.
|
|
227
|
+
* @param options.signal The AbortSignal to abort the request when needed.
|
|
228
|
+
* @param options.authorization The authorization token for the request.
|
|
229
|
+
* @param options.method The HTTP method (default: 'GET').
|
|
230
|
+
* @param options.data Additional data to send.
|
|
231
|
+
* @param options.onUploadProgress A callback informing about the upload progress.
|
|
232
|
+
*/
|
|
233
|
+
function sendHttpRequest({ url, method = "GET", data, onUploadProgress, signal, authorization }) {
|
|
234
|
+
const xhr = new XMLHttpRequest();
|
|
235
|
+
xhr.open(method, url.toString());
|
|
236
|
+
xhr.setRequestHeader("Authorization", authorization);
|
|
237
|
+
xhr.setRequestHeader("CKBox-Version", "CKEditor 5");
|
|
238
|
+
xhr.responseType = "json";
|
|
239
|
+
const abortCallback = () => {
|
|
240
|
+
xhr.abort();
|
|
241
|
+
};
|
|
242
|
+
return new Promise((resolve, reject) => {
|
|
243
|
+
signal.throwIfAborted();
|
|
244
|
+
signal.addEventListener("abort", abortCallback);
|
|
245
|
+
xhr.addEventListener("loadstart", () => {
|
|
246
|
+
signal.addEventListener("abort", abortCallback);
|
|
247
|
+
});
|
|
248
|
+
xhr.addEventListener("loadend", () => {
|
|
249
|
+
signal.removeEventListener("abort", abortCallback);
|
|
250
|
+
});
|
|
251
|
+
xhr.addEventListener("error", () => {
|
|
252
|
+
reject();
|
|
253
|
+
});
|
|
254
|
+
xhr.addEventListener("abort", () => {
|
|
255
|
+
reject();
|
|
256
|
+
});
|
|
257
|
+
xhr.addEventListener("load", () => {
|
|
258
|
+
const response = xhr.response;
|
|
259
|
+
if (!response || response.statusCode >= 400) return reject(response && response.message);
|
|
260
|
+
resolve(response);
|
|
261
|
+
});
|
|
262
|
+
/* istanbul ignore else -- @preserve */
|
|
263
|
+
if (onUploadProgress) xhr.upload.addEventListener("progress", (evt) => {
|
|
264
|
+
onUploadProgress(evt);
|
|
265
|
+
});
|
|
266
|
+
xhr.send(data);
|
|
267
|
+
});
|
|
267
268
|
}
|
|
268
269
|
const MIME_TO_EXTENSION = {
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
270
|
+
"image/gif": "gif",
|
|
271
|
+
"image/jpeg": "jpg",
|
|
272
|
+
"image/png": "png",
|
|
273
|
+
"image/webp": "webp",
|
|
274
|
+
"image/bmp": "bmp",
|
|
275
|
+
"image/tiff": "tiff"
|
|
275
276
|
};
|
|
276
277
|
/**
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
278
|
+
* Returns an extension a typical file in the specified `mimeType` format would have.
|
|
279
|
+
*
|
|
280
|
+
* @internal
|
|
281
|
+
*/
|
|
282
|
+
function convertMimeTypeToExtension(mimeType) {
|
|
283
|
+
return MIME_TO_EXTENSION[mimeType];
|
|
282
284
|
}
|
|
283
285
|
/**
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
}
|
|
286
|
+
* Tries to fetch the given `url` and returns 'content-type' of the response.
|
|
287
|
+
*
|
|
288
|
+
* @internal
|
|
289
|
+
*/
|
|
290
|
+
async function getContentTypeOfUrl(url, options) {
|
|
291
|
+
try {
|
|
292
|
+
const response = await fetch(url, {
|
|
293
|
+
method: "HEAD",
|
|
294
|
+
cache: "force-cache",
|
|
295
|
+
...options
|
|
296
|
+
});
|
|
297
|
+
if (!response.ok) return "";
|
|
298
|
+
return response.headers.get("content-type") || "";
|
|
299
|
+
} catch {
|
|
300
|
+
return "";
|
|
301
|
+
}
|
|
301
302
|
}
|
|
302
303
|
/**
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
const match = fileName.match(extensionRegExp);
|
|
310
|
-
return match.groups.ext.toLowerCase();
|
|
304
|
+
* Returns an extension from the given value.
|
|
305
|
+
*
|
|
306
|
+
* @internal
|
|
307
|
+
*/
|
|
308
|
+
function getFileExtension(file) {
|
|
309
|
+
return file.name.match(/\.(?<ext>[^.]+)$/).groups.ext.toLowerCase();
|
|
311
310
|
}
|
|
312
311
|
|
|
313
|
-
// Defines the waiting time (in milliseconds) for inserting the chosen asset into the model. The chosen asset is temporarily stored in the
|
|
314
|
-
// `CKBoxCommand#_chosenAssets` and it is removed from there automatically after this time. See `CKBoxCommand#_chosenAssets` for more
|
|
315
|
-
// details.
|
|
316
|
-
const ASSET_INSERTION_WAIT_TIMEOUT = 1000;
|
|
317
312
|
/**
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
* editor.execute( 'ckbox' );
|
|
323
|
-
* ```
|
|
324
|
-
*
|
|
325
|
-
* **Note:** This command uses other features to perform the following tasks:
|
|
326
|
-
* - To insert images it uses the {@link module:image/image/insertimagecommand~InsertImageCommand 'insertImage'} command from the
|
|
327
|
-
* {@link module:image/image~Image Image feature}.
|
|
328
|
-
* - To insert links to other files it uses the {@link module:link/linkcommand~LinkCommand 'link'} command from the
|
|
329
|
-
* {@link module:link/link~Link Link feature}.
|
|
330
|
-
*/ class CKBoxCommand extends Command {
|
|
331
|
-
/**
|
|
332
|
-
* A set of all chosen assets. They are stored temporarily and they are automatically removed 1 second after being chosen.
|
|
333
|
-
* Chosen assets have to be "remembered" for a while to be able to map the given asset with the element inserted into the model.
|
|
334
|
-
* This association map is then used to set the ID on the model element.
|
|
335
|
-
*
|
|
336
|
-
* All chosen assets are automatically removed after the timeout, because (theoretically) it may happen that they will never be
|
|
337
|
-
* inserted into the model, even if the {@link module:link/linkcommand~LinkCommand `'link'`} command or the
|
|
338
|
-
* {@link module:image/image/insertimagecommand~InsertImageCommand `'insertImage'`} command is enabled. Such a case may arise when
|
|
339
|
-
* another plugin blocks the command execution. Then, in order not to keep the chosen (but not inserted) assets forever, we delete
|
|
340
|
-
* them automatically to prevent memory leakage. The 1 second timeout is enough to insert the asset into the model and extract the
|
|
341
|
-
* ID from the chosen asset.
|
|
342
|
-
*
|
|
343
|
-
* The assets are stored only if
|
|
344
|
-
* the {@link module:ckbox/ckboxconfig~CKBoxConfig#ignoreDataId `config.ckbox.ignoreDataId`} option is set to `false` (by default).
|
|
345
|
-
*
|
|
346
|
-
* @internal
|
|
347
|
-
*/ _chosenAssets = new Set();
|
|
348
|
-
/**
|
|
349
|
-
* The DOM element that acts as a mounting point for the CKBox dialog.
|
|
350
|
-
*/ _wrapper = null;
|
|
351
|
-
/**
|
|
352
|
-
* @inheritDoc
|
|
353
|
-
*/ constructor(editor){
|
|
354
|
-
super(editor);
|
|
355
|
-
this._initListeners();
|
|
356
|
-
}
|
|
357
|
-
/**
|
|
358
|
-
* @inheritDoc
|
|
359
|
-
*/ refresh() {
|
|
360
|
-
this.value = this._getValue();
|
|
361
|
-
this.isEnabled = this._checkEnabled();
|
|
362
|
-
}
|
|
363
|
-
/**
|
|
364
|
-
* @inheritDoc
|
|
365
|
-
*/ execute() {
|
|
366
|
-
this.fire('ckbox:open');
|
|
367
|
-
}
|
|
368
|
-
/**
|
|
369
|
-
* Indicates if the CKBox dialog is already opened.
|
|
370
|
-
*
|
|
371
|
-
* @protected
|
|
372
|
-
* @returns {Boolean}
|
|
373
|
-
*/ _getValue() {
|
|
374
|
-
return this._wrapper !== null;
|
|
375
|
-
}
|
|
376
|
-
/**
|
|
377
|
-
* Checks whether the command can be enabled in the current context.
|
|
378
|
-
*/ _checkEnabled() {
|
|
379
|
-
const imageCommand = this.editor.commands.get('insertImage');
|
|
380
|
-
const linkCommand = this.editor.commands.get('link');
|
|
381
|
-
if (!imageCommand.isEnabled && !linkCommand.isEnabled) {
|
|
382
|
-
return false;
|
|
383
|
-
}
|
|
384
|
-
return true;
|
|
385
|
-
}
|
|
386
|
-
/**
|
|
387
|
-
* Creates the options object for the CKBox dialog.
|
|
388
|
-
*
|
|
389
|
-
* @returns The object with properties:
|
|
390
|
-
* - theme The theme for CKBox dialog.
|
|
391
|
-
* - language The language for CKBox dialog.
|
|
392
|
-
* - tokenUrl The token endpoint URL.
|
|
393
|
-
* - serviceOrigin The base URL of the API service.
|
|
394
|
-
* - forceDemoLabel Whether to force "Powered by CKBox" link.
|
|
395
|
-
* - assets.onChoose The callback function invoked after choosing the assets.
|
|
396
|
-
* - dialog.onClose The callback function invoked after closing the CKBox dialog.
|
|
397
|
-
* - dialog.width The dialog width in pixels.
|
|
398
|
-
* - dialog.height The dialog height in pixels.
|
|
399
|
-
* - categories.icons Allows setting custom icons for categories.
|
|
400
|
-
* - view.openLastView Sets if the last view visited by the user will be reopened
|
|
401
|
-
* on the next startup.
|
|
402
|
-
* - view.startupFolderId Sets the ID of the folder that will be opened on startup.
|
|
403
|
-
* - view.startupCategoryId Sets the ID of the category that will be opened on startup.
|
|
404
|
-
* - view.hideMaximizeButton Sets whether to hide the ‘Maximize’ button.
|
|
405
|
-
* - view.componentsHideTimeout Sets timeout after which upload components are hidden
|
|
406
|
-
* after completed upload.
|
|
407
|
-
* - view.dialogMinimizeTimeout Sets timeout after which upload dialog is minimized
|
|
408
|
-
* after completed upload.
|
|
409
|
-
*/ _prepareOptions() {
|
|
410
|
-
const editor = this.editor;
|
|
411
|
-
const ckboxConfig = editor.config.get('ckbox');
|
|
412
|
-
const dialog = ckboxConfig.dialog;
|
|
413
|
-
const categories = ckboxConfig.categories;
|
|
414
|
-
const view = ckboxConfig.view;
|
|
415
|
-
const upload = ckboxConfig.upload;
|
|
416
|
-
return {
|
|
417
|
-
theme: ckboxConfig.theme,
|
|
418
|
-
language: ckboxConfig.language,
|
|
419
|
-
tokenUrl: ckboxConfig.tokenUrl,
|
|
420
|
-
serviceOrigin: ckboxConfig.serviceOrigin,
|
|
421
|
-
forceDemoLabel: ckboxConfig.forceDemoLabel,
|
|
422
|
-
choosableFileExtensions: ckboxConfig.choosableFileExtensions,
|
|
423
|
-
assets: {
|
|
424
|
-
onChoose: (assets)=>this.fire('ckbox:choose', assets)
|
|
425
|
-
},
|
|
426
|
-
dialog: {
|
|
427
|
-
onClose: ()=>this.fire('ckbox:close'),
|
|
428
|
-
width: dialog && dialog.width,
|
|
429
|
-
height: dialog && dialog.height
|
|
430
|
-
},
|
|
431
|
-
categories: categories && {
|
|
432
|
-
icons: categories.icons
|
|
433
|
-
},
|
|
434
|
-
view: view && {
|
|
435
|
-
openLastView: view.openLastView,
|
|
436
|
-
startupFolderId: view.startupFolderId,
|
|
437
|
-
startupCategoryId: view.startupCategoryId,
|
|
438
|
-
hideMaximizeButton: view.hideMaximizeButton
|
|
439
|
-
},
|
|
440
|
-
upload: upload && {
|
|
441
|
-
componentsHideTimeout: upload.componentsHideTimeout,
|
|
442
|
-
dialogMinimizeTimeout: upload.dialogMinimizeTimeout
|
|
443
|
-
}
|
|
444
|
-
};
|
|
445
|
-
}
|
|
446
|
-
/**
|
|
447
|
-
* Initializes various event listeners for the `ckbox:*` events, because all functionality of the `ckbox` command is event-based.
|
|
448
|
-
*/ _initListeners() {
|
|
449
|
-
const editor = this.editor;
|
|
450
|
-
const model = editor.model;
|
|
451
|
-
const shouldInsertDataId = !editor.config.get('ckbox.ignoreDataId');
|
|
452
|
-
const downloadableFilesConfig = editor.config.get('ckbox.downloadableFiles');
|
|
453
|
-
// Refresh the command after firing the `ckbox:*` event.
|
|
454
|
-
this.on('ckbox', ()=>{
|
|
455
|
-
this.refresh();
|
|
456
|
-
}, {
|
|
457
|
-
priority: 'low'
|
|
458
|
-
});
|
|
459
|
-
// Handle opening of the CKBox dialog.
|
|
460
|
-
this.on('ckbox:open', ()=>{
|
|
461
|
-
if (!this.isEnabled || this.value) {
|
|
462
|
-
return;
|
|
463
|
-
}
|
|
464
|
-
this._wrapper = createElement(document, 'div', {
|
|
465
|
-
class: 'ck ckbox-wrapper'
|
|
466
|
-
});
|
|
467
|
-
document.body.appendChild(this._wrapper);
|
|
468
|
-
window.CKBox.mount(this._wrapper, this._prepareOptions());
|
|
469
|
-
});
|
|
470
|
-
// Handle closing of the CKBox dialog.
|
|
471
|
-
this.on('ckbox:close', ()=>{
|
|
472
|
-
if (!this.value) {
|
|
473
|
-
return;
|
|
474
|
-
}
|
|
475
|
-
this._wrapper.remove();
|
|
476
|
-
this._wrapper = null;
|
|
477
|
-
editor.editing.view.focus();
|
|
478
|
-
});
|
|
479
|
-
// Handle choosing the assets.
|
|
480
|
-
this.on('ckbox:choose', (evt, assets)=>{
|
|
481
|
-
if (!this.isEnabled) {
|
|
482
|
-
return;
|
|
483
|
-
}
|
|
484
|
-
const imageCommand = editor.commands.get('insertImage');
|
|
485
|
-
const linkCommand = editor.commands.get('link');
|
|
486
|
-
const assetsToProcess = prepareAssets({
|
|
487
|
-
assets,
|
|
488
|
-
downloadableFilesConfig,
|
|
489
|
-
isImageAllowed: imageCommand.isEnabled,
|
|
490
|
-
isLinkAllowed: linkCommand.isEnabled
|
|
491
|
-
});
|
|
492
|
-
const assetsCount = assetsToProcess.length;
|
|
493
|
-
if (assetsCount === 0) {
|
|
494
|
-
return;
|
|
495
|
-
}
|
|
496
|
-
// All assets are inserted in one undo step.
|
|
497
|
-
model.change((writer)=>{
|
|
498
|
-
for (const asset of assetsToProcess){
|
|
499
|
-
const isLastAsset = asset === assetsToProcess[assetsCount - 1];
|
|
500
|
-
const isSingleAsset = assetsCount === 1;
|
|
501
|
-
this._insertAsset(asset, isLastAsset, writer, isSingleAsset);
|
|
502
|
-
// If asset ID must be set for the inserted model element, store the asset temporarily and remove it automatically
|
|
503
|
-
// after the timeout.
|
|
504
|
-
if (shouldInsertDataId) {
|
|
505
|
-
setTimeout(()=>this._chosenAssets.delete(asset), ASSET_INSERTION_WAIT_TIMEOUT);
|
|
506
|
-
this._chosenAssets.add(asset);
|
|
507
|
-
}
|
|
508
|
-
}
|
|
509
|
-
});
|
|
510
|
-
editor.editing.view.focus();
|
|
511
|
-
});
|
|
512
|
-
// Clean up after the editor is destroyed.
|
|
513
|
-
this.listenTo(editor, 'destroy', ()=>{
|
|
514
|
-
this.fire('ckbox:close');
|
|
515
|
-
this._chosenAssets.clear();
|
|
516
|
-
});
|
|
517
|
-
}
|
|
518
|
-
/**
|
|
519
|
-
* Inserts the asset into the model.
|
|
520
|
-
*
|
|
521
|
-
* @param asset The asset to be inserted.
|
|
522
|
-
* @param isLastAsset Indicates if the current asset is the last one from the chosen set.
|
|
523
|
-
* @param writer An instance of the model writer.
|
|
524
|
-
* @param isSingleAsset It's true when only one asset is processed.
|
|
525
|
-
*/ _insertAsset(asset, isLastAsset, writer, isSingleAsset) {
|
|
526
|
-
const editor = this.editor;
|
|
527
|
-
const model = editor.model;
|
|
528
|
-
const selection = model.document.selection;
|
|
529
|
-
// Remove the `linkHref` attribute to not affect the asset to be inserted.
|
|
530
|
-
writer.removeSelectionAttribute('linkHref');
|
|
531
|
-
if (asset.type === 'image') {
|
|
532
|
-
this._insertImage(asset);
|
|
533
|
-
} else {
|
|
534
|
-
this._insertLink(asset, writer, isSingleAsset);
|
|
535
|
-
}
|
|
536
|
-
// Except for the last chosen asset, move the selection to the end of the current range to avoid overwriting other, already
|
|
537
|
-
// inserted assets.
|
|
538
|
-
if (!isLastAsset) {
|
|
539
|
-
writer.setSelection(selection.getLastPosition());
|
|
540
|
-
}
|
|
541
|
-
}
|
|
542
|
-
/**
|
|
543
|
-
* Inserts the image by calling the `insertImage` command.
|
|
544
|
-
*
|
|
545
|
-
* @param asset The asset to be inserted.
|
|
546
|
-
*/ _insertImage(asset) {
|
|
547
|
-
const editor = this.editor;
|
|
548
|
-
const { imageFallbackUrl, imageSources, imageTextAlternative, imageWidth, imageHeight, imagePlaceholder } = asset.attributes;
|
|
549
|
-
editor.execute('insertImage', {
|
|
550
|
-
source: {
|
|
551
|
-
src: imageFallbackUrl,
|
|
552
|
-
sources: imageSources,
|
|
553
|
-
alt: imageTextAlternative,
|
|
554
|
-
width: imageWidth,
|
|
555
|
-
height: imageHeight,
|
|
556
|
-
...imagePlaceholder ? {
|
|
557
|
-
placeholder: imagePlaceholder
|
|
558
|
-
} : null
|
|
559
|
-
}
|
|
560
|
-
});
|
|
561
|
-
}
|
|
562
|
-
/**
|
|
563
|
-
* Inserts the link to the asset by calling the `link` command.
|
|
564
|
-
*
|
|
565
|
-
* @param asset The asset to be inserted.
|
|
566
|
-
* @param writer An instance of the model writer.
|
|
567
|
-
* @param isSingleAsset It's true when only one asset is processed.
|
|
568
|
-
*/ _insertLink(asset, writer, isSingleAsset) {
|
|
569
|
-
const editor = this.editor;
|
|
570
|
-
const model = editor.model;
|
|
571
|
-
const selection = model.document.selection;
|
|
572
|
-
const { linkName, linkHref } = asset.attributes;
|
|
573
|
-
// If the selection is collapsed, insert the asset name as the link label and select it.
|
|
574
|
-
if (selection.isCollapsed) {
|
|
575
|
-
const selectionAttributes = toMap(selection.getAttributes());
|
|
576
|
-
const textNode = writer.createText(linkName, selectionAttributes);
|
|
577
|
-
if (!isSingleAsset) {
|
|
578
|
-
const selectionLastPosition = selection.getLastPosition();
|
|
579
|
-
const parentElement = selectionLastPosition.parent;
|
|
580
|
-
// Insert new `paragraph` when selection is not in an empty `paragraph`.
|
|
581
|
-
if (!(parentElement.name === 'paragraph' && parentElement.isEmpty)) {
|
|
582
|
-
editor.execute('insertParagraph', {
|
|
583
|
-
position: selectionLastPosition
|
|
584
|
-
});
|
|
585
|
-
}
|
|
586
|
-
const range = model.insertContent(textNode);
|
|
587
|
-
writer.setSelection(range);
|
|
588
|
-
editor.execute('link', linkHref);
|
|
589
|
-
return;
|
|
590
|
-
}
|
|
591
|
-
const range = model.insertContent(textNode);
|
|
592
|
-
writer.setSelection(range);
|
|
593
|
-
}
|
|
594
|
-
editor.execute('link', linkHref);
|
|
595
|
-
}
|
|
596
|
-
}
|
|
313
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
314
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
315
|
+
*/
|
|
316
|
+
const ASSET_INSERTION_WAIT_TIMEOUT = 1e3;
|
|
597
317
|
/**
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
318
|
+
* The CKBox command. It is used by the {@link module:ckbox/ckboxediting~CKBoxEditing CKBox editing feature} to open the CKBox file manager.
|
|
319
|
+
* The file manager allows inserting an image or a link to a file into the editor content.
|
|
320
|
+
*
|
|
321
|
+
* ```ts
|
|
322
|
+
* editor.execute( 'ckbox' );
|
|
323
|
+
* ```
|
|
324
|
+
*
|
|
325
|
+
* **Note:** This command uses other features to perform the following tasks:
|
|
326
|
+
* - To insert images it uses the {@link module:image/image/insertimagecommand~InsertImageCommand 'insertImage'} command from the
|
|
327
|
+
* {@link module:image/image~Image Image feature}.
|
|
328
|
+
* - To insert links to other files it uses the {@link module:link/linkcommand~LinkCommand 'link'} command from the
|
|
329
|
+
* {@link module:link/link~Link Link feature}.
|
|
330
|
+
*/
|
|
331
|
+
var CKBoxCommand = class extends Command {
|
|
332
|
+
/**
|
|
333
|
+
* A set of all chosen assets. They are stored temporarily and they are automatically removed 1 second after being chosen.
|
|
334
|
+
* Chosen assets have to be "remembered" for a while to be able to map the given asset with the element inserted into the model.
|
|
335
|
+
* This association map is then used to set the ID on the model element.
|
|
336
|
+
*
|
|
337
|
+
* All chosen assets are automatically removed after the timeout, because (theoretically) it may happen that they will never be
|
|
338
|
+
* inserted into the model, even if the {@link module:link/linkcommand~LinkCommand `'link'`} command or the
|
|
339
|
+
* {@link module:image/image/insertimagecommand~InsertImageCommand `'insertImage'`} command is enabled. Such a case may arise when
|
|
340
|
+
* another plugin blocks the command execution. Then, in order not to keep the chosen (but not inserted) assets forever, we delete
|
|
341
|
+
* them automatically to prevent memory leakage. The 1 second timeout is enough to insert the asset into the model and extract the
|
|
342
|
+
* ID from the chosen asset.
|
|
343
|
+
*
|
|
344
|
+
* The assets are stored only if
|
|
345
|
+
* the {@link module:ckbox/ckboxconfig~CKBoxConfig#ignoreDataId `config.ckbox.ignoreDataId`} option is set to `false` (by default).
|
|
346
|
+
*
|
|
347
|
+
* @internal
|
|
348
|
+
*/
|
|
349
|
+
_chosenAssets = /* @__PURE__ */ new Set();
|
|
350
|
+
/**
|
|
351
|
+
* The DOM element that acts as a mounting point for the CKBox dialog.
|
|
352
|
+
*/
|
|
353
|
+
_wrapper = null;
|
|
354
|
+
/**
|
|
355
|
+
* @inheritDoc
|
|
356
|
+
*/
|
|
357
|
+
constructor(editor) {
|
|
358
|
+
super(editor);
|
|
359
|
+
this._initListeners();
|
|
360
|
+
}
|
|
361
|
+
/**
|
|
362
|
+
* @inheritDoc
|
|
363
|
+
*/
|
|
364
|
+
refresh() {
|
|
365
|
+
this.value = this._getValue();
|
|
366
|
+
this.isEnabled = this._checkEnabled();
|
|
367
|
+
}
|
|
368
|
+
/**
|
|
369
|
+
* @inheritDoc
|
|
370
|
+
*/
|
|
371
|
+
execute() {
|
|
372
|
+
this.fire("ckbox:open");
|
|
373
|
+
}
|
|
374
|
+
/**
|
|
375
|
+
* Indicates if the CKBox dialog is already opened.
|
|
376
|
+
*
|
|
377
|
+
* @protected
|
|
378
|
+
* @returns {Boolean}
|
|
379
|
+
*/
|
|
380
|
+
_getValue() {
|
|
381
|
+
return this._wrapper !== null;
|
|
382
|
+
}
|
|
383
|
+
/**
|
|
384
|
+
* Checks whether the command can be enabled in the current context.
|
|
385
|
+
*/
|
|
386
|
+
_checkEnabled() {
|
|
387
|
+
const imageCommand = this.editor.commands.get("insertImage");
|
|
388
|
+
const linkCommand = this.editor.commands.get("link");
|
|
389
|
+
if (!imageCommand.isEnabled && !linkCommand.isEnabled) return false;
|
|
390
|
+
return true;
|
|
391
|
+
}
|
|
392
|
+
/**
|
|
393
|
+
* Creates the options object for the CKBox dialog.
|
|
394
|
+
*
|
|
395
|
+
* @returns The object with properties:
|
|
396
|
+
* - theme The theme for CKBox dialog.
|
|
397
|
+
* - language The language for CKBox dialog.
|
|
398
|
+
* - tokenUrl The token endpoint URL.
|
|
399
|
+
* - serviceOrigin The base URL of the API service.
|
|
400
|
+
* - forceDemoLabel Whether to force "Powered by CKBox" link.
|
|
401
|
+
* - assets.onChoose The callback function invoked after choosing the assets.
|
|
402
|
+
* - dialog.onClose The callback function invoked after closing the CKBox dialog.
|
|
403
|
+
* - dialog.width The dialog width in pixels.
|
|
404
|
+
* - dialog.height The dialog height in pixels.
|
|
405
|
+
* - categories.icons Allows setting custom icons for categories.
|
|
406
|
+
* - view.openLastView Sets if the last view visited by the user will be reopened
|
|
407
|
+
* on the next startup.
|
|
408
|
+
* - view.startupFolderId Sets the ID of the folder that will be opened on startup.
|
|
409
|
+
* - view.startupCategoryId Sets the ID of the category that will be opened on startup.
|
|
410
|
+
* - view.hideMaximizeButton Sets whether to hide the ‘Maximize’ button.
|
|
411
|
+
* - view.componentsHideTimeout Sets timeout after which upload components are hidden
|
|
412
|
+
* after completed upload.
|
|
413
|
+
* - view.dialogMinimizeTimeout Sets timeout after which upload dialog is minimized
|
|
414
|
+
* after completed upload.
|
|
415
|
+
*/
|
|
416
|
+
_prepareOptions() {
|
|
417
|
+
const ckboxConfig = this.editor.config.get("ckbox");
|
|
418
|
+
const dialog = ckboxConfig.dialog;
|
|
419
|
+
const categories = ckboxConfig.categories;
|
|
420
|
+
const view = ckboxConfig.view;
|
|
421
|
+
const upload = ckboxConfig.upload;
|
|
422
|
+
return {
|
|
423
|
+
theme: ckboxConfig.theme,
|
|
424
|
+
language: ckboxConfig.language,
|
|
425
|
+
tokenUrl: ckboxConfig.tokenUrl,
|
|
426
|
+
serviceOrigin: ckboxConfig.serviceOrigin,
|
|
427
|
+
forceDemoLabel: ckboxConfig.forceDemoLabel,
|
|
428
|
+
choosableFileExtensions: ckboxConfig.choosableFileExtensions,
|
|
429
|
+
assets: { onChoose: (assets) => this.fire("ckbox:choose", assets) },
|
|
430
|
+
dialog: {
|
|
431
|
+
onClose: () => this.fire("ckbox:close"),
|
|
432
|
+
width: dialog && dialog.width,
|
|
433
|
+
height: dialog && dialog.height
|
|
434
|
+
},
|
|
435
|
+
categories: categories && { icons: categories.icons },
|
|
436
|
+
view: view && {
|
|
437
|
+
openLastView: view.openLastView,
|
|
438
|
+
startupFolderId: view.startupFolderId,
|
|
439
|
+
startupCategoryId: view.startupCategoryId,
|
|
440
|
+
hideMaximizeButton: view.hideMaximizeButton
|
|
441
|
+
},
|
|
442
|
+
upload: upload && {
|
|
443
|
+
componentsHideTimeout: upload.componentsHideTimeout,
|
|
444
|
+
dialogMinimizeTimeout: upload.dialogMinimizeTimeout
|
|
445
|
+
}
|
|
446
|
+
};
|
|
447
|
+
}
|
|
448
|
+
/**
|
|
449
|
+
* Initializes various event listeners for the `ckbox:*` events, because all functionality of the `ckbox` command is event-based.
|
|
450
|
+
*/
|
|
451
|
+
_initListeners() {
|
|
452
|
+
const editor = this.editor;
|
|
453
|
+
const model = editor.model;
|
|
454
|
+
const shouldInsertDataId = !editor.config.get("ckbox.ignoreDataId");
|
|
455
|
+
const downloadableFilesConfig = editor.config.get("ckbox.downloadableFiles");
|
|
456
|
+
this.on("ckbox", () => {
|
|
457
|
+
this.refresh();
|
|
458
|
+
}, { priority: "low" });
|
|
459
|
+
this.on("ckbox:open", () => {
|
|
460
|
+
if (!this.isEnabled || this.value) return;
|
|
461
|
+
this._wrapper = createElement(document, "div", { class: "ck ckbox-wrapper" });
|
|
462
|
+
document.body.appendChild(this._wrapper);
|
|
463
|
+
window.CKBox.mount(this._wrapper, this._prepareOptions());
|
|
464
|
+
});
|
|
465
|
+
this.on("ckbox:close", () => {
|
|
466
|
+
if (!this.value) return;
|
|
467
|
+
this._wrapper.remove();
|
|
468
|
+
this._wrapper = null;
|
|
469
|
+
editor.editing.view.focus();
|
|
470
|
+
});
|
|
471
|
+
this.on("ckbox:choose", (evt, assets) => {
|
|
472
|
+
if (!this.isEnabled) return;
|
|
473
|
+
const imageCommand = editor.commands.get("insertImage");
|
|
474
|
+
const linkCommand = editor.commands.get("link");
|
|
475
|
+
const assetsToProcess = prepareAssets({
|
|
476
|
+
assets,
|
|
477
|
+
downloadableFilesConfig,
|
|
478
|
+
isImageAllowed: imageCommand.isEnabled,
|
|
479
|
+
isLinkAllowed: linkCommand.isEnabled
|
|
480
|
+
});
|
|
481
|
+
const assetsCount = assetsToProcess.length;
|
|
482
|
+
if (assetsCount === 0) return;
|
|
483
|
+
model.change((writer) => {
|
|
484
|
+
for (const asset of assetsToProcess) {
|
|
485
|
+
const isLastAsset = asset === assetsToProcess[assetsCount - 1];
|
|
486
|
+
const isSingleAsset = assetsCount === 1;
|
|
487
|
+
this._insertAsset(asset, isLastAsset, writer, isSingleAsset);
|
|
488
|
+
if (shouldInsertDataId) {
|
|
489
|
+
setTimeout(() => this._chosenAssets.delete(asset), ASSET_INSERTION_WAIT_TIMEOUT);
|
|
490
|
+
this._chosenAssets.add(asset);
|
|
491
|
+
}
|
|
492
|
+
}
|
|
493
|
+
});
|
|
494
|
+
editor.editing.view.focus();
|
|
495
|
+
});
|
|
496
|
+
this.listenTo(editor, "destroy", () => {
|
|
497
|
+
this.fire("ckbox:close");
|
|
498
|
+
this._chosenAssets.clear();
|
|
499
|
+
});
|
|
500
|
+
}
|
|
501
|
+
/**
|
|
502
|
+
* Inserts the asset into the model.
|
|
503
|
+
*
|
|
504
|
+
* @param asset The asset to be inserted.
|
|
505
|
+
* @param isLastAsset Indicates if the current asset is the last one from the chosen set.
|
|
506
|
+
* @param writer An instance of the model writer.
|
|
507
|
+
* @param isSingleAsset It's true when only one asset is processed.
|
|
508
|
+
*/
|
|
509
|
+
_insertAsset(asset, isLastAsset, writer, isSingleAsset) {
|
|
510
|
+
const selection = this.editor.model.document.selection;
|
|
511
|
+
writer.removeSelectionAttribute("linkHref");
|
|
512
|
+
if (asset.type === "image") this._insertImage(asset);
|
|
513
|
+
else this._insertLink(asset, writer, isSingleAsset);
|
|
514
|
+
if (!isLastAsset) writer.setSelection(selection.getLastPosition());
|
|
515
|
+
}
|
|
516
|
+
/**
|
|
517
|
+
* Inserts the image by calling the `insertImage` command.
|
|
518
|
+
*
|
|
519
|
+
* @param asset The asset to be inserted.
|
|
520
|
+
*/
|
|
521
|
+
_insertImage(asset) {
|
|
522
|
+
const editor = this.editor;
|
|
523
|
+
const { imageFallbackUrl, imageSources, imageTextAlternative, imageWidth, imageHeight, imagePlaceholder } = asset.attributes;
|
|
524
|
+
editor.execute("insertImage", { source: {
|
|
525
|
+
src: imageFallbackUrl,
|
|
526
|
+
sources: imageSources,
|
|
527
|
+
alt: imageTextAlternative,
|
|
528
|
+
width: imageWidth,
|
|
529
|
+
height: imageHeight,
|
|
530
|
+
...imagePlaceholder ? { placeholder: imagePlaceholder } : null
|
|
531
|
+
} });
|
|
532
|
+
}
|
|
533
|
+
/**
|
|
534
|
+
* Inserts the link to the asset by calling the `link` command.
|
|
535
|
+
*
|
|
536
|
+
* @param asset The asset to be inserted.
|
|
537
|
+
* @param writer An instance of the model writer.
|
|
538
|
+
* @param isSingleAsset It's true when only one asset is processed.
|
|
539
|
+
*/
|
|
540
|
+
_insertLink(asset, writer, isSingleAsset) {
|
|
541
|
+
const editor = this.editor;
|
|
542
|
+
const model = editor.model;
|
|
543
|
+
const selection = model.document.selection;
|
|
544
|
+
const { linkName, linkHref } = asset.attributes;
|
|
545
|
+
if (selection.isCollapsed) {
|
|
546
|
+
const selectionAttributes = toMap(selection.getAttributes());
|
|
547
|
+
const textNode = writer.createText(linkName, selectionAttributes);
|
|
548
|
+
if (!isSingleAsset) {
|
|
549
|
+
const selectionLastPosition = selection.getLastPosition();
|
|
550
|
+
const parentElement = selectionLastPosition.parent;
|
|
551
|
+
if (!(parentElement.name === "paragraph" && parentElement.isEmpty)) editor.execute("insertParagraph", { position: selectionLastPosition });
|
|
552
|
+
const range = model.insertContent(textNode);
|
|
553
|
+
writer.setSelection(range);
|
|
554
|
+
editor.execute("link", linkHref);
|
|
555
|
+
return;
|
|
556
|
+
}
|
|
557
|
+
const range = model.insertContent(textNode);
|
|
558
|
+
writer.setSelection(range);
|
|
559
|
+
}
|
|
560
|
+
editor.execute("link", linkHref);
|
|
561
|
+
}
|
|
562
|
+
};
|
|
563
|
+
/**
|
|
564
|
+
* Parses the chosen assets into the internal data format. Filters out chosen assets that are not allowed.
|
|
565
|
+
*/
|
|
566
|
+
function prepareAssets({ downloadableFilesConfig, assets, isImageAllowed, isLinkAllowed }) {
|
|
567
|
+
return assets.map((asset) => isImage(asset) ? {
|
|
568
|
+
id: asset.data.id,
|
|
569
|
+
type: "image",
|
|
570
|
+
attributes: prepareImageAssetAttributes(asset)
|
|
571
|
+
} : {
|
|
572
|
+
id: asset.data.id,
|
|
573
|
+
type: "link",
|
|
574
|
+
attributes: prepareLinkAssetAttributes(asset, downloadableFilesConfig)
|
|
575
|
+
}).filter((asset) => asset.type === "image" ? isImageAllowed : isLinkAllowed);
|
|
609
576
|
}
|
|
610
577
|
/**
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
};
|
|
578
|
+
* Parses the assets attributes into the internal data format.
|
|
579
|
+
*
|
|
580
|
+
* @internal
|
|
581
|
+
*/
|
|
582
|
+
function prepareImageAssetAttributes(asset) {
|
|
583
|
+
const { imageFallbackUrl, imageSources } = getImageUrls(asset.data.imageUrls);
|
|
584
|
+
const { description, width, height, blurHash } = asset.data.metadata;
|
|
585
|
+
const imagePlaceholder = blurHashToDataUrl(blurHash);
|
|
586
|
+
return {
|
|
587
|
+
imageFallbackUrl,
|
|
588
|
+
imageSources,
|
|
589
|
+
imageTextAlternative: description || "",
|
|
590
|
+
imageWidth: width,
|
|
591
|
+
imageHeight: height,
|
|
592
|
+
...imagePlaceholder ? { imagePlaceholder } : null
|
|
593
|
+
};
|
|
628
594
|
}
|
|
629
595
|
/**
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
596
|
+
* Parses the assets attributes into the internal data format.
|
|
597
|
+
*
|
|
598
|
+
* @param asset The asset to prepare the attributes for.
|
|
599
|
+
* @param config The CKBox download asset configuration.
|
|
600
|
+
*/
|
|
601
|
+
function prepareLinkAssetAttributes(asset, config) {
|
|
602
|
+
return {
|
|
603
|
+
linkName: asset.data.name,
|
|
604
|
+
linkHref: getAssetUrl(asset, config)
|
|
605
|
+
};
|
|
639
606
|
}
|
|
640
607
|
/**
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
return metadata.width && metadata.height;
|
|
608
|
+
* Checks whether the asset is an image.
|
|
609
|
+
*/
|
|
610
|
+
function isImage(asset) {
|
|
611
|
+
const metadata = asset.data.metadata;
|
|
612
|
+
if (!metadata) return false;
|
|
613
|
+
return metadata.width && metadata.height;
|
|
648
614
|
}
|
|
649
615
|
/**
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
return url.toString();
|
|
616
|
+
* Creates the URL for the asset.
|
|
617
|
+
*
|
|
618
|
+
* @param asset The asset to create the URL for.
|
|
619
|
+
* @param config The CKBox download asset configuration.
|
|
620
|
+
*/
|
|
621
|
+
function getAssetUrl(asset, config) {
|
|
622
|
+
const url = new URL(asset.data.url);
|
|
623
|
+
if (isDownloadableAsset(asset, config)) url.searchParams.set("download", "true");
|
|
624
|
+
return url.toString();
|
|
660
625
|
}
|
|
661
626
|
/**
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
return true;
|
|
627
|
+
* Determines if download should be enabled for given asset based on configuration.
|
|
628
|
+
*
|
|
629
|
+
* @param asset The asset to check.
|
|
630
|
+
* @param config The CKBox download asset configuration.
|
|
631
|
+
*/
|
|
632
|
+
function isDownloadableAsset(asset, config) {
|
|
633
|
+
if (typeof config === "function") return config(asset);
|
|
634
|
+
return true;
|
|
671
635
|
}
|
|
672
636
|
|
|
673
|
-
const DEFAULT_CKBOX_THEME_NAME = 'lark';
|
|
674
637
|
/**
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
}
|
|
638
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
639
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
640
|
+
*/
|
|
641
|
+
/**
|
|
642
|
+
* @module ckbox/ckboxutils
|
|
643
|
+
*/
|
|
644
|
+
const DEFAULT_CKBOX_THEME_NAME = "lark";
|
|
645
|
+
/**
|
|
646
|
+
* The CKBox utilities plugin.
|
|
647
|
+
*/
|
|
648
|
+
var CKBoxUtils = class extends Plugin {
|
|
649
|
+
/**
|
|
650
|
+
* CKEditor Cloud Services access token.
|
|
651
|
+
*/
|
|
652
|
+
_token;
|
|
653
|
+
/**
|
|
654
|
+
* @inheritDoc
|
|
655
|
+
*/
|
|
656
|
+
static get pluginName() {
|
|
657
|
+
return "CKBoxUtils";
|
|
658
|
+
}
|
|
659
|
+
/**
|
|
660
|
+
* @inheritDoc
|
|
661
|
+
*/
|
|
662
|
+
static get isOfficialPlugin() {
|
|
663
|
+
return true;
|
|
664
|
+
}
|
|
665
|
+
/**
|
|
666
|
+
* @inheritDoc
|
|
667
|
+
*/
|
|
668
|
+
static get requires() {
|
|
669
|
+
return [CloudServices];
|
|
670
|
+
}
|
|
671
|
+
/**
|
|
672
|
+
* @inheritDoc
|
|
673
|
+
*/
|
|
674
|
+
init() {
|
|
675
|
+
const editor = this.editor;
|
|
676
|
+
const hasConfiguration = !!editor.config.get("ckbox");
|
|
677
|
+
const isLibraryLoaded = !!window.CKBox;
|
|
678
|
+
if (!hasConfiguration && !isLibraryLoaded) return;
|
|
679
|
+
editor.config.define("ckbox", {
|
|
680
|
+
serviceOrigin: "https://api.ckbox.io",
|
|
681
|
+
defaultUploadCategories: null,
|
|
682
|
+
ignoreDataId: false,
|
|
683
|
+
language: editor.locale.uiLanguage,
|
|
684
|
+
theme: DEFAULT_CKBOX_THEME_NAME,
|
|
685
|
+
tokenUrl: editor.config.get("cloudServices.tokenUrl")
|
|
686
|
+
});
|
|
687
|
+
const cloudServices = editor.plugins.get(CloudServices);
|
|
688
|
+
const cloudServicesTokenUrl = editor.config.get("cloudServices.tokenUrl");
|
|
689
|
+
const ckboxTokenUrl = editor.config.get("ckbox.tokenUrl");
|
|
690
|
+
if (!ckboxTokenUrl)
|
|
691
|
+
/**
|
|
692
|
+
* The {@link module:ckbox/ckboxconfig~CKBoxConfig#tokenUrl `config.ckbox.tokenUrl`} or the
|
|
693
|
+
* {@link module:cloud-services/cloudservicesconfig~CloudServicesConfig#tokenUrl `config.cloudServices.tokenUrl`}
|
|
694
|
+
* configuration is required for the CKBox plugin.
|
|
695
|
+
*
|
|
696
|
+
* ```ts
|
|
697
|
+
* ClassicEditor.create( {
|
|
698
|
+
* attachTo: document.createElement( 'div' ),
|
|
699
|
+
* ckbox: {
|
|
700
|
+
* tokenUrl: "YOUR_TOKEN_URL"
|
|
701
|
+
* // ...
|
|
702
|
+
* }
|
|
703
|
+
* // ...
|
|
704
|
+
* } );
|
|
705
|
+
* ```
|
|
706
|
+
*
|
|
707
|
+
* @error ckbox-plugin-missing-token-url
|
|
708
|
+
*/
|
|
709
|
+
throw new CKEditorError("ckbox-plugin-missing-token-url", this);
|
|
710
|
+
if (ckboxTokenUrl == cloudServicesTokenUrl) this._token = Promise.resolve(cloudServices.token);
|
|
711
|
+
else this._token = cloudServices.registerTokenUrl(ckboxTokenUrl);
|
|
712
|
+
this._token = this._token.then(async (token) => {
|
|
713
|
+
await this._authorizePrivateCategoriesAccess(token.value);
|
|
714
|
+
return token;
|
|
715
|
+
});
|
|
716
|
+
}
|
|
717
|
+
/**
|
|
718
|
+
* Returns a token used by the CKBox plugin for communication with the CKBox service.
|
|
719
|
+
*/
|
|
720
|
+
getToken() {
|
|
721
|
+
return this._token;
|
|
722
|
+
}
|
|
723
|
+
/**
|
|
724
|
+
* The ID of workspace to use when uploading an image.
|
|
725
|
+
*/
|
|
726
|
+
async getWorkspaceId() {
|
|
727
|
+
const t = this.editor.t;
|
|
728
|
+
const cannotAccessDefaultWorkspaceError = t("Cannot access default workspace.");
|
|
729
|
+
const defaultWorkspaceId = this.editor.config.get("ckbox.defaultUploadWorkspaceId");
|
|
730
|
+
const workspaceId = getWorkspaceId(await this._token, defaultWorkspaceId);
|
|
731
|
+
if (workspaceId == null) {
|
|
732
|
+
/**
|
|
733
|
+
* The user is not authorized to access the workspace defined in the`ckbox.defaultUploadWorkspaceId` configuration.
|
|
734
|
+
*
|
|
735
|
+
* @error ckbox-access-default-workspace-error
|
|
736
|
+
*/
|
|
737
|
+
logError("ckbox-access-default-workspace-error");
|
|
738
|
+
throw cannotAccessDefaultWorkspaceError;
|
|
739
|
+
}
|
|
740
|
+
return workspaceId;
|
|
741
|
+
}
|
|
742
|
+
/**
|
|
743
|
+
* Resolves a promise with an object containing a category with which the uploaded file is associated or an error code.
|
|
744
|
+
*/
|
|
745
|
+
async getCategoryIdForFile(fileOrUrl, options) {
|
|
746
|
+
const t = this.editor.t;
|
|
747
|
+
const cannotFindCategoryError = t("Cannot determine a category for the uploaded file.");
|
|
748
|
+
const defaultCategories = this.editor.config.get("ckbox.defaultUploadCategories");
|
|
749
|
+
const allCategoriesPromise = this._getAvailableCategories(options);
|
|
750
|
+
const extension = typeof fileOrUrl == "string" ? convertMimeTypeToExtension(await getContentTypeOfUrl(fileOrUrl, options)) : getFileExtension(fileOrUrl);
|
|
751
|
+
const allCategories = await allCategoriesPromise;
|
|
752
|
+
if (!allCategories) throw cannotFindCategoryError;
|
|
753
|
+
if (defaultCategories) {
|
|
754
|
+
const userCategory = Object.keys(defaultCategories).find((category) => {
|
|
755
|
+
return defaultCategories[category].find((e) => e.toLowerCase() == extension);
|
|
756
|
+
});
|
|
757
|
+
if (userCategory) {
|
|
758
|
+
const serverCategory = allCategories.find((category) => category.id === userCategory || category.name === userCategory);
|
|
759
|
+
if (!serverCategory) throw cannotFindCategoryError;
|
|
760
|
+
return serverCategory.id;
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
const category = allCategories.find((category) => category.extensions.find((e) => e.toLowerCase() == extension));
|
|
764
|
+
if (!category) throw cannotFindCategoryError;
|
|
765
|
+
return category.id;
|
|
766
|
+
}
|
|
767
|
+
/**
|
|
768
|
+
* Resolves a promise with an array containing available categories with which the uploaded file can be associated.
|
|
769
|
+
*
|
|
770
|
+
* If the API returns limited results, the method will collect all items.
|
|
771
|
+
*/
|
|
772
|
+
async _getAvailableCategories(options) {
|
|
773
|
+
const ITEMS_PER_REQUEST = 50;
|
|
774
|
+
const editor = this.editor;
|
|
775
|
+
const token = this._token;
|
|
776
|
+
const { signal } = options;
|
|
777
|
+
const serviceOrigin = editor.config.get("ckbox.serviceOrigin");
|
|
778
|
+
const workspaceId = await this.getWorkspaceId();
|
|
779
|
+
try {
|
|
780
|
+
const result = [];
|
|
781
|
+
let offset = 0;
|
|
782
|
+
let remainingItems;
|
|
783
|
+
do {
|
|
784
|
+
const data = await fetchCategories(offset);
|
|
785
|
+
result.push(...data.items);
|
|
786
|
+
remainingItems = data.totalCount - (offset + ITEMS_PER_REQUEST);
|
|
787
|
+
offset += ITEMS_PER_REQUEST;
|
|
788
|
+
} while (remainingItems > 0);
|
|
789
|
+
return result;
|
|
790
|
+
} catch {
|
|
791
|
+
signal.throwIfAborted();
|
|
792
|
+
/**
|
|
793
|
+
* Fetching a list of available categories with which an uploaded file can be associated failed.
|
|
794
|
+
*
|
|
795
|
+
* @error ckbox-fetch-category-http-error
|
|
796
|
+
*/
|
|
797
|
+
logError("ckbox-fetch-category-http-error");
|
|
798
|
+
return;
|
|
799
|
+
}
|
|
800
|
+
async function fetchCategories(offset) {
|
|
801
|
+
const categoryUrl = new URL("categories", serviceOrigin);
|
|
802
|
+
categoryUrl.searchParams.set("limit", String(ITEMS_PER_REQUEST));
|
|
803
|
+
categoryUrl.searchParams.set("offset", String(offset));
|
|
804
|
+
categoryUrl.searchParams.set("workspaceId", workspaceId);
|
|
805
|
+
return sendHttpRequest({
|
|
806
|
+
url: categoryUrl,
|
|
807
|
+
signal,
|
|
808
|
+
authorization: (await token).value
|
|
809
|
+
});
|
|
810
|
+
}
|
|
811
|
+
}
|
|
812
|
+
/**
|
|
813
|
+
* Authorize private categories access to the CKBox service. Request sets cookie for the current domain,
|
|
814
|
+
* that allows user to preview images from private categories.
|
|
815
|
+
*/
|
|
816
|
+
async _authorizePrivateCategoriesAccess(token) {
|
|
817
|
+
const serviceUrl = this.editor.config.get("ckbox.serviceOrigin");
|
|
818
|
+
const formData = new FormData();
|
|
819
|
+
formData.set("token", token);
|
|
820
|
+
await fetch(`${serviceUrl}/categories/authorizePrivateAccess`, {
|
|
821
|
+
method: "POST",
|
|
822
|
+
credentials: "include",
|
|
823
|
+
mode: "no-cors",
|
|
824
|
+
body: formData
|
|
825
|
+
});
|
|
826
|
+
}
|
|
827
|
+
};
|
|
866
828
|
|
|
867
829
|
/**
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
* provided by the {@link module:ckbox/ckbox~CKBox} plugin.
|
|
872
|
-
*
|
|
873
|
-
* Check out the {@glink features/images/image-upload/image-upload Image upload overview} guide to learn about
|
|
874
|
-
* other ways to upload images into CKEditor 5.
|
|
875
|
-
*/ class CKBoxUploadAdapter extends Plugin {
|
|
876
|
-
/**
|
|
877
|
-
* @inheritDoc
|
|
878
|
-
*/ static get requires() {
|
|
879
|
-
return [
|
|
880
|
-
ImageUploadEditing,
|
|
881
|
-
ImageUploadProgress,
|
|
882
|
-
FileRepository,
|
|
883
|
-
CKBoxEditing
|
|
884
|
-
];
|
|
885
|
-
}
|
|
886
|
-
/**
|
|
887
|
-
* @inheritDoc
|
|
888
|
-
*/ static get pluginName() {
|
|
889
|
-
return 'CKBoxUploadAdapter';
|
|
890
|
-
}
|
|
891
|
-
/**
|
|
892
|
-
* @inheritDoc
|
|
893
|
-
*/ static get isOfficialPlugin() {
|
|
894
|
-
return true;
|
|
895
|
-
}
|
|
896
|
-
/**
|
|
897
|
-
* @inheritDoc
|
|
898
|
-
*/ async afterInit() {
|
|
899
|
-
const editor = this.editor;
|
|
900
|
-
const hasConfiguration = !!editor.config.get('ckbox');
|
|
901
|
-
const isLibraryLoaded = !!window.CKBox;
|
|
902
|
-
// Editor supports only one upload adapter. Register the CKBox upload adapter (and potentially overwrite other one) only when the
|
|
903
|
-
// integrator intentionally wants to use the CKBox plugin, i.e. when the `config.ckbox` exists or the CKBox JavaScript library is
|
|
904
|
-
// loaded.
|
|
905
|
-
if (!hasConfiguration && !isLibraryLoaded) {
|
|
906
|
-
return;
|
|
907
|
-
}
|
|
908
|
-
const fileRepository = editor.plugins.get(FileRepository);
|
|
909
|
-
const ckboxUtils = editor.plugins.get(CKBoxUtils);
|
|
910
|
-
fileRepository.createUploadAdapter = (loader)=>new Adapter(loader, editor, ckboxUtils);
|
|
911
|
-
const shouldInsertDataId = !editor.config.get('ckbox.ignoreDataId');
|
|
912
|
-
const imageUploadEditing = editor.plugins.get(ImageUploadEditing);
|
|
913
|
-
// Mark uploaded assets with the `ckboxImageId` attribute. Its value represents an ID in CKBox.
|
|
914
|
-
if (shouldInsertDataId) {
|
|
915
|
-
imageUploadEditing.on('uploadComplete', (evt, { imageElement, data })=>{
|
|
916
|
-
editor.model.change((writer)=>{
|
|
917
|
-
writer.setAttribute('ckboxImageId', data.ckboxImageId, imageElement);
|
|
918
|
-
});
|
|
919
|
-
});
|
|
920
|
-
}
|
|
921
|
-
}
|
|
922
|
-
}
|
|
830
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
831
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
832
|
+
*/
|
|
923
833
|
/**
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
834
|
+
* @module ckbox/ckboxuploadadapter
|
|
835
|
+
*/
|
|
836
|
+
/**
|
|
837
|
+
* A plugin that enables file uploads in CKEditor 5 using the CKBox server–side connector.
|
|
838
|
+
* See the {@glink features/file-management/ckbox CKBox file manager integration} guide to learn how to configure
|
|
839
|
+
* and use this feature as well as find out more about the full integration with the file manager
|
|
840
|
+
* provided by the {@link module:ckbox/ckbox~CKBox} plugin.
|
|
841
|
+
*
|
|
842
|
+
* Check out the {@glink features/images/image-upload/image-upload Image upload overview} guide to learn about
|
|
843
|
+
* other ways to upload images into CKEditor 5.
|
|
844
|
+
*/
|
|
845
|
+
var CKBoxUploadAdapter = class extends Plugin {
|
|
846
|
+
/**
|
|
847
|
+
* @inheritDoc
|
|
848
|
+
*/
|
|
849
|
+
static get requires() {
|
|
850
|
+
return [
|
|
851
|
+
ImageUploadEditing,
|
|
852
|
+
ImageUploadProgress,
|
|
853
|
+
FileRepository,
|
|
854
|
+
CKBoxEditing
|
|
855
|
+
];
|
|
856
|
+
}
|
|
857
|
+
/**
|
|
858
|
+
* @inheritDoc
|
|
859
|
+
*/
|
|
860
|
+
static get pluginName() {
|
|
861
|
+
return "CKBoxUploadAdapter";
|
|
862
|
+
}
|
|
863
|
+
/**
|
|
864
|
+
* @inheritDoc
|
|
865
|
+
*/
|
|
866
|
+
static get isOfficialPlugin() {
|
|
867
|
+
return true;
|
|
868
|
+
}
|
|
869
|
+
/**
|
|
870
|
+
* @inheritDoc
|
|
871
|
+
*/
|
|
872
|
+
async afterInit() {
|
|
873
|
+
const editor = this.editor;
|
|
874
|
+
const hasConfiguration = !!editor.config.get("ckbox");
|
|
875
|
+
const isLibraryLoaded = !!window.CKBox;
|
|
876
|
+
if (!hasConfiguration && !isLibraryLoaded) return;
|
|
877
|
+
const fileRepository = editor.plugins.get(FileRepository);
|
|
878
|
+
const ckboxUtils = editor.plugins.get(CKBoxUtils);
|
|
879
|
+
fileRepository.createUploadAdapter = (loader) => new Adapter(loader, editor, ckboxUtils);
|
|
880
|
+
const shouldInsertDataId = !editor.config.get("ckbox.ignoreDataId");
|
|
881
|
+
const imageUploadEditing = editor.plugins.get(ImageUploadEditing);
|
|
882
|
+
if (shouldInsertDataId) imageUploadEditing.on("uploadComplete", (evt, { imageElement, data }) => {
|
|
883
|
+
editor.model.change((writer) => {
|
|
884
|
+
writer.setAttribute("ckboxImageId", data.ckboxImageId, imageElement);
|
|
885
|
+
});
|
|
886
|
+
});
|
|
887
|
+
}
|
|
888
|
+
};
|
|
889
|
+
/**
|
|
890
|
+
* Upload adapter for CKBox.
|
|
891
|
+
*/
|
|
892
|
+
var Adapter = class {
|
|
893
|
+
/**
|
|
894
|
+
* FileLoader instance to use during the upload.
|
|
895
|
+
*/
|
|
896
|
+
loader;
|
|
897
|
+
/**
|
|
898
|
+
* CKEditor Cloud Services access token.
|
|
899
|
+
*/
|
|
900
|
+
token;
|
|
901
|
+
/**
|
|
902
|
+
* The editor instance.
|
|
903
|
+
*/
|
|
904
|
+
editor;
|
|
905
|
+
/**
|
|
906
|
+
* The abort controller for aborting asynchronous processes.
|
|
907
|
+
*/
|
|
908
|
+
controller;
|
|
909
|
+
/**
|
|
910
|
+
* The base URL where all requests should be sent.
|
|
911
|
+
*/
|
|
912
|
+
serviceOrigin;
|
|
913
|
+
/**
|
|
914
|
+
* The reference to CKBoxUtils plugin.
|
|
915
|
+
*/
|
|
916
|
+
ckboxUtils;
|
|
917
|
+
/**
|
|
918
|
+
* Creates a new adapter instance.
|
|
919
|
+
*/
|
|
920
|
+
constructor(loader, editor, ckboxUtils) {
|
|
921
|
+
this.loader = loader;
|
|
922
|
+
this.token = ckboxUtils.getToken();
|
|
923
|
+
this.ckboxUtils = ckboxUtils;
|
|
924
|
+
this.editor = editor;
|
|
925
|
+
this.controller = new AbortController();
|
|
926
|
+
this.serviceOrigin = editor.config.get("ckbox.serviceOrigin");
|
|
927
|
+
}
|
|
928
|
+
/**
|
|
929
|
+
* Starts the upload process.
|
|
930
|
+
*
|
|
931
|
+
* @see module:upload/filerepository~UploadAdapter#upload
|
|
932
|
+
*/
|
|
933
|
+
async upload() {
|
|
934
|
+
const ckboxUtils = this.ckboxUtils;
|
|
935
|
+
const t = this.editor.t;
|
|
936
|
+
const file = await this.loader.file;
|
|
937
|
+
const category = await ckboxUtils.getCategoryIdForFile(file, { signal: this.controller.signal });
|
|
938
|
+
const uploadUrl = new URL("assets", this.serviceOrigin);
|
|
939
|
+
const formData = new FormData();
|
|
940
|
+
uploadUrl.searchParams.set("workspaceId", await ckboxUtils.getWorkspaceId());
|
|
941
|
+
formData.append("categoryId", category);
|
|
942
|
+
formData.append("file", file);
|
|
943
|
+
return sendHttpRequest({
|
|
944
|
+
method: "POST",
|
|
945
|
+
url: uploadUrl,
|
|
946
|
+
data: formData,
|
|
947
|
+
onUploadProgress: (evt) => {
|
|
948
|
+
/* istanbul ignore else -- @preserve */
|
|
949
|
+
if (evt.lengthComputable) {
|
|
950
|
+
this.loader.uploadTotal = evt.total;
|
|
951
|
+
this.loader.uploaded = evt.loaded;
|
|
952
|
+
}
|
|
953
|
+
},
|
|
954
|
+
signal: this.controller.signal,
|
|
955
|
+
authorization: (await this.token).value
|
|
956
|
+
}).then(async (data) => {
|
|
957
|
+
const imageUrls = getImageUrls(data.imageUrls);
|
|
958
|
+
return {
|
|
959
|
+
ckboxImageId: data.id,
|
|
960
|
+
default: imageUrls.imageFallbackUrl,
|
|
961
|
+
sources: imageUrls.imageSources
|
|
962
|
+
};
|
|
963
|
+
}).catch(() => {
|
|
964
|
+
const genericError = t("Cannot upload file:") + ` ${file.name}.`;
|
|
965
|
+
return Promise.reject(genericError);
|
|
966
|
+
});
|
|
967
|
+
}
|
|
968
|
+
/**
|
|
969
|
+
* Aborts the upload process.
|
|
970
|
+
*
|
|
971
|
+
* @see module:upload/filerepository~UploadAdapter#abort
|
|
972
|
+
*/
|
|
973
|
+
abort() {
|
|
974
|
+
this.controller.abort();
|
|
975
|
+
}
|
|
976
|
+
};
|
|
1003
977
|
|
|
1004
|
-
const COMMAND_FORCE_DISABLE_ID = 'NoPermission';
|
|
1005
978
|
/**
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
editor.conversion.for('upcast').add((dispatcher)=>{
|
|
1192
|
-
dispatcher.on('element:a', (evt, data, conversionApi)=>{
|
|
1193
|
-
const { writer, consumable } = conversionApi;
|
|
1194
|
-
// Upcast the `data-ckbox-resource-id` attribute only for valid link elements.
|
|
1195
|
-
if (!data.viewItem.getAttribute('href')) {
|
|
1196
|
-
return;
|
|
1197
|
-
}
|
|
1198
|
-
const consumableAttributes = {
|
|
1199
|
-
attributes: [
|
|
1200
|
-
'data-ckbox-resource-id'
|
|
1201
|
-
]
|
|
1202
|
-
};
|
|
1203
|
-
if (!consumable.consume(data.viewItem, consumableAttributes)) {
|
|
1204
|
-
return;
|
|
1205
|
-
}
|
|
1206
|
-
const attributeValue = data.viewItem.getAttribute('data-ckbox-resource-id');
|
|
1207
|
-
// Missing the `data-ckbox-resource-id` attribute.
|
|
1208
|
-
if (!attributeValue) {
|
|
1209
|
-
return;
|
|
1210
|
-
}
|
|
1211
|
-
if (data.modelRange) {
|
|
1212
|
-
// If the `<a>` element contains more than single children (e.g. a linked image), set the `ckboxLinkId` for each
|
|
1213
|
-
// allowed child.
|
|
1214
|
-
for (let item of data.modelRange.getItems()){
|
|
1215
|
-
if (item.is('$textProxy')) {
|
|
1216
|
-
item = item.textNode;
|
|
1217
|
-
}
|
|
1218
|
-
// Do not copy the `ckboxLinkId` attribute when wrapping an element in a block element, e.g. when
|
|
1219
|
-
// auto-paragraphing.
|
|
1220
|
-
if (shouldUpcastAttributeForNode(item)) {
|
|
1221
|
-
writer.setAttribute('ckboxLinkId', attributeValue, item);
|
|
1222
|
-
}
|
|
1223
|
-
}
|
|
1224
|
-
} else {
|
|
1225
|
-
// Otherwise, just set the `ckboxLinkId` for the model element.
|
|
1226
|
-
const modelElement = data.modelCursor.nodeBefore || data.modelCursor.parent;
|
|
1227
|
-
writer.setAttribute('ckboxLinkId', attributeValue, modelElement);
|
|
1228
|
-
}
|
|
1229
|
-
}, {
|
|
1230
|
-
priority: 'low'
|
|
1231
|
-
});
|
|
1232
|
-
});
|
|
1233
|
-
// Convert `ckboxImageId` => `data-ckbox-resource-id`.
|
|
1234
|
-
editor.conversion.for('downcast').attributeToAttribute({
|
|
1235
|
-
model: 'ckboxImageId',
|
|
1236
|
-
view: 'data-ckbox-resource-id'
|
|
1237
|
-
});
|
|
1238
|
-
// Convert `data-ckbox-resource-id` => `ckboxImageId`.
|
|
1239
|
-
editor.conversion.for('upcast').elementToAttribute({
|
|
1240
|
-
model: {
|
|
1241
|
-
key: 'ckboxImageId',
|
|
1242
|
-
value: (viewElement)=>viewElement.getAttribute('data-ckbox-resource-id')
|
|
1243
|
-
},
|
|
1244
|
-
view: {
|
|
1245
|
-
attributes: {
|
|
1246
|
-
'data-ckbox-resource-id': /[\s\S]+/
|
|
1247
|
-
}
|
|
1248
|
-
}
|
|
1249
|
-
});
|
|
1250
|
-
const replaceImageSourceCommand = editor.commands.get('replaceImageSource');
|
|
1251
|
-
if (replaceImageSourceCommand) {
|
|
1252
|
-
this.listenTo(replaceImageSourceCommand, 'cleanupImage', (_, [writer, image])=>{
|
|
1253
|
-
writer.removeAttribute('ckboxImageId', image);
|
|
1254
|
-
});
|
|
1255
|
-
}
|
|
1256
|
-
}
|
|
1257
|
-
/**
|
|
1258
|
-
* Registers post-fixers that add or remove the `ckboxLinkId` and `ckboxImageId` attributes.
|
|
1259
|
-
*/ _initFixers() {
|
|
1260
|
-
const editor = this.editor;
|
|
1261
|
-
const model = editor.model;
|
|
1262
|
-
const selection = model.document.selection;
|
|
1263
|
-
// Registers the post-fixer to sync the asset ID with the model elements.
|
|
1264
|
-
model.document.registerPostFixer(syncDataIdPostFixer(editor));
|
|
1265
|
-
// Registers the post-fixer to remove the `ckboxLinkId` attribute from the model selection.
|
|
1266
|
-
model.document.registerPostFixer(injectSelectionPostFixer(selection));
|
|
1267
|
-
}
|
|
1268
|
-
}
|
|
979
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
980
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
981
|
+
*/
|
|
982
|
+
/**
|
|
983
|
+
* @module ckbox/ckboxediting
|
|
984
|
+
*/
|
|
985
|
+
const COMMAND_FORCE_DISABLE_ID = "NoPermission";
|
|
986
|
+
/**
|
|
987
|
+
* The CKBox editing feature. It introduces the {@link module:ckbox/ckboxcommand~CKBoxCommand CKBox command} and
|
|
988
|
+
* {@link module:ckbox/ckboxuploadadapter~CKBoxUploadAdapter CKBox upload adapter}.
|
|
989
|
+
*/
|
|
990
|
+
var CKBoxEditing = class extends Plugin {
|
|
991
|
+
/**
|
|
992
|
+
* @inheritDoc
|
|
993
|
+
*/
|
|
994
|
+
static get pluginName() {
|
|
995
|
+
return "CKBoxEditing";
|
|
996
|
+
}
|
|
997
|
+
/**
|
|
998
|
+
* @inheritDoc
|
|
999
|
+
*/
|
|
1000
|
+
static get isOfficialPlugin() {
|
|
1001
|
+
return true;
|
|
1002
|
+
}
|
|
1003
|
+
/**
|
|
1004
|
+
* @inheritDoc
|
|
1005
|
+
*/
|
|
1006
|
+
static get requires() {
|
|
1007
|
+
return [
|
|
1008
|
+
LinkEditing,
|
|
1009
|
+
PictureEditing,
|
|
1010
|
+
CKBoxUploadAdapter,
|
|
1011
|
+
CKBoxUtils
|
|
1012
|
+
];
|
|
1013
|
+
}
|
|
1014
|
+
/**
|
|
1015
|
+
* @inheritDoc
|
|
1016
|
+
*/
|
|
1017
|
+
init() {
|
|
1018
|
+
const editor = this.editor;
|
|
1019
|
+
if (!this._shouldBeInitialised()) return;
|
|
1020
|
+
this._checkImagePlugins();
|
|
1021
|
+
if (isLibraryLoaded()) editor.commands.add("ckbox", new CKBoxCommand(editor));
|
|
1022
|
+
isUploadPermissionGranted(editor).then((isCreateAssetAllowed) => {
|
|
1023
|
+
if (!isCreateAssetAllowed) this._blockImageCommands();
|
|
1024
|
+
});
|
|
1025
|
+
}
|
|
1026
|
+
/**
|
|
1027
|
+
* @inheritDoc
|
|
1028
|
+
*/
|
|
1029
|
+
afterInit() {
|
|
1030
|
+
const editor = this.editor;
|
|
1031
|
+
if (!this._shouldBeInitialised()) return;
|
|
1032
|
+
if (!editor.config.get("ckbox.ignoreDataId")) {
|
|
1033
|
+
this._initSchema();
|
|
1034
|
+
this._initConversion();
|
|
1035
|
+
this._initFixers();
|
|
1036
|
+
}
|
|
1037
|
+
}
|
|
1038
|
+
/**
|
|
1039
|
+
* Returns true only when the integrator intentionally wants to use the plugin, i.e. when the `config.ckbox` exists or
|
|
1040
|
+
* the CKBox JavaScript library is loaded.
|
|
1041
|
+
*/
|
|
1042
|
+
_shouldBeInitialised() {
|
|
1043
|
+
return !!this.editor.config.get("ckbox") || isLibraryLoaded();
|
|
1044
|
+
}
|
|
1045
|
+
/**
|
|
1046
|
+
* Blocks `uploadImage` and `ckboxImageEdit` commands.
|
|
1047
|
+
*/
|
|
1048
|
+
_blockImageCommands() {
|
|
1049
|
+
const editor = this.editor;
|
|
1050
|
+
const uploadImageCommand = editor.commands.get("uploadImage");
|
|
1051
|
+
const imageEditingCommand = editor.commands.get("ckboxImageEdit");
|
|
1052
|
+
if (uploadImageCommand) {
|
|
1053
|
+
uploadImageCommand.isAccessAllowed = false;
|
|
1054
|
+
uploadImageCommand.forceDisabled(COMMAND_FORCE_DISABLE_ID);
|
|
1055
|
+
}
|
|
1056
|
+
if (imageEditingCommand) imageEditingCommand.forceDisabled(COMMAND_FORCE_DISABLE_ID);
|
|
1057
|
+
}
|
|
1058
|
+
/**
|
|
1059
|
+
* Checks if at least one image plugin is loaded.
|
|
1060
|
+
*/
|
|
1061
|
+
_checkImagePlugins() {
|
|
1062
|
+
const editor = this.editor;
|
|
1063
|
+
if (!editor.plugins.has("ImageBlockEditing") && !editor.plugins.has("ImageInlineEditing"))
|
|
1064
|
+
/**
|
|
1065
|
+
* The CKBox feature requires one of the following plugins to be loaded to work correctly:
|
|
1066
|
+
*
|
|
1067
|
+
* * {@link module:image/imageblock~ImageBlock},
|
|
1068
|
+
* * {@link module:image/imageinline~ImageInline},
|
|
1069
|
+
* * {@link module:image/image~Image} (loads both `ImageBlock` and `ImageInline`)
|
|
1070
|
+
*
|
|
1071
|
+
* Please make sure your editor configuration is correct.
|
|
1072
|
+
*
|
|
1073
|
+
* @error ckbox-plugin-image-feature-missing
|
|
1074
|
+
* @param {module:core/editor/editor~Editor} editor The editor instance.
|
|
1075
|
+
*/
|
|
1076
|
+
logError("ckbox-plugin-image-feature-missing", editor);
|
|
1077
|
+
}
|
|
1078
|
+
/**
|
|
1079
|
+
* Extends the schema to allow the `ckboxImageId` and `ckboxLinkId` attributes for links and images.
|
|
1080
|
+
*/
|
|
1081
|
+
_initSchema() {
|
|
1082
|
+
const schema = this.editor.model.schema;
|
|
1083
|
+
schema.extend("$text", { allowAttributes: "ckboxLinkId" });
|
|
1084
|
+
if (schema.isRegistered("imageBlock")) schema.extend("imageBlock", { allowAttributes: ["ckboxImageId", "ckboxLinkId"] });
|
|
1085
|
+
if (schema.isRegistered("imageInline")) schema.extend("imageInline", { allowAttributes: ["ckboxImageId", "ckboxLinkId"] });
|
|
1086
|
+
schema.addAttributeCheck((context) => {
|
|
1087
|
+
if (!context.last.getAttribute("linkHref")) return false;
|
|
1088
|
+
}, "ckboxLinkId");
|
|
1089
|
+
}
|
|
1090
|
+
/**
|
|
1091
|
+
* Configures the upcast and downcast conversions for the `ckboxImageId` and `ckboxLinkId` attributes.
|
|
1092
|
+
*/
|
|
1093
|
+
_initConversion() {
|
|
1094
|
+
const editor = this.editor;
|
|
1095
|
+
editor.conversion.for("downcast").add((dispatcher) => {
|
|
1096
|
+
dispatcher.on("attribute:ckboxLinkId:imageBlock", (evt, data, conversionApi) => {
|
|
1097
|
+
const { writer, mapper, consumable } = conversionApi;
|
|
1098
|
+
if (!consumable.consume(data.item, evt.name)) return;
|
|
1099
|
+
const linkInImage = [...mapper.toViewElement(data.item).getChildren()].find((child) => child.name === "a");
|
|
1100
|
+
if (!linkInImage) return;
|
|
1101
|
+
if (data.item.hasAttribute("ckboxLinkId")) writer.setAttribute("data-ckbox-resource-id", data.item.getAttribute("ckboxLinkId"), linkInImage);
|
|
1102
|
+
else writer.removeAttribute("data-ckbox-resource-id", linkInImage);
|
|
1103
|
+
}, { priority: "low" });
|
|
1104
|
+
dispatcher.on("attribute:ckboxLinkId", (evt, data, conversionApi) => {
|
|
1105
|
+
const { writer, mapper, consumable } = conversionApi;
|
|
1106
|
+
if (!consumable.consume(data.item, evt.name)) return;
|
|
1107
|
+
if (data.attributeOldValue) {
|
|
1108
|
+
const viewElement = createLinkElement(writer, data.attributeOldValue);
|
|
1109
|
+
writer.unwrap(mapper.toViewRange(data.range), viewElement);
|
|
1110
|
+
}
|
|
1111
|
+
if (data.attributeNewValue) {
|
|
1112
|
+
const viewElement = createLinkElement(writer, data.attributeNewValue);
|
|
1113
|
+
if (data.item.is("selection")) {
|
|
1114
|
+
const viewSelection = writer.document.selection;
|
|
1115
|
+
writer.wrap(viewSelection.getFirstRange(), viewElement);
|
|
1116
|
+
} else writer.wrap(mapper.toViewRange(data.range), viewElement);
|
|
1117
|
+
}
|
|
1118
|
+
}, { priority: "low" });
|
|
1119
|
+
});
|
|
1120
|
+
editor.conversion.for("upcast").add((dispatcher) => {
|
|
1121
|
+
dispatcher.on("element:a", (evt, data, conversionApi) => {
|
|
1122
|
+
const { writer, consumable } = conversionApi;
|
|
1123
|
+
if (!data.viewItem.getAttribute("href")) return;
|
|
1124
|
+
if (!consumable.consume(data.viewItem, { attributes: ["data-ckbox-resource-id"] })) return;
|
|
1125
|
+
const attributeValue = data.viewItem.getAttribute("data-ckbox-resource-id");
|
|
1126
|
+
if (!attributeValue) return;
|
|
1127
|
+
if (data.modelRange) for (let item of data.modelRange.getItems()) {
|
|
1128
|
+
if (item.is("$textProxy")) item = item.textNode;
|
|
1129
|
+
if (shouldUpcastAttributeForNode(item)) writer.setAttribute("ckboxLinkId", attributeValue, item);
|
|
1130
|
+
}
|
|
1131
|
+
else {
|
|
1132
|
+
const modelElement = data.modelCursor.nodeBefore || data.modelCursor.parent;
|
|
1133
|
+
writer.setAttribute("ckboxLinkId", attributeValue, modelElement);
|
|
1134
|
+
}
|
|
1135
|
+
}, { priority: "low" });
|
|
1136
|
+
});
|
|
1137
|
+
editor.conversion.for("downcast").attributeToAttribute({
|
|
1138
|
+
model: "ckboxImageId",
|
|
1139
|
+
view: "data-ckbox-resource-id"
|
|
1140
|
+
});
|
|
1141
|
+
editor.conversion.for("upcast").elementToAttribute({
|
|
1142
|
+
model: {
|
|
1143
|
+
key: "ckboxImageId",
|
|
1144
|
+
value: (viewElement) => viewElement.getAttribute("data-ckbox-resource-id")
|
|
1145
|
+
},
|
|
1146
|
+
view: { attributes: { "data-ckbox-resource-id": /[\s\S]+/ } }
|
|
1147
|
+
});
|
|
1148
|
+
const replaceImageSourceCommand = editor.commands.get("replaceImageSource");
|
|
1149
|
+
if (replaceImageSourceCommand) this.listenTo(replaceImageSourceCommand, "cleanupImage", (_, [writer, image]) => {
|
|
1150
|
+
writer.removeAttribute("ckboxImageId", image);
|
|
1151
|
+
});
|
|
1152
|
+
}
|
|
1153
|
+
/**
|
|
1154
|
+
* Registers post-fixers that add or remove the `ckboxLinkId` and `ckboxImageId` attributes.
|
|
1155
|
+
*/
|
|
1156
|
+
_initFixers() {
|
|
1157
|
+
const editor = this.editor;
|
|
1158
|
+
const model = editor.model;
|
|
1159
|
+
const selection = model.document.selection;
|
|
1160
|
+
model.document.registerPostFixer(syncDataIdPostFixer(editor));
|
|
1161
|
+
model.document.registerPostFixer(injectSelectionPostFixer(selection));
|
|
1162
|
+
}
|
|
1163
|
+
};
|
|
1269
1164
|
/**
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
if (asset.id === item.getAttribute(attributeName)) {
|
|
1300
|
-
continue;
|
|
1301
|
-
}
|
|
1302
|
-
writer.setAttribute(attributeName, asset.id, item);
|
|
1303
|
-
changed = true;
|
|
1304
|
-
}
|
|
1305
|
-
}
|
|
1306
|
-
}
|
|
1307
|
-
return changed;
|
|
1308
|
-
};
|
|
1165
|
+
* A post-fixer that synchronizes the asset ID with the model element.
|
|
1166
|
+
*/
|
|
1167
|
+
function syncDataIdPostFixer(editor) {
|
|
1168
|
+
return (writer) => {
|
|
1169
|
+
let changed = false;
|
|
1170
|
+
const model = editor.model;
|
|
1171
|
+
const ckboxCommand = editor.commands.get("ckbox");
|
|
1172
|
+
if (!ckboxCommand) return changed;
|
|
1173
|
+
for (const entry of model.document.differ.getChanges()) {
|
|
1174
|
+
if (entry.type !== "insert" && entry.type !== "attribute") continue;
|
|
1175
|
+
const range = entry.type === "insert" ? new ModelRange(entry.position, entry.position.getShiftedBy(entry.length)) : entry.range;
|
|
1176
|
+
const isLinkHrefAttributeRemoval = entry.type === "attribute" && entry.attributeKey === "linkHref" && entry.attributeNewValue === null;
|
|
1177
|
+
for (const item of range.getItems()) {
|
|
1178
|
+
if (isLinkHrefAttributeRemoval && item.hasAttribute("ckboxLinkId")) {
|
|
1179
|
+
writer.removeAttribute("ckboxLinkId", item);
|
|
1180
|
+
changed = true;
|
|
1181
|
+
continue;
|
|
1182
|
+
}
|
|
1183
|
+
const assets = findAssetsForItem(item, ckboxCommand._chosenAssets);
|
|
1184
|
+
for (const asset of assets) {
|
|
1185
|
+
const attributeName = asset.type === "image" ? "ckboxImageId" : "ckboxLinkId";
|
|
1186
|
+
if (asset.id === item.getAttribute(attributeName)) continue;
|
|
1187
|
+
writer.setAttribute(attributeName, asset.id, item);
|
|
1188
|
+
changed = true;
|
|
1189
|
+
}
|
|
1190
|
+
}
|
|
1191
|
+
}
|
|
1192
|
+
return changed;
|
|
1193
|
+
};
|
|
1309
1194
|
}
|
|
1310
1195
|
/**
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1196
|
+
* A post-fixer that removes the `ckboxLinkId` from the selection if it does not represent a link anymore.
|
|
1197
|
+
*/
|
|
1198
|
+
function injectSelectionPostFixer(selection) {
|
|
1199
|
+
return (writer) => {
|
|
1200
|
+
if (!selection.hasAttribute("linkHref") && selection.hasAttribute("ckboxLinkId")) {
|
|
1201
|
+
writer.removeSelectionAttribute("ckboxLinkId");
|
|
1202
|
+
return true;
|
|
1203
|
+
}
|
|
1204
|
+
return false;
|
|
1205
|
+
};
|
|
1321
1206
|
}
|
|
1322
1207
|
/**
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
}
|
|
1338
|
-
if (asset.type === 'link' && isLinkElement) {
|
|
1339
|
-
return asset.attributes.linkHref === item.getAttribute('linkHref');
|
|
1340
|
-
}
|
|
1341
|
-
});
|
|
1208
|
+
* Tries to find the asset that is associated with the model element by comparing the attributes:
|
|
1209
|
+
* - the image fallback URL with the `src` attribute for images,
|
|
1210
|
+
* - the link URL with the `href` attribute for links.
|
|
1211
|
+
*
|
|
1212
|
+
* For any model element, zero, one or more than one asset can be found (e.g. a linked image may be associated with the link asset and the
|
|
1213
|
+
* image asset).
|
|
1214
|
+
*/
|
|
1215
|
+
function findAssetsForItem(item, assets) {
|
|
1216
|
+
const isImageElement = item.is("element", "imageInline") || item.is("element", "imageBlock");
|
|
1217
|
+
const isLinkElement = item.hasAttribute("linkHref");
|
|
1218
|
+
return [...assets].filter((asset) => {
|
|
1219
|
+
if (asset.type === "image" && isImageElement) return asset.attributes.imageFallbackUrl === item.getAttribute("src");
|
|
1220
|
+
if (asset.type === "link" && isLinkElement) return asset.attributes.linkHref === item.getAttribute("linkHref");
|
|
1221
|
+
});
|
|
1342
1222
|
}
|
|
1343
1223
|
/**
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
priority: 5
|
|
1351
|
-
});
|
|
1352
|
-
writer.setCustomProperty('link', true, viewElement);
|
|
1353
|
-
return viewElement;
|
|
1224
|
+
* Creates view link element with the requested ID.
|
|
1225
|
+
*/
|
|
1226
|
+
function createLinkElement(writer, id) {
|
|
1227
|
+
const viewElement = writer.createAttributeElement("a", { "data-ckbox-resource-id": id }, { priority: 5 });
|
|
1228
|
+
writer.setCustomProperty("link", true, viewElement);
|
|
1229
|
+
return viewElement;
|
|
1354
1230
|
}
|
|
1355
1231
|
/**
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
return true;
|
|
1363
|
-
}
|
|
1364
|
-
return false;
|
|
1232
|
+
* Checks if the model element may have the `ckboxLinkId` attribute.
|
|
1233
|
+
*/
|
|
1234
|
+
function shouldUpcastAttributeForNode(node) {
|
|
1235
|
+
if (node.is("$text")) return true;
|
|
1236
|
+
if (node.is("element", "imageInline") || node.is("element", "imageBlock")) return true;
|
|
1237
|
+
return false;
|
|
1365
1238
|
}
|
|
1366
1239
|
/**
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1240
|
+
* Returns true if the CKBox library is loaded, false otherwise.
|
|
1241
|
+
*/
|
|
1242
|
+
function isLibraryLoaded() {
|
|
1243
|
+
return !!window.CKBox;
|
|
1370
1244
|
}
|
|
1371
1245
|
/**
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1246
|
+
* Checks is access allowed to upload assets.
|
|
1247
|
+
*/
|
|
1248
|
+
async function isUploadPermissionGranted(editor) {
|
|
1249
|
+
const ckboxUtils = editor.plugins.get(CKBoxUtils);
|
|
1250
|
+
const origin = editor.config.get("ckbox.serviceOrigin");
|
|
1251
|
+
const url = new URL("permissions", origin);
|
|
1252
|
+
const { value } = await ckboxUtils.getToken();
|
|
1253
|
+
const response = await sendHttpRequest({
|
|
1254
|
+
url,
|
|
1255
|
+
authorization: value,
|
|
1256
|
+
signal: new AbortController().signal
|
|
1257
|
+
});
|
|
1258
|
+
return Object.values(response).some((category) => category["asset:create"]);
|
|
1384
1259
|
}
|
|
1385
1260
|
|
|
1386
1261
|
/**
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1262
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1263
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1264
|
+
*/
|
|
1265
|
+
/**
|
|
1266
|
+
* @module ckbox/ckbox
|
|
1267
|
+
*/
|
|
1268
|
+
/**
|
|
1269
|
+
* The CKBox feature, a bridge between the CKEditor 5 WYSIWYG editor and the CKBox file manager and uploader.
|
|
1270
|
+
*
|
|
1271
|
+
* This is a "glue" plugin which enables:
|
|
1272
|
+
*
|
|
1273
|
+
* * {@link module:ckbox/ckboxediting~CKBoxEditing},
|
|
1274
|
+
* * {@link module:ckbox/ckboxui~CKBoxUI},
|
|
1275
|
+
*
|
|
1276
|
+
* See the {@glink features/file-management/ckbox CKBox integration} guide to learn how to configure and use this feature.
|
|
1277
|
+
*
|
|
1278
|
+
* Check out the {@glink features/images/image-upload/image-upload Image upload} guide to learn about other ways to upload
|
|
1279
|
+
* images into CKEditor 5.
|
|
1280
|
+
*/
|
|
1281
|
+
var CKBox = class extends Plugin {
|
|
1282
|
+
/**
|
|
1283
|
+
* @inheritDoc
|
|
1284
|
+
*/
|
|
1285
|
+
static get pluginName() {
|
|
1286
|
+
return "CKBox";
|
|
1287
|
+
}
|
|
1288
|
+
/**
|
|
1289
|
+
* @inheritDoc
|
|
1290
|
+
*/
|
|
1291
|
+
static get isOfficialPlugin() {
|
|
1292
|
+
return true;
|
|
1293
|
+
}
|
|
1294
|
+
/**
|
|
1295
|
+
* @inheritDoc
|
|
1296
|
+
*/
|
|
1297
|
+
static get requires() {
|
|
1298
|
+
return [CKBoxEditing, CKBoxUI];
|
|
1299
|
+
}
|
|
1300
|
+
};
|
|
1418
1301
|
|
|
1419
1302
|
/**
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1303
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1304
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1305
|
+
*/
|
|
1306
|
+
/**
|
|
1307
|
+
* @module ckbox/ckboximageedit/utils
|
|
1308
|
+
*/
|
|
1309
|
+
/**
|
|
1310
|
+
* @internal
|
|
1311
|
+
*/
|
|
1312
|
+
function createEditabilityChecker(allowExternalImagesEditing) {
|
|
1313
|
+
const checkUrl = createUrlChecker(allowExternalImagesEditing);
|
|
1314
|
+
return (element) => {
|
|
1315
|
+
if (!(element.is("element", "imageInline") || element.is("element", "imageBlock"))) return false;
|
|
1316
|
+
if (element.hasAttribute("ckboxImageId")) return true;
|
|
1317
|
+
if (element.hasAttribute("src")) return checkUrl(element.getAttribute("src"));
|
|
1318
|
+
return false;
|
|
1319
|
+
};
|
|
1436
1320
|
}
|
|
1437
1321
|
function createUrlChecker(allowExternalImagesEditing) {
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
if (allowExternalImagesEditing instanceof RegExp) {
|
|
1450
|
-
return (src)=>!!(src.match(allowExternalImagesEditing) || src.replace(/^https?:\/\//, '').match(allowExternalImagesEditing));
|
|
1451
|
-
}
|
|
1452
|
-
return ()=>false;
|
|
1322
|
+
if (Array.isArray(allowExternalImagesEditing)) {
|
|
1323
|
+
const urlMatchers = allowExternalImagesEditing.map(createUrlChecker);
|
|
1324
|
+
return (src) => urlMatchers.some((matcher) => matcher(src));
|
|
1325
|
+
}
|
|
1326
|
+
if (allowExternalImagesEditing == "origin") {
|
|
1327
|
+
const origin = global.window.location.origin;
|
|
1328
|
+
return (src) => new URL(src, global.document.baseURI).origin == origin;
|
|
1329
|
+
}
|
|
1330
|
+
if (typeof allowExternalImagesEditing == "function") return allowExternalImagesEditing;
|
|
1331
|
+
if (allowExternalImagesEditing instanceof RegExp) return (src) => !!(src.match(allowExternalImagesEditing) || src.replace(/^https?:\/\//, "").match(allowExternalImagesEditing));
|
|
1332
|
+
return () => false;
|
|
1453
1333
|
}
|
|
1454
1334
|
|
|
1455
1335
|
/**
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1336
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1337
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1338
|
+
*/
|
|
1339
|
+
/**
|
|
1340
|
+
* @module ckbox/ckboximageedit/ckboximageeditcommand
|
|
1341
|
+
*/
|
|
1342
|
+
/**
|
|
1343
|
+
* The CKBox edit image command.
|
|
1344
|
+
*
|
|
1345
|
+
* Opens the CKBox dialog for editing the image.
|
|
1346
|
+
*/
|
|
1347
|
+
var CKBoxImageEditCommand = class extends Command {
|
|
1348
|
+
/**
|
|
1349
|
+
* The DOM element that acts as a mounting point for the CKBox Edit Image dialog.
|
|
1350
|
+
*/
|
|
1351
|
+
_wrapper = null;
|
|
1352
|
+
/**
|
|
1353
|
+
* The states of image processing in progress.
|
|
1354
|
+
*/
|
|
1355
|
+
_processInProgress = /* @__PURE__ */ new Set();
|
|
1356
|
+
/**
|
|
1357
|
+
* Determines if the element can be edited.
|
|
1358
|
+
*/
|
|
1359
|
+
_canEdit;
|
|
1360
|
+
/**
|
|
1361
|
+
* A wrapper function to prepare mount options. Ensures that at most one preparation is in-flight.
|
|
1362
|
+
*/
|
|
1363
|
+
_prepareOptions;
|
|
1364
|
+
/**
|
|
1473
1365
|
* CKBox's onClose function runs before the final cleanup, potentially causing
|
|
1474
1366
|
* page layout changes after it finishes. To address this, we use a setTimeout hack
|
|
1475
1367
|
* to ensure that floating elements on the page maintain their correct position.
|
|
1476
1368
|
*
|
|
1477
1369
|
* See: https://github.com/ckeditor/ckeditor5/issues/16153.
|
|
1478
|
-
*/
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
writer.setStyle('height', `${asset.data.metadata.height}px`, img);
|
|
1708
|
-
writer.addClass('image-processing', imageElementView);
|
|
1709
|
-
});
|
|
1710
|
-
}
|
|
1711
|
-
/**
|
|
1712
|
-
* Replace the edited image with the new one.
|
|
1713
|
-
*/ _replaceImage(element, asset) {
|
|
1714
|
-
const editor = this.editor;
|
|
1715
|
-
const { imageFallbackUrl, imageSources, imageWidth, imageHeight, imagePlaceholder } = prepareImageAssetAttributes(asset);
|
|
1716
|
-
const previousSelectionRanges = Array.from(editor.model.document.selection.getRanges());
|
|
1717
|
-
editor.model.change((writer)=>{
|
|
1718
|
-
writer.setSelection(element, 'on');
|
|
1719
|
-
editor.execute('insertImage', {
|
|
1720
|
-
imageType: element.is('element', 'imageInline') ? 'imageInline' : null,
|
|
1721
|
-
source: {
|
|
1722
|
-
src: imageFallbackUrl,
|
|
1723
|
-
sources: imageSources,
|
|
1724
|
-
width: imageWidth,
|
|
1725
|
-
height: imageHeight,
|
|
1726
|
-
...imagePlaceholder ? {
|
|
1727
|
-
placeholder: imagePlaceholder
|
|
1728
|
-
} : null,
|
|
1729
|
-
...element.hasAttribute('alt') ? {
|
|
1730
|
-
alt: element.getAttribute('alt')
|
|
1731
|
-
} : null
|
|
1732
|
-
}
|
|
1733
|
-
});
|
|
1734
|
-
const previousChildren = element.getChildren();
|
|
1735
|
-
element = editor.model.document.selection.getSelectedElement();
|
|
1736
|
-
for (const child of previousChildren){
|
|
1737
|
-
writer.append(writer.cloneElement(child), element);
|
|
1738
|
-
}
|
|
1739
|
-
writer.setAttribute('ckboxImageId', asset.data.id, element);
|
|
1740
|
-
writer.setSelection(previousSelectionRanges);
|
|
1741
|
-
});
|
|
1742
|
-
}
|
|
1743
|
-
}
|
|
1370
|
+
*/
|
|
1371
|
+
_updateUiDelayed = delay(() => this.editor.ui.update(), 0);
|
|
1372
|
+
/**
|
|
1373
|
+
* @inheritDoc
|
|
1374
|
+
*/
|
|
1375
|
+
constructor(editor) {
|
|
1376
|
+
super(editor);
|
|
1377
|
+
this.value = false;
|
|
1378
|
+
this._canEdit = createEditabilityChecker(editor.config.get("ckbox.allowExternalImagesEditing"));
|
|
1379
|
+
this._prepareOptions = abortableDebounce((signal, state) => this._prepareOptionsAbortable(signal, state));
|
|
1380
|
+
this._prepareListeners();
|
|
1381
|
+
}
|
|
1382
|
+
/**
|
|
1383
|
+
* @inheritDoc
|
|
1384
|
+
*/
|
|
1385
|
+
refresh() {
|
|
1386
|
+
const editor = this.editor;
|
|
1387
|
+
this.value = this._getValue();
|
|
1388
|
+
const selectedElement = editor.model.document.selection.getSelectedElement();
|
|
1389
|
+
this.isEnabled = !!selectedElement && this._canEdit(selectedElement) && !this._checkIfElementIsBeingProcessed(selectedElement);
|
|
1390
|
+
}
|
|
1391
|
+
/**
|
|
1392
|
+
* Opens the CKBox Image Editor dialog for editing the image.
|
|
1393
|
+
*/
|
|
1394
|
+
execute() {
|
|
1395
|
+
if (this._getValue()) return;
|
|
1396
|
+
const wrapper = createElement(document, "div", { class: "ck ckbox-wrapper" });
|
|
1397
|
+
this._wrapper = wrapper;
|
|
1398
|
+
this.value = true;
|
|
1399
|
+
document.body.appendChild(this._wrapper);
|
|
1400
|
+
const processingState = {
|
|
1401
|
+
element: this.editor.model.document.selection.getSelectedElement(),
|
|
1402
|
+
controller: new AbortController()
|
|
1403
|
+
};
|
|
1404
|
+
this._prepareOptions(processingState).then((options) => window.CKBox.mountImageEditor(wrapper, options), (error) => {
|
|
1405
|
+
const editor = this.editor;
|
|
1406
|
+
const t = editor.t;
|
|
1407
|
+
editor.plugins.get(Notification).showWarning(t("Failed to determine category of edited image."), { namespace: "ckbox" });
|
|
1408
|
+
console.error(error);
|
|
1409
|
+
this._handleImageEditorClose();
|
|
1410
|
+
});
|
|
1411
|
+
}
|
|
1412
|
+
/**
|
|
1413
|
+
* @inheritDoc
|
|
1414
|
+
*/
|
|
1415
|
+
destroy() {
|
|
1416
|
+
this._handleImageEditorClose();
|
|
1417
|
+
this._prepareOptions.abort();
|
|
1418
|
+
this._updateUiDelayed.cancel();
|
|
1419
|
+
for (const state of this._processInProgress.values()) state.controller.abort();
|
|
1420
|
+
super.destroy();
|
|
1421
|
+
}
|
|
1422
|
+
/**
|
|
1423
|
+
* Indicates if the CKBox Image Editor dialog is already opened.
|
|
1424
|
+
*/
|
|
1425
|
+
_getValue() {
|
|
1426
|
+
return this._wrapper !== null;
|
|
1427
|
+
}
|
|
1428
|
+
/**
|
|
1429
|
+
* Creates the options object for the CKBox Image Editor dialog.
|
|
1430
|
+
*/
|
|
1431
|
+
async _prepareOptionsAbortable(signal, state) {
|
|
1432
|
+
const editor = this.editor;
|
|
1433
|
+
const ckboxConfig = editor.config.get("ckbox");
|
|
1434
|
+
const ckboxUtils = editor.plugins.get(CKBoxUtils);
|
|
1435
|
+
const { element } = state;
|
|
1436
|
+
let imageMountOptions;
|
|
1437
|
+
const ckboxImageId = element.getAttribute("ckboxImageId");
|
|
1438
|
+
if (ckboxImageId) imageMountOptions = { assetId: ckboxImageId };
|
|
1439
|
+
else {
|
|
1440
|
+
const imageUrl = new URL(element.getAttribute("src"), document.baseURI).href;
|
|
1441
|
+
imageMountOptions = {
|
|
1442
|
+
imageUrl,
|
|
1443
|
+
uploadCategoryId: await ckboxUtils.getCategoryIdForFile(imageUrl, { signal })
|
|
1444
|
+
};
|
|
1445
|
+
}
|
|
1446
|
+
return {
|
|
1447
|
+
...imageMountOptions,
|
|
1448
|
+
imageEditing: { allowOverwrite: false },
|
|
1449
|
+
tokenUrl: ckboxConfig.tokenUrl,
|
|
1450
|
+
language: ckboxConfig.language,
|
|
1451
|
+
...ckboxConfig.serviceOrigin && { serviceOrigin: ckboxConfig.serviceOrigin },
|
|
1452
|
+
onClose: () => this._handleImageEditorClose(),
|
|
1453
|
+
onSave: (asset) => this._handleImageEditorSave(state, asset)
|
|
1454
|
+
};
|
|
1455
|
+
}
|
|
1456
|
+
/**
|
|
1457
|
+
* Initializes event lister for an event of removing an image.
|
|
1458
|
+
*/
|
|
1459
|
+
_prepareListeners() {
|
|
1460
|
+
this.listenTo(this.editor.model.document, "change:data", () => {
|
|
1461
|
+
this._getProcessingStatesOfDeletedImages().forEach((processingState) => {
|
|
1462
|
+
processingState.controller.abort();
|
|
1463
|
+
});
|
|
1464
|
+
});
|
|
1465
|
+
}
|
|
1466
|
+
/**
|
|
1467
|
+
* Gets processing states of images that have been deleted in the mean time.
|
|
1468
|
+
*/
|
|
1469
|
+
_getProcessingStatesOfDeletedImages() {
|
|
1470
|
+
const states = [];
|
|
1471
|
+
for (const state of this._processInProgress.values()) if (state.element.root.rootName == "$graveyard") states.push(state);
|
|
1472
|
+
return states;
|
|
1473
|
+
}
|
|
1474
|
+
_checkIfElementIsBeingProcessed(selectedElement) {
|
|
1475
|
+
for (const { element } of this._processInProgress) if (isEqual(element, selectedElement)) return true;
|
|
1476
|
+
return false;
|
|
1477
|
+
}
|
|
1478
|
+
/**
|
|
1479
|
+
* Closes the CKBox Image Editor dialog.
|
|
1480
|
+
*/
|
|
1481
|
+
_handleImageEditorClose() {
|
|
1482
|
+
if (!this._wrapper) return;
|
|
1483
|
+
this._wrapper.remove();
|
|
1484
|
+
this._wrapper = null;
|
|
1485
|
+
this.editor.editing.view.focus();
|
|
1486
|
+
this._updateUiDelayed();
|
|
1487
|
+
this.refresh();
|
|
1488
|
+
}
|
|
1489
|
+
/**
|
|
1490
|
+
* Save edited image. In case server respond with "success" replace with edited image,
|
|
1491
|
+
* otherwise show notification error.
|
|
1492
|
+
*/
|
|
1493
|
+
_handleImageEditorSave(state, asset) {
|
|
1494
|
+
const t = this.editor.locale.t;
|
|
1495
|
+
const notification = this.editor.plugins.get(Notification);
|
|
1496
|
+
const pendingActions = this.editor.plugins.get(PendingActions);
|
|
1497
|
+
const action = pendingActions.add(t("Processing the edited image."));
|
|
1498
|
+
this._processInProgress.add(state);
|
|
1499
|
+
this._showImageProcessingIndicator(state.element, asset);
|
|
1500
|
+
this.refresh();
|
|
1501
|
+
this._waitForAssetProcessed(asset.data.id, state.controller.signal).then((asset) => {
|
|
1502
|
+
this._replaceImage(state.element, asset);
|
|
1503
|
+
}, (error) => {
|
|
1504
|
+
this.editor.editing.reconvertItem(state.element);
|
|
1505
|
+
if (state.controller.signal.aborted) return;
|
|
1506
|
+
if (!error || error instanceof CKEditorError) notification.showWarning(t("Server failed to process the image."), { namespace: "ckbox" });
|
|
1507
|
+
else console.error(error);
|
|
1508
|
+
}).finally(() => {
|
|
1509
|
+
this._processInProgress.delete(state);
|
|
1510
|
+
pendingActions.remove(action);
|
|
1511
|
+
this.refresh();
|
|
1512
|
+
});
|
|
1513
|
+
}
|
|
1514
|
+
/**
|
|
1515
|
+
* Get asset's status on server. If server responds with "success" status then
|
|
1516
|
+
* image is already proceeded and ready for saving.
|
|
1517
|
+
*/
|
|
1518
|
+
async _getAssetStatusFromServer(id, signal) {
|
|
1519
|
+
const ckboxUtils = this.editor.plugins.get(CKBoxUtils);
|
|
1520
|
+
const response = await sendHttpRequest({
|
|
1521
|
+
url: new URL("assets/" + id, this.editor.config.get("ckbox.serviceOrigin")),
|
|
1522
|
+
signal,
|
|
1523
|
+
authorization: (await ckboxUtils.getToken()).value
|
|
1524
|
+
});
|
|
1525
|
+
const status = response.metadata.metadataProcessingStatus;
|
|
1526
|
+
if (!status || status == "queued")
|
|
1527
|
+
/**
|
|
1528
|
+
* Image has not been processed yet.
|
|
1529
|
+
*
|
|
1530
|
+
* @error ckbox-image-not-processed
|
|
1531
|
+
*/
|
|
1532
|
+
throw new CKEditorError("ckbox-image-not-processed");
|
|
1533
|
+
return { data: { ...response } };
|
|
1534
|
+
}
|
|
1535
|
+
/**
|
|
1536
|
+
* Waits for an asset to be processed.
|
|
1537
|
+
* It retries retrieving asset status from the server in case of failure.
|
|
1538
|
+
*/
|
|
1539
|
+
async _waitForAssetProcessed(id, signal) {
|
|
1540
|
+
const result = await retry(() => this._getAssetStatusFromServer(id, signal), {
|
|
1541
|
+
signal,
|
|
1542
|
+
maxAttempts: 5
|
|
1543
|
+
});
|
|
1544
|
+
if (result.data.metadata.metadataProcessingStatus != "success")
|
|
1545
|
+
/**
|
|
1546
|
+
* The image processing failed.
|
|
1547
|
+
*
|
|
1548
|
+
* @error ckbox-image-processing-failed
|
|
1549
|
+
*/
|
|
1550
|
+
throw new CKEditorError("ckbox-image-processing-failed");
|
|
1551
|
+
return result;
|
|
1552
|
+
}
|
|
1553
|
+
/**
|
|
1554
|
+
* Shows processing indicator while image is processing.
|
|
1555
|
+
*
|
|
1556
|
+
* @param asset Data about certain asset.
|
|
1557
|
+
*/
|
|
1558
|
+
_showImageProcessingIndicator(element, asset) {
|
|
1559
|
+
const editor = this.editor;
|
|
1560
|
+
editor.editing.view.change((writer) => {
|
|
1561
|
+
const imageElementView = editor.editing.mapper.toViewElement(element);
|
|
1562
|
+
const img = this.editor.plugins.get("ImageUtils").findViewImgElement(imageElementView);
|
|
1563
|
+
writer.removeStyle("aspect-ratio", img);
|
|
1564
|
+
writer.setAttribute("width", asset.data.metadata.width, img);
|
|
1565
|
+
writer.setAttribute("height", asset.data.metadata.height, img);
|
|
1566
|
+
writer.setStyle("width", `${asset.data.metadata.width}px`, img);
|
|
1567
|
+
writer.setStyle("height", `${asset.data.metadata.height}px`, img);
|
|
1568
|
+
writer.addClass("image-processing", imageElementView);
|
|
1569
|
+
});
|
|
1570
|
+
}
|
|
1571
|
+
/**
|
|
1572
|
+
* Replace the edited image with the new one.
|
|
1573
|
+
*/
|
|
1574
|
+
_replaceImage(element, asset) {
|
|
1575
|
+
const editor = this.editor;
|
|
1576
|
+
const { imageFallbackUrl, imageSources, imageWidth, imageHeight, imagePlaceholder } = prepareImageAssetAttributes(asset);
|
|
1577
|
+
const previousSelectionRanges = Array.from(editor.model.document.selection.getRanges());
|
|
1578
|
+
editor.model.change((writer) => {
|
|
1579
|
+
writer.setSelection(element, "on");
|
|
1580
|
+
editor.execute("insertImage", {
|
|
1581
|
+
imageType: element.is("element", "imageInline") ? "imageInline" : null,
|
|
1582
|
+
source: {
|
|
1583
|
+
src: imageFallbackUrl,
|
|
1584
|
+
sources: imageSources,
|
|
1585
|
+
width: imageWidth,
|
|
1586
|
+
height: imageHeight,
|
|
1587
|
+
...imagePlaceholder ? { placeholder: imagePlaceholder } : null,
|
|
1588
|
+
...element.hasAttribute("alt") ? { alt: element.getAttribute("alt") } : null
|
|
1589
|
+
}
|
|
1590
|
+
});
|
|
1591
|
+
const previousChildren = element.getChildren();
|
|
1592
|
+
element = editor.model.document.selection.getSelectedElement();
|
|
1593
|
+
for (const child of previousChildren) writer.append(writer.cloneElement(child), element);
|
|
1594
|
+
writer.setAttribute("ckboxImageId", asset.data.id, element);
|
|
1595
|
+
writer.setSelection(previousSelectionRanges);
|
|
1596
|
+
});
|
|
1597
|
+
}
|
|
1598
|
+
};
|
|
1744
1599
|
|
|
1745
1600
|
/**
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1601
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1602
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1603
|
+
*/
|
|
1604
|
+
/**
|
|
1605
|
+
* @module ckbox/ckboximageedit/ckboximageeditediting
|
|
1606
|
+
*/
|
|
1607
|
+
/**
|
|
1608
|
+
* The CKBox image edit editing plugin.
|
|
1609
|
+
*/
|
|
1610
|
+
var CKBoxImageEditEditing = class extends Plugin {
|
|
1611
|
+
/**
|
|
1612
|
+
* @inheritDoc
|
|
1613
|
+
*/
|
|
1614
|
+
static get pluginName() {
|
|
1615
|
+
return "CKBoxImageEditEditing";
|
|
1616
|
+
}
|
|
1617
|
+
/**
|
|
1618
|
+
* @inheritDoc
|
|
1619
|
+
*/
|
|
1620
|
+
static get isOfficialPlugin() {
|
|
1621
|
+
return true;
|
|
1622
|
+
}
|
|
1623
|
+
/**
|
|
1624
|
+
* @inheritDoc
|
|
1625
|
+
*/
|
|
1626
|
+
static get requires() {
|
|
1627
|
+
return [
|
|
1628
|
+
CKBoxEditing,
|
|
1629
|
+
CKBoxUtils,
|
|
1630
|
+
PendingActions,
|
|
1631
|
+
Notification,
|
|
1632
|
+
ImageUtils,
|
|
1633
|
+
ImageEditing
|
|
1634
|
+
];
|
|
1635
|
+
}
|
|
1636
|
+
/**
|
|
1637
|
+
* @inheritDoc
|
|
1638
|
+
*/
|
|
1639
|
+
init() {
|
|
1640
|
+
const { editor } = this;
|
|
1641
|
+
editor.commands.add("ckboxImageEdit", new CKBoxImageEditCommand(editor));
|
|
1642
|
+
}
|
|
1643
|
+
};
|
|
1777
1644
|
|
|
1778
1645
|
/**
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1646
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1647
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1648
|
+
*/
|
|
1649
|
+
/**
|
|
1650
|
+
* @module ckbox/ckboximageedit/ckboximageeditui
|
|
1651
|
+
*/
|
|
1652
|
+
/**
|
|
1653
|
+
* The UI plugin of the CKBox image edit feature.
|
|
1654
|
+
*
|
|
1655
|
+
* It registers the `'ckboxImageEdit'` UI button in the editor's {@link module:ui/componentfactory~ComponentFactory component factory}
|
|
1656
|
+
* that allows you to open the CKBox dialog and edit the image.
|
|
1657
|
+
*/
|
|
1658
|
+
var CKBoxImageEditUI = class extends Plugin {
|
|
1659
|
+
/**
|
|
1660
|
+
* @inheritDoc
|
|
1661
|
+
*/
|
|
1662
|
+
static get pluginName() {
|
|
1663
|
+
return "CKBoxImageEditUI";
|
|
1664
|
+
}
|
|
1665
|
+
/**
|
|
1666
|
+
* @inheritDoc
|
|
1667
|
+
*/
|
|
1668
|
+
static get isOfficialPlugin() {
|
|
1669
|
+
return true;
|
|
1670
|
+
}
|
|
1671
|
+
/**
|
|
1672
|
+
* @inheritDoc
|
|
1673
|
+
*/
|
|
1674
|
+
init() {
|
|
1675
|
+
const editor = this.editor;
|
|
1676
|
+
editor.ui.componentFactory.add("ckboxImageEdit", (locale) => {
|
|
1677
|
+
const command = editor.commands.get("ckboxImageEdit");
|
|
1678
|
+
const uploadImageCommand = editor.commands.get("uploadImage");
|
|
1679
|
+
const view = new ButtonView(locale);
|
|
1680
|
+
const t = locale.t;
|
|
1681
|
+
view.set({
|
|
1682
|
+
icon: IconCkboxImageEdit,
|
|
1683
|
+
tooltip: true
|
|
1684
|
+
});
|
|
1685
|
+
view.bind("label").to(uploadImageCommand, "isAccessAllowed", (isAccessAllowed) => isAccessAllowed ? t("Edit image") : t("You have no image editing permissions."));
|
|
1686
|
+
view.bind("isOn").to(command, "value", command, "isEnabled", (value, isEnabled) => value && isEnabled);
|
|
1687
|
+
view.bind("isEnabled").to(command);
|
|
1688
|
+
this.listenTo(view, "execute", () => {
|
|
1689
|
+
editor.execute("ckboxImageEdit");
|
|
1690
|
+
editor.editing.view.focus();
|
|
1691
|
+
});
|
|
1692
|
+
return view;
|
|
1693
|
+
});
|
|
1694
|
+
}
|
|
1695
|
+
};
|
|
1819
1696
|
|
|
1820
1697
|
/**
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1698
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1699
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1700
|
+
*/
|
|
1701
|
+
/**
|
|
1702
|
+
* @module ckbox/ckboximageedit
|
|
1703
|
+
*/
|
|
1704
|
+
/**
|
|
1705
|
+
* The CKBox image edit feature.
|
|
1706
|
+
*/
|
|
1707
|
+
var CKBoxImageEdit = class extends Plugin {
|
|
1708
|
+
/**
|
|
1709
|
+
* @inheritDoc
|
|
1710
|
+
*/
|
|
1711
|
+
static get pluginName() {
|
|
1712
|
+
return "CKBoxImageEdit";
|
|
1713
|
+
}
|
|
1714
|
+
/**
|
|
1715
|
+
* @inheritDoc
|
|
1716
|
+
*/
|
|
1717
|
+
static get isOfficialPlugin() {
|
|
1718
|
+
return true;
|
|
1719
|
+
}
|
|
1720
|
+
/**
|
|
1721
|
+
* @inheritDoc
|
|
1722
|
+
*/
|
|
1723
|
+
static get requires() {
|
|
1724
|
+
return [CKBoxImageEditEditing, CKBoxImageEditUI];
|
|
1725
|
+
}
|
|
1726
|
+
};
|
|
1727
|
+
|
|
1728
|
+
/**
|
|
1729
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1730
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1731
|
+
*/
|
|
1842
1732
|
|
|
1843
1733
|
export { CKBox, CKBoxCommand, CKBoxEditing, CKBoxImageEdit, CKBoxImageEditCommand, CKBoxImageEditEditing, CKBoxImageEditUI, CKBoxUI, CKBoxUploadAdapter, CKBoxUtils, convertMimeTypeToExtension as _ckBoxConvertMimeTypeToExtension, blurHashToDataUrl as _ckboxBlurHashToDataUrl, createEditabilityChecker as _createCKBoxEditabilityChecker, getContentTypeOfUrl as _getCKBoxContentTypeOfUrl, getFileExtension as _getCKBoxFileExtension, getImageUrls as _getCKBoxImageUrls, getWorkspaceId as _getCKBoxWorkspaceId, prepareImageAssetAttributes as _prepareCKBoxImageAssetAttributes, sendHttpRequest as _sendCKBoxHttpRequest };
|
|
1844
|
-
//# sourceMappingURL=index.js.map
|
|
1734
|
+
//# sourceMappingURL=index.js.map
|