Browse Source

Auto-media embed is now a separate plugin. Changed the delay from 500ms to 100ms.

Kamil Piechaczek 7 years ago
parent
commit
b0bc3cb27a

+ 113 - 0
packages/ckeditor5-media-embed/src/automediaembed.js

@@ -0,0 +1,113 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module media-embed/automediaembed
+ */
+
+import MediaEmbedEditing from './mediaembedediting';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
+import Range from '@ckeditor/ckeditor5-engine/src/model/range';
+import Position from '@ckeditor/ckeditor5-engine/src/model/position';
+import LivePosition from '@ckeditor/ckeditor5-engine/src/model/liveposition';
+import TreeWalker from '@ckeditor/ckeditor5-engine/src/model/treewalker';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+
+const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=]+$/;
+
+/**
+ * The auto-media embed plugin.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class AutoMediaEmbed extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ Clipboard ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'AutoMediaEmbed';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const modelDocument = editor.model.document;
+		const mediaRegistry = editor.plugins.get( MediaEmbedEditing ).registry;
+
+		let leftLivePosition, rightLivePosition;
+
+		// We need to listen on `Clipboard#inputTransformation` because we need to save positions of selection.
+		// After pasting a content, between those position can be located a URL that should be transformed to media.
+		this.listenTo( editor.plugins.get( Clipboard ), 'inputTransformation', () => {
+			const firstRange = modelDocument.selection.getFirstRange();
+
+			leftLivePosition = LivePosition.createFromPosition( firstRange.start );
+			leftLivePosition.stickiness = 'toPrevious';
+
+			rightLivePosition = LivePosition.createFromPosition( firstRange.end );
+			rightLivePosition.stickiness = 'toNext';
+		} );
+
+		modelDocument.on( 'change:data', () => {
+			if ( !leftLivePosition ) {
+				return;
+			}
+
+			const urlRange = new Range( leftLivePosition, rightLivePosition );
+			const walker = new TreeWalker( { boundaries: urlRange, ignoreElementEnd: true } );
+
+			let url = '';
+
+			for ( const node of walker ) {
+				if ( node.type === 'elementStart' ) {
+					return detach();
+				}
+
+				url += node.item.data;
+			}
+
+			url = url.trim();
+
+			// If the url does not match to universal url regexp, let's skip that.
+			if ( !url.match( URL_REGEXP ) ) {
+				return detach();
+			}
+
+			// If the url is valid from MediaEmbed plugin point of view, let's use it.
+			if ( !mediaRegistry.hasMedia( url ) ) {
+				return detach();
+			}
+
+			// `leftLivePosition` won't be available in `setTimeout` function so let's clone it.
+			const positionToInsert = Position.createFromPosition( leftLivePosition );
+
+			global.window.setTimeout( () => {
+				editor.model.change( writer => {
+					writer.remove( urlRange );
+					writer.setSelection( positionToInsert );
+					editor.commands.execute( 'mediaEmbed', url );
+				} );
+			}, 100 );
+		} );
+
+		function detach() {
+			leftLivePosition.detach();
+			rightLivePosition.detach();
+
+			leftLivePosition = null;
+			rightLivePosition = null;
+		}
+	}
+}

+ 2 - 92
packages/ckeditor5-media-embed/src/mediaembed.js

@@ -8,17 +8,10 @@
  */
 
 import MediaEmbedEditing from './mediaembedediting';
+import AutoMediaEmbed from './automediaembed';
 import MediaEmbedUI from './mediaembedui';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 import Widget from '@ckeditor/ckeditor5-widget/src/widget';
-import Range from '@ckeditor/ckeditor5-engine/src/model/range';
-import Position from '@ckeditor/ckeditor5-engine/src/model/position';
-import LivePosition from '@ckeditor/ckeditor5-engine/src/model/liveposition';
-import TreeWalker from '@ckeditor/ckeditor5-engine/src/model/treewalker';
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
-
-const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=]+$/;
 
 /**
  * The media embed plugin.
@@ -35,7 +28,7 @@ export default class MediaEmbed extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ MediaEmbedEditing, MediaEmbedUI, Widget, Clipboard ];
+		return [ MediaEmbedEditing, MediaEmbedUI, AutoMediaEmbed, Widget ];
 	}
 
 	/**
@@ -44,89 +37,6 @@ export default class MediaEmbed extends Plugin {
 	static get pluginName() {
 		return 'MediaEmbed';
 	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		this._attachAutoEmbedingEvents();
-	}
-
-	/**
-	 * Attach events required for "auto-embeding" feature.
-	 *
-	 * @private
-	 */
-	_attachAutoEmbedingEvents() {
-		const editor = this.editor;
-		const modelDocument = editor.model.document;
-		const mediaRegistry = editor.plugins.get( MediaEmbedEditing ).registry;
-
-		let leftLivePosition, rightLivePosition;
-
-		// We need to listen on `Clipboard#inputTransformation` because we need to save positions of selection.
-		// After pasting a content, between those position can be located a URL that should be transformed to media.
-		this.listenTo( editor.plugins.get( Clipboard ), 'inputTransformation', () => {
-			const firstRange = modelDocument.selection.getFirstRange();
-
-			leftLivePosition = LivePosition.createFromPosition( firstRange.start );
-			leftLivePosition.stickiness = 'toPrevious';
-
-			rightLivePosition = LivePosition.createFromPosition( firstRange.end );
-			rightLivePosition.stickiness = 'toNext';
-		} );
-
-		modelDocument.on( 'change:data', () => {
-			if ( !leftLivePosition ) {
-				return;
-			}
-
-			const urlRange = new Range( leftLivePosition, rightLivePosition );
-			const walker = new TreeWalker( { boundaries: urlRange, ignoreElementEnd: true } );
-
-			let url = '';
-
-			for ( const node of walker ) {
-				if ( node.type === 'elementStart' ) {
-					return detach();
-				}
-
-				url += node.item.data;
-			}
-
-			// If the url does not match to universal url regexp, let's skip that.
-			if ( !url.match( URL_REGEXP ) ) {
-				return detach();
-			}
-
-			// If the url is valid from MediaEmbed plugin point of view, let's use it.
-			if ( !mediaRegistry.hasMedia( url ) ) {
-				return detach();
-			}
-
-			// `leftLivePosition` won't be available in `setTimeout` function so let's clone it.
-			const positionToInsert = Position.createFromPosition( leftLivePosition );
-
-			global.window.setTimeout( () => {
-				editor.model.change( writer => {
-					// const mediaElement = writer.createElement( 'media', { url } );
-
-					writer.remove( urlRange );
-					// writer.insert( mediaElement, positionToInsert );
-					writer.setSelection( positionToInsert );
-					editor.commands.execute( 'mediaEmbed', url );
-				} );
-			}, 500 );
-		} );
-
-		function detach() {
-			leftLivePosition.detach();
-			rightLivePosition.detach();
-
-			leftLivePosition = null;
-			rightLivePosition = null;
-		}
-	}
 }
 
 /**

+ 327 - 0
packages/ckeditor5-media-embed/tests/automediaembed.js

@@ -0,0 +1,327 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import MediaEmbed from '../src/mediaembed';
+import AutoMediaEmbed from '../src/automediaembed';
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Link from '@ckeditor/ckeditor5-link/src/link';
+import List from '@ckeditor/ckeditor5-list/src/list';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Undo from '@ckeditor/ckeditor5-undo/src/undo';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import { getData, setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+
+describe( 'AutoMediaEmbed - integration', () => {
+	let editorElement, editor;
+
+	beforeEach( () => {
+		editorElement = global.document.createElement( 'div' );
+		global.document.body.appendChild( editorElement );
+
+		return ClassicTestEditor
+			.create( editorElement, {
+				plugins: [ MediaEmbed, AutoMediaEmbed, Link, List, Bold, Undo ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+			} );
+	} );
+
+	afterEach( () => {
+		editorElement.remove();
+
+		return editor.destroy();
+	} );
+
+	it( 'should load Clipboard plugin', () => {
+		expect( editor.plugins.get( Clipboard ) ).to.instanceOf( Clipboard );
+	} );
+
+	it( 'has proper name', () => {
+		expect( AutoMediaEmbed.pluginName ).to.equal( 'AutoMediaEmbed' );
+	} );
+
+	describe( 'auto-media embed', () => {
+		let clock;
+
+		beforeEach( () => {
+			clock = sinon.useFakeTimers();
+		} );
+
+		afterEach( () => {
+			clock.restore();
+		} );
+
+		it( 'replaces pasted text with media element after 100ms', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4[]</paragraph>'
+			);
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'can undo auto-embeding', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4[]</paragraph>'
+			);
+
+			clock.tick( 100 );
+
+			editor.commands.execute( 'undo' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4[]</paragraph>'
+			);
+		} );
+
+		it( 'works for a full URL (https + "www" sub-domain)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works for a full URL (https without "wwww" sub-domain)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'https://youtube.com/watch?v=H08tGjXNHO4' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="https://youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works for a full URL (http + "www" sub-domain)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'http://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="http://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works for a full URL (http without "wwww" sub-domain)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'http://youtube.com/watch?v=H08tGjXNHO4' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="http://youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works for a URL without protocol (with "www" sub-domain)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works for a URL without protocol (without "www" sub-domain)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'youtube.com/watch?v=H08tGjXNHO4' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works fine if a media has no preview', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'https://twitter.com/ckeditor/status/1035181110140063749' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="https://twitter.com/ckeditor/status/1035181110140063749"></media>]'
+			);
+		} );
+
+		it( 'works for URL that was pasted as a link', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, '<a href="https://www.youtube.com/watch?v=H08tGjXNHO4">https://www.youtube.com/watch?v=H08tGjXNHO4</a>' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works for URL that contains some inline styles', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, '<b>https://www.youtube.com/watch?v=H08tGjXNHO4</b>' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works for not collapsed selection inside single element', () => {
+			setData( editor.model, '<paragraph>[Foo]</paragraph>' );
+			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works for not collapsed selection over a few elements', () => {
+			setData( editor.model, '<paragraph>Fo[o</paragraph><paragraph>Ba]r</paragraph>' );
+			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>For</paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'does nothing if a URL is invalid', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'https://youtube.com' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>https://youtube.com[]</paragraph>'
+			);
+		} );
+
+		it( 'does nothing if pasted two links as text', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4 https://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4 https://www.youtube.com/watch?v=H08tGjXNHO4[]</paragraph>'
+			);
+		} );
+
+		it( 'does nothing if pasted text contains a valid URL', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'Foo bar https://www.youtube.com/watch?v=H08tGjXNHO4 bar foo.' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>Foo bar https://www.youtube.com/watch?v=H08tGjXNHO4 bar foo.[]</paragraph>'
+			);
+		} );
+
+		it( 'does nothing if pasted more than single node', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor,
+				'https://www.youtube.com/watch?v=H08tGjXNHO4 ' +
+				'<a href="https://www.youtube.com/watch?v=H08tGjXNHO4">https://www.youtube.com/watch?v=H08tGjXNHO4</a>'
+			);
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4 ' +
+				'<$text linkHref="https://www.youtube.com/watch?v=H08tGjXNHO4">https://www.youtube.com/watch?v=H08tGjXNHO4[]</$text>' +
+				'</paragraph>'
+			);
+		} );
+
+		it( 'does nothing if pastes a block of content that looks like a URL', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, '<ul><li>https://</li><li>youtube.com/watch?</li></ul><p>v=H08tGjXNHO4</p>' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<listItem listIndent="0" listType="bulleted">https://</listItem>' +
+				'<listItem listIndent="0" listType="bulleted">youtube.com/watch?</listItem>' +
+				'<paragraph>v=H08tGjXNHO4[]</paragraph>'
+			);
+		} );
+
+		it( 'does nothing if a URL is invalid (space inside URL)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'youtube.com/watch?v=H08tGjXNHO4&amp;param=foo bar' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>youtube.com/watch?v=H08tGjXNHO4&param=foo bar[]</paragraph>'
+			);
+		} );
+
+		it( 'does nothing if URL match to media but it was removed', () => {
+			return ClassicTestEditor
+				.create( editorElement, {
+					plugins: [ MediaEmbed, AutoMediaEmbed, Paragraph ],
+					mediaEmbed: {
+						removeProviders: [ 'youtube' ]
+					}
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+
+					setData( editor.model, '<paragraph>[]</paragraph>' );
+					pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+					clock.tick( 100 );
+
+					expect( getData( editor.model ) ).to.equal(
+						'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4[]</paragraph>'
+					);
+
+					editorElement.remove();
+
+					return editor.destroy();
+				} );
+		} );
+
+		function pasteHtml( editor, html ) {
+			editor.editing.view.document.fire( 'paste', {
+				dataTransfer: createDataTransfer( { 'text/html': html } ),
+				preventDefault() {
+				}
+			} );
+		}
+
+		function createDataTransfer( data ) {
+			return {
+				getData( type ) {
+					return data[ type ];
+				}
+			};
+		}
+	} );
+} );

+ 1 - 1
packages/ckeditor5-media-embed/tests/manual/mediaembed.md

@@ -3,7 +3,7 @@
 ### Embed the media
 
 1. Put an URL in the clipboard,
-1. Use the button in the dropdown,
+1. Use the button in the dropdown or paste the URL directly in the editor,
 1. Insert the media,
 1. Check if media was inserted and is selected.
 

+ 1 - 1
packages/ckeditor5-media-embed/tests/manual/semanticmediaembed.md

@@ -3,7 +3,7 @@
 ### Embed the media
 
 1. Put an URL in the clipboard,
-1. Use the button in the dropdown,
+1. Use the button in the dropdown or paste the URL directly in the editor,
 1. Insert the media,
 1. Check if media was inserted and is selected.
 

+ 6 - 292
packages/ckeditor5-media-embed/tests/mediaembed.js

@@ -7,15 +7,9 @@ import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictest
 import MediaEmbed from '../src/mediaembed';
 import MediaEmbedEditing from '../src/mediaembedediting';
 import MediaEmbedUI from '../src/mediaembedui';
+import AutoMediaEmbed from '../src/automediaembed';
 import Widget from '@ckeditor/ckeditor5-widget/src/widget';
-import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Link from '@ckeditor/ckeditor5-link/src/link';
-import List from '@ckeditor/ckeditor5-list/src/list';
-import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
-import { getData, setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 describe( 'MediaEmbed', () => {
 	let editorElement, editor;
@@ -26,7 +20,7 @@ describe( 'MediaEmbed', () => {
 
 		return ClassicTestEditor
 			.create( editorElement, {
-				plugins: [ MediaEmbed, Paragraph, Link, Bold, Undo, List ]
+				plugins: [ MediaEmbed ]
 			} )
 			.then( newEditor => {
 				editor = newEditor;
@@ -51,295 +45,15 @@ describe( 'MediaEmbed', () => {
 		expect( editor.plugins.get( Widget ) ).to.instanceOf( Widget );
 	} );
 
-	it( 'should load Clipboard plugin', () => {
-		expect( editor.plugins.get( Clipboard ) ).to.instanceOf( Clipboard );
-	} );
-
 	it( 'should load MediaEmbedUI plugin', () => {
 		expect( editor.plugins.get( MediaEmbedUI ) ).to.instanceOf( MediaEmbedUI );
 	} );
 
-	it( 'has proper name', () => {
-		expect( MediaEmbed.pluginName ).to.equal( 'MediaEmbed' );
+	it( 'should load AutoMediaEmbed plugin', () => {
+		expect( editor.plugins.get( AutoMediaEmbed ) ).to.instanceOf( AutoMediaEmbed );
 	} );
 
-	describe( 'auto-media embed', () => {
-		let clock;
-
-		beforeEach( () => {
-			clock = sinon.useFakeTimers();
-		} );
-
-		afterEach( () => {
-			clock.restore();
-		} );
-
-		it( 'replaces pasted text with media element after 500ms', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4[]</paragraph>'
-			);
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph></paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
-			);
-		} );
-
-		it( 'can undo auto-embeding', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4[]</paragraph>'
-			);
-
-			clock.tick( 500 );
-
-			editor.commands.execute( 'undo' );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4[]</paragraph>'
-			);
-		} );
-
-		it( 'works for a full URL (https + "www" sub-domain)', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph></paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
-			);
-		} );
-
-		it( 'works for a full URL (https without "wwww" sub-domain)', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, 'https://youtube.com/watch?v=H08tGjXNHO4' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph></paragraph>[<media url="https://youtube.com/watch?v=H08tGjXNHO4"></media>]'
-			);
-		} );
-
-		it( 'works for a full URL (http + "www" sub-domain)', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, 'http://www.youtube.com/watch?v=H08tGjXNHO4' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph></paragraph>[<media url="http://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
-			);
-		} );
-
-		it( 'works for a full URL (http without "wwww" sub-domain)', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, 'http://youtube.com/watch?v=H08tGjXNHO4' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph></paragraph>[<media url="http://youtube.com/watch?v=H08tGjXNHO4"></media>]'
-			);
-		} );
-
-		it( 'works for a URL without protocol (with "www" sub-domain)', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, 'www.youtube.com/watch?v=H08tGjXNHO4' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph></paragraph>[<media url="www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
-			);
-		} );
-
-		it( 'works for a URL without protocol (without "www" sub-domain)', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, 'youtube.com/watch?v=H08tGjXNHO4' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph></paragraph>[<media url="youtube.com/watch?v=H08tGjXNHO4"></media>]'
-			);
-		} );
-
-		it( 'works fine if a media has no preview', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, 'https://twitter.com/ckeditor/status/1035181110140063749' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph></paragraph>[<media url="https://twitter.com/ckeditor/status/1035181110140063749"></media>]'
-			);
-		} );
-
-		it( 'works for URL that was pasted as a link', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, '<a href="https://www.youtube.com/watch?v=H08tGjXNHO4">https://www.youtube.com/watch?v=H08tGjXNHO4</a>' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph></paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
-			);
-		} );
-
-		it( 'works for URL that contains some inline styles', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, '<b>https://www.youtube.com/watch?v=H08tGjXNHO4</b>' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph></paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
-			);
-		} );
-
-		it( 'works for not collapsed selection inside single element', () => {
-			setData( editor.model, '<paragraph>[Foo]</paragraph>' );
-			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph></paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
-			);
-		} );
-
-		it( 'works for not collapsed selection over a few elements', () => {
-			setData( editor.model, '<paragraph>Fo[o</paragraph><paragraph>Ba]r</paragraph>' );
-			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph>For</paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
-			);
-		} );
-
-		it( 'does nothing if a URL is invalid', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, 'https://youtube.com' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph>https://youtube.com[]</paragraph>'
-			);
-		} );
-
-		it( 'does nothing if pasted two links as text', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4 https://www.youtube.com/watch?v=H08tGjXNHO4' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4 https://www.youtube.com/watch?v=H08tGjXNHO4[]</paragraph>'
-			);
-		} );
-
-		it( 'does nothing if pasted text contains a valid URL', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, 'Foo bar https://www.youtube.com/watch?v=H08tGjXNHO4 bar foo.' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph>Foo bar https://www.youtube.com/watch?v=H08tGjXNHO4 bar foo.[]</paragraph>'
-			);
-		} );
-
-		it( 'does nothing if pasted more than single node', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor,
-				'https://www.youtube.com/watch?v=H08tGjXNHO4 ' +
-				'<a href="https://www.youtube.com/watch?v=H08tGjXNHO4">https://www.youtube.com/watch?v=H08tGjXNHO4</a>'
-			);
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4 ' +
-					'<$text linkHref="https://www.youtube.com/watch?v=H08tGjXNHO4">https://www.youtube.com/watch?v=H08tGjXNHO4[]</$text>' +
-				'</paragraph>'
-			);
-		} );
-
-		it( 'does nothing if pastes a block of content that looks like a URL', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, '<ul><li>https://</li><li>youtube.com/watch?</li></ul><p>v=H08tGjXNHO4</p>' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<listItem listIndent="0" listType="bulleted">https://</listItem>' +
-				'<listItem listIndent="0" listType="bulleted">youtube.com/watch?</listItem>' +
-				'<paragraph>v=H08tGjXNHO4[]</paragraph>'
-			);
-		} );
-
-		it( 'does nothing if a URL is invalid (space inside URL)', () => {
-			setData( editor.model, '<paragraph>[]</paragraph>' );
-			pasteHtml( editor, 'youtube.com/watch?v=H08tGjXNHO4&amp;param=foo bar' );
-
-			clock.tick( 500 );
-
-			expect( getData( editor.model ) ).to.equal(
-				'<paragraph>youtube.com/watch?v=H08tGjXNHO4&param=foo bar[]</paragraph>'
-			);
-		} );
-
-		it( 'does nothing if URL match to media but it was removed', () => {
-			return ClassicTestEditor
-				.create( editorElement, {
-					plugins: [ MediaEmbed, Paragraph ],
-					mediaEmbed: {
-						removeProviders: [ 'youtube' ]
-					}
-				} )
-				.then( newEditor => {
-					editor = newEditor;
-
-					setData( editor.model, '<paragraph>[]</paragraph>' );
-					pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
-
-					clock.tick( 500 );
-
-					expect( getData( editor.model ) ).to.equal(
-						'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4[]</paragraph>'
-					);
-
-					editorElement.remove();
-
-					return editor.destroy();
-				} );
-		} );
-
-		function pasteHtml( editor, html ) {
-			editor.editing.view.document.fire( 'paste', {
-				dataTransfer: createDataTransfer( { 'text/html': html } ),
-				preventDefault() {
-				}
-			} );
-		}
-
-		function createDataTransfer( data ) {
-			return {
-				getData( type ) {
-					return data[ type ];
-				}
-			};
-		}
+	it( 'has proper name', () => {
+		expect( MediaEmbed.pluginName ).to.equal( 'MediaEmbed' );
 	} );
 } );