Explorar el Código

Added test checking if inline filler is not rendered inside non editable content.

Szymon Kupś hace 8 años
padre
commit
bb1353af3c

+ 3 - 2
packages/ckeditor5-engine/src/view/renderer.js

@@ -382,6 +382,7 @@ export default class Renderer {
 		}
 
 		// Block adding inline filler inside elements with contenteditable=false.
+		// https://github.com/ckeditor/ckeditor5-engine/issues/1170
 		if ( _isNotEditable( selectionParent ) ) {
 			return false;
 		}
@@ -720,11 +721,11 @@ mix( Renderer, ObservableMixin );
 // @param {module:engine/view/element~Element} element
 // @returns {Boolean}
 function _isNotEditable( element ) {
-	if ( element.getAttribute( 'contenteditable' ) === false ) {
+	if ( element.getAttribute( 'contenteditable' ) == 'false' ) {
 		return true;
 	}
 
 	const parent = element.findAncestor( element => element.hasAttribute( 'contenteditable' ) );
 
-	return parent && !parent.getAttribute( 'contenteditable' );
+	return parent && parent.getAttribute( 'contenteditable' ) == 'false';
 }

+ 44 - 0
packages/ckeditor5-engine/tests/view/renderer.js

@@ -410,6 +410,50 @@ describe( 'Renderer', () => {
 			expect( viewRoot ).to.be.ok;
 		} );
 
+		it( 'should not add filler when inside contenteditable=false parent', () => {
+			const { view: viewP, selection: newSelection } = parse(
+				'<container:p>foo<attribute:b contenteditable="false">[]</attribute:b>bar</container:p>' );
+
+			viewRoot.appendChildren( viewP );
+			selection.setTo( newSelection );
+
+			renderer.markToSync( 'children', viewRoot );
+			renderer.render();
+
+			expect( domRoot.childNodes.length ).to.equal( 1 );
+			expect( domRoot.childNodes[ 0 ].tagName.toLowerCase() ).to.equal( 'p' );
+
+			const domP = domRoot.childNodes[ 0 ];
+
+			expect( domP.childNodes.length ).to.equal( 3 );
+			expect( domP.childNodes[ 0 ].data ).to.equal( 'foo' );
+			expect( domP.childNodes[ 2 ].data ).to.equal( 'bar' );
+			expect( domP.childNodes[ 1 ].tagName.toLowerCase() ).to.equal( 'b' );
+			expect( domP.childNodes[ 1 ].childNodes.length ).to.equal( 0 );
+		} );
+
+		it( 'should not add filler when inside contenteditable=false ancestor', () => {
+			const { view: viewP, selection: newSelection } = parse(
+				'<container:p contenteditable="false">foo<attribute:b>[]</attribute:b>bar</container:p>' );
+
+			viewRoot.appendChildren( viewP );
+			selection.setTo( newSelection );
+
+			renderer.markToSync( 'children', viewRoot );
+			renderer.render();
+
+			expect( domRoot.childNodes.length ).to.equal( 1 );
+			expect( domRoot.childNodes[ 0 ].tagName.toLowerCase() ).to.equal( 'p' );
+
+			const domP = domRoot.childNodes[ 0 ];
+
+			expect( domP.childNodes.length ).to.equal( 3 );
+			expect( domP.childNodes[ 0 ].data ).to.equal( 'foo' );
+			expect( domP.childNodes[ 2 ].data ).to.equal( 'bar' );
+			expect( domP.childNodes[ 1 ].tagName.toLowerCase() ).to.equal( 'b' );
+			expect( domP.childNodes[ 1 ].childNodes.length ).to.equal( 0 );
+		} );
+
 		it( 'should add and remove inline filler in case <p>foo<b>[]</b>bar</p>', () => {
 			const domSelection = document.getSelection();