diff --git a/ui/src/components/editor/components/InlineBlockBox.vue b/ui/src/components/editor/components/InlineBlockBox.vue
new file mode 100644
index 000000000..4aa22a015
--- /dev/null
+++ b/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>
diff --git a/ui/src/components/editor/extensions/audio/AudioView.vue b/ui/src/components/editor/extensions/audio/AudioView.vue
index 9413b1081..38d9111e5 100644
--- a/ui/src/components/editor/extensions/audio/AudioView.vue
+++ b/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>
diff --git a/ui/src/components/editor/extensions/image/ImageView.vue b/ui/src/components/editor/extensions/image/ImageView.vue
index 7c2cb7454..ef53dd73f 100644
--- a/ui/src/components/editor/extensions/image/ImageView.vue
+++ b/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>
diff --git a/ui/src/components/editor/extensions/video/VideoView.vue b/ui/src/components/editor/extensions/video/VideoView.vue
index bee226f17..9d4546ff8 100644
--- a/ui/src/components/editor/extensions/video/VideoView.vue
+++ b/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>