Change logic to allow as many comment vue apps to be charged on same page as needed

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

@@ -1,36 +1,29 @@
 <template>
     <div>
-        <div class="comment-container" v-if="shouldRenderPublic">
-            <label class="col-form-label" for="content">{{
-                    $t("comment.label_public")
-                }}</label>
-            <comment-editor type="public"></comment-editor>
-        </div>
-        <div class="comment-container" v-if="shouldRenderPrivate">
-            <label class="col-form-label" for="content">{{
-                    $t("comment.label_private")
-                }}</label>
-            <comment-editor type="private"></comment-editor>
+        <div>
+            <comment-editor :isSimple="globalState.isSimple" @toggle="toggleEditorMode"></comment-editor>
         </div>
     </div>
 </template>
 
 <script>
+import { defineComponent, inject } from 'vue';
 import CommentEditor from "../CommentEditor/component/CommentEditor.vue";
 
-export default {
+export default defineComponent({
     name: "App",
     components: { CommentEditor },
-    props: {
-        commentMode: String,
-    },
-    computed: {
-        shouldRenderPublic() {
-            return this.commentMode === "public" || this.commentMode === "both";
-        },
-        shouldRenderPrivate() {
-            return this.commentMode === "private" || this.commentMode === "both";
-        },
-    },
-};
+    setup() {
+        const globalState = inject('globalState');
+        const toggleEditorMode = () => {
+            globalState.isSimple = !globalState.isSimple;
+            localStorage.setItem('editorMode', globalState.isSimple ? 'simple' : 'rich');
+        };
+
+        return {
+            globalState,
+            toggleEditorMode
+        };
+    }
+});
 </script>