feat: add support for inserting external media resources to the default editor (#4126)

#### What type of PR is this?

/kind feature
/area console
/area editor
/milestone 2.7.x

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

默认编辑器支持直接插入图片、视频、音频，提供除了附件库的媒体插入入口。

<img width="1011" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/4c9be243-882f-4d21-9fa8-ce3033744746">

通过链接插入图片需要 https://github.com/halo-sigs/richtext-editor/pull/17 的支持。

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

Fixes https://github.com/halo-dev/halo/issues/3882
Fixes https://github.com/halo-dev/halo/issues/3994

#### Special notes for your reviewer:

测试编辑器通过链接插入图片、视频、音频的功能是否正常。

#### Does this PR introduce a user-facing change?

```release-note
默认编辑器支持不通过附件库直接插入图片、视频、音频。
```

console/src/components/editor/DefaultEditor.vue

@@ -36,10 +36,12 @@ import {
   lowlight,
   type AnyExtension,
   Editor,
+  ToolbarSubItem,
 } from "@halo-dev/richtext-editor";
 import {
   IconCalendar,
   IconCharacterRecognition,
+  IconFolder,
   IconLink,
   IconUserFollow,
   Toast,
@@ -49,6 +51,9 @@ import {
 import AttachmentSelectorModal from "@/modules/contents/attachments/components/AttachmentSelectorModal.vue";
 import ExtensionCharacterCount from "@tiptap/extension-character-count";
 import MdiFileImageBox from "~icons/mdi/file-image-box";
+import MdiVideoPlusOutline from "~icons/mdi/video-plus-outline";
+import MdiImagePlusOutline from "~icons/mdi/image-plus-outline";
+import MdiVolume from "~icons/mdi/volume";
 import MdiFormatHeader1 from "~icons/mdi/format-header-1";
 import MdiFormatHeader2 from "~icons/mdi/format-header-2";
 import MdiFormatHeader3 from "~icons/mdi/format-header-3";
@@ -221,8 +226,67 @@ onMounted(() => {
                   title: i18n.global.t(
                     "core.components.default_editor.toolbar.attachment"
                   ),
-                  action: () => (attachmentSelectorModal.value = true),
                 },
+                children: [
+                  {
+                    priority: 10,
+                    component: ToolbarSubItem,
+                    props: {
+                      editor,
+                      isActive: false,
+                      icon: markRaw(IconFolder),
+                      title: i18n.global.t(
+                        "core.components.default_editor.toolbar.select_attachment"
+                      ),
+                      action: () => (attachmentSelectorModal.value = true),
+                    },
+                  },
+                  {
+                    priority: 20,
+                    component: ToolbarSubItem,
+                    props: {
+                      editor,
+                      isActive: false,
+                      icon: markRaw(MdiImagePlusOutline),
+                      title: i18n.global.t(
+                        "core.components.default_editor.toolbar.insert_image"
+                      ),
+                      action: () => {
+                        editor.chain().focus().setImage({ src: "" }).run();
+                      },
+                    },
+                  },
+                  {
+                    priority: 30,
+                    component: ToolbarSubItem,
+                    props: {
+                      editor,
+                      isActive: false,
+                      icon: markRaw(MdiVideoPlusOutline),
+                      title: i18n.global.t(
+                        "core.components.default_editor.toolbar.insert_video"
+                      ),
+                      action: () => {
+                        editor.chain().focus().setVideo({ src: "" }).run();
+                      },
+                    },
+                  },
+                  {
+                    priority: 40,
+                    component: ToolbarSubItem,
+                    props: {
+                      editor,
+                      isActive: false,
+                      icon: markRaw(MdiVolume),
+                      title: i18n.global.t(
+                        "core.components.default_editor.toolbar.insert_audio"
+                      ),
+                      action: () => {
+                        editor.chain().focus().setAudio({ src: "" }).run();
+                      },
+                    },
+                  },
+                ],
               };
             },
           };

console/src/locales/en.yaml

@@ -1076,6 +1076,10 @@ core:
             placeholder: "Enter / to select input type."
       toolbar:
         attachment: Insert attachment
+        select_attachment: Attachments library
+        insert_image: Insert image
+        insert_video: Insert video
+        insert_audio: Insert audio
       upload_attachment:
         toast:
           no_available_policy: There is currently no available storage policy

console/src/locales/zh-CN.yaml

@@ -1076,6 +1076,10 @@ core:
             placeholder: "输入 / 以选择输入类型"
       toolbar:
         attachment: 插入附件
+        select_attachment: 从附件库选择
+        insert_image: 从外链插入图片
+        insert_video: 从外链插入视频
+        insert_audio: 从外链插入音频
       upload_attachment:
         toast:
           no_available_policy: 目前没有可用的存储策略

console/src/locales/zh-TW.yaml

@@ -1076,6 +1076,10 @@ core:
             placeholder: "輸入 / 以選擇輸入類型"
       toolbar:
         attachment: 插入附件
+        select_attachment: 從附件庫選擇
+        insert_image: 從外部連結插入圖片
+        insert_video: 從外部連結插入影片
+        insert_audio: 從外部連結插入音訊
       upload_attachment:
         toast:
           no_available_policy: 目前沒有可用的存儲策略