@ckeditor/ckeditor5-engine 36.0.1 → 37.0.0-alpha.0

package/src/conversion/downcasthelpers.js

@@ -14,12 +14,12 @@ import ModelElement from '../model/element';
 import ModelPosition from '../model/position';
 import ViewAttributeElement from '../view/attributeelement';
 import ConversionHelpers from './conversionhelpers';
-import { cloneDeep } from 'lodash-es';
 import { CKEditorError, toArray } from '@ckeditor/ckeditor5-utils';
+import { cloneDeep } from 'lodash-es';
 /**
  * Downcast conversion helper functions.
  *
- * Learn more about {@glink framework/guides/deep-dive/conversion/downcast downcast helpers}.
+ * Learn more about {@glink framework/deep-dive/conversion/downcast downcast helpers}.
  *
  * @extends module:engine/conversion/conversionhelpers~ConversionHelpers
  */
@@ -29,33 +29,35 @@ export default class DowncastHelpers extends ConversionHelpers {
      *
      * This conversion results in creating a view element. For example, model `<paragraph>Foo</paragraph>` becomes `<p>Foo</p>` in the view.
      *
-     *		editor.conversion.for( 'downcast' ).elementToElement( {
-     *			model: 'paragraph',
-     *			view: 'p'
-     *		} );
-     *
-     *		editor.conversion.for( 'downcast' ).elementToElement( {
-     *			model: 'paragraph',
-     *			view: 'div',
-     *			converterPriority: 'high'
-     *		} );
-     *
-     *		editor.conversion.for( 'downcast' ).elementToElement( {
-     *			model: 'fancyParagraph',
-     *			view: {
-     *				name: 'p',
-     *				classes: 'fancy'
-     *			}
-     *		} );
-     *
-     *		editor.conversion.for( 'downcast' ).elementToElement( {
-     *			model: 'heading',
-     *			view: ( modelElement, conversionApi ) => {
-     *				const { writer } = conversionApi;
-     *
-     *				return writer.createContainerElement( 'h' + modelElement.getAttribute( 'level' ) );
-     *			}
-     *		} );
+     * ```ts
+     * editor.conversion.for( 'downcast' ).elementToElement( {
+     * 	model: 'paragraph',
+     * 	view: 'p'
+     * } );
+     *
+     * editor.conversion.for( 'downcast' ).elementToElement( {
+     * 	model: 'paragraph',
+     * 	view: 'div',
+     * 	converterPriority: 'high'
+     * } );
+     *
+     * editor.conversion.for( 'downcast' ).elementToElement( {
+     * 	model: 'fancyParagraph',
+     * 	view: {
+     * 		name: 'p',
+     * 		classes: 'fancy'
+     * 	}
+     * } );
+     *
+     * editor.conversion.for( 'downcast' ).elementToElement( {
+     * 	model: 'heading',
+     * 	view: ( modelElement, conversionApi ) => {
+     * 		const { writer } = conversionApi;
+     *
+     * 		return writer.createContainerElement( 'h' + modelElement.getAttribute( 'level' ) );
+     * 	}
+     * } );
+     * ```
      *
      * The element-to-element conversion supports the reconversion mechanism. It can be enabled by using either the `attributes` or
      * the `children` props on a model description. You will find a couple examples below.
@@ -63,93 +65,108 @@ export default class DowncastHelpers extends ConversionHelpers {
      * In order to reconvert an element if any of its direct children have been added or removed, use the `children` property on a `model`
      * description. For example, this model:
      *
-     *		<box>
-     *			<paragraph>Some text.</paragraph>
-     *		</box>
+     * ```xml
+     * <box>
+     * 	<paragraph>Some text.</paragraph>
+     * </box>
+     * ```
      *
      * will be converted into this structure in the view:
      *
-     *		<div class="box" data-type="single">
-     *			<p>Some text.</p>
-     *		</div>
+     * ```html
+     * <div class="box" data-type="single">
+     * 	<p>Some text.</p>
+     * </div>
+     * ```
      *
      * But if more items were inserted in the model:
      *
-     *		<box>
-     *			<paragraph>Some text.</paragraph>
-     *			<paragraph>Other item.</paragraph>
-     *		</box>
+     * ```xml
+     * <box>
+     * 	<paragraph>Some text.</paragraph>
+     * 	<paragraph>Other item.</paragraph>
+     * </box>
+     * ```
      *
      * it will be converted into this structure in the view (note the element `data-type` change):
      *
-     *		<div class="box" data-type="multiple">
-     *			<p>Some text.</p>
-     *			<p>Other item.</p>
-     *		</div>
+     * ```html
+     * <div class="box" data-type="multiple">
+     * 	<p>Some text.</p>
+     * 	<p>Other item.</p>
+     * </div>
+     * ```
      *
      * Such a converter would look like this (note that the `paragraph` elements are converted separately):
      *
-     *		editor.conversion.for( 'downcast' ).elementToElement( {
-     *			model: {
-     *	 			name: 'box',
-     *	 			children: true
-     *			},
-     *			view: ( modelElement, conversionApi ) => {
-     *				const { writer } = conversionApi;
-     *
-     *				return writer.createContainerElement( 'div', {
-     *					class: 'box',
-     *					'data-type': modelElement.childCount == 1 ? 'single' : 'multiple'
-     *				} );
-     *			}
-     *		} );
+     * ```ts
+     * editor.conversion.for( 'downcast' ).elementToElement( {
+     * 	model: {
+     * 		name: 'box',
+     * 		children: true
+     * 	},
+     * 	view: ( modelElement, conversionApi ) => {
+     * 		const { writer } = conversionApi;
+     *
+     * 		return writer.createContainerElement( 'div', {
+     * 			class: 'box',
+     * 			'data-type': modelElement.childCount == 1 ? 'single' : 'multiple'
+     * 		} );
+     * 	}
+     * } );
+     * ```
      *
      * In order to reconvert element if any of its attributes have been updated, use the `attributes` property on a `model`
      * description. For example, this model:
      *
-     *		<heading level="2">Some text.</heading>
+     * ```xml
+     * <heading level="2">Some text.</heading>
+     * ```
      *
      * will be converted into this structure in the view:
      *
-     *		<h2>Some text.</h2>
+     * ```html
+     * <h2>Some text.</h2>
+     * ```
      *
      * But if the `heading` element's `level` attribute has been updated to `3` for example, then
      * it will be converted into this structure in the view:
      *
-     *		<h3>Some text.</h3>
+     * ```html
+     * <h3>Some text.</h3>
+     * ```
      *
      * Such a converter would look as follows:
      *
-     *		editor.conversion.for( 'downcast' ).elementToElement( {
-     *			model: {
-     *	 			name: 'heading',
-     *	 			attributes: 'level'
-     *			},
-     *			view: ( modelElement, conversionApi ) => {
-     *				const { writer } = conversionApi;
+     * ```ts
+     * editor.conversion.for( 'downcast' ).elementToElement( {
+     * 	model: {
+     * 		name: 'heading',
+     * 		attributes: 'level'
+     * 	},
+     * 	view: ( modelElement, conversionApi ) => {
+     * 		const { writer } = conversionApi;
      *
-     *				return writer.createContainerElement( 'h' + modelElement.getAttribute( 'level' ) );
-     *			}
-     *		} );
+     * 		return writer.createContainerElement( 'h' + modelElement.getAttribute( 'level' ) );
+     * 	}
+     * } );
+     * ```
      *
      * See {@link module:engine/conversion/conversion~Conversion#for `conversion.for()`} to learn how to add a converter
      * to the conversion process.
      *
      * You can read more about the element-to-element conversion in the
-     * {@glink framework/guides/deep-dive/conversion/downcast downcast conversion} guide.
+     * {@glink framework/deep-dive/conversion/downcast downcast conversion} guide.
      *
-     * @method #elementToElement
-     * @param {Object} config Conversion configuration.
-     * @param {String|Object} config.model The description or a name of the model element to convert.
-     * @param {String|Array.<String>} [config.model.attributes] The list of attribute names that should be consumed while creating
+     * @param config Conversion configuration.
+     * @param config.model The description or a name of the model element to convert.
+     * @param config.model.attributes The list of attribute names that should be consumed while creating
      * the view element. Note that the view will be reconverted if any of the listed attributes changes.
-     * @param {Boolean} [config.model.children] Specifies whether the view element requires reconversion if the list
+     * @param config.model.children Specifies whether the view element requires reconversion if the list
      * of the model child nodes changed.
-     * @param {module:engine/view/elementdefinition~ElementDefinition|module:engine/conversion/downcasthelpers~ElementCreatorFunction}
-     * config.view A view element definition or a function that takes the model element and
+     * @param config.view A view element definition or a function that takes the model element and
      * {@link module:engine/conversion/downcastdispatcher~DowncastConversionApi downcast conversion API}
      * as parameters and returns a view container element.
-     * @returns {module:engine/conversion/downcasthelpers~DowncastHelpers}
      */
     elementToElement(config) {
         return this.add(downcastElementToElement(config));
@@ -160,68 +177,80 @@ export default class DowncastHelpers extends ConversionHelpers {
      * This conversion results in creating a view structure with one or more slots defined for the child nodes.
      * For example, a model `<table>` may become this structure in the view:
      *
-     *		<figure class="table">
-     *			<table>
-     *				<tbody>${ slot for table rows }</tbody>
-     *			</table>
-     *		</figure>
+     * ```html
+     * <figure class="table">
+     * 	<table>
+     * 		<tbody>${ slot for table rows }</tbody>
+     * 	</table>
+     * </figure>
+     * ```
      *
      * The children of the model's `<table>` element will be inserted into the `<tbody>` element.
      * If the `elementToElement()` helper was used, the children would be inserted into the `<figure>`.
      *
      * An example converter that converts the following model structure:
      *
-     *		<wrappedParagraph>Some text.</wrappedParagraph>
+     * ```xml
+     * <wrappedParagraph>Some text.</wrappedParagraph>
+     * ```
      *
      * into this structure in the view:
      *
-     *		<div class="wrapper">
-     *			<p>Some text.</p>
-     *		</div>
+     * ```html
+     * <div class="wrapper">
+     * 	<p>Some text.</p>
+     * </div>
+     * ```
      *
      * would look like this:
      *
-     *		editor.conversion.for( 'downcast' ).elementToStructure( {
-     *			model: 'wrappedParagraph',
-     *			view: ( modelElement, conversionApi ) => {
-     *				const { writer } = conversionApi;
+     * ```ts
+     * editor.conversion.for( 'downcast' ).elementToStructure( {
+     * 	model: 'wrappedParagraph',
+     * 	view: ( modelElement, conversionApi ) => {
+     * 		const { writer } = conversionApi;
      *
-     *				const wrapperViewElement = writer.createContainerElement( 'div', { class: 'wrapper' } );
-     *				const paragraphViewElement = writer.createContainerElement( 'p' );
+     * 		const wrapperViewElement = writer.createContainerElement( 'div', { class: 'wrapper' } );
+     * 		const paragraphViewElement = writer.createContainerElement( 'p' );
      *
-     *				writer.insert( writer.createPositionAt( wrapperViewElement, 0 ), paragraphViewElement );
-     *				writer.insert( writer.createPositionAt( paragraphViewElement, 0 ), writer.createSlot() );
+     * 		writer.insert( writer.createPositionAt( wrapperViewElement, 0 ), paragraphViewElement );
+     * 		writer.insert( writer.createPositionAt( paragraphViewElement, 0 ), writer.createSlot() );
      *
-     *				return wrapperViewElement;
-     *			}
-     *		} );
+     * 		return wrapperViewElement;
+     * 	}
+     * } );
+     * ```
      *
      * The `slorFor()` function can also take a callback that allows filtering which children of the model element
      * should be converted into this slot.
      *
      * Imagine a table feature where for this model structure:
      *
-     *		<table headingRows="1">
-     *			<tableRow> ... table cells 1 ... </tableRow>
-     *			<tableRow> ... table cells 2 ... </tableRow>
-     *			<tableRow> ... table cells 3 ... </tableRow>
-     *			<caption>Caption text</caption>
-     *		</table>
+     * ```xml
+     * <table headingRows="1">
+     * 	<tableRow> ... table cells 1 ... </tableRow>
+     * 	<tableRow> ... table cells 2 ... </tableRow>
+     * 	<tableRow> ... table cells 3 ... </tableRow>
+     * 	<caption>Caption text</caption>
+     * </table>
+     * ```
      *
      * we want to generate this view structure:
      *
-     *		<figure class="table">
-     *			<table>
-     *				<thead>
-     *					<tr> ... table cells 1 ... </tr>
-     *				</thead>
-     *				<tbody>
-     *					<tr> ... table cells 2 ... </tr>
-     *					<tr> ... table cells 3 ... </tr>
-     *				</tbody>
-     *			</table>
-     *			<figcaption>Caption text</figcaption>
-     *		</figure>
+     * ```html
+     * <figure class="table">
+     * 	<table>
+     * 		<thead>
+     * 			<tr> ... table cells 1 ... </tr>
+     * 		</thead>
+     * 		<tbody>
+     * 			<tr> ... table cells 2 ... </tr>
+     * 			<tr> ... table cells 3 ... </tr>
+     * 		</tbody>
+     * 	</table>
+     * 	<figcaption>Caption text</figcaption>
+     * </figure>
+     * ```
      *
      * The converter has to take the `headingRows` attribute into consideration when allocating the `<tableRow>` elements
      * into the `<tbody>` and `<thead>` elements. Hence, we need two slots and need to define proper filter callbacks for them.
@@ -231,46 +260,48 @@ export default class DowncastHelpers extends ConversionHelpers {
      *
      * Such a converter would look like this:
      *
-     *		editor.conversion.for( 'downcast' ).elementToStructure( {
-     *			model: {
-     *				name: 'table',
-     *				attributes: [ 'headingRows' ]
-     *			},
-     *			view: ( modelElement, conversionApi ) => {
-     *				const { writer } = conversionApi;
+     * ```ts
+     * editor.conversion.for( 'downcast' ).elementToStructure( {
+     * 	model: {
+     * 		name: 'table',
+     * 		attributes: [ 'headingRows' ]
+     * 	},
+     * 	view: ( modelElement, conversionApi ) => {
+     * 		const { writer } = conversionApi;
      *
-     *				const figureElement = writer.createContainerElement( 'figure', { class: 'table' } );
-     *				const tableElement = writer.createContainerElement( 'table' );
+     * 		const figureElement = writer.createContainerElement( 'figure', { class: 'table' } );
+     * 		const tableElement = writer.createContainerElement( 'table' );
      *
-     *				writer.insert( writer.createPositionAt( figureElement, 0 ), tableElement );
+     * 		writer.insert( writer.createPositionAt( figureElement, 0 ), tableElement );
      *
-     *				const headingRows = modelElement.getAttribute( 'headingRows' ) || 0;
+     * 		const headingRows = modelElement.getAttribute( 'headingRows' ) || 0;
      *
-     *				if ( headingRows > 0 ) {
-     *					const tableHead = writer.createContainerElement( 'thead' );
+     * 		if ( headingRows > 0 ) {
+     * 			const tableHead = writer.createContainerElement( 'thead' );
      *
-     *					const headSlot = writer.createSlot( node => node.is( 'element', 'tableRow' ) && node.index < headingRows );
+     * 			const headSlot = writer.createSlot( node => node.is( 'element', 'tableRow' ) && node.index < headingRows );
      *
-     *					writer.insert( writer.createPositionAt( tableElement, 'end' ), tableHead );
-     *					writer.insert( writer.createPositionAt( tableHead, 0 ), headSlot );
-     *				}
+     * 			writer.insert( writer.createPositionAt( tableElement, 'end' ), tableHead );
+     * 			writer.insert( writer.createPositionAt( tableHead, 0 ), headSlot );
+     * 		}
      *
-     *				if ( headingRows < tableUtils.getRows( table ) ) {
-     *					const tableBody = writer.createContainerElement( 'tbody' );
+     * 		if ( headingRows < tableUtils.getRows( table ) ) {
+     * 			const tableBody = writer.createContainerElement( 'tbody' );
      *
-     *					const bodySlot = writer.createSlot( node => node.is( 'element', 'tableRow' ) && node.index >= headingRows );
+     * 			const bodySlot = writer.createSlot( node => node.is( 'element', 'tableRow' ) && node.index >= headingRows );
      *
-     *					writer.insert( writer.createPositionAt( tableElement, 'end' ), tableBody );
-     *					writer.insert( writer.createPositionAt( tableBody, 0 ), bodySlot );
-     *				}
+     * 			writer.insert( writer.createPositionAt( tableElement, 'end' ), tableBody );
+     * 			writer.insert( writer.createPositionAt( tableBody, 0 ), bodySlot );
+     * 		}
      *
-     *				const restSlot = writer.createSlot( node => !node.is( 'element', 'tableRow' ) );
+     * 		const restSlot = writer.createSlot( node => !node.is( 'element', 'tableRow' ) );
      *
-     *				writer.insert( writer.createPositionAt( figureElement, 'end' ), restSlot );
+     * 		writer.insert( writer.createPositionAt( figureElement, 'end' ), restSlot );
      *
-     *				return figureElement;
-     *			}
-     *		} );
+     * 		return figureElement;
+     * 	}
+     * } );
+     * ```
      *
      * Note: The children of a model element that's being converted must be allocated in the same order in the view
      * in which they are placed in the model.
@@ -278,16 +309,14 @@ export default class DowncastHelpers extends ConversionHelpers {
      * See {@link module:engine/conversion/conversion~Conversion#for `conversion.for()`} to learn how to add a converter
      * to the conversion process.
      *
-     * @method #elementToStructure
-     * @param {Object} config Conversion configuration.
-     * @param {String|Object} config.model The description or a name of the model element to convert.
-     * @param {String} [config.model.name] The name of the model element to convert.
-     * @param {String|Array.<String>} [config.model.attributes] The list of attribute names that should be consumed while creating
+     * @param config Conversion configuration.
+     * @param config.model The description or a name of the model element to convert.
+     * @param config.model.name The name of the model element to convert.
+     * @param config.model.attributes The list of attribute names that should be consumed while creating
      * the view structure. Note that the view will be reconverted if any of the listed attributes will change.
-     * @param {module:engine/conversion/downcasthelpers~StructureCreatorFunction} config.view A function
-     * that takes the model element and {@link module:engine/conversion/downcastdispatcher~DowncastConversionApi downcast
-     * conversion API} as parameters and returns a view container element with slots for model child nodes to be converted into.
-     * @returns {module:engine/conversion/downcasthelpers~DowncastHelpers}
+     * @param config.view A function that takes the model element and
+     * {@link module:engine/conversion/downcastdispatcher~DowncastConversionApi downcast conversion API} as parameters
+     * and returns a view container element with slots for model child nodes to be converted into.
      */
     elementToStructure(config) {
         return this.add(downcastElementToStructure(config));
@@ -298,86 +327,85 @@ export default class DowncastHelpers extends ConversionHelpers {
      * This conversion results in wrapping view nodes with a view attribute element. For example, a model text node with
      * `"Foo"` as data and the `bold` attribute becomes `<strong>Foo</strong>` in the view.
      *
-     *		editor.conversion.for( 'downcast' ).attributeToElement( {
-     *			model: 'bold',
-     *			view: 'strong'
-     *		} );
-     *
-     *		editor.conversion.for( 'downcast' ).attributeToElement( {
-     *			model: 'bold',
-     *			view: 'b',
-     *			converterPriority: 'high'
-     *		} );
-     *
-     *		editor.conversion.for( 'downcast' ).attributeToElement( {
-     *			model: 'invert',
-     *			view: {
-     *				name: 'span',
-     *				classes: [ 'font-light', 'bg-dark' ]
-     *			}
-     *		} );
-     *
-     *		editor.conversion.for( 'downcast' ).attributeToElement( {
-     *			model: {
-     *				key: 'fontSize',
-     *				values: [ 'big', 'small' ]
-     *			},
-     *			view: {
-     *				big: {
-     *					name: 'span',
-     *					styles: {
-     *						'font-size': '1.2em'
-     *					}
-     *				},
-     *				small: {
-     *					name: 'span',
-     *					styles: {
-     *						'font-size': '0.8em'
-     *					}
-     *				}
-     *			}
-     *		} );
-     *
-     *		editor.conversion.for( 'downcast' ).attributeToElement( {
-     *			model: 'bold',
-     *			view: ( modelAttributeValue, conversionApi ) => {
-     *				const { writer } = conversionApi;
-     *
-     *				return writer.createAttributeElement( 'span', {
-     *					style: 'font-weight:' + modelAttributeValue
-     *				} );
-     *			}
-     *		} );
-     *
-     *		editor.conversion.for( 'downcast' ).attributeToElement( {
-     *			model: {
-     *				key: 'color',
-     *				name: '$text'
-     *			},
-     *			view: ( modelAttributeValue, conversionApi ) => {
-     *				const { writer } = conversionApi;
-     *
-     *				return writer.createAttributeElement( 'span', {
-     *					style: 'color:' + modelAttributeValue
-     *				} );
-     *			}
-     *		} );
+     * ```ts
+     * editor.conversion.for( 'downcast' ).attributeToElement( {
+     * 	model: 'bold',
+     * 	view: 'strong'
+     * } );
+     *
+     * editor.conversion.for( 'downcast' ).attributeToElement( {
+     * 	model: 'bold',
+     * 	view: 'b',
+     * 	converterPriority: 'high'
+     * } );
+     *
+     * editor.conversion.for( 'downcast' ).attributeToElement( {
+     * 	model: 'invert',
+     * 	view: {
+     * 		name: 'span',
+     * 		classes: [ 'font-light', 'bg-dark' ]
+     * 	}
+     * } );
+     *
+     * editor.conversion.for( 'downcast' ).attributeToElement( {
+     * 	model: {
+     * 		key: 'fontSize',
+     * 		values: [ 'big', 'small' ]
+     * 	},
+     * 	view: {
+     * 		big: {
+     * 			name: 'span',
+     * 			styles: {
+     * 				'font-size': '1.2em'
+     * 			}
+     * 		},
+     * 		small: {
+     * 			name: 'span',
+     * 			styles: {
+     * 				'font-size': '0.8em'
+     * 			}
+     * 		}
+     * 	}
+     * } );
+     *
+     * editor.conversion.for( 'downcast' ).attributeToElement( {
+     * 	model: 'bold',
+     * 	view: ( modelAttributeValue, conversionApi ) => {
+     * 		const { writer } = conversionApi;
+     *
+     * 		return writer.createAttributeElement( 'span', {
+     * 			style: 'font-weight:' + modelAttributeValue
+     * 		} );
+     * 	}
+     * } );
+     *
+     * editor.conversion.for( 'downcast' ).attributeToElement( {
+     * 	model: {
+     * 		key: 'color',
+     * 		name: '$text'
+     * 	},
+     * 	view: ( modelAttributeValue, conversionApi ) => {
+     * 		const { writer } = conversionApi;
+     *
+     * 		return writer.createAttributeElement( 'span', {
+     * 			style: 'color:' + modelAttributeValue
+     * 		} );
+     * 	}
+     * } );
+     * ```
      *
      * See {@link module:engine/conversion/conversion~Conversion#for `conversion.for()`} to learn how to add a converter
      * to the conversion process.
      *
-     * @method #attributeToElement
-     * @param {Object} config Conversion configuration.
-     * @param {String|Object} config.model The key of the attribute to convert from or a `{ key, values }` object. `values` is an array
+     * @param config Conversion configuration.
+     * @param config.model The key of the attribute to convert from or a `{ key, values }` object. `values` is an array
      * of `String`s with possible values if the model attribute is an enumerable.
-     * @param {module:engine/view/elementdefinition~ElementDefinition|Object|
-     * module:engine/conversion/downcasthelpers~AttributeElementCreatorFunction} config.view A view element definition or a function
+     * @param config.view A view element definition or a function
      * that takes the model attribute value and
      * {@link module:engine/conversion/downcastdispatcher~DowncastConversionApi downcast conversion API} as parameters and returns a view
      * attribute element. If `config.model.values` is given, `config.view` should be an object assigning values from `config.model.values`
      * to view element definitions or functions.
-     * @param {module:utils/priorities~PriorityString} [config.converterPriority='normal'] Converter priority.
-     * @returns {module:engine/conversion/downcasthelpers~DowncastHelpers}
+     * @param config.converterPriority Converter priority.
      */
     attributeToElement(config) {
         return this.add(downcastAttributeToElement(config));
@@ -388,79 +416,80 @@ export default class DowncastHelpers extends ConversionHelpers {
      * This conversion results in adding an attribute to a view node, basing on an attribute from a model node. For example,
      * `<imageInline src='foo.jpg'></imageInline>` is converted to `<img src='foo.jpg'></img>`.
      *
-     *		editor.conversion.for( 'downcast' ).attributeToAttribute( {
-     *			model: 'source',
-     *			view: 'src'
-     *		} );
-     *
-     *		editor.conversion.for( 'downcast' ).attributeToAttribute( {
-     *			model: 'source',
-     *			view: 'href',
-     *			converterPriority: 'high'
-     *		} );
-     *
-     *		editor.conversion.for( 'downcast' ).attributeToAttribute( {
-     *			model: {
-     *				name: 'imageInline',
-     *				key: 'source'
-     *			},
-     *			view: 'src'
-     *		} );
-     *
-     *		editor.conversion.for( 'downcast' ).attributeToAttribute( {
-     *			model: {
-     *				name: 'styled',
-     *				values: [ 'dark', 'light' ]
-     *			},
-     *			view: {
-     *				dark: {
-     *					key: 'class',
-     *					value: [ 'styled', 'styled-dark' ]
-     *				},
-     *				light: {
-     *					key: 'class',
-     *					value: [ 'styled', 'styled-light' ]
-     *				}
-     *			}
-     *		} );
-     *
-     *		editor.conversion.for( 'downcast' ).attributeToAttribute( {
-     *			model: 'styled',
-     *			view: modelAttributeValue => ( {
-     *				key: 'class',
-     *				value: 'styled-' + modelAttributeValue
-     *			} )
-     *		} );
+     * ```ts
+     * editor.conversion.for( 'downcast' ).attributeToAttribute( {
+     * 	model: 'source',
+     * 	view: 'src'
+     * } );
+     *
+     * editor.conversion.for( 'downcast' ).attributeToAttribute( {
+     * 	model: 'source',
+     * 	view: 'href',
+     * 	converterPriority: 'high'
+     * } );
+     *
+     * editor.conversion.for( 'downcast' ).attributeToAttribute( {
+     * 	model: {
+     * 		name: 'imageInline',
+     * 		key: 'source'
+     * 	},
+     * 	view: 'src'
+     * } );
+     *
+     * editor.conversion.for( 'downcast' ).attributeToAttribute( {
+     * 	model: {
+     * 		name: 'styled',
+     * 		values: [ 'dark', 'light' ]
+     * 	},
+     * 	view: {
+     * 		dark: {
+     * 			key: 'class',
+     * 			value: [ 'styled', 'styled-dark' ]
+     * 		},
+     * 		light: {
+     * 			key: 'class',
+     * 			value: [ 'styled', 'styled-light' ]
+     * 		}
+     * 	}
+     * } );
+     *
+     * editor.conversion.for( 'downcast' ).attributeToAttribute( {
+     * 	model: 'styled',
+     * 	view: modelAttributeValue => ( {
+     * 		key: 'class',
+     * 		value: 'styled-' + modelAttributeValue
+     * 	} )
+     * } );
+     * ```
      *
      * **Note**: Downcasting to a style property requires providing `value` as an object:
      *
-     *		editor.conversion.for( 'downcast' ).attributeToAttribute( {
-     *			model: 'lineHeight',
-     *			view: modelAttributeValue => ( {
-     *				key: 'style',
-     *				value: {
-     *					'line-height': modelAttributeValue,
-     *					'border-bottom': '1px dotted #ba2'
-     *				}
-     *			} )
-     *		} );
+     * ```ts
+     * editor.conversion.for( 'downcast' ).attributeToAttribute( {
+     * 	model: 'lineHeight',
+     * 	view: modelAttributeValue => ( {
+     * 		key: 'style',
+     * 		value: {
+     * 			'line-height': modelAttributeValue,
+     * 			'border-bottom': '1px dotted #ba2'
+     * 		}
+     * 	} )
+     * } );
+     * ```
      *
      * See {@link module:engine/conversion/conversion~Conversion#for `conversion.for()`} to learn how to add a converter
      * to the conversion process.
      *
-     * @method #attributeToAttribute
-     * @param {Object} config Conversion configuration.
-     * @param {String|Object} config.model The key of the attribute to convert from or a `{ key, values, [ name ] }` object describing
+     * @param config Conversion configuration.
+     * @param config.model The key of the attribute to convert from or a `{ key, values, [ name ] }` object describing
      * the attribute key, possible values and, optionally, an element name to convert from.
-     * @param {String|Object|module:engine/conversion/downcasthelpers~AttributeCreatorFunction} config.view A view attribute key,
-     * or a `{ key, value }` object or a function that takes the model attribute value and
+     * @param config.view A view attribute key, or a `{ key, value }` object or a function that takes the model attribute value and
      * {@link module:engine/conversion/downcastdispatcher~DowncastConversionApi downcast conversion API}
      * as parameters and returns a `{ key, value }` object. If the `key` is `'class'`, the `value` can be a `String` or an
      * array of `String`s. If the `key` is `'style'`, the `value` is an object with key-value pairs. In other cases, `value` is a `String`.
      * If `config.model.values` is set, `config.view` should be an object assigning values from `config.model.values` to
      * `{ key, value }` objects or a functions.
-     * @param {module:utils/priorities~PriorityString} [config.converterPriority='normal'] Converter priority.
-     * @returns {module:engine/conversion/downcasthelpers~DowncastHelpers}
+     * @param config.converterPriority Converter priority.
      */
     attributeToAttribute(config) {
         return this.add(downcastAttributeToAttribute(config));
@@ -478,38 +507,40 @@ export default class DowncastHelpers extends ConversionHelpers {
      * is collapsed, only one element is created. For example, a model marker set like this: `<paragraph>F[oo b]ar</paragraph>`
      * becomes `<p>F<span data-marker="search"></span>oo b<span data-marker="search"></span>ar</p>` in the view.
      *
-     *		editor.conversion.for( 'editingDowncast' ).markerToElement( {
-     *			model: 'search',
-     *			view: 'marker-search'
-     *		} );
-     *
-     *		editor.conversion.for( 'editingDowncast' ).markerToElement( {
-     *			model: 'search',
-     *			view: 'search-result',
-     *			converterPriority: 'high'
-     *		} );
-     *
-     *		editor.conversion.for( 'editingDowncast' ).markerToElement( {
-     *			model: 'search',
-     *			view: {
-     *				name: 'span',
-     *				attributes: {
-     *					'data-marker': 'search'
-     *				}
-     *			}
-     *		} );
-     *
-     *		editor.conversion.for( 'editingDowncast' ).markerToElement( {
-     *			model: 'search',
-     *			view: ( markerData, conversionApi ) => {
-     *				const { writer } = conversionApi;
-     *
-     *				return writer.createUIElement( 'span', {
-     *					'data-marker': 'search',
-     *					'data-start': markerData.isOpening
-     *				} );
-     *			}
-     *		} );
+     * ```ts
+     * editor.conversion.for( 'editingDowncast' ).markerToElement( {
+     * 	model: 'search',
+     * 	view: 'marker-search'
+     * } );
+     *
+     * editor.conversion.for( 'editingDowncast' ).markerToElement( {
+     * 	model: 'search',
+     * 	view: 'search-result',
+     * 	converterPriority: 'high'
+     * } );
+     *
+     * editor.conversion.for( 'editingDowncast' ).markerToElement( {
+     * 	model: 'search',
+     * 	view: {
+     * 		name: 'span',
+     * 		attributes: {
+     * 			'data-marker': 'search'
+     * 		}
+     * 	}
+     * } );
+     *
+     * editor.conversion.for( 'editingDowncast' ).markerToElement( {
+     * 	model: 'search',
+     * 	view: ( markerData, conversionApi ) => {
+     * 		const { writer } = conversionApi;
+     *
+     * 		return writer.createUIElement( 'span', {
+     * 			'data-marker': 'search',
+     * 			'data-start': markerData.isOpening
+     * 		} );
+     * 	}
+     * } );
+     * ```
      *
      * If a function is passed as the `config.view` parameter, it will be used to generate both boundary elements. The function
      * receives the `data` object and {@link module:engine/conversion/downcastdispatcher~DowncastConversionApi downcast conversion API}
@@ -523,14 +554,12 @@ export default class DowncastHelpers extends ConversionHelpers {
      * See {@link module:engine/conversion/conversion~Conversion#for `conversion.for()`} to learn how to add a converter
      * to the conversion process.
      *
-     * @method #markerToElement
-     * @param {Object} config Conversion configuration.
-     * @param {String} config.model The name of the model marker (or model marker group) to convert.
-     * @param {module:engine/view/elementdefinition~ElementDefinition|Function} config.view A view element definition or a function that
-     * takes the model marker data and {@link module:engine/conversion/downcastdispatcher~DowncastConversionApi downcast conversion API}
-     * as a parameters and returns a view UI element.
-     * @param {module:utils/priorities~PriorityString} [config.converterPriority='normal'] Converter priority.
-     * @returns {module:engine/conversion/downcasthelpers~DowncastHelpers}
+     * @param config Conversion configuration.
+     * @param config.model The name of the model marker (or model marker group) to convert.
+     * @param config.view A view element definition or a function that takes the model marker data and
+     * {@link module:engine/conversion/downcastdispatcher~DowncastConversionApi downcast conversion API} as a parameters
+     * and returns a view UI element.
+     * @param config.converterPriority Converter priority.
      */
     markerToElement(config) {
         return this.add(downcastMarkerToElement(config));
@@ -554,26 +583,28 @@ export default class DowncastHelpers extends ConversionHelpers {
      * to a container element, it is the container element instance itself that applies values from the highlight descriptor.
      * So, in a sense, the converter takes care of stating what should be applied on what, while the element decides how to apply that.
      *
-     *		editor.conversion.for( 'downcast' ).markerToHighlight( { model: 'comment', view: { classes: 'comment' } } );
-     *
-     *		editor.conversion.for( 'downcast' ).markerToHighlight( {
-     *			model: 'comment',
-     *			view: { classes: 'comment' },
-     *			converterPriority: 'high'
-     *		} );
-     *
-     *		editor.conversion.for( 'downcast' ).markerToHighlight( {
-     *			model: 'comment',
-     *			view: ( data, conversionApi ) => {
-     *				// Assuming that the marker name is in a form of comment:commentType:commentId.
-     *				const [ , commentType, commentId ] = data.markerName.split( ':' );
-     *
-     *				return {
-     *					classes: [ 'comment', 'comment-' + commentType ],
-     *					attributes: { 'data-comment-id': commentId }
-     *				};
-     *			}
-     *		} );
+     * ```ts
+     * editor.conversion.for( 'downcast' ).markerToHighlight( { model: 'comment', view: { classes: 'comment' } } );
+     *
+     * editor.conversion.for( 'downcast' ).markerToHighlight( {
+     * 	model: 'comment',
+     * 	view: { classes: 'comment' },
+     * 	converterPriority: 'high'
+     * } );
+     *
+     * editor.conversion.for( 'downcast' ).markerToHighlight( {
+     * 	model: 'comment',
+     * 	view: ( data, conversionApi ) => {
+     * 		// Assuming that the marker name is in a form of comment:commentType:commentId.
+     * 		const [ , commentType, commentId ] = data.markerName.split( ':' );
+     *
+     * 		return {
+     * 			classes: [ 'comment', 'comment-' + commentType ],
+     * 			attributes: { 'data-comment-id': commentId }
+     * 		};
+     * 	}
+     * } );
+     * ```
      *
      * If a function is passed as the `config.view` parameter, it will be used to generate the highlight descriptor. The function
      * receives the `data` object and {@link module:engine/conversion/downcastdispatcher~DowncastConversionApi downcast conversion API}
@@ -584,15 +615,12 @@ export default class DowncastHelpers extends ConversionHelpers {
      * See {@link module:engine/conversion/conversion~Conversion#for `conversion.for()`} to learn how to add a converter
      * to the conversion process.
      *
-     * @method #markerToHighlight
-     * @param {Object} config Conversion configuration.
-     * @param {String} config.model The name of the model marker (or model marker group) to convert.
-     * @param {module:engine/conversion/downcasthelpers~HighlightDescriptor|Function} config.view A highlight descriptor
-     * that will be used for highlighting or a function that takes the model marker data and
+     * @param config Conversion configuration.
+     * @param config.model The name of the model marker (or model marker group) to convert.
+     * @param config.view A highlight descriptor that will be used for highlighting or a function that takes the model marker data and
      * {@link module:engine/conversion/downcastdispatcher~DowncastConversionApi downcast conversion API} as a parameters
      * and returns a highlight descriptor.
-     * @param {module:utils/priorities~PriorityString} [config.converterPriority='normal'] Converter priority.
-     * @returns {module:engine/conversion/downcasthelpers~DowncastHelpers}
+     * @param config.converterPriority Converter priority.
      */
     markerToHighlight(config) {
         return this.add(downcastMarkerToHighlight(config));
@@ -625,87 +653,97 @@ export default class DowncastHelpers extends ConversionHelpers {
      *
      * Basic usage:
      *
-     *		// Using the default conversion.
-     *		// In this case, all markers with names starting with 'comment:' will be converted.
-     *		// The `group` parameter will be set to `comment`.
-     *		// The `name` parameter will be the rest of the marker name (without the `:`).
-     *		editor.conversion.for( 'dataDowncast' ).markerToData( {
-     *			model: 'comment'
-     *		} );
+     * ```ts
+     * // Using the default conversion.
+     * // In this case, all markers with names starting with 'comment:' will be converted.
+     * // The `group` parameter will be set to `comment`.
+     * // The `name` parameter will be the rest of the marker name (without the `:`).
+     * editor.conversion.for( 'dataDowncast' ).markerToData( {
+     * 	model: 'comment'
+     * } );
+     * ```
      *
      * An example of a view that may be generated by this conversion (assuming a marker with the name `comment:commentId:uid` marked
      * by `[]`):
      *
-     *		// Model:
-     *		<paragraph>Foo[bar</paragraph>
-     *		<imageBlock src="abc.jpg"></imageBlock>]
+     * ```
+     * // Model:
+     * <paragraph>Foo[bar</paragraph>
+     * <imageBlock src="abc.jpg"></imageBlock>]
      *
-     *		// View:
-     *		<p>Foo<comment-start name="commentId:uid"></comment-start>bar</p>
-     *		<figure data-comment-end-after="commentId:uid" class="image"><img src="abc.jpg" /></figure>
+     * // View:
+     * <p>Foo<comment-start name="commentId:uid"></comment-start>bar</p>
+     * <figure data-comment-end-after="commentId:uid" class="image"><img src="abc.jpg" /></figure>
+     * ```
      *
      * In the example above, the comment starts before "bar" and ends after the image.
      *
      * If the `name` part is empty, the following view may be generated:
      *
-     *		<p>Foo <myMarker-start></myMarker-start>bar</p>
-     *		<figure data-myMarker-end-after="" class="image"><img src="abc.jpg" /></figure>
+     * ```html
+     * <p>Foo <myMarker-start></myMarker-start>bar</p>
+     * <figure data-myMarker-end-after="" class="image"><img src="abc.jpg" /></figure>
+     * ```
      *
      * **Note:** A situation where some markers have the `name` part and some do not, is incorrect and should be avoided.
      *
      * Examples where `data-group-start-after` and `data-group-end-before` are used:
      *
-     *		// Model:
-     *		<blockQuote>[]<paragraph>Foo</paragraph></blockQuote>
+     * ```
+     * // Model:
+     * <blockQuote>[]<paragraph>Foo</paragraph></blockQuote>
      *
-     *		// View:
-     *		<blockquote><p data-group-end-before="name" data-group-start-before="name">Foo</p></blockquote>
+     * // View:
+     * <blockquote><p data-group-end-before="name" data-group-start-before="name">Foo</p></blockquote>
+     * ```
      *
      * Similarly, when a marker is collapsed after the last element:
      *
-     *		// Model:
-     *		<blockQuote><paragraph>Foo</paragraph>[]</blockQuote>
+     * ```
+     * // Model:
+     * <blockQuote><paragraph>Foo</paragraph>[]</blockQuote>
      *
-     *		// View:
-     *		<blockquote><p data-group-end-after="name" data-group-start-after="name">Foo</p></blockquote>
+     * // View:
+     * <blockquote><p data-group-end-after="name" data-group-start-after="name">Foo</p></blockquote>
+     * ```
      *
      * When there are multiple markers from the same group stored in the same attribute of the same element, their
      * name parts are put together in the attribute value, for example: `data-group-start-before="name1,name2,name3"`.
      *
      * Other examples of usage:
      *
-     *		// Using a custom function which is the same as the default conversion:
-     *		editor.conversion.for( 'dataDowncast' ).markerToData( {
-     *			model: 'comment'
-     *			view: markerName => ( {
-     *				group: 'comment',
-     *				name: markerName.substr( 8 ) // Removes 'comment:' part.
-     *			} )
-     *		} );
-     *
-     *		// Using the converter priority:
-     *		editor.conversion.for( 'dataDowncast' ).markerToData( {
-     *			model: 'comment'
-     *			view: markerName => ( {
-     *				group: 'comment',
-     *				name: markerName.substr( 8 ) // Removes 'comment:' part.
-     *			} ),
-     *			converterPriority: 'high'
-     *		} );
+     * ```ts
+     * // Using a custom function which is the same as the default conversion:
+     * editor.conversion.for( 'dataDowncast' ).markerToData( {
+     * 	model: 'comment'
+     * 	view: markerName => ( {
+     * 		group: 'comment',
+     * 		name: markerName.substr( 8 ) // Removes 'comment:' part.
+     * 	} )
+     * } );
+     *
+     * // Using the converter priority:
+     * editor.conversion.for( 'dataDowncast' ).markerToData( {
+     * 	model: 'comment'
+     * 	view: markerName => ( {
+     * 		group: 'comment',
+     * 		name: markerName.substr( 8 ) // Removes 'comment:' part.
+     * 	} ),
+     * 	converterPriority: 'high'
+     * } );
+     * ```
      *
      * This kind of conversion is useful for saving data into the database, so it should be used in the data conversion pipeline.
      *
      * See the {@link module:engine/conversion/conversion~Conversion#for `conversion.for()`} API guide to learn how to
      * add a converter to the conversion process.
      *
-     * @method #markerToData
-     * @param {Object} config Conversion configuration.
-     * @param {String} config.model The name of the model marker (or the model marker group) to convert.
-     * @param {Function} [config.view] A function that takes the model marker name and
+     * @param config Conversion configuration.
+     * @param config.model The name of the model marker (or the model marker group) to convert.
+     * @param config.view A function that takes the model marker name and
      * {@link module:engine/conversion/downcastdispatcher~DowncastConversionApi downcast conversion API} as the parameters
      * and returns an object with the `group` and `name` properties.
-     * @param {module:utils/priorities~PriorityString} [config.converterPriority='normal'] Converter priority.
-     * @returns {module:engine/conversion/downcasthelpers~DowncastHelpers}
+     * @param config.converterPriority Converter priority.
      */
     markerToData(config) {
         return this.add(downcastMarkerToData(config));
@@ -717,9 +755,11 @@ export default class DowncastHelpers extends ConversionHelpers {
  * The converter automatically consumes the corresponding value from the consumables list and stops the event (see
  * {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher}).
  *
- *		modelDispatcher.on( 'insert:$text', insertText() );
+ * ```ts
+ * modelDispatcher.on( 'insert:$text', insertText() );
+ * ```
  *
- * @returns {Function} Insert text event converter.
+ * @returns Insert text event converter.
  */
 export function insertText() {
     return (evt, data, conversionApi) => {
@@ -735,7 +775,7 @@ export function insertText() {
 /**
  * Function factory that creates a default downcast converter for triggering attributes and children conversion.
  *
- * @returns {Function} The converter.
+ * @returns The converter.
  */
 export function insertAttributesAndChildren() {
     return (evt, data, conversionApi) => {
@@ -750,9 +790,11 @@ export function insertAttributesAndChildren() {
 /**
  * Function factory that creates a default downcast converter for node remove changes.
  *
- *		modelDispatcher.on( 'remove', remove() );
+ * ```ts
+ * modelDispatcher.on( 'remove', remove() );
+ * ```
  *
- * @returns {Function} Remove event converter.
+ * @returns Remove event converter.
  */
 export function remove() {
     return (evt, data, conversionApi) => {
@@ -774,10 +816,6 @@ export function remove() {
  * Creates a `<span>` {@link module:engine/view/attributeelement~AttributeElement view attribute element} from the information
  * provided by the {@link module:engine/conversion/downcasthelpers~HighlightDescriptor highlight descriptor} object. If the priority
  * is not provided in the descriptor, the default priority will be used.
- *
- * @param {module:engine/view/downcastwriter~DowncastWriter} writer
- * @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} descriptor
- * @returns {module:engine/view/attributeelement~AttributeElement}
  */
 export function createViewElementFromHighlightDescriptor(writer, descriptor) {
     const viewElement = writer.createAttributeElement('span', descriptor.attributes);
@@ -795,9 +833,11 @@ export function createViewElementFromHighlightDescriptor(writer, descriptor) {
  * to a {@link module:engine/view/documentselection~DocumentSelection view selection}. The converter consumes appropriate
  * value from the `consumable` object and maps model positions from the selection to view positions.
  *
- *		modelDispatcher.on( 'selection', convertRangeSelection() );
+ * ```ts
+ * modelDispatcher.on( 'selection', convertRangeSelection() );
+ * ```
  *
- * @returns {Function} Selection converter.
+ * @returns Selection converter.
  */
 export function convertRangeSelection() {
     return (evt, data, conversionApi) => {
@@ -821,12 +861,16 @@ export function convertRangeSelection() {
  * value from the `consumable` object, maps the model selection position to the view position and breaks
  * {@link module:engine/view/attributeelement~AttributeElement attribute elements} at the selection position.
  *
- *		modelDispatcher.on( 'selection', convertCollapsedSelection() );
+ * ```ts
+ * modelDispatcher.on( 'selection', convertCollapsedSelection() );
+ * ```
  *
  * An example of the view state before and after converting the collapsed selection:
  *
- *		   <p><strong>f^oo<strong>bar</p>
- *		-> <p><strong>f</strong>^<strong>oo</strong>bar</p>
+ * ```
+ *    <p><strong>f^oo<strong>bar</p>
+ * -> <p><strong>f</strong>^<strong>oo</strong>bar</p>
+ * ```
  *
  * By breaking attribute elements like `<strong>`, the selection is in a correct element. Then, when the selection attribute is
  * converted, broken attributes might be merged again, or the position where the selection is may be wrapped
@@ -835,7 +879,7 @@ export function convertRangeSelection() {
  * See also {@link module:engine/conversion/downcasthelpers~clearAttributes} which does a clean-up
  * by merging attributes.
  *
- * @returns {Function} Selection converter.
+ * @returns Selection converter.
  */
 export function convertCollapsedSelection() {
     return (evt, data, conversionApi) => {
@@ -859,23 +903,27 @@ export function convertCollapsedSelection() {
  * {@link module:engine/view/attributeelement~AttributeElement view attribute elements} and merges sibling attributes at all start and end
  * positions of all ranges.
  *
- *		   <p><strong>^</strong></p>
- *		-> <p>^</p>
+ * ```
+ *    <p><strong>^</strong></p>
+ * -> <p>^</p>
  *
- *		   <p><strong>foo</strong>^<strong>bar</strong>bar</p>
- *		-> <p><strong>foo^bar<strong>bar</p>
+ *    <p><strong>foo</strong>^<strong>bar</strong>bar</p>
+ * -> <p><strong>foo^bar<strong>bar</p>
  *
- *		   <p><strong>foo</strong><em>^</em><strong>bar</strong>bar</p>
- *		-> <p><strong>foo^bar<strong>bar</p>
+ *    <p><strong>foo</strong><em>^</em><strong>bar</strong>bar</p>
+ * -> <p><strong>foo^bar<strong>bar</p>
+ * ```
  *
  * This listener should be assigned before any converter for the new selection:
  *
- *		modelDispatcher.on( 'selection', clearAttributes() );
+ * ```ts
+ * modelDispatcher.on( 'selection', clearAttributes() );
+ * ```
  *
  * See {@link module:engine/conversion/downcasthelpers~convertCollapsedSelection}
  * which does the opposite by breaking attributes in the selection position.
  *
- * @returns {Function} Selection converter.
+ * @returns Selection converter.
  */
 export function clearAttributes() {
     return (evt, data, conversionApi) => {
@@ -902,10 +950,12 @@ export function clearAttributes() {
  * model elements having the given attribute. This is useful for attributes like `bold` that may be set on text nodes in the model
  * but are represented as an element in the view:
  *
- *		[paragraph]              MODEL ====> VIEW        <p>
- *			|- a {bold: true}                             |- <b>
- *			|- b {bold: true}                             |   |- ab
- *			|- c                                          |- c
+ * ```
+ * [paragraph]              MODEL ====> VIEW        <p>
+ * 	|- a {bold: true}                             |- <b>
+ * 	|- b {bold: true}                             |   |- ab
+ * 	|- c                                          |- c
+ * 	```
  *
  * Passed `Function` will be provided with the attribute value and then all the parameters of the
  * {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute `attribute` event}.
@@ -916,13 +966,15 @@ export function clearAttributes() {
  * The converter automatically consumes the corresponding value from the consumables list and stops the event (see
  * {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher}).
  *
- *		modelDispatcher.on( 'attribute:bold', wrap( ( modelAttributeValue, { writer } ) => {
- *			return writer.createAttributeElement( 'strong' );
- *		} );
+ * ```ts
+ * modelDispatcher.on( 'attribute:bold', wrap( ( modelAttributeValue, { writer } ) => {
+ * 	return writer.createAttributeElement( 'strong' );
+ * } );
+ * ```
  *
- * @protected
- * @param {Function} elementCreator Function returning a view element that will be used for wrapping.
- * @returns {Function} Set/change attribute converter.
+ * @internal
+ * @param elementCreator Function returning a view element that will be used for wrapping.
+ * @returns Set/change attribute converter.
  */
 export function wrap(elementCreator) {
     return (evt, data, conversionApi) => {
@@ -966,23 +1018,25 @@ export function wrap(elementCreator) {
  *
  * The converter automatically consumes the corresponding value from the consumables list and binds the model and view elements.
  *
- *		downcastDispatcher.on(
- *			'insert:myElem',
- *			insertElement( ( modelItem, { writer } ) => {
- *				const text = writer.createText( 'myText' );
- *				const myElem = writer.createElement( 'myElem', { myAttr: 'my-' + modelItem.getAttribute( 'myAttr' ) }, text );
+ * ```ts
+ * downcastDispatcher.on(
+ * 	'insert:myElem',
+ * 	insertElement( ( modelItem, { writer } ) => {
+ * 		const text = writer.createText( 'myText' );
+ * 		const myElem = writer.createElement( 'myElem', { myAttr: 'my-' + modelItem.getAttribute( 'myAttr' ) }, text );
  *
- *				// Do something fancy with `myElem` using `modelItem` or other parameters.
+ * 		// Do something fancy with `myElem` using `modelItem` or other parameters.
  *
- *				return myElem;
- *			}
- *		) );
+ * 		return myElem;
+ * 	}
+ * ) );
+ * ```
  *
- * @protected
- * @param {Function} elementCreator Function returning a view element, which will be inserted.
- * @param {module:engine/conversion/downcasthelpers~ConsumerFunction} [consumer] Function defining element consumption process.
+ * @internal
+ * @param  elementCreator Function returning a view element, which will be inserted.
+ * @param consumer Function defining element consumption process.
  * By default this function just consume passed item insertion.
- * @returns {Function} Insert element event converter.
+ * @returns Insert element event converter.
  */
 export function insertElement(elementCreator, consumer = defaultConsumer) {
     return (evt, data, conversionApi) => {
@@ -1012,12 +1066,11 @@ export function insertElement(elementCreator, consumer = defaultConsumer) {
  *
  * @see module:engine/conversion/downcasthelpers~DowncastHelpers#elementToStructure
  *
- * @protected
- * @param {module:engine/conversion/downcasthelpers~StructureCreatorFunction} elementCreator Function returning a view structure,
- * which will be inserted.
- * @param {module:engine/conversion/downcasthelpers~ConsumerFunction} consumer A callback that is expected to consume all the consumables
+ * @internal
+ * @param elementCreator Function returning a view structure, which will be inserted.
+ * @param consumer A callback that is expected to consume all the consumables
  * that were used by the element creator.
- * @returns {Function} Insert element event converter.
+ * @returns Insert element event converter.
 */
 export function insertStructure(elementCreator, consumer) {
     return (evt, data, conversionApi) => {
@@ -1055,10 +1108,9 @@ export function insertStructure(elementCreator, consumer) {
  *
  * This converter binds created UI elements with the marker name using {@link module:engine/conversion/mapper~Mapper#bindElementToMarker}.
  *
- * @protected
- * @param {module:engine/view/uielement~UIElement|Function} elementCreator A view UI element or a function returning the view element
- * that will be inserted.
- * @returns {Function} Insert element event converter.
+ * @internal
+ * @param elementCreator A view UI element or a function returning the view element that will be inserted.
+ * @returns Insert element event converter.
  */
 export function insertUIElement(elementCreator) {
     return (evt, data, conversionApi) => {
@@ -1097,12 +1149,14 @@ export function insertUIElement(elementCreator) {
         evt.stop();
     };
 }
-// Function factory that returns a default downcast converter for removing a {@link module:engine/view/uielement~UIElement UI element}
-// based on marker remove change.
-//
-// This converter unbinds elements from the marker name.
-//
-// @returns {Function} Removed UI element converter.
+/**
+ * Function factory that returns a default downcast converter for removing a {@link module:engine/view/uielement~UIElement UI element}
+ * based on marker remove change.
+ *
+ * This converter unbinds elements from the marker name.
+ *
+ * @returns Removed UI element converter.
+ */
 function removeUIElement() {
     return (evt, data, conversionApi) => {
         const elements = conversionApi.mapper.markerNameToElements(data.markerName);
@@ -1117,14 +1171,16 @@ function removeUIElement() {
         evt.stop();
     };
 }
-// Function factory that creates a default converter for model markers.
-//
-// See {@link DowncastHelpers#markerToData} for more information what type of view is generated.
-//
-// This converter binds created UI elements and affected view elements with the marker name
-// using {@link module:engine/conversion/mapper~Mapper#bindElementToMarker}.
-//
-// @returns {Function} Add marker converter.
+/**
+ * Function factory that creates a default converter for model markers.
+ *
+ * See {@link DowncastHelpers#markerToData} for more information what type of view is generated.
+ *
+ * This converter binds created UI elements and affected view elements with the marker name
+ * using {@link module:engine/conversion/mapper~Mapper#bindElementToMarker}.
+ *
+ * @returns Add marker converter.
+ */
 function insertMarkerData(viewCreator) {
     return (evt, data, conversionApi) => {
         const viewMarkerData = viewCreator(data.markerName, conversionApi);
@@ -1141,7 +1197,9 @@ function insertMarkerData(viewCreator) {
         evt.stop();
     };
 }
-// Helper function for `insertMarkerData()` that marks a marker boundary at the beginning or end of given `range`.
+/**
+ * Helper function for `insertMarkerData()` that marks a marker boundary at the beginning or end of given `range`.
+ */
 function handleMarkerBoundary(range, isStart, conversionApi, data, viewMarkerData) {
     const modelPosition = isStart ? range.start : range.end;
     const elementAfter = modelPosition.nodeAfter && modelPosition.nodeAfter.is('element') ? modelPosition.nodeAfter : null;
@@ -1173,7 +1231,9 @@ function handleMarkerBoundary(range, isStart, conversionApi, data, viewMarkerDat
     const viewPosition = conversionApi.mapper.toViewPosition(modelPosition);
     insertMarkerAsElement(viewPosition, isStart, conversionApi, data, viewMarkerData);
 }
-// Helper function for `insertMarkerData()` that marks a marker boundary in the view as an attribute on a view element.
+/**
+ * Helper function for `insertMarkerData()` that marks a marker boundary in the view as an attribute on a view element.
+ */
 function insertMarkerAsAttribute(viewElement, isStart, isBefore, conversionApi, data, viewMarkerData) {
     const attributeName = `data-${viewMarkerData.group}-${isStart ? 'start' : 'end'}-${isBefore ? 'before' : 'after'}`;
     const markerNames = viewElement.hasAttribute(attributeName) ? viewElement.getAttribute(attributeName).split(',') : [];
@@ -1182,7 +1242,9 @@ function insertMarkerAsAttribute(viewElement, isStart, isBefore, conversionApi,
     conversionApi.writer.setAttribute(attributeName, markerNames.join(','), viewElement);
     conversionApi.mapper.bindElementToMarker(viewElement, data.markerName);
 }
-// Helper function for `insertMarkerData()` that marks a marker boundary in the view as a separate view ui element.
+/**
+ * Helper function for `insertMarkerData()` that marks a marker boundary in the view as a separate view ui element.
+ */
 function insertMarkerAsElement(position, isStart, conversionApi, data, viewMarkerData) {
     const viewElementName = `${viewMarkerData.group}-${isStart ? 'start' : 'end'}`;
     const attrs = viewMarkerData.name ? { 'name': viewMarkerData.name } : null;
@@ -1190,9 +1252,11 @@ function insertMarkerAsElement(position, isStart, conversionApi, data, viewMarke
     conversionApi.writer.insert(position, viewElement);
     conversionApi.mapper.bindElementToMarker(viewElement, data.markerName);
 }
-// Function factory that creates a converter for removing a model marker data added by the {@link #insertMarkerData} converter.
-//
-// @returns {Function} Remove marker converter.
+/**
+ * Function factory that creates a converter for removing a model marker data added by the {@link #insertMarkerData} converter.
+ *
+ * @returns Remove marker converter.
+ */
 function removeMarkerData(viewCreator) {
     return (evt, data, conversionApi) => {
         const viewData = viewCreator(data.markerName, conversionApi);
@@ -1231,35 +1295,39 @@ function removeMarkerData(viewCreator) {
         }
     };
 }
-// Function factory that creates a converter which converts the set/change/remove attribute changes from the model to the view.
-//
-// Attributes from the model are converted to the view element attributes in the view. You may provide a custom function to generate
-// a key-value attribute pair to add/change/remove. If not provided, model attributes will be converted to view element
-// attributes on a one-to-one basis.
-//
-// *Note:** The provided attribute creator should always return the same `key` for a given attribute from the model.
-//
-// The converter automatically consumes the corresponding value from the consumables list and stops the event (see
-// {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher}).
-//
-//		modelDispatcher.on( 'attribute:customAttr:myElem', changeAttribute( ( value, data ) => {
-//			// Change attribute key from `customAttr` to `class` in the view.
-//			const key = 'class';
-//			let value = data.attributeNewValue;
-//
-//			// Force attribute value to 'empty' if the model element is empty.
-//			if ( data.item.childCount === 0 ) {
-//				value = 'empty';
-//			}
-//
-//			// Return the key-value pair.
-//			return { key, value };
-//		} ) );
-//
-// @param {Function} [attributeCreator] Function returning an object with two properties: `key` and `value`, which
-// represent the attribute key and attribute value to be set on a {@link module:engine/view/element~Element view element}.
-// The function is passed the model attribute value as the first parameter and additional data about the change as the second parameter.
-// @returns {Function} Set/change attribute converter.
+/**
+ * Function factory that creates a converter which converts the set/change/remove attribute changes from the model to the view.
+ *
+ * Attributes from the model are converted to the view element attributes in the view. You may provide a custom function to generate
+ * a key-value attribute pair to add/change/remove. If not provided, model attributes will be converted to view element
+ * attributes on a one-to-one basis.
+ *
+ * *Note:** The provided attribute creator should always return the same `key` for a given attribute from the model.
+ *
+ * The converter automatically consumes the corresponding value from the consumables list and stops the event (see
+ * {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher}).
+ *
+ * ```ts
+ * modelDispatcher.on( 'attribute:customAttr:myElem', changeAttribute( ( value, data ) => {
+ * 	// Change attribute key from `customAttr` to `class` in the view.
+ * 	const key = 'class';
+ * 	let value = data.attributeNewValue;
+ *
+ * 	// Force attribute value to 'empty' if the model element is empty.
+ * 	if ( data.item.childCount === 0 ) {
+ * 		value = 'empty';
+ * 	}
+ *
+ * 	// Return the key-value pair.
+ * 	return { key, value };
+ * } ) );
+ * ```
+ *
+ * @param attributeCreator Function returning an object with two properties: `key` and `value`, which
+ * represent the attribute key and attribute value to be set on a {@link module:engine/view/element~Element view element}.
+ * The function is passed the model attribute value as the first parameter and additional data about the change as the second parameter.
+ * @returns Set/change attribute converter.
+ */
 function changeAttribute(attributeCreator) {
     return (evt, data, conversionApi) => {
         if (!conversionApi.consumable.test(data.item, evt.name)) {
@@ -1281,32 +1349,38 @@ function changeAttribute(attributeCreator) {
              * by an {@link module:engine/conversion/conversion~Conversion#attributeToAttribute `Attribute to Attribute converter`}.
              * In most cases it is caused by converters misconfiguration when only "generic" converter is defined:
              *
-             *		editor.conversion.for( 'downcast' ).attributeToAttribute( {
-             *			model: 'attribute-name',
-             *			view: 'attribute-name'
-             *		} ) );
+             * ```ts
+             * editor.conversion.for( 'downcast' ).attributeToAttribute( {
+             * 	model: 'attribute-name',
+             * 	view: 'attribute-name'
+             * } ) );
+             * ```
              *
              * and given attribute is used on text node, for example:
              *
-             *		model.change( writer => {
-             *			writer.insertText( 'Foo', { 'attribute-name': 'bar' }, parent, 0 );
-             *		} );
+             * ```ts
+             * model.change( writer => {
+             * 	writer.insertText( 'Foo', { 'attribute-name': 'bar' }, parent, 0 );
+             * } );
+             * ```
              *
              * In such cases, to convert the same attribute for both {@link module:engine/model/element~Element}
              * and {@link module:engine/model/textproxy~TextProxy `Text`} nodes, text specific
              * {@link module:engine/conversion/conversion~Conversion#attributeToElement `Attribute to Element converter`}
              * with higher {@link module:utils/priorities~PriorityString priority} must also be defined:
              *
-             *		editor.conversion.for( 'downcast' ).attributeToElement( {
-             *			model: {
-             *				key: 'attribute-name',
-             *				name: '$text'
-             *			},
-             *			view: ( value, { writer } ) => {
-             *				return writer.createAttributeElement( 'span', { 'attribute-name': value } );
-             *			},
-             *			converterPriority: 'high'
-             *		} ) );
+             * ```ts
+             * editor.conversion.for( 'downcast' ).attributeToElement( {
+             * 	model: {
+             * 		key: 'attribute-name',
+             * 		name: '$text'
+             * 	},
+             * 	view: ( value, { writer } ) => {
+             * 		return writer.createAttributeElement( 'span', { 'attribute-name': value } );
+             * 	},
+             * 	converterPriority: 'high'
+             * } ) );
+             * ```
              *
              * @error conversion-attribute-to-attribute-on-text
              */
@@ -1350,22 +1424,21 @@ function changeAttribute(attributeCreator) {
         }
     };
 }
-// Function factory that creates a converter which converts the text inside marker's range. The converter wraps the text with
-// {@link module:engine/view/attributeelement~AttributeElement} created from the provided descriptor.
-// See {link module:engine/conversion/downcasthelpers~createViewElementFromHighlightDescriptor}.
-//
-// It can also be used to convert the selection that is inside a marker. In that case, an empty attribute element will be
-// created and the selection will be put inside it.
-//
-// If the highlight descriptor does not provide the `priority` property, `10` will be used.
-//
-// If the highlight descriptor does not provide the `id` property, the name of the marker will be used.
-//
-// This converter binds the created {@link module:engine/view/attributeelement~AttributeElement attribute elemens} with the marker name
-// using the {@link module:engine/conversion/mapper~Mapper#bindElementToMarker} method.
-//
-// @param {module:engine/conversion/downcasthelpers~HighlightDescriptor|Function} highlightDescriptor
-// @returns {Function}
+/**
+ * Function factory that creates a converter which converts the text inside marker's range. The converter wraps the text with
+ * {@link module:engine/view/attributeelement~AttributeElement} created from the provided descriptor.
+ * See {link module:engine/conversion/downcasthelpers~createViewElementFromHighlightDescriptor}.
+ *
+ * It can also be used to convert the selection that is inside a marker. In that case, an empty attribute element will be
+ * created and the selection will be put inside it.
+ *
+ * If the highlight descriptor does not provide the `priority` property, `10` will be used.
+ *
+ * If the highlight descriptor does not provide the `id` property, the name of the marker will be used.
+ *
+ * This converter binds the created {@link module:engine/view/attributeelement~AttributeElement attribute elemens} with the marker name
+ * using the {@link module:engine/conversion/mapper~Mapper#bindElementToMarker} method.
+ */
 function highlightText(highlightDescriptor) {
     return (evt, data, conversionApi) => {
         if (!data.item) {
@@ -1401,24 +1474,23 @@ function highlightText(highlightDescriptor) {
         }
     };
 }
-// Converter function factory. It creates a function which applies the marker's highlight to an element inside the marker's range.
-//
-// The converter checks if an element has the `addHighlight` function stored as a
-// {@link module:engine/view/element~Element#_setCustomProperty custom property} and, if so, uses it to apply the highlight.
-// In such case the converter will consume all element's children, assuming that they were handled by the element itself.
-//
-// When the `addHighlight` custom property is not present, the element is not converted in any special way.
-// This means that converters will proceed to convert the element's child nodes.
-//
-// If the highlight descriptor does not provide the `priority` property, `10` will be used.
-//
-// If the highlight descriptor does not provide the `id` property, the name of the marker will be used.
-//
-// This converter binds altered {@link module:engine/view/containerelement~ContainerElement container elements} with the marker name using
-// the {@link module:engine/conversion/mapper~Mapper#bindElementToMarker} method.
-//
-// @param {module:engine/conversion/downcasthelpers~HighlightDescriptor|Function} highlightDescriptor
-// @returns {Function}
+/**
+ * Converter function factory. It creates a function which applies the marker's highlight to an element inside the marker's range.
+ *
+ * The converter checks if an element has the `addHighlight` function stored as a
+ * {@link module:engine/view/element~Element#_setCustomProperty custom property} and, if so, uses it to apply the highlight.
+ * In such case the converter will consume all element's children, assuming that they were handled by the element itself.
+ *
+ * When the `addHighlight` custom property is not present, the element is not converted in any special way.
+ * This means that converters will proceed to convert the element's child nodes.
+ *
+ * If the highlight descriptor does not provide the `priority` property, `10` will be used.
+ *
+ * If the highlight descriptor does not provide the `id` property, the name of the marker will be used.
+ *
+ * This converter binds altered {@link module:engine/view/containerelement~ContainerElement container elements} with the marker name using
+ * the {@link module:engine/conversion/mapper~Mapper#bindElementToMarker} method.
+ */
 function highlightElement(highlightDescriptor) {
     return (evt, data, conversionApi) => {
         if (!data.item) {
@@ -1448,28 +1520,27 @@ function highlightElement(highlightDescriptor) {
         }
     };
 }
-// Function factory that creates a converter which converts the removing model marker to the view.
-//
-// Both text nodes and elements are handled by this converter but they are handled a bit differently.
-//
-// Text nodes are unwrapped using the {@link module:engine/view/attributeelement~AttributeElement attribute element} created from the
-// provided highlight descriptor. See {link module:engine/conversion/downcasthelpers~HighlightDescriptor}.
-//
-// For elements, the converter checks if an element has the `removeHighlight` function stored as a
-// {@link module:engine/view/element~Element#_setCustomProperty custom property}. If so, it uses it to remove the highlight.
-// In such case, the children of that element will not be converted.
-//
-// When `removeHighlight` is not present, the element is not converted in any special way.
-// The converter will proceed to convert the element's child nodes instead.
-//
-// If the highlight descriptor does not provide the `priority` property, `10` will be used.
-//
-// If the highlight descriptor does not provide the `id` property, the name of the marker will be used.
-//
-// This converter unbinds elements from the marker name.
-//
-// @param {module:engine/conversion/downcasthelpers~HighlightDescriptor|Function} highlightDescriptor
-// @returns {Function}
+/**
+ * Function factory that creates a converter which converts the removing model marker to the view.
+ *
+ * Both text nodes and elements are handled by this converter but they are handled a bit differently.
+ *
+ * Text nodes are unwrapped using the {@link module:engine/view/attributeelement~AttributeElement attribute element} created from the
+ * provided highlight descriptor. See {link module:engine/conversion/downcasthelpers~HighlightDescriptor}.
+ *
+ * For elements, the converter checks if an element has the `removeHighlight` function stored as a
+ * {@link module:engine/view/element~Element#_setCustomProperty custom property}. If so, it uses it to remove the highlight.
+ * In such case, the children of that element will not be converted.
+ *
+ * When `removeHighlight` is not present, the element is not converted in any special way.
+ * The converter will proceed to convert the element's child nodes instead.
+ *
+ * If the highlight descriptor does not provide the `priority` property, `10` will be used.
+ *
+ * If the highlight descriptor does not provide the `id` property, the name of the marker will be used.
+ *
+ * This converter unbinds elements from the marker name.
+ */
 function removeHighlight(highlightDescriptor) {
     return (evt, data, conversionApi) => {
         // This conversion makes sense only for non-collapsed range.
@@ -1502,17 +1573,17 @@ function removeHighlight(highlightDescriptor) {
         evt.stop();
     };
 }
-// Model element to view element conversion helper.
-//
-// See {@link ~DowncastHelpers#elementToElement `.elementToElement()` downcast helper} for examples and config params description.
-//
-// @param {Object} config Conversion configuration.
-// @param {String|Object} config.model The description or a name of the model element to convert.
-// @param {String|Array.<String>} [config.model.attributes] List of attributes triggering element reconversion.
-// @param {Boolean} [config.model.children] Should reconvert element if the list of model child nodes changed.
-// @param {module:engine/view/elementdefinition~ElementDefinition|module:engine/conversion/downcasthelpers~ElementCreatorFunction}
-// config.view
-// @returns {Function} Conversion helper.
+/**
+ * Model element to view element conversion helper.
+ *
+ * See {@link ~DowncastHelpers#elementToElement `.elementToElement()` downcast helper} for examples and config params description.
+ *
+ * @param config Conversion configuration.
+ * @param config.model The description or a name of the model element to convert.
+ * @param config.model.attributes List of attributes triggering element reconversion.
+ * @param config.model.children Should reconvert element if the list of model child nodes changed.
+ * @returns Conversion helper.
+ */
 function downcastElementToElement(config) {
     const model = normalizeModelElementConfig(config.model);
     const view = normalizeToElementConfig(config.view, 'container');
@@ -1528,16 +1599,14 @@ function downcastElementToElement(config) {
         }
     };
 }
-// Model element to view structure conversion helper.
-//
-// See {@link ~DowncastHelpers#elementToStructure `.elementToStructure()` downcast helper} for examples and config params description.
-//
-// @param {Object} config Conversion configuration.
-// @param {String|Object} config.model
-// @param {String} [config.model.name]
-// @param {Array.<String>} [config.model.attributes]
-// @param {module:engine/conversion/downcasthelpers~StructureCreatorFunction} config.view
-// @returns {Function} Conversion helper.
+/**
+ * Model element to view structure conversion helper.
+ *
+ * See {@link ~DowncastHelpers#elementToStructure `.elementToStructure()` downcast helper} for examples and config params description.
+ *
+ * @param config Conversion configuration.
+ * @returns Conversion helper.
+ */
 function downcastElementToStructure(config) {
     const model = normalizeModelElementConfig(config.model);
     const view = normalizeToElementConfig(config.view, 'container');
@@ -1552,34 +1621,38 @@ function downcastElementToStructure(config) {
              * allowed to host `$text` by the {@link module:engine/model/schema~Schema model schema}.
              *
              * For instance, this may be the result of `myElement` allowing the content of
-             * {@glink framework/guides/deep-dive/schema#generic-items `$block`} in its schema definition:
+             * {@glink framework/deep-dive/schema#generic-items `$block`} in its schema definition:
              *
-             *		// Element definition in schema.
-             *		schema.register( 'myElement', {
-             *			allowContentOf: '$block',
+             * ```ts
+             * // Element definition in schema.
+             * schema.register( 'myElement', {
+             * 	allowContentOf: '$block',
              *
-             *			// ...
-             *		} );
+             * 	// ...
+             * } );
              *
-             *		// ...
+             * // ...
              *
-             *		// Conversion of myElement with the use of elementToStructure().
-             *		editor.conversion.for( 'downcast' ).elementToStructure( {
-             *			model: 'myElement',
-             *			view: ( modelElement, { writer } ) => {
-             *				// ...
-             *			}
-             *		} );
+             * // Conversion of myElement with the use of elementToStructure().
+             * editor.conversion.for( 'downcast' ).elementToStructure( {
+             * 	model: 'myElement',
+             * 	view: ( modelElement, { writer } ) => {
+             * 		// ...
+             * 	}
+             * } );
+             * ```
              *
              * In such case, {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToElement `elementToElement()`} helper
              * can be used instead to get around this problem:
              *
-             *		editor.conversion.for( 'downcast' ).elementToElement( {
-             *			model: 'myElement',
-             *			view: ( modelElement, { writer } ) => {
-             *				// ...
-             *			}
-             *		} );
+             * ```ts
+             * editor.conversion.for( 'downcast' ).elementToElement( {
+             * 	model: 'myElement',
+             * 	view: ( modelElement, { writer } ) => {
+             * 		// ...
+             * 	}
+             * } );
+             * ```
              *
              * @error conversion-element-to-structure-disallowed-text
              * @param {String} elementName The name of the element the structure is to be created for.
@@ -1590,20 +1663,21 @@ function downcastElementToStructure(config) {
         dispatcher.on('reduceChanges', createChangeReducer(model), { priority: 'low' });
     };
 }
-// Model attribute to view element conversion helper.
-//
-// See {@link ~DowncastHelpers#attributeToElement `.attributeToElement()` downcast helper} for examples.
-//
-// @param {Object} config Conversion configuration.
-// @param {String|Object} config.model The key of the attribute to convert from or a `{ key, values }` object. `values` is an array
-// of `String`s with possible values if the model attribute is an enumerable.
-// @param {module:engine/view/elementdefinition~ElementDefinition|module:engine/conversion/downcasthelpers~AttributeElementCreatorFunction|
-// Object} config.view A view element definition or a function that takes the model attribute value and
-// {@link module:engine/view/downcastwriter~DowncastWriter view downcast writer} as parameters and returns a view attribute element.
-// If `config.model.values` is given, `config.view` should be an object assigning values from `config.model.values` to view element
-// definitions or functions.
-// @param {module:utils/priorities~PriorityString} [config.converterPriority='normal'] Converter priority.
-// @returns {Function} Conversion helper.
+/**
+ * Model attribute to view element conversion helper.
+ *
+ * See {@link ~DowncastHelpers#attributeToElement `.attributeToElement()` downcast helper} for examples.
+ *
+ * @param config Conversion configuration.
+ * @param config.model The key of the attribute to convert from or a `{ key, values }` object. `values` is an array
+ * of `String`s with possible values if the model attribute is an enumerable.
+ * @param config.view A view element definition or a function that takes the model attribute value and
+ * {@link module:engine/view/downcastwriter~DowncastWriter view downcast writer} as parameters and returns a view attribute element.
+ * If `config.model.values` is given, `config.view` should be an object assigning values from `config.model.values` to view element
+ * definitions or functions.
+ * @param config.converterPriority Converter priority.
+ * @returns Conversion helper.
+ */
 function downcastAttributeToElement(config) {
     config = cloneDeep(config);
     let model = config.model;
@@ -1627,21 +1701,23 @@ function downcastAttributeToElement(config) {
         dispatcher.on(eventName, wrap(elementCreator), { priority: config.converterPriority || 'normal' });
     };
 }
-// Model attribute to view attribute conversion helper.
-//
-// See {@link ~DowncastHelpers#attributeToAttribute `.attributeToAttribute()` downcast helper} for examples.
-//
-// @param {Object} config Conversion configuration.
-// @param {String|Object} config.model The key of the attribute to convert from or a `{ key, values, [ name ] }` object describing
-// the attribute key, possible values and, optionally, an element name to convert from.
-// @param {String|Object|module:engine/conversion/downcasthelpers~AttributeCreatorFunction} config.view A view attribute key,
-// or a `{ key, value }` object or a function that takes the model attribute value and returns a `{ key, value }` object.
-// If `key` is `'class'`, `value` can be a `String` or an array of `String`s. If `key` is `'style'`, `value` is an object with
-// key-value pairs. In other cases, `value` is a `String`.
-// If `config.model.values` is set, `config.view` should be an object assigning values from `config.model.values` to
-// `{ key, value }` objects or a functions.
-// @param {module:utils/priorities~PriorityString} [config.converterPriority='normal'] Converter priority.
-// @returns {Function} Conversion helper.
+/**
+ * Model attribute to view attribute conversion helper.
+ *
+ * See {@link ~DowncastHelpers#attributeToAttribute `.attributeToAttribute()` downcast helper} for examples.
+ *
+ * @param config Conversion configuration.
+ * @param config.model The key of the attribute to convert from or a `{ key, values, [ name ] }` object describing
+ * the attribute key, possible values and, optionally, an element name to convert from.
+ * @param config.view A view attribute key, or a `{ key, value }` object or a function that takes the model attribute value and returns
+ * a `{ key, value }` object.
+ * If `key` is `'class'`, `value` can be a `String` or an array of `String`s. If `key` is `'style'`, `value` is an object with
+ * key-value pairs. In other cases, `value` is a `String`.
+ * If `config.model.values` is set, `config.view` should be an object assigning values from `config.model.values` to
+ * `{ key, value }` objects or a functions.
+ * @param config.converterPriority Converter priority.
+ * @returns Conversion helper.
+ */
 function downcastAttributeToAttribute(config) {
     config = cloneDeep(config);
     let model = config.model;
@@ -1665,16 +1741,17 @@ function downcastAttributeToAttribute(config) {
         dispatcher.on(eventName, changeAttribute(elementCreator), { priority: config.converterPriority || 'normal' });
     };
 }
-// Model marker to view element conversion helper.
-//
-// See {@link ~DowncastHelpers#markerToElement `.markerToElement()` downcast helper} for examples.
-//
-// @param {Object} config Conversion configuration.
-// @param {String} config.model The name of the model marker (or model marker group) to convert.
-// @param {module:engine/view/elementdefinition~ElementDefinition|Function} config.view A view element definition or a function
-// that takes the model marker data as a parameter and returns a view UI element.
-// @param {module:utils/priorities~PriorityString} [config.converterPriority='normal'] Converter priority.
-// @returns {Function} Conversion helper.
+/**
+ * Model marker to view element conversion helper.
+ *
+ * See {@link ~DowncastHelpers#markerToElement `.markerToElement()` downcast helper} for examples.
+ *
+ * @param config Conversion configuration.
+ * @param config.model The name of the model marker (or model marker group) to convert.
+ * @param config.view A view element definition or a function that takes the model marker data as a parameter and returns a view UI element.
+ * @param config.converterPriority Converter priority.
+ * @returns Conversion helper.
+ */
 function downcastMarkerToElement(config) {
     const view = normalizeToElementConfig(config.view, 'ui');
     return (dispatcher) => {
@@ -1682,15 +1759,13 @@ function downcastMarkerToElement(config) {
         dispatcher.on(`removeMarker:${config.model}`, removeUIElement(), { priority: config.converterPriority || 'normal' });
     };
 }
-// Model marker to view data conversion helper.
-//
-// See {@link ~DowncastHelpers#markerToData `markerToData()` downcast helper} to learn more.
-//
-// @param {Object} config
-// @param {String} config.model
-// @param {Function} [config.view]
-// @param {module:utils/priorities~PriorityString} [config.converterPriority='normal']
-// @returns {Function} Conversion helper.
+/**
+ * Model marker to view data conversion helper.
+ *
+ * See {@link ~DowncastHelpers#markerToData `markerToData()` downcast helper} to learn more.
+ *
+ * @returns Conversion helper.
+ */
 function downcastMarkerToData(config) {
     config = cloneDeep(config);
     const group = config.model;
@@ -1707,16 +1782,18 @@ function downcastMarkerToData(config) {
         dispatcher.on(`removeMarker:${group}`, removeMarkerData(view), { priority: config.converterPriority || 'normal' });
     };
 }
-// Model marker to highlight conversion helper.
-//
-// See {@link ~DowncastHelpers#markerToElement `.markerToElement()` downcast helper} for examples.
-//
-// @param {Object} config Conversion configuration.
-// @param {String} config.model The name of the model marker (or model marker group) to convert.
-// @param {module:engine/conversion/downcasthelpers~HighlightDescriptor|Function} config.view A highlight descriptor
-// that will be used for highlighting or a function that takes the model marker data as a parameter and returns a highlight descriptor.
-// @param {module:utils/priorities~PriorityString} [config.converterPriority='normal'] Converter priority.
-// @returns {Function} Conversion helper.
+/**
+ * Model marker to highlight conversion helper.
+ *
+ * See {@link ~DowncastHelpers#markerToElement `.markerToElement()` downcast helper} for examples.
+ *
+ * @param config Conversion configuration.
+ * @param config.model The name of the model marker (or model marker group) to convert.
+ * @param config.view A highlight descriptor that will be used for highlighting or a function that takes
+ * the model marker data as a parameter and returns a highlight descriptor.
+ * @param config.converterPriority Converter priority.
+ * @returns Conversion helper.
+ */
 function downcastMarkerToHighlight(config) {
     return (dispatcher) => {
         dispatcher.on(`addMarker:${config.model}`, highlightText(config.view), { priority: config.converterPriority || 'normal' });
@@ -1724,13 +1801,11 @@ function downcastMarkerToHighlight(config) {
         dispatcher.on(`removeMarker:${config.model}`, removeHighlight(config.view), { priority: config.converterPriority || 'normal' });
     };
 }
-// Takes `config.model`, and converts it to an object with normalized structure.
-//
-// @param {String|Object} model Model configuration or element name.
-// @param {String} model.name
-// @param {Array.<String>} [model.attributes]
-// @param {Boolean} [model.children]
-// @returns {Object}
+/**
+ * Takes `config.model`, and converts it to an object with normalized structure.
+ *
+ * @param model Model configuration or element name.
+ */
 function normalizeModelElementConfig(model) {
     if (typeof model == 'string') {
         model = { name: model };
@@ -1746,12 +1821,14 @@ function normalizeModelElementConfig(model) {
     model.children = !!model.children;
     return model;
 }
-// Takes `config.view`, and if it is an {@link module:engine/view/elementdefinition~ElementDefinition}, converts it
-// to a function (because lower level converters accept only element creator functions).
-//
-// @param {module:engine/view/elementdefinition~ElementDefinition|Function} view View configuration.
-// @param {'container'|'attribute'|'ui'} viewElementType View element type to create.
-// @returns {Function} Element creator function to use in lower level converters.
+/**
+ * Takes `config.view`, and if it is an {@link module:engine/view/elementdefinition~ElementDefinition}, converts it
+ * to a function (because lower level converters accept only element creator functions).
+ *
+ * @param view View configuration.
+ * @param viewElementType View element type to create.
+ * @returns Element creator function to use in lower level converters.
+ */
 function normalizeToElementConfig(view, viewElementType) {
     if (typeof view == 'function') {
         // If `view` is already a function, don't do anything.
@@ -1759,12 +1836,9 @@ function normalizeToElementConfig(view, viewElementType) {
     }
     return ((modelData, conversionApi) => createViewElementFromDefinition(view, conversionApi, viewElementType));
 }
-// Creates a view element instance from the provided {@link module:engine/view/elementdefinition~ElementDefinition} and class.
-//
-// @param {module:engine/view/elementdefinition~ElementDefinition} viewElementDefinition
-// @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter
-// @param {'container'|'attribute'|'ui'} viewElementType
-// @returns {module:engine/view/element~Element}
+/**
+ * Creates a view element instance from the provided {@link module:engine/view/elementdefinition~ElementDefinition} and class.
+ */
 function createViewElementFromDefinition(viewElementDefinition, conversionApi, viewElementType) {
     if (typeof viewElementDefinition == 'string') {
         // If `viewElementDefinition` is given as a `String`, normalize it to an object with `name` property.
@@ -1819,10 +1893,12 @@ function getFromAttributeCreator(config) {
         return config.view;
     }
 }
-// Takes the configuration, adds default parameters if they do not exist and normalizes other parameters to be used in downcast converters
-// for generating a view attribute.
-//
-// @param {Object} view View configuration.
+/**
+ * Takes the configuration, adds default parameters if they do not exist and normalizes other parameters to be used in downcast converters
+ * for generating a view attribute.
+ *
+ * @param view View configuration.
+ */
 function normalizeToAttributeConfig(view) {
     if (typeof view == 'string') {
         return modelAttributeValue => ({ key: view, value: modelAttributeValue });
@@ -1842,7 +1918,9 @@ function normalizeToAttributeConfig(view) {
         return view;
     }
 }
-// Helper function for `highlight`. Prepares the actual descriptor object using value passed to the converter.
+/**
+ * Helper function for `highlight`. Prepares the actual descriptor object using value passed to the converter.
+ */
 function prepareDescriptor(highlightDescriptor, data, conversionApi) {
     // If passed descriptor is a creator function, call it. If not, just use passed value.
     const descriptor = typeof highlightDescriptor == 'function' ?
@@ -1861,13 +1939,14 @@ function prepareDescriptor(highlightDescriptor, data, conversionApi) {
     }
     return descriptor;
 }
-// Creates a function that checks a single differ diff item whether it should trigger reconversion.
-//
-// @param {Object} model A normalized `config.model` converter configuration.
-// @param {String} model.name The name of element.
-// @param {Array.<String>} model.attributes The list of attribute names that should trigger reconversion.
-// @param {Boolean} [model.children] Whether the child list change should trigger reconversion.
-// @returns {Function}
+/**
+ * Creates a function that checks a single differ diff item whether it should trigger reconversion.
+ *
+ * @param model A normalized `config.model` converter configuration.
+ * @param model.name The name of element.
+ * @param model.attributes The list of attribute names that should trigger reconversion.
+ * @param model.children Whether the child list change should trigger reconversion.
+ */
 function createChangeReducerCallback(model) {
     return (node, change) => {
         if (!node.is('element', model.name)) {
@@ -1887,13 +1966,14 @@ function createChangeReducerCallback(model) {
         return false;
     };
 }
-// Creates a `reduceChanges` event handler for reconversion.
-//
-// @param {Object} model A normalized `config.model` converter configuration.
-// @param {String} model.name The name of element.
-// @param {Array.<String>} model.attributes The list of attribute names that should trigger reconversion.
-// @param {Boolean} [model.children] Whether the child list change should trigger reconversion.
-// @returns {Function}
+/**
+ * Creates a `reduceChanges` event handler for reconversion.
+ *
+ * @param model A normalized `config.model` converter configuration.
+ * @param model.name The name of element.
+ * @param model.attributes The list of attribute names that should trigger reconversion.
+ * @param model.children Whether the child list change should trigger reconversion.
+ */
 function createChangeReducer(model) {
     const shouldReplace = createChangeReducerCallback(model);
     return (evt, data) => {
@@ -1913,7 +1993,20 @@ function createChangeReducer(model) {
             if (!data.reconvertedElements.has(node)) {
                 data.reconvertedElements.add(node);
                 const position = ModelPosition._createBefore(node);
-                reducedChanges.push({
+                let changeIndex = reducedChanges.length;
+                // We need to insert remove+reinsert before any other change on and inside the re-converted element.
+                // This is important because otherwise we would remove element that had already been modified by the previous change.
+                // Note that there could be some element removed before the re-converted element, so we must not break this behavior.
+                for (let i = reducedChanges.length - 1; i >= 0; i--) {
+                    const change = reducedChanges[i];
+                    const changePosition = change.type == 'attribute' ? change.range.start : change.position;
+                    const positionRelation = changePosition.compareWith(position);
+                    if (positionRelation == 'before' || change.type == 'remove' && positionRelation == 'same') {
+                        break;
+                    }
+                    changeIndex = i;
+                }
+                reducedChanges.splice(changeIndex, 0, {
                     type: 'remove',
                     name: node.name,
                     position,
@@ -1929,13 +2022,14 @@ function createChangeReducer(model) {
         data.changes = reducedChanges;
     };
 }
-// Creates a function that checks if an element and its watched attributes can be consumed and consumes them.
-//
-// @param {Object} model A normalized `config.model` converter configuration.
-// @param {String} model.name The name of element.
-// @param {Array.<String>} model.attributes The list of attribute names that should trigger reconversion.
-// @param {Boolean} [model.children] Whether the child list change should trigger reconversion.
-// @returns {module:engine/conversion/downcasthelpers~ConsumerFunction}
+/**
+ * Creates a function that checks if an element and its watched attributes can be consumed and consumes them.
+ *
+ * @param model A normalized `config.model` converter configuration.
+ * @param model.name The name of element.
+ * @param model.attributes The list of attribute names that should trigger reconversion.
+ * @param model.children Whether the child list change should trigger reconversion.
+ */
 function createConsumer(model) {
     return (node, consumable, options = {}) => {
         const events = ['insert'];
@@ -1954,14 +2048,13 @@ function createConsumer(model) {
         return true;
     };
 }
-// Creates a function that create view slots.
-//
-// @param {module:engine/model/element~Element} element
-// @param {Map.<module:engine/view/element~Element,Array.<module:engine/model/node~Node>>} slotsMap
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
-// @returns {Function} Exposed by writer as createSlot().
+/**
+ * Creates a function that create view slots.
+ *
+ * @returns Function exposed by writer as createSlot().
+ */
 function createSlotFactory(element, slotsMap, conversionApi) {
-    return (writer, modeOrFilter = 'children') => {
+    return (writer, modeOrFilter) => {
         const slot = writer.createContainerElement('$slot');
         let children = null;
         if (modeOrFilter === 'children') {
@@ -1982,11 +2075,9 @@ function createSlotFactory(element, slotsMap, conversionApi) {
         return slot;
     };
 }
-// Checks if all children are covered by slots and there is no child that landed in multiple slots.
-//
-// @param {module:engine/model/element~Element}
-// @param {Map.<module:engine/view/element~Element,Array.<module:engine/model/node~Node>>} slotsMap
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
+/**
+ * Checks if all children are covered by slots and there is no child that landed in multiple slots.
+ */
 function validateSlotsChildren(element, slotsMap, conversionApi) {
     const childrenInSlots = Array.from(slotsMap.values()).flat();
     const uniqueChildrenInSlots = new Set(childrenInSlots);
@@ -2012,13 +2103,9 @@ function validateSlotsChildren(element, slotsMap, conversionApi) {
         throw new CKEditorError('conversion-slot-filter-incomplete', conversionApi.dispatcher, { element });
     }
 }
-// Fill slots with appropriate view elements.
-//
-// @param {module:engine/view/element~Element} viewElement
-// @param {Map.<module:engine/view/element~Element,Array.<module:engine/model/node~Node>>} slotsMap
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
-// @param {Object} options
-// @param {Boolean} [options.reconversion]
+/**
+ * Fill slots with appropriate view elements.
+ */
 function fillSlots(viewElement, slotsMap, conversionApi, options) {
     // Set temporary position mapping to redirect child view elements into a proper slots.
     conversionApi.mapper.on('modelToViewPosition', toViewPositionMapping, { priority: 'highest' });
@@ -2041,14 +2128,10 @@ function fillSlots(viewElement, slotsMap, conversionApi, options) {
         data.viewPosition = data.mapper.findPositionIn(currentSlot, index);
     }
 }
-// Inserts view representation of `nodes` into the `viewElement` either by bringing back just removed view nodes
-// or by triggering conversion for them.
-//
-// @param {module:engine/view/element~Element} viewElement
-// @param {Iterable.<module:engine/model/element~Element>} modelNodes
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
-// @param {Object} options
-// @param {Boolean} [options.reconversion]
+/**
+ * Inserts view representation of `nodes` into the `viewElement` either by bringing back just removed view nodes
+ * or by triggering conversion for them.
+ */
 function reinsertOrConvertNodes(viewElement, modelNodes, conversionApi, options) {
     // Fill with nested view nodes.
     for (const modelChildNode of modelNodes) {
@@ -2059,14 +2142,11 @@ function reinsertOrConvertNodes(viewElement, modelNodes, conversionApi, options)
         }
     }
 }
-// Checks if the view for the given model element could be reused and reinserts it to the view.
-//
-// @param {module:engine/view/node~Node|module:engine/view/documentfragment~DocumentFragment} viewRoot
-// @param {module:engine/model/element~Element} modelElement
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
-// @param {Object} options
-// @param {Boolean} [options.reconversion]
-// @returns {Boolean} `false` if view element can't be reused.
+/**
+ * Checks if the view for the given model element could be reused and reinserts it to the view.
+ *
+ * @returns `false` if view element can't be reused.
+ */
 function reinsertNode(viewRoot, modelNode, conversionApi, options) {
     const { writer, mapper } = conversionApi;
     // Don't reinsert if this is not a reconversion...
@@ -2086,12 +2166,13 @@ function reinsertNode(viewRoot, modelNode, conversionApi, options) {
     writer.move(writer.createRangeOn(viewChildNode), mapper.toViewPosition(ModelPosition._createBefore(modelNode)));
     return true;
 }
-// The default consumer for insert events.
-// @param {module:engine/model/item~Item} item Model item.
-// @param {module:engine/conversion/modelconsumable~ModelConsumable} consumable The model consumable.
-// @param {Object} [options]
-// @param {Boolean} [options.preflight=false] Whether should consume or just check if can be consumed.
-// @returns {Boolean}
+/**
+ * The default consumer for insert events.
+ *
+ * @param item Model item.
+ * @param consumable The model consumable.
+ * @param options.preflight Whether should consume or just check if can be consumed.
+ */
 function defaultConsumer(item, consumable, { preflight } = {}) {
     if (preflight) {
         return consumable.test(item, 'insert');