Revert backend to original state and load commentEditor vue app anytime CommentType form field is used

src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig

@@ -84,16 +84,6 @@
     {{ form_row(form.comment) }}
 {% endif %}
 
-<div class="comment-container">
-    <label class="col-form-label col-sm-4" for="comment-widget-1">{{ 'comment_public'|trans }}</label>
-    <div id="comment-widget-1" data-fieldname="chill_activitybundle_activity[comment]"></div>
-</div>
-
-<div class="comment-container">
-    <label class="col-form-label col-sm-4" for="comment-widget-2">{{ 'comment_private'|trans }}</label>
-    <div id="comment-widget-2" data-fieldname="chill_activitybundle_activity[privateComment]"></div>
-</div>
-
 {%- if form.privateComment is defined -%}
     {{ form_row(form.privateComment) }}
 {% endif %}

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

@@ -3,12 +3,20 @@
 }
 
 .toggle-button {
+    background-color: white;
+    font-size: .8rem;
+    text-decoration: none;
     position: absolute;
     bottom: -10px;
-    left: 10px;
+    left: 20px;
     padding: 2px 6px;
     cursor: pointer;
     z-index: 10;
+    transition: left 0.1s ease-in-out;
+}
+
+.rich-editor-active .toggle-button {
+    bottom: 0;
 }
 
 .editor-wrapper textarea {
@@ -20,7 +28,6 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    width: 100%;
 }
 
 .editor-wrapper {

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

@@ -1,13 +1,23 @@
-import config from "./editor_config";
-import {ClassicEditor} from "ckeditor5";
+import App from "../../vuejs/CommentEditor/App.vue"
+import { createApp, reactive } from "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;
-        });
+    document.querySelectorAll(".vue-comment-editor");
+
+const globalState = reactive({
+    isSimple: localStorage.getItem('editorMode') === 'simple'
+});
+window.addEventListener('storage', () => {
+    globalState.isSimple = localStorage.getItem('editorMode') === 'simple';
+});
+
+ckeditorFields.forEach((field: HTMLTextAreaElement): void => {
+    console.log('field', field)
+    const app = createApp({
+        template: `<app></app>`
+    });
+
+    app.provide('globalState', globalState)
+        .component("app", App)
+        .mount(field);
 });
-//Fields.push.apply(Fields, document.querySelectorAll('.cf-fields textarea'));

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

@@ -14,18 +14,15 @@ export default defineComponent({
     name: "App",
     components: { CommentEditor },
     setup() {
+        console.log('im loaded')
         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 || '';
-            }
+            console.log(newContent)
         };
 
         return {

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="editor-container">
+    <div :class="{'editor-container': true, 'rich-editor-active': !isSimple}">
         <div v-if="!isSimple" class="editor-wrapper">
             <ckeditor
                 name="content"
@@ -18,7 +18,7 @@
                 @input="emitChange"
             ></textarea>
         </div>
-        <a @click="toggleSimpleEditor" class="toggle-button btn btn-misc">{{ isSimple ? $t("mode.rich") : $t("mode.simple") }}</a>
+        <a @click="toggleSimpleEditor" class="toggle-button">{{ isSimple ? "rich" : "simple" }}</a>
     </div>
 </template>
 
@@ -38,6 +38,7 @@ export default defineComponent({
         isSimple: Boolean,
     },
     setup(props, { emit }) {
+        console.log("im loaded too")
         const { isSimple } = toRefs(props);
         const content = ref("");
         const classicEditor = ClassicEditor;

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

@@ -1,31 +0,0 @@
-import { createApp, reactive } from "vue";
-import App from "./App.vue";
-import {_createI18n} from "ChillMainAssets/vuejs/_js/i18n";
-import { appMessages } from "ChillMainAssets/vuejs/CommentEditor/i18n";
-
-const i18n = _createI18n(appMessages);
-
-// Global reactive state to handle editorMode
-const globalState = reactive({
-  isSimple: localStorage.getItem('editorMode') === 'simple'
-});
-
-// Watch for changes to `localStorage` and update the state
-window.addEventListener('storage', () => {
-  globalState.isSimple = localStorage.getItem('editorMode') === 'simple';
-});
-
-const commentWidgets = document.querySelectorAll('[id^="comment-widget"]');
-commentWidgets.forEach((commentContainer) => {
-  const app = createApp({
-    template: `<app></app>`
-  });
-
-  const fieldName = commentContainer.dataset.fieldname;
-
-  app.use(i18n)
-    .provide('globalState', globalState)
-    .provide( 'fieldName', fieldName)
-    .component("app", App)
-    .mount(commentContainer);
-});

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

@@ -214,7 +214,9 @@
 
 {% block private_comment_widget %}
     {% for entry in form %}
-        {{ form_widget(entry) }}
+        <div class="vue-comment-editor">
+            {{ form_widget(entry, { attr: { ckeditor: 'true' } }) }}
+        </div>
     {% endfor %}
 {% endblock %}
 
@@ -224,7 +226,9 @@
 
 {% block comment_widget %}
     {% for entry in form %}
-        {{ form_widget(entry) }}
+        <div class="vue-comment-editor">
+            {{ form_widget(entry, { attr: { ckeditor: 'true' } }) }}
+        </div>
     {% endfor %}
 {% endblock comment_widget %}