8
0
Просмотр исходного кода

Other: Use `definition-based-converters` for defining highlighters.

Maciej Gołaszewski 8 лет назад
Родитель
Сommit
6ee4ef4079

+ 27 - 37
packages/ckeditor5-highlight/src/highlightediting.js

@@ -8,11 +8,10 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-
-import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
-import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
-
-import AttributeElement from '@ckeditor/ckeditor5-engine/src/view/attributeelement';
+import {
+	modelAttributeToViewAttributeElement,
+	viewToModelAttribute
+} from '@ckeditor/ckeditor5-engine/src/conversion/definition-based-converters';
 
 import HighlightCommand from './highlightcommand';
 
@@ -29,11 +28,17 @@ export default class HighlightEditing extends Plugin {
 		super( editor );
 
 		editor.config.define( 'highlight', [
-			{ name: 'marker', class: 'marker', title: 'Marker', color: '#ffff66', type: 'marker' },
-			{ name: 'greenMarker', class: 'marker-green', title: 'Green Marker', color: '#66ff00', type: 'marker' },
-			{ name: 'pinkMarker', class: 'marker-pink', title: 'Pink Marker', color: '#ff6fff', type: 'marker' },
-			{ name: 'redPen', class: 'pen-red', title: 'Red Pen', color: '#ff0000', type: 'pen' },
-			{ name: 'bluePen', class: 'pen-blue', title: 'Blue Pen', color: '#0000ff', type: 'pen' }
+			{ model: 'marker', view: { name: 'mark', class: 'marker' }, title: 'Marker', color: '#ffff66', type: 'marker' },
+			{
+				model: 'greenMarker',
+				view: { name: 'mark', class: 'marker-green' },
+				title: 'Green Marker',
+				color: '#66ff00',
+				type: 'marker'
+			},
+			{ model: 'pinkMarker', view: { name: 'mark', class: 'marker-pink' }, title: 'Pink Marker', color: '#ff6fff', type: 'marker' },
+			{ model: 'redPen', view: { name: 'mark', class: 'pen-red' }, title: 'Red Pen', color: '#ff0000', type: 'pen' },
+			{ model: 'bluePen', view: { name: 'mark', class: 'pen-blue' }, title: 'Blue Pen', color: '#0000ff', type: 'pen' }
 		] );
 	}
 
@@ -45,45 +50,30 @@ export default class HighlightEditing extends Plugin {
 		const data = editor.data;
 		const editing = editor.editing;
 
-		// Allow fontSize attribute on text nodes.
+		// Allow highlight attribute on text nodes.
 		editor.model.schema.extend( '$text', { allowAttributes: 'highlight' } );
 
-		// Convert highlight attribute to a mark element with associated class.
-		buildModelConverter()
-			.for( data.modelToView, editing.modelToView )
-			.fromAttribute( 'highlight' )
-			.toElement( data => new AttributeElement( 'mark', { class: data } ) );
-
-		const configuredClasses = editor.config.get( 'highlight' ).map( config => config.class );
+		const options = editor.config.get( 'highlight' );
 
-		// Convert `mark` attribute with class name to model's highlight attribute.
-		buildViewConverter()
-			.for( data.viewToModel )
-			.fromElement( 'mark' )
-			.toAttribute( viewElement => {
-				for ( const className of viewElement.getClassNames() ) {
-					if ( configuredClasses.indexOf( className ) > -1 ) {
-						return { key: 'highlight', value: className };
-					}
-				}
-			} );
+		// Define view to model conversion.
+		for ( const option of options ) {
+			viewToModelAttribute( 'highlight', option, [ data.viewToModel ] );
+		}
 
-		editor.config
-			.get( 'highlight' )
-			// TODO: change as in Font
-			.map( highlighter => editor.commands.add( highlighter.name, new HighlightCommand( editor, highlighter.class ) ) );
+		// Define model to view conversion.
+		modelAttributeToViewAttributeElement( 'highlight', options, [ data.modelToView, editing.modelToView ] );
 
-		editor.commands.add( 'removeHighlight', new HighlightCommand( editor ) );
+		editor.commands.add( 'highlight', new HighlightCommand( editor ) );
 	}
 }
 
 /**
- * Highlight option descriptor.
+ * Highlight option descriptor. Compatible with {@link module:engine/conversion/definition-based-converters~ConverterDefinition}.
  *
  * @typedef {Object} module:highlight/highlightediting~HighlightOption
- * @property {String} class The class which is used to differentiate highlighters.
  * @property {String} title The user-readable title of the option.
- * @property {String} color Color used for highlighter. Should be coherent with CSS class definition.
+ * @property {String} model Attribute's unique value in the model.
+ * @property {String} color Color used for highlighter. Should be coherent with view definition.
  * @property {'marker'|'pen'} type The type of highlighter:
  * - "marker" - will use #color as background,
  * - "pen" - will use #color as font color.

+ 5 - 6
packages/ckeditor5-highlight/tests/highlightediting.js

@@ -37,14 +37,13 @@ describe( 'HighlightEditing', () => {
 		expect( editor.model.schema.checkAttribute( [ '$block' ], 'highlight' ) ).to.be.false;
 	} );
 
-	it.skip( 'adds highlight commands', () => {
+	it( 'adds highlight command', () => {
 		expect( editor.commands.get( 'highlight' ) ).to.be.instanceOf( HighlightCommand );
 	} );
 
-	describe.skip( 'data pipeline conversions', () => {
+	describe( 'data pipeline conversions', () => {
 		it( 'should convert defined marker classes', () => {
 			const data = '<p>f<mark class="marker">o</mark>o</p>';
-
 			editor.setData( data );
 
 			expect( getModelData( model ) ).to.equal( '<paragraph>[]f<$text highlight="marker">o</$text>o</paragraph>' );
@@ -54,8 +53,8 @@ describe( 'HighlightEditing', () => {
 		it( 'should convert only one defined marker classes', () => {
 			editor.setData( '<p>f<mark class="marker-green marker">o</mark>o</p>' );
 
-			expect( getModelData( model ) ).to.equal( '<paragraph>[]f<$text highlight="marker-green">o</$text>o</paragraph>' );
-			expect( editor.getData() ).to.equal( '<p>f<mark class="marker-green">o</mark>o</p>' );
+			expect( getModelData( model ) ).to.equal( '<paragraph>[]f<$text highlight="marker">o</$text>o</paragraph>' );
+			expect( editor.getData() ).to.equal( '<p>f<mark class="marker">o</mark>o</p>' );
 		} );
 
 		it( 'should not convert undefined marker classes', () => {
@@ -73,7 +72,7 @@ describe( 'HighlightEditing', () => {
 		} );
 	} );
 
-	describe.skip( 'editing pipeline conversion', () => {
+	describe( 'editing pipeline conversion', () => {
 		it( 'should convert mark element with defined class', () => {
 			setModelData( model, '<paragraph>f<$text highlight="marker">o</$text>o</paragraph>' );