Other: Increased the specificity of CSS rules. Introduced the .ck class for editor UI components (see: ckeditor/ckeditor5#494).

Author: oleq

src/linkediting.js

@@ -80,7 +80,10 @@ export default class LinkEditing extends Plugin {
 		const doc = model.document;
 		const highlightDescriptor = {
 			id: 'linkBoundaries',
-			class: 'ck-link_selected',
+			class: [
+				'ck',
+				'ck-link_selected'
+			],
 			priority: 1
 		};
 

src/ui/linkactionsview.js

@@ -114,6 +114,7 @@ export default class LinkActionsView extends View {
 
 			attributes: {
 				class: [
+					'ck',
 					'ck-link-actions',
 				],
 
@@ -202,6 +203,7 @@ export default class LinkActionsView extends View {
 		button.extendTemplate( {
 			attributes: {
 				class: [
+					'ck',
 					'ck-link-actions__preview'
 				],
 				href: bind.to( 'href' ),

src/ui/linkformview.js

@@ -111,6 +111,7 @@ export default class LinkFormView extends View {
 
 			attributes: {
 				class: [
+					'ck',
 					'ck-link-form',
 				],
 

tests/linkediting.js

@@ -166,7 +166,7 @@ describe( 'LinkEditing', () => {
 			);
 
 			expect( getViewData( view ) ).to.equal(
-				'<p>foo <span class="ck-link_selected"><a href="url">b{}ar</a></span> baz</p>'
+				'<p>foo <span class="ck ck-link_selected"><a href="url">b{}ar</a></span> baz</p>'
 			);
 		} );
 
@@ -188,7 +188,7 @@ describe( 'LinkEditing', () => {
 			expect( marker.getEnd().path ).to.deep.equal( [ 0, 7 ] );
 
 			expect( getViewData( view ) ).to.equal(
-				'<p>foo <span class="ck-link_selected"><a href="url">{}bar</a></span> baz</p>'
+				'<p>foo <span class="ck ck-link_selected"><a href="url">{}bar</a></span> baz</p>'
 			);
 		} );
 
@@ -204,7 +204,7 @@ describe( 'LinkEditing', () => {
 			expect( marker.getEnd().path ).to.deep.equal( [ 0, 7 ] );
 
 			expect( getViewData( view ) ).to.equal(
-				'<p>foo <span class="ck-link_selected"><a href="url">bar{}</a></span> baz</p>'
+				'<p>foo <span class="ck ck-link_selected"><a href="url">bar{}</a></span> baz</p>'
 			);
 		} );
 
@@ -233,7 +233,7 @@ describe( 'LinkEditing', () => {
 			);
 
 			expect( getViewData( view ) ).to.equal(
-				'<p>foo <span class="ck-link_selected"><a href="url">li{}nk</a></span> baz</p>'
+				'<p>foo <span class="ck ck-link_selected"><a href="url">li{}nk</a></span> baz</p>'
 			);
 
 			expect( model.markers.has( 'linkBoundaries' ) ).to.be.true;
@@ -251,15 +251,15 @@ describe( 'LinkEditing', () => {
 			);
 
 			expect( getViewData( view ) ).to.equal(
-				'<p>foo <span class="ck-link_selected"><a href="url">li{}nk</a></span> baz</p>'
+				'<p>foo <span class="ck ck-link_selected"><a href="url">li{}nk</a></span> baz</p>'
 			);
 
 			expect( model.markers.has( 'linkBoundaries' ) ).to.be.true;
 			model.change( writer => writer.setSelection( model.document.getRoot().getChild( 0 ), 5 ) );
 
 			expect( model.markers.has( 'linkBoundaries' ) ).to.be.true;
 			expect( getViewData( view ) ).to.equal(
-				'<p>foo <span class="ck-link_selected"><a href="url">l{}ink</a></span> baz</p>'
+				'<p>foo <span class="ck ck-link_selected"><a href="url">l{}ink</a></span> baz</p>'
 			);
 		} );
 	} );

tests/linkui.js

@@ -250,7 +250,7 @@ describe( 'LinkUI', () => {
 				const spy = testUtils.sinon.stub( balloon, 'updatePosition' ).returns( {} );
 
 				expect( getViewData( view ) ).to.equal(
-					'<p><span class="ck-link_selected"><a href="url">f{}oo</a></span></p>'
+					'<p><span class="ck ck-link_selected"><a href="url">f{}oo</a></span></p>'
 				);
 
 				const root = viewDocument.getRoot();
@@ -319,7 +319,7 @@ describe( 'LinkUI', () => {
 				const spyUpdate = testUtils.sinon.stub( balloon, 'updatePosition' ).returns( {} );
 				const spyHide = testUtils.sinon.spy( linkUIFeature, '_hideUI' );
 
-				expect( getViewData( view ) ).to.equal( '<p><span class="ck-link_selected"><a href="url">f{}oo</a></span></p>' );
+				expect( getViewData( view ) ).to.equal( '<p><span class="ck ck-link_selected"><a href="url">f{}oo</a></span></p>' );
 
 				const root = viewDocument.getRoot();
 				const text = root.getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 );

tests/ui/linkactionsview.js

@@ -24,6 +24,7 @@ describe( 'LinkActionsView', () => {
 
 	describe( 'constructor()', () => {
 		it( 'should create element from template', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.true;
 			expect( view.element.classList.contains( 'ck-link-actions' ) ).to.true;
 			expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
 		} );

tests/ui/linkformview.js

@@ -26,6 +26,7 @@ describe( 'LinkFormView', () => {
 
 	describe( 'constructor()', () => {
 		it( 'should create element from template', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.true;
 			expect( view.element.classList.contains( 'ck-link-form' ) ).to.true;
 			expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
 		} );

theme/linkactions.css

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-link-actions {
+.ck.ck-link-actions {
 	& .ck-link-actions__preview {
 		display: inline-block;
 

theme/linkform.css

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-link-form {
+.ck.ck-link-form {
 	& .ck-labeled-input {
 		display: inline-block;
 	}