Преглед изворни кода

Extended media embed to support non-previewable providers.

Aleksander Nowodzinski пре 7 година
родитељ
комит
7247091d8a

+ 1 - 1
packages/ckeditor5-media-embed/src/mediaembed.js

@@ -13,7 +13,7 @@ import MediaEmbedEditing from './mediaembedediting';
 import MediaEmbedUI from './mediaembedui';
 import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 
-// import '../theme/mediaembed.css';
+import '../theme/mediaembed.css';
 
 /**
  * The media embed plugin.

+ 27 - 11
packages/ckeditor5-media-embed/src/mediaembedediting.js

@@ -19,8 +19,6 @@ 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';
-
 /**
  * The media embed editing feature.
  *
@@ -63,9 +61,11 @@ export default class MediaEmbedEditing extends Plugin {
 						/^(https:\/\/)?(www\.)?open\.spotify\.com\/(track\/\w+)/
 					],
 					html: id =>
-						`<iframe src="https://open.spotify.com/embed/${ id }" ` +
-							'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
-						'</iframe>'
+						'<div class="ck-media__wrapper__aspect">' +
+							`<iframe src="https://open.spotify.com/embed/${ id }" ` +
+								'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
+							'</iframe>' +
+						'</div>'
 				},
 
 				youtube: {
@@ -76,9 +76,11 @@ export default class MediaEmbedEditing extends Plugin {
 						/^(https:\/\/)?youtu\.be\/(\w+)/
 					],
 					html: id =>
-						`<iframe src="https://www.youtube.com/embed/${ id }" ` +
-							'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
-						'</iframe>'
+						'<div class="ck-media__wrapper__aspect">' +
+							`<iframe src="https://www.youtube.com/embed/${ id }" ` +
+								'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
+							'</iframe>' +
+						'</div>'
 				},
 
 				vimeo: {
@@ -92,10 +94,24 @@ export default class MediaEmbedEditing extends Plugin {
 						/^(https:\/\/)?(www\.)?player\.vimeo\.com\/video\/(\d+)/
 					],
 					html: id =>
-						`<iframe src="https://player.vimeo.com/video/${ id }" ` +
-							'frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>' +
-						'</iframe>'
+						'<div class="ck-media__wrapper__aspect">' +
+							`<iframe src="https://player.vimeo.com/video/${ id }" ` +
+								'frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>' +
+							'</iframe>' +
+						'</div>'
+				},
+
+				twitter: {
+					url: /^(https:\/\/)?(www\.)?twitter\.com/
+				},
+
+				googleMaps: {
+					url: /^(https:\/\/)?(www\.)?google\.com\/maps/
 				},
+
+				flickr: {
+					url: /^(https:\/\/)?(www\.)?flickr\.com/
+				}
 			}
 		} );
 	}

+ 23 - 10
packages/ckeditor5-media-embed/src/utils.js

@@ -10,6 +10,8 @@
 import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
 import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
 
+import mediaPlaceholderIcon from '../theme/icons/media-placeholder.svg';
+
 const mediaSymbol = Symbol( 'isMedia' );
 
 /**
@@ -56,8 +58,7 @@ export function addMediaWrapperElementToFigure( writer, figure, options ) {
 		renderFunction = function( domDocument ) {
 			const domElement = this.toDomElement( domDocument );
 
-			domElement.innerHTML =
-				`<div class="ck-media__wrapper__aspect">${ options.wrapperContent || '' }</div>`;
+			domElement.innerHTML = options.wrapperContent || '';
 
 			return domElement;
 		};
@@ -79,20 +80,20 @@ export function getSelectedMediaElement( selection ) {
 }
 
 export function getMediaContent( editor, url ) {
-	const data = getContentMatchAndCreator( editor, url );
+	const data = getContentMatchAndRenderer( editor, url );
 
 	if ( data ) {
-		return data.contentCreator( data.match.pop() );
+		return data.contentViewRenderer( data.contentUrlMatch.pop() );
 	} else {
 		return '<p>No embeddable media found for given URL.</p>';
 	}
 }
 
 export function hasMediaContent( editor, url ) {
-	return !!getContentMatchAndCreator( editor, url );
+	return !!getContentMatchAndRenderer( editor, url );
 }
 
-function getContentMatchAndCreator( editor, url ) {
+function getContentMatchAndRenderer( editor, url ) {
 	if ( !url ) {
 		return null;
 	}
@@ -102,17 +103,19 @@ function getContentMatchAndCreator( editor, url ) {
 	url = url.trim();
 
 	for ( const name in contentDefinitions ) {
-		let { url: pattern, html: contentCreator } = contentDefinitions[ name ];
+		let { url: pattern, html: contentViewRenderer } = contentDefinitions[ name ];
 
 		if ( !Array.isArray( pattern ) ) {
 			pattern = [ pattern ];
 		}
 
 		for ( const subPattern of pattern ) {
-			const match = url.match( subPattern );
+			const contentUrlMatch = url.match( subPattern );
+
+			if ( contentUrlMatch ) {
+				contentViewRenderer = contentViewRenderer || getDefaultContentRenderer( editor, url );
 
-			if ( match ) {
-				return { match, contentCreator };
+				return { contentUrlMatch, contentViewRenderer };
 			}
 		}
 	}
@@ -120,6 +123,16 @@ function getContentMatchAndCreator( editor, url ) {
 	return null;
 }
 
+function getDefaultContentRenderer( editor, url ) {
+	return () =>
+		'<div class="ck-media__placeholder">' +
+			`<div class="ck-media__placeholder__icon">${ mediaPlaceholderIcon }</div>` +
+			`<a class="ck-media__placeholder__url" target="new" href="${ url }" title="${ editor.t( 'Open media in new tab' ) }">` +
+				url +
+			'</a>' +
+		'</div>';
+}
+
 function getFillerOffset() {
 	return null;
 }

+ 42 - 0
packages/ckeditor5-media-embed/tests/manual/semanticmediaembed.html

@@ -0,0 +1,42 @@
+<style>
+	input {
+		width: 500px;
+	}
+</style>
+
+<h2>Example URLs</h2>
+<ul>
+	<li><input type="text" value="https://www.youtube.com/watch?v=H08tGjXNHO4"></li>
+	<li><input type="text" value="https://open.spotify.com/album/2IXlgvecaDqOeF3viUZnPI?si=ogVw7KlcQAGZKK4Jz9QzvA"></li>
+</ul>
+
+<h2>Test editor</h2>
+<div id="editor">
+	<figure class="media">
+		<div data-oembed-url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></div>
+	</figure>
+
+	<figure class="media">
+		<div data-oembed-url="https://twitter.com/ckeditor/status/1021777799844126720"></div>
+	</figure>
+
+	<figure class="media">
+		<div data-oembed-url="https://vimeo.com/1084537"></div>
+	</figure>
+
+	<figure class="media">
+		<div data-oembed-url="https://www.google.com/maps/place/Poland/@51.9537505,19.1343786,6z/data=!3m1!4b1!4m5!3m4!1s0x47009964a4640bbb:0x97573ca49cc55ea!8m2!3d51.919438!4d19.145136?hl=en"></div>
+	</figure>
+
+	<figure class="media">
+		<div data-oembed-url="https://open.spotify.com/artist/7GaxyUddsPok8BuhxN6OUW?si=LM7Q50vqQ4-NYnAIcMTNuQ"></div>
+	</figure>
+
+	<figure class="media">
+		<div data-oembed-url="https://www.flickr.com/photos/nasahqphoto/28396473968/"></div>
+	</figure>
+
+	<figure class="media">
+		<div data-oembed-url="https://ckeditor.com"></div>
+	</figure>
+</div>

+ 27 - 0
packages/ckeditor5-media-embed/tests/manual/semanticmediaembed.js

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import MediaEmbed from '../../src/mediaembed';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ ArticlePluginSet, MediaEmbed ],
+		toolbar: [
+			'heading', '|', 'insertMedia', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'link', 'undo', 'redo'
+		],
+		mediaEmbed: {
+			semanticDataOutput: true
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

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

@@ -0,0 +1 @@
+## TODO

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

@@ -0,0 +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>

+ 20 - 0
packages/ckeditor5-media-embed/theme/icons/media/twitter.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1DA1F2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g id="Dark_Blue">
+	<circle class="st0" cx="200" cy="200" r="200"/>
+</g>
+<g id="Logo__x2014__FIXED">
+	<path class="st1" d="M163.4,305.5c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25
+		c-8.6,3.8-17.9,6.4-27.7,7.6c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2
+		c-26.6,0-48.2,21.6-48.2,48.2c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2
+		c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7
+		c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7
+		C110.8,297.5,136.2,305.5,163.4,305.5"/>
+</g>
+</svg>

Разлика између датотеке није приказан због своје велике величине
+ 107 - 0
packages/ckeditor5-media-embed/theme/mediaembed.css


+ 0 - 38
packages/ckeditor5-media-embed/theme/mediaembedediting.css

@@ -1,38 +0,0 @@
-/*
- * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-.ck-widget.media {
-	& .ck-media__wrapper {
-		max-width: 640px;
-		max-height: 360px;
-		margin: 0 auto;
-
-		& .ck-media__wrapper__aspect {
-			position: relative;
-			padding-bottom: 56.2493%;
-			height: 0;
-
-			& * {
-				pointer-events: none;
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				top: 0;
-				left: 0;
-			}
-		}
-
-		/* Spotify embeds have width="300" height="380" */
-		&[data-oembed-url*="open.spotify.com"] {
-			max-width: 300px;
-			max-height: 380px;
-
-			& .ck-media__wrapper__aspect {
-				padding-bottom: 126%;
-			}
-		}
-	}
-}
-

Неке датотеке нису приказане због велике количине промена