8
0
Pārlūkot izejas kodu

Make auto-embed insert media in-place of pasted link.

Maciej Gołaszewski 7 gadi atpakaļ
vecāks
revīzija
727bbdcaa3

+ 6 - 2
packages/ckeditor5-media-embed/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;

+ 2 - 8
packages/ckeditor5-media-embed/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 );
 		}
 	}
 }

+ 20 - 0
packages/ckeditor5-media-embed/src/utils.js

@@ -88,6 +88,26 @@ export function getSelectedMediaElement( selection ) {
 	return null;
 }
 
+/**
+ * Creates 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.
+ */
+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;
 }

+ 14 - 1
packages/ckeditor5-media-embed/tests/automediaembed.js

@@ -214,7 +214,20 @@ 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', () => {
+			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>'
 			);
 		} );