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

Merge branch 'master' into ckeditor5/t/1214

Piotrek Koszuliński 7 лет назад
Родитель
Сommit
1dfc7c20a6
34 измененных файлов с 222 добавлено и 57 удалено
  1. 20 0
      packages/ckeditor5-media-embed/CHANGELOG.md
  2. 1 1
      packages/ckeditor5-media-embed/docs/_snippets/features/media-embed.js
  3. 1 1
      packages/ckeditor5-media-embed/docs/features/media-embed.md
  4. 2 1
      packages/ckeditor5-media-embed/lang/contexts.json
  5. 4 0
      packages/ckeditor5-media-embed/lang/translations/cs.po
  6. 4 0
      packages/ckeditor5-media-embed/lang/translations/de.po
  7. 4 0
      packages/ckeditor5-media-embed/lang/translations/en.po
  8. 4 0
      packages/ckeditor5-media-embed/lang/translations/et.po
  9. 4 0
      packages/ckeditor5-media-embed/lang/translations/fa.po
  10. 5 1
      packages/ckeditor5-media-embed/lang/translations/fr.po
  11. 4 0
      packages/ckeditor5-media-embed/lang/translations/gl.po
  12. 4 0
      packages/ckeditor5-media-embed/lang/translations/hr.po
  13. 4 0
      packages/ckeditor5-media-embed/lang/translations/hu.po
  14. 4 0
      packages/ckeditor5-media-embed/lang/translations/it.po
  15. 4 0
      packages/ckeditor5-media-embed/lang/translations/ne.po
  16. 4 0
      packages/ckeditor5-media-embed/lang/translations/no.po
  17. 4 0
      packages/ckeditor5-media-embed/lang/translations/pl.po
  18. 4 0
      packages/ckeditor5-media-embed/lang/translations/pt-br.po
  19. 4 0
      packages/ckeditor5-media-embed/lang/translations/sq.po
  20. 4 0
      packages/ckeditor5-media-embed/lang/translations/tr.po
  21. 4 0
      packages/ckeditor5-media-embed/lang/translations/uk.po
  22. 4 0
      packages/ckeditor5-media-embed/lang/translations/zh-cn.po
  23. 19 19
      packages/ckeditor5-media-embed/package.json
  24. 6 2
      packages/ckeditor5-media-embed/src/automediaembed.js
  25. 2 8
      packages/ckeditor5-media-embed/src/mediaembedcommand.js
  26. 8 10
      packages/ckeditor5-media-embed/src/mediaembedediting.js
  27. 22 5
      packages/ckeditor5-media-embed/src/ui/mediaformview.js
  28. 22 0
      packages/ckeditor5-media-embed/src/utils.js
  29. 27 1
      packages/ckeditor5-media-embed/tests/automediaembed.js
  30. 2 2
      packages/ckeditor5-media-embed/tests/mediaembedediting.js
  31. 8 4
      packages/ckeditor5-media-embed/tests/ui/mediaformview.js
  32. 1 1
      packages/ckeditor5-media-embed/theme/icons/media-placeholder.svg
  33. 1 1
      packages/ckeditor5-media-embed/theme/icons/media.svg
  34. 7 0
      packages/ckeditor5-media-embed/theme/mediaembed.css

+ 20 - 0
packages/ckeditor5-media-embed/CHANGELOG.md

@@ -1,6 +1,26 @@
 Changelog
 =========
 
+## [10.1.0](https://github.com/ckeditor/ckeditor5-media-embed/compare/v10.0.0...v10.1.0) (2018-12-05)
+
+### Features
+
+* Implemented a tip in the form that helps users discover the auto embedding. Closes [#35](https://github.com/ckeditor/ckeditor5-media-embed/issues/35). ([ebdec7e](https://github.com/ckeditor/ckeditor5-media-embed/commit/ebdec7e))
+* Improved responsiveness of the media form view in narrow viewports (see [ckeditor/ckeditor5#416](https://github.com/ckeditor/ckeditor5/issues/416)). ([c753463](https://github.com/ckeditor/ckeditor5-media-embed/commit/c753463))
+
+### Bug fixes
+
+* Floated content and media widgets should not overlap. Closes [#53](https://github.com/ckeditor/ckeditor5-media-embed/issues/53). ([d3aa6e8](https://github.com/ckeditor/ckeditor5-media-embed/commit/d3aa6e8))
+* Made the media interactive when the editor is in the read-only mode (just like links). Closes [#58](https://github.com/ckeditor/ckeditor5-media-embed/issues/58). ([09c387a](https://github.com/ckeditor/ckeditor5-media-embed/commit/09c387a))
+* The `AutoMediaEmbed` should not upcast the pasted URL if a media element is disallowed at the current selection. Closes [#47](https://github.com/ckeditor/ckeditor5-media-embed/issues/47). ([47092c6](https://github.com/ckeditor/ckeditor5-media-embed/commit/47092c6))
+
+### Other changes
+
+* Improved SVG icons size. See [ckeditor/ckeditor5-theme-lark#206](https://github.com/ckeditor/ckeditor5-theme-lark/issues/206). ([b95fc42](https://github.com/ckeditor/ckeditor5-media-embed/commit/b95fc42))
+* Moved widget spacing styles from `@ckeditor/ckeditor5-theme-lark` to the feature content styles sheet (see [ckeditor/ckeditor5-theme-lark#209](https://github.com/ckeditor/ckeditor5-theme-lark/issues/209)). ([501a567](https://github.com/ckeditor/ckeditor5-media-embed/commit/501a567))
+* Updated translations. ([58614b0](https://github.com/ckeditor/ckeditor5-media-embed/commit/58614b0)) ([120912c](https://github.com/ckeditor/ckeditor5-media-embed/commit/120912c)) ([e1b4206](https://github.com/ckeditor/ckeditor5-media-embed/commit/e1b4206)) ([c376e7f](https://github.com/ckeditor/ckeditor5-media-embed/commit/c376e7f))
+
+
 ## [10.0.0](https://github.com/ckeditor/ckeditor5-media-embed/tree/v10.0.0) (2018-10-08)
 
 Initial implementation of the media embed feature.

+ 1 - 1
packages/ckeditor5-media-embed/docs/_snippets/features/media-embed.js

@@ -14,7 +14,7 @@ ClassicEditor
 			items: [
 				'mediaEmbed', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
 			],
-			viewportTopOffset: 100
+			viewportTopOffset: window.getViewportTopOffsetConfig()
 		}
 	} )
 	.then( editor => {

+ 1 - 1
packages/ckeditor5-media-embed/docs/features/media-embed.md

@@ -304,7 +304,7 @@ using this code snippet:
 		// to discover the media.
 		const anchor = document.createElement( 'a' );
 
-		anchor.setAttribute( 'href', element.getAttribute( 'url ') );
+		anchor.setAttribute( 'href', element.getAttribute( 'url' ) );
 		anchor.className = 'embedly-card';
 
 		element.appendChild( anchor );

+ 2 - 1
packages/ckeditor5-media-embed/lang/contexts.json

@@ -1,7 +1,8 @@
 {
 	"media widget": "Label for the media widget.",
 	"Media URL": "Label for the URL input in the Media Embed URL editing balloon.",
-	"Paste the URL into the content to embed faster.": "The tip displayed next to the media URL input informing about an easier way of embedding.",
+	"Paste the media URL in the input.": "The help text displayed under the media URL input helping users to discover the interface.",
+	"Tip: Paste the URL into the content to embed faster.": "The tip displayed next to the media URL input informing about an easier way of embedding.",
 	"The URL must not be empty.": "An error message that informs about an empty value in the URL input.",
 	"This media URL is not supported.": "An error message that informs about unsupported media URL.",
 	"Insert media": "Toolbar button tooltip for the Media Embed feature."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/cs.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "URL adresa"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr ""
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "URL adresa musí být vyplněna."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/de.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "Medien-Url"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr ""
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "Die Url darf nicht leer sein"

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/en.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "Media URL"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr "Paste the URL into the content to embed faster."
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "The URL must not be empty."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/et.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "Meedia URL"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr ""
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "URL-i lahter ei tohi olla tühi."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/fa.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "آدرس اینترنتی رسانه"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr ""
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "آدرس اینترنتی URL نباید خالی باشد."

+ 5 - 1
packages/ckeditor5-media-embed/lang/translations/fr.po

@@ -13,13 +13,17 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "URL média"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr "Coller l'URL dans le contenu pour l'insérer plus rapidement"
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "L'URL ne peut être vide."
 
 msgctxt "An error message that informs about unsupported media URL."
 msgid "This media URL is not supported."
-msgstr "Cet URL média n'est pas supporté."
+msgstr "Cette URL média n'est pas supportée."
 
 msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/gl.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "URL multimedia"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr "Pegue o URL no contido para incorporalo máis rápido."
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "O URL non debe estar baleiro."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/hr.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "URL medija"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr ""
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "URL ne smije biti prazan."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/hu.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "Média URL"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr "A gyorsabb beágyazás érdekében illessze be az URL-t."
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "Az URL nem lehet üres."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/it.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "URL media"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr ""
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "L'URL non può essere vuoto."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/ne.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "मिडिया यूआरएल"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr ""
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "यूआरएल खाली हुनु हुँदैन।"

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/no.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "Media-URL"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr "Lim inn URL-en direkte i innholdet for å legge inn media raskere."
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "URL-en kan ikke være tom."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/pl.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "Adres URL"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr "Wklej URL wprost do treści edytora by wstawić go szybciej."
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "Adres URL nie może być pusty."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/pt-br.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "URL da mídia"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr ""
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "A URL não pode ficar em branco."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/sq.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "URL e Medies"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr ""
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "URL nuk duhet të jetë e zbrazët."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/tr.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "Medya URL'si"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr "Daha hızlı gömülü görünüm için URL'yi içeriğe yapıştırınız."
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "URL boş olamaz."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/uk.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "Медіа URL"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr ""
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "URL не повинен бути порожнім."

+ 4 - 0
packages/ckeditor5-media-embed/lang/translations/zh-cn.po

@@ -13,6 +13,10 @@ msgctxt "Label for the URL input in the Media Embed URL editing balloon."
 msgid "Media URL"
 msgstr "媒体URL"
 
+msgctxt "The tip displayed next to the media URL input informing about an easier way of embedding."
+msgid "Paste the URL into the content to embed faster."
+msgstr ""
+
 msgctxt "An error message that informs about an empty value in the URL input."
 msgid "The URL must not be empty."
 msgstr "URL不可以为空。"

+ 19 - 19
packages/ckeditor5-media-embed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-media-embed",
-  "version": "10.0.0",
+  "version": "10.1.0",
   "description": "Media Embed feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -10,27 +10,27 @@
     "ckeditor5-plugin"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-clipboard": "^10.0.3",
-    "@ckeditor/ckeditor5-core": "^11.0.1",
-    "@ckeditor/ckeditor5-engine": "^11.0.0",
-    "@ckeditor/ckeditor5-enter": "^10.1.2",
-    "@ckeditor/ckeditor5-image": "^11.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^11.1.0",
-    "@ckeditor/ckeditor5-ui": "^11.1.0",
-    "@ckeditor/ckeditor5-undo": "^10.0.3",
-    "@ckeditor/ckeditor5-utils": "^11.0.0",
-    "@ckeditor/ckeditor5-widget": "^10.3.0"
+    "@ckeditor/ckeditor5-clipboard": "^10.0.4",
+    "@ckeditor/ckeditor5-core": "^11.1.0",
+    "@ckeditor/ckeditor5-engine": "^12.0.0",
+    "@ckeditor/ckeditor5-enter": "^10.1.3",
+    "@ckeditor/ckeditor5-image": "^12.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^12.0.0",
+    "@ckeditor/ckeditor5-ui": "^11.2.0",
+    "@ckeditor/ckeditor5-undo": "^10.0.4",
+    "@ckeditor/ckeditor5-utils": "^11.1.0",
+    "@ckeditor/ckeditor5-widget": "^10.3.1"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^10.0.3",
-    "@ckeditor/ckeditor5-editor-balloon": "^11.0.1",
-    "@ckeditor/ckeditor5-editor-classic": "^11.0.1",
-    "@ckeditor/ckeditor5-link": "^10.0.4",
-    "@ckeditor/ckeditor5-list": "^11.0.2",
-    "@ckeditor/ckeditor5-paragraph": "^10.0.3",
-    "@ckeditor/ckeditor5-typing": "^11.0.1",
+    "@ckeditor/ckeditor5-basic-styles": "^10.1.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^11.0.2",
+    "@ckeditor/ckeditor5-editor-classic": "^11.0.2",
+    "@ckeditor/ckeditor5-link": "^10.1.0",
+    "@ckeditor/ckeditor5-list": "^11.0.3",
+    "@ckeditor/ckeditor5-paragraph": "^10.0.4",
+    "@ckeditor/ckeditor5-typing": "^11.0.2",
     "eslint": "^5.5.0",
-    "eslint-config-ckeditor5": "^1.0.7",
+    "eslint-config-ckeditor5": "^1.0.9",
     "husky": "^0.14.3",
     "lint-staged": "^7.0.0"
   },

+ 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 );
 		}
 	}
 }

+ 8 - 10
packages/ckeditor5-media-embed/src/mediaembedediting.js

@@ -13,8 +13,6 @@ import { modelToViewUrlAttributeConverter } from './converters';
 import MediaEmbedCommand from './mediaembedcommand';
 import MediaRegistry from './mediaregistry';
 import { toMediaWidget, createMediaFigureElement } from './utils';
-import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
-import { upcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
 
 import '../theme/mediaembedediting.css';
 
@@ -170,7 +168,7 @@ export default class MediaEmbedEditing extends Plugin {
 		} );
 
 		// Model -> Data
-		conversion.for( 'dataDowncast' ).add( downcastElementToElement( {
+		conversion.for( 'dataDowncast' ).elementToElement( {
 			model: 'media',
 			view: ( modelElement, viewWriter ) => {
 				const url = modelElement.getAttribute( 'url' );
@@ -179,7 +177,7 @@ export default class MediaEmbedEditing extends Plugin {
 					renderMediaPreview: url && renderMediaPreview
 				} );
 			}
-		} ) );
+		} );
 
 		// Model -> Data (url -> data-oembed-url)
 		conversion.for( 'dataDowncast' ).add(
@@ -188,7 +186,7 @@ export default class MediaEmbedEditing extends Plugin {
 			} ) );
 
 		// Model -> View (element)
-		conversion.for( 'editingDowncast' ).add( downcastElementToElement( {
+		conversion.for( 'editingDowncast' ).elementToElement( {
 			model: 'media',
 			view: ( modelElement, viewWriter ) => {
 				const url = modelElement.getAttribute( 'url' );
@@ -198,7 +196,7 @@ export default class MediaEmbedEditing extends Plugin {
 
 				return toMediaWidget( figure, viewWriter, t( 'media widget' ) );
 			}
-		} ) );
+		} );
 
 		// Model -> View (url -> data-oembed-url)
 		conversion.for( 'editingDowncast' ).add(
@@ -209,7 +207,7 @@ export default class MediaEmbedEditing extends Plugin {
 		// View -> Model (data-oembed-url -> url)
 		conversion.for( 'upcast' )
 			// Upcast semantic media.
-			.add( upcastElementToElement( {
+			.elementToElement( {
 				view: {
 					name: 'oembed',
 					attributes: {
@@ -223,9 +221,9 @@ export default class MediaEmbedEditing extends Plugin {
 						return modelWriter.createElement( 'media', { url } );
 					}
 				}
-			} ) )
+			} )
 			// Upcast non-semantic media.
-			.add( upcastElementToElement( {
+			.elementToElement( {
 				view: {
 					name: 'div',
 					attributes: {
@@ -239,6 +237,6 @@ export default class MediaEmbedEditing extends Plugin {
 						return modelWriter.createElement( 'media', { url } );
 					}
 				}
-			} ) );
+			} );
 	}
 }

+ 22 - 5
packages/ckeditor5-media-embed/src/ui/mediaformview.js

@@ -134,6 +134,21 @@ export default class MediaFormView extends View {
 				this.cancelButtonView
 			]
 		} );
+
+		/**
+		 * The default info text for the {@link #urlInputView}.
+		 *
+		 * @private
+		 * @member {String} #_urlInputViewInfoDefault
+		 */
+
+		/**
+		 * The info text with an additional tip for the {@link #urlInputView},
+		 * displayed when the input has some value.
+		 *
+		 * @private
+		 * @member {String} #_urlInputViewInfoTip
+		 */
 	}
 
 	/**
@@ -243,7 +258,7 @@ export default class MediaFormView extends View {
 	 */
 	resetFormStatus() {
 		this.urlInputView.errorText = null;
-		this.urlInputView.infoText = null;
+		this.urlInputView.infoText = this._urlInputViewInfoDefault;
 	}
 
 	/**
@@ -258,14 +273,16 @@ export default class MediaFormView extends View {
 		const labeledInput = new LabeledInputView( this.locale, InputTextView );
 		const inputView = labeledInput.inputView;
 
+		this._urlInputViewInfoDefault = t( 'Paste the media URL in the input.' );
+		this._urlInputViewInfoTip = t( 'Tip: Paste the URL into the content to embed faster.' );
+
 		labeledInput.label = t( 'Media URL' );
+		labeledInput.infoText = this._urlInputViewInfoDefault;
 		inputView.placeholder = 'https://example.com';
 
 		inputView.on( 'input', () => {
-			// Display the #infoText only when there's some value to hide it when the input
-			// is empty, e.g. user used backspace to clean it up.
-			labeledInput.infoText = inputView.element.value ?
-				t( 'Paste the URL into the content to embed faster.' ) : null;
+			// Display the tip text only when there's some value. Otherwise fall back to the default info text.
+			labeledInput.infoText = inputView.element.value ? this._urlInputViewInfoTip : this._urlInputViewInfoDefault;
 		} );
 
 		return labeledInput;

+ 22 - 0
packages/ckeditor5-media-embed/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;
 }

+ 27 - 1
packages/ckeditor5-media-embed/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>'
 			);
 		} );
 

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

@@ -75,7 +75,7 @@ describe( 'MediaEmbedEditing', () => {
 					} ).then( () => {
 						expect( logSpy.calledOnce ).to.equal( true );
 						expect( logSpy.firstCall.args[ 0 ] ).to.match( /^media-embed-no-provider-name:/ );
-						expect( logSpy.firstCall.args[ 1 ].provider ).to.equal( provider );
+						expect( logSpy.firstCall.args[ 1 ].provider ).to.deep.equal( provider );
 					} );
 				} );
 
@@ -330,7 +330,7 @@ describe( 'MediaEmbedEditing', () => {
 					} ).then( () => {
 						expect( logSpy.calledOnce ).to.equal( true );
 						expect( logSpy.firstCall.args[ 0 ] ).to.match( /^media-embed-no-provider-name:/ );
-						expect( logSpy.firstCall.args[ 1 ].provider ).to.equal( provider );
+						expect( logSpy.firstCall.args[ 1 ].provider ).to.deep.equal( provider );
 					} );
 				} );
 

+ 8 - 4
packages/ckeditor5-media-embed/tests/ui/mediaformview.js

@@ -82,16 +82,20 @@ describe( 'MediaFormView', () => {
 				expect( view.urlInputView.inputView.placeholder ).to.equal( 'https://example.com' );
 			} );
 
-			it( 'displays the info text when upon #input when the field has a value', () => {
+			it( 'has info text', () => {
+				expect( view.urlInputView.infoText ).to.match( /^Paste the media URL/ );
+			} );
+
+			it( 'displays the tip upon #input when the field has a value', () => {
 				view.urlInputView.inputView.element.value = 'foo';
 				view.urlInputView.inputView.fire( 'input' );
 
-				expect( view.urlInputView.infoText ).to.match( /^Paste the URL/ );
+				expect( view.urlInputView.infoText ).to.match( /^Tip: Paste the URL into/ );
 
 				view.urlInputView.inputView.element.value = '';
 				view.urlInputView.inputView.fire( 'input' );
 
-				expect( view.urlInputView.infoText ).to.be.null;
+				expect( view.urlInputView.infoText ).to.match( /^Paste the media URL/ );
 			} );
 		} );
 
@@ -307,7 +311,7 @@ describe( 'MediaFormView', () => {
 
 			view.resetFormStatus();
 
-			expect( view.urlInputView.infoText ).to.be.null;
+			expect( view.urlInputView.infoText ).to.match( /^Paste the media URL/ );
 		} );
 	} );
 } );

+ 1 - 1
packages/ckeditor5-media-embed/theme/icons/media-placeholder.svg

@@ -1 +1 @@
-<svg width="64" height="42" xmlns="http://www.w3.org/2000/svg"><path d="M47.426 17V3.713L63.102 0v19.389h-.001l.001.272c0 1.595-2.032 3.43-4.538 4.098-2.506.668-4.538-.083-4.538-1.678 0-1.594 2.032-3.43 4.538-4.098.914-.244 2.032-.565 2.888-.603V4.516L49.076 7.447v9.556A1.014 1.014 0 0 0 49 17h-1.574zM29.5 17h-8.343a7.073 7.073 0 1 0-4.657 4.06v3.781H3.3a2.803 2.803 0 0 1-2.8-2.804V8.63a2.803 2.803 0 0 1 2.8-2.805h4.082L8.58 2.768A1.994 1.994 0 0 1 10.435 1.5h8.985c.773 0 1.477.448 1.805 1.149l1.488 3.177H26.7c1.546 0 2.8 1.256 2.8 2.805V17zm-11.637 0H17.5a1 1 0 0 0-1 1v.05A4.244 4.244 0 1 1 17.863 17zm29.684 2c.97 0 .953-.048.953.889v20.743c0 .953.016.905-.953.905H19.453c-.97 0-.953.048-.953-.905V19.89c0-.937-.016-.889.97-.889h28.077zm-4.701 19.338V22.183H24.154v16.155h18.692zM20.6 21.375v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616V37.53H20.6zm24.233-16.155v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615V37.53h-1.615zM29.485 25.283a.4.4 0 0 1 .593-.35l9.05 4.977a.4.4 0 0 1 0 .701l-9.05 4.978a.4.4 0 0 1-.593-.35v-9.956z" fill="#000" fill-rule="nonzero"/></svg>
+<svg viewBox="0 0 64 42" xmlns="http://www.w3.org/2000/svg"><path d="M47.426 17V3.713L63.102 0v19.389h-.001l.001.272c0 1.595-2.032 3.43-4.538 4.098-2.506.668-4.538-.083-4.538-1.678 0-1.594 2.032-3.43 4.538-4.098.914-.244 2.032-.565 2.888-.603V4.516L49.076 7.447v9.556A1.014 1.014 0 0 0 49 17h-1.574zM29.5 17h-8.343a7.073 7.073 0 1 0-4.657 4.06v3.781H3.3a2.803 2.803 0 0 1-2.8-2.804V8.63a2.803 2.803 0 0 1 2.8-2.805h4.082L8.58 2.768A1.994 1.994 0 0 1 10.435 1.5h8.985c.773 0 1.477.448 1.805 1.149l1.488 3.177H26.7c1.546 0 2.8 1.256 2.8 2.805V17zm-11.637 0H17.5a1 1 0 0 0-1 1v.05A4.244 4.244 0 1 1 17.863 17zm29.684 2c.97 0 .953-.048.953.889v20.743c0 .953.016.905-.953.905H19.453c-.97 0-.953.048-.953-.905V19.89c0-.937-.016-.889.97-.889h28.077zm-4.701 19.338V22.183H24.154v16.155h18.692zM20.6 21.375v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616V37.53H20.6zm24.233-16.155v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615V37.53h-1.615zM29.485 25.283a.4.4 0 0 1 .593-.35l9.05 4.977a.4.4 0 0 1 0 .701l-9.05 4.978a.4.4 0 0 1-.593-.35v-9.956z"/></svg>

+ 1 - 1
packages/ckeditor5-media-embed/theme/icons/media.svg

@@ -1 +1 @@
-<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M18.68 2.53c.6 0 .59-.03.59.55v12.84c0 .59.01.56-.59.56H1.29c-.6 0-.59.03-.59-.56V3.08c0-.58-.01-.55.6-.55h17.38zM15.77 14.5v-10H4.2v10h11.57zM2 4v1h1V4H2zm0 2v1h1V6H2zm0 2v1h1V8H2zm0 2v1h1v-1H2zm0 2v1h1v-1H2zm0 2v1h1v-1H2zM17 4v1h1V4h-1zm0 2v1h1V6h-1zm0 2v1h1V8h-1zm0 2v1h1v-1h-1zm0 2v1h1v-1h-1zm0 2v1h1v-1h-1zM7.5 6.677a.4.4 0 0 1 .593-.351l5.133 2.824a.4.4 0 0 1 0 .7l-5.133 2.824a.4.4 0 0 1-.593-.35V6.676z" fill="#000" fill-rule="nonzero"/></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18.68 2.53c.6 0 .59-.03.59.55v12.84c0 .59.01.56-.59.56H1.29c-.6 0-.59.03-.59-.56V3.08c0-.58-.01-.55.6-.55h17.38zM15.77 14.5v-10H4.2v10h11.57zM2 4v1h1V4H2zm0 2v1h1V6H2zm0 2v1h1V8H2zm0 2v1h1v-1H2zm0 2v1h1v-1H2zm0 2v1h1v-1H2zM17 4v1h1V4h-1zm0 2v1h1V6h-1zm0 2v1h1V8h-1zm0 2v1h1v-1h-1zm0 2v1h1v-1h-1zm0 2v1h1v-1h-1zM7.5 6.677a.4.4 0 0 1 .593-.351l5.133 2.824a.4.4 0 0 1 0 .7l-5.133 2.824a.4.4 0 0 1-.593-.35V6.676z"/></svg>

+ 7 - 0
packages/ckeditor5-media-embed/theme/mediaembed.css

@@ -7,4 +7,11 @@
 	/* Don't allow floated content overlap the media.
 	https://github.com/ckeditor/ckeditor5-media-embed/issues/53 */
 	clear: both;
+
+	/* Make sure there is some space between the content and the media. */
+	margin: 1em 0;
+
+	/* Make sure media is not overriden with Bootstrap default `flex` value.
+	See: https://github.com/ckeditor/ckeditor5/issues/1373. */
+	display: block;
 }