Browse Source

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.
Aleksander Nowodzinski 6 years ago
parent
commit
3bd2968ca3

+ 2 - 1
packages/ckeditor5-media-embed/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: [

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

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