From 87df0ed3cf4f1b490ec19f733ac553e7642fc032 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 6 Sep 2022 22:54:49 +0800
Subject: [PATCH] feat: post editor support select attachments

---
 .../contents/attachments/AttachmentList.vue   |  4 --
 .../components/AttachmentSelectorModal.vue    |  1 -
 src/modules/contents/posts/PostEditor.vue     | 46 ++++++++++++++++++-
 3 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index 6936da778..cfe7705a6 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -30,7 +30,6 @@ import { formatDatetime } from "@/utils/date";
 import prettyBytes from "pretty-bytes";
 import { useFetchAttachmentPolicy } from "./composables/use-attachment-policy";
 import { useAttachmentControl } from "./composables/use-attachment";
-import AttachmentSelectorModal from "@/modules/contents/attachments/components/AttachmentSelectorModal.vue";
 import AttachmentFileTypeIcon from "./components/AttachmentFileTypeIcon.vue";
 import { apiClient } from "@halo-dev/admin-shared";
 import cloneDeep from "lodash.clonedeep";
@@ -41,7 +40,6 @@ import { useFetchAttachmentGroup } from "./composables/use-attachment-group";
 const policyVisible = ref(false);
 const uploadVisible = ref(false);
 const detailVisible = ref(false);
-const selectVisible = ref(false);
 
 const { policies } = useFetchAttachmentPolicy({ fetchOnMounted: true });
 const { groups, handleFetchGroups } = useFetchAttachmentGroup({
@@ -178,7 +176,6 @@ onMounted(() => {
 });
 </script>
 <template>
-  <AttachmentSelectorModal v-model:visible="selectVisible" />
   <AttachmentDetailModal
     v-model:visible="detailVisible"
     :attachment="selectedAttachment"
@@ -205,7 +202,6 @@ onMounted(() => {
     </template>
     <template #actions>
       <VSpace>
-        <VButton size="sm" @click="selectVisible = true"> 选择附件</VButton>
         <VButton size="sm" @click="policyVisible = true">
           <template #icon>
             <IconDatabase2Line class="h-full w-full" />
diff --git a/src/modules/contents/attachments/components/AttachmentSelectorModal.vue b/src/modules/contents/attachments/components/AttachmentSelectorModal.vue
index 8150476d4..5050491b9 100644
--- a/src/modules/contents/attachments/components/AttachmentSelectorModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentSelectorModal.vue
@@ -53,7 +53,6 @@ const onVisibleChange = (visible: boolean) => {
 };
 
 const handleConfirm = () => {
-  console.log(Array.from(selected.value));
   emit("select", Array.from(selected.value));
   onVisibleChange(false);
 };
diff --git a/src/modules/contents/posts/PostEditor.vue b/src/modules/contents/posts/PostEditor.vue
index 8e089ca78..e4d992b5a 100644
--- a/src/modules/contents/posts/PostEditor.vue
+++ b/src/modules/contents/posts/PostEditor.vue
@@ -14,16 +14,18 @@ import {
 } from "@halo-dev/components";
 import PostSettingModal from "./components/PostSettingModal.vue";
 import PostPreviewModal from "./components/PostPreviewModal.vue";
+import AttachmentSelectorModal from "../attachments/components/AttachmentSelectorModal.vue";
 import type { PostRequest } from "@halo-dev/api-client";
 import { computed, onMounted, ref, watch } from "vue";
 import cloneDeep from "lodash.clonedeep";
-import { apiClient } from "@halo-dev/admin-shared";
+import { apiClient, type AttachmentLike } from "@halo-dev/admin-shared";
 import { useRouteQuery } from "@vueuse/router";
 import { v4 as uuid } from "uuid";
 import {
   allExtensions,
   RichTextEditor,
   useEditor,
+  type Content,
 } from "@halo-dev/richtext-editor";
 import ExtensionCharacterCount from "@tiptap/extension-character-count";
 import { formatDatetime } from "@/utils/date";
@@ -69,6 +71,7 @@ const settingModal = ref(false);
 const previewModal = ref(false);
 const saving = ref(false);
 const extraActiveId = ref("toc");
+const attachemntSelectorModal = ref(false);
 
 const isUpdateMode = computed(() => {
   return !!formState.value.post.metadata.creationTimestamp;
@@ -104,6 +107,36 @@ watch(
   }
 );
 
+const onAttachmentSelect = (attachments: AttachmentLike[]) => {
+  const images: Content[] = attachments.map((attachment) => {
+    const attrs: { src?: string; alt?: string } = {};
+    if (typeof attachment === "string") {
+      attrs.src = attachment;
+      return {
+        type: "image",
+        attrs,
+      };
+    }
+    if ("url" in attachment) {
+      attrs.src = attachment.url;
+      attrs.alt = attachment.type;
+    }
+    if ("spec" in attachment) {
+      attrs.src = attachment.status?.permalink;
+      attrs.alt = attachment.spec.displayName;
+    }
+    return {
+      type: "image",
+      attrs,
+    };
+  });
+  editor.value
+    ?.chain()
+    .focus()
+    .insertContent([...images, { type: "paragraph", content: "" }])
+    .run();
+};
+
 const handleGenerateTableOfContent = () => {
   if (!editor.value) {
     return;
@@ -222,12 +255,23 @@ onMounted(async () => {
     @saved="onSettingSaved"
   />
   <PostPreviewModal v-model:visible="previewModal" :post="formState.post" />
+  <AttachmentSelectorModal
+    v-model:visible="attachemntSelectorModal"
+    @select="onAttachmentSelect"
+  />
   <VPageHeader title="文章">
     <template #icon>
       <IconBookRead class="mr-2 self-center" />
     </template>
     <template #actions>
       <VSpace>
+        <VButton
+          size="sm"
+          type="default"
+          @click="attachemntSelectorModal = true"
+        >
+          附件库
+        </VButton>
         <VButton size="sm" type="default" @click="previewModal = true">
           预览
         </VButton>