fix: an extra line is added to the inline block (#5523)

#### What type of PR is this?

/kind bug
/area ui
/area editor
/milestone 2.14.x

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

解决默认编辑器中，行内块元素 `image`、`video` 及 `audio` 由于行内块导致其下方有额外一行的问题。

#### How to test it?

查看默认编辑器中上述组件是否还会出现在下方有额外空行的问题。

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

Fixes #5145 

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

```release-note
解决默认编辑器行内块元素下具有额外空行的问题
```

ui/src/components/editor/components/InlineBlockBox.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { NodeViewWrapper } from "@halo-dev/richtext-editor";
+</script>
+<template>
+  <node-view-wrapper as="div" class="inline-block-box inline-block">
+    <slot></slot>
+  </node-view-wrapper>
+</template>
+<style scoped lang="scss">
+.inline-block-box {
+  width: calc(100% - 1px);
+}
+</style>

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

@@ -1,11 +1,11 @@
 <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";
+import InlineBlockBox from "../../components/InlineBlockBox.vue";
 
 const props = defineProps<NodeViewProps>();
 
@@ -66,7 +66,7 @@ const handleResetInit = () => {
 </script>
 
 <template>
-  <node-view-wrapper as="div" class="inline-block w-full">
+  <InlineBlockBox>
     <div
       class="relative inline-block h-full max-w-full overflow-hidden rounded-md text-center transition-all"
       :class="{
@@ -192,5 +192,5 @@ const handleResetInit = () => {
         </EditorLinkObtain>
       </div>
     </div>
-  </node-view-wrapper>
+  </InlineBlockBox>
 </template>

ui/src/components/editor/extensions/image/ImageView.vue

@@ -5,13 +5,13 @@ import {
   type PMNode,
   type Decoration,
 } from "@halo-dev/richtext-editor";
-import { NodeViewWrapper } from "@halo-dev/richtext-editor";
 import { computed, onMounted, ref } from "vue";
 import Image from "./index";
 import { fileToBase64 } from "../../utils/upload";
 import { VButton, IconImageAddLine } from "@halo-dev/components";
 import { type AttachmentAttr } from "../../utils/attachment";
 import { EditorLinkObtain } from "../../components";
+import InlineBlockBox from "../../components/InlineBlockBox.vue";
 
 const props = defineProps<{
   editor: Editor;
@@ -158,7 +158,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <node-view-wrapper as="div" class="inline-block w-full">
+  <InlineBlockBox>
     <div
       ref="resizeRef"
       class="group relative inline-block max-w-full overflow-hidden rounded-md text-center"
@@ -286,5 +286,5 @@ onMounted(() => {
         </EditorLinkObtain>
       </div>
     </div>
-  </node-view-wrapper>
+  </InlineBlockBox>
 </template>

ui/src/components/editor/extensions/video/VideoView.vue

@@ -1,12 +1,12 @@
 <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";
+import InlineBlockBox from "../../components/InlineBlockBox.vue";
 
 const props = defineProps<{
   editor: Editor;
@@ -80,7 +80,7 @@ const handleResetInit = () => {
 </script>
 
 <template>
-  <node-view-wrapper as="div" class="inline-block w-full">
+  <InlineBlockBox>
     <div
       class="relative inline-block h-full max-w-full overflow-hidden rounded-md text-center transition-all"
       :class="{
@@ -206,5 +206,5 @@ const handleResetInit = () => {
         </EditorLinkObtain>
       </div>
     </div>
-  </node-view-wrapper>
+  </InlineBlockBox>
 </template>