Merge pull request #36 from ckeditor/t/ckeditor5/578

Fix: Replaced nested editable's `.ck-editable` class with `.ck-editor__editable` + `.ck-editor__nested-editable` to stop Grammarly throwing errors. Closes ckeditor/ckeditor5#578.

BREAKING CHANGE: The `.ck-editable` class is no longer available. Use the `.ck-editor__nested-editable` class instead.

Author: szymonkups

src/utils.js

@@ -109,7 +109,7 @@ export function setHighlightHandling( element, writer, add, remove ) {
  *
  * @param {module:engine/view/element~Element} element
  * @param {String|Function} labelOrCreator
- *  * @param {module:engine/view/writer~Writer} writer
+ * @param {module:engine/view/writer~Writer} writer
  */
 export function setLabel( element, labelOrCreator, writer ) {
 	writer.setCustomProperty( labelSymbol, labelOrCreator, element );
@@ -133,16 +133,17 @@ export function getLabel( element ) {
 
 /**
  * Adds functionality to provided {module:engine/view/editableelement~EditableElement} to act as a widget's editable:
- * * adds `ck-editable` CSS class,
+ * * adds `ck-editor__editable` and `ck-editor__nested-editable` CSS classes,
  * * sets `contenteditable` as `true` when {module:engine/view/editableelement~EditableElement#isReadOnly} is `false`
  * otherwise set `false`,
- * * adds `ck-editable_focused` CSS class when editable is focused and removes it when it's blurred.
+ * * adds `ck-editor__nested-editable_focused` CSS class when editable is focused and removes it when it's blurred.
  *
  * @param {module:engine/view/editableelement~EditableElement} editable
+ * @param {module:engine/view/writer~Writer} writer
  * @returns {module:engine/view/editableelement~EditableElement} Returns same element that was provided in `editable` param.
  */
 export function toWidgetEditable( editable, writer ) {
-	writer.addClass( [ 'ck', 'ck-editable' ], editable );
+	writer.addClass( [ 'ck', 'ck-editor__editable', 'ck-editor__nested-editable' ], editable );
 
 	// Set initial contenteditable value.
 	writer.setAttribute( 'contenteditable', editable.isReadOnly ? 'false' : 'true', editable );
@@ -154,9 +155,9 @@ export function toWidgetEditable( editable, writer ) {
 
 	editable.on( 'change:isFocused', ( evt, property, is ) => {
 		if ( is ) {
-			writer.addClass( 'ck-editable_focused', editable );
+			writer.addClass( 'ck-editor__nested-editable_focused', editable );
 		} else {
-			writer.removeClass( 'ck-editable_focused', editable );
+			writer.removeClass( 'ck-editor__nested-editable_focused', editable );
 		}
 	} );
 

tests/utils.js

@@ -139,8 +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;
+			expect( element.hasClass( 'ck', 'ck-editor__editable', 'ck-editor__nested-editable' ) ).to.be.true;
 		} );
 
 		it( 'should add proper contenteditable value when element is read-only - initialization', () => {
@@ -162,10 +161,10 @@ describe( 'widget utils', () => {
 
 		it( 'should add proper class when element is focused', () => {
 			element.isFocused = true;
-			expect( element.hasClass( 'ck-editable_focused' ) ).to.be.true;
+			expect( element.hasClass( 'ck-editor__nested-editable_focused' ) ).to.be.true;
 
 			element.isFocused = false;
-			expect( element.hasClass( 'ck-editable_focused' ) ).to.be.false;
+			expect( element.hasClass( 'ck-editor__nested-editable_focused' ) ).to.be.false;
 		} );
 	} );