Merge stable into master

ckeditor · Sep 15, 2023 · fe95a50 · fe95a50
2 parents 877a98e + be71de9
commit fe95a50
Show file tree

Hide file tree

Showing 139 changed files with 151 additions and 163 deletions.
diff --git a/docs/_snippets/examples/balloon-block-editor.html b/docs/_snippets/examples/balloon-block-editor.html
@@ -1,4 +1,4 @@
-<div id="snippet-balloon-block-editor">
+<div class="ck ck-content" id="snippet-balloon-block-editor">
 	<h2>Taj Mahal: A breathtaking ode to love</h2>
 
 	<figure class="image image-style-side" height="400">

diff --git a/docs/_snippets/examples/balloon-editor.html b/docs/_snippets/examples/balloon-editor.html
@@ -1,4 +1,4 @@
-<div id="snippet-balloon-editor">
+<div class="ck ck-content" id="snippet-balloon-editor">
 	<h2>Walking the capitals of Europe: Warsaw</h2>
 
 	<figure class="media">

diff --git a/docs/_snippets/examples/bottom-toolbar-editor.html b/docs/_snippets/examples/bottom-toolbar-editor.html
@@ -44,7 +44,7 @@
 	}
 </style>
 
-<div id="editor">
+<div class="ck ck-content" id="editor">
 	<div id="editor-content">
 		<figure class="image image_resized" style="width: 65px;">
 			<img

diff --git a/docs/_snippets/examples/classic-editor-short.html b/docs/_snippets/examples/classic-editor-short.html
@@ -1,4 +1,4 @@
-<div id="snippet-classic-editor-short">
+<div class="ck ck-content" id="snippet-classic-editor-short">
 	<h2>Walking the capitals of Europe: Warsaw</h2>
 	<p>The best time to visit the city is July and August when it’s cool enough not to break a sweat and hot enough to enjoy summer. The city, which has quite a combination of both old and modern textures, is located by the river of Vistula.</p>
 	<p>The historic <strong>Old Town</strong>, reconstructed after World War II, with its late 18th-century characteristics, is a must-see. You can start your walk from <strong>Nowy Świat Street</strong> which will take you straight to the Old Town.</p>

diff --git a/docs/_snippets/examples/classic-editor.html b/docs/_snippets/examples/classic-editor.html
@@ -1,4 +1,4 @@
-<div id="snippet-classic-editor">
+<div class="ck ck-content" id="snippet-classic-editor">
 	<h2>The three greatest things you learn from traveling</h2>
 
 	<p>Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>

diff --git a/docs/_snippets/examples/inline-editor.html b/docs/_snippets/examples/inline-editor.html
@@ -1,4 +1,4 @@
-<div id="snippet-inline-editor">
+<div class="ck ck-content" id="snippet-inline-editor">
 	<header data-inline-inject="true">
 		<h2>Gone traveling</h2>
 		<h3>Monthly travel news and inspiration</h3>
@@ -9,7 +9,7 @@ <h3>Destination of the Month</h3>
 
 		<h4>Valletta</h4>
 
-		<figure class="image image-style-align-right" style="width: 50%;">
+		<figure class="image image-style-align-left" style="width: 50%;">
 			<img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg" srcset="%BASE_PATH%/assets/img/malta.jpg, %BASE_PATH%/assets/img/malta_2x.jpg 2x">
 			<figcaption>It's siesta time in Valletta.</figcaption>
 		</figure>

diff --git a/docs/_snippets/examples/mermaid.html b/docs/_snippets/examples/mermaid.html
@@ -1,5 +1,5 @@
 <script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
-<div id="mermaid">
+<div class="ck ck-content" id="mermaid">
     <h2>CKEditor timeline diagram</h2>
     <pre spellcheck="false"><code class="language-mermaid">
     timeline

diff --git a/docs/_snippets/examples/multi-root-editor.html b/docs/_snippets/examples/multi-root-editor.html
@@ -62,7 +62,7 @@ <h3>Monthly travel news and inspiration</h3>
 			</div>
 		</div>
 		<div class="editor">
-			<div id="content">
+			<div class="ck ck-content" id="content">
 				<h3>Destination of the Month</h3>
 
 				<figure class="image image-style-side">

diff --git a/docs/_snippets/features/image-upload.html b/docs/_snippets/features/image-upload.html
@@ -1,3 +1,3 @@
-<div id="snippet-image-upload">
+<div class="ck ck-content" id="snippet-image-upload">
 	<p>Paste or drop an image directly into the editor. You can also use the "Insert image" button in the toolbar.</p>
 </div>
diff --git a/docs/_snippets/features/mathtype.html b/docs/_snippets/features/mathtype.html
@@ -5,7 +5,7 @@
 	}
 </style>
 
-<div id="mathtype-editor">
+<div class="ck ck-content" id="mathtype-editor">
 	<p>In elementary algebra, the <strong>quadratic formula</strong> is the solution of the quadratic equation. </p>
 	<p style="text-align:center;">
   		<span class="ck-math-widget ck-widget" contenteditable="false">

diff --git a/docs/_snippets/features/placeholder-custom.html b/docs/_snippets/features/placeholder-custom.html
@@ -5,6 +5,6 @@
 }
 </style>
 
-<div id="snippet-placeholder-custom">
+<div class="ck ck-content" id="snippet-placeholder-custom">
 	<p></p>
 </div>
diff --git a/docs/_snippets/features/placeholder.html b/docs/_snippets/features/placeholder.html
@@ -1,3 +1,3 @@
-<div id="snippet-placeholder">
+<div class="ck ck-content" id="snippet-placeholder">
 	<p></p>
 </div>
diff --git a/docs/_snippets/features/read-only-hide-toolbar.html b/docs/_snippets/features/read-only-hide-toolbar.html
@@ -2,7 +2,7 @@
 	<button id="snippet-read-only-toggle-toolbar">Switch to read-only mode</button>
 </p>
 
-<div id="snippet-read-only-toolbar">
+<div class="ck ck-content" id="snippet-read-only-toolbar">
 	<h2>The sales data for Q4 for the <strong>Click&rsquo;n&rsquo;go</strong> product line</h2>
 
 <table border="1" cellpadding="1" cellspacing="1" style="width:500px">

diff --git a/docs/_snippets/features/read-only.html b/docs/_snippets/features/read-only.html
@@ -2,7 +2,7 @@
 	<button id="snippet-read-only-toggle">Switch to read-only mode</button>
 </p>
 
-<div id="snippet-read-only">
+<div class="ck ck-content" id="snippet-read-only">
 	<h2>The sales data for Q3 for the <strong>Click&rsquo;n&rsquo;go</strong> product line</h2>
 
 <table border="1" cellpadding="1" cellspacing="1" style="width:500px">

diff --git a/docs/_snippets/features/ui-language-content.html b/docs/_snippets/features/ui-language-content.html
@@ -1,4 +1,4 @@
-<div id="snippet-ui-language-content">
+<div class="ck ck-content" id="snippet-ui-language-content">
 	<h2>لغة</h2>
 	<p>اللغة نسق من الإشارات والرموز، يشكل أداة من أدوات المعرفة، وتعتبر اللغة أهم وسائل التفاهم والاحتكاك بين أفراد المجتمع في جميع ميادين الحياة. وبدون اللغة يتعذر نشاط الناس المعرفي. وترتبط اللغة بالتفكير ارتباطًا وثيقًا؛ فأفكار الإنسان تصاغ دومًا في قالب لغوي، حتى في حال تفكيره الباطني. ومن خلال اللغة فقط تحصل الفكرة على وجودها الواقعي. كما ترمز اللغة إلى الأشياء المنعكسة فيها.</p>
 	<p><sup>Source: <a href="https://ar.wikipedia.org/wiki/%D9%84%D8%BA%D8%A9#:~:text=%D8%A7%D9%84%D9%84%D8%BA%D8%A9%20%D9%87%D9%8A%20%D9%86%D8%B3%D9%82%20%D8%B9%D9%84%D9%89%20%D9%85%D9%86,%D8%AD%D8%AA%D9%89%20%D9%81%D9%8A%20%D8%AD%D8%A7%D9%84%20%D8%AA%D9%81%D9%83%D9%8A%D8%B1%D9%87%20%D8%A7%D9%84%D8%A8%D8%A7%D8%B7%D9%86%D9%8A.">Wikipedia</a></sup></p>

diff --git a/docs/_snippets/features/ui-language-rtl.html b/docs/_snippets/features/ui-language-rtl.html
@@ -1,4 +1,4 @@
-<div id="snippet-ui-language-rtl">
+<div class="ck ck-content" id="snippet-ui-language-rtl">
 	<h2>لغة</h2>
 	<p>اللغة نسق من الإشارات والرموز، يشكل أداة من أدوات المعرفة، وتعتبر اللغة أهم وسائل التفاهم والاحتكاك بين أفراد المجتمع في جميع ميادين الحياة. وبدون اللغة يتعذر نشاط الناس المعرفي. وترتبط اللغة بالتفكير ارتباطًا وثيقًا؛ فأفكار الإنسان تصاغ دومًا في قالب لغوي، حتى في حال تفكيره الباطني. ومن خلال اللغة فقط تحصل الفكرة على وجودها الواقعي. كما ترمز اللغة إلى الأشياء المنعكسة فيها.</p>
 	<p><sup>Source: <a href="https://ar.wikipedia.org/wiki/%D9%84%D8%BA%D8%A9#:~:text=%D8%A7%D9%84%D9%84%D8%BA%D8%A9%20%D9%87%D9%8A%20%D9%86%D8%B3%D9%82%20%D8%B9%D9%84%D9%89%20%D9%85%D9%86,%D8%AD%D8%AA%D9%89%20%D9%81%D9%8A%20%D8%AD%D8%A7%D9%84%20%D8%AA%D9%81%D9%83%D9%8A%D8%B1%D9%87%20%D8%A7%D9%84%D8%A8%D8%A7%D8%B7%D9%86%D9%8A.">Wikipedia</a></sup></p>

diff --git a/docs/_snippets/features/ui-language.html b/docs/_snippets/features/ui-language.html
@@ -1,4 +1,4 @@
-<div id="snippet-ui-language">
+<div class="ck ck-content" id="snippet-ui-language">
 	<p>Un <strong>lenguaje</strong> (del <a href="http://es.wikipedia.org/wiki/Idioma_occitano">provenzal</a> <em>lenguatge</em> y este del <a href="http://es.wikipedia.org/wiki/Lat%C3%ADn">lat&iacute;n</a> <em>lingua</em>) es un sistema de <a href="http://es.wikipedia.org/wiki/Comunicaci%C3%B3n">comunicaci&oacute;n</a> estructurado para el que existe un <a href="http://es.wikipedia.org/wiki/Significado">contexto</a> de uso y ciertos principios combinatorios formales. Existen contextos tanto naturales como artificiales.</p>
 	<p><sup>Source: <a href="https://es.wikipedia.org/wiki/Lenguaje">Wikipedia</a></sup></p>
 </div>
diff --git a/docs/_snippets/features/update-placeholder.html b/docs/_snippets/features/update-placeholder.html
@@ -1,4 +1,4 @@
-<div id="snippet-update-placeholder">
+<div class="ck ck-content" id="snippet-update-placeholder">
     <p></p>
 </div>
 <button id="update-placeholder-button">Update placeholder</button>
diff --git a/docs/_snippets/features/wproofreader.html b/docs/_snippets/features/wproofreader.html
@@ -1,4 +1,4 @@
-<div id="snippet-wproofreader">
+<div class="ck ck-content" id="snippet-wproofreader">
 	<p>Warsaw is the capital adn largest city of Poland. The metropolis stands on the Vistula River in east-central Poland and its population is officially estimatd at 1.8 million residents within a greater metropolitan area of 3.1 million residents, which makes Warsaw the 7th most-populous capital city in the European Union. Warsaw is an alpha-global city, a major international tourist destination, and a significaant cultural, political, and economic hub. Its historical Old Town was designated a UNESCO World Heritage Site.</p>
 
 	<p>Warschau ist seit 1596 die Hauptstadt Polens und die fl&auml;chenm&auml;&szlig;ig gr&ouml;&szlig;te sowie mit &uuml;ber 1,75 Mio. Einwonern bev&ouml;lkerungsreichste Staddt des Landes. Als eines der wichtigsten Verkehrs-, wirtschaftlichen und Handelszentren Mittel- und Osteeuropas genie&szlig;t Warschau gro&szlig;e politische und kulturelle Bedetung. In der Stadt befinden sich zahlreiche Institutionen, Universit&auml;ten, Theater, Museen und Baudenkm&auml;ler.</p>

diff --git a/docs/_snippets/framework/development-tools/inspector.html b/docs/_snippets/framework/development-tools/inspector.html
@@ -1,4 +1,4 @@
-<div id="snippet-classic-editor">
+<div class="ck ck-content" id="snippet-classic-editor">
 	<h2>CKEditor 5 inspector demo</h2>
 
 	<p>Click the button below to enable the <a href="https://github.com/ckeditor/ckeditor5-inspector">CKEditor 5 inspector</a> for this editor instance.</p>

diff --git a/docs/_snippets/framework/tutorials/block-widget.html b/docs/_snippets/framework/tutorials/block-widget.html
@@ -21,7 +21,7 @@
 	}
 </style>
 
-<div id="snippet-block-widget">
+<div class="ck ck-content" id="snippet-block-widget">
 	<p>This is a simple box:</p>
 
 	<section class="simple-box">

diff --git a/docs/_snippets/framework/tutorials/external-data-widget.html b/docs/_snippets/framework/tutorials/external-data-widget.html
@@ -19,7 +19,7 @@
 	}
 </style>
 
-<div id="snippet-external-data-widget">
+<div class="ck ck-content" id="snippet-external-data-widget">
 	<h2>Current exchange rate fetched from Binance (updates every 10 seconds):</h2>
 	<p>Bitcoin rate:&nbsp;<span data-resource-url="https://api2.binance.com/api/v3/ticker/24hr?symbol=BTCUSDT"></span></p>
 </div>
diff --git a/docs/_snippets/framework/tutorials/inline-widget.html b/docs/_snippets/framework/tutorials/inline-widget.html
@@ -12,6 +12,6 @@
 	}
 </style>
 
-<div id="snippet-inline-widget">
+<div class="ck ck-content" id="snippet-inline-widget">
 	<p>Hello <span class="placeholder">{first name}</span> <span class="placeholder">{surname}</span>!</p>
 </div>
diff --git a/docs/_snippets/framework/tutorials/using-react-in-widget.html b/docs/_snippets/framework/tutorials/using-react-in-widget.html
@@ -153,7 +153,7 @@
 }
 </style>
 
-<div id="snippet-react-in-widget">
+<div class="ck ck-content" id="snippet-react-in-widget">
 	<div class="app"></div>
 </div>
 

diff --git a/docs/_snippets/installation/getting-and-setting-data/manualsave.html b/docs/_snippets/installation/getting-and-setting-data/manualsave.html
@@ -1,13 +1,13 @@
-<div id="snippet-manualsave">
+<div class="ck ck-content" id="snippet-manualsave">
 	<p>Change the content of this editor, then save it on the server.</p>
 </div>
 
-<div id="snippet-manualsave-header">
-	<div id="snippet-manualsave-server">
-		<div id="snippet-manualsave-server_label">HTTP server lag (ms):</div>
+<div class="ck ck-content" id="snippet-manualsave-header">
+	<div class="ck ck-content" id="snippet-manualsave-server">
+		<div class="ck ck-content" id="snippet-manualsave-server_label">HTTP server lag (ms):</div>
 		<input id="snippet-manualsave-lag" type="number" value="500" step="100" min="0" max="9000">
 	</div>
-	<div id="snippet-manualsave-container">
+	<div class="ck ck-content" id="snippet-manualsave-container">
 		<span id="snippet-manualsave-spinner"></span>
 		<input id="snippet-manualsave-save" type="submit" value="Save">
 	</div>

diff --git a/docs/_snippets/support/managing-ckeditor-logo-position.html b/docs/_snippets/support/managing-ckeditor-logo-position.html
@@ -1,4 +1,4 @@
-<div id="snippet-managing-ckeditor-logo-position">
+<div class="ck ck-content" id="snippet-managing-ckeditor-logo-position">
 	<h2>Taj Mahal: A breathtaking ode to love</h2>
 
 	<figure class="image image-style-side" height="400">

diff --git a/docs/_snippets/support/managing-ckeditor-logo-styling.html b/docs/_snippets/support/managing-ckeditor-logo-styling.html
@@ -1,5 +1,5 @@
 <div class="custom-theme-editor-wrapper">
-	<div id="snippet-managing-ckeditor-logo-styling">
+	<div class="ck ck-content" id="snippet-managing-ckeditor-logo-styling">
 		<h2>Taj Mahal: A breathtaking ode to love</h2>
 
 		<figure class="image image-style-side" height="400">

diff --git a/docs/_snippets/tutorials/abbreviation-level-1.html b/docs/_snippets/tutorials/abbreviation-level-1.html
@@ -1,4 +1,4 @@
-<div id="snippet-abbreviation-plugin">
+<div class="ck ck-content" id="snippet-abbreviation-plugin">
     <h2>Abbreviation plugin</h2>
     <p>CKEditor 5 is a modern, feature-rich, world-class <abbr title="What You See Is What You Get">WYSIWYG</abbr> editor.</p>
 </div>

diff --git a/docs/_snippets/tutorials/abbreviation-level-2.html b/docs/_snippets/tutorials/abbreviation-level-2.html
@@ -1,4 +1,4 @@
-<div id="snippet-abbreviation-plugin">
+<div class="ck ck-content" id="snippet-abbreviation-plugin">
     <h2>Abbreviation plugin</h2>
     <p>CKEditor 5 is a modern, feature-rich, world-class <abbr title="What You See Is What You Get">WYSIWYG</abbr> editor.</p>
 </div>

diff --git a/docs/_snippets/tutorials/abbreviation-level-3.html b/docs/_snippets/tutorials/abbreviation-level-3.html
@@ -1,4 +1,4 @@
-<div id="snippet-abbreviation-plugin">
+<div class="ck ck-content" id="snippet-abbreviation-plugin">
     <h2>Abbreviation plugin</h2>
     <p>CKEditor 5 is a modern, feature-rich, world-class <abbr title="What You See Is What You Get">WYSIWYG</abbr> editor.</p>
 </div>

diff --git a/docs/_snippets/tutorials/timestamp-plugin.html b/docs/_snippets/tutorials/timestamp-plugin.html
@@ -1,4 +1,4 @@
-<div id="snippet-timestamp-plugin">
+<div class="ck ck-content" id="snippet-timestamp-plugin">
     <h2>The timestamp plugin</h2>
     <p>Use the timestamp toolbar button to insert current date and time.</p>
 

diff --git a/packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-options.html b/packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-options.html
@@ -1,4 +1,4 @@
-<div id="snippet-custom-text-alignment-options">
+<div class="ck ck-content" id="snippet-custom-text-alignment-options">
 	<h2>The three greatest things you learn from traveling</h2>
 
 	<p style="text-align: right">Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>

diff --git a/packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-toolbar.html b/packages/ckeditor5-alignment/docs/_snippets/features/custom-text-alignment-toolbar.html
@@ -1,4 +1,4 @@
-<div id="snippet-custom-text-alignment-toolbar">
+<div class="ck ck-content" id="snippet-custom-text-alignment-toolbar">
 	<h2>The three greatest things you learn from traveling</h2>
 
 	<p style="text-align: right">Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>

diff --git a/packages/ckeditor5-alignment/docs/_snippets/features/text-alignment.html b/packages/ckeditor5-alignment/docs/_snippets/features/text-alignment.html
@@ -1,4 +1,4 @@
-<div id="snippet-text-alignment">
+<div class="ck ck-content" id="snippet-text-alignment">
 	<h2 style="text-align: right">The three greatest things you learn from traveling</h2>
 
 	<p style="text-align: right">Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>

diff --git a/packages/ckeditor5-autoformat/docs/_snippets/features/autoformat.html b/packages/ckeditor5-autoformat/docs/_snippets/features/autoformat.html
@@ -1,5 +1,5 @@
 <script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
-<div id="snippet-autoformat">
+<div class="ck ck-content" id="snippet-autoformat">
 	<p>This is the <a href="https://ckeditor.com">CKEditor&nbsp;5</a> autoformatting feature.</p>
 	<p>Use Markdown syntax shortcodes to format content on the go. For example:</p>
 	<ul>

diff --git a/packages/ckeditor5-autosave/docs/_snippets/features/autosave.html b/packages/ckeditor5-autosave/docs/_snippets/features/autosave.html
@@ -1,18 +1,18 @@
-<div id="snippet-autosave">
+<div class="ck ck-content" id="snippet-autosave">
 	<p>Type some text or input some rich content to test the autosave feature.</p>
 </div>
 
-<div id="snippet-autosave-header">
-	<div id="snippet-autosave-status">
-		<div id="snippet-autosave-status_label">Status:</div>
-		<div id="snippet-autosave-status_spinner">
+<div class="ck ck-content" id="snippet-autosave-header">
+	<div class="ck ck-content" id="snippet-autosave-status">
+		<div class="ck ck-content" id="snippet-autosave-status_label">Status:</div>
+		<div class="ck ck-content" id="snippet-autosave-status_spinner">
 			<span id="snippet-autosave-status_spinner-label"></span>
 			<span id="snippet-autosave-status_spinner-loader"></span>
 		</div>
 	</div>
 
-	<div id="snippet-autosave-server">
-		<div id="snippet-autosave-server_label">HTTP server lag (ms):</div>
+	<div class="ck ck-content" id="snippet-autosave-server">
+		<div class="ck ck-content" id="snippet-autosave-server_label">HTTP server lag (ms):</div>
 		<input id="snippet-autosave-lag" type="number" value="500" step="100" min="0" max="9000">
 	</div>
 </div>

diff --git a/packages/ckeditor5-basic-styles/docs/_snippets/features/basic-styles.html b/packages/ckeditor5-basic-styles/docs/_snippets/features/basic-styles.html
@@ -1,4 +1,4 @@
-<div id="snippet-basic-styles">
+<div class="ck ck-content" id="snippet-basic-styles">
 	<p>When you&nbsp;need to make something seem important, <strong>bold is the right choice</strong>.</p>
 	<p>You can use italics for foreign words like the Greek&nbsp;<em>t&yacute;pos</em> &mdash; &ldquo;reflection, form&rdquo; and&nbsp;<em>gr&aacute;phō</em> &mdash; &ldquo;I am writing&rdquo;, which together form &ldquo;typography&rdquo;.</p>
 	<p>Underlined text <u>should be used with extreme caution as it stands out a lot</u>.</p>

diff --git a/packages/ckeditor5-block-quote/docs/_snippets/features/block-quote.html b/packages/ckeditor5-block-quote/docs/_snippets/features/block-quote.html
@@ -1,4 +1,4 @@
-<div id="snippet-block-quote">
+<div class="ck ck-content" id="snippet-block-quote">
 	<h3>The Famous Einstein Quote that never was</h3>
 
 	<p>You might have come across the following quote in the past few years:</p>

diff --git a/packages/ckeditor5-block-quote/docs/_snippets/features/nested-block-quote.html b/packages/ckeditor5-block-quote/docs/_snippets/features/nested-block-quote.html
@@ -1,4 +1,4 @@
-<div id="snippet-nested-block-quote">
+<div class="ck ck-content" id="snippet-nested-block-quote">
 	<p>Re: Material usage information</p>
 
 	<blockquote>

diff --git a/packages/ckeditor5-ckbox/docs/_snippets/features/ckbox.html b/packages/ckeditor5-ckbox/docs/_snippets/features/ckbox.html
@@ -1,4 +1,4 @@
-<div id="snippet-ckbox">
+<div class="ck ck-content" id="snippet-ckbox">
 	<h2>Uploading images</h2>
 	<p>To upload an image using CKBox, do the following:</p>
 	<ol>

diff --git a/packages/ckeditor5-ckfinder/docs/_snippets/features/ckfinder-options.html b/packages/ckeditor5-ckfinder/docs/_snippets/features/ckfinder-options.html
@@ -1,3 +1,3 @@
-<div id="snippet-ckfinder-options">
+<div class="ck ck-content" id="snippet-ckfinder-options">
 	Use toolbar button to insert image or link to a file.
 </div>
diff --git a/packages/ckeditor5-ckfinder/docs/_snippets/features/ckfinder-upload-only.html b/packages/ckeditor5-ckfinder/docs/_snippets/features/ckfinder-upload-only.html
@@ -1,4 +1,4 @@
-<div id="snippet-ckfinder-upload-only">
+<div class="ck ck-content" id="snippet-ckfinder-upload-only">
 	<p><strong>CKEditor 5</strong> offers multiple ways to include images in your rich content. You can choose whichever best suits your needs.</p>
 	<p>To upload an image, you can paste it or drag and drop it into the editor.</p>
 	<p>Alternatively, use the toolbar button to insert an image selected from your disk.</p>

diff --git a/packages/ckeditor5-ckfinder/docs/_snippets/features/ckfinder.html b/packages/ckeditor5-ckfinder/docs/_snippets/features/ckfinder.html
@@ -1,4 +1,4 @@
-<div id="snippet-ckfinder">
+<div class="ck ck-content" id="snippet-ckfinder">
 	<p><strong>CKEditor 5</strong> offers multiple ways to include images in your rich content. You can choose whichever best suits your needs.</p>
 	<p>To upload an image, you can paste it or drag and drop it into the editor.</p>
 	<p>Alternatively, use the toolbar button to open the CKFinder file manager. Use the file manager's interface to insert an image or a link to a file. Thanks to CKFinder, you can also edit images, organize them into folders, or delete them from the server.</p>

diff --git a/packages/ckeditor5-clipboard/docs/_snippets/features/block-balloon-drag-drop.html b/packages/ckeditor5-clipboard/docs/_snippets/features/block-balloon-drag-drop.html
@@ -1,5 +1,5 @@
 <div class="experimental-d-d">
-	<div id="snippet-block-balloon-drag-drop">
+	<div class="ck ck-content" id="snippet-block-balloon-drag-drop">
 		<h2 style="text-align: center">The Flavorful Tuscany Meetup</h2>
 		<h3 style="text-align: center">Welcome letter</h3>
 		<p>Dear Guest,</p>

diff --git a/packages/ckeditor5-clipboard/docs/_snippets/features/block-drag-drop.html b/packages/ckeditor5-clipboard/docs/_snippets/features/block-drag-drop.html
@@ -1,5 +1,5 @@
 <div class="experimental-d-d">
-	<div id="snippet-block-drag-drop">
+	<div class="ck ck-content" id="snippet-block-drag-drop">
 		<h2 style="text-align: center">The Flavorful Tuscany Meetup</h2>
 		<h3 style="text-align: center">Welcome letter</h3>
 		<p>Dear Guest,</p>

diff --git a/packages/ckeditor5-clipboard/docs/_snippets/features/drag-drop.html b/packages/ckeditor5-clipboard/docs/_snippets/features/drag-drop.html
@@ -1,7 +1,7 @@
 <div class="snippet-drag-drop-wrapper">
 	<h3>List of contacts</h3>
 	<ul class="contacts tour-balloon-visible"></ul>
-	<div id="snippet-drag-drop">
+	<div class="ck ck-content" id="snippet-drag-drop">
 		<h2>The Annual Meeting of Fictional Characters</h2>
 		<h3>Announcement</h3>
 		<p>It is with great pleasure that we hereby announce that the theme of this year’s meeting is &ldquo;<strong>E-ink Technology and

diff --git a/packages/ckeditor5-clipboard/docs/_snippets/features/paste-plain-text.html b/packages/ckeditor5-clipboard/docs/_snippets/features/paste-plain-text.html
@@ -1,4 +1,4 @@
-<div id="snippet-paste-plain-text">
+<div class="ck ck-content" id="snippet-paste-plain-text">
 	<h2>On emphasis</h2>
 	<p>In typography, emphasis is the strengthening of words using a font in a different style from the surrounding text. This includes <em>italic</em>, <strong>bold</strong>, <u>underlined</u>, and <s>strikethrough</s> typefaces.</p>
 	<h3>Italic type</h3>

diff --git a/packages/ckeditor5-easy-image/docs/_snippets/features/easy-image.html b/packages/ckeditor5-easy-image/docs/_snippets/features/easy-image.html
@@ -1,4 +1,4 @@
-<div id="snippet-image-upload">
+<div class="ck ck-content" id="snippet-image-upload">
 	<p><strong>CKEditor 5</strong> offers multiple ways to include images in your rich content. You can choose whichever best suits your needs. Use the classic interface or boost your productivity with advanced image handling.</p>
 	<p>Paste or drag and drop an image directly into the editor. You can also use the insert image button in the toolbar.</p>
 </div>
diff --git a/...ckeditor5-engine/docs/_snippets/framework/extending-content-add-external-link-target.html b/...ckeditor5-engine/docs/_snippets/framework/extending-content-add-external-link-target.html
@@ -4,7 +4,7 @@
 	}
 </style>
 
-<div id="snippet-link-external">
+<div class="ck ck-content" id="snippet-link-external">
 	<p>External links in this <a href="https://ckeditor.com">editor</a> have a <code>target="_blank"</code>
 	<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes">attribute</a> and will open in a new
 	<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">window</a>.</p>

diff --git a/packages/ckeditor5-engine/docs/_snippets/framework/extending-content-add-heading-class.html b/packages/ckeditor5-engine/docs/_snippets/framework/extending-content-add-heading-class.html
@@ -7,7 +7,7 @@
 	}
 </style>
 
-<div id="snippet-heading-class">
+<div class="ck ck-content" id="snippet-heading-class">
 	<h2>Heading with <code>.my-heading</code> class</h2>
 	<h3>Regular heading</h3>
 	<p>Some content.</p>

diff --git a/packages/ckeditor5-engine/docs/_snippets/framework/extending-content-add-link-class.html b/packages/ckeditor5-engine/docs/_snippets/framework/extending-content-add-link-class.html
@@ -8,7 +8,7 @@
 	}
 </style>
 
-<div id="snippet-link-classes">
+<div class="ck ck-content" id="snippet-link-classes">
 	<p>All links in this <a href="https://ckeditor.com">editor</a> have a custom <code>.my-green-link</code>
 	CSS <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> attribute.</p>
 </div>