Other: Increased the specificity of CSS rules. Introduced the .ck cla…

…ss for editor UI components (see: ckeditor/ckeditor5#494).
ckeditor · Mar 23, 2018 · abc7def · abc7def
1 parent d8f095c
commit abc7def
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/src/utils.js b/src/utils.js
@@ -53,7 +53,7 @@ export function isWidget( element ) {
  */
 export function toWidget( element, writer, options = {} ) {
 	writer.setAttribute( 'contenteditable', 'false', element );
-	writer.addClass( WIDGET_CLASS_NAME, element );
+	writer.addClass( [ 'ck', WIDGET_CLASS_NAME ], element );
 	writer.setCustomProperty( widgetSymbol, true, element );
 	element.getFillerOffset = getFillerOffset;
 
@@ -142,7 +142,7 @@ export function getLabel( element ) {
  * @returns {module:engine/view/editableelement~EditableElement} Returns same element that was provided in `editable` param.
  */
 export function toWidgetEditable( editable, writer ) {
-	writer.addClass( 'ck-editable', editable );
+	writer.addClass( [ 'ck', 'ck-editable' ], editable );
 
 	// Set initial contenteditable value.
 	writer.setAttribute( 'contenteditable', editable.isReadOnly ? 'false' : 'true', editable );

diff --git a/tests/utils.js b/tests/utils.js
@@ -139,6 +139,7 @@ describe( 'widget utils', () => {
 		} );
 
 		it( 'should add proper class', () => {
+			expect( element.hasClass( 'ck' ) ).to.be.true;
 			expect( element.hasClass( 'ck-editable' ) ).to.be.true;
 		} );
 

diff --git a/tests/widget.js b/tests/widget.js
@@ -184,7 +184,7 @@ describe( 'Widget', () => {
 		setModelData( model, '[<widget>foo bar</widget>]' );
 
 		expect( getViewData( view ) ).to.equal(
-			'[<div class="ck-widget ck-widget_selected" contenteditable="false">foo bar<b></b></div>]'
+			'[<div class="ck ck-widget ck-widget_selected" contenteditable="false">foo bar<b></b></div>]'
 		);
 		expect( viewDocument.selection.isFake ).to.be.true;
 	} );
@@ -202,8 +202,8 @@ describe( 'Widget', () => {
 		expect( getViewData( view ) ).to.equal(
 			'[' +
 			'<p>foo</p>' +
-			'<div class="ck-widget ck-widget_selected" contenteditable="false"><b></b></div>' +
-			'<div class="ck-widget ck-widget_selected" contenteditable="false"><b></b></div>' +
+			'<div class="ck ck-widget ck-widget_selected" contenteditable="false"><b></b></div>' +
+			'<div class="ck ck-widget ck-widget_selected" contenteditable="false"><b></b></div>' +
 			']'
 		);
 	} );
@@ -218,23 +218,23 @@ describe( 'Widget', () => {
 		setModelData( model, '<paragraph>foo</paragraph>[<widget>foo</widget>]' );
 
 		expect( getViewData( view ) ).to.equal(
-			'<p>foo</p>[<div class="ck-widget ck-widget_selected" contenteditable="false">foo<b></b></div>]'
+			'<p>foo</p>[<div class="ck ck-widget ck-widget_selected" contenteditable="false">foo<b></b></div>]'
 		);
 
 		model.change( writer => {
 			writer.setSelection( null );
 		} );
 
 		expect( getViewData( view ) ).to.equal(
-			'<p>{}foo</p><div class="ck-widget" contenteditable="false">foo<b></b></div>'
+			'<p>{}foo</p><div class="ck ck-widget" contenteditable="false">foo<b></b></div>'
 		);
 	} );
 
 	it( 'should do nothing when selection is placed in other editable', () => {
 		setModelData( model, '<widget><editable>foo bar</editable></widget><editable>[baz]</editable>' );
 
 		expect( getViewData( view ) ).to.equal(
-			'<div class="ck-widget" contenteditable="false">' +
+			'<div class="ck ck-widget" contenteditable="false">' +
 				'<figcaption contenteditable="true">foo bar</figcaption>' +
 				'<b></b>' +
 			'</div>' +
@@ -676,7 +676,7 @@ describe( 'Widget', () => {
 				'<paragraph>foo</paragraph>[<widget></widget>]<paragraph>bar</paragraph>',
 				{ keyCode: keyCodes.a, ctrlKey: true },
 				'[<paragraph>foo</paragraph><widget></widget><paragraph>bar</paragraph>]',
-				'[<p>foo</p><div class="ck-widget ck-widget_selected" contenteditable="false"><b></b></div><p>bar</p>]'
+				'[<p>foo</p><div class="ck ck-widget ck-widget_selected" contenteditable="false"><b></b></div><p>bar</p>]'
 
 			);
 		} );