@ckeditor/ckeditor5-media-embed 48.1.0 → 48.2.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ckeditor5-metadata.json +108 -12
- package/dist/augmentation.d.ts +9 -1
- package/dist/index-content.css +45 -1
- package/dist/index-editor.css +8 -5
- package/dist/index.css +49 -6
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +9 -1
- package/dist/index.js +918 -11
- package/dist/index.js.map +1 -1
- package/dist/mediaembed.d.ts +1 -1
- package/dist/mediaembedconfig.d.ts +233 -10
- package/dist/mediaembedresize/constants.d.ts +17 -0
- package/dist/mediaembedresize/mediaembedresizeediting.d.ts +47 -0
- package/dist/mediaembedresize/mediaembedresizehandles.d.ts +42 -0
- package/dist/mediaembedresize/resizemediaembedcommand.d.ts +40 -0
- package/dist/mediaembedresize.d.ts +30 -0
- package/dist/mediaembedstyle/constants.d.ts +29 -0
- package/dist/mediaembedstyle/mediaembedstylecommand.d.ts +72 -0
- package/dist/mediaembedstyle/mediaembedstyleediting.d.ts +43 -0
- package/dist/mediaembedstyle/mediaembedstyleui.d.ts +81 -0
- package/dist/mediaembedstyle/utils.d.ts +23 -0
- package/dist/mediaembedstyle.d.ts +34 -0
- package/dist/mediaembedtoolbar.d.ts +0 -1
- package/dist/translations/af.js +1 -1
- package/dist/translations/af.umd.js +1 -1
- package/dist/translations/ar.js +1 -1
- package/dist/translations/ar.umd.js +1 -1
- package/dist/translations/ast.js +1 -1
- package/dist/translations/ast.umd.js +1 -1
- package/dist/translations/az.js +1 -1
- package/dist/translations/az.umd.js +1 -1
- package/dist/translations/be.js +1 -1
- package/dist/translations/be.umd.js +1 -1
- package/dist/translations/bg.js +1 -1
- package/dist/translations/bg.umd.js +1 -1
- package/dist/translations/bn.js +1 -1
- package/dist/translations/bn.umd.js +1 -1
- package/dist/translations/bs.js +1 -1
- package/dist/translations/bs.umd.js +1 -1
- package/dist/translations/ca.js +1 -1
- package/dist/translations/ca.umd.js +1 -1
- package/dist/translations/cs.js +1 -1
- package/dist/translations/cs.umd.js +1 -1
- package/dist/translations/da.js +1 -1
- package/dist/translations/da.umd.js +1 -1
- package/dist/translations/de-ch.js +1 -1
- package/dist/translations/de-ch.umd.js +1 -1
- package/dist/translations/de.js +1 -1
- package/dist/translations/de.umd.js +1 -1
- package/dist/translations/el.js +1 -1
- package/dist/translations/el.umd.js +1 -1
- package/dist/translations/en-au.js +1 -1
- package/dist/translations/en-au.umd.js +1 -1
- package/dist/translations/en-gb.js +1 -1
- package/dist/translations/en-gb.umd.js +1 -1
- package/dist/translations/en.js +1 -1
- package/dist/translations/en.umd.js +1 -1
- package/dist/translations/eo.js +1 -1
- package/dist/translations/eo.umd.js +1 -1
- package/dist/translations/es-co.js +1 -1
- package/dist/translations/es-co.umd.js +1 -1
- package/dist/translations/es.js +1 -1
- package/dist/translations/es.umd.js +1 -1
- package/dist/translations/et.js +1 -1
- package/dist/translations/et.umd.js +1 -1
- package/dist/translations/eu.js +1 -1
- package/dist/translations/eu.umd.js +1 -1
- package/dist/translations/fa.js +1 -1
- package/dist/translations/fa.umd.js +1 -1
- package/dist/translations/fi.js +1 -1
- package/dist/translations/fi.umd.js +1 -1
- package/dist/translations/fr.js +1 -1
- package/dist/translations/fr.umd.js +1 -1
- package/dist/translations/gl.js +1 -1
- package/dist/translations/gl.umd.js +1 -1
- package/dist/translations/gu.js +1 -1
- package/dist/translations/gu.umd.js +1 -1
- package/dist/translations/he.js +1 -1
- package/dist/translations/he.umd.js +1 -1
- package/dist/translations/hi.js +1 -1
- package/dist/translations/hi.umd.js +1 -1
- package/dist/translations/hr.js +1 -1
- package/dist/translations/hr.umd.js +1 -1
- package/dist/translations/hu.js +1 -1
- package/dist/translations/hu.umd.js +1 -1
- package/dist/translations/hy.js +1 -1
- package/dist/translations/hy.umd.js +1 -1
- package/dist/translations/id.js +1 -1
- package/dist/translations/id.umd.js +1 -1
- package/dist/translations/it.js +1 -1
- package/dist/translations/it.umd.js +1 -1
- package/dist/translations/ja.js +1 -1
- package/dist/translations/ja.umd.js +1 -1
- package/dist/translations/jv.js +1 -1
- package/dist/translations/jv.umd.js +1 -1
- package/dist/translations/kk.js +1 -1
- package/dist/translations/kk.umd.js +1 -1
- package/dist/translations/km.js +1 -1
- package/dist/translations/km.umd.js +1 -1
- package/dist/translations/kn.js +1 -1
- package/dist/translations/kn.umd.js +1 -1
- package/dist/translations/ko.js +1 -1
- package/dist/translations/ko.umd.js +1 -1
- package/dist/translations/ku.js +1 -1
- package/dist/translations/ku.umd.js +1 -1
- package/dist/translations/lt.js +1 -1
- package/dist/translations/lt.umd.js +1 -1
- package/dist/translations/lv.js +1 -1
- package/dist/translations/lv.umd.js +1 -1
- package/dist/translations/ms.js +1 -1
- package/dist/translations/ms.umd.js +1 -1
- package/dist/translations/nb.js +1 -1
- package/dist/translations/nb.umd.js +1 -1
- package/dist/translations/ne.js +1 -1
- package/dist/translations/ne.umd.js +1 -1
- package/dist/translations/nl.js +1 -1
- package/dist/translations/nl.umd.js +1 -1
- package/dist/translations/no.js +1 -1
- package/dist/translations/no.umd.js +1 -1
- package/dist/translations/oc.js +1 -1
- package/dist/translations/oc.umd.js +1 -1
- package/dist/translations/pl.js +1 -1
- package/dist/translations/pl.umd.js +1 -1
- package/dist/translations/pt-br.js +1 -1
- package/dist/translations/pt-br.umd.js +1 -1
- package/dist/translations/pt.js +1 -1
- package/dist/translations/pt.umd.js +1 -1
- package/dist/translations/ro.js +1 -1
- package/dist/translations/ro.umd.js +1 -1
- package/dist/translations/ru.js +1 -1
- package/dist/translations/ru.umd.js +1 -1
- package/dist/translations/si.js +1 -1
- package/dist/translations/si.umd.js +1 -1
- package/dist/translations/sk.js +1 -1
- package/dist/translations/sk.umd.js +1 -1
- package/dist/translations/sl.js +1 -1
- package/dist/translations/sl.umd.js +1 -1
- package/dist/translations/sq.js +1 -1
- package/dist/translations/sq.umd.js +1 -1
- package/dist/translations/sr-latn.js +1 -1
- package/dist/translations/sr-latn.umd.js +1 -1
- package/dist/translations/sr.js +1 -1
- package/dist/translations/sr.umd.js +1 -1
- package/dist/translations/sv.js +1 -1
- package/dist/translations/sv.umd.js +1 -1
- package/dist/translations/th.js +1 -1
- package/dist/translations/th.umd.js +1 -1
- package/dist/translations/ti.js +1 -1
- package/dist/translations/ti.umd.js +1 -1
- package/dist/translations/tk.js +1 -1
- package/dist/translations/tk.umd.js +1 -1
- package/dist/translations/tr.js +1 -1
- package/dist/translations/tr.umd.js +1 -1
- package/dist/translations/tt.js +1 -1
- package/dist/translations/tt.umd.js +1 -1
- package/dist/translations/ug.js +1 -1
- package/dist/translations/ug.umd.js +1 -1
- package/dist/translations/uk.js +1 -1
- package/dist/translations/uk.umd.js +1 -1
- package/dist/translations/ur.js +1 -1
- package/dist/translations/ur.umd.js +1 -1
- package/dist/translations/uz.js +1 -1
- package/dist/translations/uz.umd.js +1 -1
- package/dist/translations/vi.js +1 -1
- package/dist/translations/vi.umd.js +1 -1
- package/dist/translations/zh-cn.js +1 -1
- package/dist/translations/zh-cn.umd.js +1 -1
- package/dist/translations/zh.js +1 -1
- package/dist/translations/zh.umd.js +1 -1
- package/package.json +10 -10
package/dist/mediaembed.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ import '../theme/mediaembed.css';
|
|
|
14
14
|
/**
|
|
15
15
|
* The media embed plugin.
|
|
16
16
|
*
|
|
17
|
-
* For a detailed overview, check the {@glink features/media-embed Media Embed feature documentation}.
|
|
17
|
+
* For a detailed overview, check the {@glink features/media-embed/media-embed Media Embed feature documentation}.
|
|
18
18
|
*
|
|
19
19
|
* This is a "glue" plugin which loads the following plugins:
|
|
20
20
|
*
|
|
@@ -10,11 +10,11 @@ import type { ArrayOrItem } from '@ckeditor/ckeditor5-utils';
|
|
|
10
10
|
/**
|
|
11
11
|
* The configuration of the media embed features.
|
|
12
12
|
*
|
|
13
|
-
* Read more about {@glink features/media-embed
|
|
13
|
+
* Read more about {@glink features/media-embed/media-embed-configuration configuring the media embed feature}.
|
|
14
14
|
*
|
|
15
15
|
* ```ts
|
|
16
16
|
* ClassicEditor
|
|
17
|
-
* .create(
|
|
17
|
+
* .create( {
|
|
18
18
|
* mediaEmbed: ... // Media embed feature options.
|
|
19
19
|
* } )
|
|
20
20
|
* .then( ... )
|
|
@@ -61,7 +61,7 @@ export interface MediaEmbedConfig {
|
|
|
61
61
|
*
|
|
62
62
|
* ```ts
|
|
63
63
|
* ClassicEditor
|
|
64
|
-
* .create(
|
|
64
|
+
* .create( {
|
|
65
65
|
* plugins: [ MediaEmbed, ... ],
|
|
66
66
|
* mediaEmbed: {
|
|
67
67
|
* providers: [
|
|
@@ -94,7 +94,7 @@ export interface MediaEmbedConfig {
|
|
|
94
94
|
*
|
|
95
95
|
* ```ts
|
|
96
96
|
* ClassicEditor
|
|
97
|
-
* .create(
|
|
97
|
+
* .create( {
|
|
98
98
|
* plugins: [ MediaEmbed, ... ],
|
|
99
99
|
* mediaEmbed: {
|
|
100
100
|
* extraProviders: [
|
|
@@ -194,9 +194,227 @@ export interface MediaEmbedConfig {
|
|
|
194
194
|
* Items to be placed in the media embed toolbar.
|
|
195
195
|
* This option requires adding {@link module:media-embed/mediaembedtoolbar~MediaEmbedToolbar} to the plugin list.
|
|
196
196
|
*
|
|
197
|
-
*
|
|
197
|
+
* Each entry is one of:
|
|
198
|
+
*
|
|
199
|
+
* * a component name (string) — including the built-in alignment buttons (e.g. `'mediaEmbed:alignCenter'`)
|
|
200
|
+
* and built-in dropdowns (`'mediaEmbed:wrapText'`, `'mediaEmbed:breakText'`),
|
|
201
|
+
* * a custom split-button media style dropdown definition (object) following the
|
|
202
|
+
* {@link module:media-embed/mediaembedconfig~MediaStyleDropdownDefinition} shape — registered
|
|
203
|
+
* alongside the built-in dropdowns and inheriting the same auto-skip / fallback-defaultItem behavior,
|
|
204
|
+
* * a generic nested toolbar grouping (`{ label, items }`) — same shape as in
|
|
205
|
+
* {@link module:core/editor/editorconfig~EditorConfig#toolbar `config.toolbar`}.
|
|
206
|
+
*
|
|
207
|
+
* ```ts
|
|
208
|
+
* mediaEmbed: {
|
|
209
|
+
* toolbar: [
|
|
210
|
+
* 'mediaEmbed:alignCenter',
|
|
211
|
+
* {
|
|
212
|
+
* name: 'mediaEmbed:myAlignments',
|
|
213
|
+
* title: 'Alignment',
|
|
214
|
+
* items: [ 'mediaEmbed:alignBlockLeft', 'mediaEmbed:alignBlockRight' ],
|
|
215
|
+
* defaultItem: 'mediaEmbed:alignBlockLeft'
|
|
216
|
+
* }
|
|
217
|
+
* ]
|
|
218
|
+
* }
|
|
219
|
+
* ```
|
|
220
|
+
*/
|
|
221
|
+
toolbar?: Array<ToolbarConfigItem | MediaStyleDropdownDefinition>;
|
|
222
|
+
/**
|
|
223
|
+
* The {@link module:media-embed/mediaembedstyle~MediaEmbedStyle media embed style} feature configuration.
|
|
224
|
+
*
|
|
225
|
+
* Available out of the box: five built-in alignment styles — `'alignLeft'`, `'alignBlockLeft'`,
|
|
226
|
+
* `'alignCenter'` (default), `'alignBlockRight'`, `'alignRight'`.
|
|
227
|
+
*
|
|
228
|
+
* Restrict the set to a subset of built-ins:
|
|
229
|
+
*
|
|
230
|
+
* ```ts
|
|
231
|
+
* mediaEmbed: {
|
|
232
|
+
* styles: {
|
|
233
|
+
* options: [ 'alignBlockLeft', 'alignCenter', 'alignBlockRight' ]
|
|
234
|
+
* }
|
|
235
|
+
* }
|
|
236
|
+
* ```
|
|
237
|
+
*
|
|
238
|
+
* Override fields of a built-in by re-declaring with the same `name`:
|
|
239
|
+
*
|
|
240
|
+
* ```ts
|
|
241
|
+
* mediaEmbed: {
|
|
242
|
+
* styles: {
|
|
243
|
+
* options: [
|
|
244
|
+
* { name: 'alignCenter', title: 'Center' },
|
|
245
|
+
* 'alignLeft',
|
|
246
|
+
* 'alignRight'
|
|
247
|
+
* ]
|
|
248
|
+
* }
|
|
249
|
+
* }
|
|
250
|
+
* ```
|
|
251
|
+
*
|
|
252
|
+
* Register a custom (e.g. semantical) style by supplying a complete definition:
|
|
253
|
+
*
|
|
254
|
+
* ```ts
|
|
255
|
+
* import sideIcon from 'path/to/icon.svg';
|
|
256
|
+
*
|
|
257
|
+
* mediaEmbed: {
|
|
258
|
+
* styles: {
|
|
259
|
+
* options: [
|
|
260
|
+
* 'alignCenter',
|
|
261
|
+
* {
|
|
262
|
+
* name: 'side',
|
|
263
|
+
* title: 'Side media',
|
|
264
|
+
* icon: sideIcon,
|
|
265
|
+
* className: 'media-style-side'
|
|
266
|
+
* }
|
|
267
|
+
* ]
|
|
268
|
+
* }
|
|
269
|
+
* }
|
|
270
|
+
* ```
|
|
271
|
+
*
|
|
272
|
+
* When omitted, all five built-in styles are available.
|
|
273
|
+
*/
|
|
274
|
+
styles?: MediaStyleConfig;
|
|
275
|
+
}
|
|
276
|
+
/**
|
|
277
|
+
* The configuration for the {@link module:media-embed/mediaembedstyle~MediaEmbedStyle} feature.
|
|
278
|
+
*
|
|
279
|
+
* See {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
|
|
280
|
+
* for details and examples.
|
|
281
|
+
*/
|
|
282
|
+
export interface MediaStyleConfig {
|
|
283
|
+
/**
|
|
284
|
+
* A list of media style options. Each entry is either:
|
|
285
|
+
*
|
|
286
|
+
* * a string referencing a built-in style by name (`'alignLeft'`, `'alignBlockLeft'`,
|
|
287
|
+
* `'alignCenter'`, `'alignBlockRight'`, `'alignRight'`),
|
|
288
|
+
* * an object overriding fields of a built-in (matched by `name`),
|
|
289
|
+
* * an object defining a new custom style.
|
|
290
|
+
*
|
|
291
|
+
* Defaults to all five built-in styles when omitted.
|
|
292
|
+
*/
|
|
293
|
+
options?: Array<string | MediaStyleOptionDefinition>;
|
|
294
|
+
}
|
|
295
|
+
/**
|
|
296
|
+
* The definition of a single media style option used by the
|
|
297
|
+
* {@link module:media-embed/mediaembedstyle~MediaEmbedStyle media embed style} feature.
|
|
298
|
+
*
|
|
299
|
+
* To customize a built-in style, re-declare it with the same `name` — only the fields
|
|
300
|
+
* you set will be replaced; the rest are inherited from the built-in. To register a
|
|
301
|
+
* brand-new style, provide a fresh `name` and a complete definition (`title`, `icon`,
|
|
302
|
+
* and — unless `isDefault: true` — `className`).
|
|
303
|
+
*
|
|
304
|
+
* ```ts
|
|
305
|
+
* import sideIcon from 'path/to/icon.svg';
|
|
306
|
+
*
|
|
307
|
+
* const sideStyle = {
|
|
308
|
+
* name: 'side',
|
|
309
|
+
* title: 'Side media',
|
|
310
|
+
* icon: sideIcon,
|
|
311
|
+
* className: 'media-style-side'
|
|
312
|
+
* };
|
|
313
|
+
* ```
|
|
314
|
+
*
|
|
315
|
+
* Each option registers a toggle button under the name `'mediaEmbed:{name}'` in the
|
|
316
|
+
* {@link module:ui/componentfactory~ComponentFactory UI component factory}.
|
|
317
|
+
*/
|
|
318
|
+
export interface MediaStyleOptionDefinition {
|
|
319
|
+
/**
|
|
320
|
+
* The unique style name. It is used to:
|
|
321
|
+
*
|
|
322
|
+
* * reference a built-in style or define a custom one,
|
|
323
|
+
* * store the chosen style in the model as the `mediaStyle` attribute,
|
|
324
|
+
* * register the toolbar button under `'mediaEmbed:{name}'`.
|
|
325
|
+
*/
|
|
326
|
+
name: string;
|
|
327
|
+
/**
|
|
328
|
+
* The button title. The title is wrapped in `editor.t()` at button creation,
|
|
329
|
+
* so titles that match keys in the official translation set will be localized
|
|
330
|
+
* automatically.
|
|
331
|
+
*
|
|
332
|
+
* Required when defining a custom style. Inherited from the built-in style with
|
|
333
|
+
* the matching `name` when overriding a built-in.
|
|
334
|
+
*/
|
|
335
|
+
title?: string;
|
|
336
|
+
/**
|
|
337
|
+
* The button icon. Either an SVG XML source string, or one of the keys in
|
|
338
|
+
* `DEFAULT_ICONS` (`'inlineLeft'`, `'left'`, `'center'`, `'right'`, `'inlineRight'`)
|
|
339
|
+
* to use one of the icons shipped with the plugin.
|
|
340
|
+
*
|
|
341
|
+
* Required when defining a custom style. Inherited from the built-in style with
|
|
342
|
+
* the matching `name` when overriding a built-in.
|
|
343
|
+
*/
|
|
344
|
+
icon?: string;
|
|
345
|
+
/**
|
|
346
|
+
* The CSS class added to the view `<figure>` when this style is applied. Required
|
|
347
|
+
* for every non-default style — default styles are encoded as the absence of the
|
|
348
|
+
* `mediaStyle` attribute, so they intentionally have no class.
|
|
349
|
+
*
|
|
350
|
+
* Inherited from the built-in style with the matching `name` when not set.
|
|
351
|
+
*/
|
|
352
|
+
className?: string;
|
|
353
|
+
/**
|
|
354
|
+
* When `true`, this style is the default state — applying it removes the
|
|
355
|
+
* `mediaStyle` attribute from the model element (no class is written to the view).
|
|
356
|
+
* Default styles must not define a `className`.
|
|
357
|
+
*
|
|
358
|
+
* Inherited from the built-in style with the matching `name` when not set.
|
|
359
|
+
*/
|
|
360
|
+
isDefault?: boolean;
|
|
361
|
+
}
|
|
362
|
+
/**
|
|
363
|
+
* A media style option resolved by the normalizer — built-in inheritance has been applied
|
|
364
|
+
* and {@link module:media-embed/mediaembedstyle/utils~normalizeStyles} has already verified
|
|
365
|
+
* the required fields. UI and editing internals consume this shape.
|
|
366
|
+
*
|
|
367
|
+
* @internal
|
|
368
|
+
*/
|
|
369
|
+
export type NormalizedMediaStyleOption = Required<Pick<MediaStyleOptionDefinition, 'name' | 'title' | 'icon'>> & Pick<MediaStyleOptionDefinition, 'className' | 'isDefault'>;
|
|
370
|
+
/**
|
|
371
|
+
* The definition of a split-button dropdown that groups several media style buttons.
|
|
372
|
+
*
|
|
373
|
+
* Integrators can declare custom dropdowns inline in
|
|
374
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar `config.mediaEmbed.toolbar`}
|
|
375
|
+
* alongside button-name strings; `defaultItem` is the discriminator that distinguishes a
|
|
376
|
+
* split-button media style dropdown from a generic toolbar grouping.
|
|
377
|
+
*
|
|
378
|
+
* ```ts
|
|
379
|
+
* mediaEmbed: {
|
|
380
|
+
* toolbar: [
|
|
381
|
+
* 'mediaEmbed:alignCenter',
|
|
382
|
+
* {
|
|
383
|
+
* name: 'mediaEmbed:myAlignments',
|
|
384
|
+
* title: 'Alignment',
|
|
385
|
+
* items: [ 'mediaEmbed:alignBlockLeft', 'mediaEmbed:alignBlockRight' ],
|
|
386
|
+
* defaultItem: 'mediaEmbed:alignBlockLeft'
|
|
387
|
+
* }
|
|
388
|
+
* ]
|
|
389
|
+
* }
|
|
390
|
+
* ```
|
|
391
|
+
*
|
|
392
|
+
* All names (`name`, `items[]`, `defaultItem`) use the full prefixed component-factory form.
|
|
393
|
+
* Items referencing styles that are not in the resolved
|
|
394
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`} list
|
|
395
|
+
* are filtered out at registration time. A dropdown that ends up with fewer than two items is
|
|
396
|
+
* skipped. If the configured `defaultItem` was filtered out, the first surviving item is used.
|
|
397
|
+
*/
|
|
398
|
+
export interface MediaStyleDropdownDefinition {
|
|
399
|
+
/**
|
|
400
|
+
* The dropdown name. Registered as-is in the UI component factory, so it must use the
|
|
401
|
+
* `mediaEmbed:` prefix (for example, `'mediaEmbed:myAlignments'`).
|
|
402
|
+
*/
|
|
403
|
+
name: string;
|
|
404
|
+
/**
|
|
405
|
+
* The dropdown title, used both for the split-button label and the dropdown arrow tooltip.
|
|
406
|
+
*/
|
|
407
|
+
title: string;
|
|
408
|
+
/**
|
|
409
|
+
* Prefixed style names included in the dropdown (for example,
|
|
410
|
+
* `[ 'mediaEmbed:alignBlockLeft', 'mediaEmbed:alignBlockRight' ]`).
|
|
411
|
+
*/
|
|
412
|
+
items: Array<string>;
|
|
413
|
+
/**
|
|
414
|
+
* The default child whose icon and label the split button mirrors when no child is active.
|
|
415
|
+
* Must be one of the `items`.
|
|
198
416
|
*/
|
|
199
|
-
|
|
417
|
+
defaultItem: string;
|
|
200
418
|
}
|
|
201
419
|
/**
|
|
202
420
|
* The media embed provider descriptor. Used in
|
|
@@ -236,15 +454,20 @@ export interface MediaEmbedConfig {
|
|
|
236
454
|
* }
|
|
237
455
|
* ```
|
|
238
456
|
*
|
|
239
|
-
* To implement responsive media,
|
|
457
|
+
* To implement responsive media, set an `aspect-ratio` on the iframe. The HTML `width` and
|
|
458
|
+
* `height` attributes act as the intrinsic size (useful for layout hints in containers like
|
|
459
|
+
* table cells), while CSS `width: 100%` and `height: auto` make the element scale with its
|
|
460
|
+
* container while preserving the declared aspect ratio. The iframe is wrapped in a plain
|
|
461
|
+
* `<div>` so external styles or queries that target this wrapper continue to work:
|
|
240
462
|
*
|
|
241
463
|
* ```ts
|
|
242
464
|
* {
|
|
243
465
|
* ...
|
|
244
466
|
* html: match =>
|
|
245
|
-
* '<div
|
|
246
|
-
*
|
|
247
|
-
*
|
|
467
|
+
* '<div>' +
|
|
468
|
+
* `<iframe src="..." width="1280" height="720" ` +
|
|
469
|
+
* `style="width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; display: block;" ` +
|
|
470
|
+
* 'frameborder="0" allowfullscreen>' +
|
|
248
471
|
* '</iframe>' +
|
|
249
472
|
* '</div>'
|
|
250
473
|
* }
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* @module media-embed/mediaembedresize/constants
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* The view class applied to a resized media embed figure.
|
|
10
|
+
*
|
|
11
|
+
* Shared between the editing plugin (which toggles it via downcast of `resizedWidth` and consumes
|
|
12
|
+
* it on upcast) and the handles plugin (which adds it during drag and strips it on commit), so
|
|
13
|
+
* both layers agree on the exact class name.
|
|
14
|
+
*
|
|
15
|
+
* @internal
|
|
16
|
+
*/
|
|
17
|
+
export declare const RESIZED_MEDIA_CLASS = "media_resized";
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
+
*/
|
|
5
|
+
import { Plugin } from '@ckeditor/ckeditor5-core';
|
|
6
|
+
import { MediaEmbedEditing } from '../mediaembedediting.js';
|
|
7
|
+
/**
|
|
8
|
+
* The media embed resize editing feature.
|
|
9
|
+
*
|
|
10
|
+
* It adds the ability to resize each media embed using handles.
|
|
11
|
+
*/
|
|
12
|
+
export declare class MediaEmbedResizeEditing extends Plugin {
|
|
13
|
+
/**
|
|
14
|
+
* @inheritDoc
|
|
15
|
+
*/
|
|
16
|
+
static get requires(): readonly [typeof MediaEmbedEditing];
|
|
17
|
+
/**
|
|
18
|
+
* @inheritDoc
|
|
19
|
+
*/
|
|
20
|
+
static get pluginName(): "MediaEmbedResizeEditing";
|
|
21
|
+
/**
|
|
22
|
+
* @inheritDoc
|
|
23
|
+
* @internal
|
|
24
|
+
*/
|
|
25
|
+
static get licenseFeatureCode(): string;
|
|
26
|
+
/**
|
|
27
|
+
* @inheritDoc
|
|
28
|
+
*/
|
|
29
|
+
static get isOfficialPlugin(): true;
|
|
30
|
+
/**
|
|
31
|
+
* @inheritDoc
|
|
32
|
+
*/
|
|
33
|
+
static get isPremiumPlugin(): true;
|
|
34
|
+
/**
|
|
35
|
+
* @inheritDoc
|
|
36
|
+
*/
|
|
37
|
+
init(): void;
|
|
38
|
+
/**
|
|
39
|
+
* @inheritDoc
|
|
40
|
+
*/
|
|
41
|
+
afterInit(): void;
|
|
42
|
+
private _registerSchema;
|
|
43
|
+
/**
|
|
44
|
+
* Registers media embed resize converters.
|
|
45
|
+
*/
|
|
46
|
+
private _registerConverters;
|
|
47
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
+
*/
|
|
5
|
+
import { Plugin } from '@ckeditor/ckeditor5-core';
|
|
6
|
+
import { WidgetResize } from '@ckeditor/ckeditor5-widget';
|
|
7
|
+
/**
|
|
8
|
+
* The media embed resize by handles feature.
|
|
9
|
+
*
|
|
10
|
+
* It adds the ability to resize each media embed using handles.
|
|
11
|
+
*/
|
|
12
|
+
export declare class MediaEmbedResizeHandles extends Plugin {
|
|
13
|
+
/**
|
|
14
|
+
* @inheritDoc
|
|
15
|
+
*/
|
|
16
|
+
static get requires(): readonly [typeof WidgetResize];
|
|
17
|
+
/**
|
|
18
|
+
* @inheritDoc
|
|
19
|
+
*/
|
|
20
|
+
static get pluginName(): "MediaEmbedResizeHandles";
|
|
21
|
+
/**
|
|
22
|
+
* @inheritDoc
|
|
23
|
+
*/
|
|
24
|
+
static get isOfficialPlugin(): true;
|
|
25
|
+
/**
|
|
26
|
+
* @inheritDoc
|
|
27
|
+
*/
|
|
28
|
+
init(): void;
|
|
29
|
+
/**
|
|
30
|
+
* Attaches a resizer to every newly inserted media widget. Walks only the ranges
|
|
31
|
+
* reported by the differ — never the whole document — so unrelated inserts (e.g.
|
|
32
|
+
* pressing Enter to create a paragraph) cost only the differ check.
|
|
33
|
+
*
|
|
34
|
+
* Each resizer's `isEnabled` is bound to the plugin in {@link #_attachResizer},
|
|
35
|
+
* so it auto-tracks the resize command's state.
|
|
36
|
+
*/
|
|
37
|
+
private _setupResizerCreator;
|
|
38
|
+
/**
|
|
39
|
+
* Attaches a resizer to a single media widget.
|
|
40
|
+
*/
|
|
41
|
+
private _attachResizer;
|
|
42
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* @module media-embed/mediaembedresize/resizemediaembedcommand
|
|
7
|
+
*/
|
|
8
|
+
import { Command } from '@ckeditor/ckeditor5-core';
|
|
9
|
+
/**
|
|
10
|
+
* The resize media embed command.
|
|
11
|
+
*/
|
|
12
|
+
export declare class ResizeMediaEmbedCommand extends Command {
|
|
13
|
+
/**
|
|
14
|
+
* The current width of the selected media embed, or `null` if not resized.
|
|
15
|
+
*/
|
|
16
|
+
value: string | null;
|
|
17
|
+
/**
|
|
18
|
+
* @inheritDoc
|
|
19
|
+
*/
|
|
20
|
+
refresh(): void;
|
|
21
|
+
/**
|
|
22
|
+
* Executes the command.
|
|
23
|
+
*
|
|
24
|
+
* ```ts
|
|
25
|
+
* // Sets the width as a percentage of the parent width:
|
|
26
|
+
* editor.execute( 'resizeMediaEmbed', { width: '50%' } );
|
|
27
|
+
*
|
|
28
|
+
* // Removes the resize and restores the default width:
|
|
29
|
+
* editor.execute( 'resizeMediaEmbed', { width: null } );
|
|
30
|
+
* ```
|
|
31
|
+
*
|
|
32
|
+
* @param options
|
|
33
|
+
* @param options.width The new width of the media embed as a CSS `width` value
|
|
34
|
+
* (e.g. `'50%'`), or `null` to remove the resize.
|
|
35
|
+
* @fires execute
|
|
36
|
+
*/
|
|
37
|
+
execute(options: {
|
|
38
|
+
width: string | null;
|
|
39
|
+
}): void;
|
|
40
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* @module media-embed/mediaembedresize
|
|
7
|
+
*/
|
|
8
|
+
import { Plugin } from '@ckeditor/ckeditor5-core';
|
|
9
|
+
import { MediaEmbedResizeEditing } from './mediaembedresize/mediaembedresizeediting.js';
|
|
10
|
+
import { MediaEmbedResizeHandles } from './mediaembedresize/mediaembedresizehandles.js';
|
|
11
|
+
import '../theme/mediaembedresize.css';
|
|
12
|
+
/**
|
|
13
|
+
* The media embed resize plugin.
|
|
14
|
+
*
|
|
15
|
+
* It adds a possibility to resize each media embed using handles.
|
|
16
|
+
*/
|
|
17
|
+
export declare class MediaEmbedResize extends Plugin {
|
|
18
|
+
/**
|
|
19
|
+
* @inheritDoc
|
|
20
|
+
*/
|
|
21
|
+
static get requires(): readonly [typeof MediaEmbedResizeEditing, typeof MediaEmbedResizeHandles];
|
|
22
|
+
/**
|
|
23
|
+
* @inheritDoc
|
|
24
|
+
*/
|
|
25
|
+
static get pluginName(): "MediaEmbedResize";
|
|
26
|
+
/**
|
|
27
|
+
* @inheritDoc
|
|
28
|
+
*/
|
|
29
|
+
static get isOfficialPlugin(): true;
|
|
30
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
+
*/
|
|
5
|
+
import type { MediaStyleDropdownDefinition, NormalizedMediaStyleOption } from '../mediaembedconfig.js';
|
|
6
|
+
/**
|
|
7
|
+
* Built-in style options provided by the plugin. Integrators can refer to these by
|
|
8
|
+
* name in {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
|
|
9
|
+
* to opt out, override individual fields, or coexist with custom styles.
|
|
10
|
+
*
|
|
11
|
+
* @internal
|
|
12
|
+
*/
|
|
13
|
+
export declare const DEFAULT_OPTIONS: Record<string, NormalizedMediaStyleOption>;
|
|
14
|
+
/**
|
|
15
|
+
* Short icon-name aliases that can be used as the `icon` value in a media style
|
|
16
|
+
* option definition. Matches the alias set exposed by the image styles feature so
|
|
17
|
+
* the two APIs feel symmetrical.
|
|
18
|
+
*
|
|
19
|
+
* @internal
|
|
20
|
+
*/
|
|
21
|
+
export declare const DEFAULT_ICONS: Record<string, string>;
|
|
22
|
+
/**
|
|
23
|
+
* Built-in dropdown groupings. Each entry references built-in style component names. If any
|
|
24
|
+
* items are filtered out by configuration, the dropdown is rebuilt from the remaining names
|
|
25
|
+
* (or skipped entirely if fewer than two remain).
|
|
26
|
+
*
|
|
27
|
+
* @internal
|
|
28
|
+
*/
|
|
29
|
+
export declare const DEFAULT_DROPDOWN_DEFINITIONS: Array<MediaStyleDropdownDefinition>;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* @module media-embed/mediaembedstyle/mediaembedstylecommand
|
|
7
|
+
*/
|
|
8
|
+
import { Command, type Editor } from '@ckeditor/ckeditor5-core';
|
|
9
|
+
import type { NormalizedMediaStyleOption } from '../mediaembedconfig.js';
|
|
10
|
+
/**
|
|
11
|
+
* The media embed style command. It is used to apply a style option (e.g. an alignment) to a
|
|
12
|
+
* selected media embed.
|
|
13
|
+
*
|
|
14
|
+
* The set of accepted style values comes from the resolved
|
|
15
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
|
|
16
|
+
* options. Values not in that set are silently rejected by {@link #execute}.
|
|
17
|
+
*/
|
|
18
|
+
export declare class MediaEmbedStyleCommand extends Command {
|
|
19
|
+
/**
|
|
20
|
+
* The currently-applied style name. `false` when no style applies — either no media is
|
|
21
|
+
* selected, or the selected media has no `mediaStyle` attribute and no style in
|
|
22
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
|
|
23
|
+
* is marked `isDefault: true`.
|
|
24
|
+
*/
|
|
25
|
+
value: string | false;
|
|
26
|
+
/**
|
|
27
|
+
* Resolved styles indexed by `name`. Used to look up the `isDefault` flag at execute time
|
|
28
|
+
* (any default-marked style clears the attribute) and to validate that a requested style
|
|
29
|
+
* is part of the resolved options list.
|
|
30
|
+
*/
|
|
31
|
+
private readonly _styles;
|
|
32
|
+
/**
|
|
33
|
+
* The `name` of the first style with `isDefault: true` in the resolved options, or `null`
|
|
34
|
+
* when the integrator did not designate a default. Exposed via {@link #value} when the
|
|
35
|
+
* selected media has no `mediaStyle` attribute, so the default-state UI button can light up.
|
|
36
|
+
* Does not gate the "clear attribute" branch in {@link #execute} — that uses the per-style
|
|
37
|
+
* `isDefault` flag so multi-default configs behave consistently with the downcast.
|
|
38
|
+
*/
|
|
39
|
+
private readonly _defaultStyleName;
|
|
40
|
+
/**
|
|
41
|
+
* Creates an instance of the media embed style command.
|
|
42
|
+
*
|
|
43
|
+
* @param editor The editor instance.
|
|
44
|
+
* @param styles The resolved list of style options that this command will accept.
|
|
45
|
+
*/
|
|
46
|
+
constructor(editor: Editor, styles: Array<NormalizedMediaStyleOption>);
|
|
47
|
+
/**
|
|
48
|
+
* @inheritDoc
|
|
49
|
+
*/
|
|
50
|
+
refresh(): void;
|
|
51
|
+
/**
|
|
52
|
+
* Executes the command and applies the chosen style to the currently selected media embed.
|
|
53
|
+
*
|
|
54
|
+
* ```ts
|
|
55
|
+
* editor.execute( 'mediaStyle', { value: 'alignLeft' } );
|
|
56
|
+
* editor.execute( 'mediaStyle', { value: 'alignCenter' } ); // removes the attribute — alignCenter is the built-in default
|
|
57
|
+
* editor.execute( 'mediaStyle', { value: null } ); // removes the attribute
|
|
58
|
+
* ```
|
|
59
|
+
*
|
|
60
|
+
* The default style is encoded on the model as the absence of the `mediaStyle` attribute.
|
|
61
|
+
* Passing any `isDefault: true` style name (or `null`) therefore clears the attribute. Values
|
|
62
|
+
* that are neither falsy, an `isDefault` style, nor present in the resolved options list are
|
|
63
|
+
* silently rejected.
|
|
64
|
+
*
|
|
65
|
+
* @param options
|
|
66
|
+
* @param options.value The name of the style to apply, or `null` to clear the alignment.
|
|
67
|
+
* @fires execute
|
|
68
|
+
*/
|
|
69
|
+
execute(options: {
|
|
70
|
+
value: string | null;
|
|
71
|
+
}): void;
|
|
72
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
|
+
*/
|
|
5
|
+
import { Plugin } from '@ckeditor/ckeditor5-core';
|
|
6
|
+
import { MediaEmbedEditing } from '../mediaembedediting.js';
|
|
7
|
+
import type { NormalizedMediaStyleOption } from '../mediaembedconfig.js';
|
|
8
|
+
/**
|
|
9
|
+
* The media embed style engine plugin. It extends the schema with the `mediaStyle` attribute,
|
|
10
|
+
* registers the {@link module:media-embed/mediaembedstyle/mediaembedstylecommand~MediaEmbedStyleCommand} command,
|
|
11
|
+
* and adds the converters that apply alignment CSS classes to the figure.
|
|
12
|
+
*/
|
|
13
|
+
export declare class MediaEmbedStyleEditing extends Plugin {
|
|
14
|
+
/**
|
|
15
|
+
* The resolved list of media style options. Built once from
|
|
16
|
+
* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
|
|
17
|
+
* during {@link #init} and consumed by both the command and the UI plugin (single source of truth).
|
|
18
|
+
*
|
|
19
|
+
* @internal
|
|
20
|
+
* @readonly
|
|
21
|
+
*/
|
|
22
|
+
normalizedStyles: Array<NormalizedMediaStyleOption>;
|
|
23
|
+
/**
|
|
24
|
+
* @inheritDoc
|
|
25
|
+
*/
|
|
26
|
+
static get requires(): readonly [typeof MediaEmbedEditing];
|
|
27
|
+
/**
|
|
28
|
+
* @inheritDoc
|
|
29
|
+
*/
|
|
30
|
+
static get pluginName(): "MediaEmbedStyleEditing";
|
|
31
|
+
/**
|
|
32
|
+
* @inheritDoc
|
|
33
|
+
*/
|
|
34
|
+
static get isOfficialPlugin(): true;
|
|
35
|
+
/**
|
|
36
|
+
* @inheritDoc
|
|
37
|
+
*/
|
|
38
|
+
init(): void;
|
|
39
|
+
/**
|
|
40
|
+
* Registers the downcast and upcast converters for the `mediaStyle` attribute.
|
|
41
|
+
*/
|
|
42
|
+
private _registerConverters;
|
|
43
|
+
}
|