Implement localStorage and toggling of simple/rich text editor

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

@@ -1,27 +1,3 @@
-<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>
@@ -31,21 +7,21 @@ export default {
 
             <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>
+                  <a @click="toggleSimpleEditor" class="flag-toggle">
+                    <span :class="{ on: isSimple }">{{ $t("comment.editor_simple") }}</span>
                     <i
                         class="fa"
                         :class="{
-                        'fa-toggle-on': true,
-                        'fa-toggle-on fa-flip-horizontal': false,
+                        'fa-toggle-on': !isSimple,
+                        'fa-toggle-on fa-flip-horizontal': isSimple,
                       }"
                     />
-                    <span :class="{ on: true }">{{ $t("comment.editor_rich") }}</span>
+                    <span :class="{ on: !isSimple }">{{ $t("comment.editor_rich") }}</span>
                   </a>
                 </span>
             </div>
 
-            <div v-if="richEditor">
+            <div v-if="!isSimple">
                 <ckeditor
                     name="content"
                     :editor="editor"
@@ -53,10 +29,59 @@ export default {
                     tag-name="textarea"
                 />
             </div>
+
+          <div v-else>
+                <textarea
+                    v-model="content"
+                    name="content"
+                    class="form-control"
+                ></textarea>
+          </div>
         </div>
     </teleport>
 </template>
 
+<script lang="ts">
+import { ref, onMounted } from "vue";
+import CKEditor from "@ckeditor/ckeditor5-vue";
+import ClassicEditor from "../../module/ckeditor5/editor_config";
+
+export default {
+    name: "CommentEditor",
+    components: {
+        ckeditor: CKEditor.component,
+    },
+    setup() {
+        const isSimple = ref(false);
+        const content = ref("");
+        const editor = ClassicEditor;
+
+        const initializeEditorPreference = () => {
+          const storedValue = localStorage.getItem("isSimpleEditor");
+          if (storedValue !== null) {
+            isSimple.value = storedValue === "true"; // Convert string to boolean
+          } else {
+            localStorage.setItem("isSimpleEditor", "false"); // Set default value
+          }
+        };
+
+        const toggleSimpleEditor = () => {
+          isSimple.value = !isSimple.value;
+          localStorage.setItem("isSimpleEditor", String(isSimple.value)); // Update localStorage
+        };
+
+        onMounted(() => initializeEditorPreference())
+
+        return {
+            isSimple,
+            content,
+            editor,
+            toggleSimpleEditor,
+        };
+    },
+};
+</script>
+
 <style scoped lang="scss">
 
 </style>