8
0
Просмотр исходного кода

Changed argument passed to "MediaEmbedProvider#html" function. Instead of the last regexp match, it will receive the entire matched array.

Kamil Piechaczek 7 лет назад
Родитель
Сommit
9f5bdc786c

+ 6 - 6
packages/ckeditor5-media-embed/src/mediaembed.js

@@ -56,7 +56,7 @@ export default class MediaEmbed extends Plugin {
  *			// The rendering function of the provider.
  *			// Used to represent the media when editing the content (i.e. in the view)
  *			// and also in the data output of the editor if semantic data output is disabled.
- *			html: mediaId => `The HTML representing the media with ID=${ mediaId }.`
+ *			html: match => `The HTML representing the media with ID=${ match[ 1 ] }.`
  *		}
  *
  * You can allow any sort of media in the editor using the "allow–all" `RegExp`.
@@ -72,7 +72,7 @@ export default class MediaEmbed extends Plugin {
  *
  *		{
  *			...
- *			html: mediaId =>
+ *			html: match =>
  *				'<div style="position:relative; padding-bottom:100%; height:0">' +
  *					'<iframe src="..." frameborder="0" ' +
  *						'style="position:absolute; width:100%; height:100%; top:0; left:0">' +
@@ -86,8 +86,8 @@ export default class MediaEmbed extends Plugin {
  * @property {RegExp|Array.<RegExp>} url The `RegExp` object (or array of objects) defining the URL of the media.
  * If any URL matches the `RegExp`, it becomes the media in editor model, as defined by the provider. The content
  * of the last matching group is passed to the `html` rendering function of the media.
- * @property {Function} [html] (optional) Rendering function of the media. The function receives the content of
- * the last matching group from the corresponding `url` `RegExp` as an argument, allowing rendering a dedicated
+ * @property {Function} [html] (optional) Rendering function of the media. The function receives the entire matching
+ * array from the corresponding `url` `RegExp` as an argument, allowing rendering a dedicated
  * preview of a media identified by a certain id or a hash. When not defined, the media embed feature
  * will use a generic media representation in the view and output data.
  * Note that when
@@ -162,7 +162,7 @@ export default class MediaEmbed extends Plugin {
  *						{
  *							 name: 'myProvider',
  *							 url: /^(https:\/\/)?(www\.)?example\.com\/media\/(\w+)/,
- *							 html: mediaId => '...'
+ *							 html: match => '...'
  *						},
  *						...
  * 					]
@@ -192,7 +192,7 @@ export default class MediaEmbed extends Plugin {
  *						{
  *							 name: 'extraProvider',
  *							 url: /^(https:\/\/)?(www\.)?example\.com\/media\/(\w+)/,
- *							 html: mediaId => '...'
+ *							 html: match => '...'
  *						},
  *						...
  * 					]

+ 48 - 28
packages/ckeditor5-media-embed/src/mediaembedediting.js

@@ -35,13 +35,18 @@ export default class MediaEmbedEditing extends Plugin {
 				{
 					name: 'dailymotion',
 					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 }" ` +
-								'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
-								'frameborder="0" width="480" height="270" allowfullscreen allow="autoplay">' +
-							'</iframe>' +
-						'</div>'
+					html: match => {
+						const id = match.slice( -1 );
+
+						return (
+							'<div style="position: relative; padding-bottom: 100%; height: 0; ">' +
+								`<iframe src="https://www.dailymotion.com/embed/video/${ id }" ` +
+									'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
+									'frameborder="0" width="480" height="270" allowfullscreen allow="autoplay">' +
+								'</iframe>' +
+							'</div>'
+						);
+					}
 				},
 
 				{
@@ -51,13 +56,18 @@ export default class MediaEmbedEditing extends Plugin {
 						/^open\.spotify\.com\/(album\/\w+)/,
 						/^open\.spotify\.com\/(track\/\w+)/
 					],
-					html: id =>
-						'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 126%;">' +
-							`<iframe src="https://open.spotify.com/embed/${ id }" ` +
-								'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
-								'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
-							'</iframe>' +
-						'</div>'
+					html: match => {
+						const id = match.slice( -1 );
+
+						return (
+							'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 126%;">' +
+								`<iframe src="https://open.spotify.com/embed/${ id }" ` +
+									'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
+									'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
+								'</iframe>' +
+							'</div>'
+						);
+					}
 				},
 
 				{
@@ -68,13 +78,18 @@ export default class MediaEmbedEditing extends Plugin {
 						/^youtube\.com\/embed\/(\w+)/,
 						/^youtu\.be\/(\w+)/
 					],
-					html: id =>
-						'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
-							`<iframe src="https://www.youtube.com/embed/${ id }" ` +
-								'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
-								'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
-							'</iframe>' +
-						'</div>'
+					html: match => {
+						const id = match.slice( -1 );
+
+						return (
+							'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
+								`<iframe src="https://www.youtube.com/embed/${ id }" ` +
+									'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
+									'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
+								'</iframe>' +
+							'</div>'
+						);
+					}
 				},
 
 				{
@@ -88,13 +103,18 @@ export default class MediaEmbedEditing extends Plugin {
 						/^vimeo\.com\/ondemand\/[^/]+\/(\d+)/,
 						/^player\.vimeo\.com\/video\/(\d+)/
 					],
-					html: id =>
-						'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
-							`<iframe src="https://player.vimeo.com/video/${ id }" ` +
-								'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
-								'frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>' +
-							'</iframe>' +
-						'</div>'
+					html: match => {
+						const id = match.slice( -1 );
+
+						return (
+							'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
+								`<iframe src="https://player.vimeo.com/video/${ id }" ` +
+									'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
+									'frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>' +
+								'</iframe>' +
+							'</div>'
+						);
+					}
 				},
 
 				{

+ 1 - 1
packages/ckeditor5-media-embed/src/mediaregistry.js

@@ -258,7 +258,7 @@ class Media {
 	 */
 	_getContentHtml( options ) {
 		if ( this._contentRenderer ) {
-			return this._contentRenderer( this._match.pop() );
+			return this._contentRenderer( this._match );
 		} else {
 			// The placeholder only makes sense for editing view and media which have URLs.
 			// Placeholder is never displayed in data and URL-less media have no content.

+ 7 - 7
packages/ckeditor5-media-embed/tests/mediaembedediting.js

@@ -20,28 +20,28 @@ describe( 'MediaEmbedEditing', () => {
 		A: {
 			name: 'A',
 			url: /^foo\.com\/(\w+)/,
-			html: id => `A, id=${ id }`
+			html: match => `A, id=${ match[ 1 ] }`
 		},
 		B: {
 			name: 'B',
 			url: /^bar\.com\/(\w+)/,
-			html: id => `B, id=${ id }`
+			html: match => `B, id=${ match[ 1 ] }`
 		},
 		C: {
 			name: 'C',
 			url: /^\w+\.com\/(\w+)/,
-			html: id => `C, id=${ id }`
+			html: match => `C, id=${ match[ 1 ] }`
 		},
 
 		extraA: {
 			name: 'extraA',
 			url: /^foo\.com\/(\w+)/,
-			html: id => `extraA, id=${ id }`
+			html: match => `extraA, id=${ match[ 1 ] }`
 		},
 		extraB: {
 			name: 'extraB',
 			url: /^\w+\.com\/(\w+)/,
-			html: id => `extraB, id=${ id }`
+			html: match => `extraB, id=${ match[ 1 ] }`
 		},
 
 		previewLess: {
@@ -51,7 +51,7 @@ describe( 'MediaEmbedEditing', () => {
 		allowEverything: {
 			name: 'allow-everything',
 			url: /(.*)/,
-			html: id => `allow-everything, id=${ id }`
+			html: match => `allow-everything, id=${ match[ 1 ] }`
 		}
 	};
 
@@ -888,7 +888,7 @@ describe( 'MediaEmbedEditing', () => {
 			const viewData = getViewData( view, { withoutSelection: true, renderUIElements: true } );
 			let expectedRegExp;
 
-			const expectedUrl = url.startsWith( 'http' ) ? url : 'https://' + url;
+			const expectedUrl = url.match( /^https?:\/\// ) ? url : 'https://' + url;
 
 			if ( expected ) {
 				expectedRegExp = new RegExp(