Merge pull request #86 from ckeditor/t/18

Clicking a media preview link should not open a new browser tab unless the media is already selected. Closes #18.
ckeditor · Jun 12, 2019 · 12bd564 · 12bd564
2 parents c3babe6 + 4150eb8
commit 12bd564
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/src/mediaregistry.js b/src/mediaregistry.js
@@ -298,7 +298,8 @@ class Media {
 					tag: 'a',
 					attributes: {
 						class: 'ck-media__placeholder__url',
-						target: 'new',
+						target: '_blank',
+						rel: 'noopener noreferrer',
 						href: this.url
 					},
 					children: [

diff --git a/tests/mediaembedediting.js b/tests/mediaembedediting.js
@@ -927,7 +927,7 @@ describe( 'MediaEmbedEditing', () => {
 						'<div[^>]+>' +
 							'<div class="ck ck-media__placeholder ck-reset_all">' +
 								'<div class="ck-media__placeholder__icon">.*</div>' +
-								`<a class="ck-media__placeholder__url" href="${ expectedUrl }" target="new">` +
+								`<a class="ck-media__placeholder__url" href="${ expectedUrl }" rel="noopener noreferrer" target="_blank">` +
 									`<span class="ck-media__placeholder__url__text">${ expectedUrl }</span>` +
 									'<span class="ck ck-tooltip ck-tooltip_s">' +
 										'<span class="ck ck-tooltip__text">Open media in new tab</span>' +

diff --git a/theme/mediaembedediting.css b/theme/mediaembedediting.css
@@ -45,3 +45,9 @@
 .ck-editor__editable:not(.ck-read-only) .ck-media__wrapper > *:not(.ck-media__placeholder) {
 	pointer-events: none;
 }
+
+/* Disable all mouse interaction when the widget is not selected (e.g. to avoid opening links by accident).
+   https://github.com/ckeditor/ckeditor5-media-embed/issues/18 */
+.ck-editor__editable:not(.ck-read-only) .ck-widget:not(.ck-widget_selected) .ck-media__placeholder {
+	pointer-events: none;
+}