WIP Allow for comment content to be submitted to backend

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

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div>
-            <comment-editor :isSimple="globalState.isSimple" @toggle="toggleEditorMode"></comment-editor>
+            <comment-editor :isSimple="globalState.isSimple" @toggle="toggleEditorMode" @change="handleChange"></comment-editor>
         </div>
     </div>
 </template>
@@ -15,14 +15,23 @@ export default defineComponent({
     components: { CommentEditor },
     setup() {
         const globalState = inject('globalState');
+        const fieldName = inject('fieldName')
         const toggleEditorMode = () => {
             globalState.isSimple = !globalState.isSimple;
             localStorage.setItem('editorMode', globalState.isSimple ? 'simple' : 'rich');
         };
 
+        const handleChange = (newContent) => {
+            const hiddenField = document.querySelector(`input[name="${fieldName}"]`);
+            if (hiddenField) {
+                hiddenField.value = newContent || '';
+            }
+        };
+
         return {
             globalState,
-            toggleEditorMode
+            toggleEditorMode,
+            handleChange
         };
     }
 });

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

@@ -7,6 +7,7 @@
                 :config="editorConfig"
                 v-model="content"
                 tag-name="textarea"
+                @input="emitChange"
             />
         </div>
         <div v-else class="editor-wrapper">
@@ -14,6 +15,7 @@
                 v-model="content"
                 name="content"
                 class="form-control"
+                @input="emitChange"
             ></textarea>
         </div>
         <a @click="toggleSimpleEditor" class="toggle-button btn btn-misc">{{ isSimple ? $t("mode.rich") : $t("mode.simple") }}</a>
@@ -45,12 +47,17 @@ export default defineComponent({
             emit("toggle");
         };
 
+        const emitChange = () => {
+            emit("change", content.value);
+        };
+
         return {
             isSimple,
             content,
             classicEditor,
             editorConfig,
-            toggleSimpleEditor
+            toggleSimpleEditor,
+            emitChange
         };
     }
 });

src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js

@@ -21,9 +21,11 @@ commentWidgets.forEach((commentContainer) => {
     template: `<app></app>`
   });
 
-  // Pass the global state to each app instance
+  const fieldName = commentContainer.dataset.fieldname;
+
   app.use(i18n)
-    .provide('globalState', globalState)  // Provide global state to components
+    .provide('globalState', globalState)
+    .provide( 'fieldName', fieldName)
     .component("app", App)
     .mount(commentContainer);
 });