From bb41af4ed2914d834b01a6e849ef46d4c2a94c67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Fri, 23 May 2025 13:51:44 +0200
Subject: [PATCH] replace ck-editor by new CommentEditor on every vuejs
 components

---
 .../public/module/ckeditor5/index.ts          |  2 +-
 .../AccompanyingCourse/components/Comment.vue | 15 +++-----------
 .../components/Resources/WriteComment.vue     | 15 +++-----------
 .../vuejs/AccompanyingCourseWorkEdit/App.vue  | 20 ++++---------------
 .../components/FormEvaluation.vue             | 16 +++------------
 .../components/MemberDetails.vue              | 13 +++---------
 .../components/PersonComment.vue              | 19 +++---------------
 7 files changed, 20 insertions(+), 80 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts b/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts
index 163ab012f..25ab1f55e 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts
@@ -5,7 +5,7 @@ const ckeditorFields: NodeListOf<HTMLTextAreaElement> =
     document.querySelectorAll("textarea[ckeditor]");
 ckeditorFields.forEach((field: HTMLTextAreaElement): void => {
     const content = field.value;
-const div = document.createElement("div");
+    const div = document.createElement("div");
 
     if (field.parentNode !== null) {
         field.parentNode.insertBefore(div, field);
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
index f063b7b8f..ec8cf1444 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
@@ -13,14 +13,7 @@
           $t("comment.label")
         }}</label>
 
-        <ckeditor
-          name="content"
-          :placeholder="$t('comment.content')"
-          :editor="classicEditor"
-          :config="editorConfig"
-          v-model="content"
-          tag-name="textarea"
-        />
+        <comment-editor v-model="content" />
 
         <div class="sub-comment">
           <div
@@ -61,15 +54,13 @@
 </template>
 
 <script>
-import { ClassicEditor } from "ckeditor5";
-import { Ckeditor } from "@ckeditor/ckeditor5-vue";
-import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
+import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 import { mapState } from "vuex";
 
 export default {
   name: "Comment",
   components: {
-    ckeditor: Ckeditor,
+    CommentEditor,
   },
   data() {
     return {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue
index 687e6fef4..416c6085c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/WriteComment.vue
@@ -18,14 +18,7 @@
         </h3>
       </template>
       <template #body>
-        <ckeditor
-          name="content"
-          :placeholder="$t('comment_placeholder')"
-          :editor="editor"
-          :config="editorConfig"
-          v-model="content"
-          tag-name="textarea"
-        />
+        <comment-editor v-model="content" />
       </template>
       <template #footer>
         <a class="btn btn-save" @click="saveAction">
@@ -39,15 +32,13 @@
 <script>
 import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
-import { Ckeditor } from "@ckeditor/ckeditor5-vue";
-import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
-import { ClassicEditor } from "ckeditor5";
+import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 
 export default {
   name: "WriteComment",
   components: {
     Modal,
-    ckeditor: Ckeditor,
+    CommentEditor,
   },
   props: ["resource"],
   emits: ["updateComment"],
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
index d6f564439..5337b274a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -34,22 +34,12 @@
 
     <div id="privateComment" class="action-row">
       <label class="col-form-label">{{ $t("private_comment") }}</label>
-      <ckeditor
-        v-model="privateComment"
-        :editor="classicEditor"
-        :config="editorConfig"
-        tag-name="textarea"
-      ></ckeditor>
+      <comment-editor v-model="privateComment"></comment-editor>
     </div>
 
     <div id="comment" class="action-row">
       <label class="col-form-label">{{ $t("comments") }}</label>
-      <ckeditor
-        v-model="note"
-        :editor="classicEditor"
-        :config="editorConfig"
-        tag-name="textarea"
-      ></ckeditor>
+      <comment-editor v-model="note"></comment-editor>
     </div>
 
     <div id="objectives" class="action-row">
@@ -461,9 +451,7 @@
 
 <script>
 import { mapState, mapGetters } from "vuex";
-import { Ckeditor } from "@ckeditor/ckeditor5-vue";
-import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
-import { ClassicEditor } from "ckeditor5";
+import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 import AddResult from "./components/AddResult.vue";
 import AddEvaluation from "./components/AddEvaluation.vue";
 import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
@@ -529,7 +517,7 @@ const i18n = {
 export default {
   name: "App",
   components: {
-    ckeditor: Ckeditor,
+    CommentEditor,
     AddResult,
     AddEvaluation,
     AddPersons,
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
index 1e3907b0e..f960e1aa5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
@@ -88,13 +88,7 @@
           $t("evaluation_public_comment")
         }}</label>
         <div class="col-sm-12">
-          <ckeditor
-            :editor="classicEditor"
-            :config="editorConfig"
-            :placeholder="$t('evaluation_comment_placeholder')"
-            v-model="comment"
-            tag-name="textarea"
-          ></ckeditor>
+          <comment-editor v-model:value="comment"></comment-editor>
         </div>
       </div>
 
@@ -273,9 +267,6 @@
 
 <script>
 import { ISOToDatetime } from "ChillMainAssets/chill/js/date";
-import { Ckeditor } from "@ckeditor/ckeditor5-vue";
-import { ClassicEditor } from "ckeditor5";
-import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
 import { mapState } from "vuex";
 import PickTemplate from "ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue";
 import { buildLink } from "ChillDocGeneratorAssets/lib/document-generator";
@@ -284,6 +275,7 @@ import { buildLinkCreate } from "ChillMainAssets/lib/entity-workflow/api";
 import { buildLinkCreate as buildLinkCreateNotification } from "ChillMainAssets/lib/entity-notification/api";
 import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
 import DropFileModal from "ChillDocStoreAssets/vuejs/DropFileWidget/DropFileModal.vue";
+import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 
 const i18n = {
   messages: {
@@ -322,8 +314,8 @@ export default {
   name: "FormEvaluation",
   props: ["evaluation", "docAnchorId"],
   components: {
+    CommentEditor,
     DropFileModal,
-    ckeditor: Ckeditor,
     PickTemplate,
     ListWorkflowModal,
     DocumentActionButtonsGroup,
@@ -371,8 +363,6 @@ export default {
   },
   computed: {
     ...mapState(["isPosting", "work", "me"]),
-    classicEditor: () => ClassicEditor,
-    editorConfig: () => classicEditorConfig,
     AmIRefferer() {
       return !(
         this.$store.state.work.accompanyingPeriod.user &&
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue
index ae5efc2a7..d514ab511 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/MemberDetails.vue
@@ -29,12 +29,7 @@
     </div>
 
     <div class="item-row comment">
-      <ckeditor
-        :editor="classicEditor"
-        :config="editorConfig"
-        v-model="comment"
-        tag-name="textarea"
-      />
+      <comment-editor v-model="comment" />
     </div>
 
     <div class="item-row participation-details">
@@ -103,15 +98,13 @@ div.participation-details {
 <script>
 import { mapGetters } from "vuex";
 import PersonRenderBox from "ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue";
-import { Ckeditor } from "@ckeditor/ckeditor5-vue";
-import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
-import { ClassicEditor } from "ckeditor5";
+import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 
 export default {
   name: "MemberDetails",
   components: {
     PersonRenderBox,
-    ckeditor: Ckeditor,
+    CommentEditor,
   },
   props: ["conc"],
   computed: {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue
index 631ca0dcd..99fb3ebfa 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue
@@ -1,30 +1,17 @@
 <template>
-  <ckeditor
-    name="content"
-    :placeholder="
-      $t('household_members_editor.positioning.comment_placeholder')
-    "
-    :editor="editor"
-    :config="editorConfig"
-    v-model="content"
-    tag-name="textarea"
-  />
+  <comment-editor v-model="content" />
 </template>
 
 <script>
-import { Ckeditor } from "@ckeditor/ckeditor5-vue";
-import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
-import { ClassicEditor } from "ckeditor5";
+import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 
 export default {
   name: "PersonComment.vue",
   components: {
-    ckeditor: Ckeditor,
+    CommentEditor,
   },
   props: ["conc"],
   computed: {
-    editor: () => ClassicEditor,
-    editorConfig: () => classicEditorConfig,
     content: {
       get() {
         return this.$props.conc.comment || "";