Merge stable into master

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/getting-started/integrations/angular.md

@@ -90,17 +90,9 @@ Because of the breaking changes in the Angular library output format, the `@cked
 
 All available Angular versions are [listed on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-angular), where they can be pulled from.
 
-## Quick start
-
-### Using CKEditor 5 Builder
-
-The easiest way to use CKEditor 5 in your Angular application is by configuring it with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=docs) and integrating it with your application. Builder offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select:
+{@snippet getting-started/use-builder}
 
-* the features you need,
-* the preferred framework (React, Angular, Vue or Vanilla JS),
-* the preferred distribution method.
-
-You get ready-to-use code tailored to your needs!
+## Quick start
 
 ### Setting up the project
 

docs/getting-started/integrations/dotnet.md

@@ -9,15 +9,7 @@ menu-title: .NET
 
 As a pure JavaScript/TypeScript application, CKEditor 5 will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom configuration of CKEditor 5 in a non-JS framework of your choice, for example, Microsoft's [.NET](https://dotnet.microsoft.com/).
 
-## Using CKEditor 5 Builder
-
-The easiest way to use CKEditor 5 in your .NET project is preparing an editor preset with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=docs) and including it into your project. Builder offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select:
-
-* the features you need,
-* the preferred framework (React, Angular, Vue or Vanilla JS),
-* the preferred distribution method.
-
-You get ready-to-use code tailored to your needs!
+{@snippet getting-started/use-builder}
 
 ## Setting up the project
 

docs/getting-started/integrations/laravel.md

@@ -9,15 +9,7 @@ menu-title: Laravel
 
 As a pure JavaScript/TypeScript application, CKEditor 5 will work inside any environment that supports such components. While we do not offer official integrations for any non-JavaScript frameworks, you can include a custom configuration of CKEditor 5 in a non-JS framework of your choice, for example, the PHP-based [Laravel](https://laravel.com/).
 
-## Using CKEditor 5 Builder
-
-The easiest way to use CKEditor 5 in your Laravel project is preparing an editor preset with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=preset) and including it into your project. 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:
-
-* the features you need,
-* the preferred framework (React, Angular, Vue or Vanilla JS),
-* the preferred distribution method.
-
-You get ready-to-use code tailored to your needs!
+{@snippet getting-started/use-builder}
 
 ## Setting up the project
 

docs/getting-started/integrations/next-js.md

@@ -15,15 +15,7 @@ Next.js 13 introduced a new App Router as an alternative to the previous Pages R
 
 CKEditor 5 does not support server-side rendering yet, but you can integrate it with the Next.js framework. In this guide, you will add the editor to a Next.js project using both routing paradigms. For this purpose, you will need [Next.js CLI](https://nextjs.org/docs/app/api-reference/create-next-app), and the official {@link getting-started/integrations/react CKEditor 5 React component}.
 
-## Using CKEditor 5 Builder
-
-The easiest way to use CKEditor 5 in your Next.js application is configuring it with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=docs) and integrating it with your project. Builder offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select:
-
-* the features you need,
-* the preferred framework (React, Angular, Vue or Vanilla JS),
-* the preferred distribution method.
-
-You get ready-to-use code tailored to your needs! You can take the output from the builder, specifically the npm React snippet, and follow the npm path below. Just replace the content of the `components/custom-editor.js` file. The snippet may contain client-side hooks, so don't forget about adding the `'use client'` directive in the case of the App Router.
+{@snippet getting-started/use-builder}
 
 ## Setting up the project
 

docs/getting-started/integrations/react.md

@@ -23,15 +23,7 @@ React lets you build user interfaces out of individual pieces called components.
 
 ## Quick start
 
-### Using CKEditor 5 Builder
-
-The easiest way to use CKEditor 5 in your React application is by configuring it with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=docs) and integrating it with your application. Builder offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select:
-
-* the features you need,
-* the preferred framework (React, Angular, Vue or Vanilla JS),
-* the preferred distribution method.
-
-You get ready-to-use code tailored to your needs!
+{@snippet getting-started/use-builder}
 
 ### Setting up the project
 

docs/getting-started/integrations/vuejs-v2.md

@@ -27,15 +27,7 @@ Vue.js is a versatile framework for building web user interfaces. CKEditor 
 
 ## Quick start
 
-### Using CKEditor 5 Builder
-
-The easiest way to use CKEditor 5 in your Vue application is by configuring it with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=docs) and integrating it with your application. Builder offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select:
-
-* the features you need,
-* the preferred framework (React, Angular, Vue or Vanilla JS),
-* the preferred distribution method.
-
-You get ready-to-use code tailored to your needs!
+{@snippet getting-started/use-builder}
 
 ### Installing from npm
 

docs/getting-started/integrations/vuejs-v3.md

@@ -23,15 +23,7 @@ Vue.js is a versatile framework for building web user interfaces. CKEditor 
 
 ## Quick start
 
-### Using CKEditor 5 Builder
-
-The easiest way to use CKEditor 5 in your Vue application is by configuring it with [CKEditor 5 Builder](https://ckeditor.com/builder?redirect=docs) and integrating it with your application. Builder offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select:
-
-* the features you need,
-* the preferred framework (React, Angular, Vue or Vanilla JS),
-* the preferred distribution method.
-
-You get ready-to-use code tailored to your needs!
+{@snippet getting-started/use-builder}
 
 ### Setting up the project
 

docs/getting-started/quick-start.md

@@ -13,22 +13,13 @@ CKEditor 5 is a powerful, rich text editor you can embed in your web applic
 
 You have a few methods to choose from:
 
-* [Using CKEditor 5 Builder](#using-ckeditor-5-builder) for the smoothest setup with live preview and multiple integration options.
+* [Using CKEditor 5 Builder](#ckeditor-5-builder) for the smoothest setup with live preview and multiple integration options.
 * [Using npm](#installing-ckeditor-5-using-npm), where you use a JavaScript package and build the editor with a bundler.
 * [Using CDN](#installing-ckeditor-5-from-cdn), where you use our cloud-distributed CDN in a no-build setup.
 * [Using a ZIP file](#installing-ckeditor-5-from-a-zip-file), where you download the ready-to-run files and copy them to your project.
 * Choosing one of the pre-made integrations with popular frameworks (see table of contents for details).
 
-## Using CKEditor 5 Builder
-
-Check out our [interactive Builder](https://ckeditor.com/ckeditor-5/builder/?redirect=docs) to quickly get a taste of CKEditor 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:
-
-* editor type,
-* the features you need,
-* the preferred framework (React, Angular, Vue or Vanilla JS),
-* the preferred distribution method.
-
-You get ready-to-use code tailored to your needs!
+{@snippet getting-started/use-builder}
 
 ## Installing CKEditor 5 using npm