edit button with validator and YAML

docs/.vitepress/theme/components/VocabQuiz.vue

@@ -57,7 +57,7 @@
       <nav>
         <label v-for="c in vCats" :key="c">
           <input type="checkbox" :name="c" checked @change="updateCats(c)" />
-          {{ c.replace("_", " ") }}
+          {{ c.replace(/_/g, " ") }}
         </label>
       </nav>
       <nav>
@@ -99,8 +99,10 @@ import {
   useTemplateRef,
   watch,
 } from "vue";
-import SentenceAudio, { IVoc } from "./SentenceAudio.vue";
+import yaml from "yaml";
+import SentenceAudio from "./SentenceAudio.vue";
 import { supabase } from "../supabase.ts";
+import { IVoc, Voc } from "../types.ts";
 
 const { fmKey = "vocabulary" } = defineProps<{
   fmKey?: string;
@@ -157,7 +159,7 @@ watch(isKoFirst, () => {
 watch(isEdit, () => {
   if (isEdit.value) {
     const { ko, ...vContent } = v.value;
-    vEditContent.value = JSON.stringify(vContent, null, 2);
+    vEditContent.value = yaml.stringify(vContent);
   } else {
     vEditContent.value = "";
   }
@@ -240,7 +242,7 @@ function updateCats(cat: string) {
 
 async function onVContentSave() {
   const oldV = v.value;
-  const newV = { ko: oldV.ko, ...JSON.parse(vEditContent.value) };
+  const newV = Voc.parse({ ko: oldV.ko, ...yaml.parse(vEditContent.value) });
 
   let key = "";
   let vKey = oldV.ko;
@@ -257,7 +259,8 @@ async function onVContentSave() {
       vCount.set(v.ko, i + 1);
 
       if (oldV.ko === v.ko && oldV.en === v.en) {
-        key = k;
+        // TODO: handling multiple fmKey comma-separated
+        key = JSON.stringify([fmKey, k]);
         vKey = vK;
 
         vocabulary[k][i_vs] = newV;