chore: bump @halo-dev/richtext-editor to supports more feature about media (#834)

#### What type of PR is this?

/kind feature

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

升级默认编辑器版本，改动请查阅：

1. https://github.com/halo-sigs/richtext-editor/pull/4
2. https://github.com/halo-sigs/richtext-editor/pull/3
3. https://github.com/halo-sigs/richtext-editor/pull/2

#### Special notes for your reviewer:

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

```release-note
升级 Console 端默认编辑器版本，以支持图片位置和大小设置、插入音视频等功能。
```

.npmrc

@@ -1 +1,2 @@
 strict-peer-dependencies=false
+auto-install-peers=true

package.json

@@ -44,7 +44,7 @@
     "@halo-dev/api-client": "0.0.71",
     "@halo-dev/components": "workspace:*",
     "@halo-dev/console-shared": "workspace:*",
-    "@halo-dev/richtext-editor": "^0.0.0-alpha.17",
+    "@halo-dev/richtext-editor": "0.0.0-alpha.19",
     "@tiptap/extension-character-count": "^2.0.0-beta.202",
     "@uppy/core": "^3.0.4",
     "@uppy/dashboard": "^3.2.0",

src/components/editor/DefaultEditor.vue

@@ -33,6 +33,8 @@ import {
   ExtensionHighlight,
   ExtensionCommands,
   ExtensionIframe,
+  ExtensionVideo,
+  ExtensionAudio,
   CommandsSuggestion,
   CommentParagraph,
   CommandHeader1,
@@ -43,6 +45,8 @@ import {
   CommandHeader6,
   CommandCodeBlock,
   CommandIframe,
+  CommandVideo,
+  CommandAudio,
   CommandTable,
   CommandBulletList,
   CommandOrderedList,
@@ -205,6 +209,8 @@ const editor = useEditor({
             CommandOrderedList,
             CommandTaskList,
             CommandIframe,
+            CommandVideo,
+            CommandAudio,
           ].filter((item) =>
             [...item.keywords, item.title].some((keyword) =>
               keyword.includes(query)
@@ -217,6 +223,8 @@ const editor = useEditor({
       lowlight,
     }),
     ExtensionIframe,
+    ExtensionVideo,
+    ExtensionAudio,
     ExtensionCharacterCount,
     Extension.create({
       addGlobalAttributes() {

src/modules/contents/attachments/composables/use-attachment.ts

@@ -285,32 +285,63 @@ export function useAttachmentSelect(
   editor: Ref<Editor | undefined>
 ): useAttachmentSelectReturn {
   const onAttachmentSelect = (attachments: AttachmentLike[]) => {
-    const images: Content[] = attachments.map((attachment) => {
-      const attrs: { src?: string; alt?: string } = {};
-      if (typeof attachment === "string") {
-        attrs.src = attachment;
-        return {
-          type: "image",
-          attrs,
-        };
-      }
-      if ("url" in attachment) {
-        attrs.src = attachment.url;
-        attrs.alt = attachment.type;
-      }
-      if ("spec" in attachment) {
-        attrs.src = attachment.status?.permalink;
-        attrs.alt = attachment.spec.displayName;
-      }
-      return {
-        type: "image",
-        attrs,
-      };
-    });
+    const contents: Content[] = attachments
+      .map((attachment) => {
+        if (typeof attachment === "string") {
+          return {
+            type: "image",
+            attrs: {
+              src: attachment,
+            },
+          };
+        }
+        if ("url" in attachment) {
+          return {
+            type: "image",
+            attrs: {
+              src: attachment.url,
+              alt: attachment.type,
+            },
+          };
+        }
+        if ("spec" in attachment) {
+          const { mediaType, displayName } = attachment.spec;
+          const { permalink } = attachment.status || {};
+          if (mediaType?.startsWith("image/")) {
+            return {
+              type: "image",
+              attrs: {
+                src: permalink,
+                alt: displayName,
+              },
+            };
+          }
+
+          if (mediaType?.startsWith("video/")) {
+            return {
+              type: "video",
+              attrs: {
+                src: permalink,
+              },
+            };
+          }
+
+          if (mediaType?.startsWith("audio/")) {
+            return {
+              type: "audio",
+              attrs: {
+                src: permalink,
+              },
+            };
+          }
+        }
+      })
+      .filter(Boolean) as Content[];
+    console.log(contents);
     editor.value
       ?.chain()
       .focus()
-      .insertContent([...images, { type: "paragraph", content: "" }])
+      .insertContent([...contents, { type: "paragraph", content: "" }])
       .run();
   };