Integrate Vue-based editor with rich and simple mode toggle

Replaced CKEditor initialization with a Vue-based editor component. Introduced a toggle to switch between rich and simple editing modes, persisting the state in local storage. Updated CKEditor dependency to version 45.1.0.

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

@@ -1,12 +1,32 @@
-import config from "./editor_config";
-import { ClassicEditor } from "ckeditor5";
+import { createApp } from "vue";
+import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 
 const ckeditorFields: NodeListOf<HTMLTextAreaElement> =
     document.querySelectorAll("textarea[ckeditor]");
 ckeditorFields.forEach((field: HTMLTextAreaElement): void => {
-    ClassicEditor.create(field, config).catch((error) => {
-        console.error(error.stack);
-        throw error;
-    });
+    const content = field.value;
+const div = document.createElement("div");
+
+    if (field.parentNode !== null) {
+        field.parentNode.insertBefore(div, field);
+    } else {
+        throw "parent is null";
+    }
+
+    createApp({
+        components: { CommentEditor },
+        template: `<comment-editor v-model="content" @input="handleInput"></comment-editor>`,
+        data() {
+            return {
+                content,
+            };
+        },
+        methods: {
+            handleInput() {
+                field.value = this.content;
+            },
+        },
+    }).mount(div);
+
+    field.style.display = "none";
 });
-//Fields.push.apply(Fields, document.querySelectorAll('.cf-fields textarea'));