ckeditor · Reinmar · Sep 6, 2021 · Aug 12, 2021 · Aug 13, 2021 · Aug 13, 2021
diff --git a/docs/_snippets/builds/saving-data/autosave.js b/docs/_snippets/builds/saving-data/autosave.js
@@ -16,8 +16,10 @@ document.querySelector( '#snippet-autosave-lag' ).addEventListener( 'change', ev
 ClassicEditor
 	.create( document.querySelector( '#snippet-autosave' ), {
 		cloudServices: CS_CONFIG,
-		toolbar: {
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		},
 		autosave: {
 			save( editor ) {

diff --git a/docs/_snippets/builds/saving-data/manualsave.js b/docs/_snippets/builds/saving-data/manualsave.js
@@ -17,8 +17,10 @@ document.querySelector( '#snippet-manualsave-lag' ).addEventListener( 'change',
 ClassicEditor
 	.create( document.querySelector( '#snippet-manualsave' ), {
 		cloudServices: CS_CONFIG,
-		toolbar: {
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/examples/classic-editor-short.js b/docs/_snippets/examples/classic-editor-short.js
@@ -10,8 +10,10 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 ClassicEditor
 	.create( document.querySelector( '#snippet-classic-editor-short' ), {
 		cloudServices: CS_CONFIG,
-		toolbar: {
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/examples/classic-editor.js b/docs/_snippets/examples/classic-editor.js
@@ -10,8 +10,10 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 ClassicEditor
 	.create( document.querySelector( '#snippet-classic-editor' ), {
 		cloudServices: CS_CONFIG,
-		toolbar: {
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/examples/custom-build.js b/docs/_snippets/examples/custom-build.js
@@ -38,8 +38,12 @@ ClassicEditor
 			CloudServices
 		],
 		toolbar: {
-			items: [ 'bold', 'italic', 'underline', 'strikethrough', 'code', '|', 'highlight', '|', 'undo', 'redo' ],
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+			items: [ 'bold', 'italic', 'underline', 'strikethrough', 'code', '|', 'highlight', '|', 'undo', 'redo' ]
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		},
 		cloudServices: CS_CONFIG
 	} )

diff --git a/docs/_snippets/examples/inline-editor.js b/docs/_snippets/examples/inline-editor.js
@@ -12,8 +12,10 @@ const inlineInjectElements = document.querySelectorAll( '#snippet-inline-editor
 
 Array.from( inlineInjectElements ).forEach( inlineElement => {
 	const config = {
-		toolbar: {
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		},
 		cloudServices: CS_CONFIG
 	};

diff --git a/docs/_snippets/features/image-upload.js b/docs/_snippets/features/image-upload.js
@@ -10,8 +10,10 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-upload' ), {
 		cloudServices: CS_CONFIG,
-		toolbar: {
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/features/mathtype.js b/docs/_snippets/features/mathtype.js
@@ -44,8 +44,12 @@ ClassicEditor
 				'|',
 				'undo',
 				'redo'
-			],
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+			]
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		},
 		image: {
 			toolbar: [

diff --git a/docs/_snippets/features/read-only.js b/docs/_snippets/features/read-only.js
@@ -10,8 +10,10 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 ClassicEditor
 	.create( document.querySelector( '#snippet-read-only' ), {
 		cloudServices: CS_CONFIG,
-		toolbar: {
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/features/toolbar-breakpoint.js b/docs/_snippets/features/toolbar-breakpoint.js
@@ -23,8 +23,12 @@ ClassicEditor
 				'uploadImage', 'blockQuote', '|',
 				'undo', 'redo'
 			],
-			shouldNotGroupWhenFull: true,
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+			shouldNotGroupWhenFull: true
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		},
 		image: {
 			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]

diff --git a/docs/_snippets/features/toolbar-grouping.js b/docs/_snippets/features/toolbar-grouping.js
@@ -19,8 +19,12 @@ ClassicEditor
 				'outdent', 'indent', '|',
 				'uploadImage', 'blockQuote', '|',
 				'undo', 'redo'
-			],
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+			]
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		},
 		image: {
 			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]

diff --git a/docs/_snippets/features/toolbar-wrapping.js b/docs/_snippets/features/toolbar-wrapping.js
@@ -24,8 +24,12 @@ ClassicEditor
 				'uploadImage', 'blockQuote', '|',
 				'undo', 'redo'
 			],
-			shouldNotGroupWhenFull: true,
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+			shouldNotGroupWhenFull: true
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		},
 		image: {
 			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]

diff --git a/docs/_snippets/features/ui-language-content.js b/docs/_snippets/features/ui-language-content.js
@@ -13,8 +13,10 @@ ClassicEditor
 			content: 'ar'
 		},
 		cloudServices: CS_CONFIG,
-		toolbar: {
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/features/ui-language-rtl.js b/docs/_snippets/features/ui-language-rtl.js
@@ -11,8 +11,10 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-ui-language-rtl' ), {
 		language: 'ar',
 		cloudServices: CS_CONFIG,
-		toolbar: {
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/features/ui-language.js b/docs/_snippets/features/ui-language.js
@@ -11,8 +11,10 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-ui-language' ), {
 		language: 'es',
 		cloudServices: CS_CONFIG,
-		toolbar: {
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/features/wproofreader.js b/docs/_snippets/features/wproofreader.js
@@ -44,8 +44,12 @@ ClassicEditor
 				'|',
 				'undo',
 				'redo'
-			],
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+			]
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		},
 		image: {
 			toolbar: [

diff --git a/docs/_snippets/framework/development-tools/inspector.js b/docs/_snippets/framework/development-tools/inspector.js
@@ -12,8 +12,10 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 ClassicEditor
 	.create( document.querySelector( '#snippet-classic-editor' ), {
 		cloudServices: CS_CONFIG,
-		toolbar: {
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/framework/tutorials/block-widget.js b/docs/_snippets/framework/tutorials/block-widget.js
@@ -230,8 +230,12 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-block-widget' ), {
 		plugins: [ Essentials, Bold, Italic, Heading, List, Paragraph, SimpleBox ],
 		toolbar: {
-			items: [ 'heading', '|', 'bold', 'italic', 'numberedList', 'bulletedList', 'simpleBox' ],
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+			items: [ 'heading', '|', 'bold', 'italic', 'numberedList', 'bulletedList', 'simpleBox' ]
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/framework/tutorials/using-react-in-widget.html b/docs/_snippets/framework/tutorials/using-react-in-widget.html
@@ -232,7 +232,6 @@ <h3>Products</h3>
 				ProductPreviewEditing
 			],
 			toolbar: {
-				viewportTopOffset: window.getViewportTopOffsetConfig(),
 				items: [
 					'heading',
 					'|',
@@ -243,6 +242,11 @@ <h3>Products</h3>
 					'undo', 'redo'
 				]
 			},
+			ui: {
+				viewportOffset: {
+					top: window.getViewportTopOffsetConfig()
+				}
+			},
 			table: {
 				contentToolbar: [
 					'tableColumn',

diff --git a/docs/assets/snippet-styles.css b/docs/assets/snippet-styles.css
@@ -4,7 +4,7 @@
 
 :root {
 	/* This custom property is read by the JS and passed to editor configurations
-	as config.toolbar.viewportTopOffset. */
+	as config.ui.viewportOffset.top. */
 	--ck-snippet-viewport-top-offset: 100
 }
 

diff --git a/docs/assets/snippet.js b/docs/assets/snippet.js
@@ -109,7 +109,7 @@ window.createNotification = function( title, message ) {
 };
 
 /**
- * Returns the `config.toolbar.viewportTopOffset` config value for editors using floating toolbars that
+ * Returns the `config.ui.viewportOffset.top` config value for editors using floating toolbars that
  * stick to the top of the viewport to remain visible to the user.
  *
  * The value is determined in styles by the `--ck-snippet-viewport-top-offset` custom property

diff --git a/docs/features/toolbar.md b/docs/features/toolbar.md
@@ -64,7 +64,6 @@ You can use the extended {@link module:core/editor/editorconfig~EditorConfig#too
 ```js
 toolbar: {
     items: [ 'bold', 'italic', '|', 'undo', 'redo', '-', 'numberedList', 'bulletedList' ],
-    viewportTopOffset: 30,
     shouldNotGroupWhenFull: true
 }
 ```
@@ -73,8 +72,6 @@ toolbar: {
 
  * **`removeItems`** &ndash; An array of toolbar item names. With this setting you can modify the default toolbar configuration without the need of defining the entire list (you can specify a couple of buttons that you want to remove instead of specifying all the buttons you want to keep). If, after removing an item, toolbar will have two or more consecutive separators (`'|'`), the duplicates will be removed automatically.
 
- * **`viewportTopOffset`** &ndash; The offset (in pixels) from the top of the viewport used when positioning a sticky toolbar. Useful when a page with which the editor is being integrated has some other sticky or fixed elements (e.g. the top menu). Thanks to setting the toolbar offset, the toolbar will not be positioned underneath or above the page's UI.
-
  * **`shouldNotGroupWhenFull`** &ndash; When set to `true`, the toolbar will stop grouping items and let them wrap to the next line when there is not enough space to display them in a single row. This setting is `false` by default, which enables items grouping.
 
 The demo below presents the "regular" toolbar look with `shouldNotGroupWhenFull` set to `false`. If there are excess toolbar items for the display width, the toolbar gets grouped and some of the items are accessible via the clickable "Show more items" (⋮) button.

diff --git a/packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-options.js b/packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-options.js
@@ -22,8 +22,12 @@ ClassicEditor
 				'alignment',
 				'undo',
 				'redo'
-			],
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+			]
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		},
 		alignment: {
 			options: [ 'left', 'right' ]

diff --git a/packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-toolbar.js b/packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-toolbar.js
@@ -12,8 +12,12 @@ ClassicEditor
 		toolbar: {
 			items: [
 				'heading', '|', 'alignment:left', 'alignment:right', 'alignment:center', 'alignment:justify'
-			],
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+			]
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		},
 		cloudServices: CS_CONFIG
 	} )

diff --git a/packages/ckeditor5-alignment/docs/_snippets/features/text-alignment.js b/packages/ckeditor5-alignment/docs/_snippets/features/text-alignment.js
@@ -22,8 +22,12 @@ ClassicEditor
 				'alignment',
 				'undo',
 				'redo'
-			],
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+			]
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		},
 		cloudServices: CS_CONFIG
 	} )

diff --git a/packages/ckeditor5-autoformat/docs/_snippets/features/autoformat.js b/packages/ckeditor5-autoformat/docs/_snippets/features/autoformat.js
@@ -45,8 +45,12 @@ ClassicEditor
 				'|',
 				'undo',
 				'redo'
-			],
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+			]
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		},
 		cloudServices: CS_CONFIG
 	} )

diff --git a/packages/ckeditor5-basic-styles/docs/_snippets/features/basic-styles.js b/packages/ckeditor5-basic-styles/docs/_snippets/features/basic-styles.js
@@ -12,8 +12,12 @@ ClassicEditor
 		toolbar: {
 			items: [
 				'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'code', '|', 'removeFormat', '|', 'undo', 'redo'
-			],
-			viewportTopOffset: window.getViewportTopOffsetConfig()
+			]
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
 		},
 		cloudServices: CS_CONFIG
 	} )

diff --git a/packages/ckeditor5-block-quote/docs/_snippets/features/block-quote-source.js b/packages/ckeditor5-block-quote/docs/_snippets/features/block-quote-source.js
@@ -26,8 +26,12 @@ ClassicEditor.defaultConfig = {
 			'|',
 			'undo',
 			'redo'
-		],
-		viewportTopOffset: window.getViewportTopOffsetConfig()
+		]
+	},
+	ui: {
+		viewportOffset: {
+			top: window.getViewportTopOffsetConfig()
+		}
 	},
 	image: {
 		toolbar: [ 'imageTextAlternative' ]