8
0
Pārlūkot izejas kodu

Simplified the media-embed configuration. Regexp does not require a protocol.

Kamil Piechaczek 7 gadi atpakaļ
vecāks
revīzija
76af02d255

+ 20 - 20
packages/ckeditor5-media-embed/src/mediaembedediting.js

@@ -34,7 +34,7 @@ export default class MediaEmbedEditing extends Plugin {
 			providers: [
 				{
 					name: 'dailymotion',
-					url: /^(https:\/\/)?(www\.)?dailymotion\.com\/video\/(\w+)/,
+					url: /^dailymotion\.com\/video\/(\w+)/,
 					html: id =>
 						'<div style="position: relative; padding-bottom: 100%; height: 0; ">' +
 							`<iframe src="https://www.dailymotion.com/embed/video/${ id }" ` +
@@ -47,9 +47,9 @@ export default class MediaEmbedEditing extends Plugin {
 				{
 					name: 'spotify',
 					url: [
-						/^(https:\/\/)?(www\.)?open\.spotify\.com\/(artist\/\w+)/,
-						/^(https:\/\/)?(www\.)?open\.spotify\.com\/(album\/\w+)/,
-						/^(https:\/\/)?(www\.)?open\.spotify\.com\/(track\/\w+)/
+						/^open\.spotify\.com\/(artist\/\w+)/,
+						/^open\.spotify\.com\/(album\/\w+)/,
+						/^open\.spotify\.com\/(track\/\w+)/
 					],
 					html: id =>
 						'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 126%;">' +
@@ -63,10 +63,10 @@ export default class MediaEmbedEditing extends Plugin {
 				{
 					name: 'youtube',
 					url: [
-						/^(https:\/\/)?(www\.)?youtube\.com\/watch\?v=(\w+)/,
-						/^(https:\/\/)?(www\.)?youtube\.com\/v\/(\w+)/,
-						/^(https:\/\/)?(www\.)?youtube\.com\/embed\/(\w+)/,
-						/^(https:\/\/)?youtu\.be\/(\w+)/
+						/^youtube\.com\/watch\?v=(\w+)/,
+						/^youtube\.com\/v\/(\w+)/,
+						/^youtube\.com\/embed\/(\w+)/,
+						/^youtu\.be\/(\w+)/
 					],
 					html: id =>
 						'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
@@ -80,13 +80,13 @@ export default class MediaEmbedEditing extends Plugin {
 				{
 					name: 'vimeo',
 					url: [
-						/^(https:\/\/)?(www\.)?vimeo\.com\/(\d+)/,
-						/^(https:\/\/)?(www\.)?vimeo\.com\/[^/]+\/[^/]+\/video\/(\d+)/,
-						/^(https:\/\/)?(www\.)?vimeo\.com\/album\/[^/]+\/video\/(\d+)/,
-						/^(https:\/\/)?(www\.)?vimeo\.com\/channels\/[^/]+\/(\d+)/,
-						/^(https:\/\/)?(www\.)?vimeo\.com\/groups\/[^/]+\/videos\/(\d+)/,
-						/^(https:\/\/)?(www\.)?vimeo\.com\/ondemand\/[^/]+\/(\d+)/,
-						/^(https:\/\/)?(www\.)?player\.vimeo\.com\/video\/(\d+)/
+						/^vimeo\.com\/(\d+)/,
+						/^vimeo\.com\/[^/]+\/[^/]+\/video\/(\d+)/,
+						/^vimeo\.com\/album\/[^/]+\/video\/(\d+)/,
+						/^vimeo\.com\/channels\/[^/]+\/(\d+)/,
+						/^vimeo\.com\/groups\/[^/]+\/videos\/(\d+)/,
+						/^vimeo\.com\/ondemand\/[^/]+\/(\d+)/,
+						/^player\.vimeo\.com\/video\/(\d+)/
 					],
 					html: id =>
 						'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
@@ -99,23 +99,23 @@ export default class MediaEmbedEditing extends Plugin {
 
 				{
 					name: 'instagram',
-					url: /^(https:\/\/)?(www\.)?instagram\.com\/p\/(\w+)/
+					url: /^instagram\.com\/p\/(\w+)/
 				},
 				{
 					name: 'twitter',
-					url: /^(https:\/\/)?(www\.)?twitter\.com/
+					url: /^twitter\.com/
 				},
 				{
 					name: 'googleMaps',
-					url: /^(https:\/\/)?(www\.)?google\.com\/maps/
+					url: /^google\.com\/maps/
 				},
 				{
 					name: 'flickr',
-					url: /^(https:\/\/)?(www\.)?flickr\.com/
+					url: /^flickr\.com/
 				},
 				{
 					name: 'facebook',
-					url: /^(https:\/\/)?(www\.)?facebook\.com/
+					url: /^facebook\.com/
 				},
 			]
 		} );

+ 55 - 2
packages/ckeditor5-media-embed/src/mediaregistry.js

@@ -122,7 +122,7 @@ export class MediaRegistry {
 			}
 
 			for ( const subPattern of pattern ) {
-				const match = url.match( subPattern );
+				const match = this._getUrlMatches( url, subPattern );
 
 				if ( match ) {
 					return new Media( this.locale, url, match, contentRenderer );
@@ -132,6 +132,41 @@ export class MediaRegistry {
 
 		return null;
 	}
+
+	/**
+	 * Tries to match `url` to `pattern`.
+	 *
+	 * @private
+	 * @param {String} url The url of the media.
+	 * @param {RegExp} pattern The pattern that should accept the media url.
+	 * @returns {Array|null}
+	 */
+	_getUrlMatches( url, pattern ) {
+		// 1. Try to match without stripping the protocol and "www" sub-domain.
+		let match = url.match( pattern );
+
+		if ( match ) {
+			return match;
+		}
+
+		// 2. Try to match after stripping the protocol.
+		let rawUrl = url.replace( /^https?:\/\//, '' );
+		match = rawUrl.match( pattern );
+
+		if ( match ) {
+			return match;
+		}
+
+		// 3. Try to match after stripping the "www" sub-domain.
+		rawUrl = rawUrl.replace( /^www\./, '' );
+		match = rawUrl.match( pattern );
+
+		if ( match ) {
+			return match;
+		}
+
+		return null;
+	}
 }
 
 /**
@@ -148,7 +183,7 @@ class Media {
 		 *
 		 * @member {String}
 		 */
-		this.url = url;
+		this.url = this._getValidUrl( url );
 
 		/**
 		 * Shorthand for {@link module:utils/locale~Locale#t}.
@@ -284,4 +319,22 @@ class Media {
 
 		return placeholder.outerHTML;
 	}
+
+	/**
+	 * Returns full url to specified media.
+	 *
+	 * @param {String} url The url of the media.
+	 * @returns {String|null}
+	 */
+	_getValidUrl( url ) {
+		if ( !url ) {
+			return null;
+		}
+
+		if ( url.match( /^https?/ ) ) {
+			return url;
+		}
+
+		return 'https://' + url;
+	}
 }

+ 13 - 12
packages/ckeditor5-media-embed/tests/mediaembedediting.js

@@ -95,7 +95,7 @@ describe( 'MediaEmbedEditing', () => {
 
 						expect( getViewData( editor.editing.view, { withoutSelection: true, renderUIElements: true } ) ).to.equal(
 							'<figure class="ck-widget media" contenteditable="false">' +
-								'<div class="ck-media__wrapper" data-oembed-url="foo.com/123">' +
+								'<div class="ck-media__wrapper" data-oembed-url="https://foo.com/123">' +
 									'A, id=123' +
 								'</div>' +
 							'</figure>'
@@ -105,7 +105,7 @@ describe( 'MediaEmbedEditing', () => {
 
 						expect( getViewData( editor.editing.view, { withoutSelection: true, renderUIElements: true } ) ).to.equal(
 							'<figure class="ck-widget media" contenteditable="false">' +
-								'<div class="ck-media__wrapper" data-oembed-url="bar.com/123">' +
+								'<div class="ck-media__wrapper" data-oembed-url="https://bar.com/123">' +
 									'B, id=123' +
 								'</div>' +
 							'</figure>'
@@ -115,7 +115,7 @@ describe( 'MediaEmbedEditing', () => {
 
 						expect( getViewData( editor.editing.view, { withoutSelection: true, renderUIElements: true } ) ).to.equal(
 							'<figure class="ck-widget media" contenteditable="false">' +
-								'<div class="ck-media__wrapper" data-oembed-url="anything.com/123">' +
+								'<div class="ck-media__wrapper" data-oembed-url="https://anything.com/123">' +
 									'C, id=123' +
 								'</div>' +
 							'</figure>'
@@ -331,7 +331,7 @@ describe( 'MediaEmbedEditing', () => {
 
 						expect( getViewData( editor.editing.view, { withoutSelection: true, renderUIElements: true } ) ).to.equal(
 							'<figure class="ck-widget media" contenteditable="false">' +
-								'<div class="ck-media__wrapper" data-oembed-url="foo.com/123">' +
+								'<div class="ck-media__wrapper" data-oembed-url="https://foo.com/123">' +
 									'A, id=123' +
 								'</div>' +
 							'</figure>'
@@ -341,7 +341,7 @@ describe( 'MediaEmbedEditing', () => {
 
 						expect( getViewData( editor.editing.view, { withoutSelection: true, renderUIElements: true } ) ).to.equal(
 							'<figure class="ck-widget media" contenteditable="false">' +
-								'<div class="ck-media__wrapper" data-oembed-url="anything.com/123">' +
+								'<div class="ck-media__wrapper" data-oembed-url="https://anything.com/123">' +
 									'extraB, id=123' +
 								'</div>' +
 							'</figure>'
@@ -365,7 +365,7 @@ describe( 'MediaEmbedEditing', () => {
 
 						expect( getViewData( editor.editing.view, { withoutSelection: true, renderUIElements: true } ) ).to.equal(
 							'<figure class="ck-widget media" contenteditable="false">' +
-								'<div class="ck-media__wrapper" data-oembed-url="bar.com/123">' +
+								'<div class="ck-media__wrapper" data-oembed-url="https://bar.com/123">' +
 									'B, id=123' +
 								'</div>' +
 							'</figure>'
@@ -388,7 +388,7 @@ describe( 'MediaEmbedEditing', () => {
 
 						expect( getViewData( editor.editing.view, { withoutSelection: true, renderUIElements: true } ) ).to.equal(
 							'<figure class="ck-widget media" contenteditable="false">' +
-								'<div class="ck-media__wrapper" data-oembed-url="bar.com/123">' +
+								'<div class="ck-media__wrapper" data-oembed-url="https://bar.com/123">' +
 									'B, id=123' +
 								'</div>' +
 							'</figure>'
@@ -415,7 +415,7 @@ describe( 'MediaEmbedEditing', () => {
 
 						expect( getViewData( editor.editing.view, { withoutSelection: true, renderUIElements: true } ) ).to.equal(
 							'<figure class="ck-widget media" contenteditable="false">' +
-								'<div class="ck-media__wrapper" data-oembed-url="bar.com/123">' +
+								'<div class="ck-media__wrapper" data-oembed-url="https://bar.com/123">' +
 									'B, id=123' +
 								'</div>' +
 							'</figure>'
@@ -883,12 +883,13 @@ describe( 'MediaEmbedEditing', () => {
 
 	function testMediaUpcast( urls, expected ) {
 		for ( const url of urls ) {
-			editor.setData(
-				`<figure class="media"><div data-oembed-url="${ url }"></div></figure>` );
+			editor.setData( `<figure class="media"><div data-oembed-url="${ url }"></div></figure>` );
 
 			const viewData = getViewData( view, { withoutSelection: true, renderUIElements: true } );
 			let expectedRegExp;
 
+			const expectedUrl = url.startsWith( 'http' ) ? url : 'https://' + url;
+
 			if ( expected ) {
 				expectedRegExp = new RegExp(
 					'<figure[^>]+>' +
@@ -902,8 +903,8 @@ describe( 'MediaEmbedEditing', () => {
 						'<div[^>]+>' +
 							'<div class="ck ck-media__placeholder ck-reset_all">' +
 								'<div class="ck-media__placeholder__icon">.*</div>' +
-								`<a class="ck-media__placeholder__url" href="${ url }" target="new">` +
-									`<span class="ck-media__placeholder__url__text">${ url }</span>` +
+								`<a class="ck-media__placeholder__url" href="${ expectedUrl }" target="new">` +
+									`<span class="ck-media__placeholder__url__text">${ expectedUrl }</span>` +
 									'<span class="ck ck-tooltip ck-tooltip_s">' +
 										'<span class="ck ck-tooltip__text">Open media in new tab</span>' +
 									'</span>' +