Merge remote-tracking branch 'origin/stable' into docs-add-umd-build-…

…to-quick-start

.circleci/config.yml

@@ -38,6 +38,7 @@ commands:
 jobs:
   generate_configuration:
     machine: true
+    resource_class: xlarge
     parameters:
       isNightly:
         type: boolean

.circleci/template.yml

@@ -95,6 +95,7 @@ commands:
 jobs:
   cke5_manual:
     machine: true
+    resource_class: xlarge
     steps:
       - checkout_command
       - halt_if_short_flow
@@ -109,6 +110,7 @@ jobs:
 
   cke5_validators:
     machine: true
+    resource_class: xlarge
     steps:
       - checkout_command
       - bootstrap_repository_command
@@ -148,6 +150,7 @@ jobs:
 
   cke5_coverage:
     machine: true
+    resource_class: xlarge
     steps:
       - community_verification_command
       - checkout_command
@@ -171,6 +174,7 @@ jobs:
 
   cke5_trigger_release_process:
     machine: true
+    resource_class: xlarge
     steps:
       - community_verification_command
       - checkout_command
@@ -198,6 +202,7 @@ jobs:
 
   cke5_trigger_uber_ci:
     machine: true
+    resource_class: xlarge
     steps:
       - community_verification_command
       - checkout_command
@@ -208,6 +213,7 @@ jobs:
 
   release_prepare:
     machine: true
+    resource_class: xlarge
     steps:
       - checkout_command
       - halt_if_short_flow
@@ -228,6 +234,7 @@ jobs:
 
   notify_ci_failure:
     machine: true
+    resource_class: xlarge
     parameters:
       hideAuthor:
         type: string
@@ -246,6 +253,7 @@ jobs:
 
   stale_bot:
     machine: true
+    resource_class: xlarge
     steps:
       - checkout_command
       - bootstrap_repository_command

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: https://ckeditor.com/pricing/

.github/workflows/codeql.yml

@@ -0,0 +1,42 @@
+name: "CodeQL"
+on:
+  push:
+    branches: [ "master", "stable", "release" ]
+  pull_request:
+    branches: [ "master", "stable", "release" ]
+  schedule:
+    - cron: '0 22 * * SUN'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    runs-on: 'ubuntu-latest'
+    timeout-minutes: 360
+    permissions:
+      security-events: write
+      packages: read
+      actions: read
+      contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - language: javascript-typescript
+            build-mode: none
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: ${{ matrix.language }}
+          build-mode: ${{ matrix.build-mode }}
+          config: |
+            paths-ignore:
+              - tests
+              - 'packages/*/tests'
+              - scripts
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3
+        with:
+          category: "/language:${{matrix.language}}"

docs/_snippets/examples/document-editor.html

@@ -165,10 +165,6 @@ <h3 style="text-align:center;">Welcome letter</h3>
 		color: hsl( 203, 100%, 50% );
 	}
 
-	.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
-		color: var(--ck-color-list-button-on-text);
-	}
-
 	/* Set the styles for "Heading 2". */
 	.document-editor .ck-content h3 {
 		line-height: 1.86em;

docs/_snippets/getting-started/use-builder.html

@@ -0,0 +1,72 @@
+<div class="builder-cta">
+	<h2 id="ckeditor-5-builder">CKEditor&nbsp;5 Builder</h2>
+
+	<p>
+		In our interactive Builder you can quickly get a taste of CKEditor&nbsp;5. It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select:
+	</p>
+
+	<ul>
+		<li>The editor type.</li>
+		<li>The features you need.</li>
+		<li>Preferred framework (React, Angular, Vue or Vanilla JS).</li>
+		<li>Preferred distribution method.</li>
+	</ul>
+
+	<p>At the end you get ready-to-use code tailored to your needs!</p>
+
+	<p>
+		<a href="https://ckeditor.com/ckeditor-5/builder?redirect=docs" target="_blank">Check out our interactive Builder</a>
+	</p>
+</div>
+
+<style>
+	.builder-cta {
+		border: 1px solid #ECE6F7;
+		border-left: 4px solid #A183D9;
+		padding: 24px;
+		margin: 32px 0 20px;
+	}
+
+	.builder-cta h2 {
+		padding-top: 0;
+		border: 0;
+	}
+
+	.builder-cta ul {
+		margin: 18px 24px;
+	}
+
+	.builder-cta ul li {
+		list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 16" width="18" height="18" fill="none"><path fill="%236A38C1" fill-rule="evenodd" d="M11.041 14.432a.74.74 0 0 0 .24-.182l3.368-3.569a.763.763 0 0 0 .236-.246.816.816 0 0 0 .074-.678.794.794 0 0 0-.175-.297L11.28 5.75a.742.742 0 0 0-.24-.182.705.705 0 0 0-.824.162.824.824 0 0 0 .019 1.128l2.257 2.392H3.75a.75.75 0 0 0 0 1.5h8.742l-2.257 2.392a.823.823 0 0 0-.019 1.128c.071.075.155.133.247.173a.703.703 0 0 0 .578-.01Z" clip-rule="evenodd"/></svg>');
+		padding-inline-start: 4px;
+	}
+
+	.builder-cta ul li+li {
+		margin-top: 4px;
+	}
+
+	.builder-cta a {
+		display: inline-block;
+		background-color: #6A38C1;
+		color: #FFFFFF;
+		font-weight: bold;
+		text-decoration: none;
+		margin-top: 8px;
+		padding: 8px 16px;
+		border-radius: 6px;
+	}
+
+	.builder-cta a:hover,
+	.builder-cta a:focus {
+		background-color: #5C32A4;
+	}
+
+	.builder-cta a::after {
+		content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" width="18" height="18" fill="none"><path fill="white" d="M8.765 14.566a.75.75 0 1 1-1.06-1.06l3.005-3.007-3.005-3.005a.75.75 0 1 1 1.06-1.06l3.55 3.55a.75.75 0 0 1-.136 1.168l-3.414 3.414Z"/></svg>');
+		padding-inline-start: 4px;
+	}
+
+	.builder-cta p:last-child {
+		margin-bottom: 0;
+	}
+</style>

docs/_snippets/getting-started/use-builder.js

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */

docs/assets/snippet-styles.css

@@ -74,11 +74,6 @@ It breaks CKEditor 5 (see how <p><code>[]</code></p> looks). */
 	font-size: smaller;
 }
 
-.ck.ck-list {
-	/* See https://github.com/ckeditor/ckeditor5/issues/494 */
-	margin-left: 0;
-}
-
 .demo-row {
 	width: 100%;
 	display: -ms-flexbox;
@@ -145,6 +140,12 @@ It breaks CKEditor 5 (see how <p><code>[]</code></p> looks). */
 	margin: 0;
 }
 
+/* See https://github.com/ckeditor/ckeditor5/issues/494 */
+/* See https://github.com/ckeditor/ckeditor5/issues/16935 */
+.formatted .ck.ck-list {
+	margin: 0;
+}
+
 .main__notification-body {
 	margin-top: 10px;
 }

docs/examples/builds/balloon-block-editor.md

@@ -15,7 +15,7 @@ The balloon block editor type lets you create your content directly in its targe
 * A {@link getting-started/setup/toolbar#block-toolbar block toolbar} accessible using the toolbar handle button {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator}  attached to the editable content area and following the selection in the document (bringing additional block formatting tools). The {@icon @ckeditor/ckeditor5-core/theme/icons/drag-indicator.svg Drag indicator} button is also a handle that can be used to drag and drop blocks around the content.
 
 <info-box hint>
-	Check out the [source code](https://github.com/ckeditor/ckeditor5-demos/tree/master/user-interface-balloon-block) of this editor preset or build your custom editor setup with our [interactive Builder](https://ckeditor.com/ckeditor-5/builder?redirect=docs).
+	Check out the [source code](https://github.com/ckeditor/ckeditor5-demos/tree/master/user-interface-balloon-block) of this editor preset or build your custom editor setup with our [interactive Builder](https://ckeditor.com/ckeditor-5/builder/?redirect=docs).
 </info-box>
 
 {@snippet examples/balloon-block-editor}

docs/examples/builds/balloon-editor.md

@@ -12,7 +12,7 @@ classes: main__content--no-toc
 The balloon editor type lets you create your content directly in its target location with the help of a balloon toolbar that appears next to the selected editable document element.
 
 <info-box hint>
-	Check out the [source code](https://github.com/ckeditor/ckeditor5-demos/tree/master/user-interface-balloon) of this editor preset or build your custom editor setup with our [interactive Builder](https://ckeditor.com/ckeditor-5/builder?redirect=docs).
+	Check out the [source code](https://github.com/ckeditor/ckeditor5-demos/tree/master/user-interface-balloon) of this editor preset or build your custom editor setup with our [interactive Builder](https://ckeditor.com/ckeditor-5/builder/?redirect=docs).
 </info-box>
 
 {@snippet examples/balloon-editor}

docs/examples/builds/classic-editor.md

@@ -14,7 +14,7 @@ classes: main__content--no-toc
 The classic editor type shows a boxed editing area with a toolbar, placed in a specific position on the page.
 
 <info-box hint>
-	Check out the [source code](https://github.com/ckeditor/ckeditor5-demos/tree/master/user-interface-classic) of this editor preset or build your custom editor setup with our [interactive Builder](https://ckeditor.com/ckeditor-5/builder?redirect=docs).
+	Check out the [source code](https://github.com/ckeditor/ckeditor5-demos/tree/master/user-interface-classic) of this editor preset or build your custom editor setup with our [interactive Builder](https://ckeditor.com/ckeditor-5/builder/?redirect=docs).
 </info-box>
 
 {@snippet examples/classic-editor}

docs/examples/builds/document-editor.md

@@ -14,7 +14,7 @@ The editor in this example is a feature–rich preset focused on rich text editi
 See the {@link framework/document-editor tutorial} to learn how to create this kind of an editor (and similar) with a custom UI layout on top of {@link module:editor-decoupled/decouplededitor~DecoupledEditor}.
 
 <info-box hint>
-	Check out the [source code](https://github.com/ckeditor/ckeditor5-demos/tree/master/user-interface-document) of this editor preset or build your custom editor setup with our [interactive Builder](https://ckeditor.com/ckeditor-5/builder?redirect=docs).
+	Check out the [source code](https://github.com/ckeditor/ckeditor5-demos/tree/master/user-interface-document) of this editor preset or build your custom editor setup with our [interactive Builder](https://ckeditor.com/ckeditor-5/builder/?redirect=docs).
 </info-box>
 
 {@snippet examples/document-editor}

docs/examples/builds/inline-editor.md

@@ -14,7 +14,7 @@ The inline editor type lets you create your content directly in its target locat
 In this example the {@link features/images-styles image styles} configuration was changed to enable left- and right-aligned images.
 
 <info-box hint>
-	Check out the [source code](https://github.com/ckeditor/ckeditor5-demos/tree/master/user-interface-inline) of this editor preset or build your custom editor setup with our [interactive Builder](https://ckeditor.com/ckeditor-5/builder?redirect=docs).
+	Check out the [source code](https://github.com/ckeditor/ckeditor5-demos/tree/master/user-interface-inline) of this editor preset or build your custom editor setup with our [interactive Builder](https://ckeditor.com/ckeditor-5/builder/?redirect=docs).
 </info-box>
 
 {@snippet examples/inline-editor}

docs/examples/index.md

@@ -26,4 +26,4 @@ CKEditor 5 is a configurable framework created with collaboration in mind.
 
 ## Advanced configuration – CKEditor 5 Framework examples
 
-{@link framework/index CKEditor 5 Framework} is a highly flexible and universal platform that provides a set of components allowing you to create any kind of rich text editor. It enables the integrators to build different, custom-tailored editing solutions with {@link examples/custom-ui custom UI} or {@link examples/theme-customization a theme} that suit their specific needs. It also provides tools for the creating and integrating of {@link examples/framework/data-from-external-source some user-made}, {@link examples/framework/content-placeholder custom features} and for customizing {@link examples/chat-with-mentions existing ones}. See how CKEditor 5 can integrate a {@link examples/framework/using-react-in-a-widget React library} to enrich both the contents and the editing experience. And witness the flexibility of the UI in the {@link examples/custom/bottom-toolbar-editor toolbar-oriented example}.
+{@link framework/index CKEditor 5 Framework} is a highly flexible and universal platform that provides a set of components allowing you to create any kind of rich text editor. It enables the integrators to build different, custom-tailored editing solutions with {@link examples/custom-ui custom UI} or {@link examples/theme-customization a theme} that suit their specific needs. It also provides tools for the creating and integrating of {@link examples/framework/data-from-external-source some user-made features} and for customizing {@link examples/chat-with-mentions existing ones}. See how CKEditor 5 can integrate a {@link examples/framework/using-react-in-a-widget React library} to enrich both the contents and the editing experience. And witness the flexibility of the UI in the {@link examples/custom/bottom-toolbar-editor toolbar-oriented example}.

docs/features/editor-placeholder.md

@@ -7,7 +7,7 @@ meta-title: Editor placeholder | CKEditor 5 Documentation
 
 # Editor placeholder
 
-You can prompt the user to input content by displaying a configurable placeholder text when the editor is empty. This works similarly to the native DOM [`placeholder` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder) used by inputs. Not to be confused with {@link examples/framework/content-placeholder content placeholder}.
+You can prompt the user to input content by displaying a configurable placeholder text when the editor is empty. This works similarly to the native DOM [`placeholder` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder) used by inputs. Not to be confused with the content placeholders offered by the {@link features/merge-fields merge fields} feature.
 
 ## Demo
 

docs/features/index.md

@@ -105,7 +105,7 @@ Keep full control of your work. Be safe and never lose anything thanks to the {@
 
 ### Customizable user experience
 
-Work as you like it – choose a user interface approach from several predefined layouts, add features to your preset or remove them with the [Builder](https://ckeditor.com/ckeditor-5/builder?redirect=docs), or use the {@link getting-started/advanced/dll-builds DLL builds}. Then tailor the user interface to your needs with a customizable {@link getting-started/setup/toolbar editor toolbar}, arranging feature buttons, dropdowns, and other items in whatever way you need.
+Work as you like it – choose a user interface approach from several predefined layouts, add features to your preset or remove them with the [Builder](https://ckeditor.com/ckeditor-5/builder/?redirect=docs), or use the {@link getting-started/advanced/dll-builds DLL builds}. Then tailor the user interface to your needs with a customizable {@link getting-started/setup/toolbar editor toolbar}, arranging feature buttons, dropdowns, and other items in whatever way you need.
 
 {@img assets/img/full-toolbar.png 938 CKEditor 5 customizable UI.}
 
@@ -126,7 +126,7 @@ If you want to migrate from CKEditor 4 to CKEditor 5, check the {@link upda
 We present each rich-text editor feature on a separate page. It includes one or more working demos showcasing a feature along with some customization ideas that you can use in your implementation.
 
 <info-box>
-	**In most feature demos the number of features enabled is limited** to make the exposed piece of functionality stand out more, as shown in the screenshots above. But in your CKEditor&nbsp;5 WYSIWYG editor implementation you are free to choose and combine any features you like from those available. You can achieve this by using the [CKEditor&nbsp;5 Builder](https://ckeditor.com/ckeditor-5/builder?redirect=docs).
+	**In most feature demos the number of features enabled is limited** to make the exposed piece of functionality stand out more, as shown in the screenshots above. But in your CKEditor&nbsp;5 WYSIWYG editor implementation you are free to choose and combine any features you like from those available. You can achieve this by using the [CKEditor&nbsp;5 Builder](https://ckeditor.com/ckeditor-5/builder/?redirect=docs).
 </info-box>
 
 ## Why does the editor filter out content (styles, classes, elements)

docs/framework/architecture/ui-components.md

@@ -387,6 +387,54 @@ toolbarDropdown.render();
 document.getElementById( 'toolbar-button' ).append( toolbarDropdown.element );
 ```
 
+### Menu
+
+Finally, you can add a multi-level menu to a dropdown. Use the {@link module:ui/dropdown/utils~addMenuToDropdown `addMenuToDropdown()`} helper function to simplify the process.
+
+```js
+import {
+	addMenuToDropdown,
+    createDropdown
+} from 'ckeditor5';
+
+const locale = new Locale(); // Can be `editor.locale`.
+const body = new BodyCollection(); // Can be `editor.ui.view.body`.
+
+const menuDropdown = createDropdown( locale );
+
+// The menu items definitions.
+const definition = [
+	{
+		id: 'menu_1',
+		menu: 'Menu 1',
+		children: [
+			{
+				id: 'menu_1_a',
+				label: 'Item A'
+			},
+			{
+				id: 'menu_1_b',
+				label: 'Item B'
+			}
+		]
+	},
+	{
+		id: 'top_a',
+		label: 'Top Item A'
+	},
+	{
+		id: 'top_b',
+		label: 'Top Item B'
+	}
+];
+
+addMenuToDropdown( menuDropdown, body, definition );
+
+menuDropdown.render();
+
+document.getElementById( 'menu-dropdown' ).append( menuDropdown.element );
+```
+
 ### Split button
 
 Besides the standard button, you can also use the split button for a dropdown. It has two clickable sections: one for the main action and a second for expanding the dropdown with more options.