Merge pull request #68 from ckeditor/t/36

Fix: The `AutoMediaEmbed` feature should insert media in place of a pasted link. Closes #36. Closes #49.
ckeditor · Jan 4, 2019 · 5f79878 · 5f79878
2 parents f628629 + 2c1f17f
commit 5f79878
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 11 deletions.
diff --git a/src/automediaembed.js b/src/automediaembed.js
@@ -14,6 +14,7 @@ import LiveRange from '@ckeditor/ckeditor5-engine/src/model/liverange';
 import LivePosition from '@ckeditor/ckeditor5-engine/src/model/liveposition';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import { insertMedia } from './utils';
 
 const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=]+$/;
 
@@ -153,12 +154,15 @@ export default class AutoMediaEmbed extends Plugin {
 
 				writer.remove( urlRange );
 
+				let insertionPosition;
+
 				// Check if position where the media element should be inserted is still valid.
+				// Otherwise leave it as undefined to use document.selection - default behavior of model.insertContent().
 				if ( this._positionToInsert.root.rootName !== '$graveyard' ) {
-					writer.setSelection( this._positionToInsert );
+					insertionPosition = this._positionToInsert;
 				}
 
-				mediaEmbedCommand.execute( url );
+				insertMedia( editor.model, url, insertionPosition );
 
 				this._positionToInsert.detach();
 				this._positionToInsert = null;

diff --git a/src/mediaembedcommand.js b/src/mediaembedcommand.js
@@ -9,7 +9,7 @@
 
 import Command from '@ckeditor/ckeditor5-core/src/command';
 import { findOptimalInsertionPosition } from '@ckeditor/ckeditor5-widget/src/utils';
-import { getSelectedMediaElement } from './utils';
+import { getSelectedMediaElement, insertMedia } from './utils';
 
 /**
  * The insert media command.
@@ -64,13 +64,7 @@ export default class MediaEmbedCommand extends Command {
 		} else {
 			const insertPosition = findOptimalInsertionPosition( selection, model );
 
-			model.change( writer => {
-				const mediaElement = writer.createElement( 'media', { url } );
-
-				model.insertContent( mediaElement, insertPosition );
-
-				writer.setSelection( mediaElement, 'on' );
-			} );
+			insertMedia( model, url, insertPosition );
 		}
 	}
 }

diff --git a/src/utils.js b/src/utils.js
@@ -88,6 +88,28 @@ export function getSelectedMediaElement( selection ) {
 	return null;
 }
 
+/**
+ * Creates a media element and inserts it into the model.
+ *
+ * **Note**: This method will use {@link module:engine/model/model~Model#insertContent `model.insertContent()`} logic of inserting content
+ * if no `insertPosition` is passed.
+ *
+ * @param {module:engine/model/model~Model} model
+ * @param {String} url An URL of an embeddable media.
+ * @param {module:engine/model/position~Position} [insertPosition] Position to insert media. If not specified,
+ * the default behavior of {@link module:engine/model/model~Model#insertContent `model.insertContent()`} will
+ * be applied.
+ */
+export function insertMedia( model, url, insertPosition ) {
+	model.change( writer => {
+		const mediaElement = writer.createElement( 'media', { url } );
+
+		model.insertContent( mediaElement, insertPosition );
+
+		writer.setSelection( mediaElement, 'on' );
+	} );
+}
+
 function getFillerOffset() {
 	return null;
 }
diff --git a/tests/automediaembed.js b/tests/automediaembed.js
@@ -214,7 +214,33 @@ describe( 'AutoMediaEmbed - integration', () => {
 			clock.tick( 100 );
 
 			expect( getData( editor.model ) ).to.equal(
-				'[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]<paragraph>For</paragraph>'
+				'<paragraph>Fo</paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]<paragraph>r</paragraph>'
+			);
+		} );
+
+		it( 'inserts media in-place (collapsed selection)', () => {
+			setData( editor.model, '<paragraph>Foo []Bar</paragraph>' );
+			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>Foo </paragraph>' +
+				'[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]' +
+				'<paragraph>Bar</paragraph>'
+			);
+		} );
+
+		it( 'inserts media in-place (non-collapsed selection)', () => {
+			setData( editor.model, '<paragraph>Foo [Bar] Baz</paragraph>' );
+			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			clock.tick( 100 );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>Foo </paragraph>' +
+				'[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]' +
+				'<paragraph> Baz</paragraph>'
 			);
 		} );