feat(editor): add markdown mode

components/editor.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Note } from "../db/index";
+import { Marked } from "@ts-stack/markdown";
 import moment from "moment";
 
 const props = defineProps({
@@ -8,9 +9,18 @@ const props = defineProps({
     required: true
   }
 });
+const emit = defineEmits(["save"]);
 const { data } = toRefs(props);
+let isMarked: Ref<boolean> = toRef(true);
 
-const emit = defineEmits(["save"]);
+const formatedTitle = computed(() => {
+  return formatStr(data.value.title);
+});
+const formatedText = computed(() => {
+  return formatStr(data.value.text);
+});
+
+const toggleMode = () => isMarked.value = !isMarked.value;
 const emitPatch = () => {
   emit("save", {
     ...data.value,
@@ -21,6 +31,9 @@ const emitPatch = () => {
   });
 };
 
+function formatStr(str: string): string {
+  return Marked.parse(str);
+};
 function formatDate(d: string): string {
   return moment(d).format("DD/MM/YYYY, kk:mm:ss");
 };
@@ -29,13 +42,16 @@ function formatDate(d: string): string {
 <template>
   <div class="editor">
     <div class="icons">
-      <img @click="" class="icon" src="/img/edit.png" alt="Edit note" />
+      <img v-show="isMarked" @click="toggleMode" class="icon" src="/img/edit.png" alt="Edit note" />
+      <img v-show="!isMarked" @click="toggleMode" class="icon mark" src="/img/mark.png" alt="Mark note" />
       <img class="icon" src="/img/search.png" alt="Search note" />
     </div>
-    <div class="date">
-      {{ formatDate(data.updatedAt || data.createdAt) }}
+    <div class="date"> {{ formatDate(data.updatedAt || data.createdAt) }} </div>
+    <div v-show="isMarked" class="textarea-wrap">
+      <div v-html="formatedTitle"></div>
+      <div v-html="formatedText"></div>
     </div>
-    <div class="textarea-wrap">
+    <div v-show="!isMarked" class="textarea-wrap">
       <textarea v-model="data.title" @input="emitPatch()" class="textarea title"></textarea>
       <textarea v-model="data.text" @input="emitPatch()" class="textarea text"></textarea>
     </div>
@@ -52,7 +68,6 @@ function formatDate(d: string): string {
   display: flex;
   justify-content: space-between;
 }
-
 .date {
   text-align: center;
   color: #838280;

package.json

@@ -13,6 +13,7 @@
     "nuxt": "^3.7.2"
   },
   "dependencies": {
+    "@ts-stack/markdown": "^1.5.0",
     "moment": "^2.29.4"
   }
 }