From 2b4ffb68113699bbd15db51405beaead5cf9f4d9 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Sat, 23 Mar 2024 00:46:34 +0800
Subject: [PATCH] :bug: Fix editor won't reset after posted post

---
 .../src/components/publish/ArticleEditor.vue  | 53 +++++++++----------
 .../src/components/publish/MomentEditor.vue   | 47 +++++++---------
 2 files changed, 43 insertions(+), 57 deletions(-)

diff --git a/pkg/views/src/components/publish/ArticleEditor.vue b/pkg/views/src/components/publish/ArticleEditor.vue
index 5fc876c..31cb352 100644
--- a/pkg/views/src/components/publish/ArticleEditor.vue
+++ b/pkg/views/src/components/publish/ArticleEditor.vue
@@ -25,37 +25,18 @@
             You are editing a post with alias <b class="font-mono">{{ editor.related.edit_to?.alias }}</b>
           </v-alert>
 
-          <v-textarea
-            required
-            class="mb-3"
-            variant="outlined"
-            label="Content"
-            hint="The content supports markdown syntax"
-            v-model="data.content"
-            @paste="pasteMedia"
-          />
+          <v-textarea required class="mb-3" variant="outlined" label="Content"
+            hint="The content supports markdown syntax" v-model="data.content" @paste="pasteMedia" />
 
           <v-expansion-panels>
             <v-expansion-panel title="Brief describe">
               <template #text>
                 <div class="mt-1">
-                  <v-text-field
-                    required
-                    variant="solo-filled"
-                    density="comfortable"
-                    label="Title"
-                    :loading="reverting"
-                    v-model="data.title"
-                  />
+                  <v-text-field required variant="solo-filled" density="comfortable" label="Title" :loading="reverting"
+                    v-model="data.title" />
 
-                  <v-textarea
-                    required
-                    auto-grow
-                    variant="solo-filled"
-                    density="comfortable"
-                    label="Description"
-                    v-model="data.description"
-                  />
+                  <v-textarea required auto-grow variant="solo-filled" density="comfortable" label="Description"
+                    v-model="data.description" />
                 </div>
               </template>
             </v-expansion-panel>
@@ -66,7 +47,8 @@
                   <div>
                     <p class="text-xs">Your content will visible for public at</p>
                     <p class="text-lg font-medium">
-                      {{ data.published_at ? new Date(data.published_at).toLocaleString() : new Date().toLocaleString() }}
+                      {{ data.published_at ? new Date(data.published_at).toLocaleString() : new Date().toLocaleString()
+                      }}
                     </p>
                   </div>
                   <v-btn size="small" icon="mdi-pencil" variant="text" @click="dialogs.plan = true" />
@@ -149,7 +131,7 @@ const data = ref<any>({
 })
 
 const currentRealm = computed(() => {
-  if(data.value.realm_id) {
+  if (data.value.realm_id) {
     return realms.available.find((e: any) => e.id === data.value.realm_id)
   } else {
     return null
@@ -187,16 +169,29 @@ async function postArticle(evt: SubmitEvent) {
   })
   if (res.status === 200) {
     const data = await res.json()
-    form.reset()
-    router.push({ name: "posts.details.articles", params: { alias: data.alias } })
     success.value = true
     editor.show.article = false
+
+    resetEditor(form)
+    router.push({ name: "posts.details.articles", params: { alias: data.alias } })
   } else {
     error.value = await res.text()
   }
   loading.value = false
 }
 
+function resetEditor(target: HTMLFormElement) {
+  target.reset()
+  data.value = {
+    title: "",
+    content: "",
+    description: "",
+    realm_id: null,
+    published_at: null,
+    attachments: []
+  }
+}
+
 const media = ref<any>(null)
 
 function pasteMedia(evt: ClipboardEvent) {
diff --git a/pkg/views/src/components/publish/MomentEditor.vue b/pkg/views/src/components/publish/MomentEditor.vue
index 9ac21bf..a48f523 100644
--- a/pkg/views/src/components/publish/MomentEditor.vue
+++ b/pkg/views/src/components/publish/MomentEditor.vue
@@ -6,40 +6,20 @@
           You are editing a post with alias <b class="font-mono">{{ editor.related.edit_to?.alias }}</b>
         </v-alert>
 
-        <v-textarea
-          required
-          persistent-counter
-          variant="outlined"
-          label="What's happened?!"
-          counter="1024"
-          v-model="data.content"
-          @paste="pasteMedia"
-        />
+        <v-textarea required persistent-counter variant="outlined" label="What's happened?!" counter="1024"
+          v-model="data.content" @paste="pasteMedia" />
 
         <div class="flex mt-[-18px]">
           <v-tooltip text="Planned publish" location="start">
             <template #activator="{ props }">
-              <v-btn
-                v-bind="props"
-                type="button"
-                variant="text"
-                icon="mdi-calendar"
-                size="small"
-                @click="dialogs.plan = true"
-              />
+              <v-btn v-bind="props" type="button" variant="text" icon="mdi-calendar" size="small"
+                @click="dialogs.plan = true" />
             </template>
           </v-tooltip>
           <v-tooltip text="Media" location="start">
             <template #activator="{ props }">
-              <v-btn
-                v-bind="props"
-                icon
-                class="text-none"
-                type="button"
-                variant="text"
-                size="small"
-                @click="dialogs.media = true"
-              >
+              <v-btn v-bind="props" icon class="text-none" type="button" variant="text" size="small"
+                @click="dialogs.media = true">
                 <v-badge v-if="data.attachments.length > 0" :content="data.attachments.length">
                   <v-icon icon="mdi-camera" />
                 </v-badge>
@@ -92,8 +72,8 @@ import { getAtk } from "@/stores/userinfo"
 import { reactive, ref, watch } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import PlannedPublish from "@/components/publish/parts/PlannedPublish.vue"
-import Media from "@/components/publish/parts/Media.vue"
 import PublishArea from "@/components/publish/parts/PublishArea.vue"
+import Media from "@/components/publish/parts/Media.vue"
 
 const route = useRoute()
 const editor = useEditor()
@@ -135,10 +115,11 @@ async function postMoment(evt: SubmitEvent) {
     body: JSON.stringify(payload)
   })
   if (res.status === 200) {
-    form.reset()
     const data = await res.json()
     success.value = true
     editor.show.moment = false
+
+    resetEditor(form)
     router.push({ name: "posts.details.moments", params: { alias: data.alias } })
   } else {
     error.value = await res.text()
@@ -146,6 +127,16 @@ async function postMoment(evt: SubmitEvent) {
   loading.value = false
 }
 
+function resetEditor(target: HTMLFormElement) {
+  target.reset()
+  data.value = {
+    content: "",
+    realm_id: null,
+    published_at: null,
+    attachments: []
+  }
+}
+
 const media = ref<any>(null)
 
 function pasteMedia(evt: ClipboardEvent) {