From 3eb9d165bf6febe1eeaf9e4cf2b3f70a013d55b5 Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Tue, 27 Feb 2024 12:00:13 +0800
Subject: [PATCH] pref: refactor default editor video block upload logic
 (#5302)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/area console
/area editor
/milestone 2.13.x

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

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

#### How to test it?

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

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

Fixes #5240

#### Does this PR introduce a user-facing change?
```release-note
重构编辑器视频组件的上传逻辑，增加选择文件上传、上传进度条、取消、重试等机制。
```
---
 .../editor/src/extensions/video/index.ts      |   2 +-
 ui/src/components/editor/DefaultEditor.vue    |  12 +-
 .../editor/components/EditorLinkObtain.vue    | 224 ++++++++++++++++++
 ui/src/components/editor/components/index.ts  |   1 +
 .../editor/extensions/image/ImageView.vue     | 215 ++++-------------
 ui/src/components/editor/extensions/index.ts  |   3 +-
 .../editor/extensions/upload/index.ts         |   4 +
 .../editor/extensions/video/VideoView.vue     | 209 ++++++++++++++++
 .../editor/extensions/video/index.ts          |  36 +++
 ui/src/components/editor/utils/upload.ts      |  19 ++
 ui/src/locales/en.yaml                        |   9 +-
 ui/src/locales/zh-CN.yaml                     |   9 +-
 ui/src/locales/zh-TW.yaml                     |   9 +-
 13 files changed, 569 insertions(+), 183 deletions(-)
 create mode 100644 ui/src/components/editor/components/EditorLinkObtain.vue
 create mode 100644 ui/src/components/editor/components/index.ts
 create mode 100644 ui/src/components/editor/extensions/video/VideoView.vue
 create mode 100644 ui/src/components/editor/extensions/video/index.ts

diff --git a/ui/packages/editor/src/extensions/video/index.ts b/ui/packages/editor/src/extensions/video/index.ts
index 76936a850..df661cec6 100644
--- a/ui/packages/editor/src/extensions/video/index.ts
+++ b/ui/packages/editor/src/extensions/video/index.ts
@@ -96,7 +96,7 @@ const Video = Node.create<ExtensionOptions>({
         },
       },
       controls: {
-        default: null,
+        default: true,
         parseHTML: (element) => {
           return element.getAttribute("controls");
         },
diff --git a/ui/src/components/editor/DefaultEditor.vue b/ui/src/components/editor/DefaultEditor.vue
index cbead8137..0a584e9bc 100644
--- a/ui/src/components/editor/DefaultEditor.vue
+++ b/ui/src/components/editor/DefaultEditor.vue
@@ -52,7 +52,11 @@ import {
   ExtensionSearchAndReplace,
 } from "@halo-dev/richtext-editor";
 // ui custom extension
-import { UiExtensionImage, UiExtensionUpload } from "./extensions";
+import {
+  UiExtensionImage,
+  UiExtensionUpload,
+  UiExtensionVideo,
+} from "./extensions";
 import {
   IconCalendar,
   IconCharacterRecognition,
@@ -263,7 +267,11 @@ onMounted(() => {
         lowlight,
       }),
       ExtensionIframe,
-      ExtensionVideo,
+      currentUserHasPermission(["uc:attachments:manage"])
+        ? UiExtensionVideo.configure({
+            uploadVideo: props.uploadImage,
+          })
+        : ExtensionVideo,
       ExtensionAudio,
       ExtensionCharacterCount,
       ExtensionFontSize,
diff --git a/ui/src/components/editor/components/EditorLinkObtain.vue b/ui/src/components/editor/components/EditorLinkObtain.vue
new file mode 100644
index 000000000..2fa867bb9
--- /dev/null
+++ b/ui/src/components/editor/components/EditorLinkObtain.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { VButton, VSpace, VDropdown } from "@halo-dev/components";
+import type { Editor } 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";
+import { i18n } from "@/locales";
+import { onUnmounted, ref } from "vue";
+import { watch } from "vue";
+import { uploadFile } from "../utils/upload";
+import type { Attachment } from "@halo-dev/api-client";
+import type { AxiosRequestConfig } from "axios";
+
+const props = withDefaults(
+  defineProps<{
+    editor: Editor;
+    accept: string;
+    uploadedFile: File;
+    uploadToAttachmentFile: (
+      file: File,
+      options?: AxiosRequestConfig
+    ) => Promise<Attachment>;
+  }>(),
+  {
+    accept: "*",
+    uploadedFile: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (event: "setExternalLink", attachment: AttachmentAttr): void;
+  (event: "onUploadReady", file: File): void;
+  (event: "onUploadProgress", progress: number): void;
+  (event: "onUploadFinish"): void;
+  (event: "onUploadError", error: Error): void;
+  (event: "onUploadAbort"): void;
+}>();
+
+const externalLink = ref("");
+
+const handleEnterSetExternalLink = () => {
+  if (!externalLink.value) {
+    return;
+  }
+  emit("setExternalLink", {
+    url: externalLink.value,
+  });
+};
+
+const { open, reset, onChange } = useFileDialog({
+  accept: props.accept,
+  multiple: false,
+});
+
+const openAttachmentSelector = () => {
+  props.editor.commands.openAttachmentSelector(
+    (attachments: AttachmentLike[]) => {
+      if (attachments.length > 0) {
+        const attachment = attachments[0];
+        const attachmentAttr = getAttachmentUrl(attachment);
+        emit("setExternalLink", attachmentAttr);
+      }
+    },
+    {
+      accepts: [props.accept],
+      min: 1,
+      max: 1,
+    }
+  );
+};
+const controller = ref<AbortController>();
+const originalFile = ref<File>();
+const uploadState = ref<"init" | "uploading" | "error">("init");
+const uploadProgress = ref<number | undefined>(undefined);
+
+/**
+ *
+ * Upload files to the attachment library.
+ *
+ * @param file attachments that need to be uploaded to the attachment library
+ */
+const handleUploadFile = (file: File) => {
+  controller.value = new AbortController();
+  originalFile.value = file;
+  uploadState.value = "uploading";
+  uploadProgress.value = undefined;
+  emit("onUploadReady", file);
+  uploadFile(file, props.uploadToAttachmentFile, {
+    controller: controller.value,
+    onUploadProgress: (progress) => {
+      uploadProgress.value = progress;
+      emit("onUploadProgress", progress);
+    },
+
+    onFinish: (attachment?: Attachment) => {
+      if (attachment) {
+        emit("setExternalLink", {
+          url: attachment.status?.permalink,
+        });
+      }
+      handleResetUpload();
+      emit("onUploadFinish");
+    },
+
+    onError: (error: Error) => {
+      if (error.name !== "CanceledError") {
+        uploadState.value = "error";
+      }
+      emit("onUploadError", error);
+    },
+  });
+};
+
+const handleUploadAbort = () => {
+  emit("onUploadAbort");
+  handleResetUpload();
+};
+
+const handleUploadRetry = () => {
+  if (!controller.value) {
+    return;
+  }
+  controller.value.abort();
+  if (!originalFile.value) {
+    return;
+  }
+  handleUploadFile(originalFile.value);
+};
+
+const handleResetUpload = () => {
+  uploadState.value = "init";
+  controller.value?.abort();
+  controller.value = undefined;
+  originalFile.value = undefined;
+  uploadProgress.value = undefined;
+  reset();
+};
+
+onChange((files) => {
+  if (!files) {
+    return;
+  }
+  if (files.length > 0) {
+    handleUploadFile(files[0]);
+  }
+});
+
+watch(
+  () => props.uploadedFile,
+  async (file) => {
+    if (!file) {
+      return;
+    }
+    handleUploadFile(file);
+  },
+  {
+    immediate: true,
+  }
+);
+
+onUnmounted(() => {
+  handleUploadAbort();
+});
+
+defineExpose({
+  abort: handleUploadAbort,
+  retry: handleUploadRetry,
+  reset: handleResetUpload,
+});
+</script>
+<template>
+  <div class="flex h-64 w-full items-center justify-center">
+    <slot
+      v-if="$slots.uploading && uploadState === 'uploading'"
+      name="uploading"
+      :progress="uploadProgress"
+    ></slot>
+    <slot
+      v-else-if="$slots.error && uploadState === 'error'"
+      name="error"
+    ></slot>
+    <div
+      v-else
+      class="flex h-full w-full cursor-pointer flex-col items-center justify-center border-2 border-dashed border-gray-300 bg-gray-50"
+    >
+      <div
+        class="flex flex-col items-center justify-center space-y-7 pb-6 pt-5"
+      >
+        <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
+          >
+          <VDropdown>
+            <VButton>{{
+              $t(
+                "core.components.default_editor.extensions.upload.permalink.title"
+              )
+            }}</VButton>
+            <template #popper>
+              <input
+                v-model="externalLink"
+                class="block w-full rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 text-sm text-gray-900 hover:bg-gray-100"
+                :placeholder="
+                  i18n.global.t(
+                    'core.components.default_editor.extensions.upload.permalink.placeholder'
+                  )
+                "
+                @keydown.enter="handleEnterSetExternalLink"
+              />
+            </template>
+          </VDropdown>
+        </VSpace>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/ui/src/components/editor/components/index.ts b/ui/src/components/editor/components/index.ts
new file mode 100644
index 000000000..181dee03c
--- /dev/null
+++ b/ui/src/components/editor/components/index.ts
@@ -0,0 +1 @@
+export { default as EditorLinkObtain } from "./EditorLinkObtain.vue";
diff --git a/ui/src/components/editor/extensions/image/ImageView.vue b/ui/src/components/editor/extensions/image/ImageView.vue
index 1eefaf4c8..15f20ca3f 100644
--- a/ui/src/components/editor/extensions/image/ImageView.vue
+++ b/ui/src/components/editor/extensions/image/ImageView.vue
@@ -8,20 +8,10 @@ import {
 import { NodeViewWrapper } from "@halo-dev/richtext-editor";
 import { computed, onMounted, ref } from "vue";
 import Image from "./index";
-import { watch } from "vue";
-import { fileToBase64, uploadFile } from "../../utils/upload";
-import type { Attachment } from "@halo-dev/api-client";
-import type { AttachmentLike } from "@halo-dev/console-shared";
-import { useFileDialog } from "@vueuse/core";
-import { onUnmounted } from "vue";
-import {
-  VButton,
-  VSpace,
-  IconImageAddLine,
-  VDropdown,
-} from "@halo-dev/components";
-import { getAttachmentUrl } from "../../utils/attachment";
-import { i18n } from "@/locales";
+import { fileToBase64 } from "../../utils/upload";
+import { VButton, IconImageAddLine } from "@halo-dev/components";
+import { type AttachmentAttr } from "../../utils/attachment";
+import { EditorLinkObtain } from "../../components";
 
 const props = defineProps<{
   editor: Editor;
@@ -63,98 +53,46 @@ const href = computed({
   },
 });
 
-const originalFile = ref<File>();
 const fileBase64 = ref<string>();
 const uploadProgress = ref<number | undefined>(undefined);
 const retryFlag = ref<boolean>(false);
-const controller = ref<AbortController>();
-const initSrc = ref<string>();
+const editorLinkObtain = ref();
+
+const handleUploadAbort = () => {
+  editorLinkObtain.value?.abort();
+};
 
 const initialization = computed(() => {
   return !src.value && !fileBase64.value;
 });
 
-const handleEnterSetSrc = () => {
-  if (!initSrc.value) {
-    return;
-  }
-  props.updateAttributes({ src: initSrc.value });
-};
-
-const openAttachmentSelector = () => {
-  props.editor.commands.openAttachmentSelector(
-    (attachments: AttachmentLike[]) => {
-      if (attachments.length > 0) {
-        const attachment = attachments[0];
-        const attachmentAttr = getAttachmentUrl(attachment);
-        props.updateAttributes({
-          src: attachmentAttr.url,
-          alt: attachmentAttr.name,
-        });
-      }
-    },
-    {
-      accepts: ["image/*"],
-      min: 1,
-      max: 1,
-    }
-  );
-};
-
-const { open, reset, onChange } = useFileDialog({
-  accept: "image/*",
-  multiple: false,
-});
-
-const handleUploadAbort = () => {
-  if (!controller.value) {
-    return;
-  }
-  controller.value.abort();
-  resetUpload();
-};
-
-const handleUploadRetry = () => {
-  if (!originalFile.value) {
-    return;
-  }
-  handleUploadImage(originalFile.value);
-};
-
-const handleUploadImage = async (file: File) => {
-  originalFile.value = file;
+const handleUploadReady = async (file: File) => {
   fileBase64.value = await fileToBase64(file);
   retryFlag.value = false;
-  controller.value = new AbortController();
-  uploadFile(file, props.extension.options.uploadImage, {
-    controller: controller.value,
-    onUploadProgress: (progress) => {
-      uploadProgress.value = progress;
-    },
+};
 
-    onFinish: (attachment?: Attachment) => {
-      if (attachment) {
-        props.updateAttributes({
-          src: attachment.status?.permalink,
-        });
-      }
-
-      resetUpload();
-    },
-
-    onError: () => {
-      retryFlag.value = true;
-    },
+const handleSetExternalLink = (attachment: AttachmentAttr) => {
+  props.updateAttributes({
+    src: attachment.url,
+    alt: attachment.name,
   });
 };
 
+const handleUploadRetry = () => {
+  editorLinkObtain.value?.retry();
+};
+
+const handleUploadProgress = (progress: number) => {
+  uploadProgress.value = progress;
+};
+
+const handleUploadError = () => {
+  retryFlag.value = true;
+};
+
 const resetUpload = () => {
-  reset();
-  originalFile.value = undefined;
   fileBase64.value = undefined;
   uploadProgress.value = undefined;
-  controller.value?.abort();
-  controller.value = undefined;
   if (props.getPos()) {
     props.updateAttributes({
       width: undefined,
@@ -164,35 +102,13 @@ const resetUpload = () => {
 };
 
 const handleResetInit = () => {
-  resetUpload();
+  editorLinkObtain.value?.reset();
   props.updateAttributes({
     src: "",
     file: undefined,
   });
 };
 
-onChange((files) => {
-  if (!files) {
-    return;
-  }
-  if (files.length > 0) {
-    handleUploadImage(files[0]);
-  }
-});
-
-watch(
-  () => props.node?.attrs.file,
-  async (file) => {
-    if (!file) {
-      return;
-    }
-    handleUploadImage(file);
-  },
-  {
-    immediate: true,
-  }
-);
-
 const aspectRatio = ref<number>(0);
 const resizeRef = ref<HTMLDivElement>();
 
@@ -238,10 +154,6 @@ onMounted(() => {
     document.documentElement.removeEventListener("mouseup", stopDrag, false);
   }
 });
-
-onUnmounted(() => {
-  handleUploadAbort();
-});
 </script>
 
 <template>
@@ -275,7 +187,7 @@ onUnmounted(() => {
           <VButton size="sm" type="secondary" @click="handleResetInit">
             {{
               $t(
-                "core.components.default_editor.extensions.image.operations.replace.button"
+                "core.components.default_editor.extensions.upload.operations.replace.button"
               )
             }}
           </VButton>
@@ -297,7 +209,7 @@ onUnmounted(() => {
                   >
                     {{
                       $t(
-                        "core.components.default_editor.extensions.image.upload.error"
+                        "core.components.default_editor.extensions.upload.error"
                       )
                     }}
                   </div>
@@ -309,7 +221,7 @@ onUnmounted(() => {
               >
                 {{
                   $t(
-                    "core.components.default_editor.extensions.image.upload.click_retry"
+                    "core.components.default_editor.extensions.upload.click_retry"
                   )
                 }}
               </div>
@@ -332,7 +244,7 @@ onUnmounted(() => {
                       uploadProgress
                         ? `${uploadProgress}%`
                         : `${$t(
-                            "core.components.default_editor.extensions.image.upload.loading"
+                            "core.components.default_editor.extensions.upload.loading"
                           )}...`
                     }}
                   </div>
@@ -349,53 +261,28 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
-      <div v-else>
-        <div class="flex w-full items-center justify-center">
-          <div
-            class="flex h-64 w-full cursor-pointer flex-col items-center justify-center border-2 border-dashed border-gray-300 bg-gray-50"
-          >
+      <div v-show="!src && !fileBase64">
+        <EditorLinkObtain
+          ref="editorLinkObtain"
+          :accept="'image/*'"
+          :editor="editor"
+          :upload-to-attachment-file="extension.options.uploadImage"
+          :uploaded-file="node?.attrs.file"
+          @set-external-link="handleSetExternalLink"
+          @on-upload-ready="handleUploadReady"
+          @on-upload-progress="handleUploadProgress"
+          @on-upload-finish="resetUpload"
+          @on-upload-error="handleUploadError"
+          @on-upload-abort="resetUpload"
+        >
+          <template #icon>
             <div
-              class="flex flex-col items-center justify-center space-y-7 pb-6 pt-5"
+              class="flex h-14 w-14 items-center justify-center rounded-full bg-primary/20"
             >
-              <div
-                class="flex h-14 w-14 items-center justify-center rounded-full bg-primary/20"
-              >
-                <IconImageAddLine class="text-xl text-primary" />
-              </div>
-              <VSpace>
-                <VButton @click="open()">
-                  {{ $t("core.common.buttons.upload") }}
-                </VButton>
-                <VButton @click="openAttachmentSelector">
-                  {{
-                    $t(
-                      "core.components.default_editor.extensions.image.attachment.title"
-                    )
-                  }}</VButton
-                >
-                <VDropdown>
-                  <VButton>{{
-                    $t(
-                      "core.components.default_editor.extensions.image.permalink.title"
-                    )
-                  }}</VButton>
-                  <template #popper>
-                    <input
-                      v-model="initSrc"
-                      class="block w-full rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 text-sm text-gray-900 hover:bg-gray-100"
-                      :placeholder="
-                        i18n.global.t(
-                          'core.components.default_editor.extensions.image.permalink.placeholder'
-                        )
-                      "
-                      @keydown.enter="handleEnterSetSrc"
-                    />
-                  </template>
-                </VDropdown>
-              </VSpace>
+              <IconImageAddLine class="text-xl text-primary" />
             </div>
-          </div>
-        </div>
+          </template>
+        </EditorLinkObtain>
       </div>
     </div>
   </node-view-wrapper>
diff --git a/ui/src/components/editor/extensions/index.ts b/ui/src/components/editor/extensions/index.ts
index af8f86d6e..0e7156561 100644
--- a/ui/src/components/editor/extensions/index.ts
+++ b/ui/src/components/editor/extensions/index.ts
@@ -1,3 +1,4 @@
 import UiExtensionImage from "./image";
+import UiExtensionVideo from "./video";
 import UiExtensionUpload from "./upload";
-export { UiExtensionImage, UiExtensionUpload };
+export { UiExtensionImage, UiExtensionUpload, UiExtensionVideo };
diff --git a/ui/src/components/editor/extensions/upload/index.ts b/ui/src/components/editor/extensions/upload/index.ts
index 7ea38a6cb..64dae9a1f 100644
--- a/ui/src/components/editor/extensions/upload/index.ts
+++ b/ui/src/components/editor/extensions/upload/index.ts
@@ -57,6 +57,10 @@ export const Upload = Extension.create({
             if (files.length) {
               event.preventDefault();
               files.forEach((file: File) => {
+                // TODO: For drag-and-drop uploaded files,
+                // perhaps it is necessary to determine the
+                // current position of the drag-and-drop
+                // instead of inserting them directly at the cursor.
                 handleFileEvent({ editor, file });
               });
               return true;
diff --git a/ui/src/components/editor/extensions/video/VideoView.vue b/ui/src/components/editor/extensions/video/VideoView.vue
new file mode 100644
index 000000000..968b07b22
--- /dev/null
+++ b/ui/src/components/editor/extensions/video/VideoView.vue
@@ -0,0 +1,209 @@
+<script lang="ts" setup>
+import type { PMNode, Decoration } from "@halo-dev/richtext-editor";
+import type { Editor, Node } from "@halo-dev/richtext-editor";
+import { NodeViewWrapper } from "@halo-dev/richtext-editor";
+import { computed, ref } from "vue";
+import type { AttachmentAttr } from "../../utils/attachment";
+import RiVideoAddLine from "~icons/ri/video-add-line";
+import { EditorLinkObtain } from "../../components";
+import { VButton } from "@halo-dev/components";
+
+const props = defineProps<{
+  editor: Editor;
+  node: PMNode;
+  decorations: Decoration[];
+  selected: boolean;
+  extension: Node;
+  getPos: () => number;
+  updateAttributes: (attributes: Record<string, unknown>) => void;
+  deleteNode: () => void;
+}>();
+
+const src = computed({
+  get: () => {
+    return props.node?.attrs.src;
+  },
+  set: (src: string) => {
+    props.updateAttributes({ src: src });
+  },
+});
+
+const controls = computed(() => {
+  return props.node.attrs.controls;
+});
+
+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,
+    });
+  }
+};
+
+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">
+        <video
+          :src="src"
+          :controls="controls"
+          :autoplay="autoplay"
+          :loop="loop"
+          playsinline
+          preload="metadata"
+          class="m-0 rounded-md"
+          :style="{
+            width: node.attrs.width,
+            height: node.attrs.height,
+          }"
+        ></video>
+        <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="sm" type="secondary" @click="handleResetInit">
+            {{
+              $t(
+                "core.components.default_editor.extensions.upload.operations.replace.button"
+              )
+            }}
+          </VButton>
+        </div>
+      </div>
+      <div v-show="!src" class="relative">
+        <EditorLinkObtain
+          ref="editorLinkObtain"
+          :accept="'video/*'"
+          :editor="editor"
+          :upload-to-attachment-file="extension.options.uploadVideo"
+          :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"
+            >
+              <RiVideoAddLine 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>
diff --git a/ui/src/components/editor/extensions/video/index.ts b/ui/src/components/editor/extensions/video/index.ts
new file mode 100644
index 000000000..44cac2e3e
--- /dev/null
+++ b/ui/src/components/editor/extensions/video/index.ts
@@ -0,0 +1,36 @@
+import { ExtensionVideo, VueNodeViewRenderer } from "@halo-dev/richtext-editor";
+import type { AxiosRequestConfig } from "axios";
+import type { Attachment } from "@halo-dev/api-client";
+import VideoView from "./VideoView.vue";
+
+interface UiVideoOptions {
+  uploadVideo?: (
+    file: File,
+    options?: AxiosRequestConfig
+  ) => Promise<Attachment>;
+}
+
+const Video = ExtensionVideo.extend<UiVideoOptions>({
+  addOptions() {
+    const { parent } = this;
+    return {
+      ...parent?.(),
+      uploadVideo: undefined,
+    };
+  },
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      file: {
+        default: null,
+      },
+    };
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(VideoView);
+  },
+});
+
+export default Video;
diff --git a/ui/src/components/editor/utils/upload.ts b/ui/src/components/editor/utils/upload.ts
index 5b59f6e90..6fc62aa4b 100644
--- a/ui/src/components/editor/utils/upload.ts
+++ b/ui/src/components/editor/utils/upload.ts
@@ -2,6 +2,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 type { AxiosRequestConfig } from "axios";
 
 export interface FileProps {
@@ -25,6 +26,11 @@ export const handleFileEvent = ({ file, editor }: FileProps) => {
     return true;
   }
 
+  if (file.type.startsWith("video/")) {
+    uploadVideo({ file, editor });
+    return true;
+  }
+
   return true;
 };
 
@@ -41,6 +47,19 @@ export const uploadImage = ({ file, editor }: FileProps) => {
   editor.view.dispatch(editor.view.state.tr.replaceSelectionWith(node));
 };
 
+/**
+ * Uploads a video file and inserts it into the editor.
+ *
+ * @param {FileProps} { file, editor } - File to be uploaded and the editor instance
+ */
+export const uploadVideo = ({ file, editor }: FileProps) => {
+  const { view } = editor;
+  const node = view.props.state.schema.nodes[ExtensionVideo.name].create({
+    file: file,
+  });
+  editor.view.dispatch(editor.view.state.tr.replaceSelectionWith(node));
+};
+
 export interface UploadFetchResponse {
   controller: AbortController;
   onUploadProgress: (progress: number) => void;
diff --git a/ui/src/locales/en.yaml b/ui/src/locales/en.yaml
index 5a749779f..ac471916c 100644
--- a/ui/src/locales/en.yaml
+++ b/ui/src/locales/en.yaml
@@ -1397,11 +1397,10 @@ core:
         placeholder:
           options:
             placeholder: Enter / to select input type.
-        image:
-          upload:
-            error: Upload failed
-            click_retry: Click to retry
-            loading: Loading
+        upload:
+          error: Upload failed
+          click_retry: Click to retry
+          loading: Loading
           attachment:
             title: Attachment Library
           permalink:
diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
index 124997993..e9be132f8 100644
--- a/ui/src/locales/zh-CN.yaml
+++ b/ui/src/locales/zh-CN.yaml
@@ -1345,11 +1345,10 @@ core:
         placeholder:
           options:
             placeholder: 输入 / 以选择输入类型
-        image:
-          upload:
-            error: 上传失败
-            click_retry: 点击重试
-            loading: 等待中
+        upload:
+          error: 上传失败
+          click_retry: 点击重试
+          loading: 等待中
           attachment:
             title: 附件库
           permalink:
diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
index 81f294634..febedd1ad 100644
--- a/ui/src/locales/zh-TW.yaml
+++ b/ui/src/locales/zh-TW.yaml
@@ -1311,11 +1311,10 @@ core:
         placeholder:
           options:
             placeholder: 輸入 / 以選擇輸入類型
-        image:
-          upload:
-            error: 上傳失敗
-            click_retry: 點擊重試
-            loading: 等待中
+        upload:
+          error: 上傳失敗
+          click_retry: 點擊重試
+          loading: 等待中
           attachment:
             title: 附件庫
           permalink: