Merge pull request #1246 from julien/LPS-84166

fix: Fix issues with video resizing and alignment
liferay · Apr 24, 2019 · 6919e66 · 6919e66
2 parents 4e0d5fd + 36ebb5a
commit 6919e66
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 18 deletions.
diff --git a/src/adapter/core.js b/src/adapter/core.js
@@ -439,29 +439,32 @@ extend(
 					{
 						id: 'facebook',
 						tpl: `<iframe allowFullScreen="true" allowTransparency="true"
-                         frameborder="0" height="${EMBED_VIDEO_HEIGHT}"
-                         src="https://www.facebook.com/plugins/video.php?href={embedId}'
-                         &show_text=0&width=${EMBED_VIDEO_WIDTH}&height=${EMBED_VIDEO_HEIGHT}" scrolling="no"
-                         style="border:none;overflow:hidden" width="${EMBED_VIDEO_WIDTH}}"></iframe>`,
+												 frameborder="0" height="${EMBED_VIDEO_HEIGHT}"
+												 src="https://www.facebook.com/plugins/video.php?href={embedId}'
+												 &show_text=0&width=${EMBED_VIDEO_WIDTH}&height=${EMBED_VIDEO_HEIGHT}" scrolling="no"
+												 style="border:none;overflow:hidden" width="${EMBED_VIDEO_WIDTH}}"></iframe>`,
+						type: 'video',
 						urlSchemes: [
 							'(https?:\\/\\/(?:www\\.)?facebook.com\\/\\S*\\/videos\\/\\S*)',
 						],
 					},
 					{
 						id: 'twitch',
 						tpl: `<iframe allowfullscreen="true" frameborder="0"
-                         height="${EMBED_VIDEO_HEIGHT}"
-                         src="https://player.twitch.tv/?autoplay=false&video={embedId}"
-                         scrolling="no" width="${EMBED_VIDEO_WIDTH}"></iframe>`,
+												 height="${EMBED_VIDEO_HEIGHT}"
+												 src="https://player.twitch.tv/?autoplay=false&video={embedId}"
+												 scrolling="no" width="${EMBED_VIDEO_WIDTH}"></iframe>`,
+						type: 'video',
 						urlSchemes: [
 							'https?:\\/\\/(?:www\\.)?twitch.tv\\/videos\\/(\\S*)$',
 						],
 					},
 					{
 						id: 'vimeo',
 						tpl: `<iframe allowfullscreen frameborder="0" height="${EMBED_VIDEO_HEIGHT}"
-                         mozallowfullscreen src="https://player.vimeo.com/video/{embedId}"
-                         webkitallowfullscreen width="${EMBED_VIDEO_WIDTH}"></iframe>`,
+												 mozallowfullscreen src="https://player.vimeo.com/video/{embedId}"
+												 webkitallowfullscreen width="${EMBED_VIDEO_WIDTH}"></iframe>`,
+						type: 'video',
 						urlSchemes: [
 							'https?:\\/\\/(?:www\\.)?vimeo\\.com\\/album\\/.*\\/video\\/(\\S*)',
 							'https?:\\/\\/(?:www\\.)?vimeo\\.com\\/channels\\/.*\\/(\\S*)',
@@ -472,9 +475,10 @@ extend(
 					{
 						id: 'youtube',
 						tpl: `<iframe allow="autoplay; encrypted-media" allowfullscreen
-                         height="${EMBED_VIDEO_HEIGHT}" frameborder="0"
-                         src="https://www.youtube.com/embed/{embedId}?rel=0"
-                         width="${EMBED_VIDEO_WIDTH}"></iframe>`,
+												 height="${EMBED_VIDEO_HEIGHT}" frameborder="0"
+												 src="https://www.youtube.com/embed/{embedId}?rel=0"
+												 width="${EMBED_VIDEO_WIDTH}"></iframe>`,
+						type: 'video',
 						urlSchemes: [
 							'https?:\\/\\/(?:www\\.)?youtube.com\\/watch\\?v=(\\S*)$',
 						],

diff --git a/src/components/buttons/button-embed-video-edit.jsx b/src/components/buttons/button-embed-video-edit.jsx
@@ -55,7 +55,14 @@ class ButtonEmbedVideoEdit extends React.Component {
 	 * @method componentWillReceiveProps
 	 */
 	componentWillReceiveProps() {
-		this.replaceState(this.getInitialState());
+		const newState = this.getInitialState();
+
+		this.setState({
+			all: undefined,
+			keys: undefined,
+			new: newState,
+			old: undefined,
+		});
 	}
 
 	/**

diff --git a/src/plugins/autolink.js b/src/plugins/autolink.js
@@ -123,6 +123,10 @@ if (!CKEDITOR.plugins.get('ae_autolink')) {
 		_getLastWord(editor) {
 			const range = editor.getSelection().getRanges()[0];
 
+			if (!range) {
+				return;
+			}
+
 			const offset = range.startOffset;
 
 			let previousText = '';

diff --git a/src/plugins/embedurl.js b/src/plugins/embedurl.js
@@ -310,6 +310,8 @@ if (!CKEDITOR.plugins.get('embedurl')) {
 
 					data.url = iframe.attributes.src;
 
+					delete element.attributes.style;
+
 					const embedContent = generateEmbedContent(
 						data.url,
 						element.getOuterHtml()
@@ -321,9 +323,8 @@ if (!CKEDITOR.plugins.get('embedurl')) {
 
 					upcastWidget = widgetFragment.children[0];
 
-					upcastWidget.attributes['data-styles'] = JSON.stringify(
-						element.styles
-					);
+					upcastWidget.attributes['data-styles'] =
+						element.attributes['data-styles'];
 					upcastWidget.removeClass('embed-responsive');
 					upcastWidget.removeClass('embed-responsive-16by9');
 
@@ -437,10 +438,16 @@ if (!CKEDITOR.plugins.get('embedurl')) {
 
 					embedContent.attributes.class =
 						'embed-responsive embed-responsive-16by9';
-					embedContent.attributes.style = CKEDITOR.tools.writeCssText(
-						widget.parent.styles
+
+					embedContent.attributes['data-styles'] = JSON.stringify(
+						CKEDITOR.tools.parseCssText(
+							widget.parent.attributes.style
+						)
 					);
 
+					embedContent.attributes.style =
+						widget.parent.attributes.style;
+
 					return embedContent;
 				},