Sfoglia il codice sorgente

Refactor: Use singular class and styles in ViewElementDefinition.

Maciej Gołaszewski 8 anni fa
parent
commit
e1941a265e

+ 6 - 33
packages/ckeditor5-engine/src/conversion/definition-based-converters.js

@@ -31,7 +31,7 @@ import buildViewConverter from './buildviewconverter';
  *			view: {
  *				name: 'h1',
  *				class: [ 'header', 'article-header' ],
- *				attributes: {
+ *				attribute: {
  *					data-header: 'level-1',
  *				}
  *			},
@@ -67,7 +67,7 @@ export function modelElementToViewContainerElement( definition, dispatchers ) {
  *			model: 'heading1',
  *			view: {
  *				name: 'p',
- *				attributes: {
+ *				attribute: {
  *					'data-heading': 'true'
  *				},
  *				// You may need to use a high-priority listener to catch elements
@@ -82,7 +82,7 @@ export function modelElementToViewContainerElement( definition, dispatchers ) {
  *			model: 'heading1',
  *			view: 'h1',
  *			acceptAlso: [
- *				{ name: 'p', attributes: { 'data-heading': 'level1' }, priority: 'high' },
+ *				{ name: 'p', attribute: { 'data-heading': 'level1' }, priority: 'high' },
  *				{ name: 'h2', class: 'heading-main' },
  *				{ name: 'div', style: { 'font-weight': 'bold', font-size: '24px' } }
  *			]
@@ -130,7 +130,7 @@ export function viewToModelElement( definition, dispatchers ) {
  *			model: 'big',
  *			view: {
  *				name: 'span',
- *				styles: {
+ *				style: {
  *					'font-size': '1.2em'
  *				}
  *			},
@@ -188,7 +188,7 @@ export function modelAttributeToViewAttributeElement( attributeName, definition,
  *				class: 'text-big'
  *			},
  *			acceptAlso: [
- *				{ name: 'span', attributes: { 'data-size': 'big' } },
+ *				{ name: 'span', attribute: { 'data-size': 'big' } },
  *				{ name: 'span', class: [ 'font', 'font-huge' ] },
  *				{ name: 'span', style: { font-size: '18px' } }
  *			]
@@ -256,7 +256,7 @@ function prepareViewConverter( dispatchers, viewDefinitions ) {
 	const converter = buildViewConverter().for( ...dispatchers );
 
 	for ( const viewDefinition of viewDefinitions ) {
-		converter.from( definitionToPattern( viewDefinition ) );
+		converter.from( Object.assign( {}, viewDefinition ) );
 
 		if ( viewDefinition.priority ) {
 			converter.withPriority( viewDefinition.priority );
@@ -266,33 +266,6 @@ function prepareViewConverter( dispatchers, viewDefinitions ) {
 	return converter;
 }
 
-// Converts viewDefinition to a matcher pattern.
-//
-// @param {module:engine/view/viewelementdefinition~ViewElementDefinition} viewDefinition
-// @returns {module:engine/view/matcher~Pattern}
-function definitionToPattern( viewDefinition ) {
-	const name = viewDefinition.name;
-	const classes = viewDefinition.classes;
-	const styles = viewDefinition.styles;
-	const attributes = viewDefinition.attributes;
-
-	const pattern = { name };
-
-	if ( classes ) {
-		pattern.class = classes;
-	}
-
-	if ( styles ) {
-		pattern.style = styles;
-	}
-
-	if ( attributes ) {
-		pattern.attribute = attributes;
-	}
-
-	return pattern;
-}
-
 /**
  * Defines conversion details. It is used in configuration based converters:
  * - {@link module:engine/conversion/definition-based-converters~modelAttributeToViewAttributeElement}

+ 5 - 5
packages/ckeditor5-engine/src/view/element.js

@@ -619,7 +619,7 @@ export default class Element extends Node {
 	 * Provided patterns should be compatible with {@link module:engine/view/matcher~Matcher Matcher} as it is used internally.
 	 *
 	 * @see module:engine/view/matcher~Matcher
-	 * @param {Object|String|RegExp|Function} patterns Patterns used to match correct ancestor.
+	 * @param {module:engine/view/matcher~Pattern} patterns Patterns used to match correct ancestor.
 	 * See {@link module:engine/view/matcher~Matcher}.
 	 * @returns {module:engine/view/element~Element|null} Found element or `null` if no matching ancestor was found.
 	 */
@@ -720,13 +720,13 @@ export default class Element extends Node {
 	 * @returns {module:engine/view/element~Element}
 	 */
 	static createFromDefinition( viewElementDefinition ) {
-		const element = new this( viewElementDefinition.name, Object.assign( {}, viewElementDefinition.attributes ) );
+		const element = new this( viewElementDefinition.name, Object.assign( {}, viewElementDefinition.attribute ) );
 
-		if ( viewElementDefinition.styles ) {
-			element.setStyle( viewElementDefinition.styles );
+		if ( viewElementDefinition.style ) {
+			element.setStyle( viewElementDefinition.style );
 		}
 
-		const classes = viewElementDefinition.classes;
+		const classes = viewElementDefinition.class;
 
 		if ( classes ) {
 			element.addClass( ... typeof classes === 'string' ? [ classes ] : classes );

+ 4 - 4
packages/ckeditor5-engine/src/view/viewelementdefinition.jsdoc

@@ -15,7 +15,7 @@
  *
  *		const viewDefinition = {
  *			name: 'h1',
- *			classes: [ 'foo', 'bar' ]
+ *			class: [ 'foo', 'bar' ]
  *		};
  *
  * Above describes a view element:
@@ -35,10 +35,10 @@
  * @typedef {String|Object} module:engine/view/viewelementdefinition~ViewElementDefinition
  *
  * @property {String} name View element name.
- * @property {String|Array.<String>} [classes] Class name or array of class names to match. Each name can be
+ * @property {String|Array.<String>} [class] Class name or array of class names to match. Each name can be
  * provided in a form of string.
- * @property {Object} [styles] Object with key-value pairs representing styles to match. Each object key
+ * @property {Object} [style] Object with key-value pairs representing styles to match. Each object key
  * represents style name. Value under that key must be a string.
- * @property {Object} [attributes] Object with key-value pairs representing attributes to match. Each object key
+ * @property {Object} [attribute] Object with key-value pairs representing attributes to match. Each object key
  * represents attribute name. Value under that key must be a string.
  */

+ 28 - 28
packages/ckeditor5-engine/tests/conversion/definition-based-converters.js

@@ -95,7 +95,7 @@ function viewToString( item ) {
 	return result;
 }
 
-describe( 'Configuration defined converters', () => {
+describe( 'definition-based-converters', () => {
 	let model, dispatcher, modelDoc, modelRoot, viewRoot, controller, additionalData, schema;
 
 	beforeEach( () => {
@@ -151,28 +151,28 @@ describe( 'Configuration defined converters', () => {
 				testModelConversion( { model: 'bar', view: { name: 'strong' } }, '<div><strong>foo</strong></div>' );
 			} );
 
-			it( 'using passed view element object with styles object', () => {
+			it( 'using passed view element object with style object', () => {
 				testModelConversion( {
 					model: 'bar',
-					view: { name: 'span', styles: { 'font-weight': 'bold' } }
+					view: { name: 'span', style: { 'font-weight': 'bold' } }
 				}, '<div><span style="font-weight:bold;">foo</span></div>' );
 			} );
 
 			it( 'using passed view element object with class string', () => {
-				testModelConversion( { model: 'bar', view: { name: 'span', classes: 'foo' } }, '<div><span class="foo">foo</span></div>' );
+				testModelConversion( { model: 'bar', view: { name: 'span', class: 'foo' } }, '<div><span class="foo">foo</span></div>' );
 			} );
 
 			it( 'using passed view element object with class array', () => {
 				testModelConversion( {
 					model: 'bar',
-					view: { name: 'span', classes: [ 'foo', 'foo-bar' ] }
+					view: { name: 'span', class: [ 'foo', 'foo-bar' ] }
 				}, '<div><span class="foo foo-bar">foo</span></div>' );
 			} );
 
 			it( 'using passed view element object with attributes', () => {
 				testModelConversion( {
 					model: 'bar',
-					view: { name: 'span', attributes: { 'data-foo': 'bar' } }
+					view: { name: 'span', attribute: { 'data-foo': 'bar' } }
 				}, '<div><span data-foo="bar">foo</span></div>' );
 			} );
 
@@ -222,7 +222,7 @@ describe( 'Configuration defined converters', () => {
 			} );
 
 			it( 'should convert using class string', () => {
-				viewToModelAttribute( 'foo', { model: 'bar', view: { name: 'span', classes: 'foo' } }, [ dispatcher ] );
+				viewToModelAttribute( 'foo', { model: 'bar', view: { name: 'span', class: 'foo' } }, [ dispatcher ] );
 
 				const conversionResult = dispatcher.convert(
 					new ViewAttributeElement( 'span', { class: 'foo' }, new ViewText( 'foo' ) ), additionalData
@@ -231,10 +231,10 @@ describe( 'Configuration defined converters', () => {
 				expect( modelToString( conversionResult ) ).to.equal( '<$text foo="bar">foo</$text>' );
 			} );
 
-			it( 'should convert using classes array', () => {
+			it( 'should convert using class array', () => {
 				viewToModelAttribute( 'foo', {
 					model: 'bar',
-					view: { name: 'span', classes: [ 'foo', 'bar' ] }
+					view: { name: 'span', class: [ 'foo', 'bar' ] }
 				}, [ dispatcher ] );
 
 				const conversionResult = dispatcher.convert(
@@ -244,10 +244,10 @@ describe( 'Configuration defined converters', () => {
 				expect( modelToString( conversionResult ) ).to.equal( '<$text foo="bar">foo</$text>' );
 			} );
 
-			it( 'should convert using styles object', () => {
+			it( 'should convert using style object', () => {
 				viewToModelAttribute( 'foo', {
 					model: 'bar',
-					view: { name: 'span', styles: { 'font-weight': 'bold' } }
+					view: { name: 'span', style: { 'font-weight': 'bold' } }
 				}, [ dispatcher ] );
 
 				const conversionResult = dispatcher.convert(
@@ -260,7 +260,7 @@ describe( 'Configuration defined converters', () => {
 			it( 'should convert using attributes object', () => {
 				viewToModelAttribute( 'foo', {
 					model: 'bar',
-					view: { name: 'span', attributes: { 'data-foo': 'bar' } }
+					view: { name: 'span', attribute: { 'data-foo': 'bar' } }
 				}, [ dispatcher ] );
 
 				const conversionResult = dispatcher.convert(
@@ -275,8 +275,8 @@ describe( 'Configuration defined converters', () => {
 					model: 'bar',
 					view: 'strong',
 					acceptsAlso: [
-						{ name: 'span', classes: [ 'foo', 'bar' ] },
-						{ name: 'span', attributes: { 'data-foo': 'bar' } }
+						{ name: 'span', class: [ 'foo', 'bar' ] },
+						{ name: 'span', attribute: { 'data-foo': 'bar' } }
 					]
 				}, [ dispatcher ] );
 
@@ -326,28 +326,28 @@ describe( 'Configuration defined converters', () => {
 				testModelConversion( { model: 'foo', view: { name: 'code' } }, '<code>bar</code>' );
 			} );
 
-			it( 'using passed view element object with styles object', () => {
+			it( 'using passed view element object with style object', () => {
 				testModelConversion( {
 					model: 'foo',
-					view: { name: 'span', styles: { 'font-weight': 'bold' } }
+					view: { name: 'span', style: { 'font-weight': 'bold' } }
 				}, '<span style="font-weight:bold;">bar</span>' );
 			} );
 
 			it( 'using passed view element object with class string', () => {
-				testModelConversion( { model: 'foo', view: { name: 'span', classes: 'foo' } }, '<span class="foo">bar</span>' );
+				testModelConversion( { model: 'foo', view: { name: 'span', class: 'foo' } }, '<span class="foo">bar</span>' );
 			} );
 
 			it( 'using passed view element object with class array', () => {
 				testModelConversion( {
 					model: 'foo',
-					view: { name: 'span', classes: [ 'foo', 'foo-bar' ] }
+					view: { name: 'span', class: [ 'foo', 'foo-bar' ] }
 				}, '<span class="foo foo-bar">bar</span>' );
 			} );
 
 			it( 'using passed view element object with attributes', () => {
 				testModelConversion( {
 					model: 'foo',
-					view: { name: 'span', attributes: { 'data-foo': 'bar' } }
+					view: { name: 'span', attribute: { 'data-foo': 'bar' } }
 				}, '<span data-foo="bar">bar</span>' );
 			} );
 		} );
@@ -360,7 +360,7 @@ describe( 'Configuration defined converters', () => {
 				schema.registerItem( 'bar', '$block' );
 				schema.registerItem( 'baz', '$block' );
 
-				schema.allow( { name: '$inline', attributes: [ 'foo' ], inside: '$root' } );
+				schema.allow( { name: '$inline', attribute: [ 'foo' ], inside: '$root' } );
 				schema.allow( { name: '$text', inside: '$inline' } );
 
 				dispatcher.on( 'text', convertText() );
@@ -387,7 +387,7 @@ describe( 'Configuration defined converters', () => {
 			} );
 
 			it( 'should convert using class string', () => {
-				viewToModelElement( { model: 'bar', view: { name: 'span', classes: 'foo' } }, [ dispatcher ] );
+				viewToModelElement( { model: 'bar', view: { name: 'span', class: 'foo' } }, [ dispatcher ] );
 
 				const conversionResult = dispatcher.convert(
 					new ViewElement( 'span', { class: 'foo' }, new ViewText( 'foo' ) ), additionalData
@@ -396,8 +396,8 @@ describe( 'Configuration defined converters', () => {
 				expect( modelToString( conversionResult ) ).to.equal( '<bar>foo</bar>' );
 			} );
 
-			it( 'should convert using classes array', () => {
-				viewToModelElement( { model: 'bar', view: { name: 'span', classes: [ 'foo', 'bar' ] } }, [ dispatcher ] );
+			it( 'should convert using class array', () => {
+				viewToModelElement( { model: 'bar', view: { name: 'span', class: [ 'foo', 'bar' ] } }, [ dispatcher ] );
 
 				const conversionResult = dispatcher.convert(
 					new ViewElement( 'span', { class: 'foo bar' }, new ViewText( 'foo' ) ), additionalData
@@ -406,8 +406,8 @@ describe( 'Configuration defined converters', () => {
 				expect( modelToString( conversionResult ) ).to.equal( '<bar>foo</bar>' );
 			} );
 
-			it( 'should convert using styles object', () => {
-				viewToModelElement( { model: 'bar', view: { name: 'span', styles: { 'font-weight': 'bold' } } }, [ dispatcher ] );
+			it( 'should convert using style object', () => {
+				viewToModelElement( { model: 'bar', view: { name: 'span', style: { 'font-weight': 'bold' } } }, [ dispatcher ] );
 
 				const conversionResult = dispatcher.convert(
 					new ViewElement( 'span', { style: 'font-weight:bold' }, new ViewText( 'foo' ) ), additionalData
@@ -417,7 +417,7 @@ describe( 'Configuration defined converters', () => {
 			} );
 
 			it( 'should convert using attributes object', () => {
-				viewToModelElement( { model: 'bar', view: { name: 'span', attributes: { 'data-foo': 'bar' } } }, [ dispatcher ] );
+				viewToModelElement( { model: 'bar', view: { name: 'span', attribute: { 'data-foo': 'bar' } } }, [ dispatcher ] );
 
 				const conversionResult = dispatcher.convert(
 					new ViewElement( 'span', { 'data-foo': 'bar' }, new ViewText( 'foo' ) ), additionalData
@@ -431,8 +431,8 @@ describe( 'Configuration defined converters', () => {
 					model: 'bar',
 					view: 'strong',
 					acceptsAlso: [
-						{ name: 'span', classes: [ 'foo', 'bar' ] },
-						{ name: 'span', attributes: { 'data-foo': 'bar' } }
+						{ name: 'span', class: [ 'foo', 'bar' ] },
+						{ name: 'span', attribute: { 'data-foo': 'bar' } }
 					]
 				}, [ dispatcher ] );
 

+ 7 - 7
packages/ckeditor5-engine/tests/view/element.js

@@ -1043,7 +1043,7 @@ describe( 'Element', () => {
 		} );
 	} );
 
-	describe( 'fromViewDefinition()', () => {
+	describe( 'createFromDefinition()', () => {
 		it( 'should create element from definition without any attributes', () => {
 			const el = Element.createFromDefinition( { name: 'p' } );
 
@@ -1054,7 +1054,7 @@ describe( 'Element', () => {
 		} );
 
 		it( 'should create element from definition with attributes as plain object', () => {
-			const el = Element.createFromDefinition( { name: 'p', attributes: { foo: 'bar' } } );
+			const el = Element.createFromDefinition( { name: 'p', attribute: { foo: 'bar' } } );
 
 			expect( el ).to.have.property( 'name' ).that.equals( 'p' );
 			expect( count( el.getAttributeKeys() ) ).to.equal( 1 );
@@ -1062,7 +1062,7 @@ describe( 'Element', () => {
 		} );
 
 		it( 'should create element from definition with classes as single string', () => {
-			const el = Element.createFromDefinition( { name: 'p', attributes: { id: 'test' }, classes: 'foo-bar' } );
+			const el = Element.createFromDefinition( { name: 'p', attribute: { id: 'test' }, class: 'foo-bar' } );
 
 			expect( el._attrs.has( 'class' ) ).to.be.false;
 			expect( el._attrs.has( 'id' ) ).to.be.true;
@@ -1070,7 +1070,7 @@ describe( 'Element', () => {
 		} );
 
 		it( 'should create element from definition with classes set as array', () => {
-			const el = Element.createFromDefinition( { name: 'p', attributes: { id: 'test' }, classes: [ 'one', 'two', 'three' ] } );
+			const el = Element.createFromDefinition( { name: 'p', attribute: { id: 'test' }, class: [ 'one', 'two', 'three' ] } );
 
 			expect( el._attrs.has( 'class' ) ).to.be.false;
 			expect( el._attrs.has( 'id' ) ).to.be.true;
@@ -1079,11 +1079,11 @@ describe( 'Element', () => {
 			expect( el._classes.has( 'three' ) ).to.be.true;
 		} );
 
-		it( 'should create element from definition with styles object', () => {
+		it( 'should create element from definition with style object', () => {
 			const el = Element.createFromDefinition( {
 				name: 'p',
-				attributes: { id: 'test' },
-				styles: { one: 'style1', two: 'style2', three: 'url(http://ckeditor.com)' }
+				attribute: { id: 'test' },
+				style: { one: 'style1', two: 'style2', three: 'url(http://ckeditor.com)' }
 			} );
 
 			expect( el._attrs.has( 'style' ) ).to.be.false;