fix: error occurs when opening attachment library in the uc (halo-dev…

…#5590)

#### 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 halo-dev#5581

#### Does this PR introduce a user-facing change?
```release-note
修复在个人中心中使用默认富文本编辑器的附件库而导致的报错问题
```

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,

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"

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 {

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;