@ckeditor/ckeditor5-media-embed 48.2.0 → 48.3.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (183) hide show
  1. package/ckeditor5-metadata.json +1 -1
  2. package/dist/augmentation.d.ts +33 -31
  3. package/dist/automediaembed.d.ts +50 -50
  4. package/dist/converters.d.ts +37 -37
  5. package/dist/index-editor.css +26 -0
  6. package/dist/index.css +26 -0
  7. package/dist/index.css.map +1 -1
  8. package/dist/index.d.ts +29 -26
  9. package/dist/index.js +2601 -1956
  10. package/dist/index.js.map +1 -1
  11. package/dist/mediaembed.d.ts +33 -33
  12. package/dist/mediaembedcommand.d.ts +32 -32
  13. package/dist/mediaembedconfig.d.ts +564 -483
  14. package/dist/mediaembedediting.d.ts +30 -30
  15. package/dist/mediaembedresize/constants.d.ts +13 -13
  16. package/dist/mediaembedresize/mediaembedcustomresizeui.d.ts +64 -0
  17. package/dist/mediaembedresize/mediaembedresizebuttons.d.ts +54 -0
  18. package/dist/mediaembedresize/mediaembedresizeediting.d.ts +47 -43
  19. package/dist/mediaembedresize/mediaembedresizehandles.d.ts +38 -38
  20. package/dist/mediaembedresize/resizemediaembedcommand.d.ts +35 -35
  21. package/dist/mediaembedresize/ui/mediaembedcustomresizeformview.d.ts +118 -0
  22. package/dist/mediaembedresize/utils/getselectedmediaembededitornodes.d.ts +23 -0
  23. package/dist/mediaembedresize/utils/getselectedmediaembedpossibleresizerange.d.ts +25 -0
  24. package/dist/mediaembedresize/utils/getselectedmediaembedwidthinunits.d.ts +21 -0
  25. package/dist/mediaembedresize.d.ts +28 -25
  26. package/dist/mediaembedstyle/constants.d.ts +22 -22
  27. package/dist/mediaembedstyle/mediaembedstylecommand.d.ts +67 -67
  28. package/dist/mediaembedstyle/mediaembedstyleediting.d.ts +39 -39
  29. package/dist/mediaembedstyle/mediaembedstyleui.d.ts +76 -76
  30. package/dist/mediaembedstyle/utils.d.ts +18 -18
  31. package/dist/mediaembedstyle.d.ts +29 -29
  32. package/dist/mediaembedtoolbar.d.ts +28 -28
  33. package/dist/mediaembedui.d.ts +33 -33
  34. package/dist/mediaregistry.d.ts +59 -59
  35. package/dist/translations/af.js +1 -1
  36. package/dist/translations/af.umd.js +1 -1
  37. package/dist/translations/ar.js +1 -1
  38. package/dist/translations/ar.umd.js +1 -1
  39. package/dist/translations/ast.js +1 -1
  40. package/dist/translations/ast.umd.js +1 -1
  41. package/dist/translations/az.js +1 -1
  42. package/dist/translations/az.umd.js +1 -1
  43. package/dist/translations/be.js +1 -1
  44. package/dist/translations/be.umd.js +1 -1
  45. package/dist/translations/bg.js +1 -1
  46. package/dist/translations/bg.umd.js +1 -1
  47. package/dist/translations/bn.js +1 -1
  48. package/dist/translations/bn.umd.js +1 -1
  49. package/dist/translations/bs.js +1 -1
  50. package/dist/translations/bs.umd.js +1 -1
  51. package/dist/translations/ca.js +1 -1
  52. package/dist/translations/ca.umd.js +1 -1
  53. package/dist/translations/cs.js +1 -1
  54. package/dist/translations/cs.umd.js +1 -1
  55. package/dist/translations/da.js +1 -1
  56. package/dist/translations/da.umd.js +1 -1
  57. package/dist/translations/de-ch.js +1 -1
  58. package/dist/translations/de-ch.umd.js +1 -1
  59. package/dist/translations/de.js +1 -1
  60. package/dist/translations/de.umd.js +1 -1
  61. package/dist/translations/el.js +1 -1
  62. package/dist/translations/el.umd.js +1 -1
  63. package/dist/translations/en-au.js +1 -1
  64. package/dist/translations/en-au.umd.js +1 -1
  65. package/dist/translations/en-gb.js +1 -1
  66. package/dist/translations/en-gb.umd.js +1 -1
  67. package/dist/translations/en.js +1 -1
  68. package/dist/translations/en.umd.js +1 -1
  69. package/dist/translations/eo.js +1 -1
  70. package/dist/translations/eo.umd.js +1 -1
  71. package/dist/translations/es-co.js +1 -1
  72. package/dist/translations/es-co.umd.js +1 -1
  73. package/dist/translations/es.js +1 -1
  74. package/dist/translations/es.umd.js +1 -1
  75. package/dist/translations/et.js +1 -1
  76. package/dist/translations/et.umd.js +1 -1
  77. package/dist/translations/eu.js +1 -1
  78. package/dist/translations/eu.umd.js +1 -1
  79. package/dist/translations/fa.js +1 -1
  80. package/dist/translations/fa.umd.js +1 -1
  81. package/dist/translations/fi.js +1 -1
  82. package/dist/translations/fi.umd.js +1 -1
  83. package/dist/translations/fr.js +1 -1
  84. package/dist/translations/fr.umd.js +1 -1
  85. package/dist/translations/gl.js +1 -1
  86. package/dist/translations/gl.umd.js +1 -1
  87. package/dist/translations/gu.js +1 -1
  88. package/dist/translations/gu.umd.js +1 -1
  89. package/dist/translations/he.js +1 -1
  90. package/dist/translations/he.umd.js +1 -1
  91. package/dist/translations/hi.js +1 -1
  92. package/dist/translations/hi.umd.js +1 -1
  93. package/dist/translations/hr.js +1 -1
  94. package/dist/translations/hr.umd.js +1 -1
  95. package/dist/translations/hu.js +1 -1
  96. package/dist/translations/hu.umd.js +1 -1
  97. package/dist/translations/hy.js +1 -1
  98. package/dist/translations/hy.umd.js +1 -1
  99. package/dist/translations/id.js +1 -1
  100. package/dist/translations/id.umd.js +1 -1
  101. package/dist/translations/it.js +1 -1
  102. package/dist/translations/it.umd.js +1 -1
  103. package/dist/translations/ja.js +1 -1
  104. package/dist/translations/ja.umd.js +1 -1
  105. package/dist/translations/jv.js +1 -1
  106. package/dist/translations/jv.umd.js +1 -1
  107. package/dist/translations/kk.js +1 -1
  108. package/dist/translations/kk.umd.js +1 -1
  109. package/dist/translations/km.js +1 -1
  110. package/dist/translations/km.umd.js +1 -1
  111. package/dist/translations/kn.js +1 -1
  112. package/dist/translations/kn.umd.js +1 -1
  113. package/dist/translations/ko.js +1 -1
  114. package/dist/translations/ko.umd.js +1 -1
  115. package/dist/translations/ku.js +1 -1
  116. package/dist/translations/ku.umd.js +1 -1
  117. package/dist/translations/lt.js +1 -1
  118. package/dist/translations/lt.umd.js +1 -1
  119. package/dist/translations/lv.js +1 -1
  120. package/dist/translations/lv.umd.js +1 -1
  121. package/dist/translations/ms.js +1 -1
  122. package/dist/translations/ms.umd.js +1 -1
  123. package/dist/translations/nb.js +1 -1
  124. package/dist/translations/nb.umd.js +1 -1
  125. package/dist/translations/ne.js +1 -1
  126. package/dist/translations/ne.umd.js +1 -1
  127. package/dist/translations/nl.js +1 -1
  128. package/dist/translations/nl.umd.js +1 -1
  129. package/dist/translations/no.js +1 -1
  130. package/dist/translations/no.umd.js +1 -1
  131. package/dist/translations/oc.js +1 -1
  132. package/dist/translations/oc.umd.js +1 -1
  133. package/dist/translations/pl.js +1 -1
  134. package/dist/translations/pl.umd.js +1 -1
  135. package/dist/translations/pt-br.js +1 -1
  136. package/dist/translations/pt-br.umd.js +1 -1
  137. package/dist/translations/pt.js +1 -1
  138. package/dist/translations/pt.umd.js +1 -1
  139. package/dist/translations/ro.js +1 -1
  140. package/dist/translations/ro.umd.js +1 -1
  141. package/dist/translations/ru.js +1 -1
  142. package/dist/translations/ru.umd.js +1 -1
  143. package/dist/translations/si.js +1 -1
  144. package/dist/translations/si.umd.js +1 -1
  145. package/dist/translations/sk.js +1 -1
  146. package/dist/translations/sk.umd.js +1 -1
  147. package/dist/translations/sl.js +1 -1
  148. package/dist/translations/sl.umd.js +1 -1
  149. package/dist/translations/sq.js +1 -1
  150. package/dist/translations/sq.umd.js +1 -1
  151. package/dist/translations/sr-latn.js +1 -1
  152. package/dist/translations/sr-latn.umd.js +1 -1
  153. package/dist/translations/sr.js +1 -1
  154. package/dist/translations/sr.umd.js +1 -1
  155. package/dist/translations/sv.js +1 -1
  156. package/dist/translations/sv.umd.js +1 -1
  157. package/dist/translations/th.js +1 -1
  158. package/dist/translations/th.umd.js +1 -1
  159. package/dist/translations/ti.js +1 -1
  160. package/dist/translations/ti.umd.js +1 -1
  161. package/dist/translations/tk.js +1 -1
  162. package/dist/translations/tk.umd.js +1 -1
  163. package/dist/translations/tr.js +1 -1
  164. package/dist/translations/tr.umd.js +1 -1
  165. package/dist/translations/tt.js +1 -1
  166. package/dist/translations/tt.umd.js +1 -1
  167. package/dist/translations/ug.js +1 -1
  168. package/dist/translations/ug.umd.js +1 -1
  169. package/dist/translations/uk.js +1 -1
  170. package/dist/translations/uk.umd.js +1 -1
  171. package/dist/translations/ur.js +1 -1
  172. package/dist/translations/ur.umd.js +1 -1
  173. package/dist/translations/uz.js +1 -1
  174. package/dist/translations/uz.umd.js +1 -1
  175. package/dist/translations/vi.js +1 -1
  176. package/dist/translations/vi.umd.js +1 -1
  177. package/dist/translations/zh-cn.js +1 -1
  178. package/dist/translations/zh-cn.umd.js +1 -1
  179. package/dist/translations/zh.js +1 -1
  180. package/dist/translations/zh.umd.js +1 -1
  181. package/dist/ui/mediaformview.d.ts +83 -83
  182. package/dist/utils.d.ts +61 -61
  183. 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 '@ckeditor/ckeditor5-core/dist/index.js';
6
- import { isWidget, toWidget, findOptimalInsertionRange, Widget, WidgetToolbarRepository, WidgetResize } from '@ckeditor/ckeditor5-widget/dist/index.js';
7
- import { logWarning, toArray, first, global, FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils/dist/index.js';
8
- import { IconView, Template, View, submitHandler, LabeledFieldView, createLabeledInputText, Dialog, ButtonView, MenuBarMenuListItemButtonView, CssTransitionDisablerMixin, createDropdown, SplitButtonView, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/dist/index.js';
9
- import { IconMediaPlaceholder, IconMedia, IconObjectInlineRight, IconObjectRight, IconObjectCenter, IconObjectLeft, IconObjectInlineLeft } from '@ckeditor/ckeditor5-icons/dist/index.js';
10
- import { ModelLivePosition, ModelLiveRange } from '@ckeditor/ckeditor5-engine/dist/index.js';
11
- import { Clipboard } from '@ckeditor/ckeditor5-clipboard/dist/index.js';
12
- import { Delete } from '@ckeditor/ckeditor5-typing/dist/index.js';
13
- import { Undo } from '@ckeditor/ckeditor5-undo/dist/index.js';
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
- * @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
- * @module media-embed/converters
20
- */ /**
21
- * Returns a function that converts the model "url" attribute to the view representation.
22
- *
23
- * Depending on the configuration, the view representation can be "semantic" (for the data pipeline):
24
- *
25
- * ```html
26
- * <figure class="media">
27
- * <oembed url="foo"></oembed>
28
- * </figure>
29
- * ```
30
- *
31
- * or "non-semantic" (for the editing view pipeline):
32
- *
33
- * ```html
34
- * <figure class="media">
35
- * <div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
36
- * </figure>
37
- * ```
38
- *
39
- * **Note:** Changing the model "url" attribute replaces the entire content of the
40
- * `<figure>` in the view.
41
- *
42
- * @param registry The registry providing
43
- * the media and their content.
44
- * @param options options object with following properties:
45
- * - elementName When set, overrides the default element name for semantic media embeds.
46
- * - renderMediaPreview When `true`, the converter will create the view in the non-semantic form.
47
- * - renderForEditingView When `true`, the converter will create a view specific for the
48
- * editing pipeline (e.g. including CSS classes, content placeholders).
49
- *
50
- * @internal
51
- */ function modelToViewUrlAttributeConverter(registry, options) {
52
- const converter = (evt, data, conversionApi)=>{
53
- if (!conversionApi.consumable.consume(data.item, evt.name)) {
54
- return;
55
- }
56
- const url = data.attributeNewValue;
57
- const viewWriter = conversionApi.writer;
58
- const figure = conversionApi.mapper.toViewElement(data.item);
59
- const mediaContentElement = [
60
- ...figure.getChildren()
61
- ].find((child)=>child.getCustomProperty('media-content'));
62
- // TODO: removing the wrapper and creating it from scratch is a hack. We can do better than that.
63
- viewWriter.remove(mediaContentElement);
64
- const mediaViewElement = registry.getMediaViewElement(viewWriter, url, options);
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
- * Converts a given {@link module:engine/view/element~ViewElement} to a media embed widget:
74
- * * Adds a {@link module:engine/view/element~ViewElement#_setCustomProperty custom property}
75
- * allowing to recognize the media widget element.
76
- * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
77
- *
78
- * @param writer An instance of the view writer.
79
- * @param label The element's label.
80
- * @internal
81
- */ function toMediaWidget(viewElement, writer, label) {
82
- writer.setCustomProperty('media', true, viewElement);
83
- return toWidget(viewElement, writer, {
84
- label
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
- * Returns a media widget editing view element if one is selected.
89
- *
90
- * @internal
91
- */ function getSelectedMediaViewWidget(selection) {
92
- const viewElement = selection.getSelectedElement();
93
- if (viewElement && isMediaWidget(viewElement)) {
94
- return viewElement;
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
- * Checks if a given view element is a media widget.
100
- *
101
- * @internal
102
- */ function isMediaWidget(viewElement) {
103
- return !!viewElement.getCustomProperty('media') && isWidget(viewElement);
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
- * Creates a view element representing the media. Either a "semantic" one for the data pipeline:
107
- *
108
- * ```html
109
- * <figure class="media">
110
- * <oembed url="foo"></oembed>
111
- * </figure>
112
- * ```
113
- *
114
- * or a "non-semantic" (for the editing view pipeline):
115
- *
116
- * ```html
117
- * <figure class="media">
118
- * <div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
119
- * </figure>
120
- * ```
121
- *
122
- * @internal
123
- */ function createMediaFigureElement(writer, registry, url, options) {
124
- return writer.createContainerElement('figure', {
125
- class: 'media'
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
- * Returns a selected media element in the model, if any.
133
- *
134
- * @internal
135
- */ function getSelectedMediaModelWidget(selection) {
136
- const selectedElement = selection.getSelectedElement();
137
- if (selectedElement && selectedElement.is('element', 'media')) {
138
- return selectedElement;
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
- * Creates a media element and inserts it into the model.
144
- *
145
- * **Note**: This method will use {@link module:engine/model/model~Model#insertContent `model.insertContent()`} logic of inserting content
146
- * if no `insertPosition` is passed.
147
- *
148
- * @param url An URL of an embeddable media.
149
- * @param findOptimalPosition If true it will try to find optimal position to insert media without breaking content
150
- * in which a selection is.
151
- * @internal
152
- */ function insertMedia(model, url, selectable, findOptimalPosition) {
153
- model.change((writer)=>{
154
- const mediaElement = writer.createElement('media', {
155
- url
156
- });
157
- model.insertObject(mediaElement, selectable, null, {
158
- setSelection: 'on',
159
- findOptimalPosition: findOptimalPosition ? 'auto' : undefined
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
- * The insert media command.
166
- *
167
- * The command is registered by the {@link module:media-embed/mediaembedediting~MediaEmbedEditing} as `'mediaEmbed'`.
168
- *
169
- * To insert media at the current selection, execute the command and specify the URL:
170
- *
171
- * ```ts
172
- * editor.execute( 'mediaEmbed', 'http://url.to.the/media' );
173
- * ```
174
- */ class MediaEmbedCommand extends Command {
175
- /**
176
- * @inheritDoc
177
- */ refresh() {
178
- const model = this.editor.model;
179
- const selection = model.document.selection;
180
- const selectedMedia = getSelectedMediaModelWidget(selection);
181
- this.value = selectedMedia ? selectedMedia.getAttribute('url') : undefined;
182
- this.isEnabled = isMediaSelected(selection) || isAllowedInParent(selection, model);
183
- }
184
- /**
185
- * Executes the command, which either:
186
- *
187
- * * updates the URL of the selected media,
188
- * * inserts the new media into the editor and puts the selection around it.
189
- *
190
- * @fires execute
191
- * @param url The URL of the media.
192
- */ execute(url) {
193
- const model = this.editor.model;
194
- const selection = model.document.selection;
195
- const selectedMedia = getSelectedMediaModelWidget(selection);
196
- if (selectedMedia) {
197
- model.change((writer)=>{
198
- writer.setAttribute('url', url, selectedMedia);
199
- });
200
- } else {
201
- insertMedia(model, url, selection, true);
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
- * Checks if the media embed is allowed in the parent.
207
- */ function isAllowedInParent(selection, model) {
208
- const insertionRange = findOptimalInsertionRange(selection, model);
209
- let parent = insertionRange.start.parent;
210
- // The model.insertContent() will remove empty parent (unless it is a $root or a limit).
211
- if (parent.isEmpty && !model.schema.isLimit(parent)) {
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
- * Checks if the media object is selected.
218
- */ function isMediaSelected(selection) {
219
- const element = selection.getSelectedElement();
220
- return !!element && element.name === 'media';
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
- * Represents media defined by the provider configuration.
334
- *
335
- * It can be rendered to the {@link module:engine/view/element~ViewElement view element} and used in the editing or data pipeline.
336
- */ class Media {
337
- /**
338
- * The URL this Media instance represents.
339
- */ url;
340
- /**
341
- * Shorthand for {@link module:utils/locale~Locale#t}.
342
- *
343
- * @see module:utils/locale~Locale#t
344
- */ _locale;
345
- /**
346
- * The output of the `RegExp.match` which validated the {@link #url} of this media.
347
- */ _match;
348
- /**
349
- * The function returning the HTML string preview of this media.
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
- */ getViewElement(writer, options) {
362
- const attributes = {};
363
- let viewElement;
364
- if (options.renderForEditingView || options.renderMediaPreview && this.url && this._previewRenderer) {
365
- if (this.url) {
366
- attributes['data-oembed-url'] = this.url;
367
- }
368
- if (options.renderForEditingView) {
369
- attributes.class = 'ck-media__wrapper';
370
- }
371
- const mediaHtml = this._getPreviewHtml(options);
372
- viewElement = writer.createRawElement('div', attributes, (domElement, domConverter)=>{
373
- domConverter.setContentOf(domElement, mediaHtml);
374
- });
375
- } else {
376
- if (this.url) {
377
- attributes.url = this.url;
378
- }
379
- viewElement = writer.createEmptyElement(options.elementName, attributes);
380
- }
381
- writer.setCustomProperty('media-content', true, viewElement);
382
- return viewElement;
383
- }
384
- /**
385
- * Returns the HTML string of the media content preview.
386
- */ _getPreviewHtml(options) {
387
- if (this._previewRenderer) {
388
- return this._previewRenderer(this._match);
389
- } else {
390
- // The placeholder only makes sense for editing view and media which have URLs.
391
- // Placeholder is never displayed in data and URL-less media have no content.
392
- if (this.url && options.renderForEditingView) {
393
- return this._getPlaceholderHtml();
394
- }
395
- return '';
396
- }
397
- }
398
- /**
399
- * Returns the placeholder HTML when the media has no content preview.
400
- */ _getPlaceholderHtml() {
401
- const icon = new IconView();
402
- const t = this._locale.t;
403
- icon.content = IconMediaPlaceholder;
404
- icon.viewBox = mediaPlaceholderIconViewBox;
405
- const placeholder = new Template({
406
- tag: 'div',
407
- attributes: {
408
- class: 'ck ck-reset_all ck-media__placeholder'
409
- },
410
- children: [
411
- {
412
- tag: 'div',
413
- attributes: {
414
- class: 'ck-media__placeholder__icon'
415
- },
416
- children: [
417
- icon
418
- ]
419
- },
420
- {
421
- tag: 'a',
422
- attributes: {
423
- class: 'ck-media__placeholder__url',
424
- target: '_blank',
425
- rel: 'noopener noreferrer',
426
- href: this.url,
427
- 'data-cke-tooltip-text': t('Open media in new tab')
428
- },
429
- children: [
430
- {
431
- tag: 'span',
432
- attributes: {
433
- class: 'ck-media__placeholder__url__text'
434
- },
435
- children: [
436
- this.url
437
- ]
438
- }
439
- ]
440
- }
441
- ]
442
- }).render();
443
- return placeholder.outerHTML;
444
- }
445
- /**
446
- * Returns the full URL to the specified media.
447
- *
448
- * @param url The URL of the media.
449
- */ _getValidUrl(url) {
450
- if (!url) {
451
- return null;
452
- }
453
- if (url.match(/^https?/)) {
454
- return url;
455
- }
456
- return 'https://' + url;
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
- * The media embed editing feature.
462
- */ class MediaEmbedEditing extends Plugin {
463
- /**
464
- * @inheritDoc
465
- */ static get pluginName() {
466
- return 'MediaEmbedEditing';
467
- }
468
- /**
469
- * @inheritDoc
470
- */ static get isOfficialPlugin() {
471
- return true;
472
- }
473
- /**
474
- * The media registry managing the media providers in the editor.
475
- */ registry;
476
- /**
477
- * @inheritDoc
478
- */ constructor(editor){
479
- super(editor);
480
- editor.config.define('mediaEmbed', {
481
- elementName: 'oembed',
482
- providers: [
483
- {
484
- name: 'dailymotion',
485
- url: [
486
- /^dailymotion\.com\/video\/(\w+)/,
487
- /^dai.ly\/(\w+)/
488
- ],
489
- html: (match)=>{
490
- const id = match[1];
491
- return '<div>' + `<iframe src="https://www.dailymotion.com/embed/video/${id}" ` + 'width="1280" height="720" ' + 'style="width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; display: block;" ' + 'frameborder="0" allowfullscreen allow="autoplay">' + '</iframe>' + '</div>';
492
- }
493
- },
494
- {
495
- name: 'spotify',
496
- url: [
497
- /^open\.spotify\.com\/(artist\/\w+)/,
498
- /^open\.spotify\.com\/(album\/\w+)/,
499
- /^open\.spotify\.com\/(track\/\w+)/
500
- ],
501
- html: (match)=>{
502
- const id = match[1];
503
- const isTrack = id.startsWith('track/');
504
- const iframeStyle = isTrack ? 'width: 100%; height: 80px; border: 0; display: block;' : 'width: 100%; height: auto; aspect-ratio: 100 / 126; border: 0; display: block;';
505
- return '<div>' + `<iframe src="https://open.spotify.com/embed/${id}" ` + `width="300" height="${isTrack ? '80' : '378'}" ` + `style="${iframeStyle}" ` + 'frameborder="0" allowtransparency="true" allow="encrypted-media">' + '</iframe>' + '</div>';
506
- }
507
- },
508
- {
509
- name: 'youtube',
510
- url: [
511
- /^(?:m\.)?youtube\.com\/watch\?v=([\w-]+)(?:&t=(\d+))?/,
512
- /^(?:m\.)?youtube\.com\/shorts\/([\w-]+)(?:\?t=(\d+))?/,
513
- /^(?:m\.)?youtube\.com\/v\/([\w-]+)(?:\?t=(\d+))?/,
514
- /^youtube\.com\/embed\/([\w-]+)(?:\?start=(\d+))?/,
515
- /^youtu\.be\/([\w-]+)(?:\?t=(\d+))?/
516
- ],
517
- html: (match)=>{
518
- const id = match[1];
519
- const time = match[2];
520
- 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>';
521
- }
522
- },
523
- {
524
- name: 'vimeo',
525
- url: [
526
- /^vimeo\.com\/(\d+)/,
527
- /^vimeo\.com\/[^/]+\/[^/]+\/video\/(\d+)/,
528
- /^vimeo\.com\/album\/[^/]+\/video\/(\d+)/,
529
- /^vimeo\.com\/channels\/[^/]+\/(\d+)/,
530
- /^vimeo\.com\/groups\/[^/]+\/videos\/(\d+)/,
531
- /^vimeo\.com\/ondemand\/[^/]+\/(\d+)/,
532
- /^player\.vimeo\.com\/video\/(\d+)/
533
- ],
534
- html: (match)=>{
535
- const id = match[1];
536
- return '<div>' + `<iframe src="https://player.vimeo.com/video/${id}" ` + 'width="1280" height="720" ' + 'style="width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; display: block;" ' + 'frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>' + '</iframe>' + '</div>';
537
- }
538
- },
539
- {
540
- name: 'instagram',
541
- url: [
542
- /^instagram\.com\/p\/(\w+)/,
543
- /^instagram\.com\/reel\/(\w+)/
544
- ]
545
- },
546
- {
547
- name: 'twitter',
548
- url: [
549
- /^twitter\.com/,
550
- /^x\.com/
551
- ]
552
- },
553
- {
554
- name: 'googleMaps',
555
- url: [
556
- /^google\.com\/maps/,
557
- /^goo\.gl\/maps/,
558
- /^maps\.google\.com/,
559
- /^maps\.app\.goo\.gl/
560
- ]
561
- },
562
- {
563
- name: 'flickr',
564
- url: /^flickr\.com/
565
- },
566
- {
567
- name: 'facebook',
568
- url: /^facebook\.com/
569
- }
570
- ]
571
- });
572
- this.registry = new MediaRegistry(editor.locale, editor.config.get('mediaEmbed'));
573
- }
574
- /**
575
- * @inheritDoc
576
- */ init() {
577
- const editor = this.editor;
578
- const schema = editor.model.schema;
579
- const t = editor.t;
580
- const conversion = editor.conversion;
581
- const renderMediaPreview = editor.config.get('mediaEmbed.previewsInData');
582
- const elementName = editor.config.get('mediaEmbed.elementName');
583
- const registry = this.registry;
584
- editor.commands.add('mediaEmbed', new MediaEmbedCommand(editor));
585
- // Configure the schema.
586
- schema.register('media', {
587
- inheritAllFrom: '$blockObject',
588
- allowAttributes: [
589
- 'url'
590
- ]
591
- });
592
- // Model -> Data
593
- conversion.for('dataDowncast').elementToStructure({
594
- model: 'media',
595
- view: (modelElement, { writer })=>{
596
- const url = modelElement.getAttribute('url');
597
- return createMediaFigureElement(writer, registry, url, {
598
- elementName,
599
- renderMediaPreview: !!url && renderMediaPreview
600
- });
601
- }
602
- });
603
- // Model -> Data (url -> data-oembed-url)
604
- conversion.for('dataDowncast').add(modelToViewUrlAttributeConverter(registry, {
605
- elementName,
606
- renderMediaPreview
607
- }));
608
- // Model -> View (element)
609
- conversion.for('editingDowncast').elementToStructure({
610
- model: 'media',
611
- view: (modelElement, { writer })=>{
612
- const url = modelElement.getAttribute('url');
613
- const figure = createMediaFigureElement(writer, registry, url, {
614
- elementName,
615
- renderForEditingView: true
616
- });
617
- return toMediaWidget(figure, writer, t('media widget'));
618
- }
619
- });
620
- // Model -> View (url -> data-oembed-url)
621
- conversion.for('editingDowncast').add(modelToViewUrlAttributeConverter(registry, {
622
- elementName,
623
- renderForEditingView: true
624
- }));
625
- // View -> Model (data-oembed-url -> url)
626
- conversion.for('upcast')// Upcast semantic media.
627
- .elementToElement({
628
- view: (element)=>[
629
- 'oembed',
630
- elementName
631
- ].includes(element.name) && element.getAttribute('url') ? {
632
- name: true
633
- } : null,
634
- model: (viewMedia, { writer })=>{
635
- const url = viewMedia.getAttribute('url');
636
- if (registry.hasMedia(url)) {
637
- return writer.createElement('media', {
638
- url
639
- });
640
- }
641
- return null;
642
- }
643
- })// Upcast non-semantic media.
644
- .elementToElement({
645
- view: {
646
- name: 'div',
647
- attributes: {
648
- 'data-oembed-url': true
649
- }
650
- },
651
- model: (viewMedia, { writer })=>{
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
- * The auto-media embed plugin. It recognizes media links in the pasted content and embeds
689
- * them shortly after they are injected into the document.
690
- */ class AutoMediaEmbed extends Plugin {
691
- /**
692
- * @inheritDoc
693
- */ static get requires() {
694
- return [
695
- Clipboard,
696
- Delete,
697
- Undo
698
- ];
699
- }
700
- /**
701
- * @inheritDoc
702
- */ static get pluginName() {
703
- return 'AutoMediaEmbed';
704
- }
705
- /**
706
- * @inheritDoc
707
- */ static get isOfficialPlugin() {
708
- return true;
709
- }
710
- /**
711
- * The paste–to–embed `setTimeout` ID. Stored as a property to allow
712
- * cleaning of the timeout.
713
- */ _timeoutId;
714
- /**
715
- * The position where the `<media>` element will be inserted after the timeout,
716
- * determined each time the new content is pasted into the document.
717
- */ _positionToInsert;
718
- /**
719
- * @inheritDoc
720
- */ constructor(editor){
721
- super(editor);
722
- this._timeoutId = null;
723
- this._positionToInsert = null;
724
- }
725
- /**
726
- * @inheritDoc
727
- */ init() {
728
- const editor = this.editor;
729
- const modelDocument = editor.model.document;
730
- // We need to listen on `Clipboard#inputTransformation` because we need to save positions of selection.
731
- // After pasting, the content between those positions will be checked for a URL that could be transformed
732
- // into media.
733
- const clipboardPipeline = editor.plugins.get('ClipboardPipeline');
734
- this.listenTo(clipboardPipeline, 'inputTransformation', ()=>{
735
- const firstRange = modelDocument.selection.getFirstRange();
736
- const leftLivePosition = ModelLivePosition.fromPosition(firstRange.start);
737
- leftLivePosition.stickiness = 'toPrevious';
738
- const rightLivePosition = ModelLivePosition.fromPosition(firstRange.end);
739
- rightLivePosition.stickiness = 'toNext';
740
- modelDocument.once('change:data', ()=>{
741
- this._embedMediaBetweenPositions(leftLivePosition, rightLivePosition);
742
- leftLivePosition.detach();
743
- rightLivePosition.detach();
744
- }, {
745
- priority: 'high'
746
- });
747
- });
748
- const undoCommand = editor.commands.get('undo');
749
- undoCommand.on('execute', ()=>{
750
- if (this._timeoutId) {
751
- global.window.clearTimeout(this._timeoutId);
752
- this._positionToInsert.detach();
753
- this._timeoutId = null;
754
- this._positionToInsert = null;
755
- }
756
- }, {
757
- priority: 'high'
758
- });
759
- }
760
- /**
761
- * Analyzes the part of the document between provided positions in search for a URL representing media.
762
- * When the URL is found, it is automatically converted into media.
763
- *
764
- * @param leftPosition Left position of the selection.
765
- * @param rightPosition Right position of the selection.
766
- */ _embedMediaBetweenPositions(leftPosition, rightPosition) {
767
- const editor = this.editor;
768
- const mediaRegistry = editor.plugins.get(MediaEmbedEditing).registry;
769
- // TODO: Use marker instead of ModelLiveRange & LivePositions.
770
- const urlRange = new ModelLiveRange(leftPosition, rightPosition);
771
- const walker = urlRange.getWalker({
772
- ignoreElementEnd: true
773
- });
774
- let url = '';
775
- for (const node of walker){
776
- if (node.item.is('$textProxy')) {
777
- url += node.item.data;
778
- }
779
- }
780
- url = url.trim();
781
- // If the URL does not match to universal URL regexp, let's skip that.
782
- if (!url.match(URL_REGEXP)) {
783
- urlRange.detach();
784
- return;
785
- }
786
- // If the URL represents a media, let's use it.
787
- if (!mediaRegistry.hasMedia(url)) {
788
- urlRange.detach();
789
- return;
790
- }
791
- const mediaEmbedCommand = editor.commands.get('mediaEmbed');
792
- // Do not anything if media element cannot be inserted at the current position.
793
- // See https://github.com/ckeditor/ckeditor5-media-embed/issues/47.
794
- if (!mediaEmbedCommand.isEnabled) {
795
- urlRange.detach();
796
- return;
797
- }
798
- // Position won't be available in the `setTimeout` function so let's clone it.
799
- this._positionToInsert = ModelLivePosition.fromPosition(leftPosition);
800
- // This action mustn't be executed if undo was called between pasting and auto-embedding.
801
- this._timeoutId = global.window.setTimeout(()=>{
802
- editor.model.change((writer)=>{
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
- * The media form view controller class.
823
- *
824
- * See {@link module:media-embed/ui/mediaformview~MediaFormView}.
825
- */ class MediaFormView extends View {
826
- /**
827
- * Tracks information about the DOM focus in the form.
828
- */ focusTracker;
829
- /**
830
- * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
831
- */ keystrokes;
832
- /**
833
- * The URL input view.
834
- */ urlInputView;
835
- /**
836
- * An array of form validators used by {@link #isValid}.
837
- */ _validators;
838
- /**
839
- * The default info text for the {@link #urlInputView}.
840
- */ _urlInputViewInfoDefault;
841
- /**
842
- * The info text with an additional tip for the {@link #urlInputView},
843
- * displayed when the input has some value.
844
- */ _urlInputViewInfoTip;
845
- /**
846
- * @param validators Form validators used by {@link #isValid}.
847
- * @param locale The localization services instance.
848
- */ constructor(validators, locale){
849
- super(locale);
850
- this.focusTracker = new FocusTracker();
851
- this.keystrokes = new KeystrokeHandler();
852
- this.set('mediaURLInputValue', '');
853
- this.urlInputView = this._createUrlInput();
854
- this._validators = validators;
855
- this.setTemplate({
856
- tag: 'form',
857
- attributes: {
858
- class: [
859
- 'ck',
860
- 'ck-media-form',
861
- 'ck-responsive-form'
862
- ],
863
- tabindex: '-1'
864
- },
865
- children: [
866
- this.urlInputView
867
- ]
868
- });
869
- }
870
- /**
871
- * @inheritDoc
872
- */ render() {
873
- super.render();
874
- submitHandler({
875
- view: this
876
- });
877
- // Register the view in the focus tracker.
878
- this.focusTracker.add(this.urlInputView.element);
879
- // Start listening for the keystrokes coming from #element.
880
- this.keystrokes.listenTo(this.element);
881
- }
882
- /**
883
- * @inheritDoc
884
- */ destroy() {
885
- super.destroy();
886
- this.focusTracker.destroy();
887
- this.keystrokes.destroy();
888
- }
889
- /**
890
- * Focuses the {@link #urlInputView}.
891
- */ focus() {
892
- this.urlInputView.focus();
893
- }
894
- /**
895
- * The native DOM `value` of the {@link #urlInputView} element.
896
- *
897
- * **Note**: Do not confuse it with the {@link module:ui/inputtext/inputtextview~InputTextView#value}
898
- * which works one way only and may not represent the actual state of the component in the DOM.
899
- */ get url() {
900
- return this.urlInputView.fieldView.element.value.trim();
901
- }
902
- set url(url) {
903
- this.urlInputView.fieldView.value = url.trim();
904
- }
905
- /**
906
- * Validates the form and returns `false` when some fields are invalid.
907
- */ isValid() {
908
- this.resetFormStatus();
909
- for (const validator of this._validators){
910
- const errorText = validator(this);
911
- // One error per field is enough.
912
- if (errorText) {
913
- // Apply updated error.
914
- this.urlInputView.errorText = errorText;
915
- return false;
916
- }
917
- }
918
- return true;
919
- }
920
- /**
921
- * Cleans up the supplementary error and information text of the {@link #urlInputView}
922
- * bringing them back to the state when the form has been displayed for the first time.
923
- *
924
- * See {@link #isValid}.
925
- */ resetFormStatus() {
926
- this.urlInputView.errorText = null;
927
- this.urlInputView.infoText = this._urlInputViewInfoDefault;
928
- }
929
- /**
930
- * Creates a labeled input view.
931
- *
932
- * @returns Labeled input view instance.
933
- */ _createUrlInput() {
934
- const t = this.locale.t;
935
- const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
936
- const inputField = labeledInput.fieldView;
937
- this._urlInputViewInfoDefault = t('Paste the media URL in the input.');
938
- this._urlInputViewInfoTip = t('Tip: Paste the URL into the content to embed faster.');
939
- labeledInput.label = t('Media URL');
940
- labeledInput.infoText = this._urlInputViewInfoDefault;
941
- inputField.inputMode = 'url';
942
- inputField.on('input', ()=>{
943
- // Display the tip text only when there is some value. Otherwise fall back to the default info text.
944
- labeledInput.infoText = inputField.element.value ? this._urlInputViewInfoTip : this._urlInputViewInfoDefault;
945
- this.mediaURLInputValue = inputField.element.value.trim();
946
- });
947
- return labeledInput;
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
- * The media embed UI plugin.
953
- */ class MediaEmbedUI extends Plugin {
954
- /**
955
- * @inheritDoc
956
- */ static get requires() {
957
- return [
958
- MediaEmbedEditing,
959
- Dialog
960
- ];
961
- }
962
- /**
963
- * @inheritDoc
964
- */ static get pluginName() {
965
- return 'MediaEmbedUI';
966
- }
967
- /**
968
- * @inheritDoc
969
- */ static get isOfficialPlugin() {
970
- return true;
971
- }
972
- _formView;
973
- /**
974
- * @inheritDoc
975
- */ init() {
976
- const editor = this.editor;
977
- editor.ui.componentFactory.add('mediaEmbed', ()=>{
978
- const t = this.editor.locale.t;
979
- const button = this._createDialogButton(ButtonView);
980
- button.tooltip = true;
981
- button.label = t('Insert media');
982
- return button;
983
- });
984
- editor.ui.componentFactory.add('menuBar:mediaEmbed', ()=>{
985
- const t = this.editor.locale.t;
986
- const button = this._createDialogButton(MenuBarMenuListItemButtonView);
987
- button.label = t('Media');
988
- return button;
989
- });
990
- }
991
- /**
992
- * Creates a button for menu bar that will show media embed dialog.
993
- */ _createDialogButton(ButtonClass) {
994
- const editor = this.editor;
995
- const buttonView = new ButtonClass(editor.locale);
996
- const command = editor.commands.get('mediaEmbed');
997
- const dialogPlugin = this.editor.plugins.get('Dialog');
998
- buttonView.icon = IconMedia;
999
- buttonView.bind('isEnabled').to(command, 'isEnabled');
1000
- buttonView.on('execute', ()=>{
1001
- if (dialogPlugin.id === 'mediaEmbed') {
1002
- dialogPlugin.hide();
1003
- } else {
1004
- this._showDialog();
1005
- }
1006
- });
1007
- return buttonView;
1008
- }
1009
- _showDialog() {
1010
- const editor = this.editor;
1011
- const dialog = editor.plugins.get('Dialog');
1012
- const command = editor.commands.get('mediaEmbed');
1013
- const t = editor.locale.t;
1014
- const isMediaSelected = command.value !== undefined;
1015
- if (!this._formView) {
1016
- const registry = editor.plugins.get(MediaEmbedEditing).registry;
1017
- this._formView = new (CssTransitionDisablerMixin(MediaFormView))(getFormValidators(editor.t, registry), editor.locale);
1018
- this._formView.on('submit', ()=>this._handleSubmitForm());
1019
- }
1020
- dialog.show({
1021
- id: 'mediaEmbed',
1022
- title: t('Media embed'),
1023
- content: this._formView,
1024
- isModal: true,
1025
- onShow: ()=>{
1026
- this._formView.url = command.value || '';
1027
- this._formView.resetFormStatus();
1028
- this._formView.urlInputView.fieldView.select();
1029
- },
1030
- actionButtons: [
1031
- {
1032
- label: t('Cancel'),
1033
- withText: true,
1034
- onExecute: ()=>dialog.hide()
1035
- },
1036
- {
1037
- label: isMediaSelected ? t('Save') : t('Insert'),
1038
- class: 'ck-button-action',
1039
- withText: true,
1040
- onExecute: ()=>this._handleSubmitForm()
1041
- }
1042
- ]
1043
- });
1044
- }
1045
- _handleSubmitForm() {
1046
- const editor = this.editor;
1047
- const dialog = editor.plugins.get('Dialog');
1048
- if (this._formView.isValid()) {
1049
- editor.execute('mediaEmbed', this._formView.url);
1050
- dialog.hide();
1051
- editor.editing.view.focus();
1052
- }
1053
- }
1054
- }
1055
- function getFormValidators(t, registry) {
1056
- return [
1057
- (form)=>{
1058
- if (!form.url.length) {
1059
- return t('The URL must not be empty.');
1060
- }
1061
- },
1062
- (form)=>{
1063
- if (!registry.hasMedia(form.url)) {
1064
- return t('This media URL is not supported.');
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
- * The media embed plugin.
1072
- *
1073
- * For a detailed overview, check the {@glink features/media-embed/media-embed Media Embed feature documentation}.
1074
- *
1075
- * This is a "glue" plugin which loads the following plugins:
1076
- *
1077
- * * The {@link module:media-embed/mediaembedediting~MediaEmbedEditing media embed editing feature},
1078
- * * The {@link module:media-embed/mediaembedui~MediaEmbedUI media embed UI feature} and
1079
- * * The {@link module:media-embed/automediaembed~AutoMediaEmbed auto-media embed feature}.
1080
- */ class MediaEmbed extends Plugin {
1081
- /**
1082
- * @inheritDoc
1083
- */ static get requires() {
1084
- return [
1085
- MediaEmbedEditing,
1086
- MediaEmbedUI,
1087
- AutoMediaEmbed,
1088
- Widget
1089
- ];
1090
- }
1091
- /**
1092
- * @inheritDoc
1093
- */ static get pluginName() {
1094
- return 'MediaEmbed';
1095
- }
1096
- /**
1097
- * @inheritDoc
1098
- */ static get isOfficialPlugin() {
1099
- return true;
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
- * Built-in style options provided by the plugin. Integrators can refer to these by
1105
- * name in {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
1106
- * to opt out, override individual fields, or coexist with custom styles.
1107
- *
1108
- * @internal
1109
- */ const DEFAULT_OPTIONS = {
1110
- alignLeft: {
1111
- name: 'alignLeft',
1112
- title: 'Left aligned media',
1113
- icon: IconObjectInlineLeft,
1114
- className: 'media-style-align-left'
1115
- },
1116
- alignBlockLeft: {
1117
- name: 'alignBlockLeft',
1118
- title: 'Left aligned media',
1119
- icon: IconObjectLeft,
1120
- className: 'media-style-block-align-left'
1121
- },
1122
- alignCenter: {
1123
- name: 'alignCenter',
1124
- title: 'Centered media',
1125
- icon: IconObjectCenter,
1126
- isDefault: true
1127
- },
1128
- alignBlockRight: {
1129
- name: 'alignBlockRight',
1130
- title: 'Right aligned media',
1131
- icon: IconObjectRight,
1132
- className: 'media-style-block-align-right'
1133
- },
1134
- alignRight: {
1135
- name: 'alignRight',
1136
- title: 'Right aligned media',
1137
- icon: IconObjectInlineRight,
1138
- className: 'media-style-align-right'
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
- * Short icon-name aliases that can be used as the `icon` value in a media style
1143
- * option definition. Matches the alias set exposed by the image styles feature so
1144
- * the two APIs feel symmetrical.
1145
- *
1146
- * @internal
1147
- */ const DEFAULT_ICONS = {
1148
- inlineLeft: IconObjectInlineLeft,
1149
- left: IconObjectLeft,
1150
- center: IconObjectCenter,
1151
- right: IconObjectRight,
1152
- inlineRight: IconObjectInlineRight
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
- * Built-in dropdown groupings. Each entry references built-in style component names. If any
1156
- * items are filtered out by configuration, the dropdown is rebuilt from the remaining names
1157
- * (or skipped entirely if fewer than two remain).
1158
- *
1159
- * @internal
1160
- */ const DEFAULT_DROPDOWN_DEFINITIONS = [
1161
- {
1162
- name: 'mediaEmbed:wrapText',
1163
- title: 'Wrap text',
1164
- items: [
1165
- 'mediaEmbed:alignLeft',
1166
- 'mediaEmbed:alignRight'
1167
- ],
1168
- defaultItem: 'mediaEmbed:alignLeft'
1169
- },
1170
- {
1171
- name: 'mediaEmbed:breakText',
1172
- title: 'Break text',
1173
- items: [
1174
- 'mediaEmbed:alignBlockLeft',
1175
- 'mediaEmbed:alignCenter',
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
- * Normalizes the {@link module:media-embed/mediaembedconfig~MediaStyleConfig#options style options}
1184
- * provided by the integrator. Each entry is resolved into a full
1185
- * {@link module:media-embed/mediaembedconfig~MediaStyleOptionDefinition} and invalid entries
1186
- * are filtered out with a console warning.
1187
- *
1188
- * @internal
1189
- */ function normalizeStyles(configuredStyles) {
1190
- const configured = configuredStyles.options || [];
1191
- return configured.map((entry)=>normalizeDefinition(entry)).filter((entry)=>isValidOption(entry));
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
- * Resolves a single config entry into a style option definition. A string entry is first
1195
- * promoted to its object form (`{ name }`) and then shallow-merged on top of the matching
1196
- * built-in default — entries without a matching built-in pass through unchanged and are
1197
- * rejected by {@link ~isValidOption} if they lack required fields.
1198
- *
1199
- * Also resolves icon-name aliases (`'left'`, `'inlineLeft'`, etc.) to the corresponding
1200
- * SVG sources from {@link module:media-embed/mediaembedstyle/constants~DEFAULT_ICONS}.
1201
- */ function normalizeDefinition(entry) {
1202
- // Spread of `undefined` is a no-op, so unknown-name overrides produce a clean passthrough.
1203
- const override = typeof entry === 'string' ? {
1204
- name: entry
1205
- } : entry;
1206
- const definition = {
1207
- ...DEFAULT_OPTIONS[override.name],
1208
- ...override
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
- * Validates a normalized style option. `name`, `title`, and `icon` are always required.
1217
- * `className` is required unless the entry is the default style (defaults encode as
1218
- * attribute-absence and intentionally have no class). Emits a console warning and returns
1219
- * `false` when any of these checks fails.
1220
- */ function isValidOption(option) {
1221
- if (!option.name || !option.title || !option.icon || !option.isDefault && !option.className) {
1222
- warnInvalidStyle({
1223
- style: option
1224
- });
1225
- return false;
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
- * The media style configuration provided in the editor config is invalid. The warning is
1232
- * emitted in two situations:
1233
- *
1234
- * * An entry in {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles.options`}
1235
- * does not reference a built-in style by name (`'alignLeft'`, `'alignBlockLeft'`,
1236
- * `'alignCenter'`, `'alignBlockRight'`, `'alignRight'`) and does not follow the
1237
- * {@link module:media-embed/mediaembedconfig~MediaStyleOptionDefinition} shape —
1238
- * `name`, `title`, `icon`, and (unless `isDefault: true`) `className` are required.
1239
- * The offending entry is reported under the `style` parameter.
1240
- * * A dropdown entry placed inline in
1241
- * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar `config.mediaEmbed.toolbar`}
1242
- * does not follow the {@link module:media-embed/mediaembedconfig~MediaStyleDropdownDefinition} shape
1243
- * (`name` and every `items[]` entry must use the full `mediaEmbed:` prefix, `defaultItem` must
1244
- * be one of the `items`, `title` must be a non-empty string), or its `items[]` reference styles
1245
- * that are not in the resolved
1246
- * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`} list.
1247
- * The offending entry is reported under the `dropdown` parameter.
1248
- *
1249
- * @error media-style-configuration-definition-invalid
1250
- */ logWarning('media-style-configuration-definition-invalid', info);
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
- * Type guard for toolbar config entries shaped like a media style dropdown definition. The
1254
- * discriminator is `defaultItem` — generic toolbar groupings use `items` + `label` and never
1255
- * carry a `defaultItem` field.
1256
- *
1257
- * @internal
1258
- */ function isMediaStyleDropdown(item) {
1259
- return typeof item === 'object' && item !== null && typeof item.defaultItem === 'string';
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
- * The media embed toolbar plugin. It creates a toolbar for media embed that shows up when the media element is selected.
1264
- *
1265
- * Instances of toolbar components (e.g. buttons) are created based on the
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
- * Flattens dropdown definitions to their factory names, dropping any `mediaEmbed:`-prefixed
1300
- * name the style UI did not register — otherwise the toolbar crashes with `componentfactory-item-missing`.
1301
- * Non-string entries (e.g. generic `{ label, items }` toolbar groupings) pass through unchanged.
1302
- */ function normalizeDeclarativeConfig(factory, config) {
1303
- return config.map((item)=>isMediaStyleDropdown(item) ? item.name : item).filter((item)=>typeof item !== 'string' || !item.startsWith('mediaEmbed:') || factory.has(item));
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
- * The resize media embed command.
1308
- */ class ResizeMediaEmbedCommand extends Command {
1309
- /**
1310
- * @inheritDoc
1311
- */ refresh() {
1312
- const element = getSelectedMediaModelWidget(this.editor.model.document.selection);
1313
- this.isEnabled = !!element;
1314
- if (!element || !element.hasAttribute('resizedWidth')) {
1315
- this.value = null;
1316
- } else {
1317
- this.value = element.getAttribute('resizedWidth');
1318
- }
1319
- }
1320
- /**
1321
- * Executes the command.
1322
- *
1323
- * ```ts
1324
- * // Sets the width as a percentage of the parent width:
1325
- * editor.execute( 'resizeMediaEmbed', { width: '50%' } );
1326
- *
1327
- * // Removes the resize and restores the default width:
1328
- * editor.execute( 'resizeMediaEmbed', { width: null } );
1329
- * ```
1330
- *
1331
- * @param options
1332
- * @param options.width The new width of the media embed as a CSS `width` value
1333
- * (e.g. `'50%'`), or `null` to remove the resize.
1334
- * @fires execute
1335
- */ execute(options) {
1336
- const model = this.editor.model;
1337
- const mediaElement = getSelectedMediaModelWidget(model.document.selection);
1338
- if (mediaElement) {
1339
- model.change((writer)=>{
1340
- writer.setAttribute('resizedWidth', options.width, mediaElement);
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
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
1348
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
1349
- */ /**
1350
- * @module media-embed/mediaembedresize/constants
1351
- */ /**
1352
- * The view class applied to a resized media embed figure.
1353
- *
1354
- * Shared between the editing plugin (which toggles it via downcast of `resizedWidth` and consumes
1355
- * it on upcast) and the handles plugin (which adds it during drag and strips it on commit), so
1356
- * both layers agree on the exact class name.
1357
- *
1358
- * @internal
1359
- */ const RESIZED_MEDIA_CLASS = 'media_resized';
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
- * The media embed resize editing feature.
1363
- *
1364
- * It adds the ability to resize each media embed using handles.
1365
- */ class MediaEmbedResizeEditing extends Plugin {
1366
- /**
1367
- * @inheritDoc
1368
- */ static get requires() {
1369
- return [
1370
- MediaEmbedEditing
1371
- ];
1372
- }
1373
- /**
1374
- * @inheritDoc
1375
- */ static get pluginName() {
1376
- return 'MediaEmbedResizeEditing';
1377
- }
1378
- /**
1379
- * @inheritDoc
1380
- * @internal
1381
- */ static get licenseFeatureCode() {
1382
- return 'MER';
1383
- }
1384
- /**
1385
- * @inheritDoc
1386
- */ static get isOfficialPlugin() {
1387
- return true;
1388
- }
1389
- /**
1390
- * @inheritDoc
1391
- */ static get isPremiumPlugin() {
1392
- return true;
1393
- }
1394
- /**
1395
- * @inheritDoc
1396
- */ init() {
1397
- const editor = this.editor;
1398
- editor.commands.add('resizeMediaEmbed', new ResizeMediaEmbedCommand(editor));
1399
- this._registerConverters();
1400
- }
1401
- /**
1402
- * @inheritDoc
1403
- */ afterInit() {
1404
- this._registerSchema();
1405
- }
1406
- _registerSchema() {
1407
- const schema = this.editor.model.schema;
1408
- schema.extend('media', {
1409
- allowAttributes: [
1410
- 'resizedWidth'
1411
- ]
1412
- });
1413
- schema.setAttributeProperties('resizedWidth', {
1414
- isFormatting: true
1415
- });
1416
- }
1417
- /**
1418
- * Registers media embed resize converters.
1419
- */ _registerConverters() {
1420
- const editor = this.editor;
1421
- // Downcast (model → view): resizedWidth → style.width + class on <figure>.
1422
- editor.conversion.for('downcast').add((dispatcher)=>dispatcher.on('attribute:resizedWidth:media', (evt, data, conversionApi)=>{
1423
- if (!conversionApi.consumable.consume(data.item, evt.name)) {
1424
- return;
1425
- }
1426
- const viewWriter = conversionApi.writer;
1427
- const figure = conversionApi.mapper.toViewElement(data.item);
1428
- if (data.attributeNewValue !== null) {
1429
- viewWriter.setStyle('width', data.attributeNewValue, figure);
1430
- viewWriter.addClass(RESIZED_MEDIA_CLASS, figure);
1431
- } else {
1432
- viewWriter.removeStyle('width', figure);
1433
- viewWriter.removeClass(RESIZED_MEDIA_CLASS, figure);
1434
- }
1435
- }));
1436
- // Upcast: style.width on <figure class="media"> → resizedWidth.
1437
- //
1438
- // The `hasClass` guard lives in the value callback (not the matcher) because the `media`
1439
- // class is already consumed upstream by MediaEmbedEditing. Without the guard, any figure
1440
- // with a width style would match and could race image resize's upcast on image figures.
1441
- editor.conversion.for('upcast').attributeToAttribute({
1442
- view: {
1443
- name: 'figure',
1444
- styles: {
1445
- width: /.+/
1446
- }
1447
- },
1448
- model: {
1449
- key: 'resizedWidth',
1450
- value: (viewElement)=>{
1451
- if (!viewElement.hasClass('media')) {
1452
- return null;
1453
- }
1454
- return viewElement.getStyle('width');
1455
- }
1456
- }
1457
- });
1458
- // Consume the media_resized class during upcast so it does not cause conversion issues.
1459
- editor.conversion.for('upcast').add((dispatcher)=>{
1460
- dispatcher.on('element:figure', (evt, data, conversionApi)=>{
1461
- conversionApi.consumable.consume(data.viewItem, {
1462
- classes: [
1463
- RESIZED_MEDIA_CLASS
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
- * The media embed resize by handles feature.
1473
- *
1474
- * It adds the ability to resize each media embed using handles.
1475
- */ class MediaEmbedResizeHandles extends Plugin {
1476
- /**
1477
- * @inheritDoc
1478
- */ static get requires() {
1479
- return [
1480
- WidgetResize
1481
- ];
1482
- }
1483
- /**
1484
- * @inheritDoc
1485
- */ static get pluginName() {
1486
- return 'MediaEmbedResizeHandles';
1487
- }
1488
- /**
1489
- * @inheritDoc
1490
- */ static get isOfficialPlugin() {
1491
- return true;
1492
- }
1493
- /**
1494
- * @inheritDoc
1495
- */ init() {
1496
- const command = this.editor.commands.get('resizeMediaEmbed');
1497
- this.bind('isEnabled').to(command);
1498
- this._setupResizerCreator();
1499
- }
1500
- /**
1501
- * Attaches a resizer to every newly inserted media widget. Walks only the ranges
1502
- * reported by the differ — never the whole document — so unrelated inserts (e.g.
1503
- * pressing Enter to create a paragraph) cost only the differ check.
1504
- *
1505
- * Each resizer's `isEnabled` is bound to the plugin in {@link #_attachResizer},
1506
- * so it auto-tracks the resize command's state.
1507
- */ _setupResizerCreator() {
1508
- const editor = this.editor;
1509
- const model = editor.model;
1510
- const widgetResize = editor.plugins.get(WidgetResize);
1511
- // Low priority ensures downcast has run before we look up view elements.
1512
- this.listenTo(model.document, 'change:data', ()=>{
1513
- for (const change of model.document.differ.getChanges()){
1514
- if (change.type !== 'insert' || change.name === '$text') {
1515
- continue;
1516
- }
1517
- const insertedRange = model.createRange(change.position, change.position.getShiftedBy(change.length));
1518
- for (const item of insertedRange.getItems()){
1519
- if (!item.is('element', 'media')) {
1520
- continue;
1521
- }
1522
- const viewElement = editor.editing.mapper.toViewElement(item);
1523
- /* istanbul ignore if: paranoid check — conversion has run at this point -- @preserve */ if (!viewElement) {
1524
- continue;
1525
- }
1526
- if (!widgetResize.getResizerByViewElement(viewElement)) {
1527
- this._attachResizer(item, viewElement);
1528
- }
1529
- }
1530
- }
1531
- }, {
1532
- priority: 'low'
1533
- });
1534
- }
1535
- /**
1536
- * Attaches a resizer to a single media widget.
1537
- */ _attachResizer(modelElement, widgetView) {
1538
- const editor = this.editor;
1539
- const editingView = editor.editing.view;
1540
- const resizer = editor.plugins.get(WidgetResize).attachTo({
1541
- unit: '%',
1542
- modelElement,
1543
- viewElement: widgetView,
1544
- editor,
1545
- getHandleHost: (domWidgetElement)=>domWidgetElement.querySelector('.ck-media__wrapper'),
1546
- getResizeHost: (domWidgetElement)=>domWidgetElement,
1547
- onCommit: (newValue)=>{
1548
- editingView.change((writer)=>writer.removeClass(RESIZED_MEDIA_CLASS, widgetView));
1549
- editor.execute('resizeMediaEmbed', {
1550
- width: newValue
1551
- });
1552
- }
1553
- });
1554
- resizer.bind('isEnabled').to(this);
1555
- resizer.on('updateSize', ()=>{
1556
- if (!widgetView.hasClass(RESIZED_MEDIA_CLASS)) {
1557
- editingView.change((writer)=>writer.addClass(RESIZED_MEDIA_CLASS, widgetView));
1558
- }
1559
- });
1560
- // Redraw once the view has flushed to DOM — otherwise the freshly inserted resizer
1561
- // UIElement has no inline styles and handles cluster at the top-left corner (visible
1562
- // after drag-and-drop until another event eventually triggers a redraw).
1563
- editingView.once('render', ()=>resizer.redraw());
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
- * The media embed resize plugin.
1569
- *
1570
- * It adds a possibility to resize each media embed using handles.
1571
- */ class MediaEmbedResize extends Plugin {
1572
- /**
1573
- * @inheritDoc
1574
- */ static get requires() {
1575
- return [
1576
- MediaEmbedResizeEditing,
1577
- MediaEmbedResizeHandles
1578
- ];
1579
- }
1580
- /**
1581
- * @inheritDoc
1582
- */ static get pluginName() {
1583
- return 'MediaEmbedResize';
1584
- }
1585
- /**
1586
- * @inheritDoc
1587
- */ static get isOfficialPlugin() {
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
- * The media embed style command. It is used to apply a style option (e.g. an alignment) to a
1594
- * selected media embed.
1595
- *
1596
- * The set of accepted style values comes from the resolved
1597
- * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
1598
- * options. Values not in that set are silently rejected by {@link #execute}.
1599
- */ class MediaEmbedStyleCommand extends Command {
1600
- /**
1601
- * Resolved styles indexed by `name`. Used to look up the `isDefault` flag at execute time
1602
- * (any default-marked style clears the attribute) and to validate that a requested style
1603
- * is part of the resolved options list.
1604
- */ _styles;
1605
- /**
1606
- * The `name` of the first style with `isDefault: true` in the resolved options, or `null`
1607
- * when the integrator did not designate a default. Exposed via {@link #value} when the
1608
- * selected media has no `mediaStyle` attribute, so the default-state UI button can light up.
1609
- * Does not gate the "clear attribute" branch in {@link #execute} — that uses the per-style
1610
- * `isDefault` flag so multi-default configs behave consistently with the downcast.
1611
- */ _defaultStyleName;
1612
- /**
1613
- * Creates an instance of the media embed style command.
1614
- *
1615
- * @param editor The editor instance.
1616
- * @param styles The resolved list of style options that this command will accept.
1617
- */ constructor(editor, styles){
1618
- super(editor);
1619
- this._styles = new Map(styles.map((style)=>[
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
- * The media embed style engine plugin. It extends the schema with the `mediaStyle` attribute,
1684
- * registers the {@link module:media-embed/mediaembedstyle/mediaembedstylecommand~MediaEmbedStyleCommand} command,
1685
- * and adds the converters that apply alignment CSS classes to the figure.
1686
- */ class MediaEmbedStyleEditing extends Plugin {
1687
- /**
1688
- * The resolved list of media style options. Built once from
1689
- * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
1690
- * during {@link #init} and consumed by both the command and the UI plugin (single source of truth).
1691
- *
1692
- * @internal
1693
- * @readonly
1694
- */ normalizedStyles;
1695
- /**
1696
- * @inheritDoc
1697
- */ static get requires() {
1698
- return [
1699
- MediaEmbedEditing
1700
- ];
1701
- }
1702
- /**
1703
- * @inheritDoc
1704
- */ static get pluginName() {
1705
- return 'MediaEmbedStyleEditing';
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
- * The media embed style UI plugin.
1789
- *
1790
- * It registers a button for every style in the resolved
1791
- * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
1792
- * list, and the default split-button dropdowns (`mediaEmbed:wrapText`, `mediaEmbed:breakText`)
1793
- * — filtered to the styles that survived configuration. The resulting components can be placed
1794
- * in the {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar media embed toolbar}.
1795
- */ class MediaEmbedStyleUI extends Plugin {
1796
- /**
1797
- * @inheritDoc
1798
- */ static get requires() {
1799
- return [
1800
- MediaEmbedStyleEditing
1801
- ];
1802
- }
1803
- /**
1804
- * @inheritDoc
1805
- */ static get pluginName() {
1806
- return 'MediaEmbedStyleUI';
1807
- }
1808
- /**
1809
- * @inheritDoc
1810
- */ static get isOfficialPlugin() {
1811
- return true;
1812
- }
1813
- /**
1814
- * @inheritDoc
1815
- */ init() {
1816
- const titles = this._getLocalizedTitles();
1817
- for (const button of this._getButtonDefinitions(titles)){
1818
- this._createButton(button);
1819
- }
1820
- for (const dropdown of this._getDropdownDefinitions(titles)){
1821
- this._createDropdown(dropdown);
1822
- }
1823
- }
1824
- /**
1825
- * Returns the alignment button definitions sourced from the resolved options list.
1826
- */ _getButtonDefinitions(titles) {
1827
- const editing = this.editor.plugins.get(MediaEmbedStyleEditing);
1828
- return editing.normalizedStyles.map((option)=>({
1829
- name: option.name,
1830
- label: titles[option.title] || option.title,
1831
- icon: option.icon
1832
- }));
1833
- }
1834
- /**
1835
- * Returns the localized titles of the built-in styles and dropdowns.
1836
- */ _getLocalizedTitles() {
1837
- const t = this.editor.t;
1838
- return {
1839
- 'Left aligned media': t('Left aligned media'),
1840
- 'Centered media': t('Centered media'),
1841
- 'Right aligned media': t('Right aligned media'),
1842
- 'Wrap text': t('Wrap text'),
1843
- 'Break text': t('Break text')
1844
- };
1845
- }
1846
- /**
1847
- * Returns the split-button dropdown definitions, filtered to the styles present in the
1848
- * resolved options list. Combines the {@link module:media-embed/mediaembedstyle/constants~DEFAULT_DROPDOWN_DEFINITIONS
1849
- * built-in dropdowns} with custom dropdowns declared inline in
1850
- * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar `config.mediaEmbed.toolbar`}.
1851
- *
1852
- * A dropdown with fewer than two items is skipped — a single-item dropdown carries no value
1853
- * over the flat button. If the configured `defaultItem` was filtered out, the first surviving
1854
- * item becomes the default.
1855
- *
1856
- * When a *custom* dropdown's items reference styles that are not in the resolved options list,
1857
- * a console warning is emitted (the integrator's config was not fully honored). Built-in
1858
- * dropdowns auto-skip silently — they are added by the plugin, not the integrator.
1859
- */ _getDropdownDefinitions(titles) {
1860
- const editor = this.editor;
1861
- const editing = editor.plugins.get(MediaEmbedStyleEditing);
1862
- const availableComponentNames = new Set(editing.normalizedStyles.map(({ name })=>`mediaEmbed:${name}`));
1863
- const dropdowns = [];
1864
- const resolveDropdown = (definition, warnOnFilter)=>{
1865
- const items = definition.items.filter((itemName)=>availableComponentNames.has(itemName));
1866
- if (warnOnFilter && items.length !== definition.items.length) {
1867
- warnInvalidDropdown({
1868
- dropdown: definition
1869
- });
1870
- }
1871
- if (items.length < 2) {
1872
- return;
1873
- }
1874
- const defaultItem = availableComponentNames.has(definition.defaultItem) ? definition.defaultItem : items[0];
1875
- dropdowns.push({
1876
- name: definition.name,
1877
- title: titles[definition.title] || definition.title,
1878
- items,
1879
- defaultItem
1880
- });
1881
- };
1882
- for (const definition of DEFAULT_DROPDOWN_DEFINITIONS){
1883
- resolveDropdown(definition, false);
1884
- }
1885
- for (const definition of this._collectCustomDropdowns()){
1886
- resolveDropdown(definition, true);
1887
- }
1888
- return dropdowns;
1889
- }
1890
- /**
1891
- * Scans `config.mediaEmbed.toolbar` for entries shaped like a dropdown definition
1892
- * (objects with both `items` and `defaultItem`) and returns the valid ones. `defaultItem`
1893
- * is the discriminator between our split-button dropdowns and generic toolbar groupings
1894
- * (which use `items` + `label` and have no `defaultItem`).
1895
- *
1896
- * Invalid entries (wrong name prefix, `defaultItem` missing from `items`) are warned and
1897
- * dropped here. Items that reference filtered-out styles are filtered later by
1898
- * {@link #_getDropdownDefinitions}, alongside the same logic that applies to built-in
1899
- * dropdowns.
1900
- */ _collectCustomDropdowns() {
1901
- const toolbarConfig = this.editor.config.get('mediaEmbed.toolbar') || [];
1902
- return toolbarConfig.filter((item)=>isMediaStyleDropdown(item) && isValidCustomDropdown(item));
1903
- }
1904
- /**
1905
- * Registers a single alignment toggle button in the component factory.
1906
- */ _createButton(definition) {
1907
- const editor = this.editor;
1908
- const componentName = `mediaEmbed:${definition.name}`;
1909
- editor.ui.componentFactory.add(componentName, (locale)=>{
1910
- const command = editor.commands.get('mediaStyle');
1911
- const view = new ButtonView(locale);
1912
- view.set({
1913
- label: definition.label,
1914
- icon: definition.icon,
1915
- tooltip: true,
1916
- isToggleable: true
1917
- });
1918
- view.bind('isEnabled').to(command, 'isEnabled');
1919
- view.bind('isOn').to(command, 'value', (value)=>value === definition.name);
1920
- view.on('execute', ()=>{
1921
- editor.execute('mediaStyle', {
1922
- value: definition.name
1923
- });
1924
- editor.editing.view.focus();
1925
- });
1926
- return view;
1927
- });
1928
- }
1929
- /**
1930
- * Registers a split-button dropdown grouping a set of alignment buttons. The action button
1931
- * reflects whichever child option is currently `isOn`, falling back to the dropdown's
1932
- * `defaultItem` when nothing is active.
1933
- */ _createDropdown(definition) {
1934
- const editor = this.editor;
1935
- const factory = editor.ui.componentFactory;
1936
- factory.add(definition.name, (locale)=>{
1937
- // Build child buttons via the factory; pick the default by name.
1938
- const buttonViews = definition.items.map((itemName)=>factory.create(itemName));
1939
- const defaultButton = buttonViews[definition.items.indexOf(definition.defaultItem)];
1940
- // Resolve the currently-active child or fall back to the default. Used by the
1941
- // reactive `icon` and `label` bindings on the split button.
1942
- const activeOrDefault = (...areOn)=>{
1943
- const index = areOn.findIndex(Boolean);
1944
- return index < 0 ? defaultButton : buttonViews[index];
1945
- };
1946
- // Build the dropdown shell.
1947
- const dropdownView = createDropdown(locale, SplitButtonView);
1948
- const splitButtonView = dropdownView.buttonView;
1949
- addToolbarToDropdown(dropdownView, buttonViews, {
1950
- enableActiveItemFocusOnDropdownOpen: true
1951
- });
1952
- splitButtonView.set({
1953
- label: getDropdownButtonTitle(definition.title, defaultButton.label),
1954
- class: null,
1955
- tooltip: true
1956
- });
1957
- splitButtonView.arrowView.unbind('label');
1958
- splitButtonView.arrowView.set({
1959
- label: definition.title
1960
- });
1961
- // Reactive: action button mirrors the active child's icon and label.
1962
- splitButtonView.bind('icon').toMany(buttonViews, 'isOn', (...areOn)=>activeOrDefault(...areOn).icon);
1963
- splitButtonView.bind('label').toMany(buttonViews, 'isOn', (...areOn)=>getDropdownButtonTitle(definition.title, activeOrDefault(...areOn).label));
1964
- // Reactive: split button shows the "active" state when any child is on.
1965
- splitButtonView.bind('isOn').toMany(buttonViews, 'isOn', (...areOn)=>areOn.some(Boolean));
1966
- splitButtonView.bind('class').toMany(buttonViews, 'isOn', (...areOn)=>areOn.some(Boolean) ? 'ck-splitbutton_flatten' : undefined);
1967
- // Action click: re-fire the default child when nothing is active; otherwise toggle the dropdown.
1968
- this.listenTo(splitButtonView, 'execute', ()=>{
1969
- if (buttonViews.some(({ isOn })=>isOn)) {
1970
- dropdownView.isOpen = !dropdownView.isOpen;
1971
- } else {
1972
- defaultButton.fire('execute');
1973
- }
1974
- });
1975
- // Reactive: dropdown is enabled when any child is enabled.
1976
- dropdownView.bind('isEnabled').toMany(buttonViews, 'isEnabled', (...areEnabled)=>areEnabled.some(Boolean));
1977
- // Refocus the editing view so the dropdown action doesn't steal caret position.
1978
- this.listenTo(dropdownView, 'execute', ()=>{
1979
- editor.editing.view.focus();
1980
- });
1981
- return dropdownView;
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
- * Combines the dropdown title and the default action item label for the split-button label.
1987
- */ function getDropdownButtonTitle(dropdownTitle, buttonTitle) {
1988
- return `${dropdownTitle}: ${buttonTitle}`;
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
- * Validates a user-supplied dropdown definition. Emits a console warning under
1992
- * `media-style-configuration-definition-invalid` and returns `false` when any of these rules is
1993
- * broken: `name` must start with `mediaEmbed:`, `title` must be a non-empty string, `items` must
1994
- * be non-empty and every entry must be a `mediaEmbed:`-prefixed string, and `defaultItem` must be
1995
- * one of the `items`.
1996
- *
1997
- * Item-membership against the resolved styles is checked separately, downstream, alongside the
1998
- * same logic that applies to built-in dropdowns.
1999
- */ function isValidCustomDropdown(definition) {
2000
- 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);
2001
- if (!valid) {
2002
- warnInvalidDropdown({
2003
- dropdown: definition
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
- * Emits a console warning under `media-style-configuration-definition-invalid` for an invalid
2010
- * or partially-honored dropdown definition. Called from {@link ~isValidCustomDropdown} for
2011
- * structural problems and from {@link MediaEmbedStyleUI#_getDropdownDefinitions} when items
2012
- * reference styles that are not in the resolved options list.
2013
- */ function warnInvalidDropdown(info) {
2014
- logWarning('media-style-configuration-definition-invalid', info);
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
- * The media embed style plugin.
2019
- *
2020
- * This is a "glue" plugin which loads the following plugins:
2021
- * * {@link module:media-embed/mediaembedstyle/mediaembedstyleediting~MediaEmbedStyleEditing},
2022
- * * {@link module:media-embed/mediaembedstyle/mediaembedstyleui~MediaEmbedStyleUI}
2023
- *
2024
- * For a detailed overview, check the {@glink features/media-embed/media-embed-styles Media embed styles feature documentation}.
2025
- */ class MediaEmbedStyle extends Plugin {
2026
- /**
2027
- * @inheritDoc
2028
- */ static get requires() {
2029
- return [
2030
- MediaEmbedStyleEditing,
2031
- MediaEmbedStyleUI
2032
- ];
2033
- }
2034
- /**
2035
- * @inheritDoc
2036
- */ static get pluginName() {
2037
- return 'MediaEmbedStyle';
2038
- }
2039
- /**
2040
- * @inheritDoc
2041
- */ static get isOfficialPlugin() {
2042
- return true;
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