chore: upgrade to ckeditor 40.2

.stylelintrc

@@ -1,7 +1,6 @@
 {
   "extends": "stylelint-config-recommended",
   "rules": {
-    "at-rule-no-unknown": null,
-    "indentation": 4
+    "at-rule-no-unknown": null
   }
 }

app.js

@@ -50,6 +50,7 @@ ClassicEditor
 
         // Expose for playing in the console.
         window.editor = editor;
+        window.displaySource( editor );
     } )
     .catch( error => {
         console.error( error.stack );
@@ -61,6 +62,7 @@ window.displaySource = function( editor ) {
     prettydiff.options.force_indent = true;
     prettydiff.options.source = editor.getData();
 
-    document.getElementById( 'output' ).innerText = prettydiff();
-    hljs.highlightBlock( document.getElementById( 'output' ) );
+    document.getElementById( 'output' ).textContent = prettydiff();
+    document.getElementById( 'output' ).removeAttribute( 'data-highlighted' );
+    hljs.highlightElement( document.getElementById( 'output' ) );
 };

demo/symfonyapp/assets/controllers/editor_controller.js

@@ -2,34 +2,33 @@ import { Controller } from 'stimulus';
 
 /* ckeditor */
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
-import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph";
-import Heading from "@ckeditor/ckeditor5-heading/src/heading";
-import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold";
-import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
-import Image from "@ckeditor/ckeditor5-image/src/image";
-import HtmlEmbed from "@ckeditor/ckeditor5-html-embed/src/htmlembed";
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Image from '@ckeditor/ckeditor5-image/src/image';
+import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
 
 /* twig plugin */
 import TwigPlugin from 'ckeditor5-twig/twig/twigplugin';
 import 'ckeditor5-twig/twig/plugin.css';
 
 export default class extends Controller {
-	static values = {
-		variables: Object,
-	}
-
-	connect() {
-		ClassicEditor
-			.create( this.element, {
-				plugins: [ Essentials, Paragraph, Heading, Bold, Italic, HtmlEmbed, Image, TwigPlugin ],
-				toolbar: [ 'heading', 'bold', 'italic', 'htmlEmbed', 'twigCommands' ],
-				twig: {
-					variables: this.variablesValue || {},
-				}
-			} )
-			.catch( error => {
-				console.error( error );
-			} );
-	}
+    static values = {
+        variables: Object,
+    }
+    connect() {
+        ClassicEditor
+            .create( this.element, {
+                plugins: [ Essentials, Paragraph, Heading, Bold, Italic, HtmlEmbed, Image, TwigPlugin ],
+                toolbar: [ 'heading', 'bold', 'italic', 'htmlEmbed', 'twigCommands' ],
+                twig: {
+                    variables: this.variablesValue || {}
+                }
+            } )
+            .catch( error => {
+                console.error( error );
+            } );
+    }
 }

demo/symfonyapp/package.json

@@ -3,32 +3,33 @@
     "license": "UNLICENSED",
     "private": true,
     "scripts": {
-		"dev-server": "encore dev-server",
-		"dev": "encore dev",
-		"watch": "encore dev --watch",
-		"build": "encore production --progress"
+        "dev-server": "encore dev-server",
+        "dev": "encore dev",
+        "watch": "encore dev --watch",
+        "build": "encore production --progress"
     },
     "dependencies": {
-		"@ckeditor/ckeditor5-basic-styles": "^26.0.0",
-		"@ckeditor/ckeditor5-build-classic": "^26.0.0",
-		"@ckeditor/ckeditor5-essentials": "^26.0.0",
-		"@ckeditor/ckeditor5-heading": "^26.0.0",
-		"@ckeditor/ckeditor5-html-embed": "^26.0.0",
-		"@ckeditor/ckeditor5-image": "^26.0.0",
-		"@ckeditor/ckeditor5-paragraph": "^26.0.0",
-		"ckeditor5-twig": "mRoca/ckeditor5-twig#master"
+        "@ckeditor/ckeditor5-basic-styles": "^40.2.0",
+        "@ckeditor/ckeditor5-build-classic": "^40.2.0",
+        "@ckeditor/ckeditor5-essentials": "^40.2.0",
+        "@ckeditor/ckeditor5-heading": "^40.2.0",
+        "@ckeditor/ckeditor5-html-embed": "^40.2.0",
+        "@ckeditor/ckeditor5-image": "^40.2.0",
+        "@ckeditor/ckeditor5-paragraph": "^40.2.0",
+        "ckeditor5-twig": "mRoca/ckeditor5-twig#master"
     },
     "devDependencies": {
-		"@babel/preset-env": "^7.23.7",
-		"@ckeditor/ckeditor5-dev-translations": "^39.5.0",
-		"@symfony/stimulus-bridge": "^3.2.2",
-		"@symfony/webpack-encore": "^4.5.0",
-		"@webpack-cli/serve": "^2.0.5",
-		"core-js": "^3.0.0",
-		"regenerator-runtime": "^0.14.1",
-		"stimulus": "^3.2.2",
-		"webpack-notifier": "^1.6.0",
+        "@babel/core": "^7.23.7",
+        "@babel/preset-env": "^7.23.7",
+        "@ckeditor/ckeditor5-dev-translations": "^39.5.0",
+        "@symfony/stimulus-bridge": "^3.2.2",
+        "@symfony/webpack-encore": "^4.5.0",
+        "@webpack-cli/serve": "^2.0.5",
+        "core-js": "^3.35.0",
+        "regenerator-runtime": "^0.14.1",
+        "stimulus": "^3.2.2",
         "webpack": "^5.89.0",
-        "webpack-cli": "^5.1.4"
+        "webpack-cli": "^5.1.4",
+        "webpack-notifier": "^1.6.0"
     }
 }

demo/symfonyapp/webpack.config.js

@@ -50,11 +50,14 @@ Encore
     .addLoader( {
         test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
         loader: 'postcss-loader',
-        options: styles.getPostCssConfig( {
-            themeImporter: {
-                themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
-            }
-        } )
+        options: {
+            postcssOptions: styles.getPostCssConfig( {
+                themeImporter: {
+                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
+                },
+                minify: true
+            } )
+        }
     } )
 // ===============
 ;