New reconversion system

docs/builds/guides/migration/migration-from-ckeditor-4.md

@@ -95,7 +95,7 @@ Note: The number of options was reduced on purpose. We understood that configuri
 			<td>
 				<p>Extending the list of HTML tags or attributes that CKEditor should support can be achieved via the {@link features/general-html-support General HTML Support feature}. The GHS allows adding HTML markup not covered by official CKEditor 5 features into the editor's content. Such elements can be loaded, pasted, or output. It does not, however, provide a dedicated UI for the extended HTML markup.</p>
 				<p> Having full-fledged HTML support can be achieved by writing a plugin that (ideally) provides also means to control (insert, edit, delete) such markup. For more information on how to create plugins check the {@link framework/guides/creating-simple-plugin Creating a simple plugin} article. Looking at the source code of CKEditor 5 plugins may also give you a lot of inspiration.</p>
-				<p>Note that only content that is explicitly converted between the model and the view by the editor plugins will be preserved in CKEditor 5. Check the {@link framework/guides/deep-dive/conversion-introduction conversion tutorials} to learn how to extend the conversion rules.</p>
+				<p>Note that only content that is explicitly converted between the model and the view by the editor plugins will be preserved in CKEditor 5. Check the {@link framework/guides/deep-dive/conversion/intro conversion tutorials} to learn how to extend the conversion rules.</p>
 			</td>
 		</tr>
 		<tr>

docs/builds/guides/migration/migration-to-26.md

@@ -216,7 +216,7 @@ Command name changes (before → after):
 * `forwardDelete` → `deleteForward`
 * `todoListCheck` → `checkTodoList`
 
-The `TodoListCheckCommand` module was moved to {@link module:list/checktodolistcommand~CheckTodoListCommand `CheckTodoListCommand`}.
+The `TodoListCheckCommand` module was moved to {@link module:list/todolist/checktodolistcommand~CheckTodoListCommand `CheckTodoListCommand`}.
 
 The `ImageInsertCommand` module was moved to {@link module:image/image/insertimagecommand~InsertImageCommand `InsertImageCommand`}.
 

docs/umberto.json

@@ -64,7 +64,12 @@
 		"framework/guides/ui/external-ui.html": "framework/guides/deep-dive/ui/external-ui.html",
 		"framework/guides/ui/theme-customization.html": "framework/guides/deep-dive/ui/theme-customization.html",
 		"framework/guides/creating-simple-plugin.html": "framework/guides/plugins/creating-simple-plugin.html",
-		"examples/builds/custom-build.html": "examples/builds-custom/full-featured-editor.html"
+		"examples/builds/custom-build.html": "examples/builds-custom/full-featured-editor.html",
+		"framework/guides/deep-dive/conversion/conversion-introduction.html": "framework/guides/deep-dive/conversion/intro.html",
+		"framework/guides/deep-dive/conversion/conversion-extending-output.html": "framework/guides/deep-dive/conversion/intro.html",
+		"framework/guides/deep-dive/conversion/conversion-preserving-custom-content.html": "framework/guides/deep-dive/conversion/intro.html",
+		"framework/guides/deep-dive/conversion/custom-element-conversion.html": "framework/guides/deep-dive/conversion/intro.html",
+		"framework/guides/deep-dive/conversion/element-reconversion.html": "framework/guides/deep-dive/conversion/intro.html"
 	},
 	"scripts": {
 		"snippet-adapter": "../scripts/docs/snippetadapter",
@@ -201,7 +206,15 @@
 									"name": "Conversion",
 									"id": "framework-deep-dive-conversion",
 									"slug": "conversion",
-									"order": 100
+									"order": 100,
+									"categories": [
+										{
+											"name": "Conversion helpers",
+											"id": "framework-deep-dive-conversion-helpers",
+											"slug": "helpers",
+											"order": 100
+										}
+									]
 								},
 								{
 									"name": "User interface",

package.json

@@ -88,7 +88,7 @@
     "@ckeditor/ckeditor5-dev-webpack-plugin": "^28.0.1",
     "@ckeditor/ckeditor5-export-pdf": ">=1.0.0",
     "@ckeditor/ckeditor5-export-word": ">=1.0.0",
-    "@ckeditor/ckeditor5-inspector": "^2.2.2",
+    "@ckeditor/ckeditor5-inspector": "^3.0.0",
     "@ckeditor/ckeditor5-pagination": ">=1.0.0",
     "@ckeditor/ckeditor5-react": "^3.0.0",
     "@ckeditor/ckeditor5-real-time-collaboration": ">=28.0.0",

packages/ckeditor5-alignment/tests/alignmentediting.js

@@ -6,7 +6,7 @@
 import AlignmentEditing from '../src/alignmentediting';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ImageCaptionEditing from '@ckeditor/ckeditor5-image/src/imagecaption/imagecaptionediting';
-import ListEditing from '@ckeditor/ckeditor5-list/src/listediting';
+import ListEditing from '@ckeditor/ckeditor5-list/src/list/listediting';
 import HeadingEditing from '@ckeditor/ckeditor5-heading/src/headingediting';
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';

packages/ckeditor5-autoformat/tests/autoformat.js

@@ -6,8 +6,8 @@
 import Autoformat from '../src/autoformat';
 
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import ListEditing from '@ckeditor/ckeditor5-list/src/listediting';
-import TodoListEditing from '@ckeditor/ckeditor5-list/src/todolistediting';
+import ListEditing from '@ckeditor/ckeditor5-list/src/list/listediting';
+import TodoListEditing from '@ckeditor/ckeditor5-list/src/todolist/todolistediting';
 import HeadingEditing from '@ckeditor/ckeditor5-heading/src/headingediting';
 import BoldEditing from '@ckeditor/ckeditor5-basic-styles/src/bold/boldediting';
 import StrikethroughEditing from '@ckeditor/ckeditor5-basic-styles/src/strikethrough/strikethroughediting';

packages/ckeditor5-autoformat/tests/undointegration.js

@@ -6,7 +6,7 @@
 import Autoformat from '../src/autoformat';
 
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import ListEditing from '@ckeditor/ckeditor5-list/src/listediting';
+import ListEditing from '@ckeditor/ckeditor5-list/src/list/listediting';
 import HeadingEditing from '@ckeditor/ckeditor5-heading/src/headingediting';
 import BoldEditing from '@ckeditor/ckeditor5-basic-styles/src/bold/boldediting';
 import CodeEditing from '@ckeditor/ckeditor5-basic-styles/src/code/codeediting';

packages/ckeditor5-block-quote/tests/blockquoteediting.js

@@ -5,7 +5,7 @@
 
 import BlockQuoteEditing from '../src/blockquoteediting';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import ListEditing from '@ckeditor/ckeditor5-list/src/listediting';
+import ListEditing from '@ckeditor/ckeditor5-list/src/list/listediting';
 import BoldEditing from '@ckeditor/ckeditor5-basic-styles/src/bold/boldediting';
 
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';

packages/ckeditor5-clipboard/tests/pasteplaintext.js

@@ -43,7 +43,7 @@ describe( 'PastePlainText', () => {
 					isInline: true
 				} );
 
-				editor.conversion.for( 'upcast' ).elementToElement( {
+				editor.conversion.elementToElement( {
 					model: 'softBreak',
 					view: 'br'
 				} );

packages/ckeditor5-code-block/src/converters.js

@@ -69,12 +69,12 @@ export function modelToViewCodeBlockInsertion( model, languageDefs, useLabels =
 			preAttributes.spellcheck = 'false';
 		}
 
-		const pre = writer.createContainerElement( 'pre', preAttributes );
 		const code = writer.createContainerElement( 'code', {
 			class: languagesToClasses[ codeBlockLanguage ] || null
 		} );
 
-		writer.insert( writer.createPositionAt( pre, 0 ), code );
+		const pre = writer.createContainerElement( 'pre', preAttributes, code );
+
 		writer.insert( targetViewPosition, pre );
 		mapper.bindElements( data.item, code );
 	};

packages/ckeditor5-engine/docs/_snippets/framework/mini-inspector-bold.html

@@ -0,0 +1,5 @@
+<div id="mini-inspector-bold" class="mini-inspector-editor">
+	<p><strong>Text in bold</strong></p>
+</div>
+
+<div id="mini-inspector-bold-container"></div>

packages/ckeditor5-engine/docs/_snippets/framework/mini-inspector-bold.js

@@ -0,0 +1,20 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals DecoupledEditor, MiniCKEditorInspector, console, window, document */
+
+DecoupledEditor
+	.create( document.querySelector( '#mini-inspector-bold' ) )
+	.then( editor => {
+		window.editor = editor;
+
+		MiniCKEditorInspector.attach(
+			editor,
+			document.querySelector( '#mini-inspector-bold-container' )
+		);
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-engine/docs/_snippets/framework/mini-inspector-heading-interactive.html

@@ -0,0 +1,37 @@
+<div id="mini-inspector-heading-interactive" class="mini-inspector-editor">
+	<h1></h1>
+</div>
+
+<label class="mini-inspector-heading-level-dropdown">
+	<strong>Update heading level:</strong>
+	<select id="mini-inspector-heading-interactive-dropdown">
+		<option value="1">Level 1 (h1)</option>
+		<option value="2">Level 2 (h2)</option>
+		<option value="3">Level 3 (h3)</option>
+		<option value="4">Level 4 (h4)</option>
+		<option value="5">Level 5 (h5)</option>
+		<option value="6">Level 6 (h6)</option>
+	</select>
+</label>
+
+<div id="mini-inspector-heading-interactive-container"></div>
+
+<style>
+	.mini-inspector-heading-level-dropdown {
+		display: block;
+		margin-bottom: 20px;
+	}
+
+	#mini-inspector-heading-interactive-dropdown {
+		padding: 5px;
+	}
+
+	#mini-inspector-heading-interactive-container .ck-mini-inspector > div:first-child .ck-inspector-tree-node__attribute {
+		background: #fdfd77;
+	}
+
+	#mini-inspector-heading-interactive-container .ck-mini-inspector > div:last-child .ck-inspector-tree-node__content .ck-inspector-tree-node__name {
+		display: inline;
+		background: #fdfd77;
+	}
+</style>

packages/ckeditor5-engine/docs/_snippets/framework/mini-inspector-heading-interactive.js

@@ -0,0 +1,61 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals DecoupledEditor, MiniCKEditorInspector, Essentials, console, window, document */
+
+function CustomHeading( editor ) {
+	editor.model.schema.register( 'heading', {
+		allowAttributes: [ 'level' ],
+		inheritAllFrom: '$block'
+	} );
+
+	editor.conversion.for( 'upcast' ).elementToElement( {
+		view: 'h1',
+		model: ( viewElement, { writer } ) => {
+			return writer.createElement( 'heading', { level: '1' } );
+		}
+	} );
+
+	editor.conversion.for( 'downcast' ).elementToElement( {
+		model: {
+			name: 'heading',
+			attributes: [ 'level' ]
+		},
+		view: ( modelElement, { writer } ) => {
+			return writer.createContainerElement(
+				'h' + modelElement.getAttribute( 'level' )
+			);
+		}
+	} );
+
+	const dropdown = document.getElementById(
+		'mini-inspector-heading-interactive-dropdown'
+	);
+
+	dropdown.addEventListener( 'change', event => {
+		editor.model.change( writer => {
+			writer.setAttribute(
+				'level',
+				event.target.value,
+				editor.model.document.getRoot().getChild( 0 )
+			);
+		} );
+	} );
+}
+
+DecoupledEditor.create( document.querySelector( '#mini-inspector-heading-interactive' ), {
+	plugins: [ Essentials, CustomHeading ]
+} )
+	.then( editor => {
+		window.editor = editor;
+
+		MiniCKEditorInspector.attach(
+			editor,
+			document.querySelector( '#mini-inspector-heading-interactive-container' )
+		);
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-engine/docs/_snippets/framework/mini-inspector-heading.html

@@ -0,0 +1,5 @@
+<div id="mini-inspector-heading" class="mini-inspector-editor">
+	<h1></h1>
+</div>
+
+<div id="mini-inspector-heading-container"></div>

packages/ckeditor5-engine/docs/_snippets/framework/mini-inspector-heading.js

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals DecoupledEditor, MiniCKEditorInspector, Essentials, console, window, document */
+
+function CustomHeading( editor ) {
+	editor.model.schema.register( 'heading', {
+		allowAttributes: [ 'level' ],
+		inheritAllFrom: '$block'
+	} );
+
+	editor.conversion.elementToElement( {
+		model: 'heading',
+		view: 'h1'
+	} );
+}
+
+DecoupledEditor.create( document.querySelector( '#mini-inspector-heading' ), {
+	plugins: [ Essentials, CustomHeading ]
+} )
+	.then( editor => {
+		window.editor = editor;
+
+		MiniCKEditorInspector.attach(
+			editor,
+			document.querySelector( '#mini-inspector-heading-container' )
+		);
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-engine/docs/_snippets/framework/mini-inspector-paragraph.html

@@ -0,0 +1,5 @@
+<div id="mini-inspector-paragraph" class="mini-inspector-editor">
+	<p></p>
+</div>
+
+<div id="mini-inspector-paragraph-container"></div>

packages/ckeditor5-engine/docs/_snippets/framework/mini-inspector-paragraph.js

@@ -0,0 +1,20 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals DecoupledEditor, MiniCKEditorInspector, console, window, document */
+
+DecoupledEditor
+	.create( document.querySelector( '#mini-inspector-paragraph' ) )
+	.then( editor => {
+		window.editor = editor;
+
+		MiniCKEditorInspector.attach(
+			editor,
+			document.querySelector( '#mini-inspector-paragraph-container' )
+		);
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-engine/docs/_snippets/framework/mini-inspector-structure.html

@@ -0,0 +1,11 @@
+<div id="mini-inspector-structure" class="mini-inspector-editor">
+	<div class="wrapper">
+		<div class="inner-wrapper">
+			<p>
+				Example structure
+			</p>
+		</div>
+	</div>
+</div>
+
+<div id="mini-inspector-structure-container"></div>