pref: change the display of block-level inline elements to inline-block

packages/editor/src/components/EditorBubbleMenu.vue

@@ -72,7 +72,7 @@ const shouldShow = (
     :default-animation="bubbleMenu.defaultAnimation"
   >
     <div
-      class="bubble-menu bg-white flex items-center rounded p-1 border drop-shadow space-x-0.5"
+      class="bubble-menu bg-white flex items-center rounded-md p-1 border drop-shadow space-x-0.5"
     >
       <template v-if="bubbleMenu.items">
         <template

packages/editor/src/components/bubble/BubbleItem.vue

@@ -58,7 +58,7 @@ const handleBubbleItemClick = (editor: Editor) => {
       }"
       :class="{ 'bg-gray-200 !text-black': isActive({ editor }) }"
       :title="title"
-      class="text-gray-600 text-lg hover:bg-gray-100 p-2 rounded-sm"
+      class="text-gray-600 text-lg hover:bg-gray-100 p-2 rounded-md"
       @click="handleBubbleItemClick(editor)"
     >
       <component :is="icon" :style="iconStyle" class="w-5 h-5" />

packages/editor/src/extensions/audio/AudioView.vue

@@ -47,7 +47,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <node-view-wrapper as="div">
+  <node-view-wrapper as="div" class="inline-block" :class="{ 'w-full': !src }">
     <div
       class="inline-block overflow-hidden transition-all text-center relative h-full w-full"
     >

packages/editor/src/extensions/iframe/IframeView.vue

@@ -42,7 +42,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <node-view-wrapper as="div">
+  <node-view-wrapper as="div" class="inline-block" :class="{ 'w-full': !src }">
     <div
       class="inline-block overflow-hidden transition-all text-center relative h-full"
       :style="{

packages/editor/src/extensions/image/BubbleItemImageLink.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { i18n } from "@/locales";
 import type { Editor } from "@tiptap/vue-3";
-import { computed, type Component, watch } from "vue";
+import { computed, type Component } from "vue";
 import Image from "./index";
 
 const props = defineProps<{

packages/editor/src/extensions/image/ImageView.vue

@@ -65,7 +65,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <node-view-wrapper as="div">
+  <node-view-wrapper as="div" class="inline-block" :class="{ 'w-full': !src }">
     <div v-if="!src" class="p-1.5 w-full">
       <input
         ref="inputRef"

packages/editor/src/extensions/link/LinkBubbleButton.vue

@@ -49,7 +49,7 @@ const target = computed({
           ? i18n.global.t('editor.extensions.link.edit_link')
           : i18n.global.t('editor.extensions.link.add_link')
       "
-      class="text-gray-600 text-lg hover:bg-gray-100 p-0.5 rounded-sm"
+      class="text-gray-600 text-lg hover:bg-gray-100 p-2 rounded-md"
       :class="{ 'bg-gray-200 !text-black': isActive({ editor }) }"
     >
       <MdiLinkVariant />

packages/editor/src/extensions/video/VideoView.vue

@@ -51,7 +51,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <node-view-wrapper as="div">
+  <node-view-wrapper as="div" class="inline-block" :class="{ 'w-full': !src }">
     <div
       class="inline-block overflow-hidden transition-all text-center relative h-full"
       :style="{