8
0
Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
37aaf3b2d3

+ 17 - 15
packages/ckeditor5-media-embed/src/mediaembedediting.js

@@ -33,22 +33,24 @@ export default class MediaEmbedEditing extends Plugin {
 		super( editor );
 
 		editor.config.define( 'mediaEmbed', {
-			media: {
-				dailymotion: {
+			media: [
+				{
 					url: [
 						/^(https:\/\/)?(www\.)?dailymotion\.com\/video\/(\w+)/
 					],
 					html: id =>
-						`<iframe src="https://www.dailymotion.com/embed/video/${ id }" ` +
-							'frameborder="0" width="480" height="270" allowfullscreen allow="autoplay">' +
-						'</iframe>'
+						'<div class="ck-media__wrapper__aspect">' +
+							`<iframe src="https://www.dailymotion.com/embed/video/${ id }" ` +
+								'frameborder="0" width="480" height="270" allowfullscreen allow="autoplay">' +
+							'</iframe>' +
+						'</div>'
 				},
 
-				instagram: {
+				{
 					url: /^(https:\/\/)?(www\.)?instagram\.com\/p\/(\w+)/
 				},
 
-				spotify: {
+				{
 					url: [
 						/^(https:\/\/)?(www\.)?open\.spotify\.com\/(artist\/\w+)/,
 						/^(https:\/\/)?(www\.)?open\.spotify\.com\/(album\/\w+)/,
@@ -62,7 +64,7 @@ export default class MediaEmbedEditing extends Plugin {
 						'</div>'
 				},
 
-				youtube: {
+				{
 					url: [
 						/^(https:\/\/)?(www\.)?youtube\.com\/watch\?v=(\w+)/,
 						/^(https:\/\/)?(www\.)?youtube\.com\/v\/(\w+)/,
@@ -77,7 +79,7 @@ export default class MediaEmbedEditing extends Plugin {
 						'</div>'
 				},
 
-				vimeo: {
+				{
 					url: [
 						/^(https:\/\/)?(www\.)?vimeo\.com\/(\d+)/,
 						/^(https:\/\/)?(www\.)?vimeo\.com\/[^/]+\/[^/]+\/video\/(\d+)/,
@@ -95,26 +97,26 @@ export default class MediaEmbedEditing extends Plugin {
 						'</div>'
 				},
 
-				twitter: {
+				{
 					url: /^(https:\/\/)?(www\.)?twitter\.com/
 				},
 
-				googleMaps: {
+				{
 					url: /^(https:\/\/)?(www\.)?google\.com\/maps/
 				},
 
-				flickr: {
+				{
 					url: /^(https:\/\/)?(www\.)?flickr\.com/
 				},
 
-				facebook: {
+				{
 					url: /^(https:\/\/)?(www\.)?facebook\.com/
 				},
 
-				any: {
+				{
 					url: /.*/
 				}
-			}
+			]
 		} );
 	}
 

+ 8 - 1
packages/ckeditor5-media-embed/src/mediaembedui.js

@@ -19,13 +19,20 @@ import mediaIcon from '../theme/icons/media.svg';
  * @extends module:core/plugin~Plugin
  */
 export default class MediaEmbedUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ MediaEmbedEditing ];
+	}
+
 	/**
 	 * @inheritDoc
 	 */
 	init() {
 		const editor = this.editor;
 		const command = editor.commands.get( 'insertMedia' );
-		const mediaRegistry = this.editor.plugins.get( MediaEmbedEditing ).mediaRegistry;
+		const mediaRegistry = editor.plugins.get( MediaEmbedEditing ).mediaRegistry;
 
 		// Setup `imageUpload` button.
 		editor.ui.componentFactory.add( 'insertMedia', locale => {

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

@@ -36,9 +36,7 @@ export class MediaRegistry {
 
 		url = url.trim();
 
-		for ( const name in mediaProviders ) {
-			let { url: pattern, html: renderer } = mediaProviders[ name ];
-
+		for ( let { url: pattern, html: renderer } of mediaProviders ) {
 			if ( !Array.isArray( pattern ) ) {
 				pattern = [ pattern ];
 			}

+ 33 - 20
packages/ckeditor5-media-embed/tests/mediaembedediting.js

@@ -10,14 +10,14 @@ import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import normalizeHtml from '@ckeditor/ckeditor5-utils/tests/_utils/normalizehtml';
 
-describe.only( 'MediaEmbedEditing', () => {
+describe( 'MediaEmbedEditing', () => {
 	let editor, model, doc, view;
-	const mediaDefinitions = {
-		test: {
+	const mediaDefinitions = [
+		{
 			url: /(.*)/,
 			html: id => `<iframe src="${ id }"></iframe>`
 		}
-	};
+	];
 
 	testUtils.createSinonSandbox();
 
@@ -38,7 +38,7 @@ describe.only( 'MediaEmbedEditing', () => {
 			} );
 
 			it( 'upcasts the URL (dailymotion)', () => {
-				testMediaConfig( [
+				testMediaUpcast( [
 					'https://www.dailymotion.com/video/foo',
 					'www.dailymotion.com/video/foo',
 					'dailymotion.com/video/foo',
@@ -49,17 +49,16 @@ describe.only( 'MediaEmbedEditing', () => {
 			} );
 
 			it( 'upcasts the URL (instagram)', () => {
-				testMediaConfig( [
+				testMediaUpcast( [
 					'https://www.instagram.com/p/foo',
 					'www.instagram.com/p/foo',
 					'instagram.com/p/foo',
-				],
-				'<iframe src="http://instagram.com/p/foo/embed" frameborder="0"></iframe>' );
+				] );
 			} );
 
 			describe( 'spotify', () => {
 				it( 'upcasts the URL (artist)', () => {
-					testMediaConfig( [
+					testMediaUpcast( [
 						'https://www.open.spotify.com/artist/foo',
 						'www.open.spotify.com/artist/foo',
 						'open.spotify.com/artist/foo',
@@ -70,7 +69,7 @@ describe.only( 'MediaEmbedEditing', () => {
 				} );
 
 				it( 'upcasts the URL (album)', () => {
-					testMediaConfig( [
+					testMediaUpcast( [
 						'https://www.open.spotify.com/album/foo',
 						'www.open.spotify.com/album/foo',
 						'open.spotify.com/album/foo',
@@ -81,7 +80,7 @@ describe.only( 'MediaEmbedEditing', () => {
 				} );
 
 				it( 'upcasts the URL (track)', () => {
-					testMediaConfig( [
+					testMediaUpcast( [
 						'https://www.open.spotify.com/track/foo',
 						'www.open.spotify.com/track/foo',
 						'open.spotify.com/track/foo',
@@ -93,7 +92,7 @@ describe.only( 'MediaEmbedEditing', () => {
 			} );
 
 			it( 'upcasts the URL (youtube)', () => {
-				testMediaConfig( [
+				testMediaUpcast( [
 					'https://www.youtube.com/watch?v=foo',
 					'www.youtube.com/watch?v=foo',
 					'youtube.com/watch?v=foo',
@@ -115,7 +114,7 @@ describe.only( 'MediaEmbedEditing', () => {
 			} );
 
 			it( 'upcasts the URL (vimeo)', () => {
-				testMediaConfig( [
+				testMediaUpcast( [
 					'https://www.vimeo.com/1234',
 					'www.vimeo.com/1234',
 					'vimeo.com/1234',
@@ -545,17 +544,31 @@ describe.only( 'MediaEmbedEditing', () => {
 		} );
 	} );
 
-	function testMediaConfig( urls, expected ) {
+	function testMediaUpcast( urls, expected ) {
 		for ( const url of urls ) {
 			editor.setData(
 				`<figure class="media"><div data-oembed-url="${ url }"></div></figure>` );
 
-			expect( normalizeHtml( getViewData( view, { withoutSelection: true } ) ) ).to.match(
-				new RegExp( '<figure[^>]+>' +
-					'<div[^>]+>' +
-						`<div[^>]+>${ normalizeHtml( expected ) }</div>` +
-					'</div>' +
-				'</figure>' ), `assertion for "${ url }"` );
+			const viewData = getViewData( view, { withoutSelection: true } );
+			let expectedRegExp;
+
+			if ( expected ) {
+				expectedRegExp = new RegExp(
+					'<figure[^>]+>' +
+						'<div[^>]+>' +
+							`<div[^>]+>${ normalizeHtml( expected ) }</div>` +
+						'</div>' +
+					'</figure>' );
+			} else {
+				expectedRegExp = new RegExp(
+					'<figure[^>]+>' +
+						'<div[^>]+>' +
+							'<div class="ck-media__placeholder">.*</div>' +
+						'</div>' +
+					'</figure>' );
+			}
+
+			expect( normalizeHtml( viewData ) ).to.match( expectedRegExp, `assertion for "${ url }"` );
 		}
 	}
 } );

+ 3 - 3
packages/ckeditor5-media-embed/tests/mediaembedui.js

@@ -21,12 +21,12 @@ describe( 'MediaEmbedUI', () => {
 			.create( editorElement, {
 				plugins: [ MediaEmbed ],
 				mediaEmbed: {
-					media: {
-						test: {
+					media: [
+						{
 							url: /https:\/\/valid\/(.*)/,
 							html: id => `<iframe src="${ id }"></iframe>`
 						}
-					}
+					]
 				}
 			} )
 			.then( newEditor => {