Setup new component for text editor

src/Bundle/ChillActivityBundle/Form/ActivityType.php

@@ -207,13 +207,14 @@ class ActivityType extends AbstractType
             ]);
         }
 
-        if ($activityType->isVisible('comment')) {
+/*        if ($activityType->isVisible('comment')) {
             $builder->add('comment', CommentType::class, [
+//                'disable_editor' => true,
                 'label' => empty($activityType->getLabel('comment'))
                     ? 'activity.comment' : $activityType->getLabel('comment'),
                 'required' => $activityType->isRequired('comment'),
             ]);
-        }
+        }*/
 
         if ($activityType->isVisible('privateComment')) {
             $builder->add('privateComment', PrivateCommentType::class, [

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue

@@ -2,20 +2,23 @@
     <concerned-groups v-if="hasPerson" />
     <social-issues-acc v-if="hasSocialIssues" />
     <location v-if="hasLocation" />
+    <comment-editor v-if="isSimpleEditor"/>
 </template>
 
 <script>
 import ConcernedGroups from "./components/ConcernedGroups.vue";
 import SocialIssuesAcc from "./components/SocialIssuesAcc.vue";
 import Location from "./components/Location.vue";
+import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor.vue";
 
 export default {
     name: "App",
-    props: ["hasSocialIssues", "hasLocation", "hasPerson"],
+    props: ["hasSocialIssues", "hasLocation", "hasPerson", "isSimpleEditor"],
     components: {
         ConcernedGroups,
         SocialIssuesAcc,
         Location,
+        CommentEditor
     },
 };
 </script>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js

@@ -14,18 +14,21 @@ const i18n = _createI18n(activityMessages);
 const hasSocialIssues = document.querySelector("#social-issues-acc") !== null;
 const hasLocation = document.querySelector("#location") !== null;
 const hasPerson = document.querySelector("#add-persons") !== null;
+const isSimpleEditor = true;
 
 const app = createApp({
   template: `<app
        :hasSocialIssues="hasSocialIssues"
        :hasLocation="hasLocation"
        :hasPerson="hasPerson"
+       :isSimpleEditor = "isSimpleEditor"
     ></app>`,
   data() {
     return {
       hasSocialIssues,
       hasLocation,
       hasPerson,
+      isSimpleEditor
     };
   },
 })

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

@@ -80,9 +80,11 @@
     {{ form_row(form.travelTime) }}
 {% endif %}
 
-{%- if form.comment is defined -%}
-    {{ form_row(form.comment) }}
-{% endif %}
+{#{%- if form.comment is defined -%}#}
+{#    {{ form_row(form.comment) }}#}
+{#{% endif %}#}
+
+    <div id="add-comment"></div>
 
 {%- if form.privateComment is defined -%}
     {{ form_row(form.privateComment) }}
@@ -126,4 +128,4 @@
 
 {% block css %}
     {{ encore_entry_link_tags('mod_pickentity_type') }}
-{% endblock %}
+{% endblock %}

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+import CKEditor from "@ckeditor/ckeditor5-vue";
+import ClassicEditor from "../../module/ckeditor5/editor_config";
+
+export default {
+    name: "CommentEditor",
+    components: {
+        ckeditor: CKEditor.component,
+    },
+    data() {
+        return {
+            editor: ClassicEditor,
+            loading: false,
+            lastRecordedContent: null,
+            content: '',
+            richEditor: true,
+        };
+    },
+    props: {
+
+    }
+};
+</script>
+
+<template>
+    <teleport to="#add-comment">
+        <div>
+            <label class="col-form-label" for="content">{{
+                    $t("comment.label")
+                }}</label>
+
+            <div class="text-md-end">
+                <span class="d-block d-sm-inline-block mb-md-2">
+                  <a class="flag-toggle">
+                    <span :class="{ on: false }">{{ $t("comment.editor_simple") }}</span>
+                    <i
+                        class="fa"
+                        :class="{
+                        'fa-toggle-on': true,
+                        'fa-toggle-on fa-flip-horizontal': false,
+                      }"
+                    />
+                    <span :class="{ on: true }">{{ $t("comment.editor_rich") }}</span>
+                  </a>
+                </span>
+            </div>
+
+            <div v-if="richEditor">
+                <ckeditor
+                    name="content"
+                    :editor="editor"
+                    v-model="content"
+                    tag-name="textarea"
+                />
+            </div>
+        </div>
+    </teleport>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts

@@ -54,6 +54,11 @@ const messages = {
             residential_address: "Adresse de résidence",
             located_at: "réside chez",
         },
+        comment: {
+            label: "Commentaire",
+            editor_simple: "Simple",
+            editor_rich: "Riche"
+        }
     },
 };