Bladeren bron

Other: Rename Heading options to use ViewElementDefinition interface.

Maciej Gołaszewski 8 jaren geleden
bovenliggende
commit
4e417be4e5

+ 8 - 8
packages/ckeditor5-heading/src/heading.js

@@ -52,9 +52,9 @@ export default class Heading extends Plugin {
 		const dropdownTooltip = t( 'Heading' );
 
 		for ( const option of options ) {
-			const command = editor.commands.get( option.modelElement );
+			const command = editor.commands.get( option.model );
 			const itemModel = new Model( {
-				commandName: option.modelElement,
+				commandName: option.model,
 				label: option.title,
 				class: option.class
 			} );
@@ -165,8 +165,8 @@ function getCommandsBindingTargets( commands, attribute ) {
  * Heading option descriptor.
  *
  * @typedef {Object} module:heading/heading~HeadingOption
- * @property {String} modelElement Element's name in the model.
- * @property {String} viewElement The name of the view element that will be used to represent the model element in the view.
+ * @property {String} model Element's name in the model.
+ * @property {String} view The name of the view element that will be used to represent the model element in the view.
  * @property {String} title The user-readable title of the option.
  * @property {String} class The class which will be added to the dropdown item representing this option.
  */
@@ -202,10 +202,10 @@ function getCommandsBindingTargets( commands, attribute ) {
  *
  *		const headingConfig = {
  *			options: [
- *				{ modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
- *				{ modelElement: 'heading1', viewElement: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
- *				{ modelElement: 'heading2', viewElement: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
- *				{ modelElement: 'heading3', viewElement: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
+ *				{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+ *				{ model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
+ *				{ model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
+ *				{ model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
  *			]
  *		};
  *

+ 37 - 12
packages/ckeditor5-heading/src/headingengine.js

@@ -30,10 +30,35 @@ export default class HeadingEngine extends Plugin {
 
 		editor.config.define( 'heading', {
 			options: [
-				{ modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
-				{ modelElement: 'heading1', viewElement: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
-				{ modelElement: 'heading2', viewElement: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
-				{ modelElement: 'heading3', viewElement: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
+				{
+					model: 'paragraph',
+					title: 'Paragraph',
+					class: 'ck-heading_paragraph'
+				},
+				{
+					model: 'heading1',
+					title: 'Heading 1',
+					class: 'ck-heading_heading1',
+					view: {
+						name: 'h2'
+					}
+				},
+				{
+					model: 'heading2',
+					title: 'Heading 2',
+					view: {
+						name: 'h3'
+					},
+					class: 'ck-heading_heading2'
+				},
+				{
+					model: 'heading3',
+					title: 'Heading 3',
+					class: 'ck-heading_heading3',
+					view: {
+						name: 'h4'
+					}
+				}
 			]
 		} );
 	}
@@ -56,22 +81,22 @@ export default class HeadingEngine extends Plugin {
 
 		for ( const option of options ) {
 			// Skip paragraph - it is defined in required Paragraph feature.
-			if ( option.modelElement !== defaultModelElement ) {
+			if ( option.model !== defaultModelElement ) {
 				// Schema.
-				editor.document.schema.registerItem( option.modelElement, '$block' );
+				editor.document.schema.registerItem( option.model, '$block' );
 
 				// Build converter from model to view for data and editing pipelines.
 				buildModelConverter().for( data.modelToView, editing.modelToView )
-					.fromElement( option.modelElement )
-					.toElement( option.viewElement );
+					.fromElement( option.model )
+					.toElement( option.view.name );
 
 				// Build converter from view to model for data pipeline.
 				buildViewConverter().for( data.viewToModel )
-					.fromElement( option.viewElement )
-					.toElement( option.modelElement );
+					.from( { name: option.view.name } )
+					.toElement( option.model );
 
 				// Register the heading command for this option.
-				editor.commands.add( option.modelElement, new HeadingCommand( editor, option.modelElement ) );
+				editor.commands.add( option.model, new HeadingCommand( editor, option.model ) );
 			}
 		}
 	}
@@ -90,7 +115,7 @@ export default class HeadingEngine extends Plugin {
 			this.listenTo( enterCommand, 'afterExecute', ( evt, data ) => {
 				const positionParent = editor.document.selection.getFirstPosition().parent;
 				const batch = data.batch;
-				const isHeading = options.some( option => positionParent.is( option.modelElement ) );
+				const isHeading = options.some( option => positionParent.is( option.model ) );
 
 				if ( isHeading && !positionParent.is( defaultModelElement ) && positionParent.childCount === 0 ) {
 					batch.rename( positionParent, defaultModelElement );

+ 13 - 13
packages/ckeditor5-heading/tests/heading.js

@@ -118,8 +118,8 @@ describe( 'Heading', () => {
 			beforeEach( () => {
 				commands = {};
 
-				editor.config.get( 'heading.options' ).forEach( ( { modelElement } ) => {
-					commands[ modelElement ] = editor.commands.get( modelElement );
+				editor.config.get( 'heading.options' ).forEach( ( { model } ) => {
+					commands[ model ] = editor.commands.get( model );
 				} );
 			} );
 
@@ -151,17 +151,17 @@ describe( 'Heading', () => {
 
 			beforeEach( () => {
 				return localizedEditor( [
-					{ modelElement: 'paragraph', title: 'Paragraph' },
-					{ modelElement: 'heading1', viewElement: 'h2', title: 'Heading 1' },
-					{ modelElement: 'heading2', viewElement: 'h3', title: 'Heading 2' }
+					{ model: 'paragraph', title: 'Paragraph' },
+					{ model: 'heading1', view: { name: 'h2' }, title: 'Heading 1' },
+					{ model: 'heading2', view: { name: 'h3' }, title: 'Heading 2' }
 				] );
 			} );
 
 			it( 'does not alter the original config', () => {
 				expect( editor.config.get( 'heading.options' ) ).to.deep.equal( [
-					{ modelElement: 'paragraph', title: 'Paragraph' },
-					{ modelElement: 'heading1', viewElement: 'h2', title: 'Heading 1' },
-					{ modelElement: 'heading2', viewElement: 'h3', title: 'Heading 2' }
+					{ model: 'paragraph', title: 'Paragraph' },
+					{ model: 'heading1', view: { name: 'h2' }, title: 'Heading 1' },
+					{ model: 'heading2', view: { name: 'h3' }, title: 'Heading 2' }
 				] );
 			} );
 
@@ -194,8 +194,8 @@ describe( 'Heading', () => {
 
 			it( 'allows custom titles', () => {
 				return localizedEditor( [
-					{ modelElement: 'paragraph', title: 'Custom paragraph title' },
-					{ modelElement: 'heading1', title: 'Custom heading1 title' }
+					{ model: 'paragraph', title: 'Custom paragraph title' },
+					{ model: 'heading1', view: { name: 'h1' }, title: 'Custom heading1 title' }
 				] ).then( () => {
 					const listView = dropdown.listView;
 
@@ -208,7 +208,7 @@ describe( 'Heading', () => {
 
 			it( 'translates default using the the locale', () => {
 				return localizedEditor( [
-					{ modelElement: 'paragraph', title: 'Paragraph' }
+					{ model: 'paragraph', title: 'Paragraph' }
 				] ).then( () => {
 					const listView = dropdown.listView;
 
@@ -236,8 +236,8 @@ describe( 'Heading', () => {
 						dropdown = editor.ui.componentFactory.create( 'headings' );
 						commands = {};
 
-						editor.config.get( 'heading.options' ).forEach( ( { modelElement } ) => {
-							commands[ modelElement ] = editor.commands.get( modelElement );
+						editor.config.get( 'heading.options' ).forEach( ( { model } ) => {
+							commands[ model ] = editor.commands.get( model );
 						} );
 
 						editorElement.remove();

+ 12 - 12
packages/ckeditor5-heading/tests/headingcommand.js

@@ -10,9 +10,9 @@ import Range from '@ckeditor/ckeditor5-engine/src/model/range';
 import { setData, getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 const options = [
-	{ modelElement: 'heading1', viewElement: 'h2', title: 'H2' },
-	{ modelElement: 'heading2', viewElement: 'h3', title: 'H3' },
-	{ modelElement: 'heading3', viewElement: 'h4', title: 'H4' }
+	{ model: 'heading1', view: { name: 'h2' }, title: 'H2' },
+	{ model: 'heading2', view: { name: 'h3' }, title: 'H3' },
+	{ model: 'heading3', view: { name: 'h4' }, title: 'H4' }
 ];
 
 describe( 'HeadingCommand', () => {
@@ -29,8 +29,8 @@ describe( 'HeadingCommand', () => {
 			schema.registerItem( 'paragraph', '$block' );
 
 			for ( const option of options ) {
-				commands[ option.modelElement ] = new HeadingCommand( editor, option.modelElement );
-				schema.registerItem( option.modelElement, '$block' );
+				commands[ option.model ] = new HeadingCommand( editor, option.model );
+				schema.registerItem( option.model, '$block' );
 			}
 
 			schema.registerItem( 'notBlock' );
@@ -58,7 +58,7 @@ describe( 'HeadingCommand', () => {
 			test( option );
 		}
 
-		function test( { modelElement } ) {
+		function test( { model: modelElement } ) {
 			it( `equals ${ modelElement } when collapsed selection is placed inside ${ modelElement } element`, () => {
 				setData( document, `<${ modelElement }>foobar</${ modelElement }>` );
 				const element = root.getChild( 0 );
@@ -176,11 +176,11 @@ describe( 'HeadingCommand', () => {
 			} );
 
 			function test( from, to ) {
-				it( `converts ${ from.modelElement } to ${ to.modelElement } on collapsed selection`, () => {
-					setData( document, `<${ from.modelElement }>foo[]bar</${ from.modelElement }>` );
-					commands[ to.modelElement ].execute();
+				it( `converts ${ from.model } to ${ to.model } on collapsed selection`, () => {
+					setData( document, `<${ from.model }>foo[]bar</${ from.model }>` );
+					commands[ to.model ].execute();
 
-					expect( getData( document ) ).to.equal( `<${ to.modelElement }>foo[]bar</${ to.modelElement }>` );
+					expect( getData( document ) ).to.equal( `<${ to.model }>foo[]bar</${ to.model }>` );
 				} );
 			}
 		} );
@@ -221,7 +221,7 @@ describe( 'HeadingCommand', () => {
 				);
 			} );
 
-			function test( { modelElement: fromElement }, { modelElement: toElement } ) {
+			function test( { model: fromElement }, { model: toElement } ) {
 				it( `converts ${ fromElement } to ${ toElement } on non-collapsed selection`, () => {
 					setData(
 						document,
@@ -240,7 +240,7 @@ describe( 'HeadingCommand', () => {
 
 	describe( 'isEnabled', () => {
 		for ( const option of options ) {
-			test( option.modelElement );
+			test( option.model );
 		}
 
 		function test( modelElement ) {

+ 6 - 6
packages/ckeditor5-heading/tests/headingengine.js

@@ -87,18 +87,18 @@ describe( 'HeadingEngine', () => {
 			describe( 'default value', () => {
 				it( 'should be set', () => {
 					expect( editor.config.get( 'heading.options' ) ).to.deep.equal( [
-						{ modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
-						{ modelElement: 'heading1', viewElement: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
-						{ modelElement: 'heading2', viewElement: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
-						{ modelElement: 'heading3', viewElement: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
+						{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+						{ model: 'heading1', view: { name: 'h2' }, title: 'Heading 1', class: 'ck-heading_heading1' },
+						{ model: 'heading2', view: { name: 'h3' }, title: 'Heading 2', class: 'ck-heading_heading2' },
+						{ model: 'heading3', view: { name: 'h4' }, title: 'Heading 3', class: 'ck-heading_heading3' }
 					] );
 				} );
 			} );
 
 			it( 'should customize options', () => {
 				const options = [
-					{ modelElement: 'paragraph', title: 'Paragraph' },
-					{ modelElement: 'h4', viewElement: 'h4', title: 'H4' }
+					{ model: 'paragraph', title: 'Paragraph' },
+					{ model: 'h4', view: { name: 'h4' }, title: 'H4' }
 				];
 
 				return VirtualTestEditor