@ckeditor/ckeditor5-media-embed 36.0.1 → 37.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/media-embed.js +1 -1
- package/package.json +27 -22
- package/src/augmentation.d.ts +25 -0
- package/src/augmentation.js +5 -0
- package/src/automediaembed.d.ts +48 -0
- package/src/automediaembed.js +109 -160
- package/src/converters.d.ts +38 -0
- package/src/converters.js +33 -40
- package/src/index.d.ts +15 -0
- package/src/index.js +1 -2
- package/src/mediaembed.d.ts +30 -0
- package/src/mediaembed.js +12 -266
- package/src/mediaembedcommand.d.ts +36 -0
- package/src/mediaembedcommand.js +52 -68
- package/src/mediaembedconfig.d.ts +278 -0
- package/src/mediaembedconfig.js +5 -0
- package/src/mediaembedediting.d.ts +31 -0
- package/src/mediaembedediting.js +212 -261
- package/src/mediaembedtoolbar.d.ts +29 -0
- package/src/mediaembedtoolbar.js +27 -44
- package/src/mediaembedui.d.ts +26 -0
- package/src/mediaembedui.js +82 -110
- package/src/mediaregistry.d.ts +66 -0
- package/src/mediaregistry.js +208 -311
- package/src/ui/mediaformview.d.ts +115 -0
- package/src/ui/mediaformview.js +180 -331
- package/src/utils.d.ts +67 -0
- package/src/utils.js +44 -81
package/src/mediaembed.js
CHANGED
@@ -2,20 +2,15 @@
|
|
2
2
|
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
3
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
4
|
*/
|
5
|
-
|
6
5
|
/**
|
7
6
|
* @module media-embed/mediaembed
|
8
7
|
*/
|
9
|
-
|
10
8
|
import { Plugin } from 'ckeditor5/src/core';
|
11
9
|
import { Widget } from 'ckeditor5/src/widget';
|
12
|
-
|
13
10
|
import MediaEmbedEditing from './mediaembedediting';
|
14
11
|
import AutoMediaEmbed from './automediaembed';
|
15
12
|
import MediaEmbedUI from './mediaembedui';
|
16
|
-
|
17
13
|
import '../theme/mediaembed.css';
|
18
|
-
|
19
14
|
/**
|
20
15
|
* The media embed plugin.
|
21
16
|
*
|
@@ -26,267 +21,18 @@ import '../theme/mediaembed.css';
|
|
26
21
|
* * The {@link module:media-embed/mediaembedediting~MediaEmbedEditing media embed editing feature},
|
27
22
|
* * The {@link module:media-embed/mediaembedui~MediaEmbedUI media embed UI feature} and
|
28
23
|
* * The {@link module:media-embed/automediaembed~AutoMediaEmbed auto-media embed feature}.
|
29
|
-
*
|
30
|
-
* @extends module:core/plugin~Plugin
|
31
24
|
*/
|
32
25
|
export default class MediaEmbed extends Plugin {
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
}
|
26
|
+
/**
|
27
|
+
* @inheritDoc
|
28
|
+
*/
|
29
|
+
static get requires() {
|
30
|
+
return [MediaEmbedEditing, MediaEmbedUI, AutoMediaEmbed, Widget];
|
31
|
+
}
|
32
|
+
/**
|
33
|
+
* @inheritDoc
|
34
|
+
*/
|
35
|
+
static get pluginName() {
|
36
|
+
return 'MediaEmbed';
|
37
|
+
}
|
46
38
|
}
|
47
|
-
|
48
|
-
/**
|
49
|
-
* The media embed provider descriptor. Used in
|
50
|
-
* {@link module:media-embed/mediaembed~MediaEmbedConfig#providers `config.mediaEmbed.providers`} and
|
51
|
-
* {@link module:media-embed/mediaembed~MediaEmbedConfig#extraProviders `config.mediaEmbed.extraProviders`}.
|
52
|
-
*
|
53
|
-
* See {@link module:media-embed/mediaembed~MediaEmbedConfig} to learn more.
|
54
|
-
*
|
55
|
-
* {
|
56
|
-
* name: 'example',
|
57
|
-
*
|
58
|
-
* // The following RegExp matches https://www.example.com/media/{media id},
|
59
|
-
* // (either with "http(s)://" and "www" or without), so the valid URLs are:
|
60
|
-
* //
|
61
|
-
* // * https://www.example.com/media/{media id},
|
62
|
-
* // * http://www.example.com/media/{media id},
|
63
|
-
* // * www.example.com/media/{media id},
|
64
|
-
* // * example.com/media/{media id}
|
65
|
-
* url: /^example\.com\/media\/(\w+)/,
|
66
|
-
*
|
67
|
-
* // The rendering function of the provider.
|
68
|
-
* // Used to represent the media when editing the content (i.e. in the view)
|
69
|
-
* // and also in the data output of the editor if semantic data output is disabled.
|
70
|
-
* html: match => `The HTML representing the media with ID=${ match[ 1 ] }.`
|
71
|
-
* }
|
72
|
-
*
|
73
|
-
* You can allow any sort of media in the editor using the "allow–all" `RegExp`.
|
74
|
-
* But mind that, since URLs are processed in the order of configuration, if one of the previous
|
75
|
-
* `RegExps` matches the URL, it will have a precedence over this one.
|
76
|
-
*
|
77
|
-
* {
|
78
|
-
* name: 'allow-all',
|
79
|
-
* url: /^.+/
|
80
|
-
* }
|
81
|
-
*
|
82
|
-
* To implement responsive media, you can use the following HTML structure:
|
83
|
-
*
|
84
|
-
* {
|
85
|
-
* ...
|
86
|
-
* html: match =>
|
87
|
-
* '<div style="position:relative; padding-bottom:100%; height:0">' +
|
88
|
-
* '<iframe src="..." frameborder="0" ' +
|
89
|
-
* 'style="position:absolute; width:100%; height:100%; top:0; left:0">' +
|
90
|
-
* '</iframe>' +
|
91
|
-
* '</div>'
|
92
|
-
* }
|
93
|
-
*
|
94
|
-
* @typedef {Object} module:media-embed/mediaembed~MediaEmbedProvider
|
95
|
-
* @property {String} name The name of the provider. Used e.g. when
|
96
|
-
* {@link module:media-embed/mediaembed~MediaEmbedConfig#removeProviders removing providers}.
|
97
|
-
* @property {RegExp|Array.<RegExp>} url The `RegExp` object (or array of objects) defining the URL of the media.
|
98
|
-
* If any URL matches the `RegExp`, it becomes the media in the editor model, as defined by the provider. The result
|
99
|
-
* of matching (output of `String.prototype.match()`) is passed to the `html` rendering function of the media.
|
100
|
-
*
|
101
|
-
* **Note:** You do not need to include the protocol (`http://`, `https://`) and `www` subdomain in your `RegExps`,
|
102
|
-
* they are stripped from the URLs before matching anyway.
|
103
|
-
* @property {Function} [html] (optional) The rendering function of the media. The function receives the entire matching
|
104
|
-
* array from the corresponding `url` `RegExp` as an argument, allowing rendering a dedicated
|
105
|
-
* preview of the media identified by a certain ID or a hash. When not defined, the media embed feature
|
106
|
-
* will use a generic media representation in the view and output data.
|
107
|
-
* Note that when
|
108
|
-
* {@link module:media-embed/mediaembed~MediaEmbedConfig#previewsInData `config.mediaEmbed.previewsInData`}
|
109
|
-
* is `true`, the rendering function **will always** be used for the media in the editor data output.
|
110
|
-
*/
|
111
|
-
|
112
|
-
/**
|
113
|
-
* The configuration of the {@link module:media-embed/mediaembed~MediaEmbed} feature.
|
114
|
-
*
|
115
|
-
* Read more in {@link module:media-embed/mediaembed~MediaEmbedConfig}.
|
116
|
-
*
|
117
|
-
* @member {module:media-embed/mediaembed~MediaEmbedConfig} module:core/editor/editorconfig~EditorConfig#mediaEmbed
|
118
|
-
*/
|
119
|
-
|
120
|
-
/**
|
121
|
-
* The configuration of the media embed features.
|
122
|
-
*
|
123
|
-
* Read more about {@glink features/media-embed#configuration configuring the media embed feature}.
|
124
|
-
*
|
125
|
-
* ClassicEditor
|
126
|
-
* .create( editorElement, {
|
127
|
-
* mediaEmbed: ... // Media embed feature options.
|
128
|
-
* } )
|
129
|
-
* .then( ... )
|
130
|
-
* .catch( ... );
|
131
|
-
*
|
132
|
-
* See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
|
133
|
-
*
|
134
|
-
* @interface MediaEmbedConfig
|
135
|
-
*/
|
136
|
-
|
137
|
-
/**
|
138
|
-
* The default media providers supported by the editor.
|
139
|
-
*
|
140
|
-
* The names of providers with rendering functions (previews):
|
141
|
-
*
|
142
|
-
* * "dailymotion",
|
143
|
-
* * "spotify",
|
144
|
-
* * "youtube",
|
145
|
-
* * "vimeo"
|
146
|
-
*
|
147
|
-
* The names of providers without rendering functions:
|
148
|
-
*
|
149
|
-
* * "instagram",
|
150
|
-
* * "twitter",
|
151
|
-
* * "googleMaps",
|
152
|
-
* * "flickr",
|
153
|
-
* * "facebook"
|
154
|
-
*
|
155
|
-
* See the {@link module:media-embed/mediaembed~MediaEmbedProvider provider syntax} to learn more about
|
156
|
-
* different kinds of media and media providers.
|
157
|
-
*
|
158
|
-
* **Note**: The default media provider configuration may not support all possible media URLs,
|
159
|
-
* only the most common are included.
|
160
|
-
*
|
161
|
-
* Media without rendering functions are always represented in the data using the "semantic" markup. See
|
162
|
-
* {@link module:media-embed/mediaembed~MediaEmbedConfig#previewsInData `config.mediaEmbed.previewsInData`} to
|
163
|
-
* learn more about possible data outputs.
|
164
|
-
*
|
165
|
-
* The priority of media providers corresponds to the order of configuration. The first provider
|
166
|
-
* to match the URL is always used, even if there are other providers that support a particular URL.
|
167
|
-
* The URL is never matched against the remaining providers.
|
168
|
-
*
|
169
|
-
* To discard **all** default media providers, simply override this configuration with your own
|
170
|
-
* {@link module:media-embed/mediaembed~MediaEmbedProvider definitions}:
|
171
|
-
*
|
172
|
-
* ClassicEditor
|
173
|
-
* .create( editorElement, {
|
174
|
-
* plugins: [ MediaEmbed, ... ],
|
175
|
-
* mediaEmbed: {
|
176
|
-
* providers: [
|
177
|
-
* {
|
178
|
-
* name: 'myProvider',
|
179
|
-
* url: /^example\.com\/media\/(\w+)/,
|
180
|
-
* html: match => '...'
|
181
|
-
* },
|
182
|
-
* ...
|
183
|
-
* ]
|
184
|
-
* }
|
185
|
-
* } )
|
186
|
-
* .then( ... )
|
187
|
-
* .catch( ... );
|
188
|
-
*
|
189
|
-
* You can take inspiration from the default configuration of this feature which you can find in:
|
190
|
-
* https://github.com/ckeditor/ckeditor5-media-embed/blob/master/src/mediaembedediting.js
|
191
|
-
*
|
192
|
-
* To **extend** the list of default providers, use
|
193
|
-
* {@link module:media-embed/mediaembed~MediaEmbedConfig#extraProviders `config.mediaEmbed.extraProviders`}.
|
194
|
-
*
|
195
|
-
* To **remove** certain providers, use
|
196
|
-
* {@link module:media-embed/mediaembed~MediaEmbedConfig#removeProviders `config.mediaEmbed.removeProviders`}.
|
197
|
-
*
|
198
|
-
* @member {Array.<module:media-embed/mediaembed~MediaEmbedProvider>} module:media-embed/mediaembed~MediaEmbedConfig#providers
|
199
|
-
*/
|
200
|
-
|
201
|
-
/**
|
202
|
-
* The additional media providers supported by the editor. This configuration helps extend the default
|
203
|
-
* {@link module:media-embed/mediaembed~MediaEmbedConfig#providers}.
|
204
|
-
*
|
205
|
-
* ClassicEditor
|
206
|
-
* .create( editorElement, {
|
207
|
-
* plugins: [ MediaEmbed, ... ],
|
208
|
-
* mediaEmbed: {
|
209
|
-
* extraProviders: [
|
210
|
-
* {
|
211
|
-
* name: 'extraProvider',
|
212
|
-
* url: /^example\.com\/media\/(\w+)/,
|
213
|
-
* html: match => '...'
|
214
|
-
* },
|
215
|
-
* ...
|
216
|
-
* ]
|
217
|
-
* }
|
218
|
-
* } )
|
219
|
-
* .then( ... )
|
220
|
-
* .catch( ... );
|
221
|
-
*
|
222
|
-
* See the {@link module:media-embed/mediaembed~MediaEmbedProvider provider syntax} to learn more.
|
223
|
-
*
|
224
|
-
* @member {Array.<module:media-embed/mediaembed~MediaEmbedProvider>} module:media-embed/mediaembed~MediaEmbedConfig#extraProviders
|
225
|
-
*/
|
226
|
-
|
227
|
-
/**
|
228
|
-
* The list of media providers that should not be used despite being available in
|
229
|
-
* {@link module:media-embed/mediaembed~MediaEmbedConfig#providers `config.mediaEmbed.providers`} and
|
230
|
-
* {@link module:media-embed/mediaembed~MediaEmbedConfig#extraProviders `config.mediaEmbed.extraProviders`}
|
231
|
-
*
|
232
|
-
* mediaEmbed: {
|
233
|
-
* removeProviders: [ 'youtube', 'twitter' ]
|
234
|
-
* }
|
235
|
-
*
|
236
|
-
* @member {Array.<String>} module:media-embed/mediaembed~MediaEmbedConfig#removeProviders
|
237
|
-
*/
|
238
|
-
|
239
|
-
/**
|
240
|
-
* Overrides the element name used for "semantic" data.
|
241
|
-
*
|
242
|
-
* This is not relevant if {@link module:media-embed/mediaembed~MediaEmbedConfig#previewsInData `config.mediaEmbed.previewsInData`}
|
243
|
-
* is set to `true`.
|
244
|
-
*
|
245
|
-
* When not set, the feature produces the `<oembed>` tag:
|
246
|
-
*
|
247
|
-
* <figure class="media">
|
248
|
-
* <oembed url="https://url"></oembed>
|
249
|
-
* </figure>
|
250
|
-
*
|
251
|
-
* To override the element name with, for instance, the `o-embed` name:
|
252
|
-
*
|
253
|
-
* mediaEmbed: {
|
254
|
-
* elementName: 'o-embed'
|
255
|
-
* }
|
256
|
-
*
|
257
|
-
* This will produce semantic data with the `<o-embed>` tag:
|
258
|
-
*
|
259
|
-
* <figure class="media">
|
260
|
-
* <o-embed url="https://url"></o-embed>
|
261
|
-
* </figure>
|
262
|
-
*
|
263
|
-
* @default 'oembed'
|
264
|
-
* @member {String} [module:media-embed/mediaembed~MediaEmbedConfig#elementName]
|
265
|
-
*/
|
266
|
-
|
267
|
-
/**
|
268
|
-
* Controls the data format produced by the feature.
|
269
|
-
*
|
270
|
-
* When `false` (default), the feature produces "semantic" data, i.e. it does not include the preview of
|
271
|
-
* the media, just the `<oembed>` tag with the `url` attribute:
|
272
|
-
*
|
273
|
-
* <figure class="media">
|
274
|
-
* <oembed url="https://url"></oembed>
|
275
|
-
* </figure>
|
276
|
-
*
|
277
|
-
* When `true`, the media is represented in the output in the same way it looks in the editor,
|
278
|
-
* i.e. the media preview is saved to the database:
|
279
|
-
*
|
280
|
-
* <figure class="media">
|
281
|
-
* <div data-oembed-url="https://url">
|
282
|
-
* <iframe src="https://preview"></iframe>
|
283
|
-
* </div>
|
284
|
-
* </figure>
|
285
|
-
*
|
286
|
-
* **Note:** Media without preview are always represented in the data using the "semantic" markup
|
287
|
-
* regardless of the value of the `previewsInData`. Learn more about different kinds of media
|
288
|
-
* in the {@link module:media-embed/mediaembed~MediaEmbedConfig#providers `config.mediaEmbed.providers`}
|
289
|
-
* configuration description.
|
290
|
-
*
|
291
|
-
* @member {Boolean} [module:media-embed/mediaembed~MediaEmbedConfig#previewsInData=false]
|
292
|
-
*/
|
@@ -0,0 +1,36 @@
|
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
+
*/
|
5
|
+
import { Command } from 'ckeditor5/src/core';
|
6
|
+
/**
|
7
|
+
* The insert media command.
|
8
|
+
*
|
9
|
+
* The command is registered by the {@link module:media-embed/mediaembedediting~MediaEmbedEditing} as `'mediaEmbed'`.
|
10
|
+
*
|
11
|
+
* To insert media at the current selection, execute the command and specify the URL:
|
12
|
+
*
|
13
|
+
* ```ts
|
14
|
+
* editor.execute( 'mediaEmbed', 'http://url.to.the/media' );
|
15
|
+
* ```
|
16
|
+
*/
|
17
|
+
export default class MediaEmbedCommand extends Command {
|
18
|
+
/**
|
19
|
+
* Media url.
|
20
|
+
*/
|
21
|
+
value: string | undefined;
|
22
|
+
/**
|
23
|
+
* @inheritDoc
|
24
|
+
*/
|
25
|
+
refresh(): void;
|
26
|
+
/**
|
27
|
+
* Executes the command, which either:
|
28
|
+
*
|
29
|
+
* * updates the URL of the selected media,
|
30
|
+
* * inserts the new media into the editor and puts the selection around it.
|
31
|
+
*
|
32
|
+
* @fires execute
|
33
|
+
* @param url The URL of the media.
|
34
|
+
*/
|
35
|
+
execute(url: string): void;
|
36
|
+
}
|
package/src/mediaembedcommand.js
CHANGED
@@ -2,15 +2,9 @@
|
|
2
2
|
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
3
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
4
|
*/
|
5
|
-
|
6
|
-
/**
|
7
|
-
* @module media-embed/mediaembedcommand
|
8
|
-
*/
|
9
|
-
|
10
5
|
import { Command } from 'ckeditor5/src/core';
|
11
6
|
import { findOptimalInsertionRange } from 'ckeditor5/src/widget';
|
12
7
|
import { getSelectedMediaModelWidget, insertMedia } from './utils';
|
13
|
-
|
14
8
|
/**
|
15
9
|
* The insert media command.
|
16
10
|
*
|
@@ -18,70 +12,60 @@ import { getSelectedMediaModelWidget, insertMedia } from './utils';
|
|
18
12
|
*
|
19
13
|
* To insert media at the current selection, execute the command and specify the URL:
|
20
14
|
*
|
21
|
-
*
|
22
|
-
*
|
23
|
-
*
|
15
|
+
* ```ts
|
16
|
+
* editor.execute( 'mediaEmbed', 'http://url.to.the/media' );
|
17
|
+
* ```
|
24
18
|
*/
|
25
19
|
export default class MediaEmbedCommand extends Command {
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
insertMedia( model, url, selection, true );
|
59
|
-
}
|
60
|
-
}
|
20
|
+
/**
|
21
|
+
* @inheritDoc
|
22
|
+
*/
|
23
|
+
refresh() {
|
24
|
+
const model = this.editor.model;
|
25
|
+
const selection = model.document.selection;
|
26
|
+
const selectedMedia = getSelectedMediaModelWidget(selection);
|
27
|
+
this.value = selectedMedia ? selectedMedia.getAttribute('url') : undefined;
|
28
|
+
this.isEnabled = isMediaSelected(selection) || isAllowedInParent(selection, model);
|
29
|
+
}
|
30
|
+
/**
|
31
|
+
* Executes the command, which either:
|
32
|
+
*
|
33
|
+
* * updates the URL of the selected media,
|
34
|
+
* * inserts the new media into the editor and puts the selection around it.
|
35
|
+
*
|
36
|
+
* @fires execute
|
37
|
+
* @param url The URL of the media.
|
38
|
+
*/
|
39
|
+
execute(url) {
|
40
|
+
const model = this.editor.model;
|
41
|
+
const selection = model.document.selection;
|
42
|
+
const selectedMedia = getSelectedMediaModelWidget(selection);
|
43
|
+
if (selectedMedia) {
|
44
|
+
model.change(writer => {
|
45
|
+
writer.setAttribute('url', url, selectedMedia);
|
46
|
+
});
|
47
|
+
}
|
48
|
+
else {
|
49
|
+
insertMedia(model, url, selection, true);
|
50
|
+
}
|
51
|
+
}
|
61
52
|
}
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
if ( parent.isEmpty && !model.schema.isLimit( parent ) ) {
|
74
|
-
parent = parent.parent;
|
75
|
-
}
|
76
|
-
|
77
|
-
return model.schema.checkChild( parent, 'media' );
|
53
|
+
/**
|
54
|
+
* Checks if the media embed is allowed in the parent.
|
55
|
+
*/
|
56
|
+
function isAllowedInParent(selection, model) {
|
57
|
+
const insertionRange = findOptimalInsertionRange(selection, model);
|
58
|
+
let parent = insertionRange.start.parent;
|
59
|
+
// The model.insertContent() will remove empty parent (unless it is a $root or a limit).
|
60
|
+
if (parent.isEmpty && !model.schema.isLimit(parent)) {
|
61
|
+
parent = parent.parent;
|
62
|
+
}
|
63
|
+
return model.schema.checkChild(parent, 'media');
|
78
64
|
}
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
const element = selection.getSelectedElement();
|
86
|
-
return !!element && element.name === 'media';
|
65
|
+
/**
|
66
|
+
* Checks if the media object is selected.
|
67
|
+
*/
|
68
|
+
function isMediaSelected(selection) {
|
69
|
+
const element = selection.getSelectedElement();
|
70
|
+
return !!element && element.name === 'media';
|
87
71
|
}
|