From dcd1777a70c1caf18f984b0eb02767f6999459bf Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Mon, 17 Feb 2025 16:25:17 +0100
Subject: [PATCH] Pass content of the textEditor to the symfony form

---
 .../ChillMainBundle/Form/Type/CommentType.php |  2 +-
 .../public/chill/scss/comment-editor.scss     |  4 ++++
 .../public/module/ckeditor5/index.ts          |  6 ++---
 .../public/vuejs/CommentEditor/App.vue        | 15 ++++++------
 .../CommentEditor/component/CommentEditor.vue | 23 +++++--------------
 .../Resources/views/Form/fields.html.twig     |  4 ++--
 .../ChillMainBundle/chill.webpack.config.js   |  4 ----
 7 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Form/Type/CommentType.php b/src/Bundle/ChillMainBundle/Form/Type/CommentType.php
index 2b1d2f3e0..f12de11b0 100644
--- a/src/Bundle/ChillMainBundle/Form/Type/CommentType.php
+++ b/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());
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/comment-editor.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/comment-editor.scss
index f0411baff..1b76b6b0e 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/comment-editor.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/comment-editor.scss
@@ -33,3 +33,7 @@
 .editor-wrapper {
     position: relative;
 }
+
+.hidden-textarea {
+    display: none;
+}
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts b/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts
index 6d0597b78..3bf41a48a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts
+++ b/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>`
     });
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue
index 34eec1a0f..ab41c224c 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue
+++ b/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
         };
     }
 });
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue
index 893fa0a23..38e4a8b91 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue
+++ b/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>
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig
index 30230005e..20e763cda 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig
+++ b/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 %}
diff --git a/src/Bundle/ChillMainBundle/chill.webpack.config.js b/src/Bundle/ChillMainBundle/chill.webpack.config.js
index cc8761b25..88b537932 100644
--- a/src/Bundle/ChillMainBundle/chill.webpack.config.js
+++ b/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",
-  );
 };