From 2e8faf8fefd515b55712410d28a51de377d5cc56 Mon Sep 17 00:00:00 2001 From: Julien Castelain Date: Wed, 24 Apr 2019 12:51:45 +0200 Subject: [PATCH 1/2] fix: Fix issues with video resizing and alignment Please see https://issues.liferay.com/browse/LPS-84167 Test plan: Run `yarn build` from this branch and install in a local liferay-portal with `yarn add PATH_TO_WHERE_YOU_CLONED_ALLOY_EDITOR` in the `modules/apps/frontend-editor/frontend-editor-alloyeditor-web` OSGi module, then redeploy with `gradlew clean deploy` --- src/adapter/core.js | 28 +++++++++++-------- .../buttons/button-embed-video-edit.jsx | 9 +++++- src/plugins/autolink.js | 4 +++ src/plugins/embedurl.js | 17 +++++++---- 4 files changed, 40 insertions(+), 18 deletions(-) diff --git a/src/adapter/core.js b/src/adapter/core.js index 98c81233ee..4b05efd976 100644 --- a/src/adapter/core.js +++ b/src/adapter/core.js @@ -439,10 +439,11 @@ extend( { id: 'facebook', tpl: ``, + 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}}">`, + type: 'video', urlSchemes: [ '(https?:\\/\\/(?:www\\.)?facebook.com\\/\\S*\\/videos\\/\\S*)', ], @@ -450,9 +451,10 @@ extend( { id: 'twitch', tpl: ``, + height="${EMBED_VIDEO_HEIGHT}" + src="https://player.twitch.tv/?autoplay=false&video={embedId}" + scrolling="no" width="${EMBED_VIDEO_WIDTH}">`, + type: 'video', urlSchemes: [ 'https?:\\/\\/(?:www\\.)?twitch.tv\\/videos\\/(\\S*)$', ], @@ -460,8 +462,9 @@ extend( { id: 'vimeo', tpl: ``, + mozallowfullscreen src="https://player.vimeo.com/video/{embedId}" + webkitallowfullscreen width="${EMBED_VIDEO_WIDTH}">`, + type: 'video', urlSchemes: [ 'https?:\\/\\/(?:www\\.)?vimeo\\.com\\/album\\/.*\\/video\\/(\\S*)', 'https?:\\/\\/(?:www\\.)?vimeo\\.com\\/channels\\/.*\\/(\\S*)', @@ -472,9 +475,10 @@ extend( { id: 'youtube', tpl: ``, + height="${EMBED_VIDEO_HEIGHT}" frameborder="0" + src="https://www.youtube.com/embed/{embedId}?rel=0" + width="${EMBED_VIDEO_WIDTH}">`, + 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 index e869210dbb..34bd427d1c 100644 --- 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, + old: undefined, + keys: undefined, + new: newState, + }); } /** diff --git a/src/plugins/autolink.js b/src/plugins/autolink.js index cbf3d1edae..d198cf22be 100644 --- 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 index 881bc05bea..a4db56821e 100644 --- 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; }, From 36ebb5a9e26dd264e413ce67c37c9d29167f641f Mon Sep 17 00:00:00 2001 From: Julien Castelain Date: Wed, 24 Apr 2019 14:07:13 +0200 Subject: [PATCH 2/2] fix: Sort keys --- src/components/buttons/button-embed-video-edit.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/buttons/button-embed-video-edit.jsx b/src/components/buttons/button-embed-video-edit.jsx index 34bd427d1c..552f987705 100644 --- a/src/components/buttons/button-embed-video-edit.jsx +++ b/src/components/buttons/button-embed-video-edit.jsx @@ -59,9 +59,9 @@ class ButtonEmbedVideoEdit extends React.Component { this.setState({ all: undefined, - old: undefined, keys: undefined, new: newState, + old: undefined, }); }