@ckeditor/ckeditor5-media-embed 36.0.0 → 37.0.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.
@@ -2,18 +2,10 @@
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/mediaregistry
8
- */
9
-
10
5
  import { IconView, Template } from 'ckeditor5/src/ui';
11
6
  import { logWarning, toArray } from 'ckeditor5/src/utils';
12
-
13
7
  import mediaPlaceholderIcon from '../theme/icons/media-placeholder.svg';
14
-
15
8
  const mediaPlaceholderIconViewBox = '0 0 64 42';
16
-
17
9
  /**
18
10
  * A bridge between the raw media content provider definitions and the editor view content.
19
11
  *
@@ -22,314 +14,219 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
22
14
  * Mostly used by the {@link module:media-embed/mediaembedediting~MediaEmbedEditing} plugin.
23
15
  */
24
16
  export default class MediaRegistry {
25
- /**
26
- * Creates an instance of the {@link module:media-embed/mediaregistry~MediaRegistry} class.
27
- *
28
- * @param {module:utils/locale~Locale} locale The localization services instance.
29
- * @param {module:media-embed/mediaembed~MediaEmbedConfig} config The configuration of the media embed feature.
30
- */
31
- constructor( locale, config ) {
32
- const providers = config.providers;
33
- const extraProviders = config.extraProviders || [];
34
- const removedProviders = new Set( config.removeProviders );
35
- const providerDefinitions = providers
36
- .concat( extraProviders )
37
- .filter( provider => {
38
- const name = provider.name;
39
-
40
- if ( !name ) {
41
- /**
42
- * One of the providers (or extra providers) specified in the media embed configuration
43
- * has no name and will not be used by the editor. In order to get this media
44
- * provider working, double check your editor configuration.
45
- *
46
- * @error media-embed-no-provider-name
47
- */
48
- logWarning( 'media-embed-no-provider-name', { provider } );
49
-
50
- return false;
51
- }
52
-
53
- return !removedProviders.has( name );
54
- } );
55
-
56
- /**
57
- * The {@link module:utils/locale~Locale} instance.
58
- *
59
- * @member {module:utils/locale~Locale}
60
- */
61
- this.locale = locale;
62
-
63
- /**
64
- * The media provider definitions available for the registry. Usually corresponding with the
65
- * {@link module:media-embed/mediaembed~MediaEmbedConfig media configuration}.
66
- *
67
- * @member {Array}
68
- */
69
- this.providerDefinitions = providerDefinitions;
70
- }
71
-
72
- /**
73
- * Checks whether the passed URL is representing a certain media type allowed in the editor.
74
- *
75
- * @param {String} url The URL to be checked
76
- * @returns {Boolean}
77
- */
78
- hasMedia( url ) {
79
- return !!this._getMedia( url );
80
- }
81
-
82
- /**
83
- * For the given media URL string and options, it returns the {@link module:engine/view/element~Element view element}
84
- * representing that media.
85
- *
86
- * **Note:** If no URL is specified, an empty view element is returned.
87
- *
88
- * @param {module:engine/view/downcastwriter~DowncastWriter} writer The view writer used to produce a view element.
89
- * @param {String} url The URL to be translated into a view element.
90
- * @param {Object} options
91
- * @param {String} [options.elementName]
92
- * @param {Boolean} [options.renderMediaPreview]
93
- * @param {Boolean} [options.renderForEditingView]
94
- * @returns {module:engine/view/element~Element}
95
- */
96
- getMediaViewElement( writer, url, options ) {
97
- return this._getMedia( url ).getViewElement( writer, options );
98
- }
99
-
100
- /**
101
- * Returns a `Media` instance for the given URL.
102
- *
103
- * @protected
104
- * @param {String} url The URL of the media.
105
- * @returns {module:media-embed/mediaregistry~Media|null} The `Media` instance or `null` when there is none.
106
- */
107
- _getMedia( url ) {
108
- if ( !url ) {
109
- return new Media( this.locale );
110
- }
111
-
112
- url = url.trim();
113
-
114
- for ( const definition of this.providerDefinitions ) {
115
- const previewRenderer = definition.html;
116
- const pattern = toArray( definition.url );
117
-
118
- for ( const subPattern of pattern ) {
119
- const match = this._getUrlMatches( url, subPattern );
120
-
121
- if ( match ) {
122
- return new Media( this.locale, url, match, previewRenderer );
123
- }
124
- }
125
- }
126
-
127
- return null;
128
- }
129
-
130
- /**
131
- * Tries to match `url` to `pattern`.
132
- *
133
- * @private
134
- * @param {String} url The URL of the media.
135
- * @param {RegExp} pattern The pattern that should accept the media URL.
136
- * @returns {Array|null}
137
- */
138
- _getUrlMatches( url, pattern ) {
139
- // 1. Try to match without stripping the protocol and "www" subdomain.
140
- let match = url.match( pattern );
141
-
142
- if ( match ) {
143
- return match;
144
- }
145
-
146
- // 2. Try to match after stripping the protocol.
147
- let rawUrl = url.replace( /^https?:\/\//, '' );
148
- match = rawUrl.match( pattern );
149
-
150
- if ( match ) {
151
- return match;
152
- }
153
-
154
- // 3. Try to match after stripping the "www" subdomain.
155
- rawUrl = rawUrl.replace( /^www\./, '' );
156
- match = rawUrl.match( pattern );
157
-
158
- if ( match ) {
159
- return match;
160
- }
161
-
162
- return null;
163
- }
17
+ /**
18
+ * Creates an instance of the {@link module:media-embed/mediaregistry~MediaRegistry} class.
19
+ *
20
+ * @param locale The localization services instance.
21
+ * @param config The configuration of the media embed feature.
22
+ */
23
+ constructor(locale, config) {
24
+ const providers = config.providers;
25
+ const extraProviders = config.extraProviders || [];
26
+ const removedProviders = new Set(config.removeProviders);
27
+ const providerDefinitions = providers
28
+ .concat(extraProviders)
29
+ .filter(provider => {
30
+ const name = provider.name;
31
+ if (!name) {
32
+ /**
33
+ * One of the providers (or extra providers) specified in the media embed configuration
34
+ * has no name and will not be used by the editor. In order to get this media
35
+ * provider working, double check your editor configuration.
36
+ *
37
+ * @error media-embed-no-provider-name
38
+ */
39
+ logWarning('media-embed-no-provider-name', { provider });
40
+ return false;
41
+ }
42
+ return !removedProviders.has(name);
43
+ });
44
+ this.locale = locale;
45
+ this.providerDefinitions = providerDefinitions;
46
+ }
47
+ /**
48
+ * Checks whether the passed URL is representing a certain media type allowed in the editor.
49
+ *
50
+ * @param url The URL to be checked
51
+ */
52
+ hasMedia(url) {
53
+ return !!this._getMedia(url);
54
+ }
55
+ /**
56
+ * For the given media URL string and options, it returns the {@link module:engine/view/element~Element view element}
57
+ * representing that media.
58
+ *
59
+ * **Note:** If no URL is specified, an empty view element is returned.
60
+ *
61
+ * @param writer The view writer used to produce a view element.
62
+ * @param url The URL to be translated into a view element.
63
+ */
64
+ getMediaViewElement(writer, url, options) {
65
+ return this._getMedia(url).getViewElement(writer, options);
66
+ }
67
+ /**
68
+ * Returns a `Media` instance for the given URL.
69
+ *
70
+ * @param url The URL of the media.
71
+ * @returns The `Media` instance or `null` when there is none.
72
+ */
73
+ _getMedia(url) {
74
+ if (!url) {
75
+ return new Media(this.locale);
76
+ }
77
+ url = url.trim();
78
+ for (const definition of this.providerDefinitions) {
79
+ const previewRenderer = definition.html;
80
+ const pattern = toArray(definition.url);
81
+ for (const subPattern of pattern) {
82
+ const match = this._getUrlMatches(url, subPattern);
83
+ if (match) {
84
+ return new Media(this.locale, url, match, previewRenderer);
85
+ }
86
+ }
87
+ }
88
+ return null;
89
+ }
90
+ /**
91
+ * Tries to match `url` to `pattern`.
92
+ *
93
+ * @param url The URL of the media.
94
+ * @param pattern The pattern that should accept the media URL.
95
+ */
96
+ _getUrlMatches(url, pattern) {
97
+ // 1. Try to match without stripping the protocol and "www" subdomain.
98
+ let match = url.match(pattern);
99
+ if (match) {
100
+ return match;
101
+ }
102
+ // 2. Try to match after stripping the protocol.
103
+ let rawUrl = url.replace(/^https?:\/\//, '');
104
+ match = rawUrl.match(pattern);
105
+ if (match) {
106
+ return match;
107
+ }
108
+ // 3. Try to match after stripping the "www" subdomain.
109
+ rawUrl = rawUrl.replace(/^www\./, '');
110
+ match = rawUrl.match(pattern);
111
+ if (match) {
112
+ return match;
113
+ }
114
+ return null;
115
+ }
164
116
  }
165
-
166
117
  /**
167
118
  * Represents media defined by the provider configuration.
168
119
  *
169
120
  * It can be rendered to the {@link module:engine/view/element~Element view element} and used in the editing or data pipeline.
170
- *
171
- * @private
172
121
  */
173
122
  class Media {
174
- constructor( locale, url, match, previewRenderer ) {
175
- /**
176
- * The URL this Media instance represents.
177
- *
178
- * @member {String}
179
- */
180
- this.url = this._getValidUrl( url );
181
-
182
- /**
183
- * Shorthand for {@link module:utils/locale~Locale#t}.
184
- *
185
- * @see module:utils/locale~Locale#t
186
- * @method
187
- */
188
- this._locale = locale;
189
-
190
- /**
191
- * The output of the `RegExp.match` which validated the {@link #url} of this media.
192
- *
193
- * @member {Object}
194
- */
195
- this._match = match;
196
-
197
- /**
198
- * The function returning the HTML string preview of this media.
199
- *
200
- * @member {Function}
201
- */
202
- this._previewRenderer = previewRenderer;
203
- }
204
-
205
- /**
206
- * Returns the view element representation of the media.
207
- *
208
- * @param {module:engine/view/downcastwriter~DowncastWriter} writer The view writer used to produce a view element.
209
- * @param {Object} options
210
- * @param {String} [options.elementName]
211
- * @param {Boolean} [options.renderMediaPreview]
212
- * @param {Boolean} [options.renderForEditingView]
213
- * @returns {module:engine/view/element~Element}
214
- */
215
- getViewElement( writer, options ) {
216
- const attributes = {};
217
- let viewElement;
218
-
219
- if ( options.renderForEditingView || ( options.renderMediaPreview && this.url && this._previewRenderer ) ) {
220
- if ( this.url ) {
221
- attributes[ 'data-oembed-url' ] = this.url;
222
- }
223
-
224
- if ( options.renderForEditingView ) {
225
- attributes.class = 'ck-media__wrapper';
226
- }
227
-
228
- const mediaHtml = this._getPreviewHtml( options );
229
-
230
- viewElement = writer.createRawElement( 'div', attributes, ( domElement, domConverter ) => {
231
- domConverter.setContentOf( domElement, mediaHtml );
232
- } );
233
- } else {
234
- if ( this.url ) {
235
- attributes.url = this.url;
236
- }
237
-
238
- viewElement = writer.createEmptyElement( options.elementName, attributes );
239
- }
240
-
241
- writer.setCustomProperty( 'media-content', true, viewElement );
242
-
243
- return viewElement;
244
- }
245
-
246
- /**
247
- * Returns the HTML string of the media content preview.
248
- *
249
- * @param {module:engine/view/downcastwriter~DowncastWriter} writer The view writer used to produce a view element.
250
- * @param {Object} options
251
- * @param {Boolean} [options.renderForEditingView]
252
- * @returns {String}
253
- */
254
- _getPreviewHtml( options ) {
255
- if ( this._previewRenderer ) {
256
- return this._previewRenderer( this._match );
257
- } else {
258
- // The placeholder only makes sense for editing view and media which have URLs.
259
- // Placeholder is never displayed in data and URL-less media have no content.
260
- if ( this.url && options.renderForEditingView ) {
261
- return this._getPlaceholderHtml();
262
- }
263
-
264
- return '';
265
- }
266
- }
267
-
268
- /**
269
- * Returns the placeholder HTML when the media has no content preview.
270
- *
271
- * @returns {String}
272
- */
273
- _getPlaceholderHtml() {
274
- const icon = new IconView();
275
- const t = this._locale.t;
276
-
277
- icon.content = mediaPlaceholderIcon;
278
- icon.viewBox = mediaPlaceholderIconViewBox;
279
-
280
- const placeholder = new Template( {
281
- tag: 'div',
282
- attributes: {
283
- class: 'ck ck-reset_all ck-media__placeholder'
284
- },
285
- children: [
286
- {
287
- tag: 'div',
288
- attributes: {
289
- class: 'ck-media__placeholder__icon'
290
- },
291
- children: [ icon ]
292
- },
293
- {
294
- tag: 'a',
295
- attributes: {
296
- class: 'ck-media__placeholder__url',
297
- target: '_blank',
298
- rel: 'noopener noreferrer',
299
- href: this.url,
300
- 'data-cke-tooltip-text': t( 'Open media in new tab' )
301
- },
302
- children: [
303
- {
304
- tag: 'span',
305
- attributes: {
306
- class: 'ck-media__placeholder__url__text'
307
- },
308
- children: [ this.url ]
309
- }
310
- ]
311
- }
312
- ]
313
- } ).render();
314
-
315
- return placeholder.outerHTML;
316
- }
317
-
318
- /**
319
- * Returns the full URL to the specified media.
320
- *
321
- * @param {String} url The URL of the media.
322
- * @returns {String|null}
323
- */
324
- _getValidUrl( url ) {
325
- if ( !url ) {
326
- return null;
327
- }
328
-
329
- if ( url.match( /^https?/ ) ) {
330
- return url;
331
- }
332
-
333
- return 'https://' + url;
334
- }
123
+ constructor(locale, url, match, previewRenderer) {
124
+ this.url = this._getValidUrl(url);
125
+ this._locale = locale;
126
+ this._match = match;
127
+ this._previewRenderer = previewRenderer;
128
+ }
129
+ /**
130
+ * Returns the view element representation of the media.
131
+ *
132
+ * @param writer The view writer used to produce a view element.
133
+ */
134
+ getViewElement(writer, options) {
135
+ const attributes = {};
136
+ let viewElement;
137
+ if (options.renderForEditingView || (options.renderMediaPreview && this.url && this._previewRenderer)) {
138
+ if (this.url) {
139
+ attributes['data-oembed-url'] = this.url;
140
+ }
141
+ if (options.renderForEditingView) {
142
+ attributes.class = 'ck-media__wrapper';
143
+ }
144
+ const mediaHtml = this._getPreviewHtml(options);
145
+ viewElement = writer.createRawElement('div', attributes, (domElement, domConverter) => {
146
+ domConverter.setContentOf(domElement, mediaHtml);
147
+ });
148
+ }
149
+ else {
150
+ if (this.url) {
151
+ attributes.url = this.url;
152
+ }
153
+ viewElement = writer.createEmptyElement(options.elementName, attributes);
154
+ }
155
+ writer.setCustomProperty('media-content', true, viewElement);
156
+ return viewElement;
157
+ }
158
+ /**
159
+ * Returns the HTML string of the media content preview.
160
+ */
161
+ _getPreviewHtml(options) {
162
+ if (this._previewRenderer) {
163
+ return this._previewRenderer(this._match);
164
+ }
165
+ else {
166
+ // The placeholder only makes sense for editing view and media which have URLs.
167
+ // Placeholder is never displayed in data and URL-less media have no content.
168
+ if (this.url && options.renderForEditingView) {
169
+ return this._getPlaceholderHtml();
170
+ }
171
+ return '';
172
+ }
173
+ }
174
+ /**
175
+ * Returns the placeholder HTML when the media has no content preview.
176
+ */
177
+ _getPlaceholderHtml() {
178
+ const icon = new IconView();
179
+ const t = this._locale.t;
180
+ icon.content = mediaPlaceholderIcon;
181
+ icon.viewBox = mediaPlaceholderIconViewBox;
182
+ const placeholder = new Template({
183
+ tag: 'div',
184
+ attributes: {
185
+ class: 'ck ck-reset_all ck-media__placeholder'
186
+ },
187
+ children: [
188
+ {
189
+ tag: 'div',
190
+ attributes: {
191
+ class: 'ck-media__placeholder__icon'
192
+ },
193
+ children: [icon]
194
+ },
195
+ {
196
+ tag: 'a',
197
+ attributes: {
198
+ class: 'ck-media__placeholder__url',
199
+ target: '_blank',
200
+ rel: 'noopener noreferrer',
201
+ href: this.url,
202
+ 'data-cke-tooltip-text': t('Open media in new tab')
203
+ },
204
+ children: [
205
+ {
206
+ tag: 'span',
207
+ attributes: {
208
+ class: 'ck-media__placeholder__url__text'
209
+ },
210
+ children: [this.url]
211
+ }
212
+ ]
213
+ }
214
+ ]
215
+ }).render();
216
+ return placeholder.outerHTML;
217
+ }
218
+ /**
219
+ * Returns the full URL to the specified media.
220
+ *
221
+ * @param url The URL of the media.
222
+ */
223
+ _getValidUrl(url) {
224
+ if (!url) {
225
+ return null;
226
+ }
227
+ if (url.match(/^https?/)) {
228
+ return url;
229
+ }
230
+ return 'https://' + url;
231
+ }
335
232
  }
@@ -0,0 +1,115 @@
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
+ /**
6
+ * @module media-embed/ui/mediaformview
7
+ */
8
+ import { type InputTextView, ButtonView, LabeledFieldView, View } from 'ckeditor5/src/ui';
9
+ import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
10
+ import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
11
+ import '../../theme/mediaform.css';
12
+ /**
13
+ * The media form view controller class.
14
+ *
15
+ * See {@link module:media-embed/ui/mediaformview~MediaFormView}.
16
+ */
17
+ export default class MediaFormView extends View {
18
+ /**
19
+ * Tracks information about the DOM focus in the form.
20
+ */
21
+ readonly focusTracker: FocusTracker;
22
+ /**
23
+ * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
24
+ */
25
+ readonly keystrokes: KeystrokeHandler;
26
+ /**
27
+ * The value of the URL input.
28
+ */
29
+ mediaURLInputValue: string;
30
+ /**
31
+ * The URL input view.
32
+ */
33
+ urlInputView: LabeledFieldView<InputTextView>;
34
+ /**
35
+ * The Save button view.
36
+ */
37
+ saveButtonView: ButtonView;
38
+ /**
39
+ * The Cancel button view.
40
+ */
41
+ cancelButtonView: ButtonView;
42
+ /**
43
+ * A collection of views that can be focused in the form.
44
+ */
45
+ private readonly _focusables;
46
+ /**
47
+ * Helps cycling over {@link #_focusables} in the form.
48
+ */
49
+ private readonly _focusCycler;
50
+ /**
51
+ * An array of form validators used by {@link #isValid}.
52
+ */
53
+ private readonly _validators;
54
+ /**
55
+ * The default info text for the {@link #urlInputView}.
56
+ */
57
+ private _urlInputViewInfoDefault?;
58
+ /**
59
+ * The info text with an additional tip for the {@link #urlInputView},
60
+ * displayed when the input has some value.
61
+ */
62
+ private _urlInputViewInfoTip?;
63
+ /**
64
+ * @param validators Form validators used by {@link #isValid}.
65
+ * @param locale The localization services instance.
66
+ */
67
+ constructor(validators: Array<(v: MediaFormView) => string | undefined>, locale: Locale);
68
+ /**
69
+ * @inheritDoc
70
+ */
71
+ render(): void;
72
+ /**
73
+ * @inheritDoc
74
+ */
75
+ destroy(): void;
76
+ /**
77
+ * Focuses the fist {@link #_focusables} in the form.
78
+ */
79
+ focus(): void;
80
+ /**
81
+ * The native DOM `value` of the {@link #urlInputView} element.
82
+ *
83
+ * **Note**: Do not confuse it with the {@link module:ui/inputtext/inputtextview~InputTextView#value}
84
+ * which works one way only and may not represent the actual state of the component in the DOM.
85
+ */
86
+ get url(): string;
87
+ set url(url: string);
88
+ /**
89
+ * Validates the form and returns `false` when some fields are invalid.
90
+ */
91
+ isValid(): boolean;
92
+ /**
93
+ * Cleans up the supplementary error and information text of the {@link #urlInputView}
94
+ * bringing them back to the state when the form has been displayed for the first time.
95
+ *
96
+ * See {@link #isValid}.
97
+ */
98
+ resetFormStatus(): void;
99
+ /**
100
+ * Creates a labeled input view.
101
+ *
102
+ * @returns Labeled input view instance.
103
+ */
104
+ private _createUrlInput;
105
+ /**
106
+ * Creates a button view.
107
+ *
108
+ * @param label The button label.
109
+ * @param icon The button icon.
110
+ * @param className The additional button CSS class name.
111
+ * @param eventName An event name that the `ButtonView#execute` event will be delegated to.
112
+ * @returns The button view instance.
113
+ */
114
+ private _createButton;
115
+ }