Gloria - documentation changes

.circleci/config.yml

@@ -38,7 +38,8 @@ commands:
 
 jobs:
   generate_configuration:
-    machine: true
+    docker:
+      - image: cimg/node:22.12.0
     resource_class: medium
     parameters:
       isNightly:

.circleci/template.yml

@@ -4,6 +4,9 @@
 # To modify commands to execute on CI review this file, and the script that generates it.
 version: 2.1
 
+orbs:
+  browser-tools: circleci/browser-tools@2.1.2
+
 # List of parameters must be synchronized between configuration files.
 parameters:
   isNightly:
@@ -40,14 +43,6 @@ commands:
               circleci step halt
             fi
 
-  prepare_environment_command:
-    description: "Prepare environment (RAM, browsers, hosts, etc.)"
-    steps:
-      # CircleCI does not use the latest Chrome. Hence, we must install it manually.
-      - run:
-          name: Install the latest Chrome
-          command: yarn ckeditor5-dev-ci-install-latest-chrome
-
   install_ssh_keys_command:
     description: "Install SSH keys"
     steps:
@@ -67,9 +62,14 @@ commands:
   checkout_command:
     description: "Clone the CKEditor 5 repository with limited depth and branches"
     steps:
+      - run:
+          name: Add GitHub to known_hosts
+          command: |
+            mkdir -p ~/.ssh
+            ssh-keyscan github.com >> ~/.ssh/known_hosts
       - run:
           name: Checkout code (single branch)
-          command: git clone --single-branch --depth 10 --branch "$CIRCLE_BRANCH" "$CIRCLE_REPOSITORY_URL" .
+          command: git clone --single-branch --depth 1 --branch "$CIRCLE_BRANCH" "$CIRCLE_REPOSITORY_URL" .
 
   # In the PRs that come from forked repositories, we do not share secret variables.
   # Hence, some of the scripts will not be executed. See: https://github.com/ckeditor/ckeditor5/issues/7745.
@@ -101,13 +101,14 @@ commands:
 
 jobs:
   cke5_manual:
-    machine: true
+    docker:
+      - image: cimg/node:22.12.0-browsers
     resource_class: large
     steps:
       - checkout_command
       - halt_if_short_flow
       - bootstrap_repository_command
-      - prepare_environment_command
+      - browser-tools/install_chrome
       - install_newest_emoji
       - run:
           name: Prepare DLL builds in CKEditor 5
@@ -117,12 +118,12 @@ jobs:
           command: bash scripts/check-manual-tests.sh -r ckeditor5 -f ckeditor5
 
   cke5_validators:
-    machine: true
+    docker:
+      - image: cimg/node:22.12.0
     resource_class: medium
     steps:
       - checkout_command
       - bootstrap_repository_command
-      - prepare_environment_command
       - run:
           when: always
           name: Validate versions of CKEditor 5 dependencies
@@ -161,14 +162,14 @@ jobs:
           command: yarn run validate-module-re-exports
 
   cke5_coverage:
-    machine: true
+    docker:
+      - image: cimg/node:22.12.0
     resource_class: medium
     steps:
       - community_verification_command
       - checkout_command
       - halt_if_short_flow
       - bootstrap_repository_command
-      - prepare_environment_command
       - attach_workspace:
           at: .out
       - run:
@@ -185,7 +186,8 @@ jobs:
           command: npx coveralls -v < .out/combined_lcov.info
 
   cke5_trigger_release_process:
-    machine: true
+    docker:
+      - image: cimg/node:22.12.0
     resource_class: medium
     steps:
       - community_verification_command
@@ -213,7 +215,8 @@ jobs:
           command: yarn ckeditor5-dev-ci-trigger-circle-build
 
   cke5_trigger_uber_ci:
-    machine: true
+    docker:
+      - image: cimg/node:22.12.0
     resource_class: medium
     steps:
       - community_verification_command
@@ -224,13 +227,13 @@ jobs:
           command: yarn ckeditor5-dev-ci-trigger-circle-build
 
   release_prepare:
-    machine: true
+    docker:
+      - image: cimg/node:22.12.0
     resource_class: large
     steps:
       - checkout_command
       - halt_if_short_flow
       - bootstrap_repository_command
-      - prepare_environment_command
       - run:
           name: Check if packages are ready to be released
           command: npm run release:prepare-packages -- --compile-only --verbose
@@ -242,7 +245,8 @@ jobs:
           command: yarn run check-dependencies
 
   notify_ci_failure:
-    machine: true
+    docker:
+      - image: cimg/node:22.12.0
     resource_class: medium
     parameters:
       hideAuthor:
@@ -261,7 +265,8 @@ jobs:
           no_output_timeout: 2h
 
   stale_bot:
-    machine: true
+    docker:
+      - image: cimg/node:22.12.0
     resource_class: medium
     steps:
       - checkout_command

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,9 +1,34 @@
-### Suggested merge commit message ([convention](https://ckeditor.com/docs/ckeditor5/latest/framework/contributing/git-commit-message-convention.html))
+<!--
 
-Type: Message. Closes #000.
+This repository uses Markdown files to define changelog entries. If the changes in this pull request are **user-facing**, please create a changelog entry by running the following command:
+
+    yarn run nice
+
+This will generate an `*.md` file in the `.changelog/` directory for your description. You can create as many as you need.
+
+**Note:**  
+If your PR is internal-only (e.g., tests, tooling, docs), you can skip this step - just mention it below.
+
+-->
+
+### 🚀 Summary
+
+*A brief summary of what this PR changes.*
+
+---
+
+### 📌 Related issues
+
+<!--
+
+Although changelog entries list connected issues, GitHub requires listing them here to automatically link and close them.
+
+-->
+
+* Closes #000
 
 ---
 
-### Additional information
+### 💡 Additional information
 
-_For example – encountered issues, assumptions you had to make, other affected tickets, etc._
+*Optional: Notes on decisions, edge cases, or anything helpful for reviewers.*

.gitignore

@@ -1,5 +1,6 @@
 # All "dot directories".
 .*/**
+!.changelog/**
 !.github/**
 !.husky/**
 !.circleci/**

docs/_snippets/examples/balloon-block-editor.js

@@ -6,7 +6,8 @@
 import {
 	CS_CONFIG,
 	BalloonBlockEditor,
-	getViewportTopOffsetConfig
+	getViewportTopOffsetConfig,
+	setViewportTopOffsetDynamically
 } from '@snippets/index.js';
 
 BalloonBlockEditor
@@ -23,6 +24,8 @@ BalloonBlockEditor
 	} )
 	.then( editor => {
 		window.editor = editor;
+
+		setViewportTopOffsetDynamically( editor );
 	} )
 	.catch( err => {
 		console.error( err );

docs/_snippets/examples/balloon-editor.js

@@ -6,7 +6,8 @@
 import {
 	CS_CONFIG,
 	BalloonEditor,
-	getViewportTopOffsetConfig
+	getViewportTopOffsetConfig,
+	setViewportTopOffsetDynamically
 } from '@snippets/index.js';
 
 BalloonEditor
@@ -23,6 +24,8 @@ BalloonEditor
 	} )
 	.then( editor => {
 		window.editor = editor;
+
+		setViewportTopOffsetDynamically( editor );
 	} )
 	.catch( err => {
 		console.error( err );

docs/_snippets/examples/classic-editor-short.js

@@ -3,7 +3,12 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
-import { CS_CONFIG, ClassicEditor, getViewportTopOffsetConfig } from '@snippets/index.js';
+import {
+	CS_CONFIG,
+	ClassicEditor,
+	getViewportTopOffsetConfig,
+	setViewportTopOffsetDynamically
+} from '@snippets/index.js';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-classic-editor-short' ), {
@@ -16,6 +21,8 @@ ClassicEditor
 	} )
 	.then( editor => {
 		window.editor = editor;
+
+		setViewportTopOffsetDynamically( editor );
 	} )
 	.catch( err => {
 		console.error( err );

docs/_snippets/examples/classic-editor.js

@@ -6,7 +6,8 @@
 import {
 	CS_CONFIG,
 	ClassicEditor,
-	getViewportTopOffsetConfig
+	getViewportTopOffsetConfig,
+	setViewportTopOffsetDynamically
 } from '@snippets/index.js';
 
 ClassicEditor
@@ -29,6 +30,8 @@ ClassicEditor
 	} )
 	.then( editor => {
 		window.editor = editor;
+
+		setViewportTopOffsetDynamically( editor );
 	} )
 	.catch( err => {
 		console.error( err );

docs/_snippets/examples/document-editor.html

@@ -76,7 +76,7 @@ <h3 style="text-align:center;">Welcome letter</h3>
 
 	.document-editor__toolbar {
 		/* Make sure the toolbar container is always above the editable. */
-		z-index: 1;
+		z-index: 2;
 
 		/* Create the illusion of the toolbar floating over the editable. */
 		box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );

docs/_snippets/examples/document-editor.js

@@ -7,7 +7,8 @@ import { TableColumnResize } from 'ckeditor5';
 import {
 	CS_CONFIG,
 	DecoupledEditor,
-	getViewportTopOffsetConfig
+	getViewportTopOffsetConfig,
+	setViewportTopOffsetDynamically
 } from '@snippets/index.js';
 
 DecoupledEditor
@@ -37,6 +38,8 @@ DecoupledEditor
 			?.appendChild( editor.ui.view.toolbar.element );
 
 		window.editor = editor;
+
+		setViewportTopOffsetDynamically( editor );
 	} )
 	.catch( err => {
 		console.error( err );

docs/_snippets/examples/inline-editor.js

@@ -3,7 +3,12 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
-import { CS_CONFIG, InlineEditor, getViewportTopOffsetConfig } from '@snippets/index.js';
+import {
+	CS_CONFIG,
+	InlineEditor,
+	getViewportTopOffsetConfig,
+	setViewportTopOffsetDynamically
+} from '@snippets/index.js';
 
 const inlineInjectElements = document.querySelectorAll( '#snippet-inline-editor [data-inline-inject]' );
 
@@ -61,6 +66,8 @@ Array.from( inlineInjectElements ).forEach( inlineElement => {
 		.create( inlineElement, config )
 		.then( editor => {
 			window.editor = editor;
+
+			setViewportTopOffsetDynamically( editor );
 		} )
 		.catch( err => {
 			console.error( err );