replace ck-editor by new CommentEditor on every vuejs components

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