replace ck-editor by new CommentEditor on every vuejs components

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);

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 {

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"],

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,

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 &&

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: {

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 || "";