8
0
فهرست منبع

Updated docs and tests in engine.dataProcessor.HtmlDataProcessor.

Szymon Kupś 9 سال پیش
والد
کامیت
9104e91a26

+ 4 - 4
packages/ckeditor5-engine/src/datacontroller.js

@@ -119,7 +119,7 @@ export default class DataController {
 		const modelRoot = this.model.getRoot( rootName );
 		const modelRange = ModelRange.createFromElement( modelRoot );
 
-		// model -> view.
+		// model -> view
 		const viewDocumentFragment = new ViewDocumentFragment();
 		this._mapper.bindElements( modelRoot, viewDocumentFragment );
 
@@ -127,7 +127,7 @@ export default class DataController {
 
 		this._mapper.clearBindings();
 
-		// view -> data.
+		// view -> data
 		return this.processor.toData( viewDocumentFragment );
 	}
 
@@ -162,10 +162,10 @@ export default class DataController {
 	 * @returns {engine.model.DocumentFragment} Parsed data.
 	 */
 	parse( data ) {
-		// data -> view.
+		// data -> view
 		const viewDocumentFragment = this.processor.toView( data );
 
-		// view -> model.
+		// view -> model
 		const modelDocumentFragment = this.viewToModel.convert( viewDocumentFragment, { context: [ '$root' ] } );
 
 		return modelDocumentFragment;

+ 6 - 6
packages/ckeditor5-engine/src/dataprocessor/dataprocessor.jsdoc

@@ -10,23 +10,23 @@
 /**
  * DataProcessor interface. It should be implemented by actual DataProcessors.
  * Each data processor implements a certain format of the data. E.g. `MarkdownDataProcessor` will convert the data
- * (Markdown string) to a DocumentFragment and back.
+ * (Markdown string) to a {@link engine.view.DocumentFragment DocumentFragment} and back.
  *
  * @interface engine.dataProcessor.DataProcessor
  */
 
 /**
- * Converts a DocumentFragment to data.
+ * Converts a {@link engine.view.DocumentFragment DocumentFragment} to data.
  *
  * @method engine.dataProcessor.DataProcessor#toData
- * @param {DocumentFragment} fragment DocumentFragment to be processed.
+ * @param {engine.view.DocumentFragment} fragment DocumentFragment to be processed.
  * @returns {*}
  */
 
 /**
- * Converts data to a DocumentFragment.
+ * Converts data to a {@link engine.view.DocumentFragment DocumentFragment}.
  *
- * @method engine.dataProcessor.DataProcessor#toDom
+ * @method engine.dataProcessor.DataProcessor#toView
  * @param {*} data Data to be processed.
- * @returns {DocumentFragment}
+ * @returns {engine.view.DocumentFragment DocumentFragment}
  */

+ 18 - 5
packages/ckeditor5-engine/src/dataprocessor/htmldataprocessor.js

@@ -27,6 +27,12 @@ export default class HtmlDataProcessor {
 		 */
 		this._domParser = new DOMParser();
 
+		/**
+		 * DOM converter used to convert DOM elements to view elements.
+		 *
+		 * @private
+		 * @member {engine.view.DomConverter} engine.dataProcessor.HtmlDataProcessor#_domConverter.
+		 */
 		this._domConverter = new DomConverter( { blockFiller: NBSP_FILLER } );
 
 		/**
@@ -39,10 +45,10 @@ export default class HtmlDataProcessor {
 	}
 
 	/**
-	 * Converts provided view document fragment to data format - in this case HTML string.
+	 * Converts provided {@link engine.view.DocumentFragment DocumentFragment} to data format - in this case HTML string.
 	 *
-	 * @param {engine.view.DocumentFragment} fragment
-	 * @returns {String}
+	 * @param {engine.view.DocumentFragment} viewFragment
+	 * @returns {String} HTML string.
 	 */
 	toData( viewFragment ) {
 		// Convert view DocumentFragment to DOM DocumentFragment.
@@ -52,9 +58,15 @@ export default class HtmlDataProcessor {
 		return this._htmlWriter.getHtml( domFragment );
 	}
 
+	/**
+	 * Converts provided HTML string to view tree.
+	 *
+	 * @param {String} data HTML string.
+	 * @returns {engine.view.Node|engine.view.DocumentFragment|null} Converted view element.
+	 */
 	toView( data ) {
 		// Convert input HTML data to DOM DocumentFragment.
-		const domFragment = this.toDom( data );
+		const domFragment = this._toDom( data );
 
 		// Convert DOM DocumentFragment to view DocumentFragment.
 		return this._domConverter.domToView( domFragment );
@@ -64,10 +76,11 @@ export default class HtmlDataProcessor {
 	 * Converts HTML String to its DOM representation. Returns DocumentFragment, containing nodes parsed from
 	 * provided data.
 	 *
+	 * @private
 	 * @param {String} data
 	 * @returns {DocumentFragment}
 	 */
-	toDom( data ) {
+	_toDom( data ) {
 		const document = this._domParser.parseFromString( data, 'text/html' );
 		const fragment = document.createDocumentFragment();
 		const nodes = document.body.childNodes;

+ 4 - 3
packages/ckeditor5-engine/tests/_utils/view.js

@@ -281,7 +281,7 @@ export function parse( data, options = {} ) {
 		view = root;
 	}
 
-	// Parse ranges included in the view text nodes.
+	// Parse ranges included in view text nodes.
 	const ranges = rangeParser.parse( view, options.order );
 
 	// If only one element is returned inside DocumentFragment - return that element.
@@ -760,7 +760,7 @@ class ViewStringify {
 }
 
 // Converts {@link engine.view.Element Elements} to {@link engine.view.AttributeElement AttributeElements} and
-// {@link engine.view.ContainerElement ContainerElements}. It converts all tree starting from the `rootNode`.
+// {@link engine.view.ContainerElement ContainerElements}. It converts whole tree starting from the `rootNode`.
 // Conversion is based on element names. See `_convertElement` method for more details.
 //
 // @param {engine.view.Element|engine.view.DocumentFragment|engine.view.Text} rootNode Root node to convert.
@@ -790,7 +790,8 @@ function _convertViewElements( rootNode ) {
 // {@link engine.view.AttributeElement AttributeElement} with priority 11.
 // If element's name is in format `container:p` - it will be converted to
 // {@link engine.view.ContainerElement ContainerElement}.
-// If element's name will not contain any information - {@link engine.view.Element view Element} will be returned.
+// If element's name will not contain any additional information - {@link engine.view.Element view Element}will be
+// returned.
 //
 // @param {engine.view.Element} viewElement View element to convert.
 // @returns {engine.view.Element|engine.view.AttributeElement|engine.view.ContainerElement} Tree view

+ 40 - 27
packages/ckeditor5-engine/tests/dataprocessor/htmldataprocessor.js

@@ -7,49 +7,41 @@
 
 import HtmlDataProcessor from '/ckeditor5/engine/dataprocessor/htmldataprocessor.js';
 import xssTemplates from '/tests/engine/dataprocessor/_utils/xsstemplates.js';
+import ViewDocumentFragment from '/ckeditor5/engine/view/documentfragment.js';
+import { stringify, parse } from '/tests/engine/_utils/view.js';
 
 describe( 'HtmlDataProcessor', () => {
 	const dataProcessor = new HtmlDataProcessor();
 
-	describe( 'toDom', () => {
+	describe( 'toView', () => {
 		it( 'should return empty DocumentFragment when empty string is passed', () => {
-			const fragment = dataProcessor.toDom( '' );
-			expect( fragment ).to.be.an.instanceOf( DocumentFragment );
-			expect( fragment.childNodes.length ).to.equal( 0 );
+			const fragment = dataProcessor.toView( '' );
+			expect( fragment ).to.be.an.instanceOf( ViewDocumentFragment );
+			expect( fragment.getChildCount() ).to.equal( 0 );
 		} );
 
 		it( 'should convert HTML to DocumentFragment with single text node', () => {
-			const fragment = dataProcessor.toDom( 'foo bar' );
-			expect( fragment.childNodes.length ).to.equal( 1 );
-			expect( fragment.childNodes[ 0 ].nodeType ).to.equal( Node.TEXT_NODE );
-			expect( fragment.childNodes[ 0 ].textContent ).to.equal( 'foo bar' );
+			const fragment = dataProcessor.toView( 'foo bar' );
+
+			expect( stringify( fragment ) ).to.equal( 'foo bar' );
 		} );
 
 		it( 'should convert HTML to DocumentFragment with multiple child nodes', () => {
-			const fragment = dataProcessor.toDom( '<p>foo</p><p>bar</p>' );
-			expect( fragment.childNodes.length ).to.equal( 2 );
-			expect( fragment.childNodes[ 0 ].nodeType ).to.equal( Node.ELEMENT_NODE );
-			expect( fragment.childNodes[ 0 ].textContent ).to.equal( 'foo' );
-			expect( fragment.childNodes[ 1 ].nodeType ).to.equal( Node.ELEMENT_NODE );
-			expect( fragment.childNodes[ 1 ].textContent ).to.equal( 'bar' );
+			const fragment = dataProcessor.toView( '<p>foo</p><p>bar</p>' );
+
+			expect( stringify( fragment ) ).to.equal( '<p>foo</p><p>bar</p>' );
 		} );
 
 		it( 'should return only elements inside body tag', () => {
-			const fragment = dataProcessor.toDom( '<html><head></head><body><p>foo</p></body></html>' );
-			expect( fragment.childNodes.length ).to.equal( 1 );
-			expect( fragment.childNodes[ 0 ].textContent ).to.equal( 'foo' );
-			expect( fragment.childNodes[ 0 ].tagName.toLowerCase() ).to.equal( 'p' );
+			const fragment = dataProcessor.toView( '<html><head></head><body><p>foo</p></body></html>' );
+
+			expect( stringify( fragment ) ).to.equal( '<p>foo</p>' );
 		} );
 
 		it( 'should not add any additional nodes', () => {
-			const fragment = dataProcessor.toDom( 'foo <b>bar</b> text' );
-			expect( fragment.childNodes.length ).to.equal( 3 );
-			expect( fragment.childNodes[ 0 ].nodeType ).to.equal( Node.TEXT_NODE );
-			expect( fragment.childNodes[ 0 ].textContent ).to.equal( 'foo ' );
-			expect( fragment.childNodes[ 1 ].nodeType ).to.equal( Node.ELEMENT_NODE );
-			expect( fragment.childNodes[ 1 ].innerHTML ).to.equal( 'bar' );
-			expect( fragment.childNodes[ 2 ].nodeType ).to.equal( Node.TEXT_NODE );
-			expect( fragment.childNodes[ 2 ].textContent ).to.equal( ' text' );
+			const fragment = dataProcessor.toView( 'foo <b>bar</b> text' );
+
+			expect( stringify( fragment ) ).to.equal( 'foo <b>bar</b> text' );
 		} );
 
 		// Test against XSS attacks.
@@ -58,7 +50,7 @@ describe( 'HtmlDataProcessor', () => {
 
 			it( 'should prevent XSS attacks: ' + name, ( done ) => {
 				window.testXss = sinon.spy();
-				dataProcessor.toDom( input );
+				dataProcessor.toView( input );
 
 				setTimeout( () => {
 					sinon.assert.notCalled( window.testXss );
@@ -67,4 +59,25 @@ describe( 'HtmlDataProcessor', () => {
 			} );
 		}
 	} );
+
+	describe( 'toData', () => {
+		it( 'should return empty string when empty DocumentFragment is passed', () => {
+			const fragment = new ViewDocumentFragment();
+
+			expect( dataProcessor.toData( fragment ) ).to.equal( '' );
+		} );
+
+		it( 'should return text if document fragment with single text node is passed', () => {
+			const fragment = new ViewDocumentFragment();
+			fragment.appendChildren( parse( 'foo bar' ) );
+
+			expect( dataProcessor.toData( fragment ) ).to.equal( 'foo bar' );
+		} );
+
+		it( 'should convert HTML to DocumentFragment with multiple child nodes', () => {
+			const fragment = parse( '<p>foo</p><p>bar</p>' );
+
+			expect( dataProcessor.toData( fragment ) ).to.equal( '<p>foo</p><p>bar</p>' );
+		} );
+	} );
 } );