@ckeditor/ckeditor5-media-embed 48.2.0 → 48.3.0-alpha.1
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/ckeditor5-metadata.json +1 -1
- package/dist/augmentation.d.ts +33 -31
- package/dist/automediaembed.d.ts +50 -50
- package/dist/converters.d.ts +37 -37
- package/dist/index-editor.css +26 -0
- package/dist/index.css +26 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +29 -26
- package/dist/index.js +2601 -1956
- package/dist/index.js.map +1 -1
- package/dist/mediaembed.d.ts +33 -33
- package/dist/mediaembedcommand.d.ts +32 -32
- package/dist/mediaembedconfig.d.ts +564 -483
- package/dist/mediaembedediting.d.ts +30 -30
- package/dist/mediaembedresize/constants.d.ts +13 -13
- package/dist/mediaembedresize/mediaembedcustomresizeui.d.ts +64 -0
- package/dist/mediaembedresize/mediaembedresizebuttons.d.ts +54 -0
- package/dist/mediaembedresize/mediaembedresizeediting.d.ts +47 -43
- package/dist/mediaembedresize/mediaembedresizehandles.d.ts +38 -38
- package/dist/mediaembedresize/resizemediaembedcommand.d.ts +35 -35
- package/dist/mediaembedresize/ui/mediaembedcustomresizeformview.d.ts +118 -0
- package/dist/mediaembedresize/utils/getselectedmediaembededitornodes.d.ts +23 -0
- package/dist/mediaembedresize/utils/getselectedmediaembedpossibleresizerange.d.ts +25 -0
- package/dist/mediaembedresize/utils/getselectedmediaembedwidthinunits.d.ts +21 -0
- package/dist/mediaembedresize.d.ts +28 -25
- package/dist/mediaembedstyle/constants.d.ts +22 -22
- package/dist/mediaembedstyle/mediaembedstylecommand.d.ts +67 -67
- package/dist/mediaembedstyle/mediaembedstyleediting.d.ts +39 -39
- package/dist/mediaembedstyle/mediaembedstyleui.d.ts +76 -76
- package/dist/mediaembedstyle/utils.d.ts +18 -18
- package/dist/mediaembedstyle.d.ts +29 -29
- package/dist/mediaembedtoolbar.d.ts +28 -28
- package/dist/mediaembedui.d.ts +33 -33
- package/dist/mediaregistry.d.ts +59 -59
- package/dist/translations/af.js +1 -1
- package/dist/translations/af.umd.js +1 -1
- package/dist/translations/ar.js +1 -1
- package/dist/translations/ar.umd.js +1 -1
- package/dist/translations/ast.js +1 -1
- package/dist/translations/ast.umd.js +1 -1
- package/dist/translations/az.js +1 -1
- package/dist/translations/az.umd.js +1 -1
- package/dist/translations/be.js +1 -1
- package/dist/translations/be.umd.js +1 -1
- package/dist/translations/bg.js +1 -1
- package/dist/translations/bg.umd.js +1 -1
- package/dist/translations/bn.js +1 -1
- package/dist/translations/bn.umd.js +1 -1
- package/dist/translations/bs.js +1 -1
- package/dist/translations/bs.umd.js +1 -1
- package/dist/translations/ca.js +1 -1
- package/dist/translations/ca.umd.js +1 -1
- package/dist/translations/cs.js +1 -1
- package/dist/translations/cs.umd.js +1 -1
- package/dist/translations/da.js +1 -1
- package/dist/translations/da.umd.js +1 -1
- package/dist/translations/de-ch.js +1 -1
- package/dist/translations/de-ch.umd.js +1 -1
- package/dist/translations/de.js +1 -1
- package/dist/translations/de.umd.js +1 -1
- package/dist/translations/el.js +1 -1
- package/dist/translations/el.umd.js +1 -1
- package/dist/translations/en-au.js +1 -1
- package/dist/translations/en-au.umd.js +1 -1
- package/dist/translations/en-gb.js +1 -1
- package/dist/translations/en-gb.umd.js +1 -1
- package/dist/translations/en.js +1 -1
- package/dist/translations/en.umd.js +1 -1
- package/dist/translations/eo.js +1 -1
- package/dist/translations/eo.umd.js +1 -1
- package/dist/translations/es-co.js +1 -1
- package/dist/translations/es-co.umd.js +1 -1
- package/dist/translations/es.js +1 -1
- package/dist/translations/es.umd.js +1 -1
- package/dist/translations/et.js +1 -1
- package/dist/translations/et.umd.js +1 -1
- package/dist/translations/eu.js +1 -1
- package/dist/translations/eu.umd.js +1 -1
- package/dist/translations/fa.js +1 -1
- package/dist/translations/fa.umd.js +1 -1
- package/dist/translations/fi.js +1 -1
- package/dist/translations/fi.umd.js +1 -1
- package/dist/translations/fr.js +1 -1
- package/dist/translations/fr.umd.js +1 -1
- package/dist/translations/gl.js +1 -1
- package/dist/translations/gl.umd.js +1 -1
- package/dist/translations/gu.js +1 -1
- package/dist/translations/gu.umd.js +1 -1
- package/dist/translations/he.js +1 -1
- package/dist/translations/he.umd.js +1 -1
- package/dist/translations/hi.js +1 -1
- package/dist/translations/hi.umd.js +1 -1
- package/dist/translations/hr.js +1 -1
- package/dist/translations/hr.umd.js +1 -1
- package/dist/translations/hu.js +1 -1
- package/dist/translations/hu.umd.js +1 -1
- package/dist/translations/hy.js +1 -1
- package/dist/translations/hy.umd.js +1 -1
- package/dist/translations/id.js +1 -1
- package/dist/translations/id.umd.js +1 -1
- package/dist/translations/it.js +1 -1
- package/dist/translations/it.umd.js +1 -1
- package/dist/translations/ja.js +1 -1
- package/dist/translations/ja.umd.js +1 -1
- package/dist/translations/jv.js +1 -1
- package/dist/translations/jv.umd.js +1 -1
- package/dist/translations/kk.js +1 -1
- package/dist/translations/kk.umd.js +1 -1
- package/dist/translations/km.js +1 -1
- package/dist/translations/km.umd.js +1 -1
- package/dist/translations/kn.js +1 -1
- package/dist/translations/kn.umd.js +1 -1
- package/dist/translations/ko.js +1 -1
- package/dist/translations/ko.umd.js +1 -1
- package/dist/translations/ku.js +1 -1
- package/dist/translations/ku.umd.js +1 -1
- package/dist/translations/lt.js +1 -1
- package/dist/translations/lt.umd.js +1 -1
- package/dist/translations/lv.js +1 -1
- package/dist/translations/lv.umd.js +1 -1
- package/dist/translations/ms.js +1 -1
- package/dist/translations/ms.umd.js +1 -1
- package/dist/translations/nb.js +1 -1
- package/dist/translations/nb.umd.js +1 -1
- package/dist/translations/ne.js +1 -1
- package/dist/translations/ne.umd.js +1 -1
- package/dist/translations/nl.js +1 -1
- package/dist/translations/nl.umd.js +1 -1
- package/dist/translations/no.js +1 -1
- package/dist/translations/no.umd.js +1 -1
- package/dist/translations/oc.js +1 -1
- package/dist/translations/oc.umd.js +1 -1
- package/dist/translations/pl.js +1 -1
- package/dist/translations/pl.umd.js +1 -1
- package/dist/translations/pt-br.js +1 -1
- package/dist/translations/pt-br.umd.js +1 -1
- package/dist/translations/pt.js +1 -1
- package/dist/translations/pt.umd.js +1 -1
- package/dist/translations/ro.js +1 -1
- package/dist/translations/ro.umd.js +1 -1
- package/dist/translations/ru.js +1 -1
- package/dist/translations/ru.umd.js +1 -1
- package/dist/translations/si.js +1 -1
- package/dist/translations/si.umd.js +1 -1
- package/dist/translations/sk.js +1 -1
- package/dist/translations/sk.umd.js +1 -1
- package/dist/translations/sl.js +1 -1
- package/dist/translations/sl.umd.js +1 -1
- package/dist/translations/sq.js +1 -1
- package/dist/translations/sq.umd.js +1 -1
- package/dist/translations/sr-latn.js +1 -1
- package/dist/translations/sr-latn.umd.js +1 -1
- package/dist/translations/sr.js +1 -1
- package/dist/translations/sr.umd.js +1 -1
- package/dist/translations/sv.js +1 -1
- package/dist/translations/sv.umd.js +1 -1
- package/dist/translations/th.js +1 -1
- package/dist/translations/th.umd.js +1 -1
- package/dist/translations/ti.js +1 -1
- package/dist/translations/ti.umd.js +1 -1
- package/dist/translations/tk.js +1 -1
- package/dist/translations/tk.umd.js +1 -1
- package/dist/translations/tr.js +1 -1
- package/dist/translations/tr.umd.js +1 -1
- package/dist/translations/tt.js +1 -1
- package/dist/translations/tt.umd.js +1 -1
- package/dist/translations/ug.js +1 -1
- package/dist/translations/ug.umd.js +1 -1
- package/dist/translations/uk.js +1 -1
- package/dist/translations/uk.umd.js +1 -1
- package/dist/translations/ur.js +1 -1
- package/dist/translations/ur.umd.js +1 -1
- package/dist/translations/uz.js +1 -1
- package/dist/translations/uz.umd.js +1 -1
- package/dist/translations/vi.js +1 -1
- package/dist/translations/vi.umd.js +1 -1
- package/dist/translations/zh-cn.js +1 -1
- package/dist/translations/zh-cn.umd.js +1 -1
- package/dist/translations/zh.js +1 -1
- package/dist/translations/zh.umd.js +1 -1
- package/dist/ui/mediaformview.d.ts +83 -83
- package/dist/utils.d.ts +61 -61
- package/package.json +10 -10
package/dist/index.js
CHANGED
|
@@ -2,2046 +2,2691 @@
|
|
|
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 { Command, Plugin } from
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import { IconMediaPlaceholder,
|
|
10
|
-
import { ModelLivePosition, ModelLiveRange } from
|
|
11
|
-
import { Clipboard } from
|
|
12
|
-
import { Delete } from
|
|
13
|
-
import { Undo } from
|
|
5
|
+
import { Command, Plugin } from "@ckeditor/ckeditor5-core";
|
|
6
|
+
import { Widget, WidgetResize, WidgetToolbarRepository, calculateResizeHostAncestorWidth, findOptimalInsertionRange, isWidget, toWidget } from "@ckeditor/ckeditor5-widget";
|
|
7
|
+
import { CKEditorError, Collection, FocusTracker, KeystrokeHandler, Rect, _tryCastDimensionsToUnit, _tryParseDimensionWithUnit, first, global, logWarning, toArray } from "@ckeditor/ckeditor5-utils";
|
|
8
|
+
import { BalloonPanelView, ButtonView, ContextualBalloon, CssTransitionDisablerMixin, Dialog, DropdownButtonView, FocusCycler, FormHeaderView, FormRowView, IconView, LabeledFieldView, MenuBarMenuListItemButtonView, SplitButtonView, Template, UIModel, View, ViewCollection, addListToDropdown, addToolbarToDropdown, clickOutsideHandler, createDropdown, createLabeledInputNumber, createLabeledInputText, submitHandler } from "@ckeditor/ckeditor5-ui";
|
|
9
|
+
import { IconMedia, IconMediaPlaceholder, IconObjectCenter, IconObjectInlineLeft, IconObjectInlineRight, IconObjectLeft, IconObjectRight, IconObjectSizeCustom, IconObjectSizeFull, IconObjectSizeLarge, IconObjectSizeMedium, IconObjectSizeSmall, IconPreviousArrow } from "@ckeditor/ckeditor5-icons";
|
|
10
|
+
import { ModelLivePosition, ModelLiveRange } from "@ckeditor/ckeditor5-engine";
|
|
11
|
+
import { Clipboard } from "@ckeditor/ckeditor5-clipboard";
|
|
12
|
+
import { Delete } from "@ckeditor/ckeditor5-typing";
|
|
13
|
+
import { Undo } from "@ckeditor/ckeditor5-undo";
|
|
14
14
|
|
|
15
15
|
/**
|
|
16
|
-
|
|
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
|
-
viewWriter.insert(viewWriter.createPositionAt(figure, 0), mediaViewElement);
|
|
66
|
-
};
|
|
67
|
-
return (dispatcher)=>{
|
|
68
|
-
dispatcher.on('attribute:url:media', converter);
|
|
69
|
-
};
|
|
16
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
17
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
18
|
+
*/
|
|
19
|
+
/**
|
|
20
|
+
* Returns a function that converts the model "url" attribute to the view representation.
|
|
21
|
+
*
|
|
22
|
+
* Depending on the configuration, the view representation can be "semantic" (for the data pipeline):
|
|
23
|
+
*
|
|
24
|
+
* ```html
|
|
25
|
+
* <figure class="media">
|
|
26
|
+
* <oembed url="foo"></oembed>
|
|
27
|
+
* </figure>
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* or "non-semantic" (for the editing view pipeline):
|
|
31
|
+
*
|
|
32
|
+
* ```html
|
|
33
|
+
* <figure class="media">
|
|
34
|
+
* <div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
|
|
35
|
+
* </figure>
|
|
36
|
+
* ```
|
|
37
|
+
*
|
|
38
|
+
* **Note:** Changing the model "url" attribute replaces the entire content of the
|
|
39
|
+
* `<figure>` in the view.
|
|
40
|
+
*
|
|
41
|
+
* @param registry The registry providing
|
|
42
|
+
* the media and their content.
|
|
43
|
+
* @param options options object with following properties:
|
|
44
|
+
* - elementName When set, overrides the default element name for semantic media embeds.
|
|
45
|
+
* - renderMediaPreview When `true`, the converter will create the view in the non-semantic form.
|
|
46
|
+
* - renderForEditingView When `true`, the converter will create a view specific for the
|
|
47
|
+
* editing pipeline (e.g. including CSS classes, content placeholders).
|
|
48
|
+
*
|
|
49
|
+
* @internal
|
|
50
|
+
*/
|
|
51
|
+
function modelToViewUrlAttributeConverter(registry, options) {
|
|
52
|
+
const converter = (evt, data, conversionApi) => {
|
|
53
|
+
if (!conversionApi.consumable.consume(data.item, evt.name)) return;
|
|
54
|
+
const url = data.attributeNewValue;
|
|
55
|
+
const viewWriter = conversionApi.writer;
|
|
56
|
+
const figure = conversionApi.mapper.toViewElement(data.item);
|
|
57
|
+
const mediaContentElement = [...figure.getChildren()].find((child) => child.getCustomProperty("media-content"));
|
|
58
|
+
viewWriter.remove(mediaContentElement);
|
|
59
|
+
const mediaViewElement = registry.getMediaViewElement(viewWriter, url, options);
|
|
60
|
+
viewWriter.insert(viewWriter.createPositionAt(figure, 0), mediaViewElement);
|
|
61
|
+
};
|
|
62
|
+
return (dispatcher) => {
|
|
63
|
+
dispatcher.on("attribute:url:media", converter);
|
|
64
|
+
};
|
|
70
65
|
}
|
|
71
66
|
|
|
72
67
|
/**
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
*
|
|
79
|
-
|
|
80
|
-
* @
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
68
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
69
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
70
|
+
*/
|
|
71
|
+
/**
|
|
72
|
+
* Converts a given {@link module:engine/view/element~ViewElement} to a media embed widget:
|
|
73
|
+
* * Adds a {@link module:engine/view/element~ViewElement#_setCustomProperty custom property}
|
|
74
|
+
* allowing to recognize the media widget element.
|
|
75
|
+
* * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
|
|
76
|
+
*
|
|
77
|
+
* @param writer An instance of the view writer.
|
|
78
|
+
* @param label The element's label.
|
|
79
|
+
* @internal
|
|
80
|
+
*/
|
|
81
|
+
function toMediaWidget(viewElement, writer, label) {
|
|
82
|
+
writer.setCustomProperty("media", true, viewElement);
|
|
83
|
+
return toWidget(viewElement, writer, { label });
|
|
86
84
|
}
|
|
87
85
|
/**
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
return null;
|
|
86
|
+
* Returns a media widget editing view element if one is selected.
|
|
87
|
+
*
|
|
88
|
+
* @internal
|
|
89
|
+
*/
|
|
90
|
+
function getSelectedMediaViewWidget(selection) {
|
|
91
|
+
const viewElement = selection.getSelectedElement();
|
|
92
|
+
if (viewElement && isMediaWidget(viewElement)) return viewElement;
|
|
93
|
+
return null;
|
|
97
94
|
}
|
|
98
95
|
/**
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
96
|
+
* Checks if a given view element is a media widget.
|
|
97
|
+
*
|
|
98
|
+
* @internal
|
|
99
|
+
*/
|
|
100
|
+
function isMediaWidget(viewElement) {
|
|
101
|
+
return !!viewElement.getCustomProperty("media") && isWidget(viewElement);
|
|
104
102
|
}
|
|
105
103
|
/**
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}, [
|
|
127
|
-
registry.getMediaViewElement(writer, url, options),
|
|
128
|
-
writer.createSlot()
|
|
129
|
-
]);
|
|
104
|
+
* Creates a view element representing the media. Either a "semantic" one for the data pipeline:
|
|
105
|
+
*
|
|
106
|
+
* ```html
|
|
107
|
+
* <figure class="media">
|
|
108
|
+
* <oembed url="foo"></oembed>
|
|
109
|
+
* </figure>
|
|
110
|
+
* ```
|
|
111
|
+
*
|
|
112
|
+
* or a "non-semantic" (for the editing view pipeline):
|
|
113
|
+
*
|
|
114
|
+
* ```html
|
|
115
|
+
* <figure class="media">
|
|
116
|
+
* <div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
|
|
117
|
+
* </figure>
|
|
118
|
+
* ```
|
|
119
|
+
*
|
|
120
|
+
* @internal
|
|
121
|
+
*/
|
|
122
|
+
function createMediaFigureElement(writer, registry, url, options) {
|
|
123
|
+
return writer.createContainerElement("figure", { class: "media" }, [registry.getMediaViewElement(writer, url, options), writer.createSlot()]);
|
|
130
124
|
}
|
|
131
125
|
/**
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
return null;
|
|
126
|
+
* Returns a selected media element in the model, if any.
|
|
127
|
+
*
|
|
128
|
+
* @internal
|
|
129
|
+
*/
|
|
130
|
+
function getSelectedMediaModelWidget(selection) {
|
|
131
|
+
const selectedElement = selection.getSelectedElement();
|
|
132
|
+
if (selectedElement && selectedElement.is("element", "media")) return selectedElement;
|
|
133
|
+
return null;
|
|
141
134
|
}
|
|
142
135
|
/**
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
});
|
|
136
|
+
* Creates a media element and inserts it into the model.
|
|
137
|
+
*
|
|
138
|
+
* **Note**: This method will use {@link module:engine/model/model~Model#insertContent `model.insertContent()`} logic of inserting content
|
|
139
|
+
* if no `insertPosition` is passed.
|
|
140
|
+
*
|
|
141
|
+
* @param url An URL of an embeddable media.
|
|
142
|
+
* @param findOptimalPosition If true it will try to find optimal position to insert media without breaking content
|
|
143
|
+
* in which a selection is.
|
|
144
|
+
* @internal
|
|
145
|
+
*/
|
|
146
|
+
function insertMedia(model, url, selectable, findOptimalPosition) {
|
|
147
|
+
model.change((writer) => {
|
|
148
|
+
const mediaElement = writer.createElement("media", { url });
|
|
149
|
+
model.insertObject(mediaElement, selectable, null, {
|
|
150
|
+
setSelection: "on",
|
|
151
|
+
findOptimalPosition: findOptimalPosition ? "auto" : void 0
|
|
152
|
+
});
|
|
153
|
+
});
|
|
162
154
|
}
|
|
163
155
|
|
|
164
156
|
/**
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
157
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
158
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
159
|
+
*/
|
|
160
|
+
/**
|
|
161
|
+
* The insert media command.
|
|
162
|
+
*
|
|
163
|
+
* The command is registered by the {@link module:media-embed/mediaembedediting~MediaEmbedEditing} as `'mediaEmbed'`.
|
|
164
|
+
*
|
|
165
|
+
* To insert media at the current selection, execute the command and specify the URL:
|
|
166
|
+
*
|
|
167
|
+
* ```ts
|
|
168
|
+
* editor.execute( 'mediaEmbed', 'http://url.to.the/media' );
|
|
169
|
+
* ```
|
|
170
|
+
*/
|
|
171
|
+
var MediaEmbedCommand = class extends Command {
|
|
172
|
+
/**
|
|
173
|
+
* @inheritDoc
|
|
174
|
+
*/
|
|
175
|
+
refresh() {
|
|
176
|
+
const model = this.editor.model;
|
|
177
|
+
const selection = model.document.selection;
|
|
178
|
+
const selectedMedia = getSelectedMediaModelWidget(selection);
|
|
179
|
+
this.value = selectedMedia ? selectedMedia.getAttribute("url") : void 0;
|
|
180
|
+
this.isEnabled = isMediaSelected(selection) || isAllowedInParent(selection, model);
|
|
181
|
+
}
|
|
182
|
+
/**
|
|
183
|
+
* Executes the command, which either:
|
|
184
|
+
*
|
|
185
|
+
* * updates the URL of the selected media,
|
|
186
|
+
* * inserts the new media into the editor and puts the selection around it.
|
|
187
|
+
*
|
|
188
|
+
* @fires execute
|
|
189
|
+
* @param url The URL of the media.
|
|
190
|
+
*/
|
|
191
|
+
execute(url) {
|
|
192
|
+
const model = this.editor.model;
|
|
193
|
+
const selection = model.document.selection;
|
|
194
|
+
const selectedMedia = getSelectedMediaModelWidget(selection);
|
|
195
|
+
if (selectedMedia) model.change((writer) => {
|
|
196
|
+
writer.setAttribute("url", url, selectedMedia);
|
|
197
|
+
});
|
|
198
|
+
else insertMedia(model, url, selection, true);
|
|
199
|
+
}
|
|
200
|
+
};
|
|
205
201
|
/**
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
parent = parent.parent;
|
|
213
|
-
}
|
|
214
|
-
return model.schema.checkChild(parent, 'media');
|
|
202
|
+
* Checks if the media embed is allowed in the parent.
|
|
203
|
+
*/
|
|
204
|
+
function isAllowedInParent(selection, model) {
|
|
205
|
+
let parent = findOptimalInsertionRange(selection, model).start.parent;
|
|
206
|
+
if (parent.isEmpty && !model.schema.isLimit(parent)) parent = parent.parent;
|
|
207
|
+
return model.schema.checkChild(parent, "media");
|
|
215
208
|
}
|
|
216
209
|
/**
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
210
|
+
* Checks if the media object is selected.
|
|
211
|
+
*/
|
|
212
|
+
function isMediaSelected(selection) {
|
|
213
|
+
const element = selection.getSelectedElement();
|
|
214
|
+
return !!element && element.name === "media";
|
|
221
215
|
}
|
|
222
216
|
|
|
223
|
-
const mediaPlaceholderIconViewBox = '0 0 64 42';
|
|
224
|
-
/**
|
|
225
|
-
* A bridge between the raw media content provider definitions and the editor view content.
|
|
226
|
-
*
|
|
227
|
-
* It helps translating media URLs to corresponding {@link module:engine/view/element~ViewElement view elements}.
|
|
228
|
-
*
|
|
229
|
-
* Mostly used by the {@link module:media-embed/mediaembedediting~MediaEmbedEditing} plugin.
|
|
230
|
-
*/ class MediaRegistry {
|
|
231
|
-
/**
|
|
232
|
-
* The {@link module:utils/locale~Locale} instance.
|
|
233
|
-
*/ locale;
|
|
234
|
-
/**
|
|
235
|
-
* The media provider definitions available for the registry. Usually corresponding with the
|
|
236
|
-
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig media configuration}.
|
|
237
|
-
*/ providerDefinitions;
|
|
238
|
-
/**
|
|
239
|
-
* Creates an instance of the {@link module:media-embed/mediaregistry~MediaRegistry} class.
|
|
240
|
-
*
|
|
241
|
-
* @param locale The localization services instance.
|
|
242
|
-
* @param config The configuration of the media embed feature.
|
|
243
|
-
*/ constructor(locale, config){
|
|
244
|
-
const providers = config.providers;
|
|
245
|
-
const extraProviders = config.extraProviders || [];
|
|
246
|
-
const removedProviders = new Set(config.removeProviders);
|
|
247
|
-
const providerDefinitions = providers.concat(extraProviders).filter((provider)=>{
|
|
248
|
-
const name = provider.name;
|
|
249
|
-
if (!name) {
|
|
250
|
-
/**
|
|
251
|
-
* One of the providers (or extra providers) specified in the media embed configuration
|
|
252
|
-
* has no name and will not be used by the editor. In order to get this media
|
|
253
|
-
* provider working, double check your editor configuration.
|
|
254
|
-
*
|
|
255
|
-
* @error media-embed-no-provider-name
|
|
256
|
-
*/ logWarning('media-embed-no-provider-name', {
|
|
257
|
-
provider
|
|
258
|
-
});
|
|
259
|
-
return false;
|
|
260
|
-
}
|
|
261
|
-
return !removedProviders.has(name);
|
|
262
|
-
});
|
|
263
|
-
this.locale = locale;
|
|
264
|
-
this.providerDefinitions = providerDefinitions;
|
|
265
|
-
}
|
|
266
|
-
/**
|
|
267
|
-
* Checks whether the passed URL is representing a certain media type allowed in the editor.
|
|
268
|
-
*
|
|
269
|
-
* @param url The URL to be checked
|
|
270
|
-
*/ hasMedia(url) {
|
|
271
|
-
return !!this._getMedia(url);
|
|
272
|
-
}
|
|
273
|
-
/**
|
|
274
|
-
* For the given media URL string and options, it returns the {@link module:engine/view/element~ViewElement view element}
|
|
275
|
-
* representing that media.
|
|
276
|
-
*
|
|
277
|
-
* **Note:** If no URL is specified, an empty view element is returned.
|
|
278
|
-
*
|
|
279
|
-
* @param writer The view writer used to produce a view element.
|
|
280
|
-
* @param url The URL to be translated into a view element.
|
|
281
|
-
*/ getMediaViewElement(writer, url, options) {
|
|
282
|
-
return this._getMedia(url).getViewElement(writer, options);
|
|
283
|
-
}
|
|
284
|
-
/**
|
|
285
|
-
* Returns a `Media` instance for the given URL.
|
|
286
|
-
*
|
|
287
|
-
* @param url The URL of the media.
|
|
288
|
-
* @returns The `Media` instance or `null` when there is none.
|
|
289
|
-
*/ _getMedia(url) {
|
|
290
|
-
if (!url) {
|
|
291
|
-
return new Media(this.locale);
|
|
292
|
-
}
|
|
293
|
-
url = url.trim();
|
|
294
|
-
for (const definition of this.providerDefinitions){
|
|
295
|
-
const previewRenderer = definition.html;
|
|
296
|
-
const pattern = toArray(definition.url);
|
|
297
|
-
for (const subPattern of pattern){
|
|
298
|
-
const match = this._getUrlMatches(url, subPattern);
|
|
299
|
-
if (match) {
|
|
300
|
-
return new Media(this.locale, url, match, previewRenderer);
|
|
301
|
-
}
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
return null;
|
|
305
|
-
}
|
|
306
|
-
/**
|
|
307
|
-
* Tries to match `url` to `pattern`.
|
|
308
|
-
*
|
|
309
|
-
* @param url The URL of the media.
|
|
310
|
-
* @param pattern The pattern that should accept the media URL.
|
|
311
|
-
*/ _getUrlMatches(url, pattern) {
|
|
312
|
-
// 1. Try to match without stripping the protocol and "www" subdomain.
|
|
313
|
-
let match = url.match(pattern);
|
|
314
|
-
if (match) {
|
|
315
|
-
return match;
|
|
316
|
-
}
|
|
317
|
-
// 2. Try to match after stripping the protocol.
|
|
318
|
-
let rawUrl = url.replace(/^https?:\/\//, '');
|
|
319
|
-
match = rawUrl.match(pattern);
|
|
320
|
-
if (match) {
|
|
321
|
-
return match;
|
|
322
|
-
}
|
|
323
|
-
// 3. Try to match after stripping the "www" subdomain.
|
|
324
|
-
rawUrl = rawUrl.replace(/^www\./, '');
|
|
325
|
-
match = rawUrl.match(pattern);
|
|
326
|
-
if (match) {
|
|
327
|
-
return match;
|
|
328
|
-
}
|
|
329
|
-
return null;
|
|
330
|
-
}
|
|
331
|
-
}
|
|
332
217
|
/**
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
218
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
219
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
220
|
+
*/
|
|
221
|
+
/**
|
|
222
|
+
* @module media-embed/mediaregistry
|
|
223
|
+
*/
|
|
224
|
+
const mediaPlaceholderIconViewBox = "0 0 64 42";
|
|
225
|
+
/**
|
|
226
|
+
* A bridge between the raw media content provider definitions and the editor view content.
|
|
227
|
+
*
|
|
228
|
+
* It helps translating media URLs to corresponding {@link module:engine/view/element~ViewElement view elements}.
|
|
229
|
+
*
|
|
230
|
+
* Mostly used by the {@link module:media-embed/mediaembedediting~MediaEmbedEditing} plugin.
|
|
231
|
+
*/
|
|
232
|
+
var MediaRegistry = class {
|
|
233
|
+
/**
|
|
234
|
+
* The {@link module:utils/locale~Locale} instance.
|
|
235
|
+
*/
|
|
236
|
+
locale;
|
|
237
|
+
/**
|
|
238
|
+
* The media provider definitions available for the registry. Usually corresponding with the
|
|
239
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig media configuration}.
|
|
240
|
+
*/
|
|
241
|
+
providerDefinitions;
|
|
242
|
+
/**
|
|
243
|
+
* Creates an instance of the {@link module:media-embed/mediaregistry~MediaRegistry} class.
|
|
244
|
+
*
|
|
245
|
+
* @param locale The localization services instance.
|
|
246
|
+
* @param config The configuration of the media embed feature.
|
|
247
|
+
*/
|
|
248
|
+
constructor(locale, config) {
|
|
249
|
+
const providers = config.providers;
|
|
250
|
+
const extraProviders = config.extraProviders || [];
|
|
251
|
+
const removedProviders = new Set(config.removeProviders);
|
|
252
|
+
const providerDefinitions = providers.concat(extraProviders).filter((provider) => {
|
|
253
|
+
const name = provider.name;
|
|
254
|
+
if (!name) {
|
|
255
|
+
/**
|
|
256
|
+
* One of the providers (or extra providers) specified in the media embed configuration
|
|
257
|
+
* has no name and will not be used by the editor. In order to get this media
|
|
258
|
+
* provider working, double check your editor configuration.
|
|
259
|
+
*
|
|
260
|
+
* @error media-embed-no-provider-name
|
|
261
|
+
*/
|
|
262
|
+
logWarning("media-embed-no-provider-name", { provider });
|
|
263
|
+
return false;
|
|
264
|
+
}
|
|
265
|
+
return !removedProviders.has(name);
|
|
266
|
+
});
|
|
267
|
+
this.locale = locale;
|
|
268
|
+
this.providerDefinitions = providerDefinitions;
|
|
269
|
+
}
|
|
270
|
+
/**
|
|
271
|
+
* Checks whether the passed URL is representing a certain media type allowed in the editor.
|
|
272
|
+
*
|
|
273
|
+
* @param url The URL to be checked
|
|
274
|
+
*/
|
|
275
|
+
hasMedia(url) {
|
|
276
|
+
return !!this._getMedia(url);
|
|
277
|
+
}
|
|
278
|
+
/**
|
|
279
|
+
* For the given media URL string and options, it returns the {@link module:engine/view/element~ViewElement view element}
|
|
280
|
+
* representing that media.
|
|
281
|
+
*
|
|
282
|
+
* **Note:** If no URL is specified, an empty view element is returned.
|
|
283
|
+
*
|
|
284
|
+
* @param writer The view writer used to produce a view element.
|
|
285
|
+
* @param url The URL to be translated into a view element.
|
|
286
|
+
*/
|
|
287
|
+
getMediaViewElement(writer, url, options) {
|
|
288
|
+
return this._getMedia(url).getViewElement(writer, options);
|
|
289
|
+
}
|
|
290
|
+
/**
|
|
291
|
+
* Returns a `Media` instance for the given URL.
|
|
292
|
+
*
|
|
293
|
+
* @param url The URL of the media.
|
|
294
|
+
* @returns The `Media` instance or `null` when there is none.
|
|
295
|
+
*/
|
|
296
|
+
_getMedia(url) {
|
|
297
|
+
if (!url) return new Media(this.locale);
|
|
298
|
+
url = url.trim();
|
|
299
|
+
for (const definition of this.providerDefinitions) {
|
|
300
|
+
const previewRenderer = definition.html;
|
|
301
|
+
const pattern = toArray(definition.url);
|
|
302
|
+
for (const subPattern of pattern) {
|
|
303
|
+
const match = this._getUrlMatches(url, subPattern);
|
|
304
|
+
if (match) return new Media(this.locale, url, match, previewRenderer);
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
return null;
|
|
308
|
+
}
|
|
309
|
+
/**
|
|
310
|
+
* Tries to match `url` to `pattern`.
|
|
311
|
+
*
|
|
312
|
+
* @param url The URL of the media.
|
|
313
|
+
* @param pattern The pattern that should accept the media URL.
|
|
314
|
+
*/
|
|
315
|
+
_getUrlMatches(url, pattern) {
|
|
316
|
+
let match = url.match(pattern);
|
|
317
|
+
if (match) return match;
|
|
318
|
+
let rawUrl = url.replace(/^https?:\/\//, "");
|
|
319
|
+
match = rawUrl.match(pattern);
|
|
320
|
+
if (match) return match;
|
|
321
|
+
rawUrl = rawUrl.replace(/^www\./, "");
|
|
322
|
+
match = rawUrl.match(pattern);
|
|
323
|
+
if (match) return match;
|
|
324
|
+
return null;
|
|
325
|
+
}
|
|
326
|
+
};
|
|
327
|
+
/**
|
|
328
|
+
* Represents media defined by the provider configuration.
|
|
329
|
+
*
|
|
330
|
+
* It can be rendered to the {@link module:engine/view/element~ViewElement view element} and used in the editing or data pipeline.
|
|
331
|
+
*/
|
|
332
|
+
var Media = class {
|
|
333
|
+
/**
|
|
334
|
+
* The URL this Media instance represents.
|
|
335
|
+
*/
|
|
336
|
+
url;
|
|
337
|
+
/**
|
|
338
|
+
* Shorthand for {@link module:utils/locale~Locale#t}.
|
|
339
|
+
*
|
|
340
|
+
* @see module:utils/locale~Locale#t
|
|
341
|
+
*/
|
|
342
|
+
_locale;
|
|
343
|
+
/**
|
|
344
|
+
* The output of the `RegExp.match` which validated the {@link #url} of this media.
|
|
345
|
+
*/
|
|
346
|
+
_match;
|
|
347
|
+
/**
|
|
348
|
+
* The function returning the HTML string preview of this media.
|
|
349
|
+
*/
|
|
350
|
+
_previewRenderer;
|
|
351
|
+
constructor(locale, url, match, previewRenderer) {
|
|
352
|
+
this.url = this._getValidUrl(url);
|
|
353
|
+
this._locale = locale;
|
|
354
|
+
this._match = match;
|
|
355
|
+
this._previewRenderer = previewRenderer;
|
|
356
|
+
}
|
|
357
|
+
/**
|
|
358
|
+
* Returns the view element representation of the media.
|
|
359
|
+
*
|
|
360
|
+
* @param writer The view writer used to produce a view element.
|
|
361
|
+
*/
|
|
362
|
+
getViewElement(writer, options) {
|
|
363
|
+
const attributes = {};
|
|
364
|
+
let viewElement;
|
|
365
|
+
if (options.renderForEditingView || options.renderMediaPreview && this.url && this._previewRenderer) {
|
|
366
|
+
if (this.url) attributes["data-oembed-url"] = this.url;
|
|
367
|
+
if (options.renderForEditingView) attributes.class = "ck-media__wrapper";
|
|
368
|
+
const mediaHtml = this._getPreviewHtml(options);
|
|
369
|
+
viewElement = writer.createRawElement("div", attributes, (domElement, domConverter) => {
|
|
370
|
+
domConverter.setContentOf(domElement, mediaHtml);
|
|
371
|
+
});
|
|
372
|
+
} else {
|
|
373
|
+
if (this.url) attributes.url = this.url;
|
|
374
|
+
viewElement = writer.createEmptyElement(options.elementName, attributes);
|
|
375
|
+
}
|
|
376
|
+
writer.setCustomProperty("media-content", true, viewElement);
|
|
377
|
+
return viewElement;
|
|
378
|
+
}
|
|
379
|
+
/**
|
|
380
|
+
* Returns the HTML string of the media content preview.
|
|
381
|
+
*/
|
|
382
|
+
_getPreviewHtml(options) {
|
|
383
|
+
if (this._previewRenderer) return this._previewRenderer(this._match);
|
|
384
|
+
else {
|
|
385
|
+
if (this.url && options.renderForEditingView) return this._getPlaceholderHtml();
|
|
386
|
+
return "";
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
/**
|
|
390
|
+
* Returns the placeholder HTML when the media has no content preview.
|
|
391
|
+
*/
|
|
392
|
+
_getPlaceholderHtml() {
|
|
393
|
+
const icon = new IconView();
|
|
394
|
+
const t = this._locale.t;
|
|
395
|
+
icon.content = IconMediaPlaceholder;
|
|
396
|
+
icon.viewBox = mediaPlaceholderIconViewBox;
|
|
397
|
+
return new Template({
|
|
398
|
+
tag: "div",
|
|
399
|
+
attributes: { class: "ck ck-reset_all ck-media__placeholder" },
|
|
400
|
+
children: [{
|
|
401
|
+
tag: "div",
|
|
402
|
+
attributes: { class: "ck-media__placeholder__icon" },
|
|
403
|
+
children: [icon]
|
|
404
|
+
}, {
|
|
405
|
+
tag: "a",
|
|
406
|
+
attributes: {
|
|
407
|
+
class: "ck-media__placeholder__url",
|
|
408
|
+
target: "_blank",
|
|
409
|
+
rel: "noopener noreferrer",
|
|
410
|
+
href: this.url,
|
|
411
|
+
"data-cke-tooltip-text": t("Open media in new tab")
|
|
412
|
+
},
|
|
413
|
+
children: [{
|
|
414
|
+
tag: "span",
|
|
415
|
+
attributes: { class: "ck-media__placeholder__url__text" },
|
|
416
|
+
children: [this.url]
|
|
417
|
+
}]
|
|
418
|
+
}]
|
|
419
|
+
}).render().outerHTML;
|
|
420
|
+
}
|
|
421
|
+
/**
|
|
422
|
+
* Returns the full URL to the specified media.
|
|
423
|
+
*
|
|
424
|
+
* @param url The URL of the media.
|
|
425
|
+
*/
|
|
426
|
+
_getValidUrl(url) {
|
|
427
|
+
if (!url) return null;
|
|
428
|
+
if (url.match(/^https?/)) return url;
|
|
429
|
+
return "https://" + url;
|
|
430
|
+
}
|
|
431
|
+
};
|
|
459
432
|
|
|
460
433
|
/**
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
const url = viewMedia.getAttribute('data-oembed-url');
|
|
653
|
-
if (registry.hasMedia(url)) {
|
|
654
|
-
return writer.createElement('media', {
|
|
655
|
-
url
|
|
656
|
-
});
|
|
657
|
-
}
|
|
658
|
-
return null;
|
|
659
|
-
}
|
|
660
|
-
})// Consume `<figure class="media">` elements, that were left after upcast.
|
|
661
|
-
.add((dispatcher)=>{
|
|
662
|
-
const converter = (evt, data, conversionApi)=>{
|
|
663
|
-
if (!conversionApi.consumable.consume(data.viewItem, {
|
|
664
|
-
name: true,
|
|
665
|
-
classes: 'media'
|
|
666
|
-
})) {
|
|
667
|
-
return;
|
|
668
|
-
}
|
|
669
|
-
const { modelRange, modelCursor } = conversionApi.convertChildren(data.viewItem, data.modelCursor);
|
|
670
|
-
data.modelRange = modelRange;
|
|
671
|
-
data.modelCursor = modelCursor;
|
|
672
|
-
const modelElement = first(modelRange.getItems());
|
|
673
|
-
if (!modelElement) {
|
|
674
|
-
// Revert consumed figure so other features can convert it.
|
|
675
|
-
conversionApi.consumable.revert(data.viewItem, {
|
|
676
|
-
name: true,
|
|
677
|
-
classes: 'media'
|
|
678
|
-
});
|
|
679
|
-
}
|
|
680
|
-
};
|
|
681
|
-
dispatcher.on('element:figure', converter);
|
|
682
|
-
});
|
|
683
|
-
}
|
|
684
|
-
}
|
|
434
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
435
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
436
|
+
*/
|
|
437
|
+
/**
|
|
438
|
+
* @module media-embed/mediaembedediting
|
|
439
|
+
*/
|
|
440
|
+
/**
|
|
441
|
+
* The media embed editing feature.
|
|
442
|
+
*/
|
|
443
|
+
var MediaEmbedEditing = class extends Plugin {
|
|
444
|
+
/**
|
|
445
|
+
* @inheritDoc
|
|
446
|
+
*/
|
|
447
|
+
static get pluginName() {
|
|
448
|
+
return "MediaEmbedEditing";
|
|
449
|
+
}
|
|
450
|
+
/**
|
|
451
|
+
* @inheritDoc
|
|
452
|
+
*/
|
|
453
|
+
static get isOfficialPlugin() {
|
|
454
|
+
return true;
|
|
455
|
+
}
|
|
456
|
+
/**
|
|
457
|
+
* The media registry managing the media providers in the editor.
|
|
458
|
+
*/
|
|
459
|
+
registry;
|
|
460
|
+
/**
|
|
461
|
+
* @inheritDoc
|
|
462
|
+
*/
|
|
463
|
+
constructor(editor) {
|
|
464
|
+
super(editor);
|
|
465
|
+
editor.config.define("mediaEmbed", {
|
|
466
|
+
elementName: "oembed",
|
|
467
|
+
providers: [
|
|
468
|
+
{
|
|
469
|
+
name: "dailymotion",
|
|
470
|
+
url: [/^dailymotion\.com\/video\/(\w+)/, /^dai.ly\/(\w+)/],
|
|
471
|
+
html: (match) => {
|
|
472
|
+
return `<div><iframe src="https://www.dailymotion.com/embed/video/${match[1]}" width="1280" height="720" style="width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; display: block;" frameborder="0" allowfullscreen allow="autoplay"></iframe></div>`;
|
|
473
|
+
}
|
|
474
|
+
},
|
|
475
|
+
{
|
|
476
|
+
name: "spotify",
|
|
477
|
+
url: [
|
|
478
|
+
/^open\.spotify\.com\/(artist\/\w+)/,
|
|
479
|
+
/^open\.spotify\.com\/(album\/\w+)/,
|
|
480
|
+
/^open\.spotify\.com\/(track\/\w+)/
|
|
481
|
+
],
|
|
482
|
+
html: (match) => {
|
|
483
|
+
const id = match[1];
|
|
484
|
+
const isTrack = id.startsWith("track/");
|
|
485
|
+
return `<div><iframe src="https://open.spotify.com/embed/${id}" width="300" height="${isTrack ? "80" : "378"}" style="${isTrack ? "width: 100%; height: 80px; border: 0; display: block;" : "width: 100%; height: auto; aspect-ratio: 100 / 126; border: 0; display: block;"}" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe></div>`;
|
|
486
|
+
}
|
|
487
|
+
},
|
|
488
|
+
{
|
|
489
|
+
name: "youtube",
|
|
490
|
+
url: [
|
|
491
|
+
/^(?:m\.)?youtube\.com\/watch\?v=([\w-]+)(?:&t=(\d+))?/,
|
|
492
|
+
/^(?:m\.)?youtube\.com\/shorts\/([\w-]+)(?:\?t=(\d+))?/,
|
|
493
|
+
/^(?:m\.)?youtube\.com\/v\/([\w-]+)(?:\?t=(\d+))?/,
|
|
494
|
+
/^youtube\.com\/embed\/([\w-]+)(?:\?start=(\d+))?/,
|
|
495
|
+
/^youtu\.be\/([\w-]+)(?:\?t=(\d+))?/
|
|
496
|
+
],
|
|
497
|
+
html: (match) => {
|
|
498
|
+
const id = match[1];
|
|
499
|
+
const time = match[2];
|
|
500
|
+
return `<div><iframe src="https://www.youtube.com/embed/${id}${time ? `?start=${time}` : ""}" width="1280" height="720" style="width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; display: block;" frameborder="0" allow="autoplay; encrypted-media" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>`;
|
|
501
|
+
}
|
|
502
|
+
},
|
|
503
|
+
{
|
|
504
|
+
name: "vimeo",
|
|
505
|
+
url: [
|
|
506
|
+
/^vimeo\.com\/(\d+)/,
|
|
507
|
+
/^vimeo\.com\/[^/]+\/[^/]+\/video\/(\d+)/,
|
|
508
|
+
/^vimeo\.com\/album\/[^/]+\/video\/(\d+)/,
|
|
509
|
+
/^vimeo\.com\/channels\/[^/]+\/(\d+)/,
|
|
510
|
+
/^vimeo\.com\/groups\/[^/]+\/videos\/(\d+)/,
|
|
511
|
+
/^vimeo\.com\/ondemand\/[^/]+\/(\d+)/,
|
|
512
|
+
/^player\.vimeo\.com\/video\/(\d+)/
|
|
513
|
+
],
|
|
514
|
+
html: (match) => {
|
|
515
|
+
return `<div><iframe src="https://player.vimeo.com/video/${match[1]}" width="1280" height="720" style="width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; display: block;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>`;
|
|
516
|
+
}
|
|
517
|
+
},
|
|
518
|
+
{
|
|
519
|
+
name: "instagram",
|
|
520
|
+
url: [/^instagram\.com\/p\/(\w+)/, /^instagram\.com\/reel\/(\w+)/]
|
|
521
|
+
},
|
|
522
|
+
{
|
|
523
|
+
name: "twitter",
|
|
524
|
+
url: [/^twitter\.com/, /^x\.com/]
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
name: "googleMaps",
|
|
528
|
+
url: [
|
|
529
|
+
/^google\.com\/maps/,
|
|
530
|
+
/^goo\.gl\/maps/,
|
|
531
|
+
/^maps\.google\.com/,
|
|
532
|
+
/^maps\.app\.goo\.gl/
|
|
533
|
+
]
|
|
534
|
+
},
|
|
535
|
+
{
|
|
536
|
+
name: "flickr",
|
|
537
|
+
url: /^flickr\.com/
|
|
538
|
+
},
|
|
539
|
+
{
|
|
540
|
+
name: "facebook",
|
|
541
|
+
url: /^facebook\.com/
|
|
542
|
+
}
|
|
543
|
+
]
|
|
544
|
+
});
|
|
545
|
+
this.registry = new MediaRegistry(editor.locale, editor.config.get("mediaEmbed"));
|
|
546
|
+
}
|
|
547
|
+
/**
|
|
548
|
+
* @inheritDoc
|
|
549
|
+
*/
|
|
550
|
+
init() {
|
|
551
|
+
const editor = this.editor;
|
|
552
|
+
const schema = editor.model.schema;
|
|
553
|
+
const t = editor.t;
|
|
554
|
+
const conversion = editor.conversion;
|
|
555
|
+
const renderMediaPreview = editor.config.get("mediaEmbed.previewsInData");
|
|
556
|
+
const elementName = editor.config.get("mediaEmbed.elementName");
|
|
557
|
+
const registry = this.registry;
|
|
558
|
+
editor.commands.add("mediaEmbed", new MediaEmbedCommand(editor));
|
|
559
|
+
schema.register("media", {
|
|
560
|
+
inheritAllFrom: "$blockObject",
|
|
561
|
+
allowAttributes: ["url"]
|
|
562
|
+
});
|
|
563
|
+
conversion.for("dataDowncast").elementToStructure({
|
|
564
|
+
model: "media",
|
|
565
|
+
view: (modelElement, { writer }) => {
|
|
566
|
+
const url = modelElement.getAttribute("url");
|
|
567
|
+
return createMediaFigureElement(writer, registry, url, {
|
|
568
|
+
elementName,
|
|
569
|
+
renderMediaPreview: !!url && renderMediaPreview
|
|
570
|
+
});
|
|
571
|
+
}
|
|
572
|
+
});
|
|
573
|
+
conversion.for("dataDowncast").add(modelToViewUrlAttributeConverter(registry, {
|
|
574
|
+
elementName,
|
|
575
|
+
renderMediaPreview
|
|
576
|
+
}));
|
|
577
|
+
conversion.for("editingDowncast").elementToStructure({
|
|
578
|
+
model: "media",
|
|
579
|
+
view: (modelElement, { writer }) => {
|
|
580
|
+
return toMediaWidget(createMediaFigureElement(writer, registry, modelElement.getAttribute("url"), {
|
|
581
|
+
elementName,
|
|
582
|
+
renderForEditingView: true
|
|
583
|
+
}), writer, t("media widget"));
|
|
584
|
+
}
|
|
585
|
+
});
|
|
586
|
+
conversion.for("editingDowncast").add(modelToViewUrlAttributeConverter(registry, {
|
|
587
|
+
elementName,
|
|
588
|
+
renderForEditingView: true
|
|
589
|
+
}));
|
|
590
|
+
conversion.for("upcast").elementToElement({
|
|
591
|
+
view: (element) => ["oembed", elementName].includes(element.name) && element.getAttribute("url") ? { name: true } : null,
|
|
592
|
+
model: (viewMedia, { writer }) => {
|
|
593
|
+
const url = viewMedia.getAttribute("url");
|
|
594
|
+
if (registry.hasMedia(url)) return writer.createElement("media", { url });
|
|
595
|
+
return null;
|
|
596
|
+
}
|
|
597
|
+
}).elementToElement({
|
|
598
|
+
view: {
|
|
599
|
+
name: "div",
|
|
600
|
+
attributes: { "data-oembed-url": true }
|
|
601
|
+
},
|
|
602
|
+
model: (viewMedia, { writer }) => {
|
|
603
|
+
const url = viewMedia.getAttribute("data-oembed-url");
|
|
604
|
+
if (registry.hasMedia(url)) return writer.createElement("media", { url });
|
|
605
|
+
return null;
|
|
606
|
+
}
|
|
607
|
+
}).add((dispatcher) => {
|
|
608
|
+
const converter = (evt, data, conversionApi) => {
|
|
609
|
+
if (!conversionApi.consumable.consume(data.viewItem, {
|
|
610
|
+
name: true,
|
|
611
|
+
classes: "media"
|
|
612
|
+
})) return;
|
|
613
|
+
const { modelRange, modelCursor } = conversionApi.convertChildren(data.viewItem, data.modelCursor);
|
|
614
|
+
data.modelRange = modelRange;
|
|
615
|
+
data.modelCursor = modelCursor;
|
|
616
|
+
if (!first(modelRange.getItems())) conversionApi.consumable.revert(data.viewItem, {
|
|
617
|
+
name: true,
|
|
618
|
+
classes: "media"
|
|
619
|
+
});
|
|
620
|
+
};
|
|
621
|
+
dispatcher.on("element:figure", converter);
|
|
622
|
+
});
|
|
623
|
+
}
|
|
624
|
+
};
|
|
685
625
|
|
|
626
|
+
/**
|
|
627
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
628
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
629
|
+
*/
|
|
630
|
+
/**
|
|
631
|
+
* @module media-embed/automediaembed
|
|
632
|
+
*/
|
|
686
633
|
const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w-]+\.[\w-.~:/?#[\]@!$&'()*+,;=%]+$/;
|
|
687
634
|
/**
|
|
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
|
-
this._timeoutId = null;
|
|
804
|
-
writer.remove(urlRange);
|
|
805
|
-
urlRange.detach();
|
|
806
|
-
let insertionPosition = null;
|
|
807
|
-
// Check if position where the media element should be inserted is still valid.
|
|
808
|
-
// Otherwise leave it as undefined to use document.selection - default behavior of model.insertContent().
|
|
809
|
-
if (this._positionToInsert.root.rootName !== '$graveyard') {
|
|
810
|
-
insertionPosition = this._positionToInsert;
|
|
811
|
-
}
|
|
812
|
-
insertMedia(editor.model, url, insertionPosition, false);
|
|
813
|
-
this._positionToInsert.detach();
|
|
814
|
-
this._positionToInsert = null;
|
|
815
|
-
});
|
|
816
|
-
editor.plugins.get(Delete).requestUndoOnBackspace();
|
|
817
|
-
}, 100);
|
|
818
|
-
}
|
|
819
|
-
}
|
|
635
|
+
* The auto-media embed plugin. It recognizes media links in the pasted content and embeds
|
|
636
|
+
* them shortly after they are injected into the document.
|
|
637
|
+
*/
|
|
638
|
+
var AutoMediaEmbed = class extends Plugin {
|
|
639
|
+
/**
|
|
640
|
+
* @inheritDoc
|
|
641
|
+
*/
|
|
642
|
+
static get requires() {
|
|
643
|
+
return [
|
|
644
|
+
Clipboard,
|
|
645
|
+
Delete,
|
|
646
|
+
Undo
|
|
647
|
+
];
|
|
648
|
+
}
|
|
649
|
+
/**
|
|
650
|
+
* @inheritDoc
|
|
651
|
+
*/
|
|
652
|
+
static get pluginName() {
|
|
653
|
+
return "AutoMediaEmbed";
|
|
654
|
+
}
|
|
655
|
+
/**
|
|
656
|
+
* @inheritDoc
|
|
657
|
+
*/
|
|
658
|
+
static get isOfficialPlugin() {
|
|
659
|
+
return true;
|
|
660
|
+
}
|
|
661
|
+
/**
|
|
662
|
+
* The paste–to–embed `setTimeout` ID. Stored as a property to allow
|
|
663
|
+
* cleaning of the timeout.
|
|
664
|
+
*/
|
|
665
|
+
_timeoutId;
|
|
666
|
+
/**
|
|
667
|
+
* The position where the `<media>` element will be inserted after the timeout,
|
|
668
|
+
* determined each time the new content is pasted into the document.
|
|
669
|
+
*/
|
|
670
|
+
_positionToInsert;
|
|
671
|
+
/**
|
|
672
|
+
* @inheritDoc
|
|
673
|
+
*/
|
|
674
|
+
constructor(editor) {
|
|
675
|
+
super(editor);
|
|
676
|
+
this._timeoutId = null;
|
|
677
|
+
this._positionToInsert = null;
|
|
678
|
+
}
|
|
679
|
+
/**
|
|
680
|
+
* @inheritDoc
|
|
681
|
+
*/
|
|
682
|
+
init() {
|
|
683
|
+
const editor = this.editor;
|
|
684
|
+
const modelDocument = editor.model.document;
|
|
685
|
+
const clipboardPipeline = editor.plugins.get("ClipboardPipeline");
|
|
686
|
+
this.listenTo(clipboardPipeline, "inputTransformation", () => {
|
|
687
|
+
const firstRange = modelDocument.selection.getFirstRange();
|
|
688
|
+
const leftLivePosition = ModelLivePosition.fromPosition(firstRange.start);
|
|
689
|
+
leftLivePosition.stickiness = "toPrevious";
|
|
690
|
+
const rightLivePosition = ModelLivePosition.fromPosition(firstRange.end);
|
|
691
|
+
rightLivePosition.stickiness = "toNext";
|
|
692
|
+
modelDocument.once("change:data", () => {
|
|
693
|
+
this._embedMediaBetweenPositions(leftLivePosition, rightLivePosition);
|
|
694
|
+
leftLivePosition.detach();
|
|
695
|
+
rightLivePosition.detach();
|
|
696
|
+
}, { priority: "high" });
|
|
697
|
+
});
|
|
698
|
+
editor.commands.get("undo").on("execute", () => {
|
|
699
|
+
if (this._timeoutId) {
|
|
700
|
+
global.window.clearTimeout(this._timeoutId);
|
|
701
|
+
this._positionToInsert.detach();
|
|
702
|
+
this._timeoutId = null;
|
|
703
|
+
this._positionToInsert = null;
|
|
704
|
+
}
|
|
705
|
+
}, { priority: "high" });
|
|
706
|
+
}
|
|
707
|
+
/**
|
|
708
|
+
* Analyzes the part of the document between provided positions in search for a URL representing media.
|
|
709
|
+
* When the URL is found, it is automatically converted into media.
|
|
710
|
+
*
|
|
711
|
+
* @param leftPosition Left position of the selection.
|
|
712
|
+
* @param rightPosition Right position of the selection.
|
|
713
|
+
*/
|
|
714
|
+
_embedMediaBetweenPositions(leftPosition, rightPosition) {
|
|
715
|
+
const editor = this.editor;
|
|
716
|
+
const mediaRegistry = editor.plugins.get(MediaEmbedEditing).registry;
|
|
717
|
+
const urlRange = new ModelLiveRange(leftPosition, rightPosition);
|
|
718
|
+
const walker = urlRange.getWalker({ ignoreElementEnd: true });
|
|
719
|
+
let url = "";
|
|
720
|
+
for (const node of walker) if (node.item.is("$textProxy")) url += node.item.data;
|
|
721
|
+
url = url.trim();
|
|
722
|
+
if (!url.match(URL_REGEXP)) {
|
|
723
|
+
urlRange.detach();
|
|
724
|
+
return;
|
|
725
|
+
}
|
|
726
|
+
if (!mediaRegistry.hasMedia(url)) {
|
|
727
|
+
urlRange.detach();
|
|
728
|
+
return;
|
|
729
|
+
}
|
|
730
|
+
if (!editor.commands.get("mediaEmbed").isEnabled) {
|
|
731
|
+
urlRange.detach();
|
|
732
|
+
return;
|
|
733
|
+
}
|
|
734
|
+
this._positionToInsert = ModelLivePosition.fromPosition(leftPosition);
|
|
735
|
+
this._timeoutId = global.window.setTimeout(() => {
|
|
736
|
+
editor.model.change((writer) => {
|
|
737
|
+
this._timeoutId = null;
|
|
738
|
+
writer.remove(urlRange);
|
|
739
|
+
urlRange.detach();
|
|
740
|
+
let insertionPosition = null;
|
|
741
|
+
if (this._positionToInsert.root.rootName !== "$graveyard") insertionPosition = this._positionToInsert;
|
|
742
|
+
insertMedia(editor.model, url, insertionPosition, false);
|
|
743
|
+
this._positionToInsert.detach();
|
|
744
|
+
this._positionToInsert = null;
|
|
745
|
+
});
|
|
746
|
+
editor.plugins.get(Delete).requestUndoOnBackspace();
|
|
747
|
+
}, 100);
|
|
748
|
+
}
|
|
749
|
+
};
|
|
820
750
|
|
|
821
751
|
/**
|
|
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
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
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
|
-
|
|
752
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
753
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
754
|
+
*/
|
|
755
|
+
/**
|
|
756
|
+
* @module media-embed/ui/mediaformview
|
|
757
|
+
*/
|
|
758
|
+
/**
|
|
759
|
+
* The media form view controller class.
|
|
760
|
+
*
|
|
761
|
+
* See {@link module:media-embed/ui/mediaformview~MediaFormView}.
|
|
762
|
+
*/
|
|
763
|
+
var MediaFormView = class extends View {
|
|
764
|
+
/**
|
|
765
|
+
* Tracks information about the DOM focus in the form.
|
|
766
|
+
*/
|
|
767
|
+
focusTracker;
|
|
768
|
+
/**
|
|
769
|
+
* An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
|
770
|
+
*/
|
|
771
|
+
keystrokes;
|
|
772
|
+
/**
|
|
773
|
+
* The URL input view.
|
|
774
|
+
*/
|
|
775
|
+
urlInputView;
|
|
776
|
+
/**
|
|
777
|
+
* An array of form validators used by {@link #isValid}.
|
|
778
|
+
*/
|
|
779
|
+
_validators;
|
|
780
|
+
/**
|
|
781
|
+
* The default info text for the {@link #urlInputView}.
|
|
782
|
+
*/
|
|
783
|
+
_urlInputViewInfoDefault;
|
|
784
|
+
/**
|
|
785
|
+
* The info text with an additional tip for the {@link #urlInputView},
|
|
786
|
+
* displayed when the input has some value.
|
|
787
|
+
*/
|
|
788
|
+
_urlInputViewInfoTip;
|
|
789
|
+
/**
|
|
790
|
+
* @param validators Form validators used by {@link #isValid}.
|
|
791
|
+
* @param locale The localization services instance.
|
|
792
|
+
*/
|
|
793
|
+
constructor(validators, locale) {
|
|
794
|
+
super(locale);
|
|
795
|
+
this.focusTracker = new FocusTracker();
|
|
796
|
+
this.keystrokes = new KeystrokeHandler();
|
|
797
|
+
this.set("mediaURLInputValue", "");
|
|
798
|
+
this.urlInputView = this._createUrlInput();
|
|
799
|
+
this._validators = validators;
|
|
800
|
+
this.setTemplate({
|
|
801
|
+
tag: "form",
|
|
802
|
+
attributes: {
|
|
803
|
+
class: [
|
|
804
|
+
"ck",
|
|
805
|
+
"ck-media-form",
|
|
806
|
+
"ck-responsive-form"
|
|
807
|
+
],
|
|
808
|
+
tabindex: "-1"
|
|
809
|
+
},
|
|
810
|
+
children: [this.urlInputView]
|
|
811
|
+
});
|
|
812
|
+
}
|
|
813
|
+
/**
|
|
814
|
+
* @inheritDoc
|
|
815
|
+
*/
|
|
816
|
+
render() {
|
|
817
|
+
super.render();
|
|
818
|
+
submitHandler({ view: this });
|
|
819
|
+
this.focusTracker.add(this.urlInputView.element);
|
|
820
|
+
this.keystrokes.listenTo(this.element);
|
|
821
|
+
}
|
|
822
|
+
/**
|
|
823
|
+
* @inheritDoc
|
|
824
|
+
*/
|
|
825
|
+
destroy() {
|
|
826
|
+
super.destroy();
|
|
827
|
+
this.focusTracker.destroy();
|
|
828
|
+
this.keystrokes.destroy();
|
|
829
|
+
}
|
|
830
|
+
/**
|
|
831
|
+
* Focuses the {@link #urlInputView}.
|
|
832
|
+
*/
|
|
833
|
+
focus() {
|
|
834
|
+
this.urlInputView.focus();
|
|
835
|
+
}
|
|
836
|
+
/**
|
|
837
|
+
* The native DOM `value` of the {@link #urlInputView} element.
|
|
838
|
+
*
|
|
839
|
+
* **Note**: Do not confuse it with the {@link module:ui/inputtext/inputtextview~InputTextView#value}
|
|
840
|
+
* which works one way only and may not represent the actual state of the component in the DOM.
|
|
841
|
+
*/
|
|
842
|
+
get url() {
|
|
843
|
+
return this.urlInputView.fieldView.element.value.trim();
|
|
844
|
+
}
|
|
845
|
+
set url(url) {
|
|
846
|
+
this.urlInputView.fieldView.value = url.trim();
|
|
847
|
+
}
|
|
848
|
+
/**
|
|
849
|
+
* Validates the form and returns `false` when some fields are invalid.
|
|
850
|
+
*/
|
|
851
|
+
isValid() {
|
|
852
|
+
this.resetFormStatus();
|
|
853
|
+
for (const validator of this._validators) {
|
|
854
|
+
const errorText = validator(this);
|
|
855
|
+
if (errorText) {
|
|
856
|
+
this.urlInputView.errorText = errorText;
|
|
857
|
+
return false;
|
|
858
|
+
}
|
|
859
|
+
}
|
|
860
|
+
return true;
|
|
861
|
+
}
|
|
862
|
+
/**
|
|
863
|
+
* Cleans up the supplementary error and information text of the {@link #urlInputView}
|
|
864
|
+
* bringing them back to the state when the form has been displayed for the first time.
|
|
865
|
+
*
|
|
866
|
+
* See {@link #isValid}.
|
|
867
|
+
*/
|
|
868
|
+
resetFormStatus() {
|
|
869
|
+
this.urlInputView.errorText = null;
|
|
870
|
+
this.urlInputView.infoText = this._urlInputViewInfoDefault;
|
|
871
|
+
}
|
|
872
|
+
/**
|
|
873
|
+
* Creates a labeled input view.
|
|
874
|
+
*
|
|
875
|
+
* @returns Labeled input view instance.
|
|
876
|
+
*/
|
|
877
|
+
_createUrlInput() {
|
|
878
|
+
const t = this.locale.t;
|
|
879
|
+
const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
|
|
880
|
+
const inputField = labeledInput.fieldView;
|
|
881
|
+
this._urlInputViewInfoDefault = t("Paste the media URL in the input.");
|
|
882
|
+
this._urlInputViewInfoTip = t("Tip: Paste the URL into the content to embed faster.");
|
|
883
|
+
labeledInput.label = t("Media URL");
|
|
884
|
+
labeledInput.infoText = this._urlInputViewInfoDefault;
|
|
885
|
+
inputField.inputMode = "url";
|
|
886
|
+
inputField.on("input", () => {
|
|
887
|
+
labeledInput.infoText = inputField.element.value ? this._urlInputViewInfoTip : this._urlInputViewInfoDefault;
|
|
888
|
+
this.mediaURLInputValue = inputField.element.value.trim();
|
|
889
|
+
});
|
|
890
|
+
return labeledInput;
|
|
891
|
+
}
|
|
892
|
+
};
|
|
950
893
|
|
|
951
894
|
/**
|
|
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
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
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
|
-
];
|
|
895
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
896
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
897
|
+
*/
|
|
898
|
+
/**
|
|
899
|
+
* @module media-embed/mediaembedui
|
|
900
|
+
*/
|
|
901
|
+
/**
|
|
902
|
+
* The media embed UI plugin.
|
|
903
|
+
*/
|
|
904
|
+
var MediaEmbedUI = class extends Plugin {
|
|
905
|
+
/**
|
|
906
|
+
* @inheritDoc
|
|
907
|
+
*/
|
|
908
|
+
static get requires() {
|
|
909
|
+
return [MediaEmbedEditing, Dialog];
|
|
910
|
+
}
|
|
911
|
+
/**
|
|
912
|
+
* @inheritDoc
|
|
913
|
+
*/
|
|
914
|
+
static get pluginName() {
|
|
915
|
+
return "MediaEmbedUI";
|
|
916
|
+
}
|
|
917
|
+
/**
|
|
918
|
+
* @inheritDoc
|
|
919
|
+
*/
|
|
920
|
+
static get isOfficialPlugin() {
|
|
921
|
+
return true;
|
|
922
|
+
}
|
|
923
|
+
_formView;
|
|
924
|
+
/**
|
|
925
|
+
* @inheritDoc
|
|
926
|
+
*/
|
|
927
|
+
init() {
|
|
928
|
+
const editor = this.editor;
|
|
929
|
+
editor.ui.componentFactory.add("mediaEmbed", () => {
|
|
930
|
+
const t = this.editor.locale.t;
|
|
931
|
+
const button = this._createDialogButton(ButtonView);
|
|
932
|
+
button.tooltip = true;
|
|
933
|
+
button.label = t("Insert media");
|
|
934
|
+
return button;
|
|
935
|
+
});
|
|
936
|
+
editor.ui.componentFactory.add("menuBar:mediaEmbed", () => {
|
|
937
|
+
const t = this.editor.locale.t;
|
|
938
|
+
const button = this._createDialogButton(MenuBarMenuListItemButtonView);
|
|
939
|
+
button.label = t("Media");
|
|
940
|
+
return button;
|
|
941
|
+
});
|
|
942
|
+
}
|
|
943
|
+
/**
|
|
944
|
+
* Creates a button for menu bar that will show media embed dialog.
|
|
945
|
+
*/
|
|
946
|
+
_createDialogButton(ButtonClass) {
|
|
947
|
+
const editor = this.editor;
|
|
948
|
+
const buttonView = new ButtonClass(editor.locale);
|
|
949
|
+
const command = editor.commands.get("mediaEmbed");
|
|
950
|
+
const dialogPlugin = this.editor.plugins.get("Dialog");
|
|
951
|
+
buttonView.icon = IconMedia;
|
|
952
|
+
buttonView.bind("isEnabled").to(command, "isEnabled");
|
|
953
|
+
buttonView.on("execute", () => {
|
|
954
|
+
if (dialogPlugin.id === "mediaEmbed") dialogPlugin.hide();
|
|
955
|
+
else this._showDialog();
|
|
956
|
+
});
|
|
957
|
+
return buttonView;
|
|
958
|
+
}
|
|
959
|
+
_showDialog() {
|
|
960
|
+
const editor = this.editor;
|
|
961
|
+
const dialog = editor.plugins.get("Dialog");
|
|
962
|
+
const command = editor.commands.get("mediaEmbed");
|
|
963
|
+
const t = editor.locale.t;
|
|
964
|
+
const isMediaSelected = command.value !== void 0;
|
|
965
|
+
if (!this._formView) {
|
|
966
|
+
const registry = editor.plugins.get(MediaEmbedEditing).registry;
|
|
967
|
+
this._formView = new (CssTransitionDisablerMixin(MediaFormView))(getFormValidators$1(editor.t, registry), editor.locale);
|
|
968
|
+
this._formView.on("submit", () => this._handleSubmitForm());
|
|
969
|
+
}
|
|
970
|
+
dialog.show({
|
|
971
|
+
id: "mediaEmbed",
|
|
972
|
+
title: t("Media embed"),
|
|
973
|
+
content: this._formView,
|
|
974
|
+
isModal: true,
|
|
975
|
+
onShow: () => {
|
|
976
|
+
this._formView.url = command.value || "";
|
|
977
|
+
this._formView.resetFormStatus();
|
|
978
|
+
this._formView.urlInputView.fieldView.select();
|
|
979
|
+
},
|
|
980
|
+
actionButtons: [{
|
|
981
|
+
label: t("Cancel"),
|
|
982
|
+
withText: true,
|
|
983
|
+
onExecute: () => dialog.hide()
|
|
984
|
+
}, {
|
|
985
|
+
label: isMediaSelected ? t("Save") : t("Insert"),
|
|
986
|
+
class: "ck-button-action",
|
|
987
|
+
withText: true,
|
|
988
|
+
onExecute: () => this._handleSubmitForm()
|
|
989
|
+
}]
|
|
990
|
+
});
|
|
991
|
+
}
|
|
992
|
+
_handleSubmitForm() {
|
|
993
|
+
const editor = this.editor;
|
|
994
|
+
const dialog = editor.plugins.get("Dialog");
|
|
995
|
+
if (this._formView.isValid()) {
|
|
996
|
+
editor.execute("mediaEmbed", this._formView.url);
|
|
997
|
+
dialog.hide();
|
|
998
|
+
editor.editing.view.focus();
|
|
999
|
+
}
|
|
1000
|
+
}
|
|
1001
|
+
};
|
|
1002
|
+
function getFormValidators$1(t, registry) {
|
|
1003
|
+
return [(form) => {
|
|
1004
|
+
if (!form.url.length) return t("The URL must not be empty.");
|
|
1005
|
+
}, (form) => {
|
|
1006
|
+
if (!registry.hasMedia(form.url)) return t("This media URL is not supported.");
|
|
1007
|
+
}];
|
|
1068
1008
|
}
|
|
1069
1009
|
|
|
1070
1010
|
/**
|
|
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
|
-
|
|
1011
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1012
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1013
|
+
*/
|
|
1014
|
+
/**
|
|
1015
|
+
* @module media-embed/mediaembed
|
|
1016
|
+
*/
|
|
1017
|
+
/**
|
|
1018
|
+
* The media embed plugin.
|
|
1019
|
+
*
|
|
1020
|
+
* For a detailed overview, check the {@glink features/media-embed/media-embed Media Embed feature documentation}.
|
|
1021
|
+
*
|
|
1022
|
+
* This is a "glue" plugin which loads the following plugins:
|
|
1023
|
+
*
|
|
1024
|
+
* * The {@link module:media-embed/mediaembedediting~MediaEmbedEditing media embed editing feature},
|
|
1025
|
+
* * The {@link module:media-embed/mediaembedui~MediaEmbedUI media embed UI feature} and
|
|
1026
|
+
* * The {@link module:media-embed/automediaembed~AutoMediaEmbed auto-media embed feature}.
|
|
1027
|
+
*/
|
|
1028
|
+
var MediaEmbed = class extends Plugin {
|
|
1029
|
+
/**
|
|
1030
|
+
* @inheritDoc
|
|
1031
|
+
*/
|
|
1032
|
+
static get requires() {
|
|
1033
|
+
return [
|
|
1034
|
+
MediaEmbedEditing,
|
|
1035
|
+
MediaEmbedUI,
|
|
1036
|
+
AutoMediaEmbed,
|
|
1037
|
+
Widget
|
|
1038
|
+
];
|
|
1039
|
+
}
|
|
1040
|
+
/**
|
|
1041
|
+
* @inheritDoc
|
|
1042
|
+
*/
|
|
1043
|
+
static get pluginName() {
|
|
1044
|
+
return "MediaEmbed";
|
|
1045
|
+
}
|
|
1046
|
+
/**
|
|
1047
|
+
* @inheritDoc
|
|
1048
|
+
*/
|
|
1049
|
+
static get isOfficialPlugin() {
|
|
1050
|
+
return true;
|
|
1051
|
+
}
|
|
1052
|
+
};
|
|
1102
1053
|
|
|
1103
1054
|
/**
|
|
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
|
-
|
|
1055
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1056
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1057
|
+
*/
|
|
1058
|
+
/**
|
|
1059
|
+
* @module media-embed/mediaembedstyle/constants
|
|
1060
|
+
*/
|
|
1061
|
+
/**
|
|
1062
|
+
* Built-in style options provided by the plugin. Integrators can refer to these by
|
|
1063
|
+
* name in {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
|
|
1064
|
+
* to opt out, override individual fields, or coexist with custom styles.
|
|
1065
|
+
*
|
|
1066
|
+
* @internal
|
|
1067
|
+
*/
|
|
1068
|
+
const DEFAULT_OPTIONS = {
|
|
1069
|
+
alignLeft: {
|
|
1070
|
+
name: "alignLeft",
|
|
1071
|
+
title: "Left aligned media",
|
|
1072
|
+
icon: IconObjectInlineLeft,
|
|
1073
|
+
className: "media-style-align-left"
|
|
1074
|
+
},
|
|
1075
|
+
alignBlockLeft: {
|
|
1076
|
+
name: "alignBlockLeft",
|
|
1077
|
+
title: "Left aligned media",
|
|
1078
|
+
icon: IconObjectLeft,
|
|
1079
|
+
className: "media-style-block-align-left"
|
|
1080
|
+
},
|
|
1081
|
+
alignCenter: {
|
|
1082
|
+
name: "alignCenter",
|
|
1083
|
+
title: "Centered media",
|
|
1084
|
+
icon: IconObjectCenter,
|
|
1085
|
+
isDefault: true
|
|
1086
|
+
},
|
|
1087
|
+
alignBlockRight: {
|
|
1088
|
+
name: "alignBlockRight",
|
|
1089
|
+
title: "Right aligned media",
|
|
1090
|
+
icon: IconObjectRight,
|
|
1091
|
+
className: "media-style-block-align-right"
|
|
1092
|
+
},
|
|
1093
|
+
alignRight: {
|
|
1094
|
+
name: "alignRight",
|
|
1095
|
+
title: "Right aligned media",
|
|
1096
|
+
icon: IconObjectInlineRight,
|
|
1097
|
+
className: "media-style-align-right"
|
|
1098
|
+
}
|
|
1140
1099
|
};
|
|
1141
1100
|
/**
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1101
|
+
* Short icon-name aliases that can be used as the `icon` value in a media style
|
|
1102
|
+
* option definition. Matches the alias set exposed by the image styles feature so
|
|
1103
|
+
* the two APIs feel symmetrical.
|
|
1104
|
+
*
|
|
1105
|
+
* @internal
|
|
1106
|
+
*/
|
|
1107
|
+
const DEFAULT_ICONS = {
|
|
1108
|
+
inlineLeft: IconObjectInlineLeft,
|
|
1109
|
+
left: IconObjectLeft,
|
|
1110
|
+
center: IconObjectCenter,
|
|
1111
|
+
right: IconObjectRight,
|
|
1112
|
+
inlineRight: IconObjectInlineRight
|
|
1153
1113
|
};
|
|
1154
1114
|
/**
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
'mediaEmbed:alignBlockRight'
|
|
1177
|
-
],
|
|
1178
|
-
defaultItem: 'mediaEmbed:alignCenter'
|
|
1179
|
-
}
|
|
1180
|
-
];
|
|
1115
|
+
* Built-in dropdown groupings. Each entry references built-in style component names. If any
|
|
1116
|
+
* items are filtered out by configuration, the dropdown is rebuilt from the remaining names
|
|
1117
|
+
* (or skipped entirely if fewer than two remain).
|
|
1118
|
+
*
|
|
1119
|
+
* @internal
|
|
1120
|
+
*/
|
|
1121
|
+
const DEFAULT_DROPDOWN_DEFINITIONS = [{
|
|
1122
|
+
name: "mediaEmbed:wrapText",
|
|
1123
|
+
title: "Wrap text",
|
|
1124
|
+
items: ["mediaEmbed:alignLeft", "mediaEmbed:alignRight"],
|
|
1125
|
+
defaultItem: "mediaEmbed:alignLeft"
|
|
1126
|
+
}, {
|
|
1127
|
+
name: "mediaEmbed:breakText",
|
|
1128
|
+
title: "Break text",
|
|
1129
|
+
items: [
|
|
1130
|
+
"mediaEmbed:alignBlockLeft",
|
|
1131
|
+
"mediaEmbed:alignCenter",
|
|
1132
|
+
"mediaEmbed:alignBlockRight"
|
|
1133
|
+
],
|
|
1134
|
+
defaultItem: "mediaEmbed:alignCenter"
|
|
1135
|
+
}];
|
|
1181
1136
|
|
|
1182
1137
|
/**
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1138
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1139
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1140
|
+
*/
|
|
1141
|
+
/**
|
|
1142
|
+
* @module media-embed/mediaembedstyle/utils
|
|
1143
|
+
*/
|
|
1144
|
+
/**
|
|
1145
|
+
* Normalizes the {@link module:media-embed/mediaembedconfig~MediaStyleConfig#options style options}
|
|
1146
|
+
* provided by the integrator. Each entry is resolved into a full
|
|
1147
|
+
* {@link module:media-embed/mediaembedconfig~MediaStyleOptionDefinition} and invalid entries
|
|
1148
|
+
* are filtered out with a console warning.
|
|
1149
|
+
*
|
|
1150
|
+
* @internal
|
|
1151
|
+
*/
|
|
1152
|
+
function normalizeStyles(configuredStyles) {
|
|
1153
|
+
return (configuredStyles.options || []).map((entry) => normalizeDefinition(entry)).filter((entry) => isValidOption(entry));
|
|
1192
1154
|
}
|
|
1193
1155
|
/**
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
if (typeof definition.icon === 'string' && DEFAULT_ICONS[definition.icon]) {
|
|
1211
|
-
definition.icon = DEFAULT_ICONS[definition.icon];
|
|
1212
|
-
}
|
|
1213
|
-
return definition;
|
|
1156
|
+
* Resolves a single config entry into a style option definition. A string entry is first
|
|
1157
|
+
* promoted to its object form (`{ name }`) and then shallow-merged on top of the matching
|
|
1158
|
+
* built-in default — entries without a matching built-in pass through unchanged and are
|
|
1159
|
+
* rejected by {@link ~isValidOption} if they lack required fields.
|
|
1160
|
+
*
|
|
1161
|
+
* Also resolves icon-name aliases (`'left'`, `'inlineLeft'`, etc.) to the corresponding
|
|
1162
|
+
* SVG sources from {@link module:media-embed/mediaembedstyle/constants~DEFAULT_ICONS}.
|
|
1163
|
+
*/
|
|
1164
|
+
function normalizeDefinition(entry) {
|
|
1165
|
+
const override = typeof entry === "string" ? { name: entry } : entry;
|
|
1166
|
+
const definition = {
|
|
1167
|
+
...DEFAULT_OPTIONS[override.name],
|
|
1168
|
+
...override
|
|
1169
|
+
};
|
|
1170
|
+
if (typeof definition.icon === "string" && DEFAULT_ICONS[definition.icon]) definition.icon = DEFAULT_ICONS[definition.icon];
|
|
1171
|
+
return definition;
|
|
1214
1172
|
}
|
|
1215
1173
|
/**
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
return true;
|
|
1174
|
+
* Validates a normalized style option. `name`, `title`, and `icon` are always required.
|
|
1175
|
+
* `className` is required unless the entry is the default style (defaults encode as
|
|
1176
|
+
* attribute-absence and intentionally have no class). Emits a console warning and returns
|
|
1177
|
+
* `false` when any of these checks fails.
|
|
1178
|
+
*/
|
|
1179
|
+
function isValidOption(option) {
|
|
1180
|
+
if (!option.name || !option.title || !option.icon || !option.isDefault && !option.className) {
|
|
1181
|
+
warnInvalidStyle({ style: option });
|
|
1182
|
+
return false;
|
|
1183
|
+
}
|
|
1184
|
+
return true;
|
|
1228
1185
|
}
|
|
1229
1186
|
function warnInvalidStyle(info) {
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1187
|
+
/**
|
|
1188
|
+
* The media style configuration provided in the editor config is invalid. The warning is
|
|
1189
|
+
* emitted in two situations:
|
|
1190
|
+
*
|
|
1191
|
+
* * An entry in {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles.options`}
|
|
1192
|
+
* does not reference a built-in style by name (`'alignLeft'`, `'alignBlockLeft'`,
|
|
1193
|
+
* `'alignCenter'`, `'alignBlockRight'`, `'alignRight'`) and does not follow the
|
|
1194
|
+
* {@link module:media-embed/mediaembedconfig~MediaStyleOptionDefinition} shape —
|
|
1195
|
+
* `name`, `title`, `icon`, and (unless `isDefault: true`) `className` are required.
|
|
1196
|
+
* The offending entry is reported under the `style` parameter.
|
|
1197
|
+
* * A dropdown entry placed inline in
|
|
1198
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar `config.mediaEmbed.toolbar`}
|
|
1199
|
+
* does not follow the {@link module:media-embed/mediaembedconfig~MediaStyleDropdownDefinition} shape
|
|
1200
|
+
* (`name` and every `items[]` entry must use the full `mediaEmbed:` prefix, `defaultItem` must
|
|
1201
|
+
* be one of the `items`, `title` must be a non-empty string), or its `items[]` reference styles
|
|
1202
|
+
* that are not in the resolved
|
|
1203
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`} list.
|
|
1204
|
+
* The offending entry is reported under the `dropdown` parameter.
|
|
1205
|
+
*
|
|
1206
|
+
* @error media-style-configuration-definition-invalid
|
|
1207
|
+
*/
|
|
1208
|
+
logWarning("media-style-configuration-definition-invalid", info);
|
|
1251
1209
|
}
|
|
1252
1210
|
/**
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1211
|
+
* Type guard for toolbar config entries shaped like a media style dropdown definition. The
|
|
1212
|
+
* discriminator is `defaultItem` — generic toolbar groupings use `items` + `label` and never
|
|
1213
|
+
* carry a `defaultItem` field.
|
|
1214
|
+
*
|
|
1215
|
+
* @internal
|
|
1216
|
+
*/
|
|
1217
|
+
function isMediaStyleDropdown(item) {
|
|
1218
|
+
return typeof item === "object" && item !== null && typeof item.defaultItem === "string";
|
|
1260
1219
|
}
|
|
1261
1220
|
|
|
1262
1221
|
/**
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar `media.toolbar` configuration option}.
|
|
1267
|
-
*/ class MediaEmbedToolbar extends Plugin {
|
|
1268
|
-
/**
|
|
1269
|
-
* @inheritDoc
|
|
1270
|
-
*/ static get requires() {
|
|
1271
|
-
return [
|
|
1272
|
-
WidgetToolbarRepository
|
|
1273
|
-
];
|
|
1274
|
-
}
|
|
1275
|
-
/**
|
|
1276
|
-
* @inheritDoc
|
|
1277
|
-
*/ static get pluginName() {
|
|
1278
|
-
return 'MediaEmbedToolbar';
|
|
1279
|
-
}
|
|
1280
|
-
/**
|
|
1281
|
-
* @inheritDoc
|
|
1282
|
-
*/ static get isOfficialPlugin() {
|
|
1283
|
-
return true;
|
|
1284
|
-
}
|
|
1285
|
-
/**
|
|
1286
|
-
* @inheritDoc
|
|
1287
|
-
*/ afterInit() {
|
|
1288
|
-
const editor = this.editor;
|
|
1289
|
-
const t = editor.t;
|
|
1290
|
-
const widgetToolbarRepository = editor.plugins.get(WidgetToolbarRepository);
|
|
1291
|
-
widgetToolbarRepository.register('mediaEmbed', {
|
|
1292
|
-
ariaLabel: t('Media toolbar'),
|
|
1293
|
-
items: normalizeDeclarativeConfig(editor.ui.componentFactory, editor.config.get('mediaEmbed.toolbar') || []),
|
|
1294
|
-
getRelatedElement: getSelectedMediaViewWidget
|
|
1295
|
-
});
|
|
1296
|
-
}
|
|
1297
|
-
}
|
|
1222
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1223
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1224
|
+
*/
|
|
1298
1225
|
/**
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1226
|
+
* @module media-embed/mediaembedtoolbar
|
|
1227
|
+
*/
|
|
1228
|
+
/**
|
|
1229
|
+
* The media embed toolbar plugin. It creates a toolbar for media embed that shows up when the media element is selected.
|
|
1230
|
+
*
|
|
1231
|
+
* Instances of toolbar components (e.g. buttons) are created based on the
|
|
1232
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar `media.toolbar` configuration option}.
|
|
1233
|
+
*/
|
|
1234
|
+
var MediaEmbedToolbar = class extends Plugin {
|
|
1235
|
+
/**
|
|
1236
|
+
* @inheritDoc
|
|
1237
|
+
*/
|
|
1238
|
+
static get requires() {
|
|
1239
|
+
return [WidgetToolbarRepository];
|
|
1240
|
+
}
|
|
1241
|
+
/**
|
|
1242
|
+
* @inheritDoc
|
|
1243
|
+
*/
|
|
1244
|
+
static get pluginName() {
|
|
1245
|
+
return "MediaEmbedToolbar";
|
|
1246
|
+
}
|
|
1247
|
+
/**
|
|
1248
|
+
* @inheritDoc
|
|
1249
|
+
*/
|
|
1250
|
+
static get isOfficialPlugin() {
|
|
1251
|
+
return true;
|
|
1252
|
+
}
|
|
1253
|
+
/**
|
|
1254
|
+
* @inheritDoc
|
|
1255
|
+
*/
|
|
1256
|
+
afterInit() {
|
|
1257
|
+
const editor = this.editor;
|
|
1258
|
+
const t = editor.t;
|
|
1259
|
+
editor.plugins.get(WidgetToolbarRepository).register("mediaEmbed", {
|
|
1260
|
+
ariaLabel: t("Media toolbar"),
|
|
1261
|
+
items: normalizeDeclarativeConfig(editor.ui.componentFactory, editor.config.get("mediaEmbed.toolbar") || []),
|
|
1262
|
+
getRelatedElement: getSelectedMediaViewWidget
|
|
1263
|
+
});
|
|
1264
|
+
}
|
|
1265
|
+
};
|
|
1266
|
+
/**
|
|
1267
|
+
* Flattens dropdown definitions to their factory names, dropping any `mediaEmbed:`-prefixed
|
|
1268
|
+
* name the style UI did not register — otherwise the toolbar crashes with `componentfactory-item-missing`.
|
|
1269
|
+
* Non-string entries (e.g. generic `{ label, items }` toolbar groupings) pass through unchanged.
|
|
1270
|
+
*/
|
|
1271
|
+
function normalizeDeclarativeConfig(factory, config) {
|
|
1272
|
+
return config.map((item) => isMediaStyleDropdown(item) ? item.name : item).filter((item) => typeof item !== "string" || !item.startsWith("mediaEmbed:") || factory.has(item));
|
|
1304
1273
|
}
|
|
1305
1274
|
|
|
1306
1275
|
/**
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1276
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1277
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1278
|
+
*/
|
|
1279
|
+
/**
|
|
1280
|
+
* @module media-embed/mediaembedresize/resizemediaembedcommand
|
|
1281
|
+
*/
|
|
1282
|
+
/**
|
|
1283
|
+
* The resize media embed command.
|
|
1284
|
+
*/
|
|
1285
|
+
var ResizeMediaEmbedCommand = class extends Command {
|
|
1286
|
+
/**
|
|
1287
|
+
* @inheritDoc
|
|
1288
|
+
*/
|
|
1289
|
+
refresh() {
|
|
1290
|
+
const element = getSelectedMediaModelWidget(this.editor.model.document.selection);
|
|
1291
|
+
this.isEnabled = !!element;
|
|
1292
|
+
if (!element || !element.hasAttribute("resizedWidth")) this.value = null;
|
|
1293
|
+
else this.value = element.getAttribute("resizedWidth");
|
|
1294
|
+
}
|
|
1295
|
+
/**
|
|
1296
|
+
* Executes the command.
|
|
1297
|
+
*
|
|
1298
|
+
* ```ts
|
|
1299
|
+
* // Sets the width as a percentage of the parent width:
|
|
1300
|
+
* editor.execute( 'resizeMediaEmbed', { width: '50%' } );
|
|
1301
|
+
*
|
|
1302
|
+
* // Removes the resize and restores the default width:
|
|
1303
|
+
* editor.execute( 'resizeMediaEmbed', { width: null } );
|
|
1304
|
+
* ```
|
|
1305
|
+
*
|
|
1306
|
+
* @param options
|
|
1307
|
+
* @param options.width The new width of the media embed as a CSS `width` value
|
|
1308
|
+
* (e.g. `'50%'`), or `null` to remove the resize.
|
|
1309
|
+
* @fires execute
|
|
1310
|
+
*/
|
|
1311
|
+
execute(options) {
|
|
1312
|
+
const model = this.editor.model;
|
|
1313
|
+
const mediaElement = getSelectedMediaModelWidget(model.document.selection);
|
|
1314
|
+
if (mediaElement) model.change((writer) => {
|
|
1315
|
+
writer.setAttribute("resizedWidth", options.width, mediaElement);
|
|
1316
|
+
});
|
|
1317
|
+
}
|
|
1318
|
+
};
|
|
1345
1319
|
|
|
1346
1320
|
/**
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1321
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1322
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1323
|
+
*/
|
|
1324
|
+
/**
|
|
1325
|
+
* @module media-embed/mediaembedresize/constants
|
|
1326
|
+
*/
|
|
1327
|
+
/**
|
|
1328
|
+
* The view class applied to a resized media embed figure.
|
|
1329
|
+
*
|
|
1330
|
+
* Shared between the editing plugin (which toggles it via downcast of `resizedWidth` and consumes
|
|
1331
|
+
* it on upcast) and the handles plugin (which adds it during drag and strips it on commit), so
|
|
1332
|
+
* both layers agree on the exact class name.
|
|
1333
|
+
*
|
|
1334
|
+
* @internal
|
|
1335
|
+
*/
|
|
1336
|
+
const RESIZED_MEDIA_CLASS = "media_resized";
|
|
1360
1337
|
|
|
1361
1338
|
/**
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
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
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
}
|
|
1339
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1340
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1341
|
+
*/
|
|
1342
|
+
/**
|
|
1343
|
+
* The media embed resize editing feature.
|
|
1344
|
+
*
|
|
1345
|
+
* It adds the ability to resize each media embed using handles.
|
|
1346
|
+
*/
|
|
1347
|
+
var MediaEmbedResizeEditing = class extends Plugin {
|
|
1348
|
+
/**
|
|
1349
|
+
* @inheritDoc
|
|
1350
|
+
*/
|
|
1351
|
+
static get requires() {
|
|
1352
|
+
return [MediaEmbedEditing];
|
|
1353
|
+
}
|
|
1354
|
+
/**
|
|
1355
|
+
* @inheritDoc
|
|
1356
|
+
*/
|
|
1357
|
+
static get pluginName() {
|
|
1358
|
+
return "MediaEmbedResizeEditing";
|
|
1359
|
+
}
|
|
1360
|
+
/**
|
|
1361
|
+
* @inheritDoc
|
|
1362
|
+
* @internal
|
|
1363
|
+
*/
|
|
1364
|
+
static get licenseFeatureCode() {
|
|
1365
|
+
return "MER";
|
|
1366
|
+
}
|
|
1367
|
+
/**
|
|
1368
|
+
* @inheritDoc
|
|
1369
|
+
*/
|
|
1370
|
+
static get isOfficialPlugin() {
|
|
1371
|
+
return true;
|
|
1372
|
+
}
|
|
1373
|
+
/**
|
|
1374
|
+
* @inheritDoc
|
|
1375
|
+
*/
|
|
1376
|
+
static get isPremiumPlugin() {
|
|
1377
|
+
return true;
|
|
1378
|
+
}
|
|
1379
|
+
/**
|
|
1380
|
+
* @inheritDoc
|
|
1381
|
+
*/
|
|
1382
|
+
constructor(editor) {
|
|
1383
|
+
super(editor);
|
|
1384
|
+
editor.config.define("mediaEmbed", {
|
|
1385
|
+
resizeUnit: "%",
|
|
1386
|
+
resizeOptions: [
|
|
1387
|
+
{
|
|
1388
|
+
name: "resizeMediaEmbed:original",
|
|
1389
|
+
value: null,
|
|
1390
|
+
icon: "original"
|
|
1391
|
+
},
|
|
1392
|
+
{
|
|
1393
|
+
name: "resizeMediaEmbed:custom",
|
|
1394
|
+
value: "custom",
|
|
1395
|
+
icon: "custom"
|
|
1396
|
+
},
|
|
1397
|
+
{
|
|
1398
|
+
name: "resizeMediaEmbed:25",
|
|
1399
|
+
value: "25",
|
|
1400
|
+
icon: "small"
|
|
1401
|
+
},
|
|
1402
|
+
{
|
|
1403
|
+
name: "resizeMediaEmbed:50",
|
|
1404
|
+
value: "50",
|
|
1405
|
+
icon: "medium"
|
|
1406
|
+
},
|
|
1407
|
+
{
|
|
1408
|
+
name: "resizeMediaEmbed:75",
|
|
1409
|
+
value: "75",
|
|
1410
|
+
icon: "large"
|
|
1411
|
+
}
|
|
1412
|
+
]
|
|
1413
|
+
});
|
|
1414
|
+
}
|
|
1415
|
+
/**
|
|
1416
|
+
* @inheritDoc
|
|
1417
|
+
*/
|
|
1418
|
+
init() {
|
|
1419
|
+
const editor = this.editor;
|
|
1420
|
+
editor.commands.add("resizeMediaEmbed", new ResizeMediaEmbedCommand(editor));
|
|
1421
|
+
this._registerConverters();
|
|
1422
|
+
}
|
|
1423
|
+
/**
|
|
1424
|
+
* @inheritDoc
|
|
1425
|
+
*/
|
|
1426
|
+
afterInit() {
|
|
1427
|
+
this._registerSchema();
|
|
1428
|
+
}
|
|
1429
|
+
_registerSchema() {
|
|
1430
|
+
const schema = this.editor.model.schema;
|
|
1431
|
+
schema.extend("media", { allowAttributes: ["resizedWidth"] });
|
|
1432
|
+
schema.setAttributeProperties("resizedWidth", { isFormatting: true });
|
|
1433
|
+
}
|
|
1434
|
+
/**
|
|
1435
|
+
* Registers media embed resize converters.
|
|
1436
|
+
*/
|
|
1437
|
+
_registerConverters() {
|
|
1438
|
+
const editor = this.editor;
|
|
1439
|
+
editor.conversion.for("downcast").add((dispatcher) => dispatcher.on("attribute:resizedWidth:media", (evt, data, conversionApi) => {
|
|
1440
|
+
if (!conversionApi.consumable.consume(data.item, evt.name)) return;
|
|
1441
|
+
const viewWriter = conversionApi.writer;
|
|
1442
|
+
const figure = conversionApi.mapper.toViewElement(data.item);
|
|
1443
|
+
if (data.attributeNewValue !== null) {
|
|
1444
|
+
viewWriter.setStyle("width", data.attributeNewValue, figure);
|
|
1445
|
+
viewWriter.addClass(RESIZED_MEDIA_CLASS, figure);
|
|
1446
|
+
} else {
|
|
1447
|
+
viewWriter.removeStyle("width", figure);
|
|
1448
|
+
viewWriter.removeClass(RESIZED_MEDIA_CLASS, figure);
|
|
1449
|
+
}
|
|
1450
|
+
}));
|
|
1451
|
+
editor.conversion.for("upcast").attributeToAttribute({
|
|
1452
|
+
view: {
|
|
1453
|
+
name: "figure",
|
|
1454
|
+
styles: { width: /.+/ }
|
|
1455
|
+
},
|
|
1456
|
+
model: {
|
|
1457
|
+
key: "resizedWidth",
|
|
1458
|
+
value: (viewElement) => {
|
|
1459
|
+
if (!viewElement.hasClass("media")) return null;
|
|
1460
|
+
return viewElement.getStyle("width");
|
|
1461
|
+
}
|
|
1462
|
+
}
|
|
1463
|
+
});
|
|
1464
|
+
editor.conversion.for("upcast").add((dispatcher) => {
|
|
1465
|
+
dispatcher.on("element:figure", (evt, data, conversionApi) => {
|
|
1466
|
+
conversionApi.consumable.consume(data.viewItem, { classes: [RESIZED_MEDIA_CLASS] });
|
|
1467
|
+
});
|
|
1468
|
+
});
|
|
1469
|
+
}
|
|
1470
|
+
};
|
|
1470
1471
|
|
|
1471
1472
|
/**
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
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
|
-
|
|
1473
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1474
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1475
|
+
*/
|
|
1476
|
+
/**
|
|
1477
|
+
* The media embed resize by handles feature.
|
|
1478
|
+
*
|
|
1479
|
+
* It adds the ability to resize each media embed using handles.
|
|
1480
|
+
*/
|
|
1481
|
+
var MediaEmbedResizeHandles = class extends Plugin {
|
|
1482
|
+
/**
|
|
1483
|
+
* @inheritDoc
|
|
1484
|
+
*/
|
|
1485
|
+
static get requires() {
|
|
1486
|
+
return [WidgetResize];
|
|
1487
|
+
}
|
|
1488
|
+
/**
|
|
1489
|
+
* @inheritDoc
|
|
1490
|
+
*/
|
|
1491
|
+
static get pluginName() {
|
|
1492
|
+
return "MediaEmbedResizeHandles";
|
|
1493
|
+
}
|
|
1494
|
+
/**
|
|
1495
|
+
* @inheritDoc
|
|
1496
|
+
*/
|
|
1497
|
+
static get isOfficialPlugin() {
|
|
1498
|
+
return true;
|
|
1499
|
+
}
|
|
1500
|
+
/**
|
|
1501
|
+
* @inheritDoc
|
|
1502
|
+
*/
|
|
1503
|
+
init() {
|
|
1504
|
+
const command = this.editor.commands.get("resizeMediaEmbed");
|
|
1505
|
+
this.bind("isEnabled").to(command);
|
|
1506
|
+
this._setupResizerCreator();
|
|
1507
|
+
}
|
|
1508
|
+
/**
|
|
1509
|
+
* Attaches a resizer to every newly inserted media widget. Walks only the ranges
|
|
1510
|
+
* reported by the differ — never the whole document — so unrelated inserts (e.g.
|
|
1511
|
+
* pressing Enter to create a paragraph) cost only the differ check.
|
|
1512
|
+
*
|
|
1513
|
+
* Each resizer's `isEnabled` is bound to the plugin in {@link #_attachResizer},
|
|
1514
|
+
* so it auto-tracks the resize command's state.
|
|
1515
|
+
*/
|
|
1516
|
+
_setupResizerCreator() {
|
|
1517
|
+
const editor = this.editor;
|
|
1518
|
+
const model = editor.model;
|
|
1519
|
+
const widgetResize = editor.plugins.get(WidgetResize);
|
|
1520
|
+
this.listenTo(model.document, "change:data", () => {
|
|
1521
|
+
for (const change of model.document.differ.getChanges()) {
|
|
1522
|
+
if (change.type !== "insert" || change.name === "$text") continue;
|
|
1523
|
+
const insertedRange = model.createRange(change.position, change.position.getShiftedBy(change.length));
|
|
1524
|
+
for (const item of insertedRange.getItems()) {
|
|
1525
|
+
if (!item.is("element", "media")) continue;
|
|
1526
|
+
const viewElement = editor.editing.mapper.toViewElement(item);
|
|
1527
|
+
/* v8 ignore next -- @preserve */
|
|
1528
|
+
if (!viewElement) continue;
|
|
1529
|
+
/* v8 ignore else -- @preserve */
|
|
1530
|
+
if (!widgetResize.getResizerByViewElement(viewElement)) this._attachResizer(item, viewElement);
|
|
1531
|
+
}
|
|
1532
|
+
}
|
|
1533
|
+
}, { priority: "low" });
|
|
1534
|
+
}
|
|
1535
|
+
/**
|
|
1536
|
+
* Attaches a resizer to a single media widget.
|
|
1537
|
+
*/
|
|
1538
|
+
_attachResizer(modelElement, widgetView) {
|
|
1539
|
+
const editor = this.editor;
|
|
1540
|
+
const editingView = editor.editing.view;
|
|
1541
|
+
const resizer = editor.plugins.get(WidgetResize).attachTo({
|
|
1542
|
+
unit: editor.config.get("mediaEmbed.resizeUnit"),
|
|
1543
|
+
modelElement,
|
|
1544
|
+
viewElement: widgetView,
|
|
1545
|
+
editor,
|
|
1546
|
+
getHandleHost: (domWidgetElement) => domWidgetElement.querySelector(".ck-media__wrapper"),
|
|
1547
|
+
getResizeHost: (domWidgetElement) => domWidgetElement,
|
|
1548
|
+
onCommit: (newValue) => {
|
|
1549
|
+
editingView.change((writer) => writer.removeClass(RESIZED_MEDIA_CLASS, widgetView));
|
|
1550
|
+
editor.execute("resizeMediaEmbed", { width: newValue });
|
|
1551
|
+
}
|
|
1552
|
+
});
|
|
1553
|
+
resizer.bind("isEnabled").to(this);
|
|
1554
|
+
resizer.on("updateSize", () => {
|
|
1555
|
+
if (!widgetView.hasClass("media_resized")) editingView.change((writer) => writer.addClass(RESIZED_MEDIA_CLASS, widgetView));
|
|
1556
|
+
});
|
|
1557
|
+
editingView.once("render", () => resizer.redraw());
|
|
1558
|
+
}
|
|
1559
|
+
};
|
|
1560
|
+
|
|
1561
|
+
/**
|
|
1562
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1563
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1564
|
+
*/
|
|
1565
|
+
/**
|
|
1566
|
+
* @module media-embed/mediaembedresize/mediaembedresizebuttons
|
|
1567
|
+
*/
|
|
1568
|
+
const RESIZE_ICONS = /* #__PURE__ */ (() => ({
|
|
1569
|
+
small: IconObjectSizeSmall,
|
|
1570
|
+
medium: IconObjectSizeMedium,
|
|
1571
|
+
large: IconObjectSizeLarge,
|
|
1572
|
+
custom: IconObjectSizeCustom,
|
|
1573
|
+
original: IconObjectSizeFull
|
|
1574
|
+
}))();
|
|
1575
|
+
/**
|
|
1576
|
+
* The media embed resize buttons plugin.
|
|
1577
|
+
*
|
|
1578
|
+
* It adds a possibility to resize media embeds using the toolbar dropdown or individual buttons,
|
|
1579
|
+
* depending on the plugin configuration.
|
|
1580
|
+
*/
|
|
1581
|
+
var MediaEmbedResizeButtons = class extends Plugin {
|
|
1582
|
+
/**
|
|
1583
|
+
* @inheritDoc
|
|
1584
|
+
*/
|
|
1585
|
+
static get requires() {
|
|
1586
|
+
return [MediaEmbedResizeEditing];
|
|
1587
|
+
}
|
|
1588
|
+
/**
|
|
1589
|
+
* @inheritDoc
|
|
1590
|
+
*/
|
|
1591
|
+
static get pluginName() {
|
|
1592
|
+
return "MediaEmbedResizeButtons";
|
|
1593
|
+
}
|
|
1594
|
+
/**
|
|
1595
|
+
* @inheritDoc
|
|
1596
|
+
*/
|
|
1597
|
+
static get isOfficialPlugin() {
|
|
1598
|
+
return true;
|
|
1599
|
+
}
|
|
1600
|
+
_resizeUnit;
|
|
1601
|
+
/**
|
|
1602
|
+
* @inheritDoc
|
|
1603
|
+
*/
|
|
1604
|
+
constructor(editor) {
|
|
1605
|
+
super(editor);
|
|
1606
|
+
this._resizeUnit = editor.config.get("mediaEmbed.resizeUnit");
|
|
1607
|
+
}
|
|
1608
|
+
/**
|
|
1609
|
+
* @inheritDoc
|
|
1610
|
+
*/
|
|
1611
|
+
init() {
|
|
1612
|
+
const editor = this.editor;
|
|
1613
|
+
const options = editor.config.get("mediaEmbed.resizeOptions");
|
|
1614
|
+
const command = editor.commands.get("resizeMediaEmbed");
|
|
1615
|
+
this.bind("isEnabled").to(command);
|
|
1616
|
+
for (const option of options) this._registerMediaEmbedResizeButton(option);
|
|
1617
|
+
this._registerMediaEmbedResizeDropdown(options);
|
|
1618
|
+
}
|
|
1619
|
+
/**
|
|
1620
|
+
* Creates a standalone button component for the given resize option.
|
|
1621
|
+
*/
|
|
1622
|
+
_registerMediaEmbedResizeButton(option) {
|
|
1623
|
+
const editor = this.editor;
|
|
1624
|
+
const { name, value, icon } = option;
|
|
1625
|
+
editor.ui.componentFactory.add(name, (locale) => {
|
|
1626
|
+
const button = new ButtonView(locale);
|
|
1627
|
+
const command = editor.commands.get("resizeMediaEmbed");
|
|
1628
|
+
const labelText = this._getOptionLabelValue(option, true);
|
|
1629
|
+
if (!RESIZE_ICONS[icon])
|
|
1630
|
+
/**
|
|
1631
|
+
* When configuring {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#resizeOptions
|
|
1632
|
+
* `config.mediaEmbed.resizeOptions`} for standalone buttons, a valid `icon` token must be set for each option.
|
|
1633
|
+
*
|
|
1634
|
+
* See all valid options described in the
|
|
1635
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedResizeOption plugin configuration}.
|
|
1636
|
+
*
|
|
1637
|
+
* @error mediaembedresizebuttons-missing-icon
|
|
1638
|
+
* @param {module:media-embed/mediaembedconfig~MediaEmbedResizeOption} option Invalid media embed resize option.
|
|
1639
|
+
*/
|
|
1640
|
+
throw new CKEditorError("mediaembedresizebuttons-missing-icon", editor, option);
|
|
1641
|
+
button.set({
|
|
1642
|
+
label: labelText,
|
|
1643
|
+
icon: RESIZE_ICONS[icon],
|
|
1644
|
+
tooltip: labelText,
|
|
1645
|
+
isToggleable: true
|
|
1646
|
+
});
|
|
1647
|
+
button.bind("isEnabled").to(this);
|
|
1648
|
+
if (editor.plugins.has("MediaEmbedCustomResizeUI") && isCustomMediaEmbedResizeOption(option)) {
|
|
1649
|
+
const customResizeUI = editor.plugins.get("MediaEmbedCustomResizeUI");
|
|
1650
|
+
this.listenTo(button, "execute", () => {
|
|
1651
|
+
customResizeUI._showForm(this._resizeUnit);
|
|
1652
|
+
});
|
|
1653
|
+
} else {
|
|
1654
|
+
const optionValueWithUnit = value ? value + this._resizeUnit : null;
|
|
1655
|
+
button.bind("isOn").to(command, "value", command, "isEnabled", getIsOnButtonCallback(optionValueWithUnit));
|
|
1656
|
+
this.listenTo(button, "execute", () => {
|
|
1657
|
+
editor.execute("resizeMediaEmbed", { width: optionValueWithUnit });
|
|
1658
|
+
});
|
|
1659
|
+
}
|
|
1660
|
+
return button;
|
|
1661
|
+
});
|
|
1662
|
+
}
|
|
1663
|
+
/**
|
|
1664
|
+
* Creates the dropdown component containing all resize options.
|
|
1665
|
+
*/
|
|
1666
|
+
_registerMediaEmbedResizeDropdown(options) {
|
|
1667
|
+
const editor = this.editor;
|
|
1668
|
+
const t = editor.t;
|
|
1669
|
+
const originalSizeOption = options.find((option) => !option.value);
|
|
1670
|
+
const componentCreator = (locale) => {
|
|
1671
|
+
const command = editor.commands.get("resizeMediaEmbed");
|
|
1672
|
+
const dropdownView = createDropdown(locale, DropdownButtonView);
|
|
1673
|
+
const dropdownButton = dropdownView.buttonView;
|
|
1674
|
+
const accessibleLabel = t("Resize media");
|
|
1675
|
+
dropdownButton.set({
|
|
1676
|
+
tooltip: accessibleLabel,
|
|
1677
|
+
commandValue: originalSizeOption ? originalSizeOption.value : null,
|
|
1678
|
+
icon: RESIZE_ICONS.medium,
|
|
1679
|
+
isToggleable: true,
|
|
1680
|
+
label: originalSizeOption ? this._getOptionLabelValue(originalSizeOption) : "",
|
|
1681
|
+
withText: true,
|
|
1682
|
+
class: "ck-resize-media-embed-button",
|
|
1683
|
+
ariaLabel: accessibleLabel,
|
|
1684
|
+
ariaLabelledBy: void 0
|
|
1685
|
+
});
|
|
1686
|
+
dropdownButton.bind("label").to(command, "value", (commandValue) => {
|
|
1687
|
+
if (commandValue) return commandValue;
|
|
1688
|
+
return originalSizeOption ? this._getOptionLabelValue(originalSizeOption) : "";
|
|
1689
|
+
});
|
|
1690
|
+
dropdownView.bind("isEnabled").to(this);
|
|
1691
|
+
addListToDropdown(dropdownView, () => this._getResizeDropdownListItemDefinitions(options, command), {
|
|
1692
|
+
ariaLabel: t("Media resize list"),
|
|
1693
|
+
role: "menu"
|
|
1694
|
+
});
|
|
1695
|
+
this.listenTo(dropdownView, "execute", (evt) => {
|
|
1696
|
+
if ("onClick" in evt.source) evt.source.onClick();
|
|
1697
|
+
else {
|
|
1698
|
+
editor.execute(evt.source.commandName, { width: evt.source.commandValue });
|
|
1699
|
+
editor.editing.view.focus();
|
|
1700
|
+
}
|
|
1701
|
+
});
|
|
1702
|
+
return dropdownView;
|
|
1703
|
+
};
|
|
1704
|
+
editor.ui.componentFactory.add("resizeMediaEmbed", componentCreator);
|
|
1705
|
+
}
|
|
1706
|
+
/**
|
|
1707
|
+
* Returns a label for the given resize option.
|
|
1708
|
+
*/
|
|
1709
|
+
_getOptionLabelValue(option, forTooltip = false) {
|
|
1710
|
+
const t = this.editor.t;
|
|
1711
|
+
if (option.label) return option.label;
|
|
1712
|
+
const isCustom = isCustomMediaEmbedResizeOption(option);
|
|
1713
|
+
if (forTooltip) {
|
|
1714
|
+
if (isCustom) return t("Custom media size");
|
|
1715
|
+
return option.value ? t("Resize media to %0", option.value + this._resizeUnit) : t("Resize media to the original size");
|
|
1716
|
+
}
|
|
1717
|
+
if (isCustom) return t("Custom");
|
|
1718
|
+
return option.value ? option.value + this._resizeUnit : t("Original");
|
|
1719
|
+
}
|
|
1720
|
+
/**
|
|
1721
|
+
* Returns list item definitions for the resize dropdown.
|
|
1722
|
+
*/
|
|
1723
|
+
_getResizeDropdownListItemDefinitions(options, command) {
|
|
1724
|
+
const { editor } = this;
|
|
1725
|
+
const itemDefinitions = new Collection();
|
|
1726
|
+
const optionsWithSerializedValues = options.map((option) => {
|
|
1727
|
+
if (isCustomMediaEmbedResizeOption(option)) return {
|
|
1728
|
+
...option,
|
|
1729
|
+
valueWithUnits: "custom"
|
|
1730
|
+
};
|
|
1731
|
+
if (!option.value) return {
|
|
1732
|
+
...option,
|
|
1733
|
+
valueWithUnits: null
|
|
1734
|
+
};
|
|
1735
|
+
return {
|
|
1736
|
+
...option,
|
|
1737
|
+
valueWithUnits: `${option.value}${this._resizeUnit}`
|
|
1738
|
+
};
|
|
1739
|
+
});
|
|
1740
|
+
for (const option of optionsWithSerializedValues) {
|
|
1741
|
+
let definition = null;
|
|
1742
|
+
if (editor.plugins.has("MediaEmbedCustomResizeUI") && isCustomMediaEmbedResizeOption(option)) {
|
|
1743
|
+
const customResizeUI = editor.plugins.get("MediaEmbedCustomResizeUI");
|
|
1744
|
+
definition = {
|
|
1745
|
+
type: "button",
|
|
1746
|
+
model: new UIModel({
|
|
1747
|
+
label: this._getOptionLabelValue(option),
|
|
1748
|
+
role: "menuitemradio",
|
|
1749
|
+
withText: true,
|
|
1750
|
+
icon: null,
|
|
1751
|
+
onClick: () => {
|
|
1752
|
+
customResizeUI._showForm(this._resizeUnit);
|
|
1753
|
+
}
|
|
1754
|
+
})
|
|
1755
|
+
};
|
|
1756
|
+
const allDropdownValues = Object.values(optionsWithSerializedValues).map((option) => option.valueWithUnits);
|
|
1757
|
+
definition.model.bind("isOn").to(command, "value", command, "isEnabled", getIsOnCustomButtonCallback(allDropdownValues));
|
|
1758
|
+
} else {
|
|
1759
|
+
definition = {
|
|
1760
|
+
type: "button",
|
|
1761
|
+
model: new UIModel({
|
|
1762
|
+
commandName: "resizeMediaEmbed",
|
|
1763
|
+
commandValue: option.valueWithUnits,
|
|
1764
|
+
label: this._getOptionLabelValue(option),
|
|
1765
|
+
role: "menuitemradio",
|
|
1766
|
+
withText: true,
|
|
1767
|
+
icon: null
|
|
1768
|
+
})
|
|
1769
|
+
};
|
|
1770
|
+
definition.model.bind("isOn").to(command, "value", command, "isEnabled", getIsOnButtonCallback(option.valueWithUnits));
|
|
1771
|
+
}
|
|
1772
|
+
definition.model.bind("isEnabled").to(command, "isEnabled");
|
|
1773
|
+
itemDefinitions.add(definition);
|
|
1774
|
+
}
|
|
1775
|
+
return itemDefinitions;
|
|
1776
|
+
}
|
|
1777
|
+
};
|
|
1778
|
+
function isCustomMediaEmbedResizeOption(option) {
|
|
1779
|
+
return option.value === "custom";
|
|
1780
|
+
}
|
|
1781
|
+
function getIsOnButtonCallback(value) {
|
|
1782
|
+
return (commandValue, isEnabled) => {
|
|
1783
|
+
if (commandValue === void 0 || !isEnabled) return false;
|
|
1784
|
+
return commandValue === value;
|
|
1785
|
+
};
|
|
1786
|
+
}
|
|
1787
|
+
function getIsOnCustomButtonCallback(allDropdownValues) {
|
|
1788
|
+
return (commandValue, isEnabled) => !allDropdownValues.some((dropdownValue) => getIsOnButtonCallback(dropdownValue)(commandValue, isEnabled));
|
|
1565
1789
|
}
|
|
1566
1790
|
|
|
1567
1791
|
/**
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
return true;
|
|
1589
|
-
}
|
|
1792
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1793
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1794
|
+
*/
|
|
1795
|
+
/**
|
|
1796
|
+
* Finds model, view and DOM element for selected media embed element.
|
|
1797
|
+
* Returns `null` if there is no media embed selected.
|
|
1798
|
+
*
|
|
1799
|
+
* @param editor Editor instance.
|
|
1800
|
+
* @internal
|
|
1801
|
+
*/
|
|
1802
|
+
function getSelectedMediaEmbedEditorNodes(editor) {
|
|
1803
|
+
const { editing } = editor;
|
|
1804
|
+
const mediaModelElement = getSelectedMediaModelWidget(editor.model.document.selection);
|
|
1805
|
+
if (!mediaModelElement) return null;
|
|
1806
|
+
const mediaViewElement = editing.mapper.toViewElement(mediaModelElement);
|
|
1807
|
+
return {
|
|
1808
|
+
model: mediaModelElement,
|
|
1809
|
+
view: mediaViewElement,
|
|
1810
|
+
dom: editing.view.domConverter.mapViewToDom(mediaViewElement)
|
|
1811
|
+
};
|
|
1590
1812
|
}
|
|
1591
1813
|
|
|
1592
1814
|
/**
|
|
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
|
-
style.name,
|
|
1621
|
-
style
|
|
1622
|
-
]));
|
|
1623
|
-
const defaultStyle = styles.find((style)=>style.isDefault);
|
|
1624
|
-
this._defaultStyleName = defaultStyle ? defaultStyle.name : null;
|
|
1625
|
-
}
|
|
1626
|
-
/**
|
|
1627
|
-
* @inheritDoc
|
|
1628
|
-
*/ refresh() {
|
|
1629
|
-
const element = getSelectedMediaModelWidget(this.editor.model.document.selection);
|
|
1630
|
-
this.isEnabled = !!element;
|
|
1631
|
-
if (!element) {
|
|
1632
|
-
this.value = false;
|
|
1633
|
-
} else if (element.hasAttribute('mediaStyle')) {
|
|
1634
|
-
const styleName = element.getAttribute('mediaStyle');
|
|
1635
|
-
// A previously-applied style may have been dropped from the resolved options list
|
|
1636
|
-
// (e.g. by a config change). Fall back to the effective default so the UI stays
|
|
1637
|
-
// consistent with what the downcast actually renders (no class for unknown names).
|
|
1638
|
-
this.value = this._styles.has(styleName) ? styleName : this._defaultStyleName ?? false;
|
|
1639
|
-
} else {
|
|
1640
|
-
this.value = this._defaultStyleName ?? false;
|
|
1641
|
-
}
|
|
1642
|
-
}
|
|
1643
|
-
/**
|
|
1644
|
-
* Executes the command and applies the chosen style to the currently selected media embed.
|
|
1645
|
-
*
|
|
1646
|
-
* ```ts
|
|
1647
|
-
* editor.execute( 'mediaStyle', { value: 'alignLeft' } );
|
|
1648
|
-
* editor.execute( 'mediaStyle', { value: 'alignCenter' } ); // removes the attribute — alignCenter is the built-in default
|
|
1649
|
-
* editor.execute( 'mediaStyle', { value: null } ); // removes the attribute
|
|
1650
|
-
* ```
|
|
1651
|
-
*
|
|
1652
|
-
* The default style is encoded on the model as the absence of the `mediaStyle` attribute.
|
|
1653
|
-
* Passing any `isDefault: true` style name (or `null`) therefore clears the attribute. Values
|
|
1654
|
-
* that are neither falsy, an `isDefault` style, nor present in the resolved options list are
|
|
1655
|
-
* silently rejected.
|
|
1656
|
-
*
|
|
1657
|
-
* @param options
|
|
1658
|
-
* @param options.value The name of the style to apply, or `null` to clear the alignment.
|
|
1659
|
-
* @fires execute
|
|
1660
|
-
*/ execute(options) {
|
|
1661
|
-
const model = this.editor.model;
|
|
1662
|
-
const element = getSelectedMediaModelWidget(model.document.selection);
|
|
1663
|
-
const requestedStyle = options.value;
|
|
1664
|
-
// Falsy value or any `isDefault: true` style clears the attribute. Default styles encode
|
|
1665
|
-
// as attribute-absence on the model. The downcast emits no class for them.
|
|
1666
|
-
if (!requestedStyle || this._styles.get(requestedStyle)?.isDefault) {
|
|
1667
|
-
model.change((writer)=>{
|
|
1668
|
-
writer.removeAttribute('mediaStyle', element);
|
|
1669
|
-
});
|
|
1670
|
-
return;
|
|
1671
|
-
}
|
|
1672
|
-
// Reject names that are not part of the resolved options list.
|
|
1673
|
-
if (!this._styles.has(requestedStyle)) {
|
|
1674
|
-
return;
|
|
1675
|
-
}
|
|
1676
|
-
model.change((writer)=>{
|
|
1677
|
-
writer.setAttribute('mediaStyle', requestedStyle, element);
|
|
1678
|
-
});
|
|
1679
|
-
}
|
|
1815
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1816
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1817
|
+
*/
|
|
1818
|
+
/**
|
|
1819
|
+
* @module media-embed/mediaembedresize/utils/getselectedmediaembedwidthinunits
|
|
1820
|
+
*/
|
|
1821
|
+
/**
|
|
1822
|
+
* Returns media embed width in specified units after resize.
|
|
1823
|
+
*
|
|
1824
|
+
* * If no media embed is selected or command is disabled, `null` will be returned.
|
|
1825
|
+
* * If `targetUnit` percentage is passed then it will return width percentage relative to its ancestor.
|
|
1826
|
+
*
|
|
1827
|
+
* @param editor Editor instance.
|
|
1828
|
+
* @param targetUnit Unit in which dimension will be returned.
|
|
1829
|
+
* @returns Parsed media embed width after resize (with unit).
|
|
1830
|
+
* @internal
|
|
1831
|
+
*/
|
|
1832
|
+
function getSelectedMediaEmbedWidthInUnits(editor, targetUnit) {
|
|
1833
|
+
const mediaNodes = getSelectedMediaEmbedEditorNodes(editor);
|
|
1834
|
+
if (!mediaNodes) return null;
|
|
1835
|
+
const parsedResizedWidth = _tryParseDimensionWithUnit(mediaNodes.model.getAttribute("resizedWidth") || null);
|
|
1836
|
+
if (!parsedResizedWidth) return null;
|
|
1837
|
+
if (parsedResizedWidth.unit === targetUnit) return parsedResizedWidth;
|
|
1838
|
+
return _tryCastDimensionsToUnit(calculateResizeHostAncestorWidth(mediaNodes.dom), {
|
|
1839
|
+
unit: "px",
|
|
1840
|
+
value: new Rect(mediaNodes.dom).width
|
|
1841
|
+
}, targetUnit);
|
|
1680
1842
|
}
|
|
1681
1843
|
|
|
1682
1844
|
/**
|
|
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
|
-
/**
|
|
1708
|
-
* @inheritDoc
|
|
1709
|
-
*/ static get isOfficialPlugin() {
|
|
1710
|
-
return true;
|
|
1711
|
-
}
|
|
1712
|
-
/**
|
|
1713
|
-
* @inheritDoc
|
|
1714
|
-
*/ init() {
|
|
1715
|
-
const editor = this.editor;
|
|
1716
|
-
const schema = editor.model.schema;
|
|
1717
|
-
editor.config.define('mediaEmbed.styles', {
|
|
1718
|
-
options: Object.keys(DEFAULT_OPTIONS)
|
|
1719
|
-
});
|
|
1720
|
-
this.normalizedStyles = normalizeStyles(editor.config.get('mediaEmbed.styles'));
|
|
1721
|
-
schema.extend('media', {
|
|
1722
|
-
allowAttributes: [
|
|
1723
|
-
'mediaStyle'
|
|
1724
|
-
]
|
|
1725
|
-
});
|
|
1726
|
-
schema.setAttributeProperties('mediaStyle', {
|
|
1727
|
-
isFormatting: true
|
|
1728
|
-
});
|
|
1729
|
-
editor.commands.add('mediaStyle', new MediaEmbedStyleCommand(editor, this.normalizedStyles));
|
|
1730
|
-
this._registerConverters();
|
|
1731
|
-
}
|
|
1732
|
-
/**
|
|
1733
|
-
* Registers the downcast and upcast converters for the `mediaStyle` attribute.
|
|
1734
|
-
*/ _registerConverters() {
|
|
1735
|
-
const editor = this.editor;
|
|
1736
|
-
// Runtime lookup of style `name` → CSS `className`. Excludes the default style, which is
|
|
1737
|
-
// encoded as the absence of the attribute (no class). Iteration order follows the configured
|
|
1738
|
-
// options order — the upcast relies on this so the last matching class wins on a figure
|
|
1739
|
-
// that has multiple alignment classes.
|
|
1740
|
-
const styleClassMap = new Map(this.normalizedStyles.filter((style)=>!style.isDefault && style.className).map((style)=>[
|
|
1741
|
-
style.name,
|
|
1742
|
-
style.className
|
|
1743
|
-
]));
|
|
1744
|
-
// Downcast: `mediaStyle` → CSS class on the <figure>. Covers both editing and data pipelines.
|
|
1745
|
-
editor.conversion.for('downcast').add((dispatcher)=>dispatcher.on('attribute:mediaStyle:media', (evt, data, conversionApi)=>{
|
|
1746
|
-
if (!conversionApi.consumable.consume(data.item, evt.name)) {
|
|
1747
|
-
return;
|
|
1748
|
-
}
|
|
1749
|
-
const figure = conversionApi.mapper.toViewElement(data.item);
|
|
1750
|
-
const viewWriter = conversionApi.writer;
|
|
1751
|
-
const oldClass = styleClassMap.get(data.attributeOldValue);
|
|
1752
|
-
const newClass = styleClassMap.get(data.attributeNewValue);
|
|
1753
|
-
if (oldClass) {
|
|
1754
|
-
viewWriter.removeClass(oldClass, figure);
|
|
1755
|
-
}
|
|
1756
|
-
if (newClass) {
|
|
1757
|
-
viewWriter.addClass(newClass, figure);
|
|
1758
|
-
}
|
|
1759
|
-
}));
|
|
1760
|
-
// Upcast: alignment class on a media <figure> → `mediaStyle` attribute. Runs at `low`
|
|
1761
|
-
// priority so the main media upcast creates the `media` model element first.
|
|
1762
|
-
editor.conversion.for('upcast').add((dispatcher)=>{
|
|
1763
|
-
dispatcher.on('element:figure', (_evt, data, conversionApi)=>{
|
|
1764
|
-
if (!data.modelRange) {
|
|
1765
|
-
return;
|
|
1766
|
-
}
|
|
1767
|
-
const modelElement = first(data.modelRange.getItems());
|
|
1768
|
-
if (!modelElement || !modelElement.is('element', 'media')) {
|
|
1769
|
-
return;
|
|
1770
|
-
}
|
|
1771
|
-
// Iterate in insertion order — last consumed class wins when multiple
|
|
1772
|
-
// alignment classes are present on the same figure.
|
|
1773
|
-
for (const [styleName, className] of styleClassMap){
|
|
1774
|
-
if (conversionApi.consumable.consume(data.viewItem, {
|
|
1775
|
-
classes: className
|
|
1776
|
-
})) {
|
|
1777
|
-
conversionApi.writer.setAttribute('mediaStyle', styleName, modelElement);
|
|
1778
|
-
}
|
|
1779
|
-
}
|
|
1780
|
-
}, {
|
|
1781
|
-
priority: 'low'
|
|
1782
|
-
});
|
|
1783
|
-
});
|
|
1784
|
-
}
|
|
1845
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1846
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1847
|
+
*/
|
|
1848
|
+
/**
|
|
1849
|
+
* Returns the min and max resize values for the selected media embed in the specified unit.
|
|
1850
|
+
*
|
|
1851
|
+
* @param editor Editor instance.
|
|
1852
|
+
* @param targetUnit Unit in which dimension will be returned.
|
|
1853
|
+
* @returns Possible resize range in numeric form.
|
|
1854
|
+
* @internal
|
|
1855
|
+
*/
|
|
1856
|
+
function getSelectedMediaEmbedPossibleResizeRange(editor, targetUnit) {
|
|
1857
|
+
const mediaNodes = getSelectedMediaEmbedEditorNodes(editor);
|
|
1858
|
+
if (!mediaNodes) return null;
|
|
1859
|
+
const mediaParentWidthPx = calculateResizeHostAncestorWidth(mediaNodes.dom);
|
|
1860
|
+
const minimumMediaWidth = _tryParseDimensionWithUnit(window.getComputedStyle(mediaNodes.dom).minWidth) || {
|
|
1861
|
+
value: 1,
|
|
1862
|
+
unit: "px"
|
|
1863
|
+
};
|
|
1864
|
+
return {
|
|
1865
|
+
unit: targetUnit,
|
|
1866
|
+
lower: Math.max(.1, _tryCastDimensionsToUnit(mediaParentWidthPx, minimumMediaWidth, targetUnit).value),
|
|
1867
|
+
upper: targetUnit === "px" ? mediaParentWidthPx : 100
|
|
1868
|
+
};
|
|
1785
1869
|
}
|
|
1786
1870
|
|
|
1787
1871
|
/**
|
|
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
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1872
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
1873
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1874
|
+
*/
|
|
1875
|
+
/**
|
|
1876
|
+
* @module media-embed/mediaembedresize/ui/mediaembedcustomresizeformview
|
|
1877
|
+
*/
|
|
1878
|
+
/**
|
|
1879
|
+
* The MediaEmbedCustomResizeFormView class.
|
|
1880
|
+
*
|
|
1881
|
+
* @internal
|
|
1882
|
+
*/
|
|
1883
|
+
var MediaEmbedCustomResizeFormView = class extends View {
|
|
1884
|
+
/**
|
|
1885
|
+
* Tracks information about the DOM focus in the form.
|
|
1886
|
+
*/
|
|
1887
|
+
focusTracker;
|
|
1888
|
+
/**
|
|
1889
|
+
* An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
|
1890
|
+
*/
|
|
1891
|
+
keystrokes;
|
|
1892
|
+
/**
|
|
1893
|
+
* Resize unit shortcut.
|
|
1894
|
+
*/
|
|
1895
|
+
unit;
|
|
1896
|
+
/**
|
|
1897
|
+
* The Back button view displayed in the header.
|
|
1898
|
+
*/
|
|
1899
|
+
backButtonView;
|
|
1900
|
+
/**
|
|
1901
|
+
* A button used to submit the form.
|
|
1902
|
+
*/
|
|
1903
|
+
saveButtonView;
|
|
1904
|
+
/**
|
|
1905
|
+
* An input with a label.
|
|
1906
|
+
*/
|
|
1907
|
+
labeledInput;
|
|
1908
|
+
/**
|
|
1909
|
+
* A collection of child views.
|
|
1910
|
+
*/
|
|
1911
|
+
children;
|
|
1912
|
+
/**
|
|
1913
|
+
* A collection of views which can be focused in the form.
|
|
1914
|
+
*/
|
|
1915
|
+
_focusables;
|
|
1916
|
+
/**
|
|
1917
|
+
* Helps cycling over {@link #_focusables} in the form.
|
|
1918
|
+
*/
|
|
1919
|
+
_focusCycler;
|
|
1920
|
+
/**
|
|
1921
|
+
* An array of form validators used by {@link #isValid}.
|
|
1922
|
+
*/
|
|
1923
|
+
_validators;
|
|
1924
|
+
/**
|
|
1925
|
+
* @inheritDoc
|
|
1926
|
+
*/
|
|
1927
|
+
constructor(locale, unit, validators) {
|
|
1928
|
+
super(locale);
|
|
1929
|
+
this.focusTracker = new FocusTracker();
|
|
1930
|
+
this.keystrokes = new KeystrokeHandler();
|
|
1931
|
+
this.unit = unit;
|
|
1932
|
+
this.backButtonView = this._createBackButton();
|
|
1933
|
+
this.saveButtonView = this._createSaveButton();
|
|
1934
|
+
this.labeledInput = this._createLabeledInputView();
|
|
1935
|
+
this.children = this.createCollection([this._createHeaderView()]);
|
|
1936
|
+
this.children.add(new FormRowView(locale, {
|
|
1937
|
+
children: [this.labeledInput, this.saveButtonView],
|
|
1938
|
+
class: ["ck-form__row_with-submit", "ck-form__row_large-top-padding"]
|
|
1939
|
+
}));
|
|
1940
|
+
this._focusables = new ViewCollection();
|
|
1941
|
+
this._validators = validators;
|
|
1942
|
+
this.keystrokes.set("Esc", (data, cancel) => {
|
|
1943
|
+
this.fire("cancel");
|
|
1944
|
+
cancel();
|
|
1945
|
+
});
|
|
1946
|
+
this._focusCycler = new FocusCycler({
|
|
1947
|
+
focusables: this._focusables,
|
|
1948
|
+
focusTracker: this.focusTracker,
|
|
1949
|
+
keystrokeHandler: this.keystrokes,
|
|
1950
|
+
actions: {
|
|
1951
|
+
focusPrevious: "shift + tab",
|
|
1952
|
+
focusNext: "tab"
|
|
1953
|
+
}
|
|
1954
|
+
});
|
|
1955
|
+
this.setTemplate({
|
|
1956
|
+
tag: "form",
|
|
1957
|
+
attributes: {
|
|
1958
|
+
class: [
|
|
1959
|
+
"ck",
|
|
1960
|
+
"ck-form",
|
|
1961
|
+
"ck-media-embed-custom-resize-form",
|
|
1962
|
+
"ck-responsive-form"
|
|
1963
|
+
],
|
|
1964
|
+
tabindex: "-1"
|
|
1965
|
+
},
|
|
1966
|
+
children: this.children
|
|
1967
|
+
});
|
|
1968
|
+
}
|
|
1969
|
+
/**
|
|
1970
|
+
* @inheritDoc
|
|
1971
|
+
*/
|
|
1972
|
+
render() {
|
|
1973
|
+
super.render();
|
|
1974
|
+
submitHandler({ view: this });
|
|
1975
|
+
[
|
|
1976
|
+
this.backButtonView,
|
|
1977
|
+
this.labeledInput,
|
|
1978
|
+
this.saveButtonView
|
|
1979
|
+
].forEach((v) => {
|
|
1980
|
+
this._focusables.add(v);
|
|
1981
|
+
this.focusTracker.add(v.element);
|
|
1982
|
+
});
|
|
1983
|
+
this.keystrokes.listenTo(this.element);
|
|
1984
|
+
}
|
|
1985
|
+
/**
|
|
1986
|
+
* @inheritDoc
|
|
1987
|
+
*/
|
|
1988
|
+
destroy() {
|
|
1989
|
+
super.destroy();
|
|
1990
|
+
this.focusTracker.destroy();
|
|
1991
|
+
this.keystrokes.destroy();
|
|
1992
|
+
}
|
|
1993
|
+
_createBackButton() {
|
|
1994
|
+
const t = this.locale.t;
|
|
1995
|
+
const backButton = new ButtonView(this.locale);
|
|
1996
|
+
backButton.set({
|
|
1997
|
+
class: "ck-button-back",
|
|
1998
|
+
label: t("Back"),
|
|
1999
|
+
icon: IconPreviousArrow,
|
|
2000
|
+
tooltip: true
|
|
2001
|
+
});
|
|
2002
|
+
backButton.delegate("execute").to(this, "cancel");
|
|
2003
|
+
return backButton;
|
|
2004
|
+
}
|
|
2005
|
+
_createSaveButton() {
|
|
2006
|
+
const t = this.locale.t;
|
|
2007
|
+
const saveButton = new ButtonView(this.locale);
|
|
2008
|
+
saveButton.set({
|
|
2009
|
+
label: t("Save"),
|
|
2010
|
+
withText: true,
|
|
2011
|
+
type: "submit",
|
|
2012
|
+
class: "ck-button-action ck-button-bold"
|
|
2013
|
+
});
|
|
2014
|
+
return saveButton;
|
|
2015
|
+
}
|
|
2016
|
+
_createHeaderView() {
|
|
2017
|
+
const t = this.locale.t;
|
|
2018
|
+
const header = new FormHeaderView(this.locale, { label: t("Media Resize") });
|
|
2019
|
+
header.children.add(this.backButtonView, 0);
|
|
2020
|
+
return header;
|
|
2021
|
+
}
|
|
2022
|
+
_createLabeledInputView() {
|
|
2023
|
+
const t = this.locale.t;
|
|
2024
|
+
const labeledInput = new LabeledFieldView(this.locale, createLabeledInputNumber);
|
|
2025
|
+
labeledInput.label = t("Resize media (in %0)", this.unit);
|
|
2026
|
+
labeledInput.class = "ck-labeled-field-view_full-width";
|
|
2027
|
+
labeledInput.fieldView.set({
|
|
2028
|
+
min: .1,
|
|
2029
|
+
step: .1
|
|
2030
|
+
});
|
|
2031
|
+
return labeledInput;
|
|
2032
|
+
}
|
|
2033
|
+
/**
|
|
2034
|
+
* Validates the form and returns `false` when some fields are invalid.
|
|
2035
|
+
*/
|
|
2036
|
+
isValid() {
|
|
2037
|
+
this.resetFormStatus();
|
|
2038
|
+
for (const validator of this._validators) {
|
|
2039
|
+
const errorText = validator(this);
|
|
2040
|
+
if (errorText) {
|
|
2041
|
+
this.labeledInput.errorText = errorText;
|
|
2042
|
+
return false;
|
|
2043
|
+
}
|
|
2044
|
+
}
|
|
2045
|
+
return true;
|
|
2046
|
+
}
|
|
2047
|
+
/**
|
|
2048
|
+
* Cleans up error and information text of {@link #labeledInput}.
|
|
2049
|
+
*/
|
|
2050
|
+
resetFormStatus() {
|
|
2051
|
+
this.labeledInput.errorText = null;
|
|
2052
|
+
}
|
|
2053
|
+
/**
|
|
2054
|
+
* The native DOM `value` of the input element of {@link #labeledInput}.
|
|
2055
|
+
*/
|
|
2056
|
+
get rawSize() {
|
|
2057
|
+
const { element } = this.labeledInput.fieldView;
|
|
2058
|
+
if (!element) return null;
|
|
2059
|
+
return element.value;
|
|
2060
|
+
}
|
|
2061
|
+
/**
|
|
2062
|
+
* Get numeric value of size. Returns `null` if value is not a number.
|
|
2063
|
+
*/
|
|
2064
|
+
get parsedSize() {
|
|
2065
|
+
const { rawSize } = this;
|
|
2066
|
+
if (rawSize === null) return null;
|
|
2067
|
+
const parsed = Number.parseFloat(rawSize);
|
|
2068
|
+
if (Number.isNaN(parsed)) return null;
|
|
2069
|
+
return parsed;
|
|
2070
|
+
}
|
|
2071
|
+
/**
|
|
2072
|
+
* Returns serialized media embed input size with unit.
|
|
2073
|
+
* Returns `null` if value is not a number.
|
|
2074
|
+
*/
|
|
2075
|
+
get sizeWithUnits() {
|
|
2076
|
+
const { parsedSize, unit } = this;
|
|
2077
|
+
if (parsedSize === null) return null;
|
|
2078
|
+
return `${parsedSize}${unit}`;
|
|
2079
|
+
}
|
|
2080
|
+
};
|
|
2081
|
+
|
|
2082
|
+
/**
|
|
2083
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
2084
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2085
|
+
*/
|
|
2086
|
+
/**
|
|
2087
|
+
* @module media-embed/mediaembedresize/mediaembedcustomresizeui
|
|
2088
|
+
*/
|
|
2089
|
+
/**
|
|
2090
|
+
* The custom resize media embed UI plugin.
|
|
2091
|
+
*
|
|
2092
|
+
* The plugin uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
|
|
2093
|
+
*/
|
|
2094
|
+
var MediaEmbedCustomResizeUI = class extends Plugin {
|
|
2095
|
+
/**
|
|
2096
|
+
* The contextual balloon plugin instance.
|
|
2097
|
+
*/
|
|
2098
|
+
_balloon;
|
|
2099
|
+
/**
|
|
2100
|
+
* A form used to set the custom resize width.
|
|
2101
|
+
*/
|
|
2102
|
+
_form;
|
|
2103
|
+
/**
|
|
2104
|
+
* @inheritDoc
|
|
2105
|
+
*/
|
|
2106
|
+
static get requires() {
|
|
2107
|
+
return [ContextualBalloon];
|
|
2108
|
+
}
|
|
2109
|
+
/**
|
|
2110
|
+
* @inheritDoc
|
|
2111
|
+
*/
|
|
2112
|
+
static get pluginName() {
|
|
2113
|
+
return "MediaEmbedCustomResizeUI";
|
|
2114
|
+
}
|
|
2115
|
+
/**
|
|
2116
|
+
* @inheritDoc
|
|
2117
|
+
*/
|
|
2118
|
+
static get isOfficialPlugin() {
|
|
2119
|
+
return true;
|
|
2120
|
+
}
|
|
2121
|
+
/**
|
|
2122
|
+
* @inheritDoc
|
|
2123
|
+
*/
|
|
2124
|
+
destroy() {
|
|
2125
|
+
super.destroy();
|
|
2126
|
+
if (this._form) this._form.destroy();
|
|
2127
|
+
}
|
|
2128
|
+
/**
|
|
2129
|
+
* Creates the {@link module:media-embed/mediaembedresize/ui/mediaembedcustomresizeformview~MediaEmbedCustomResizeFormView} form.
|
|
2130
|
+
*/
|
|
2131
|
+
_createForm(unit) {
|
|
2132
|
+
const editor = this.editor;
|
|
2133
|
+
this._balloon = this.editor.plugins.get("ContextualBalloon");
|
|
2134
|
+
const FormViewClass = CssTransitionDisablerMixin(MediaEmbedCustomResizeFormView);
|
|
2135
|
+
this._form = new FormViewClass(editor.locale, unit, getFormValidators(editor));
|
|
2136
|
+
this._form.render();
|
|
2137
|
+
this.listenTo(this._form, "submit", () => {
|
|
2138
|
+
if (this._form.isValid()) {
|
|
2139
|
+
editor.execute("resizeMediaEmbed", { width: this._form.sizeWithUnits });
|
|
2140
|
+
this._hideForm(true);
|
|
2141
|
+
}
|
|
2142
|
+
});
|
|
2143
|
+
this.listenTo(this._form.labeledInput, "change:errorText", () => {
|
|
2144
|
+
editor.ui.update();
|
|
2145
|
+
});
|
|
2146
|
+
this.listenTo(this._form, "cancel", () => {
|
|
2147
|
+
this._hideForm(true);
|
|
2148
|
+
});
|
|
2149
|
+
clickOutsideHandler({
|
|
2150
|
+
emitter: this._form,
|
|
2151
|
+
activator: () => this._isVisible,
|
|
2152
|
+
contextElements: () => [this._balloon.view.element],
|
|
2153
|
+
callback: () => this._hideForm()
|
|
2154
|
+
});
|
|
2155
|
+
}
|
|
2156
|
+
/**
|
|
2157
|
+
* Shows the {@link #_form} in the {@link #_balloon}.
|
|
2158
|
+
*
|
|
2159
|
+
* @internal
|
|
2160
|
+
*/
|
|
2161
|
+
_showForm(unit) {
|
|
2162
|
+
if (this._isVisible) return;
|
|
2163
|
+
if (!this._form) this._createForm(unit);
|
|
2164
|
+
const editor = this.editor;
|
|
2165
|
+
const labeledInput = this._form.labeledInput;
|
|
2166
|
+
this._form.disableCssTransitions();
|
|
2167
|
+
this._form.resetFormStatus();
|
|
2168
|
+
/* v8 ignore else -- @preserve */
|
|
2169
|
+
if (!this._isInBalloon) this._balloon.add({
|
|
2170
|
+
view: this._form,
|
|
2171
|
+
position: getBalloonPositionData(editor)
|
|
2172
|
+
});
|
|
2173
|
+
const currentParsedWidth = getSelectedMediaEmbedWidthInUnits(editor, unit);
|
|
2174
|
+
const initialInputValue = currentParsedWidth ? currentParsedWidth.value.toFixed(1) : "";
|
|
2175
|
+
const possibleRange = getSelectedMediaEmbedPossibleResizeRange(editor, unit);
|
|
2176
|
+
labeledInput.fieldView.value = labeledInput.fieldView.element.value = initialInputValue;
|
|
2177
|
+
if (possibleRange) Object.assign(labeledInput.fieldView, {
|
|
2178
|
+
min: possibleRange.lower.toFixed(1),
|
|
2179
|
+
max: Math.ceil(possibleRange.upper).toFixed(1)
|
|
2180
|
+
});
|
|
2181
|
+
this._form.labeledInput.fieldView.select();
|
|
2182
|
+
this._form.enableCssTransitions();
|
|
2183
|
+
}
|
|
2184
|
+
/**
|
|
2185
|
+
* Removes the {@link #_form} from the {@link #_balloon}.
|
|
2186
|
+
*
|
|
2187
|
+
* @param focusEditable Controls whether the editing view is focused afterwards.
|
|
2188
|
+
*/
|
|
2189
|
+
_hideForm(focusEditable = false) {
|
|
2190
|
+
if (!this._isInBalloon) return;
|
|
2191
|
+
if (this._form.focusTracker.isFocused) this._form.saveButtonView.focus();
|
|
2192
|
+
this._balloon.remove(this._form);
|
|
2193
|
+
if (focusEditable) this.editor.editing.view.focus();
|
|
2194
|
+
}
|
|
2195
|
+
/**
|
|
2196
|
+
* Returns `true` when the {@link #_form} is the visible view in the {@link #_balloon}.
|
|
2197
|
+
*/
|
|
2198
|
+
get _isVisible() {
|
|
2199
|
+
return !!this._balloon && this._balloon.visibleView === this._form;
|
|
2200
|
+
}
|
|
2201
|
+
/**
|
|
2202
|
+
* Returns `true` when the {@link #_form} is in the {@link #_balloon}.
|
|
2203
|
+
*/
|
|
2204
|
+
get _isInBalloon() {
|
|
2205
|
+
return !!this._balloon && this._balloon.hasView(this._form);
|
|
2206
|
+
}
|
|
2207
|
+
};
|
|
2208
|
+
function getBalloonPositionData(editor) {
|
|
2209
|
+
const editingView = editor.editing.view;
|
|
2210
|
+
const defaultPositions = BalloonPanelView.defaultPositions;
|
|
2211
|
+
return {
|
|
2212
|
+
target: editingView.domConverter.mapViewToDom(getSelectedMediaViewWidget(editingView.document.selection)),
|
|
2213
|
+
positions: [
|
|
2214
|
+
defaultPositions.northArrowSouth,
|
|
2215
|
+
defaultPositions.northArrowSouthWest,
|
|
2216
|
+
defaultPositions.northArrowSouthEast,
|
|
2217
|
+
defaultPositions.southArrowNorth,
|
|
2218
|
+
defaultPositions.southArrowNorthWest,
|
|
2219
|
+
defaultPositions.southArrowNorthEast,
|
|
2220
|
+
defaultPositions.viewportStickyNorth
|
|
2221
|
+
]
|
|
2222
|
+
};
|
|
2223
|
+
}
|
|
2224
|
+
function getFormValidators(editor) {
|
|
2225
|
+
const t = editor.t;
|
|
2226
|
+
return [(form) => {
|
|
2227
|
+
if (form.rawSize.trim() === "") return t("The value must not be empty.");
|
|
2228
|
+
if (form.parsedSize === null) return t("The value should be a plain number.");
|
|
2229
|
+
}];
|
|
1984
2230
|
}
|
|
2231
|
+
|
|
1985
2232
|
/**
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
2233
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
2234
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2235
|
+
*/
|
|
2236
|
+
/**
|
|
2237
|
+
* @module media-embed/mediaembedresize
|
|
2238
|
+
*/
|
|
2239
|
+
/**
|
|
2240
|
+
* The media embed resize plugin.
|
|
2241
|
+
*
|
|
2242
|
+
* It adds a possibility to resize each media embed using handles, toolbar buttons,
|
|
2243
|
+
* or a balloon-hosted custom-width input.
|
|
2244
|
+
*/
|
|
2245
|
+
var MediaEmbedResize = class extends Plugin {
|
|
2246
|
+
/**
|
|
2247
|
+
* @inheritDoc
|
|
2248
|
+
*/
|
|
2249
|
+
static get requires() {
|
|
2250
|
+
return [
|
|
2251
|
+
MediaEmbedResizeEditing,
|
|
2252
|
+
MediaEmbedResizeHandles,
|
|
2253
|
+
MediaEmbedCustomResizeUI,
|
|
2254
|
+
MediaEmbedResizeButtons
|
|
2255
|
+
];
|
|
2256
|
+
}
|
|
2257
|
+
/**
|
|
2258
|
+
* @inheritDoc
|
|
2259
|
+
*/
|
|
2260
|
+
static get pluginName() {
|
|
2261
|
+
return "MediaEmbedResize";
|
|
2262
|
+
}
|
|
2263
|
+
/**
|
|
2264
|
+
* @inheritDoc
|
|
2265
|
+
*/
|
|
2266
|
+
static get isOfficialPlugin() {
|
|
2267
|
+
return true;
|
|
2268
|
+
}
|
|
2269
|
+
};
|
|
2270
|
+
|
|
2271
|
+
/**
|
|
2272
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
2273
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2274
|
+
*/
|
|
2275
|
+
/**
|
|
2276
|
+
* @module media-embed/mediaembedstyle/mediaembedstylecommand
|
|
2277
|
+
*/
|
|
2278
|
+
/**
|
|
2279
|
+
* The media embed style command. It is used to apply a style option (e.g. an alignment) to a
|
|
2280
|
+
* selected media embed.
|
|
2281
|
+
*
|
|
2282
|
+
* The set of accepted style values comes from the resolved
|
|
2283
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
|
|
2284
|
+
* options. Values not in that set are silently rejected by {@link #execute}.
|
|
2285
|
+
*/
|
|
2286
|
+
var MediaEmbedStyleCommand = class extends Command {
|
|
2287
|
+
/**
|
|
2288
|
+
* Resolved styles indexed by `name`. Used to look up the `isDefault` flag at execute time
|
|
2289
|
+
* (any default-marked style clears the attribute) and to validate that a requested style
|
|
2290
|
+
* is part of the resolved options list.
|
|
2291
|
+
*/
|
|
2292
|
+
_styles;
|
|
2293
|
+
/**
|
|
2294
|
+
* The `name` of the first style with `isDefault: true` in the resolved options, or `null`
|
|
2295
|
+
* when the integrator did not designate a default. Exposed via {@link #value} when the
|
|
2296
|
+
* selected media has no `mediaStyle` attribute, so the default-state UI button can light up.
|
|
2297
|
+
* Does not gate the "clear attribute" branch in {@link #execute} — that uses the per-style
|
|
2298
|
+
* `isDefault` flag so multi-default configs behave consistently with the downcast.
|
|
2299
|
+
*/
|
|
2300
|
+
_defaultStyleName;
|
|
2301
|
+
/**
|
|
2302
|
+
* Creates an instance of the media embed style command.
|
|
2303
|
+
*
|
|
2304
|
+
* @param editor The editor instance.
|
|
2305
|
+
* @param styles The resolved list of style options that this command will accept.
|
|
2306
|
+
*/
|
|
2307
|
+
constructor(editor, styles) {
|
|
2308
|
+
super(editor);
|
|
2309
|
+
this._styles = new Map(styles.map((style) => [style.name, style]));
|
|
2310
|
+
const defaultStyle = styles.find((style) => style.isDefault);
|
|
2311
|
+
this._defaultStyleName = defaultStyle ? defaultStyle.name : null;
|
|
2312
|
+
}
|
|
2313
|
+
/**
|
|
2314
|
+
* @inheritDoc
|
|
2315
|
+
*/
|
|
2316
|
+
refresh() {
|
|
2317
|
+
const element = getSelectedMediaModelWidget(this.editor.model.document.selection);
|
|
2318
|
+
this.isEnabled = !!element;
|
|
2319
|
+
if (!element) this.value = false;
|
|
2320
|
+
else if (element.hasAttribute("mediaStyle")) {
|
|
2321
|
+
const styleName = element.getAttribute("mediaStyle");
|
|
2322
|
+
this.value = this._styles.has(styleName) ? styleName : this._defaultStyleName ?? false;
|
|
2323
|
+
} else this.value = this._defaultStyleName ?? false;
|
|
2324
|
+
}
|
|
2325
|
+
/**
|
|
2326
|
+
* Executes the command and applies the chosen style to the currently selected media embed.
|
|
2327
|
+
*
|
|
2328
|
+
* ```ts
|
|
2329
|
+
* editor.execute( 'mediaStyle', { value: 'alignLeft' } );
|
|
2330
|
+
* editor.execute( 'mediaStyle', { value: 'alignCenter' } ); // removes the attribute — alignCenter is the built-in default
|
|
2331
|
+
* editor.execute( 'mediaStyle', { value: null } ); // removes the attribute
|
|
2332
|
+
* ```
|
|
2333
|
+
*
|
|
2334
|
+
* The default style is encoded on the model as the absence of the `mediaStyle` attribute.
|
|
2335
|
+
* Passing any `isDefault: true` style name (or `null`) therefore clears the attribute. Values
|
|
2336
|
+
* that are neither falsy, an `isDefault` style, nor present in the resolved options list are
|
|
2337
|
+
* silently rejected.
|
|
2338
|
+
*
|
|
2339
|
+
* @param options
|
|
2340
|
+
* @param options.value The name of the style to apply, or `null` to clear the alignment.
|
|
2341
|
+
* @fires execute
|
|
2342
|
+
*/
|
|
2343
|
+
execute(options) {
|
|
2344
|
+
const model = this.editor.model;
|
|
2345
|
+
const element = getSelectedMediaModelWidget(model.document.selection);
|
|
2346
|
+
const requestedStyle = options.value;
|
|
2347
|
+
if (!requestedStyle || this._styles.get(requestedStyle)?.isDefault) {
|
|
2348
|
+
model.change((writer) => {
|
|
2349
|
+
writer.removeAttribute("mediaStyle", element);
|
|
2350
|
+
});
|
|
2351
|
+
return;
|
|
2352
|
+
}
|
|
2353
|
+
if (!this._styles.has(requestedStyle)) return;
|
|
2354
|
+
model.change((writer) => {
|
|
2355
|
+
writer.setAttribute("mediaStyle", requestedStyle, element);
|
|
2356
|
+
});
|
|
2357
|
+
}
|
|
2358
|
+
};
|
|
2359
|
+
|
|
2360
|
+
/**
|
|
2361
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
2362
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2363
|
+
*/
|
|
2364
|
+
/**
|
|
2365
|
+
* @module media-embed/mediaembedstyle/mediaembedstyleediting
|
|
2366
|
+
*/
|
|
2367
|
+
/**
|
|
2368
|
+
* The media embed style engine plugin. It extends the schema with the `mediaStyle` attribute,
|
|
2369
|
+
* registers the {@link module:media-embed/mediaembedstyle/mediaembedstylecommand~MediaEmbedStyleCommand} command,
|
|
2370
|
+
* and adds the converters that apply alignment CSS classes to the figure.
|
|
2371
|
+
*/
|
|
2372
|
+
var MediaEmbedStyleEditing = class extends Plugin {
|
|
2373
|
+
/**
|
|
2374
|
+
* The resolved list of media style options. Built once from
|
|
2375
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
|
|
2376
|
+
* during {@link #init} and consumed by both the command and the UI plugin (single source of truth).
|
|
2377
|
+
*
|
|
2378
|
+
* @internal
|
|
2379
|
+
* @readonly
|
|
2380
|
+
*/
|
|
2381
|
+
normalizedStyles;
|
|
2382
|
+
/**
|
|
2383
|
+
* @inheritDoc
|
|
2384
|
+
*/
|
|
2385
|
+
static get requires() {
|
|
2386
|
+
return [MediaEmbedEditing];
|
|
2387
|
+
}
|
|
2388
|
+
/**
|
|
2389
|
+
* @inheritDoc
|
|
2390
|
+
*/
|
|
2391
|
+
static get pluginName() {
|
|
2392
|
+
return "MediaEmbedStyleEditing";
|
|
2393
|
+
}
|
|
2394
|
+
/**
|
|
2395
|
+
* @inheritDoc
|
|
2396
|
+
*/
|
|
2397
|
+
static get isOfficialPlugin() {
|
|
2398
|
+
return true;
|
|
2399
|
+
}
|
|
2400
|
+
/**
|
|
2401
|
+
* @inheritDoc
|
|
2402
|
+
*/
|
|
2403
|
+
init() {
|
|
2404
|
+
const editor = this.editor;
|
|
2405
|
+
const schema = editor.model.schema;
|
|
2406
|
+
editor.config.define("mediaEmbed.styles", { options: Object.keys(DEFAULT_OPTIONS) });
|
|
2407
|
+
this.normalizedStyles = normalizeStyles(editor.config.get("mediaEmbed.styles"));
|
|
2408
|
+
schema.extend("media", { allowAttributes: ["mediaStyle"] });
|
|
2409
|
+
schema.setAttributeProperties("mediaStyle", { isFormatting: true });
|
|
2410
|
+
editor.commands.add("mediaStyle", new MediaEmbedStyleCommand(editor, this.normalizedStyles));
|
|
2411
|
+
this._registerConverters();
|
|
2412
|
+
}
|
|
2413
|
+
/**
|
|
2414
|
+
* Registers the downcast and upcast converters for the `mediaStyle` attribute.
|
|
2415
|
+
*/
|
|
2416
|
+
_registerConverters() {
|
|
2417
|
+
const editor = this.editor;
|
|
2418
|
+
const styleClassMap = new Map(this.normalizedStyles.filter((style) => !style.isDefault && style.className).map((style) => [style.name, style.className]));
|
|
2419
|
+
editor.conversion.for("downcast").add((dispatcher) => dispatcher.on("attribute:mediaStyle:media", (evt, data, conversionApi) => {
|
|
2420
|
+
if (!conversionApi.consumable.consume(data.item, evt.name)) return;
|
|
2421
|
+
const figure = conversionApi.mapper.toViewElement(data.item);
|
|
2422
|
+
const viewWriter = conversionApi.writer;
|
|
2423
|
+
const oldClass = styleClassMap.get(data.attributeOldValue);
|
|
2424
|
+
const newClass = styleClassMap.get(data.attributeNewValue);
|
|
2425
|
+
if (oldClass) viewWriter.removeClass(oldClass, figure);
|
|
2426
|
+
if (newClass) viewWriter.addClass(newClass, figure);
|
|
2427
|
+
}));
|
|
2428
|
+
editor.conversion.for("upcast").add((dispatcher) => {
|
|
2429
|
+
dispatcher.on("element:figure", (_evt, data, conversionApi) => {
|
|
2430
|
+
if (!data.modelRange) return;
|
|
2431
|
+
const modelElement = first(data.modelRange.getItems());
|
|
2432
|
+
if (!modelElement || !modelElement.is("element", "media")) return;
|
|
2433
|
+
for (const [styleName, className] of styleClassMap) if (conversionApi.consumable.consume(data.viewItem, { classes: className })) conversionApi.writer.setAttribute("mediaStyle", styleName, modelElement);
|
|
2434
|
+
}, { priority: "low" });
|
|
2435
|
+
});
|
|
2436
|
+
}
|
|
2437
|
+
};
|
|
2438
|
+
|
|
2439
|
+
/**
|
|
2440
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
2441
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2442
|
+
*/
|
|
2443
|
+
/**
|
|
2444
|
+
* @module media-embed/mediaembedstyle/mediaembedstyleui
|
|
2445
|
+
*/
|
|
2446
|
+
/**
|
|
2447
|
+
* The media embed style UI plugin.
|
|
2448
|
+
*
|
|
2449
|
+
* It registers a button for every style in the resolved
|
|
2450
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
|
|
2451
|
+
* list, and the default split-button dropdowns (`mediaEmbed:wrapText`, `mediaEmbed:breakText`)
|
|
2452
|
+
* — filtered to the styles that survived configuration. The resulting components can be placed
|
|
2453
|
+
* in the {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar media embed toolbar}.
|
|
2454
|
+
*/
|
|
2455
|
+
var MediaEmbedStyleUI = class extends Plugin {
|
|
2456
|
+
/**
|
|
2457
|
+
* @inheritDoc
|
|
2458
|
+
*/
|
|
2459
|
+
static get requires() {
|
|
2460
|
+
return [MediaEmbedStyleEditing];
|
|
2461
|
+
}
|
|
2462
|
+
/**
|
|
2463
|
+
* @inheritDoc
|
|
2464
|
+
*/
|
|
2465
|
+
static get pluginName() {
|
|
2466
|
+
return "MediaEmbedStyleUI";
|
|
2467
|
+
}
|
|
2468
|
+
/**
|
|
2469
|
+
* @inheritDoc
|
|
2470
|
+
*/
|
|
2471
|
+
static get isOfficialPlugin() {
|
|
2472
|
+
return true;
|
|
2473
|
+
}
|
|
2474
|
+
/**
|
|
2475
|
+
* @inheritDoc
|
|
2476
|
+
*/
|
|
2477
|
+
init() {
|
|
2478
|
+
const titles = this._getLocalizedTitles();
|
|
2479
|
+
for (const button of this._getButtonDefinitions(titles)) this._createButton(button);
|
|
2480
|
+
for (const dropdown of this._getDropdownDefinitions(titles)) this._createDropdown(dropdown);
|
|
2481
|
+
}
|
|
2482
|
+
/**
|
|
2483
|
+
* Returns the alignment button definitions sourced from the resolved options list.
|
|
2484
|
+
*/
|
|
2485
|
+
_getButtonDefinitions(titles) {
|
|
2486
|
+
return this.editor.plugins.get(MediaEmbedStyleEditing).normalizedStyles.map((option) => ({
|
|
2487
|
+
name: option.name,
|
|
2488
|
+
label: titles[option.title] || option.title,
|
|
2489
|
+
icon: option.icon
|
|
2490
|
+
}));
|
|
2491
|
+
}
|
|
2492
|
+
/**
|
|
2493
|
+
* Returns the localized titles of the built-in styles and dropdowns.
|
|
2494
|
+
*/
|
|
2495
|
+
_getLocalizedTitles() {
|
|
2496
|
+
const t = this.editor.t;
|
|
2497
|
+
return {
|
|
2498
|
+
"Left aligned media": t("Left aligned media"),
|
|
2499
|
+
"Centered media": t("Centered media"),
|
|
2500
|
+
"Right aligned media": t("Right aligned media"),
|
|
2501
|
+
"Wrap text": t("Wrap text"),
|
|
2502
|
+
"Break text": t("Break text")
|
|
2503
|
+
};
|
|
2504
|
+
}
|
|
2505
|
+
/**
|
|
2506
|
+
* Returns the split-button dropdown definitions, filtered to the styles present in the
|
|
2507
|
+
* resolved options list. Combines the {@link module:media-embed/mediaembedstyle/constants~DEFAULT_DROPDOWN_DEFINITIONS
|
|
2508
|
+
* built-in dropdowns} with custom dropdowns declared inline in
|
|
2509
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar `config.mediaEmbed.toolbar`}.
|
|
2510
|
+
*
|
|
2511
|
+
* A dropdown with fewer than two items is skipped — a single-item dropdown carries no value
|
|
2512
|
+
* over the flat button. If the configured `defaultItem` was filtered out, the first surviving
|
|
2513
|
+
* item becomes the default.
|
|
2514
|
+
*
|
|
2515
|
+
* When a *custom* dropdown's items reference styles that are not in the resolved options list,
|
|
2516
|
+
* a console warning is emitted (the integrator's config was not fully honored). Built-in
|
|
2517
|
+
* dropdowns auto-skip silently — they are added by the plugin, not the integrator.
|
|
2518
|
+
*/
|
|
2519
|
+
_getDropdownDefinitions(titles) {
|
|
2520
|
+
const editing = this.editor.plugins.get(MediaEmbedStyleEditing);
|
|
2521
|
+
const availableComponentNames = new Set(editing.normalizedStyles.map(({ name }) => `mediaEmbed:${name}`));
|
|
2522
|
+
const dropdowns = [];
|
|
2523
|
+
const resolveDropdown = (definition, warnOnFilter) => {
|
|
2524
|
+
const items = definition.items.filter((itemName) => availableComponentNames.has(itemName));
|
|
2525
|
+
if (warnOnFilter && items.length !== definition.items.length) warnInvalidDropdown({ dropdown: definition });
|
|
2526
|
+
if (items.length < 2) return;
|
|
2527
|
+
const defaultItem = availableComponentNames.has(definition.defaultItem) ? definition.defaultItem : items[0];
|
|
2528
|
+
dropdowns.push({
|
|
2529
|
+
name: definition.name,
|
|
2530
|
+
title: titles[definition.title] || definition.title,
|
|
2531
|
+
items,
|
|
2532
|
+
defaultItem
|
|
2533
|
+
});
|
|
2534
|
+
};
|
|
2535
|
+
for (const definition of DEFAULT_DROPDOWN_DEFINITIONS) resolveDropdown(definition, false);
|
|
2536
|
+
for (const definition of this._collectCustomDropdowns()) resolveDropdown(definition, true);
|
|
2537
|
+
return dropdowns;
|
|
2538
|
+
}
|
|
2539
|
+
/**
|
|
2540
|
+
* Scans `config.mediaEmbed.toolbar` for entries shaped like a dropdown definition
|
|
2541
|
+
* (objects with both `items` and `defaultItem`) and returns the valid ones. `defaultItem`
|
|
2542
|
+
* is the discriminator between our split-button dropdowns and generic toolbar groupings
|
|
2543
|
+
* (which use `items` + `label` and have no `defaultItem`).
|
|
2544
|
+
*
|
|
2545
|
+
* Invalid entries (wrong name prefix, `defaultItem` missing from `items`) are warned and
|
|
2546
|
+
* dropped here. Items that reference filtered-out styles are filtered later by
|
|
2547
|
+
* {@link #_getDropdownDefinitions}, alongside the same logic that applies to built-in
|
|
2548
|
+
* dropdowns.
|
|
2549
|
+
*/
|
|
2550
|
+
_collectCustomDropdowns() {
|
|
2551
|
+
return (this.editor.config.get("mediaEmbed.toolbar") || []).filter((item) => isMediaStyleDropdown(item) && isValidCustomDropdown(item));
|
|
2552
|
+
}
|
|
2553
|
+
/**
|
|
2554
|
+
* Registers a single alignment toggle button in the component factory.
|
|
2555
|
+
*/
|
|
2556
|
+
_createButton(definition) {
|
|
2557
|
+
const editor = this.editor;
|
|
2558
|
+
const componentName = `mediaEmbed:${definition.name}`;
|
|
2559
|
+
editor.ui.componentFactory.add(componentName, (locale) => {
|
|
2560
|
+
const command = editor.commands.get("mediaStyle");
|
|
2561
|
+
const view = new ButtonView(locale);
|
|
2562
|
+
view.set({
|
|
2563
|
+
label: definition.label,
|
|
2564
|
+
icon: definition.icon,
|
|
2565
|
+
tooltip: true,
|
|
2566
|
+
isToggleable: true
|
|
2567
|
+
});
|
|
2568
|
+
view.bind("isEnabled").to(command, "isEnabled");
|
|
2569
|
+
view.bind("isOn").to(command, "value", (value) => value === definition.name);
|
|
2570
|
+
view.on("execute", () => {
|
|
2571
|
+
editor.execute("mediaStyle", { value: definition.name });
|
|
2572
|
+
editor.editing.view.focus();
|
|
2573
|
+
});
|
|
2574
|
+
return view;
|
|
2575
|
+
});
|
|
2576
|
+
}
|
|
2577
|
+
/**
|
|
2578
|
+
* Registers a split-button dropdown grouping a set of alignment buttons. The action button
|
|
2579
|
+
* reflects whichever child option is currently `isOn`, falling back to the dropdown's
|
|
2580
|
+
* `defaultItem` when nothing is active.
|
|
2581
|
+
*/
|
|
2582
|
+
_createDropdown(definition) {
|
|
2583
|
+
const editor = this.editor;
|
|
2584
|
+
const factory = editor.ui.componentFactory;
|
|
2585
|
+
factory.add(definition.name, (locale) => {
|
|
2586
|
+
const buttonViews = definition.items.map((itemName) => factory.create(itemName));
|
|
2587
|
+
const defaultButton = buttonViews[definition.items.indexOf(definition.defaultItem)];
|
|
2588
|
+
const activeOrDefault = (...areOn) => {
|
|
2589
|
+
const index = areOn.findIndex(Boolean);
|
|
2590
|
+
return index < 0 ? defaultButton : buttonViews[index];
|
|
2591
|
+
};
|
|
2592
|
+
const dropdownView = createDropdown(locale, SplitButtonView);
|
|
2593
|
+
const splitButtonView = dropdownView.buttonView;
|
|
2594
|
+
addToolbarToDropdown(dropdownView, buttonViews, { enableActiveItemFocusOnDropdownOpen: true });
|
|
2595
|
+
splitButtonView.set({
|
|
2596
|
+
label: getDropdownButtonTitle(definition.title, defaultButton.label),
|
|
2597
|
+
class: null,
|
|
2598
|
+
tooltip: true
|
|
2599
|
+
});
|
|
2600
|
+
splitButtonView.arrowView.unbind("label");
|
|
2601
|
+
splitButtonView.arrowView.set({ label: definition.title });
|
|
2602
|
+
splitButtonView.bind("icon").toMany(buttonViews, "isOn", (...areOn) => activeOrDefault(...areOn).icon);
|
|
2603
|
+
splitButtonView.bind("label").toMany(buttonViews, "isOn", (...areOn) => getDropdownButtonTitle(definition.title, activeOrDefault(...areOn).label));
|
|
2604
|
+
splitButtonView.bind("isOn").toMany(buttonViews, "isOn", (...areOn) => areOn.some(Boolean));
|
|
2605
|
+
splitButtonView.bind("class").toMany(buttonViews, "isOn", (...areOn) => areOn.some(Boolean) ? "ck-splitbutton_flatten" : void 0);
|
|
2606
|
+
this.listenTo(splitButtonView, "execute", () => {
|
|
2607
|
+
if (buttonViews.some(({ isOn }) => isOn)) dropdownView.isOpen = !dropdownView.isOpen;
|
|
2608
|
+
else defaultButton.fire("execute");
|
|
2609
|
+
});
|
|
2610
|
+
dropdownView.bind("isEnabled").toMany(buttonViews, "isEnabled", (...areEnabled) => areEnabled.some(Boolean));
|
|
2611
|
+
this.listenTo(dropdownView, "execute", () => {
|
|
2612
|
+
editor.editing.view.focus();
|
|
2613
|
+
});
|
|
2614
|
+
return dropdownView;
|
|
2615
|
+
});
|
|
2616
|
+
}
|
|
2617
|
+
};
|
|
2618
|
+
/**
|
|
2619
|
+
* Combines the dropdown title and the default action item label for the split-button label.
|
|
2620
|
+
*/
|
|
2621
|
+
function getDropdownButtonTitle(dropdownTitle, buttonTitle) {
|
|
2622
|
+
return `${dropdownTitle}: ${buttonTitle}`;
|
|
1989
2623
|
}
|
|
1990
2624
|
/**
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
});
|
|
2005
|
-
}
|
|
2006
|
-
return valid;
|
|
2625
|
+
* Validates a user-supplied dropdown definition. Emits a console warning under
|
|
2626
|
+
* `media-style-configuration-definition-invalid` and returns `false` when any of these rules is
|
|
2627
|
+
* broken: `name` must start with `mediaEmbed:`, `title` must be a non-empty string, `items` must
|
|
2628
|
+
* be non-empty and every entry must be a `mediaEmbed:`-prefixed string, and `defaultItem` must be
|
|
2629
|
+
* one of the `items`.
|
|
2630
|
+
*
|
|
2631
|
+
* Item-membership against the resolved styles is checked separately, downstream, alongside the
|
|
2632
|
+
* same logic that applies to built-in dropdowns.
|
|
2633
|
+
*/
|
|
2634
|
+
function isValidCustomDropdown(definition) {
|
|
2635
|
+
const valid = definition.name.startsWith("mediaEmbed:") && typeof definition.title === "string" && definition.title.length > 0 && definition.items.length > 0 && definition.items.every((name) => typeof name === "string" && name.startsWith("mediaEmbed:")) && definition.items.includes(definition.defaultItem);
|
|
2636
|
+
if (!valid) warnInvalidDropdown({ dropdown: definition });
|
|
2637
|
+
return valid;
|
|
2007
2638
|
}
|
|
2008
2639
|
/**
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2640
|
+
* Emits a console warning under `media-style-configuration-definition-invalid` for an invalid
|
|
2641
|
+
* or partially-honored dropdown definition. Called from {@link ~isValidCustomDropdown} for
|
|
2642
|
+
* structural problems and from {@link MediaEmbedStyleUI#_getDropdownDefinitions} when items
|
|
2643
|
+
* reference styles that are not in the resolved options list.
|
|
2644
|
+
*/
|
|
2645
|
+
function warnInvalidDropdown(info) {
|
|
2646
|
+
logWarning("media-style-configuration-definition-invalid", info);
|
|
2015
2647
|
}
|
|
2016
2648
|
|
|
2017
2649
|
/**
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2650
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
2651
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2652
|
+
*/
|
|
2653
|
+
/**
|
|
2654
|
+
* @module media-embed/mediaembedstyle
|
|
2655
|
+
*/
|
|
2656
|
+
/**
|
|
2657
|
+
* The media embed style plugin.
|
|
2658
|
+
*
|
|
2659
|
+
* This is a "glue" plugin which loads the following plugins:
|
|
2660
|
+
* * {@link module:media-embed/mediaembedstyle/mediaembedstyleediting~MediaEmbedStyleEditing},
|
|
2661
|
+
* * {@link module:media-embed/mediaembedstyle/mediaembedstyleui~MediaEmbedStyleUI}
|
|
2662
|
+
*
|
|
2663
|
+
* For a detailed overview, check the {@glink features/media-embed/media-embed-styles Media embed styles feature documentation}.
|
|
2664
|
+
*/
|
|
2665
|
+
var MediaEmbedStyle = class extends Plugin {
|
|
2666
|
+
/**
|
|
2667
|
+
* @inheritDoc
|
|
2668
|
+
*/
|
|
2669
|
+
static get requires() {
|
|
2670
|
+
return [MediaEmbedStyleEditing, MediaEmbedStyleUI];
|
|
2671
|
+
}
|
|
2672
|
+
/**
|
|
2673
|
+
* @inheritDoc
|
|
2674
|
+
*/
|
|
2675
|
+
static get pluginName() {
|
|
2676
|
+
return "MediaEmbedStyle";
|
|
2677
|
+
}
|
|
2678
|
+
/**
|
|
2679
|
+
* @inheritDoc
|
|
2680
|
+
*/
|
|
2681
|
+
static get isOfficialPlugin() {
|
|
2682
|
+
return true;
|
|
2683
|
+
}
|
|
2684
|
+
};
|
|
2685
|
+
|
|
2686
|
+
/**
|
|
2687
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
2688
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2689
|
+
*/
|
|
2045
2690
|
|
|
2046
|
-
export { AutoMediaEmbed, MediaEmbed, MediaEmbedCommand, MediaEmbedEditing, MediaEmbedResize, MediaEmbedResizeEditing, MediaEmbedResizeHandles, MediaEmbedStyle, MediaEmbedStyleCommand, MediaEmbedStyleEditing, MediaEmbedStyleUI, MediaEmbedToolbar, MediaEmbedUI, MediaRegistry, ResizeMediaEmbedCommand, MediaFormView as _MediaFormView, createMediaFigureElement as _createMediaFigureElement, getSelectedMediaModelWidget as _getSelectedMediaModelWidget, getSelectedMediaViewWidget as _getSelectedMediaViewWidget, insertMedia as _insertMedia, isMediaWidget as _isMediaWidget, modelToViewUrlAttributeConverter as _modelToViewUrlAttributeMediaConverter, toMediaWidget as _toMediaWidget };
|
|
2047
|
-
//# sourceMappingURL=index.js.map
|
|
2691
|
+
export { AutoMediaEmbed, MediaEmbed, MediaEmbedCommand, MediaEmbedCustomResizeUI, MediaEmbedEditing, MediaEmbedResize, MediaEmbedResizeButtons, MediaEmbedResizeEditing, MediaEmbedResizeHandles, MediaEmbedStyle, MediaEmbedStyleCommand, MediaEmbedStyleEditing, MediaEmbedStyleUI, MediaEmbedToolbar, MediaEmbedUI, MediaRegistry, ResizeMediaEmbedCommand, MediaFormView as _MediaFormView, createMediaFigureElement as _createMediaFigureElement, getSelectedMediaModelWidget as _getSelectedMediaModelWidget, getSelectedMediaViewWidget as _getSelectedMediaViewWidget, insertMedia as _insertMedia, isMediaWidget as _isMediaWidget, modelToViewUrlAttributeConverter as _modelToViewUrlAttributeMediaConverter, toMediaWidget as _toMediaWidget };
|
|
2692
|
+
//# sourceMappingURL=index.js.map
|