Pass content of the textEditor to the symfony form

src/Bundle/ChillMainBundle/Form/Type/CommentType.php

@@ -43,7 +43,7 @@ class CommentType extends AbstractType
 
         $builder->addEventListener(FormEvents::PRE_SUBMIT, function (FormEvent $event) {
             $data = $event->getForm()->getData();
-            $comment = $event->getData() ?? ['comment' => ''];
+            $comment = ['comment' => $event->getData()] ?? ['comment' => ''];
 
             if (null !== $data && $data->getComment() !== $comment['comment']) {
                 $data->setDate(new \DateTime());

src/Bundle/ChillMainBundle/Resources/public/chill/scss/comment-editor.scss

@@ -33,3 +33,7 @@
 .editor-wrapper {
     position: relative;
 }
+
+.hidden-textarea {
+    display: none;
+}

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

@@ -2,7 +2,7 @@ import App from "../../vuejs/CommentEditor/App.vue"
 import { createApp, reactive } from "vue";
 
 const ckeditorFields: NodeListOf<HTMLTextAreaElement> =
-    document.querySelectorAll(".vue-comment-editor");
+    document.querySelectorAll("[id^='comment-app']");
 
 const globalState = reactive({
     isSimple: localStorage.getItem('editorMode') === 'simple'
@@ -12,8 +12,8 @@ window.addEventListener('storage', () => {
 });
 
 ckeditorFields.forEach((field: HTMLTextAreaElement): void => {
-    console.log('field', field)
-    const app = createApp({
+    const app = createApp(App,{
+        fieldName: field.dataset.fieldName,
         template: `<app></app>`
     });
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue

@@ -1,7 +1,11 @@
 <template>
     <div>
         <div>
-            <comment-editor :isSimple="globalState.isSimple" @toggle="toggleEditorMode" @change="handleChange"></comment-editor>
+            <comment-editor
+                :isSimple="globalState.isSimple"
+                :fieldName="fieldName"
+                @toggle="toggleEditorMode"
+                ></comment-editor>
         </div>
     </div>
 </template>
@@ -13,22 +17,19 @@ import CommentEditor from "../CommentEditor/component/CommentEditor.vue";
 export default defineComponent({
     name: "App",
     components: { CommentEditor },
+    props: {
+        fieldName: String
+    },
     setup() {
-        console.log('im loaded')
         const globalState = inject('globalState');
         const toggleEditorMode = () => {
             globalState.isSimple = !globalState.isSimple;
             localStorage.setItem('editorMode', globalState.isSimple ? 'simple' : 'rich');
         };
 
-        const handleChange = (newContent) => {
-            console.log(newContent)
-        };
-
         return {
             globalState,
             toggleEditorMode,
-            handleChange
         };
     }
 });

src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue

@@ -2,20 +2,18 @@
     <div :class="{'editor-container': true, 'rich-editor-active': !isSimple}">
         <div v-if="!isSimple" class="editor-wrapper">
             <ckeditor
-                name="content"
+                :name="fieldName"
                 :editor="classicEditor"
                 :config="editorConfig"
-                v-model="content"
+                v-model.lazy="content"
                 tag-name="textarea"
-                @input="emitChange"
             />
         </div>
         <div v-else class="editor-wrapper">
             <textarea
-                v-model="content"
-                name="content"
+                v-model.lazy="content"
+                :name="fieldName"
                 class="form-control"
-                @input="emitChange"
             ></textarea>
         </div>
         <a @click="toggleSimpleEditor" class="toggle-button">{{ isSimple ? "rich" : "simple" }}</a>
@@ -23,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch, toRefs } from 'vue';
+import { defineComponent, ref, computed, toRefs } from 'vue';
 import { Ckeditor } from "@ckeditor/ckeditor5-vue";
 import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
 import { ClassicEditor } from "ckeditor5";
@@ -36,9 +34,9 @@ export default defineComponent({
     props: {
         type: String,
         isSimple: Boolean,
+        fieldName: String,
     },
     setup(props, { emit }) {
-        console.log("im loaded too")
         const { isSimple } = toRefs(props);
         const content = ref("");
         const classicEditor = ClassicEditor;
@@ -48,22 +46,13 @@ export default defineComponent({
             emit("toggle");
         };
 
-        const emitChange = () => {
-            emit("change", content.value);
-        };
-
         return {
             isSimple,
             content,
             classicEditor,
             editorConfig,
             toggleSimpleEditor,
-            emitChange
         };
     }
 });
 </script>
-
-<style scoped lang="scss">
-
-</style>

src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig

@@ -214,7 +214,7 @@
 
 {% block private_comment_widget %}
     {% for entry in form %}
-        <div class="vue-comment-editor">
+        <div id="comment-app-{{ form.vars.id }}" data-field-name="{{ form.vars.full_name }}">
             {{ form_widget(entry, { attr: { ckeditor: 'true' } }) }}
         </div>
     {% endfor %}
@@ -226,7 +226,7 @@
 
 {% block comment_widget %}
     {% for entry in form %}
-        <div class="vue-comment-editor">
+        <div id="comment-app-{{ form.vars.id }}" data-field-name="{{ form.vars.full_name }}">
             {{ form_widget(entry, { attr: { ckeditor: 'true' } }) }}
         </div>
     {% endfor %}

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

@@ -120,8 +120,4 @@ module.exports = function (encore, entries) {
     "vue_onthefly",
     __dirname + "/Resources/public/vuejs/OnTheFly/index.js",
   );
-  encore.addEntry(
-    "vue_comment_editor",
-    __dirname + "/Resources/public/vuejs/CommentEditor/index.js",
-  );
 };