Upgrade CKEditor and refactor configuration with use of typescript

.changes/unreleased/Feature-20240531-190242.yaml

@@ -0,0 +1,6 @@
+kind: Feature
+body: |
+  Upgrade CKEditor and refactor configuration with use of typescript
+time: 2024-05-31T19:02:42.776662753+02:00
+custom:
+  Issue: ""

package.json

@@ -6,12 +6,13 @@
     "@apidevtools/swagger-cli": "^4.0.4",
     "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
-    "@ckeditor/ckeditor5-build-classic": "^35.3.2",
+    "@ckeditor/ckeditor5-build-classic": "^41.4.2",
-    "@ckeditor/ckeditor5-dev-utils": "^31.1.13",
+    "@ckeditor/ckeditor5-dev-utils": "^40.2.0",
     "@ckeditor/ckeditor5-dev-webpack-plugin": "^31.1.13",
-    "@ckeditor/ckeditor5-markdown-gfm": "^35.3.2",
+    "@ckeditor/ckeditor5-dev-translations": "^40.2.0",
-    "@ckeditor/ckeditor5-theme-lark": "^35.3.2",
+    "@ckeditor/ckeditor5-markdown-gfm": "^41.4.2",
-    "@ckeditor/ckeditor5-vue": "^4.0.1",
+    "@ckeditor/ckeditor5-theme-lark": "^41.4.2",
+    "@ckeditor/ckeditor5-vue": "^5.1.0",
     "@symfony/webpack-encore": "^4.1.0",
     "@tsconfig/node14": "^1.0.1",
       "@types/dompurify": "^3.0.5",
@@ -31,7 +32,7 @@
     "select2-bootstrap-theme": "0.1.0-beta.10",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.3.1",
-    "typescript": "^4.7.2",
+    "typescript": "^5.4.5",
     "vue-loader": "^17.0.0",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1"

src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/editor_config.ts

@@ -39,23 +39,5 @@ ClassicEditor.defaultConfig = {
             'redo'
         ]
     },
-    language: 'fr'
+    language: 'fr',
 };
-
-
-let Fields = [];
-Fields.push.apply(Fields, document.querySelectorAll('textarea[ckeditor]'));
-// enable for custom fields
-//Fields.push.apply(Fields, document.querySelectorAll('.cf-fields textarea'));
-
-Fields.forEach(function(field) {
-    ClassicEditor
-        .create( field )
-        .then( editor => {
-            //console.log( 'CkEditor was initialized', editor );
-        })
-        .catch( error => {
-            console.error( error.stack );
-        })
-    ;
-});

src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts

@@ -0,0 +1,15 @@
+import ClassicEditor from "./editor_config";
+
+const ckeditorFields: NodeListOf<HTMLTextAreaElement> = document.querySelectorAll('textarea[ckeditor]');
+ckeditorFields.forEach((field: HTMLTextAreaElement): void => {
+    ClassicEditor
+        .create( field )
+        .then( editor => {
+            //console.log( 'CkEditor was initialized', editor );
+        })
+        .catch( error => {
+            console.error( error.stack );
+        })
+    ;
+});
+//Fields.push.apply(Fields, document.querySelectorAll('.cf-fields textarea'));

src/Bundle/ChillMainBundle/chill.webpack.config.js

@@ -1,10 +1,10 @@
-const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
 const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
+const {CKEditorTranslationsPlugin} = require("@ckeditor/ckeditor5-dev-translations");
 
 buildCKEditor = function(encore)
 {
     encore
-        .addPlugin( new CKEditorWebpackPlugin( {
+        .addPlugin( new CKEditorTranslationsPlugin( {
             language: 'fr',
             addMainLanguageTranslationsToAllAssets: true,
             verbose: !encore.isProduction(),
@@ -65,7 +65,7 @@ module.exports = function(encore, entries)
     encore.addEntry('mod_collection', __dirname + '/Resources/public/module/collection/index.ts');
     encore.addEntry('mod_forkawesome', __dirname + '/Resources/public/module/forkawesome/index.js');
     encore.addEntry('mod_bootstrap', __dirname + '/Resources/public/module/bootstrap/index.js');
-    encore.addEntry('mod_ckeditor5', __dirname + '/Resources/public/module/ckeditor5/index.js');
+    encore.addEntry('mod_ckeditor5', __dirname + '/Resources/public/module/ckeditor5/index');
     encore.addEntry('mod_disablebuttons', __dirname + '/Resources/public/module/disable-buttons/index.js');
     encore.addEntry('mod_blur', __dirname + '/Resources/public/module/blur/index.js');
     encore.addEntry('mod_input_address', __dirname + '/Resources/public/vuejs/Address/mod_input_address_index.js');

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue

@@ -52,7 +52,7 @@
 
 <script>
 import CKEditor from '@ckeditor/ckeditor5-vue';
-import ClassicEditor from "ChillMainAssets/module/ckeditor5";
+import ClassicEditor from "../../../../../../ChillMainBundle/Resources/public/module/ckeditor5/editor_config";
 import { mapState } from "vuex";
 
 export default {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue

@@ -41,7 +41,7 @@
 import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import CKEditor from '@ckeditor/ckeditor5-vue';
-import ClassicEditor from "ChillMainAssets/module/ckeditor5";
+import ClassicEditor from "ChillMainAssets/module/ckeditor5/editor_config";
 
 export default {
    name: "WriteComment",

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue

@@ -331,7 +331,7 @@
 import {mapState, mapGetters,} from 'vuex';
 import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date';
 import CKEditor from '@ckeditor/ckeditor5-vue';
-import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
+import ClassicEditor from 'ChillMainAssets/module/ckeditor5/editor_config';
 import AddResult from './components/AddResult.vue';
 import AddEvaluation from './components/AddEvaluation.vue';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue

@@ -195,7 +195,7 @@
 <script>
 import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date';
 import CKEditor from '@ckeditor/ckeditor5-vue';
-import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
+import ClassicEditor from 'ChillMainAssets/module/ckeditor5/editor_config';
 import { mapGetters, mapState } from 'vuex';
 import PickTemplate from 'ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue';
 import {buildLink} from 'ChillDocGeneratorAssets/lib/document-generator';

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue

@@ -75,7 +75,7 @@ div.participation-details {
 import { mapGetters } from 'vuex';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 import CKEditor from '@ckeditor/ckeditor5-vue';
-import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
+import ClassicEditor from 'ChillMainAssets/module/ckeditor5/editor_config';
 
 export default {
   name: 'MemberDetails',

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue

@@ -10,7 +10,7 @@
 
 <script>
 import CKEditor from '@ckeditor/ckeditor5-vue';
-import ClassicEditor from "ChillMainAssets/module/ckeditor5";
+import ClassicEditor from "ChillMainAssets/module/ckeditor5/editor_config";
 
 export default {
   name: "PersonComment.vue",

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.ts

@@ -15,7 +15,7 @@ const personMessages = {
       person: {
          firstname: "Prénom",
          lastname: "Nom",
-         born: (ctx) => {
+         born: (ctx: {gender: "man"|"woman"|"unknown"}) => {
           if (ctx.gender === 'man') {
             return 'Né le';
           } else if (ctx.gender === 'woman') {