Procházet zdrojové kódy

Refactor element reconversion sample.

Maciej Gołaszewski před 5 roky
rodič
revize
f426f9fe87

+ 62 - 62
packages/ckeditor5-engine/docs/_snippets/framework/element-reconversion-demo.js

@@ -17,87 +17,87 @@ const getTypeFromViewElement = viewElement => {
 	return 'info';
 };
 
-class ComplexInfoBox {
-	constructor( editor ) {
-		// Schema definition.
-		editor.model.schema.register( 'complexInfoBox', {
-			allowWhere: '$block',
-			allowContentOf: '$root',
-			isObject: true,
-			allowAttributes: [ 'infoBoxType', 'infoBoxURL' ]
-		} );
+const upcastInfoBox = ( viewElement, { writer } ) => {
+	const complexInfoBox = writer.createElement( 'complexInfoBox' );
 
-		editor.model.schema.register( 'complexInfoBoxTitle', {
-			isLimit: true,
-			allowIn: 'complexInfoBox',
-			allowContentOf: '$block'
-		} );
+	const type = getTypeFromViewElement( viewElement );
 
-		editor.model.schema.register( 'complexInfoBoxContent', {
-			isLimit: true,
-			allowIn: 'complexInfoBox',
-			allowContentOf: '$root'
-		} );
+	writer.setAttribute( 'infoBoxType', type, complexInfoBox );
+	writer.setAttribute( 'infoBoxURL', 'https://ckeditor.com', complexInfoBox );
 
-		// Upcast converter.
-		editor.conversion.for( 'upcast' )
-			.elementToElement( {
-				view: {
-					name: 'div',
-					classes: [ 'info-box' ]
-				},
-				model( viewElement, { writer } ) {
-					const complexInfoBox = writer.createElement( 'complexInfoBox' );
+	return complexInfoBox;
+};
 
-					const type = getTypeFromViewElement( viewElement );
+const downcastInfoBox = ( modelElement, { writer, consumable, mapper } ) => {
+	const complexInfoBoxView = writer.createContainerElement( 'div', { class: 'info-box' } );
 
-					writer.setAttribute( 'infoBoxType', type, complexInfoBox );
-					writer.setAttribute( 'infoBoxURL', 'https://ckeditor.com', complexInfoBox );
+	const type = modelElement.getAttribute( 'infoBoxType' ) || 'info';
 
-					return complexInfoBox;
-				}
+	writer.addClass( `info-box-${ type }`, complexInfoBoxView );
+
+	for ( const child of modelElement.getChildren() ) {
+		const childView = writer.createContainerElement( 'div' );
+
+		if ( child.is( 'element', 'complexInfoBoxTitle' ) ) {
+			writer.addClass( 'info-box-title', childView );
+		} else {
+			writer.addClass( 'info-box-content', childView );
+		}
+
+		consumable.consume( child, 'insert' );
+		mapper.bindElements( child, childView );
+		writer.insert( writer.createPositionAt( complexInfoBoxView, 'end' ), childView );
+	}
+
+	return complexInfoBoxView;
+};
+
+class ComplexInfoBox {
+	constructor( editor ) {
+		this._defineSchema( editor );
+		this._defineConversion( editor );
+	}
+
+	_defineConversion( editor ) {
+		editor.conversion.for( 'upcast' )
+			.elementToElement( {
+				view: { name: 'div', classes: [ 'info-box' ] },
+				model: upcastInfoBox
 			} )
 			.elementToElement( {
-				view: {
-					name: 'div',
-					classes: [ 'info-box-title' ]
-				},
+				view: { name: 'div', classes: [ 'info-box-title' ] },
 				model: 'complexInfoBoxTitle'
 			} )
 			.elementToElement( {
-				view: {
-					name: 'div',
-					classes: [ 'info-box-content' ]
-				},
+				view: { name: 'div', classes: [ 'info-box-content' ] },
 				model: 'complexInfoBoxContent'
 			} );
 
 		// The downcast conversion must be split as you need a widget in the editing pipeline.
 		editor.conversion.for( 'downcast' ).elementToElement( {
 			model: 'complexInfoBox',
-			view( modelElement, { writer, consumable, mapper } ) {
-				const complexInfoBoxView = writer.createContainerElement( 'div', { class: 'info-box' } );
-
-				const type = modelElement.getAttribute( 'infoBoxType' ) || 'info';
-
-				writer.addClass( `info-box-${ type }`, complexInfoBoxView );
-
-				for ( const child of modelElement.getChildren() ) {
-					const childView = writer.createContainerElement( 'div' );
+			view: downcastInfoBox
+		} );
+	}
 
-					if ( child.is( 'element', 'complexInfoBoxTitle' ) ) {
-						writer.addClass( 'info-box-title', childView );
-					} else {
-						writer.addClass( 'info-box-content', childView );
-					}
+	_defineSchema( editor ) {
+		editor.model.schema.register( 'complexInfoBox', {
+			allowWhere: '$block',
+			allowContentOf: '$root',
+			isObject: true,
+			allowAttributes: [ 'infoBoxType', 'infoBoxURL' ]
+		} );
 
-					consumable.consume( child, 'insert' );
-					mapper.bindElements( child, childView );
-					writer.insert( writer.createPositionAt( complexInfoBoxView, 'end' ), childView );
-				}
+		editor.model.schema.register( 'complexInfoBoxTitle', {
+			isLimit: true,
+			allowIn: 'complexInfoBox',
+			allowContentOf: '$block'
+		} );
 
-				return complexInfoBoxView;
-			}
+		editor.model.schema.register( 'complexInfoBoxContent', {
+			isLimit: true,
+			allowIn: 'complexInfoBox',
+			allowContentOf: '$root'
 		} );
 	}
 }
@@ -117,7 +117,7 @@ ClassicEditor
 			]
 		},
 		toolbar: {
-			items: [ 'paragraph', 'heading1', 'heading2', '|', '|', 'bold', 'italic', '|' ],
+			items: [ 'heading', '|', 'bold', 'italic' ],
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		}
 	} )