pref: refactor default editor audio block upload logic (#5421)

#### What type of PR is this?

/kind improvement
/area ui
/area editor

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

重构默认编辑器音频组件。使其支持上传、取消上传、从附件库选择、替换等功能。

#### How to test it?

直接拖动、复制或选择文件上传一个音频，查看是否显示上传进度条，取消、重试功能是否正常

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

Fixes #5239 

#### Does this PR introduce a user-facing change?
```release-note
重构编辑器音频组件的上传逻辑，增加选择文件上传、上传进度条、取消、重试等机制。
```

ui/src/components/editor/DefaultEditor.vue

@@ -53,6 +53,7 @@ import {
 } from "@halo-dev/richtext-editor";
 // ui custom extension
 import {
+ UiExtensionAudio,
  UiExtensionImage,
  UiExtensionUpload,
  UiExtensionVideo,
@@ -272,7 +273,11 @@ onMounted(() => {
  uploadVideo: props.uploadImage,
  })
  : ExtensionVideo,
- ExtensionAudio,
+ currentUserHasPermission(["uc:attachments:manage"])
+ ? UiExtensionAudio.configure({
+ uploadAudio: props.uploadImage,
+ })
+ : ExtensionAudio,
  ExtensionCharacterCount,
  ExtensionFontSize,
  ExtensionColor,

ui/src/components/editor/components/EditorLinkObtain.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { VButton, VSpace, VDropdown } from "@halo-dev/components";
-import type { Editor } from "@halo-dev/richtext-editor";
+import type { CoreEditor } from "@halo-dev/richtext-editor";
 import { useFileDialog } from "@vueuse/core";
 import type { AttachmentLike } from "@halo-dev/console-shared";
 import { getAttachmentUrl, type AttachmentAttr } from "../utils/attachment";
@@ -13,7 +13,7 @@ import type { AxiosRequestConfig } from "axios";
 
 const props = withDefaults(
  defineProps<{
- editor: Editor;
+ editor: CoreEditor;
  accept: string;
  uploadedFile: File;
  uploadToAttachmentFile: (

ui/src/components/editor/extensions/audio/AudioView.vue

@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+import type { NodeViewProps } from "@halo-dev/richtext-editor";
+import { NodeViewWrapper } from "@halo-dev/richtext-editor";
+import { computed, ref } from "vue";
+import type { AttachmentAttr } from "../../utils/attachment";
+import RiFileMusicLine from "~icons/ri/file-music-line";
+import { EditorLinkObtain } from "../../components";
+import { VButton } from "@halo-dev/components";
+
+const props = defineProps<NodeViewProps>();
+
+const src = computed({
+ get: () => {
+ return props.node?.attrs.src;
+ },
+ set: (src: string) => {
+ props.updateAttributes({ src: src });
+ },
+});
+
+const autoplay = computed(() => {
+ return props.node.attrs.autoplay;
+});
+
+const loop = computed(() => {
+ return props.node.attrs.loop;
+});
+
+const initialization = computed(() => {
+ return !src.value;
+});
+
+const editorLinkObtain = ref();
+
+const handleSetExternalLink = (attachment: AttachmentAttr) => {
+ props.updateAttributes({
+ src: attachment.url,
+ });
+};
+
+const resetUpload = () => {
+ if (props.getPos()) {
+ props.updateAttributes({
+ width: undefined,
+ height: undefined,
+ file: undefined,
+ });
+ }
+};
+
+const handleUploadRetry = () => {
+ editorLinkObtain.value?.reset();
+};
+
+const handleUploadAbort = () => {
+ editorLinkObtain.value?.abort();
+};
+
+const handleResetInit = () => {
+ editorLinkObtain.value?.reset();
+ props.updateAttributes({
+ src: "",
+ file: undefined,
+ });
+};
+</script>
+
+<template>
+ <node-view-wrapper as="div" class="inline-block w-full">
+ <div
+ class="relative inline-block h-full max-w-full overflow-hidden rounded-md text-center transition-all"
+ :class="{
+ 'rounded ring-2': selected,
+ }"
+ :style="{
+ width: initialization ? '100%' : node.attrs.width,
+ }"
+ >
+ <div v-if="src" class="group relative">
+ <audio
+ class="m-0 rounded-md"
+ controls
+ :src="src"
+ :autoplay="autoplay"
+ :loop="loop"
+ preload="metadata"
+ :style="{
+ width: node.attrs.width,
+ height: node.attrs.height,
+ }"
+ ></audio>
+ <div
+ v-if="src"
+ class="absolute left-0 top-0 hidden h-1/4 w-full cursor-pointer justify-end bg-gradient-to-b from-gray-300 to-transparent p-2 ease-in-out group-hover:flex"
+ >
+ <VButton size="xs" type="secondary" @click="handleResetInit">
+ {{
+ $t(
+ "core.components.default_editor.extensions.upload.operations.replace.button"
+ )
+ }}
+ </VButton>
+ </div>
+ </div>
+ <div v-show="!src" class="relative w-full">
+ <EditorLinkObtain
+ ref="editorLinkObtain"
+ class="!h-40 w-full"
+ :accept="'audio/*'"
+ :editor="editor"
+ :upload-to-attachment-file="extension.options.uploadAudio"
+ :uploaded-file="node?.attrs.file"
+ @set-external-link="handleSetExternalLink"
+ @on-upload-finish="resetUpload"
+ @on-upload-abort="resetUpload"
+ >
+ <template #icon>
+ <div
+ class="flex h-14 w-14 items-center justify-center rounded-full bg-primary/20"
+ >
+ <RiFileMusicLine class="text-xl text-primary" />
+ </div>
+ </template>
+ <template #uploading="{ progress }">
+ <div class="absolute top-0 h-full w-full bg-black bg-opacity-20">
+ <div class="absolute top-[50%] w-full space-y-2 text-white">
+ <div class="px-10">
+ <div
+ class="relative h-4 w-full overflow-hidden rounded-full bg-gray-200"
+ >
+ <div
+ class="h-full bg-primary"
+ :style="{
+ width: `${progress || 0}%`,
+ }"
+ ></div>
+ <div
+ class="absolute left-[50%] top-0 -translate-x-[50%] text-xs leading-4 text-white"
+ >
+ {{
+ progress
+ ? `${progress}%`
+ : `${$t(
+ "core.components.default_editor.extensions.upload.loading"
+ )}...`
+ }}
+ </div>
+ </div>
+ </div>
+
+ <div
+ class="inline-block cursor-pointer text-sm hover:opacity-70"
+ @click="handleUploadAbort"
+ >
+ {{ $t("core.common.buttons.cancel") }}
+ </div>
+ </div>
+ </div>
+ </template>
+ <template #error>
+ <div class="absolute top-0 h-full w-full bg-black bg-opacity-20">
+ <div class="absolute top-[50%] w-full space-y-2 text-white">
+ <div class="px-10">
+ <div
+ class="relative h-4 w-full overflow-hidden rounded-full bg-gray-200"
+ >
+ <div class="h-full w-full bg-red-600"></div>
+ <div
+ class="absolute left-[50%] top-0 -translate-x-[50%] text-xs leading-4 text-white"
+ >
+ {{
+ $t(
+ "core.components.default_editor.extensions.upload.error"
+ )
+ }}
+ </div>
+ </div>
+ </div>
+ <div
+ class="inline-block cursor-pointer text-sm hover:opacity-70"
+ @click="handleUploadRetry"
+ >
+ {{
+ $t(
+ "core.components.default_editor.extensions.upload.click_retry"
+ )
+ }}
+ </div>
+ </div>
+ </div>
+ </template>
+ </EditorLinkObtain>
+ </div>
+ </div>
+ </node-view-wrapper>
+</template>

ui/src/components/editor/extensions/audio/index.ts

@@ -0,0 +1,42 @@
+import { ExtensionAudio, VueNodeViewRenderer } from "@halo-dev/richtext-editor";
+import type { AxiosRequestConfig } from "axios";
+import type { Attachment } from "@halo-dev/api-client";
+import AudioView from "./AudioView.vue";
+
+interface UiAudioOptions {
+ uploadAudio?: (
+ file: File,
+ options?: AxiosRequestConfig
+ ) => Promise<Attachment>;
+}
+
+const Audio = ExtensionAudio.extend<UiAudioOptions>({
+ addOptions() {
+ const { parent } = this;
+ return {
+ ...parent?.(),
+ uploadAudio: undefined,
+ };
+ },
+
+ addAttributes() {
+ return {
+ ...this.parent?.(),
+ file: {
+ default: null,
+ renderHTML() {
+ return {};
+ },
+ parseHTML() {
+ return null;
+ },
+ },
+ };
+ },
+
+ addNodeView() {
+ return VueNodeViewRenderer(AudioView);
+ },
+});
+
+export default Audio;

ui/src/components/editor/extensions/index.ts

@@ -1,4 +1,10 @@
 import UiExtensionImage from "./image";
 import UiExtensionVideo from "./video";
 import UiExtensionUpload from "./upload";
-export { UiExtensionImage, UiExtensionUpload, UiExtensionVideo };
+import UiExtensionAudio from "./audio";
+export {
+ UiExtensionImage,
+ UiExtensionUpload,
+ UiExtensionVideo,
+ UiExtensionAudio,
+};

ui/src/components/editor/utils/upload.ts

@@ -3,6 +3,7 @@ import { CoreEditor } from "@halo-dev/richtext-editor";
 import type { Attachment } from "@halo-dev/api-client";
 import Image from "../extensions/image";
 import ExtensionVideo from "../extensions/video";
+import ExtensionAudio from "../extensions/audio";
 import type { AxiosRequestConfig } from "axios";
 
 export interface FileProps {
@@ -31,6 +32,11 @@ export const handleFileEvent = ({ file, editor }: FileProps) => {
  return true;
  }
 
+ if (file.type.startsWith("audio/")) {
+ uploadAudio({ file, editor });
+ return true;
+ }
+
  return true;
 };
 
@@ -60,6 +66,19 @@ export const uploadVideo = ({ file, editor }: FileProps) => {
  editor.view.dispatch(editor.view.state.tr.replaceSelectionWith(node));
 };
 
+/**
+ * Uploads an audio file and inserts it into the editor.
+ *
+ * @param {FileProps} { file, editor } - File to be uploaded and the editor instance
+ */
+export const uploadAudio = ({ file, editor }: FileProps) => {
+ const { view } = editor;
+ const node = view.props.state.schema.nodes[ExtensionAudio.name].create({
+ file: file,
+ });
+ editor.view.dispatch(editor.view.state.tr.replaceSelectionWith(node));
+};
+
 export interface UploadFetchResponse {
  controller: AbortController;
  onUploadProgress: (progress: number) => void;