From b8293faafdb825558f76a5706124af8d30a830ea Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Tue, 26 Mar 2024 22:44:07 +0800
Subject: [PATCH] fix: error occurs when opening attachment library in the uc
 (#5590)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug
/area ui

#### What this PR does / why we need it:

在个人中心，使用默认富文本编辑器上传附件库时，由于在 UC 中不存在附件库列表，因此会出现错误。

本 PR 通过对默认富文本编辑器上传组件进行调整，调整如下：

1. 当不具有 uc 和 system 的附件权限时，用户仅能通过链接插入图片、音频等，且不允许拖拽和粘贴上传。
2. 当用户具有 uc 但没有 system 的附件权限时，用户可以通过拖拽和粘贴的方式上传，但不允许通过附件库上传。
3. 当用户具有 system 附件权限时，允许通过所有方式（上传、附件库、链接、拖拽和粘贴）进行上传。

#### How to test it?

测试默认富文本编辑器中，用户在不同附件库权限下上传图片是否能够按照逻辑正常处理。

#### Which issue(s) this PR fixes:

Fixes #5581

#### Does this PR introduce a user-facing change?
```release-note
修复在个人中心中使用默认富文本编辑器的附件库而导致的报错问题
```
---
 ui/src/components/editor/DefaultEditor.vue    | 25 ++++--------
 .../editor/components/EditorLinkObtain.vue    | 39 ++++++++++++-------
 .../editor/extensions/image/index.ts          | 10 ++++-
 ui/src/components/editor/utils/upload.ts      |  7 ++++
 4 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/ui/src/components/editor/DefaultEditor.vue b/ui/src/components/editor/DefaultEditor.vue
index 9982d4072..8d8a67f32 100644
--- a/ui/src/components/editor/DefaultEditor.vue
+++ b/ui/src/components/editor/DefaultEditor.vue
@@ -17,7 +17,6 @@ import {
   ExtensionOrderedList,
   ExtensionStrike,
   ExtensionText,
-  ExtensionImage,
   ExtensionTaskList,
   ExtensionLink,
   ExtensionTextAlign,
@@ -29,8 +28,6 @@ import {
   ExtensionHighlight,
   ExtensionCommands,
   ExtensionIframe,
-  ExtensionVideo,
-  ExtensionAudio,
   ExtensionCodeBlock,
   ExtensionFontSize,
   ExtensionColor,
@@ -213,10 +210,6 @@ onMounted(() => {
     emit("update", html);
   }, 250);
 
-  const image = currentUserHasPermission(["uc:attachments:manage"])
-    ? UiExtensionImage
-    : ExtensionImage;
-
   editor.value = new Editor({
     content: props.raw,
     extensions: [
@@ -239,7 +232,7 @@ onMounted(() => {
       ExtensionOrderedList,
       ExtensionStrike,
       ExtensionText,
-      image.configure({
+      UiExtensionImage.configure({
         inline: true,
         allowBase64: false,
         HTMLAttributes: {
@@ -272,16 +265,12 @@ onMounted(() => {
         lowlight,
       }),
       ExtensionIframe,
-      currentUserHasPermission(["uc:attachments:manage"])
-        ? UiExtensionVideo.configure({
-            uploadVideo: props.uploadImage,
-          })
-        : ExtensionVideo,
-      currentUserHasPermission(["uc:attachments:manage"])
-        ? UiExtensionAudio.configure({
-            uploadAudio: props.uploadImage,
-          })
-        : ExtensionAudio,
+      UiExtensionVideo.configure({
+        uploadVideo: props.uploadImage,
+      }),
+      UiExtensionAudio.configure({
+        uploadAudio: props.uploadImage,
+      }),
       ExtensionCharacterCount,
       ExtensionFontSize,
       ExtensionColor,
diff --git a/ui/src/components/editor/components/EditorLinkObtain.vue b/ui/src/components/editor/components/EditorLinkObtain.vue
index 9d66200bf..085b9b4ea 100644
--- a/ui/src/components/editor/components/EditorLinkObtain.vue
+++ b/ui/src/components/editor/components/EditorLinkObtain.vue
@@ -10,6 +10,7 @@ import { watch } from "vue";
 import { uploadFile } from "../utils/upload";
 import type { Attachment } from "@halo-dev/api-client";
 import type { AxiosRequestConfig } from "axios";
+import HasPermission from "@/components/permission/HasPermission.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -188,22 +189,30 @@ defineExpose({
       >
         <slot v-if="$slots.icon" name="icon"></slot>
         <VSpace>
-          <VButton @click="open()">
-            {{ $t("core.common.buttons.upload") }}
-          </VButton>
-          <VButton @click="openAttachmentSelector">
-            {{
-              $t(
-                "core.components.default_editor.extensions.upload.attachment.title"
-              )
-            }}</VButton
-          >
+          <HasPermission :permissions="['uc:attachments:manage']">
+            <VButton @click="open()">
+              {{ $t("core.common.buttons.upload") }}
+            </VButton>
+          </HasPermission>
+
+          <HasPermission :permissions="['system:attachments:manage']">
+            <VButton @click="openAttachmentSelector">
+              {{
+                $t(
+                  "core.components.default_editor.extensions.upload.attachment.title"
+                )
+              }}
+            </VButton>
+          </HasPermission>
+
           <VDropdown>
-            <VButton>{{
-              $t(
-                "core.components.default_editor.extensions.upload.permalink.title"
-              )
-            }}</VButton>
+            <VButton>
+              {{
+                $t(
+                  "core.components.default_editor.extensions.upload.permalink.title"
+                )
+              }}
+            </VButton>
             <template #popper>
               <input
                 v-model="externalLink"
diff --git a/ui/src/components/editor/extensions/image/index.ts b/ui/src/components/editor/extensions/image/index.ts
index 2791e037f..e109fcfde 100644
--- a/ui/src/components/editor/extensions/image/index.ts
+++ b/ui/src/components/editor/extensions/image/index.ts
@@ -3,14 +3,20 @@ import ImageView from "./ImageView.vue";
 import type { AxiosRequestConfig } from "axios";
 import type { Attachment } from "@halo-dev/api-client";
 
-interface UiImageOptions {
+export interface ImageOptions {
+  inline: boolean;
+  allowBase64: boolean;
+  HTMLAttributes: Record<string, unknown>;
+}
+
+export interface UiImageOptions {
   uploadImage?: (
     file: File,
     options?: AxiosRequestConfig
   ) => Promise<Attachment>;
 }
 
-const Image = ExtensionImage.extend<UiImageOptions>({
+const Image = ExtensionImage.extend<ImageOptions & UiImageOptions>({
   addOptions() {
     const { parent } = this;
     return {
diff --git a/ui/src/components/editor/utils/upload.ts b/ui/src/components/editor/utils/upload.ts
index eb3643b0d..e1bd3b028 100644
--- a/ui/src/components/editor/utils/upload.ts
+++ b/ui/src/components/editor/utils/upload.ts
@@ -5,12 +5,15 @@ import Image from "../extensions/image";
 import ExtensionVideo from "../extensions/video";
 import ExtensionAudio from "../extensions/audio";
 import type { AxiosRequestConfig } from "axios";
+import { usePermission } from "@/utils/permission";
 
 export interface FileProps {
   file: File;
   editor: CoreEditor;
 }
 
+const { currentUserHasPermission } = usePermission();
+
 /**
  * Handles file events, determining if the file is an image and triggering the appropriate upload process.
  *
@@ -22,6 +25,10 @@ export const handleFileEvent = ({ file, editor }: FileProps) => {
     return false;
   }
 
+  if (!currentUserHasPermission(["uc:attachments:manage"])) {
+    return false;
+  }
+
   if (file.type.startsWith("image/")) {
     uploadImage({ file, editor });
     return true;