Jelajahi Sumber

Redefine example content to make more user-oriented.

Maciej Gołaszewski 5 tahun lalu
induk
melakukan
af638f0789

+ 35 - 29
packages/ckeditor5-engine/docs/_snippets/framework/element-reconversion-demo.html

@@ -1,62 +1,66 @@
 <style>
-	.ck-content .info-box {
+	.ck-content .side-card {
 		background: hsl(0, 0%, 45%);
 		border: 1px solid hsl(0, 0%, 80%);
-		padding: 1em;
+		padding: 0.5em;
 		border-radius: 8px;
+		width: 300px;
+		margin: 1em auto 1em 1.5em;
+		font-size: 0.9em;
+		float: right;
 	}
 
-	.ck-content .info-box-title {
+	.ck-content .side-card-title {
 		margin-bottom: 0.5em;
-		font-size: 1.4em;
+		font-size: 1.2em;
 		color: inherit;
 		border-bottom-color: inherit;
 		border-bottom-style: solid;
 		border-bottom-width: 1px;
 	}
 
-	.ck-content .info-box-warning {
+	.ck-content .side-card-warning {
 		background: hsl(48, 100%, 87%);
 		border: 1px solid hsl(47, 100%, 62%);
 	}
 
-	.ck-content .info-box-warning .info-box-title {
+	.ck-content .side-card-warning .side-card-title {
 		color: hsl(47, 100%, 32%)
 	}
 
-	.ck-content .info-box-info {
+	.ck-content .side-card-info {
 		background: hsl(205, 100%, 95%);
 		border: 1px solid hsl(205, 91%, 82%);
 	}
 
-	.ck-content .info-box-info .info-box-title {
+	.ck-content .side-card-info .side-card-title {
 		color: hsl(204, 79%, 41%)
 	}
 
-	.ck-content .info-box-content {
-		padding: 8px 10px;
+	.ck-content .side-card-section {
+		padding: 4px;
 		background: hsl(0, 0%, 100%);
 		border-radius: 6px;
 		margin-top: 0.5em;
 	}
 
-	.ck-content .info-box-content p:only-child,
-	.ck-content .info-box-content p:last-child {
+	.ck-content .side-card-section p:only-child,
+	.ck-content .side-card-section p:last-child {
 		margin-bottom: 0;
 	}
 
-	.ck-content .info-box-url {
+	.ck-content .side-card-url {
 		margin: 0.5em 0;
 		font-style: italic;
 		font-size: 0.8em;
 		color: hsl(0, 0%, 20%);
 	}
 
-	.ck-content .info-box-actions {
+	.ck-content .side-card-actions {
 		margin: 0.5em 0;
 	}
 
-	.ck-content .info-box-actions button {
+	.ck-content .side-card-actions button {
 		font-size: 0.8em;
 		border: 1px solid hsl(0, 0%, 80%);
 		padding: 2px 4px;
@@ -65,25 +69,27 @@
 </style>
 
 <div id="editor-element-reconversion">
-	<p>Info box with two content fields:</p>
+	<p>Cupcake ipsum dolor sit amet soufflé gummi bears. Cotton candy pie biscuit chocolate cake. Sugar plum sugar plum gingerbread soufflé.</p>
 
-	<div class="info-box info-box-info">
-		<div class="info-box-title">Hey! Did you know?</div>
-		<div class="info-box-content">
-			<p>Editable content of the <strong>info box</strong>.</p>
+	<aside class="side-card side-card-info">
+		<div class="side-card-title">Hey! Did you know?</div>
+		<div class="side-card-section">
+			<p>Editable content of the <strong>side card section</strong>.</p>
 		</div>
-		<div class="info-box-content">
+		<div class="side-card-section">
 			<p>Another content box.</p>
 		</div>
-	</div>
+	</aside>
 
-	<p>Warning box with URL attribute:</p>
+	<p>Pastry cheesecake cheesecake donut toffee. Marzipan apple pie sugar plum. Donut cotton candy topping donut tootsie roll pudding tootsie roll gingerbread. Macaroon gummies powder sesame snaps danish tart. Dessert topping liquorice marshmallow dessert lollipop marshmallow dragée pudding. Oat cake donut chocolate bar fruitcake jujubes. Liquorice pastry biscuit tart macaroon. Jelly cotton candy sweet roll brownie. Ice cream pudding tiramisu jelly. Sweet roll brownie dragée gummies chocolate cake sesame snaps cupcake brownie. Bonbon icing cake. Chupa chups pudding danish. Lemon drops danish pastry muffin. Ice cream oat cake macaroon macaroon fruitcake.</p>
 
-	<div class="info-box info-box-warning">
-		<div class="info-box-title">Watch out for <strong>this</strong>!</div>
-		<div class="info-box-content">
-			<p>Editable content of the <strong>info box</strong>.</p>
+	<aside class="side-card side-card-warning">
+		<div class="side-card-title">Watch out for <strong>this</strong>!</div>
+		<div class="side-card-section">
+			<p>Editable content of the <strong>side card section</strong>.</p>
 		</div>
-		<div class="info-box-url">http://cksource.com</div>
-	</div>
+		<div class="side-card-url">http://cksource.com</div>
+	</aside>
+
+	<p>Biscuit tootsie roll apple pie. Cheesecake apple pie muffin tootsie roll soufflé chupa chups. Soufflé sweet roll cheesecake. Biscuit apple pie muffin soufflé dessert sugar plum jelly-o danish. Jelly tootsie roll jelly beans bear claw. Liquorice apple pie tootsie roll croissant chupa chups. Lollipop ice cream fruitcake gingerbread sugar plum toffee cookie danish. Soufflé pastry apple pie powder cupcake cookie tart. Gummies donut jelly-o sugar plum dessert gummies danish. Jelly beans macaroon danish soufflé cupcake marshmallow fruitcake topping cotton candy. Cupcake cotton candy pastry sesame snaps. Cookie toffee jelly-o brownie ice cream dragée tart cotton candy.</p>
 </div>

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

@@ -10,7 +10,7 @@ import createElement from '@ckeditor/ckeditor5-utils/src/dom/createelement';
 
 const getTypeFromViewElement = viewElement => {
 	for ( const type of [ 'info', 'warning' ] ) {
-		if ( viewElement.hasClass( `info-box-${ type }` ) ) {
+		if ( viewElement.hasClass( `side-card-${ type }` ) ) {
 			return type;
 		}
 	}
@@ -18,21 +18,21 @@ const getTypeFromViewElement = viewElement => {
 	return 'info';
 };
 
-const upcastInfoBox = ( viewElement, { writer } ) => {
-	const complexInfoBox = writer.createElement( 'complexInfoBox' );
+const upcastCard = ( viewElement, { writer } ) => {
+	const sideCard = writer.createElement( 'sideCard' );
 
 	const type = getTypeFromViewElement( viewElement );
-	writer.setAttribute( 'infoBoxType', type, complexInfoBox );
+	writer.setAttribute( 'cardType', type, sideCard );
 
 	const urlWrapper = [ ...viewElement.getChildren() ].find( child => {
-		return child.is( 'element', 'div' ) && child.hasClass( 'info-box-url' );
+		return child.is( 'element', 'div' ) && child.hasClass( 'side-card-url' );
 	} );
 
 	if ( urlWrapper ) {
-		writer.setAttribute( 'infoBoxURL', urlWrapper.getChild( 0 ).data, complexInfoBox );
+		writer.setAttribute( 'cardURL', urlWrapper.getChild( 0 ).data, sideCard );
 	}
 
-	return complexInfoBox;
+	return sideCard;
 };
 
 function addActionButton( text, callback, domElement, editor ) {
@@ -52,29 +52,29 @@ function addActionButton( text, callback, domElement, editor ) {
 const renderActionsView = ( editor, modelElement ) => function( domElement ) {
 	addActionButton( 'Set URL', writer => {
 		// eslint-disable-next-line no-alert
-		const newURL = prompt( 'Set URL', modelElement.getAttribute( 'infoBoxURL' ) || '' );
+		const newURL = prompt( 'Set URL', modelElement.getAttribute( 'cardURL' ) || '' );
 
-		writer.setAttribute( 'infoBoxURL', newURL, modelElement );
+		writer.setAttribute( 'cardURL', newURL, modelElement );
 	}, domElement, editor );
 
-	const currentType = modelElement.getAttribute( 'infoBoxType' );
+	const currentType = modelElement.getAttribute( 'cardType' );
 	const newType = currentType === 'info' ? 'warning' : 'info';
 
-	addActionButton( `Change to ${ newType }`, writer => {
-		writer.setAttribute( 'infoBoxType', newType, modelElement );
+	addActionButton( 'Change type', writer => {
+		writer.setAttribute( 'cardType', newType, modelElement );
 	}, domElement, editor );
 
 	const childCount = modelElement.childCount;
 
-	const addButton = addActionButton( 'Add content box', writer => {
-		writer.insertElement( 'complexInfoBoxContent', modelElement, 'end' );
+	const addButton = addActionButton( 'Add section', writer => {
+		writer.insertElement( 'sideCardSection', modelElement, 'end' );
 	}, domElement, editor );
 
 	if ( childCount > 4 ) {
 		addButton.setAttribute( 'disabled', 'disabled' );
 	}
 
-	const removeButton = addActionButton( 'Remove content box', writer => {
+	const removeButton = addActionButton( 'Remove section', writer => {
 		writer.remove( modelElement.getChild( childCount - 1 ) );
 	}, domElement, editor );
 
@@ -83,61 +83,62 @@ const renderActionsView = ( editor, modelElement ) => function( domElement ) {
 	}
 };
 
-const downcastInfoBox = editor => {
+const downcastSideCard = editor => {
 	return ( modelElement, { writer, consumable, mapper } ) => {
-		const complexInfoBoxView = writer.createContainerElement( 'div', {
-			class: 'info-box'
-		} );
-
-		const type = modelElement.getAttribute( 'infoBoxType' ) || 'info';
+		const type = modelElement.getAttribute( 'cardType' ) || 'info';
 
-		writer.addClass( `info-box-${ type }`, complexInfoBoxView );
+		const sideCardView = writer.createContainerElement( 'aside', {
+			class: `side-card side-card-${ type }`
+		} );
 
+		// Create inner views from side card children.
 		for ( const child of modelElement.getChildren() ) {
 			const childView = writer.createEditableElement( 'div' );
 
-			if ( child.is( 'element', 'complexInfoBoxTitle' ) ) {
-				writer.addClass( 'info-box-title', childView );
+			// Child is either a "title" or "section".
+			if ( child.is( 'element', 'sideCardTitle' ) ) {
+				writer.addClass( 'side-card-title', childView );
 			} else {
-				writer.addClass( 'info-box-content', childView );
+				writer.addClass( 'side-card-section', childView );
 			}
 
+			// It is important to consume & bind converted elements.
 			consumable.consume( child, 'insert' );
 			mapper.bindElements( child, childView );
 
+			// Make it an editable part of the widget.
 			toWidgetEditable( childView, writer );
 
-			writer.insert( writer.createPositionAt( complexInfoBoxView, 'end' ), childView );
+			writer.insert( writer.createPositionAt( sideCardView, 'end' ), childView );
 		}
 
-		const urlAttribute = modelElement.getAttribute( 'infoBoxURL' );
+		const urlAttribute = modelElement.getAttribute( 'cardURL' );
 
 		// Do not render empty URL field
 		if ( urlAttribute ) {
 			const urlBox = writer.createRawElement( 'div', {
-				class: 'info-box-url'
+				class: 'side-card-url'
 			}, function( domElement ) {
 				domElement.innerText = `URL: "${ urlAttribute }"`;
 			} );
 
-			writer.insert( writer.createPositionAt( complexInfoBoxView, 'end' ), urlBox );
+			writer.insert( writer.createPositionAt( sideCardView, 'end' ), urlBox );
 		}
 
+		// Inner element used to render simple UI that allows to change side card's attributes.
 		const actionsView = writer.createRawElement( 'div', {
-			class: 'info-box-actions',
+			class: 'side-card-actions',
 			contenteditable: 'false', 			// Prevent editing of the element:
 			'data-cke-ignore-events': 'true'	// Allows using custom UI elements inside editing view.
-		}, renderActionsView( editor, modelElement ) );
+		}, renderActionsView( editor, modelElement ) ); // See the full code for details.
 
-		writer.insert( writer.createPositionAt( complexInfoBoxView, 'end' ), actionsView );
+		writer.insert( writer.createPositionAt( sideCardView, 'end' ), actionsView );
 
-		return toWidget( complexInfoBoxView, writer, {
-			widgetLabel: 'Complex Info Box'
-		} );
+		return toWidget( sideCardView, writer, { widgetLabel: 'Side card' } );
 	};
 };
 
-class ComplexInfoBox {
+class ComplexBox {
 	constructor( editor ) {
 		this._defineSchema( editor );
 		this._defineConversion( editor );
@@ -148,25 +149,25 @@ class ComplexInfoBox {
 
 		conversion.for( 'upcast' )
 			.elementToElement( {
-				view: { name: 'div', classes: [ 'info-box' ] },
-				model: upcastInfoBox
+				view: { name: 'aside', classes: [ 'side-card' ] },
+				model: upcastCard
 			} )
 			.elementToElement( {
-				view: { name: 'div', classes: [ 'info-box-title' ] },
-				model: 'complexInfoBoxTitle'
+				view: { name: 'div', classes: [ 'side-card-title' ] },
+				model: 'sideCardTitle'
 			} )
 			.elementToElement( {
-				view: { name: 'div', classes: [ 'info-box-content' ] },
-				model: 'complexInfoBoxContent'
+				view: { name: 'div', classes: [ 'side-card-section' ] },
+				model: 'sideCardSection'
 			} );
 
 		// The downcast conversion must be split as you need a widget in the editing pipeline.
 		conversion.for( 'downcast' ).elementToElement( {
-			model: 'complexInfoBox',
-			view: downcastInfoBox( editor ),
+			model: 'sideCard',
+			view: downcastSideCard( editor ),
 			triggerBy: {
-				attributes: [ 'infoBoxType', 'infoBoxURL' ],
-				children: [ 'complexInfoBoxContent' ]
+				attributes: [ 'cardType', 'cardURL' ],
+				children: [ 'sideCardSection' ]
 			}
 		} );
 	}
@@ -175,30 +176,30 @@ class ComplexInfoBox {
 		const schema = editor.model.schema;
 
 		// The main element with attributes for type and URL:
-		schema.register( 'complexInfoBox', {
+		schema.register( 'sideCard', {
 			allowWhere: '$block',
 			isObject: true,
-			allowAttributes: [ 'infoBoxType', 'infoBoxURL' ]
+			allowAttributes: [ 'cardType', 'cardURL' ]
 		} );
 
 		// A text-only title.
-		schema.register( 'complexInfoBoxTitle', {
+		schema.register( 'sideCardTitle', {
 			isLimit: true,
-			allowIn: 'complexInfoBox'
+			allowIn: 'sideCard'
 		} );
 		// Allow text in title...
-		schema.extend( '$text', { allowIn: 'complexInfoBoxTitle' } );
+		schema.extend( '$text', { allowIn: 'sideCardTitle' } );
 		// ...but disallow any text attribute inside.
 		schema.addAttributeCheck( context => {
-			if ( context.endsWith( 'complexInfoBoxTitle $text' ) ) {
+			if ( context.endsWith( 'sideCardTitle $text' ) ) {
 				return false;
 			}
 		} );
 
 		// A content block which can have any content allowed in $root.
-		schema.register( 'complexInfoBoxContent', {
+		schema.register( 'sideCardSection', {
 			isLimit: true,
-			allowIn: 'complexInfoBox',
+			allowIn: 'sideCard',
 			allowContentOf: '$root'
 		} );
 	}
@@ -207,7 +208,7 @@ class ComplexInfoBox {
 ClassicEditor
 	.create( document.querySelector( '#editor-element-reconversion' ), {
 		cloudServices: CS_CONFIG,
-		extraPlugins: [ ComplexInfoBox ],
+		extraPlugins: [ ComplexBox ],
 		image: {
 			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
 		},

+ 78 - 63
packages/ckeditor5-engine/docs/framework/guides/deep-dive/element-reconversion.md

@@ -100,78 +100,78 @@ states.
 
 ### Demo
 
-Let's take a look at the below enhanced info box might behave:
-
 {@snippet framework/element-reconversion-demo}
 
-The above demo assumes that each box:
+The above demo creates a side box that:
 
 * Always have a title (text attributes are disallowed).
-* Have 1 to 4 content-boxes that holds any {@link framework/guides/deep-dive/conversion-introduction#inline-and-block-content block
+* Have 1 to 4 sections which can hold any {@link framework/guides/deep-dive/conversion-introduction#inline-and-block-content block
   content}.
 * Is an "info" or "warning" type.
 * Have an optional URL field.
 
-A simplified model markup for the info box looks as follows:
+A simplified model markup for the side card looks as follows:
 
 ```html
-<complexInfoBox infoBoxType="info" infoBoxURL="http://cksource.com">
-	<infoBoxTitle>A title</infoBoxTitle>
-	<infoBoxContent>
+<sideCardSection cardType="info" cardURL="http://cksource.com">
+	<sideCardTitle>A title</sideCardTitle>
+	<sideCardSection>
 		<paragrahp>A content</paragrahp>
-	</infoBoxContent>
-</complexInfoBox>
+	</sideCardSection>
+</sideCard>
 ```
 
 This will be converted to the below view structure:
 
 ```html
-<div class="info-box info-box-info">
-	<div class="info-box-title">A title</div>
-	<div class="info-box-content">
-		<p>A content</p>
+<aside class="side-card side-card-info">
+	<div class="side-card-title">Hey! Did you know?</div>
+	<div class="side-card-section">
+		<p>Editable content of the <strong>side card</strong>.</p>
+	</div>
+	<div class="side-card-section">
+		<p>Another content box.</p>
 	</div>
-	<div class="info-box-url">http://example.com</div>
-	<div class="info-box-actions">
+	<div class="side-card-actions">
 		<!-- simple form elements for the editing view -->
 	</div>
-</div>
+</aside>
 ```
 
-In the above example you can observe that model attribute `'infoBoxURL'` is converted as view element inside the main view container while
+In the above example you can observe that model attribute `'cardURL'` is converted as view element inside the main view container while
 the type attributes is translated to a CSS class. Additionally, UI controls are injected to the view after all other child views of the main
 container. Describing it using atomic converters would introduce convoluted complexity.
 
 ### Schema
 
-The info box model structure is represented in the editor's {@link framework/guides/deep-dive/schema schema} as follows:
+The side card model structure is represented in the editor's {@link framework/guides/deep-dive/schema schema} as follows:
 
 ```js
 // The main element with attributes for type and URL:
-editor.model.schema.register( 'complexInfoBox', {
+editor.model.schema.register( 'sideCard', {
 	allowWhere: '$block',
 	isObject: true,
-	allowAttributes: [ 'infoBoxType', 'infoBoxURL' ]
+	allowAttributes: [ 'cardType', 'cardURL' ]
 } );
 
 // A text-only title.
-editor.model.schema.register( 'complexInfoBoxTitle', {
+editor.model.schema.register( 'sideCardTitle', {
 	isLimit: true,
-	allowIn: 'complexInfoBox'
+	allowIn: 'sideCard'
 } );
 // Allow text in title...
-editor.model.schema.extend( '$text', { allowIn: 'complexInfoBoxTitle' } );
+editor.model.schema.extend( '$text', { allowIn: 'sideCardTitle' } );
 // ...but disallow any text attribute inside.
 editor.model.schema.addAttributeCheck( context => {
-	if ( context.endsWith( 'complexInfoBoxTitle $text' ) ) {
+	if ( context.endsWith( 'sideCardTitle $text' ) ) {
 		return false;
 	}
 } );
 
 // A content block which can have any content allowed in $root.
-editor.model.schema.register( 'complexInfoBoxContent', {
+editor.model.schema.register( 'sideCardSection', {
 	isLimit: true,
-	allowIn: 'complexInfoBox',
+	allowIn: 'sideCard',
 	allowContentOf: '$root'
 } );
 ```
@@ -182,85 +182,100 @@ To enable element reconversion define for which attributes and children modifica
 
 ```js
 editor.conversion.for( 'downcast' ).elementToElement( {
-	model: 'complexInfoBox',
-	view: ( modelElement, conversionApi ) => downcastInfoBox( modelElement, conversionApi ),
+	model: 'sideCard',
+	view: ( modelElement, conversionApi ) => downcastSideCard( modelElement, conversionApi ),
 	triggerBy: {
-		attributes: [ 'infoBoxType', 'infoBoxURL' ],
-		children: [ 'complexInfoBoxContent' ]
+		attributes: [ 'cardType', 'cardURL' ],
+		children: [ 'sideCardSection' ]
 	}
 } );
 ```
 
-The above definition will use `downcastInfoBox()` function to re-create view when:
+The above definition will use `downcastSideCard()` function to re-create view when:
 
 * The `complexInfoBOx` element is inserted into the model.
-* One of `infoBoxType` or `infoBoxURL` has changed.
-* A child `complexInfoBoxContent` is added or removed from the parent `complexInfoBox`.
+* One of `cardType` or `cardURL` has changed.
+* A child `sideCardSection` is added or removed from the parent `sideCard`.
 
 ### Downcast converter details
 
 The function that creates a complete view for the model element:
 
 ```js
-const downcastInfoBox = ( modelElement, { writer, consumable, mapper } ) => {
-	const type = modelElement.getAttribute( 'infoBoxType' ) || 'info';
+const downcastSideCard = ( modelElement, { writer, consumable, mapper } ) => {
+	const type = modelElement.getAttribute( 'cardType' ) || 'info';
 
-	const complexInfoBoxView = writer.createContainerElement( 'div', {
-		class: `info-box info-box-${ type }`
+	const sideCardView = writer.createContainerElement( 'aside', {
+		class: `side-card side-card-${ type }`
 	} );
 
-	// Inner element used to render simple UI that allows to change info box's attributes.
-	const actionsView = writer.createRawElement( 'div', {
-		class: 'info-box-actions',
-		contenteditable: 'false', 			// Prevent editing of the element:
-		// 'data-cke-ignore-events': 'true'	// Allows using custom UI elements inside editing view.
-	}, renderActionsView( editor, modelElement ) ); // See the full code for details.
-
-	writer.insert( writer.createPositionAt( complexInfoBoxView, 'end' ), actionsView );
-
-	// Create inner views from info box children.
+	// Create inner views from side card children.
 	for ( const child of modelElement.getChildren() ) {
-		const childView = writer.createContainerElement( 'div' );
+		const childView = writer.createEditableElement( 'div' );
 
-		// Child is either a "title" or "content".
-		if ( child.is( 'element', 'complexInfoBoxTitle' ) ) {
-			writer.addClass( 'info-box-title', childView );
+		// Child is either a "title" or "section".
+		if ( child.is( 'element', 'sideCardTitle' ) ) {
+			writer.addClass( 'side-card-title', childView );
 		} else {
-			writer.addClass( 'info-box-content', childView );
+			writer.addClass( 'side-card-section', childView );
 		}
 
 		// It is important to consume & bind converted elements.
 		consumable.consume( child, 'insert' );
 		mapper.bindElements( child, childView );
 
-		// Append converted view to parent.
-		writer.insert( writer.createPositionAt( complexInfoBoxView, 'end' ), childView );
+		// Make it an editable part of the widget.
+		toWidgetEditable( childView, writer );
+
+		writer.insert( writer.createPositionAt( sideCardView, 'end' ), childView );
+	}
+
+	const urlAttribute = modelElement.getAttribute( 'cardURL' );
+
+	// Do not render empty URL field
+	if ( urlAttribute ) {
+		const urlBox = writer.createRawElement( 'div', {
+			class: 'side-card-url'
+		}, function( domElement ) {
+			domElement.innerText = `URL: "${ urlAttribute }"`;
+		} );
+
+		writer.insert( writer.createPositionAt( sideCardView, 'end' ), urlBox );
 	}
 
-	return complexInfoBoxView;
+	// Inner element used to render simple UI that allows to change side card's attributes.
+	const actionsView = writer.createRawElement( 'div', {
+		class: 'side-card-actions',
+		contenteditable: 'false', 			// Prevent editing of the element:
+		'data-cke-ignore-events': 'true'	// Allows using custom UI elements inside editing view.
+	}, renderActionsView( editor, modelElement ) ); // See the full code for details.
+
+	writer.insert( writer.createPositionAt( sideCardView, 'end' ), actionsView );
+
+	return toWidget( sideCardView, writer, { widgetLabel: 'Side card' } );
 };
 ```
 
-By using `mapper.bindElements( child, childView )` for `<infoBoxTitle>` and `<infoBoxContent>` you define which view elements corresponds to which model elements. This allows the editor's conversion to re-use existing view elements for title and content children, so they will not be re-converted without a need.
+By using `mapper.bindElements( child, childView )` for `<sideCardTitle>` and `<sideCardSection>` you define which view elements corresponds to which model elements. This allows the editor's conversion to re-use existing view elements for title and section children, so they will not be re-converted without a need.
 
 ### Upcast conversion
 
-The upcast conversion uses standard element-to-element converters for box & title and a custom converter for the info box to extract
+The upcast conversion uses standard element-to-element converters for box & title and a custom converter for the side card to extract
 metadata from the data.
 
 ```js
 editor.conversion.for( 'upcast' )
 	.elementToElement( {
-		view: { name: 'div', classes: [ 'info-box' ] },
+		view: { name: 'aside', classes: [ 'side-card' ] },
 		model: upcastInfoBox
 	} )
 	.elementToElement( {
-		view: { name: 'div', classes: [ 'info-box-title' ] },
-		model: 'complexInfoBoxTitle'
+		view: { name: 'div', classes: [ 'side-card-title' ] },
+		model: 'sideCardTitle'
 	} )
 	.elementToElement( {
-		view: { name: 'div', classes: [ 'info-box-content' ] },
-		model: 'complexInfoBoxContent'
+		view: { name: 'div', classes: [ 'side-card-section' ] },
+		model: 'sideCardSection'
 	} );
 ```