From a66b1bbb383311b647c466cbcb17d56f41c0378e Mon Sep 17 00:00:00 2001
From: LIlGG <1103069291@qq.com>
Date: Tue, 29 Aug 2023 16:55:08 +0800
Subject: [PATCH 01/11] chore: optimize the behavior of the bubble menu

---
 .../src/components/EditorBubbleMenu.vue       |  7 +++---
 .../src/components/bubble/BubbleItem.vue      | 22 ++++++++++++++++---
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/components/EditorBubbleMenu.vue b/packages/editor/src/components/EditorBubbleMenu.vue
index 6e9aaae..c39b0d2 100644
--- a/packages/editor/src/components/EditorBubbleMenu.vue
+++ b/packages/editor/src/components/EditorBubbleMenu.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { roundArrow } from "tippy.js";
-import "tippy.js/dist/svg-arrow.css";
 import type { PropType } from "vue";
 import type { Editor, AnyExtension } from "@tiptap/core";
 import { BubbleMenu, isTextSelection } from "@tiptap/vue-3";
@@ -84,7 +82,10 @@ const getShouldShow = ({
 <template>
   <bubble-menu
     :editor="editor"
-    :tippy-options="{ duration: 100, arrow: roundArrow, maxWidth: '100%' }"
+    :tippy-options="{
+      maxWidth: '100%',
+      moveTransition: 'transform 0.2s ease-out',
+    }"
     :should-show="getShouldShow"
   >
     <div
diff --git a/packages/editor/src/components/bubble/BubbleItem.vue b/packages/editor/src/components/bubble/BubbleItem.vue
index 997072c..c00e9fb 100644
--- a/packages/editor/src/components/bubble/BubbleItem.vue
+++ b/packages/editor/src/components/bubble/BubbleItem.vue
@@ -23,12 +23,28 @@ withDefaults(
 <template>
   <button
     v-if="visible"
-    v-tooltip="title"
+    v-tooltip="{
+      content: title,
+      distance: 8,
+      delay: {
+        show: 0,
+      },
+    }"
     :class="{ 'bg-gray-200 !text-black': isActive }"
     :title="title"
-    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-sm"
     @click="action?.()"
   >
-    <component :is="icon" />
+    <component :is="icon" class="w-5 h-5" />
   </button>
 </template>
+<style>
+.v-popper__popper.v-popper__popper--show-from .v-popper__wrapper {
+  transform: scale(0.9);
+}
+
+.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
+  transform: none;
+  transition: transform 0.1s;
+}
+</style>

From f42ad1b6c6eabe418854715418842db3a80ec23c Mon Sep 17 00:00:00 2001
From: LIlGG <1103069291@qq.com>
Date: Tue, 29 Aug 2023 18:39:15 +0800
Subject: [PATCH 02/11] wip: bubblemenu

---
 .../src/components/EditorBubbleMenu.vue       | 94 +++++--------------
 .../src/components/bubble/TextBubbleMenu.vue  | 14 +++
 packages/editor/src/extensions/text/index.ts  |  0
 packages/editor/src/types/index.ts            | 36 +++----
 4 files changed, 59 insertions(+), 85 deletions(-)
 create mode 100644 packages/editor/src/components/bubble/TextBubbleMenu.vue
 create mode 100644 packages/editor/src/extensions/text/index.ts

diff --git a/packages/editor/src/components/EditorBubbleMenu.vue b/packages/editor/src/components/EditorBubbleMenu.vue
index c39b0d2..76e29fe 100644
--- a/packages/editor/src/components/EditorBubbleMenu.vue
+++ b/packages/editor/src/components/EditorBubbleMenu.vue
@@ -1,10 +1,8 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
+import { markRaw, type PropType } from "vue";
 import type { Editor, AnyExtension } from "@tiptap/core";
-import { BubbleMenu, isTextSelection } from "@tiptap/vue-3";
-import type { BubbleItem } from "@/types";
-import type { EditorView } from "prosemirror-view";
-import type { EditorState } from "prosemirror-state";
+import { BubbleMenu } from "@tiptap/vue-3";
+import type { NodeBubbleMenu } from "@/types";
 
 const props = defineProps({
   editor: {
@@ -13,90 +11,50 @@ const props = defineProps({
   },
 });
 
-function getBubbleItemsFromExtensions() {
+const getBubbleMenuFromExtensions = () => {
   const extensionManager = props.editor?.extensionManager;
   return extensionManager.extensions
-    .reduce((acc: BubbleItem[], extension: AnyExtension) => {
-      const { getBubbleItems } = extension.options;
+    .map((extension: AnyExtension) => {
+      const { getBubbleMenu } = extension.options;
 
-      if (!getBubbleItems) {
-        return acc;
+      if (!getBubbleMenu) {
+        return null;
       }
 
-      const items = getBubbleItems({
+      const nodeBubbleMenu = getBubbleMenu({
         editor: props.editor,
-      });
+      }) as NodeBubbleMenu;
 
-      if (Array.isArray(items)) {
-        return [...acc, ...items];
-      }
-
-      return [...acc, items];
-    }, [])
-    .sort((a, b) => a.priority - b.priority);
-}
-
-const getShouldShow = ({
-  editor,
-  view,
-  state,
-  from,
-  to,
-}: {
-  editor: Editor;
-  view: EditorView;
-  state: EditorState;
-  oldState?: EditorState;
-  from: number;
-  to: number;
-}) => {
-  if (
-    editor.isActive("image") ||
-    editor.isActive("video") ||
-    editor.isActive("audio") ||
-    editor.isActive("iframe")
-  ) {
-    return false;
-  }
-
-  const { doc, selection } = state;
-  const { empty } = selection;
-
-  const isEmptyTextBlock =
-    !doc.textBetween(from, to).length && isTextSelection(state.selection);
-
-  const hasEditorFocus = view.hasFocus();
-
-  if (
-    !hasEditorFocus ||
-    empty ||
-    isEmptyTextBlock ||
-    !props.editor.isEditable
-  ) {
-    return false;
-  }
+      return nodeBubbleMenu;
+    })
+    .filter(Boolean) as NodeBubbleMenu[];
+};
 
-  return true;
+const defaultTextBubbleMenu = {
+  pluginKey: "textBubbleMenu",
+  shouldShow: ({ editor }) => {
+    const { selection } = editor.state;
+    return !selection.empty;
+  },
+  component: markRaw(TextBubbleMenu),
 };
 </script>
 <template>
   <bubble-menu
+    v-for="(bubbleMenu, index) in getBubbleMenuFromExtensions()"
+    :key="index"
+    :plugin-key="bubbleMenu?.pluginKey"
+    :should-show="bubbleMenu?.shouldShow"
     :editor="editor"
     :tippy-options="{
       maxWidth: '100%',
       moveTransition: 'transform 0.2s ease-out',
     }"
-    :should-show="getShouldShow"
   >
     <div
       class="bg-white flex items-center rounded p-1 border drop-shadow space-x-0.5"
     >
-      <component
-        :is="item.component"
-        v-for="(item, index) in getBubbleItemsFromExtensions()"
-        :key="index"
-        v-bind="item.props"
-      />
+      <component :is="bubbleMenu?.component" :editor="editor" />
     </div>
   </bubble-menu>
 </template>
diff --git a/packages/editor/src/components/bubble/TextBubbleMenu.vue b/packages/editor/src/components/bubble/TextBubbleMenu.vue
new file mode 100644
index 0000000..69861b5
--- /dev/null
+++ b/packages/editor/src/components/bubble/TextBubbleMenu.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { Editor } from "@tiptap/vue-3";
+import type { PropType } from "vue";
+
+const props = defineProps({
+  editor: {
+    type: Object as PropType<Editor>,
+    required: true,
+  },
+});
+</script>
+<template>
+  <div></div>
+</template>
diff --git a/packages/editor/src/extensions/text/index.ts b/packages/editor/src/extensions/text/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/packages/editor/src/types/index.ts b/packages/editor/src/types/index.ts
index 4b64b2e..32f5e3b 100644
--- a/packages/editor/src/types/index.ts
+++ b/packages/editor/src/types/index.ts
@@ -1,6 +1,7 @@
-import type { Editor, Range } from "@tiptap/vue-3";
+import type { Editor, Range } from "@tiptap/core";
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
 import type { Component } from "vue";
-
 export interface ToolbarItem {
   priority: number;
   component: Component;
@@ -15,17 +16,22 @@ export interface ToolbarItem {
   children?: ToolbarItem[];
 }
 
-export interface BubbleItem {
-  priority: number;
-  component: Component;
-  props: {
+interface BubbleItemProps {
+  pluginKey?: string;
+  editor: Editor;
+  updateDelay: number;
+  shouldShow: (props: {
     editor: Editor;
-    isActive: boolean;
-    visible?: boolean;
-    icon?: Component;
-    title?: string;
-    action?: () => void;
-  };
+    view: EditorView;
+    state: EditorState;
+    oldState?: EditorState | undefined;
+    from: number;
+    to: number;
+  }) => boolean;
+}
+
+export interface NodeBubbleMenu extends BubbleItemProps {
+  component: Component;
 }
 
 export interface ToolboxItem {
@@ -49,11 +55,7 @@ export interface ExtensionOptions {
 
   getCommandMenuItems?: () => CommandMenuItem | CommandMenuItem[];
 
-  getBubbleItems?: ({
-    editor,
-  }: {
-    editor: Editor;
-  }) => BubbleItem | BubbleItem[];
+  getBubbleMenu?: ({ editor }: { editor: Editor }) => NodeBubbleMenu;
 
   getToolboxItems?: ({
     editor,

From 48bc7f0882670719da9f79d57de1ad179f75ceaa Mon Sep 17 00:00:00 2001
From: LIlGG <1103069291@qq.com>
Date: Wed, 30 Aug 2023 18:41:10 +0800
Subject: [PATCH 03/11] wip: update bubble menu

---
 .../src/components/EditorBubbleMenu.vue       |  35 ++-
 .../src/components/bubble/BubbleItem.vue      |  82 +++++--
 .../src/components/bubble/TextBubbleMenu.ts   | 228 ++++++++++++++++++
 .../src/components/bubble/TextBubbleMenu.vue  |  14 --
 .../editor/src/extensions/audio/AudioView.vue | 147 ++---------
 .../extensions/audio/BubbleItemEditorLink.vue |  37 +++
 packages/editor/src/extensions/audio/index.ts | 111 ++++++++-
 .../editor/src/extensions/blockquote/index.ts |  16 --
 packages/editor/src/extensions/bold/index.ts  |  14 --
 .../code-block/CodeBlockViewRenderer.vue      |  44 ++--
 .../src/extensions/code-block/code-block.ts   |  36 +--
 packages/editor/src/extensions/code/index.ts  |  14 --
 .../src/extensions/color/ColorBubbleItem.vue  |  32 +--
 packages/editor/src/extensions/color/index.ts |  13 -
 .../highlight/HighlightBubbleItem.vue         |  30 +--
 .../editor/src/extensions/highlight/index.ts  |  12 -
 .../editor/src/extensions/italic/index.ts     |  14 --
 .../src/extensions/link/LinkBubbleButton.vue  |  31 +--
 packages/editor/src/extensions/link/index.ts  |  56 +----
 .../editor/src/extensions/strike/index.ts     |  14 --
 .../editor/src/extensions/subscript/index.ts  |  14 --
 .../src/extensions/superscript/index.ts       |  14 --
 .../editor/src/extensions/text-align/index.ts |  50 ----
 .../editor/src/extensions/underline/index.ts  |  14 --
 .../editor/src/extensions/video/VideoView.vue |  47 ----
 packages/editor/src/extensions/video/index.ts | 103 ++++++++
 packages/editor/src/types/index.ts            |  24 +-
 packages/editor/src/utils/delete-node.ts      |  47 ++++
 packages/editor/src/utils/index.ts            |   1 +
 29 files changed, 720 insertions(+), 574 deletions(-)
 create mode 100644 packages/editor/src/components/bubble/TextBubbleMenu.ts
 delete mode 100644 packages/editor/src/components/bubble/TextBubbleMenu.vue
 create mode 100644 packages/editor/src/extensions/audio/BubbleItemEditorLink.vue
 create mode 100644 packages/editor/src/utils/delete-node.ts
 create mode 100644 packages/editor/src/utils/index.ts

diff --git a/packages/editor/src/components/EditorBubbleMenu.vue b/packages/editor/src/components/EditorBubbleMenu.vue
index 76e29fe..28c6930 100644
--- a/packages/editor/src/components/EditorBubbleMenu.vue
+++ b/packages/editor/src/components/EditorBubbleMenu.vue
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
-import { markRaw, type PropType } from "vue";
+import type { PropType } from "vue";
 import type { Editor, AnyExtension } from "@tiptap/core";
 import { BubbleMenu } from "@tiptap/vue-3";
 import type { NodeBubbleMenu } from "@/types";
+import BubbleItem from "@/components/bubble/BubbleItem.vue";
+import { defaultTextBubbleMenu } from "@/components/bubble/TextBubbleMenu";
 
 const props = defineProps({
   editor: {
@@ -27,17 +29,9 @@ const getBubbleMenuFromExtensions = () => {
 
       return nodeBubbleMenu;
     })
+    .concat([defaultTextBubbleMenu])
     .filter(Boolean) as NodeBubbleMenu[];
 };
-
-const defaultTextBubbleMenu = {
-  pluginKey: "textBubbleMenu",
-  shouldShow: ({ editor }) => {
-    const { selection } = editor.state;
-    return !selection.empty;
-  },
-  component: markRaw(TextBubbleMenu),
-};
 </script>
 <template>
   <bubble-menu
@@ -49,12 +43,31 @@ const defaultTextBubbleMenu = {
     :tippy-options="{
       maxWidth: '100%',
       moveTransition: 'transform 0.2s ease-out',
+      ...bubbleMenu.tippyOptions,
     }"
+    :update-delay="bubbleMenu.updateDelay || 150"
   >
     <div
       class="bg-white flex items-center rounded p-1 border drop-shadow space-x-0.5"
     >
-      <component :is="bubbleMenu?.component" :editor="editor" />
+      <template v-if="bubbleMenu.items">
+        <template
+          v-for="(item, itemIndex) in bubbleMenu.items"
+          :key="itemIndex"
+        >
+          <template v-if="item.component">
+            <component
+              :is="item.component"
+              v-bind="item.props"
+              :editor="editor"
+            />
+          </template>
+          <bubble-item v-else :editor="editor" v-bind="item.props" />
+        </template>
+      </template>
+      <template v-else-if="bubbleMenu.component">
+        <component :is="bubbleMenu?.component" :editor="editor" />
+      </template>
     </div>
   </bubble-menu>
 </template>
diff --git a/packages/editor/src/components/bubble/BubbleItem.vue b/packages/editor/src/components/bubble/BubbleItem.vue
index c00e9fb..ede50f0 100644
--- a/packages/editor/src/components/bubble/BubbleItem.vue
+++ b/packages/editor/src/components/bubble/BubbleItem.vue
@@ -1,42 +1,76 @@
 <script lang="ts" setup>
-import type { Component } from "vue";
-import { VTooltip } from "floating-vue";
+import { VTooltip, Dropdown as VDropdown } from "floating-vue";
+import type { Editor } from "@tiptap/core";
+import { ref, type Component, computed, watch } from "vue";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
-    isActive?: boolean;
-    visible?: boolean;
-    title?: string;
-    action?: () => void;
+    editor: Editor;
+    isActive: ({ editor }: { editor: Editor }) => boolean;
+    visible?: ({ editor }: { editor: Editor }) => boolean;
     icon?: Component;
+    title?: string;
+    action?: ({ editor }: { editor: Editor }) => Component | void;
   }>(),
   {
-    isActive: false,
-    visible: true,
+    isActive: () => false,
+    visible: () => true,
     title: undefined,
     action: undefined,
     icon: undefined,
   }
 );
+
+const componentRef = ref<Component | void>();
+const handleBubbleItemClick = (editor: Editor) => {
+  if (!props.action) {
+    return;
+  }
+  const callback = props.action?.({ editor });
+  if (typeof callback === "object") {
+    if (componentRef.value) {
+      componentRef.value = undefined;
+    } else {
+      componentRef.value = callback;
+    }
+  }
+};
 </script>
 
 <template>
-  <button
-    v-if="visible"
-    v-tooltip="{
-      content: title,
-      distance: 8,
-      delay: {
-        show: 0,
-      },
-    }"
-    :class="{ 'bg-gray-200 !text-black': isActive }"
-    :title="title"
-    class="text-gray-600 text-lg hover:bg-gray-100 p-2 rounded-sm"
-    @click="action?.()"
+  <VDropdown
+    class="inline-flex"
+    :triggers="[]"
+    :auto-hide="true"
+    :shown="componentRef"
+    :distance="10"
   >
-    <component :is="icon" class="w-5 h-5" />
-  </button>
+    <button
+      v-if="visible({ editor })"
+      v-tooltip="{
+        content: title,
+        distance: 8,
+        delay: {
+          show: 0,
+        },
+      }"
+      :class="{ 'bg-gray-200 !text-black': isActive({ editor }) }"
+      :title="title"
+      class="text-gray-600 text-lg hover:bg-gray-100 p-2 rounded-sm"
+      @click="handleBubbleItemClick(editor)"
+    >
+      <component :is="icon" class="w-5 h-5" />
+    </button>
+    <template #popper>
+      <div
+        class="relative rounded-md bg-white overflow-hidden drop-shadow w-96 p-1 max-h-72 overflow-y-auto"
+      >
+        <KeepAlive>
+          <component :is="componentRef" v-bind="props"></component>
+        </KeepAlive>
+      </div>
+    </template>
+  </VDropdown>
 </template>
 <style>
 .v-popper__popper.v-popper__popper--show-from .v-popper__wrapper {
diff --git a/packages/editor/src/components/bubble/TextBubbleMenu.ts b/packages/editor/src/components/bubble/TextBubbleMenu.ts
new file mode 100644
index 0000000..7a4dc3a
--- /dev/null
+++ b/packages/editor/src/components/bubble/TextBubbleMenu.ts
@@ -0,0 +1,228 @@
+import { i18n } from "@/locales";
+import type { NodeBubbleMenu } from "@/types";
+import { markRaw } from "vue";
+import ColorBubbleItem from "@/extensions/color/ColorBubbleItem.vue";
+import HighlightBubbleItem from "@/extensions/highlight/HighlightBubbleItem.vue";
+import LinkBubbleButton from "@/extensions/link/LinkBubbleButton.vue";
+import MdiFormatQuoteOpen from "~icons/mdi/format-quote-open";
+import MdiCodeTags from "~icons/mdi/code-tags";
+import MdiCodeBracesBox from "~icons/mdi/code-braces-box";
+import MdiFormatColor from "~icons/mdi/format-color";
+import MdiFormatColorHighlight from "~icons/mdi/format-color-highlight";
+import MdiFormatItalic from "~icons/mdi/format-italic";
+import MdiLinkVariantOff from "~icons/mdi/link-variant-off";
+import MdiShare from "~icons/mdi/share";
+import MdiFormatStrikethrough from "~icons/mdi/format-strikethrough";
+import MdiFormatSubscript from "~icons/mdi/format-subscript";
+import MdiFormatSuperscript from "~icons/mdi/format-superscript";
+import MdiFormatAlignLeft from "~icons/mdi/format-align-left";
+import MdiFormatAlignCenter from "~icons/mdi/format-align-center";
+import MdiFormatAlignRight from "~icons/mdi/format-align-right";
+import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
+import MdiFormatUnderline from "~icons/mdi/format-underline";
+import { isTextSelection } from "@tiptap/core";
+
+const OTHER_BUBBLE_MENU_TYPES = ["audio", "video", "image", "iframe"];
+
+export const defaultTextBubbleMenu: NodeBubbleMenu = {
+  pluginKey: "textBubbleMenu",
+  tippyOptions: {
+    placement: "top",
+  },
+  shouldShow: ({ editor, view, state, from, to }) => {
+    const { empty } = editor.state.selection;
+    if (empty) {
+      return false;
+    }
+
+    if (OTHER_BUBBLE_MENU_TYPES.some((type) => editor.isActive(type))) {
+      return false;
+    }
+
+    const { doc } = editor.state;
+
+    const isEmptyTextBlock =
+      !doc.textBetween(from, to).length && isTextSelection(state.selection);
+    if (isEmptyTextBlock) {
+      return false;
+    }
+
+    const hasEditorFocus = view.hasFocus();
+    if (!hasEditorFocus) {
+      return false;
+    }
+
+    if (!editor.isEditable) {
+      return false;
+    }
+
+    return true;
+  },
+  items: [
+    {
+      priority: 20,
+      props: {
+        isActive: ({ editor }) => editor.isActive("italic"),
+        icon: markRaw(MdiFormatItalic),
+        title: i18n.global.t("editor.common.italic"),
+        action: ({ editor }) => editor.chain().focus().toggleItalic().run(),
+      },
+    },
+    {
+      priority: 30,
+      props: {
+        isActive: ({ editor }) => editor.isActive("underline"),
+        icon: markRaw(MdiFormatUnderline),
+        title: i18n.global.t("editor.common.underline"),
+        action: ({ editor }) => editor.chain().focus().toggleUnderline().run(),
+      },
+    },
+    {
+      priority: 40,
+      props: {
+        isActive: ({ editor }) => editor.isActive("strike"),
+        icon: markRaw(MdiFormatStrikethrough),
+        title: i18n.global.t("editor.common.strike"),
+        action: ({ editor }) => editor.chain().focus().toggleStrike().run(),
+      },
+    },
+    {
+      priority: 50,
+      component: markRaw(HighlightBubbleItem),
+      props: {
+        isActive: ({ editor }) => editor.isActive("highlight"),
+        icon: markRaw(MdiFormatColorHighlight),
+        title: i18n.global.t("editor.common.highlight"),
+      },
+    },
+    {
+      priority: 51,
+      component: markRaw(ColorBubbleItem),
+      props: {
+        isActive: ({ editor }) => editor.isActive("color"),
+        icon: markRaw(MdiFormatColor),
+        title: i18n.global.t("editor.common.color"),
+      },
+    },
+    {
+      priority: 60,
+      props: {
+        isActive: ({ editor }) => editor.isActive("blockquote"),
+        icon: markRaw(MdiFormatQuoteOpen),
+        title: i18n.global.t("editor.common.quote"),
+        action: ({ editor }) => {
+          return editor.commands.toggleBlockquote();
+        },
+      },
+    },
+    {
+      priority: 80,
+      props: {
+        isActive: ({ editor }) => editor.isActive("code"),
+        icon: markRaw(MdiCodeTags),
+        title: i18n.global.t("editor.common.code"),
+        action: ({ editor }) => editor.chain().focus().toggleCode().run(),
+      },
+    },
+    {
+      priority: 90,
+      props: {
+        isActive: ({ editor }) => editor.isActive("codeBlock"),
+        icon: markRaw(MdiCodeBracesBox),
+        title: i18n.global.t("editor.common.codeblock"),
+        action: ({ editor }) => editor.chain().focus().toggleCodeBlock().run(),
+      },
+    },
+    {
+      priority: 100,
+      props: {
+        isActive: ({ editor }) => editor.isActive("superscript"),
+        icon: markRaw(MdiFormatSuperscript),
+        title: i18n.global.t("editor.common.superscript"),
+        action: ({ editor }) =>
+          editor.chain().focus().toggleSuperscript().run(),
+      },
+    },
+    {
+      priority: 110,
+      props: {
+        isActive: ({ editor }) => editor.isActive("subscript"),
+        icon: markRaw(MdiFormatSubscript),
+        title: i18n.global.t("editor.common.subscript"),
+        action: ({ editor }) => editor.chain().focus().toggleSubscript().run(),
+      },
+    },
+    {
+      priority: 120,
+      props: {
+        isActive: ({ editor }) => editor.isActive({ textAlign: "left" }),
+        icon: markRaw(MdiFormatAlignLeft),
+        title: i18n.global.t("editor.common.align_left"),
+        action: ({ editor }) =>
+          editor.chain().focus().setTextAlign("left").run(),
+      },
+    },
+    {
+      priority: 130,
+      props: {
+        isActive: ({ editor }) => editor.isActive({ textAlign: "center" }),
+        icon: markRaw(MdiFormatAlignCenter),
+        title: i18n.global.t("editor.common.align_center"),
+        action: ({ editor }) =>
+          editor.chain().focus().setTextAlign("center").run(),
+      },
+    },
+    {
+      priority: 140,
+      props: {
+        isActive: ({ editor }) => editor.isActive({ textAlign: "right" }),
+        icon: markRaw(MdiFormatAlignRight),
+        title: i18n.global.t("editor.common.align_right"),
+        action: ({ editor }) =>
+          editor.chain().focus().setTextAlign("right").run(),
+      },
+    },
+    {
+      priority: 150,
+      props: {
+        isActive: ({ editor }) => editor.isActive({ textAlign: "justify" }),
+        icon: markRaw(MdiFormatAlignJustify),
+        title: i18n.global.t("editor.common.align_justify"),
+        action: ({ editor }) =>
+          editor.chain().focus().setTextAlign("justify").run(),
+      },
+    },
+    {
+      priority: 160,
+      component: markRaw(LinkBubbleButton),
+      props: {
+        isActive: ({ editor }) => editor.isActive("link"),
+      },
+    },
+    {
+      priority: 170,
+      props: {
+        isActive: () => false,
+        visible: ({ editor }) => editor.isActive("link"),
+        icon: markRaw(MdiLinkVariantOff),
+        title: i18n.global.t("editor.extensions.link.cancel_link"),
+        action: ({ editor }) => editor.commands.unsetLink(),
+      },
+    },
+    {
+      priority: 180,
+      props: {
+        isActive: () => false,
+        visible: ({ editor }) => editor.isActive("link"),
+        icon: markRaw(MdiShare),
+        title: i18n.global.t("editor.common.tooltip.open_link"),
+        action: ({ editor }) => {
+          const attrs = editor.getAttributes("link");
+          if (attrs?.href) {
+            window.open(attrs.href, "_blank");
+          }
+        },
+      },
+    },
+  ],
+};
diff --git a/packages/editor/src/components/bubble/TextBubbleMenu.vue b/packages/editor/src/components/bubble/TextBubbleMenu.vue
deleted file mode 100644
index 69861b5..0000000
--- a/packages/editor/src/components/bubble/TextBubbleMenu.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { Editor } from "@tiptap/vue-3";
-import type { PropType } from "vue";
-
-const props = defineProps({
-  editor: {
-    type: Object as PropType<Editor>,
-    required: true,
-  },
-});
-</script>
-<template>
-  <div></div>
-</template>
diff --git a/packages/editor/src/extensions/audio/AudioView.vue b/packages/editor/src/extensions/audio/AudioView.vue
index e610ee9..8632a5d 100644
--- a/packages/editor/src/extensions/audio/AudioView.vue
+++ b/packages/editor/src/extensions/audio/AudioView.vue
@@ -3,16 +3,6 @@ import type { Node as ProseMirrorNode } from "prosemirror-model";
 import type { Decoration } from "prosemirror-view";
 import { Editor, NodeViewWrapper, Node } from "@tiptap/vue-3";
 import { computed, onMounted, ref } from "vue";
-import { Dropdown as VDropdown } from "floating-vue";
-import BlockCard from "@/components/block/BlockCard.vue";
-import BlockActionButton from "@/components/block/BlockActionButton.vue";
-import BlockActionSeparator from "@/components/block/BlockActionSeparator.vue";
-import MdiLinkVariant from "~icons/mdi/link-variant";
-import MdiShare from "~icons/mdi/share";
-import MdiPlayCircle from "~icons/mdi/play-circle";
-import MdiPlayCircleOutline from "~icons/mdi/play-circle-outline";
-import MdiMotionPlayOutline from "~icons/mdi/motion-play-outline";
-import MdiMotionPlay from "~icons/mdi/motion-play";
 import { i18n } from "@/locales";
 
 const props = defineProps<{
@@ -47,24 +37,6 @@ function handleSetFocus() {
   props.editor.commands.setNodeSelection(props.getPos());
 }
 
-function handleToggleAutoplay() {
-  props.updateAttributes({
-    autoplay: props.node.attrs.autoplay ? null : true,
-  });
-  props.editor.chain().focus().setNodeSelection(props.getPos()).run();
-}
-
-function handleToggleLoop() {
-  props.updateAttributes({
-    loop: props.node.attrs.loop ? null : true,
-  });
-  props.editor.chain().focus().setNodeSelection(props.getPos()).run();
-}
-
-function handleOpenLink() {
-  window.open(src.value, "_blank");
-}
-
 const inputRef = ref();
 
 onMounted(() => {
@@ -76,104 +48,27 @@ onMounted(() => {
 
 <template>
   <node-view-wrapper as="div">
-    <block-card
-      :editor="editor"
-      :get-pos="getPos"
-      :delete-node="deleteNode"
-      :selected="selected"
+    <div
+      class="inline-block overflow-hidden transition-all text-center relative h-full w-full"
     >
-      <template #content>
-        <div
-          class="inline-block overflow-hidden transition-all text-center relative h-full w-full"
-        >
-          <div v-if="!src" class="p-1.5">
-            <input
-              ref="inputRef"
-              v-model.lazy="src"
-              class="block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
-              :placeholder="
-                i18n.global.t('editor.common.placeholder.link_input')
-              "
-              tabindex="-1"
-              @focus="handleSetFocus"
-            />
-          </div>
-          <audio
-            v-else
-            controls
-            :autoplay="autoplay"
-            :loop="loop"
-            :src="node!.attrs.src"
-            @mouseenter="handleSetFocus"
-          ></audio>
-        </div>
-      </template>
-      <template #actions>
-        <BlockActionButton
-          :selected="autoplay"
-          :tooltip="`${
-            autoplay
-              ? i18n.global.t('editor.extensions.audio.disable_autoplay')
-              : i18n.global.t('editor.extensions.audio.enable_autoplay')
-          }`"
-          @click="handleToggleAutoplay"
-        >
-          <template #icon>
-            <MdiPlayCircle v-if="autoplay" />
-            <MdiPlayCircleOutline v-else />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionButton
-          :selected="loop"
-          :tooltip="`${
-            loop
-              ? i18n.global.t('editor.extensions.audio.disable_loop')
-              : i18n.global.t('editor.extensions.audio.enable_loop')
-          }`"
-          @click="handleToggleLoop"
-        >
-          <template #icon>
-            <MdiMotionPlay v-if="loop" />
-            <MdiMotionPlayOutline v-else />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionSeparator />
-
-        <VDropdown class="inline-flex" :triggers="['click']" :distance="10">
-          <BlockActionButton
-            :tooltip="i18n.global.t('editor.common.button.edit_link')"
-          >
-            <template #icon>
-              <MdiLinkVariant />
-            </template>
-          </BlockActionButton>
-
-          <template #popper>
-            <div
-              class="relative rounded-md bg-white overflow-hidden drop-shadow w-96 p-1 max-h-72 overflow-y-auto"
-            >
-              <input
-                v-model.lazy="src"
-                :placeholder="
-                  i18n.global.t('editor.common.placeholder.link_input')
-                "
-                class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
-              />
-            </div>
-          </template>
-        </VDropdown>
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.common.tooltip.open_link')"
-          @click="handleOpenLink"
-        >
-          <template #icon>
-            <MdiShare />
-          </template>
-        </BlockActionButton>
-      </template>
-    </block-card>
+      <div v-if="!src" class="p-1.5">
+        <input
+          ref="inputRef"
+          v-model.lazy="src"
+          class="block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
+          :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
+          tabindex="-1"
+          @focus="handleSetFocus"
+        />
+      </div>
+      <audio
+        v-else
+        controls
+        :autoplay="autoplay"
+        :loop="loop"
+        :src="node!.attrs.src"
+        @mouseenter="handleSetFocus"
+      ></audio>
+    </div>
   </node-view-wrapper>
 </template>
diff --git a/packages/editor/src/extensions/audio/BubbleItemEditorLink.vue b/packages/editor/src/extensions/audio/BubbleItemEditorLink.vue
new file mode 100644
index 0000000..8a1ed1f
--- /dev/null
+++ b/packages/editor/src/extensions/audio/BubbleItemEditorLink.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import type { Editor } from "@tiptap/vue-3";
+import { computed, type Component } from "vue";
+import Audio from "./index";
+import { i18n } from "@/locales";
+
+const props = defineProps<{
+  editor: Editor;
+  isActive: ({ editor }: { editor: Editor }) => boolean;
+  visible?: ({ editor }: { editor: Editor }) => boolean;
+  icon?: Component;
+  title?: string;
+  action?: ({ editor }: { editor: Editor }) => void;
+}>();
+
+const src = computed({
+  get: () => {
+    return props.editor.getAttributes(Audio.name)?.src;
+  },
+  set: (src: string) => {
+    props.editor
+      .chain()
+      .updateAttributes(Audio.name, { src: src })
+      .setNodeSelection(props.editor.state.selection.from)
+      .focus()
+      .run();
+  },
+});
+</script>
+
+<template>
+  <input
+    v-model.lazy="src"
+    :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
+    class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+  />
+</template>
diff --git a/packages/editor/src/extensions/audio/index.ts b/packages/editor/src/extensions/audio/index.ts
index e90395f..0cc728f 100644
--- a/packages/editor/src/extensions/audio/index.ts
+++ b/packages/editor/src/extensions/audio/index.ts
@@ -1,4 +1,4 @@
-import type { ExtensionOptions } from "@/types";
+import type { BubbleItem, ExtensionOptions } from "@/types";
 import {
   Editor,
   mergeAttributes,
@@ -12,6 +12,16 @@ import AudioView from "./AudioView.vue";
 import MdiMusicCircleOutline from "~icons/mdi/music-circle-outline";
 import ToolboxItem from "@/components/toolbox/ToolboxItem.vue";
 import { i18n } from "@/locales";
+import MdiPlayCircle from "~icons/mdi/play-circle";
+import MdiPlayCircleOutline from "~icons/mdi/play-circle-outline";
+import MdiMotionPlayOutline from "~icons/mdi/motion-play-outline";
+import MdiMotionPlay from "~icons/mdi/motion-play";
+import { BlockActionSeparator } from "@/components";
+import BubbleItemEditorLink from "./BubbleItemEditorLink.vue";
+import MdiLinkVariant from "~icons/mdi/link-variant";
+import MdiShare from "~icons/mdi/share";
+import { deleteNode } from "@/utils";
+import MdiDeleteForeverOutline from "~icons/mdi/delete-forever-outline?color=red";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -160,6 +170,105 @@ const Audio = Node.create<ExtensionOptions>({
           },
         ];
       },
+      getBubbleMenu({ editor }) {
+        return {
+          pluginKey: "audioBubbleMenu",
+          shouldShow: () => {
+            return editor.isActive(Audio.name);
+          },
+          items: [
+            {
+              priority: 10,
+              props: {
+                isActive: () => {
+                  return editor.getAttributes(Audio.name).autoplay;
+                },
+                icon: markRaw(
+                  editor.getAttributes(Audio.name).autoplay
+                    ? MdiPlayCircle
+                    : MdiPlayCircleOutline
+                ),
+                action: () => {
+                  return editor
+                    .chain()
+                    .updateAttributes(Audio.name, {
+                      autoplay: editor.getAttributes(Audio.name).autoplay
+                        ? null
+                        : true,
+                    })
+                    .setNodeSelection(editor.state.selection.from)
+                    .focus()
+                    .run();
+                },
+                title: editor.getAttributes(Audio.name).autoplay
+                  ? i18n.global.t("editor.extensions.audio.disable_autoplay")
+                  : i18n.global.t("editor.extensions.audio.enable_autoplay"),
+              },
+            },
+            {
+              priority: 20,
+              props: {
+                isActive: () => {
+                  return editor.getAttributes(Audio.name).loop;
+                },
+                icon: markRaw(
+                  editor.getAttributes(Audio.name).loop
+                    ? MdiMotionPlay
+                    : MdiMotionPlayOutline
+                ),
+                action: () => {
+                  return editor
+                    .chain()
+                    .updateAttributes(Audio.name, {
+                      loop: editor.getAttributes(Audio.name).loop ? null : true,
+                    })
+                    .setNodeSelection(editor.state.selection.from)
+                    .focus()
+                    .run();
+                },
+                title: editor.getAttributes(Audio.name).loop
+                  ? i18n.global.t("editor.extensions.audio.disable_loop")
+                  : i18n.global.t("editor.extensions.audio.enable_loop"),
+              },
+            },
+            {
+              priority: 30,
+              component: markRaw(BlockActionSeparator),
+            },
+            {
+              priority: 40,
+              props: {
+                icon: markRaw(MdiLinkVariant),
+                title: i18n.global.t("editor.common.button.edit_link"),
+                action: () => {
+                  return markRaw(BubbleItemEditorLink);
+                },
+              },
+            },
+            {
+              priority: 50,
+              props: {
+                icon: markRaw(MdiShare),
+                title: i18n.global.t("editor.common.tooltip.open_link"),
+                action: () =>
+                  window.open(editor.getAttributes(Audio.name).src, "_blank"),
+              },
+            },
+            {
+              priority: 60,
+              component: markRaw(BlockActionSeparator),
+            },
+            {
+              priority: 70,
+              props: {
+                icon: markRaw(MdiDeleteForeverOutline),
+                title: i18n.global.t("editor.common.button.delete"),
+                action: ({ editor }) => deleteNode(Audio.name, editor),
+              },
+            },
+          ],
+        };
+      },
     };
   },
 });
diff --git a/packages/editor/src/extensions/blockquote/index.ts b/packages/editor/src/extensions/blockquote/index.ts
index 061d728..ba4f6db 100644
--- a/packages/editor/src/extensions/blockquote/index.ts
+++ b/packages/editor/src/extensions/blockquote/index.ts
@@ -6,7 +6,6 @@ import MdiFormatQuoteOpen from "~icons/mdi/format-quote-open";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
 import type { ExtensionOptions } from "@/types";
-import BubbleItem from "@/components/bubble/BubbleItem.vue";
 
 const Blockquote = TiptapBlockquote.extend<
   ExtensionOptions & BlockquoteOptions
@@ -29,21 +28,6 @@ const Blockquote = TiptapBlockquote.extend<
           },
         };
       },
-      getBubbleItems({ editor }: { editor: Editor }) {
-        return {
-          priority: 60,
-          component: markRaw(BubbleItem),
-          props: {
-            editor,
-            isActive: editor.isActive("blockquote"),
-            icon: markRaw(MdiFormatQuoteOpen),
-            title: i18n.global.t("editor.common.quote"),
-            action: () => {
-              editor.commands.toggleBlockquote();
-            },
-          },
-        };
-      },
     };
   },
 });
diff --git a/packages/editor/src/extensions/bold/index.ts b/packages/editor/src/extensions/bold/index.ts
index de262ba..55ce375 100644
--- a/packages/editor/src/extensions/bold/index.ts
+++ b/packages/editor/src/extensions/bold/index.ts
@@ -6,7 +6,6 @@ import MdiFormatBold from "~icons/mdi/format-bold";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
 import type { ExtensionOptions } from "@/types";
-import BubbleItem from "@/components/bubble/BubbleItem.vue";
 
 const Bold = TiptapBold.extend<ExtensionOptions & BoldOptions>({
   addOptions() {
@@ -25,19 +24,6 @@ const Bold = TiptapBold.extend<ExtensionOptions & BoldOptions>({
           },
         };
       },
-      getBubbleItems({ editor }: { editor: Editor }) {
-        return {
-          priority: 10,
-          component: markRaw(BubbleItem),
-          props: {
-            editor,
-            isActive: editor.isActive("bold"),
-            icon: markRaw(MdiFormatBold),
-            title: i18n.global.t("editor.common.bold"),
-            action: () => editor.chain().focus().toggleBold().run(),
-          },
-        };
-      },
     };
   },
 });
diff --git a/packages/editor/src/extensions/code-block/CodeBlockViewRenderer.vue b/packages/editor/src/extensions/code-block/CodeBlockViewRenderer.vue
index e09a936..eb536ee 100644
--- a/packages/editor/src/extensions/code-block/CodeBlockViewRenderer.vue
+++ b/packages/editor/src/extensions/code-block/CodeBlockViewRenderer.vue
@@ -4,7 +4,6 @@ import type { Decoration } from "prosemirror-view";
 import { NodeViewContent, NodeViewWrapper, Editor, Node } from "@tiptap/vue-3";
 import lowlight from "./lowlight";
 import { computed } from "vue";
-import BlockCard from "@/components/block/BlockCard.vue";
 
 const props = defineProps<{
   editor: Editor;
@@ -32,31 +31,22 @@ const selectedLanguage = computed({
 </script>
 <template>
   <node-view-wrapper>
-    <block-card
-      :editor="editor"
-      :delete-node="deleteNode"
-      :get-pos="getPos"
-      :selected="selected"
-    >
-      <template #content>
-        <div class="py-1.5">
-          <select
-            v-model="selectedLanguage"
-            contenteditable="false"
-            class="block px-2 py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
-          >
-            <option :value="null">auto</option>
-            <option
-              v-for="(language, index) in languages"
-              :key="index"
-              :value="language"
-            >
-              {{ language }}
-            </option>
-          </select>
-        </div>
-        <pre><node-view-content as="code" class="hljs" /></pre>
-      </template>
-    </block-card>
+    <div class="py-1.5">
+      <select
+        v-model="selectedLanguage"
+        contenteditable="false"
+        class="block px-2 py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
+      >
+        <option :value="null">auto</option>
+        <option
+          v-for="(language, index) in languages"
+          :key="index"
+          :value="language"
+        >
+          {{ language }}
+        </option>
+      </select>
+    </div>
+    <pre><node-view-content as="code" class="hljs" /></pre>
   </node-view-wrapper>
 </template>
diff --git a/packages/editor/src/extensions/code-block/code-block.ts b/packages/editor/src/extensions/code-block/code-block.ts
index 917aea6..86ba1d3 100644
--- a/packages/editor/src/extensions/code-block/code-block.ts
+++ b/packages/editor/src/extensions/code-block/code-block.ts
@@ -11,9 +11,10 @@ import ToolbarItem from "@/components/toolbar/ToolbarItem.vue";
 import MdiCodeBracesBox from "~icons/mdi/code-braces-box";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
-import BubbleItem from "@/components/bubble/BubbleItem.vue";
 import ToolboxItem from "@/components/toolbox/ToolboxItem.vue";
 import { TextSelection, type Transaction } from "prosemirror-state";
+import MdiDeleteForeverOutline from "~icons/mdi/delete-forever-outline?color=red";
+import { deleteNode } from "@/utils";
 
 export interface CustomCodeBlockLowlightOptions
   extends CodeBlockLowlightOptions {
@@ -138,19 +139,6 @@ export default CodeBlockLowlight.extend<
           },
         };
       },
-      getBubbleItems({ editor }: { editor: Editor }) {
-        return {
-          priority: 90,
-          component: markRaw(BubbleItem),
-          props: {
-            editor,
-            isActive: editor.isActive("codeBlock"),
-            icon: markRaw(MdiCodeBracesBox),
-            title: i18n.global.t("editor.common.codeblock"),
-            action: () => editor.chain().focus().toggleCodeBlock().run(),
-          },
-        };
-      },
       getCommandMenuItems() {
         return {
           priority: 80,
@@ -178,6 +166,26 @@ export default CodeBlockLowlight.extend<
           },
         ];
       },
+      getBubbleMenu({ editor }: { editor: Editor }) {
+        return {
+          pluginKey: "codeBlockBubbleMenu",
+          shouldShow: () => {
+            // TODO 定位问题，应当相对于 code 整体而不是其中的某个文本节点
+            return editor.isActive(CodeBlockLowlight.name);
+          },
+          items: [
+            {
+              priority: 10,
+              props: {
+                icon: markRaw(MdiDeleteForeverOutline),
+                title: i18n.global.t("editor.common.button.delete"),
+                action: ({ editor }: { editor: Editor }) =>
+                  deleteNode(CodeBlockLowlight.name, editor),
+              },
+            },
+          ],
+        };
+      },
     };
   },
 });
diff --git a/packages/editor/src/extensions/code/index.ts b/packages/editor/src/extensions/code/index.ts
index 85f4d40..0b47247 100644
--- a/packages/editor/src/extensions/code/index.ts
+++ b/packages/editor/src/extensions/code/index.ts
@@ -6,7 +6,6 @@ import MdiCodeTags from "~icons/mdi/code-tags";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
 import type { ExtensionOptions } from "@/types";
-import BubbleItem from "@/components/bubble/BubbleItem.vue";
 
 const Code = TiptapCode.extend<ExtensionOptions & CodeOptions>({
   addOptions() {
@@ -25,19 +24,6 @@ const Code = TiptapCode.extend<ExtensionOptions & CodeOptions>({
           },
         };
       },
-      getBubbleItems({ editor }: { editor: Editor }) {
-        return {
-          priority: 80,
-          component: markRaw(BubbleItem),
-          props: {
-            editor,
-            isActive: editor.isActive("code"),
-            icon: markRaw(MdiCodeTags),
-            title: i18n.global.t("editor.common.code"),
-            action: () => editor.chain().focus().toggleCode().run(),
-          },
-        };
-      },
     };
   },
 });
diff --git a/packages/editor/src/extensions/color/ColorBubbleItem.vue b/packages/editor/src/extensions/color/ColorBubbleItem.vue
index af67d25..ec2be29 100644
--- a/packages/editor/src/extensions/color/ColorBubbleItem.vue
+++ b/packages/editor/src/extensions/color/ColorBubbleItem.vue
@@ -1,28 +1,18 @@
 <script lang="ts" setup>
 import { BubbleItem } from "@/components";
-import type { Component } from "vue";
-import type { Editor } from "@tiptap/vue-3";
 import ColorPickerDropdown from "@/components/common/ColorPickerDropdown.vue";
 import { i18n } from "@/locales";
+import type { Editor } from "@tiptap/vue-3";
+import type { Component } from "vue";
 
-const props = withDefaults(
-  defineProps<{
-    editor?: Editor;
-    isActive?: boolean;
-    visible?: boolean;
-    title?: string;
-    action?: () => void;
-    icon?: Component;
-  }>(),
-  {
-    editor: undefined,
-    isActive: false,
-    visible: true,
-    title: undefined,
-    action: undefined,
-    icon: undefined,
-  }
-);
+const props = defineProps<{
+  editor: Editor;
+  isActive: ({ editor }: { editor: Editor }) => boolean;
+  visible?: ({ editor }: { editor: Editor }) => boolean;
+  icon?: Component;
+  title?: string;
+  action?: ({ editor }: { editor: Editor }) => void;
+}>();
 
 function handleSetColor(color?: string) {
   if (!color) {
@@ -38,7 +28,7 @@ function handleUnsetColor() {
 
 <template>
   <ColorPickerDropdown @update:model-value="handleSetColor">
-    <BubbleItem v-bind="props" />
+    <BubbleItem v-bind="props" :editor="editor" />
     <template #prefix>
       <div class="p-1">
         <div
diff --git a/packages/editor/src/extensions/color/index.ts b/packages/editor/src/extensions/color/index.ts
index 676a963..d942d10 100644
--- a/packages/editor/src/extensions/color/index.ts
+++ b/packages/editor/src/extensions/color/index.ts
@@ -6,7 +6,6 @@ import type { Editor } from "@tiptap/vue-3";
 import { markRaw } from "vue";
 import MdiFormatColor from "~icons/mdi/format-color";
 import ColorToolbarItem from "./ColorToolbarItem.vue";
-import ColorBubbleItem from "./ColorBubbleItem.vue";
 import { i18n } from "@/locales";
 
 const Color = TiptapColor.extend<ColorOptions & ExtensionOptions>({
@@ -25,18 +24,6 @@ const Color = TiptapColor.extend<ColorOptions & ExtensionOptions>({
           },
         };
       },
-      getBubbleItems({ editor }: { editor: Editor }) {
-        return {
-          priority: 51,
-          component: markRaw(ColorBubbleItem),
-          props: {
-            editor,
-            isActive: false,
-            icon: markRaw(MdiFormatColor),
-            title: i18n.global.t("editor.common.color"),
-          },
-        };
-      },
     };
   },
   addExtensions() {
diff --git a/packages/editor/src/extensions/highlight/HighlightBubbleItem.vue b/packages/editor/src/extensions/highlight/HighlightBubbleItem.vue
index e773897..fcae4aa 100644
--- a/packages/editor/src/extensions/highlight/HighlightBubbleItem.vue
+++ b/packages/editor/src/extensions/highlight/HighlightBubbleItem.vue
@@ -1,29 +1,19 @@
 <script lang="ts" setup>
 import { BubbleItem } from "@/components";
-import type { Component } from "vue";
-import type { Editor } from "@tiptap/vue-3";
 import ColorPickerDropdown from "@/components/common/ColorPickerDropdown.vue";
 import MdiFormatColorMarkerCancel from "~icons/mdi/format-color-marker-cancel";
 import { i18n } from "@/locales";
+import type { Editor } from "@tiptap/vue-3";
+import type { Component } from "vue";
 
-const props = withDefaults(
-  defineProps<{
-    editor?: Editor;
-    isActive?: boolean;
-    visible?: boolean;
-    title?: string;
-    action?: () => void;
-    icon?: Component;
-  }>(),
-  {
-    editor: undefined,
-    isActive: false,
-    visible: true,
-    title: undefined,
-    action: undefined,
-    icon: undefined,
-  }
-);
+const props = defineProps<{
+  editor: Editor;
+  isActive: ({ editor }: { editor: Editor }) => boolean;
+  visible?: ({ editor }: { editor: Editor }) => boolean;
+  icon?: Component;
+  title?: string;
+  action?: ({ editor }: { editor: Editor }) => void;
+}>();
 
 function handleSetColor(color?: string) {
   if (!color) {
diff --git a/packages/editor/src/extensions/highlight/index.ts b/packages/editor/src/extensions/highlight/index.ts
index b2b0250..f7ba4b5 100644
--- a/packages/editor/src/extensions/highlight/index.ts
+++ b/packages/editor/src/extensions/highlight/index.ts
@@ -24,18 +24,6 @@ const Highlight = TiptapHighlight.extend<ExtensionOptions & HighlightOptions>({
           },
         };
       },
-      getBubbleItems({ editor }: { editor: Editor }) {
-        return {
-          priority: 50,
-          component: markRaw(HighlightBubbleItem),
-          props: {
-            editor,
-            isActive: editor.isActive("highlight"),
-            icon: markRaw(MdiFormatColorHighlight),
-            title: i18n.global.t("editor.common.highlight"),
-          },
-        };
-      },
     };
   },
 }).configure({ multicolor: true });
diff --git a/packages/editor/src/extensions/italic/index.ts b/packages/editor/src/extensions/italic/index.ts
index b14c774..0a049f1 100644
--- a/packages/editor/src/extensions/italic/index.ts
+++ b/packages/editor/src/extensions/italic/index.ts
@@ -6,7 +6,6 @@ import MdiFormatItalic from "~icons/mdi/format-italic";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
 import type { ExtensionOptions } from "@/types";
-import BubbleItem from "@/components/bubble/BubbleItem.vue";
 
 const Italic = TiptapItalic.extend<ExtensionOptions & ItalicOptions>({
   addOptions() {
@@ -25,19 +24,6 @@ const Italic = TiptapItalic.extend<ExtensionOptions & ItalicOptions>({
           },
         };
       },
-      getBubbleItems({ editor }: { editor: Editor }) {
-        return {
-          priority: 20,
-          component: markRaw(BubbleItem),
-          props: {
-            editor,
-            isActive: editor.isActive("italic"),
-            icon: markRaw(MdiFormatItalic),
-            title: i18n.global.t("editor.common.italic"),
-            action: () => editor.chain().focus().toggleItalic().run(),
-          },
-        };
-      },
     };
   },
 });
diff --git a/packages/editor/src/extensions/link/LinkBubbleButton.vue b/packages/editor/src/extensions/link/LinkBubbleButton.vue
index 85d401e..2a4b45e 100644
--- a/packages/editor/src/extensions/link/LinkBubbleButton.vue
+++ b/packages/editor/src/extensions/link/LinkBubbleButton.vue
@@ -1,27 +1,18 @@
 <script lang="ts" setup>
-import type { Editor } from "@tiptap/vue-3";
 import { computed, type Component } from "vue";
 import { VTooltip, Dropdown as VDropdown } from "floating-vue";
 import MdiLinkVariant from "~icons/mdi/link-variant";
 import { i18n } from "@/locales";
+import type { Editor } from "@tiptap/vue-3";
 
-const props = withDefaults(
-  defineProps<{
-    editor: Editor;
-    isActive?: boolean;
-    visible?: boolean;
-    title?: string;
-    action?: () => void;
-    icon?: Component;
-  }>(),
-  {
-    isActive: false,
-    visible: true,
-    title: undefined,
-    action: undefined,
-    icon: undefined,
-  }
-);
+const props = defineProps<{
+  editor: Editor;
+  isActive: ({ editor }: { editor: Editor }) => boolean;
+  visible?: ({ editor }: { editor: Editor }) => boolean;
+  icon?: Component;
+  title?: string;
+  action?: ({ editor }: { editor: Editor }) => void;
+}>();
 
 const href = computed({
   get() {
@@ -54,12 +45,12 @@ const target = computed({
   <VDropdown class="inline-flex" :triggers="['click']" :distance="10">
     <button
       v-tooltip="
-        isActive
+        isActive({ editor })
           ? 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="{ 'bg-gray-200 !text-black': isActive }"
+      :class="{ 'bg-gray-200 !text-black': isActive({ editor }) }"
     >
       <MdiLinkVariant />
     </button>
diff --git a/packages/editor/src/extensions/link/index.ts b/packages/editor/src/extensions/link/index.ts
index 2c4c7d4..843557b 100644
--- a/packages/editor/src/extensions/link/index.ts
+++ b/packages/editor/src/extensions/link/index.ts
@@ -1,61 +1,7 @@
 import TiptapLink from "@tiptap/extension-link";
 import type { LinkOptions } from "@tiptap/extension-link";
 import type { ExtensionOptions } from "@/types";
-import type { Editor } from "@tiptap/vue-3";
-import LinkBubbleButton from "./LinkBubbleButton.vue";
-import MdiLinkVariantOff from "~icons/mdi/link-variant-off";
-import MdiShare from "~icons/mdi/share";
-import { markRaw } from "vue";
-import BubbleItem from "@/components/bubble/BubbleItem.vue";
-import { i18n } from "@/locales";
 
-const Link = TiptapLink.extend<ExtensionOptions & LinkOptions>({
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      getBubbleItems({ editor }: { editor: Editor }) {
-        return [
-          {
-            priority: 160,
-            component: markRaw(LinkBubbleButton),
-            props: {
-              editor,
-              isActive: editor.isActive("link"),
-            },
-          },
-          {
-            priority: 170,
-            component: markRaw(BubbleItem),
-            props: {
-              editor,
-              isActive: false,
-              visible: editor.isActive("link"),
-              icon: markRaw(MdiLinkVariantOff),
-              title: i18n.global.t("editor.extensions.link.cancel_link"),
-              action: () => editor.commands.unsetLink(),
-            },
-          },
-          {
-            priority: 180,
-            component: markRaw(BubbleItem),
-            props: {
-              editor,
-              isActive: false,
-              visible: editor.isActive("link"),
-              icon: markRaw(MdiShare),
-              title: i18n.global.t("editor.common.tooltip.open_link"),
-              action: () => {
-                const attrs = editor.getAttributes("link");
-                if (attrs?.href) {
-                  window.open(attrs.href, "_blank");
-                }
-              },
-            },
-          },
-        ];
-      },
-    };
-  },
-});
+const Link = TiptapLink.extend<ExtensionOptions & LinkOptions>();
 
 export default Link;
diff --git a/packages/editor/src/extensions/strike/index.ts b/packages/editor/src/extensions/strike/index.ts
index bc42756..78d5afd 100644
--- a/packages/editor/src/extensions/strike/index.ts
+++ b/packages/editor/src/extensions/strike/index.ts
@@ -6,7 +6,6 @@ import MdiFormatStrikethrough from "~icons/mdi/format-strikethrough";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
 import type { ExtensionOptions } from "@/types";
-import BubbleItem from "@/components/bubble/BubbleItem.vue";
 
 const Strike = TiptapStrike.extend<ExtensionOptions & StrikeOptions>({
   addOptions() {
@@ -25,19 +24,6 @@ const Strike = TiptapStrike.extend<ExtensionOptions & StrikeOptions>({
           },
         };
       },
-      getBubbleItems({ editor }: { editor: Editor }) {
-        return {
-          priority: 40,
-          component: markRaw(BubbleItem),
-          props: {
-            editor,
-            isActive: editor.isActive("strike"),
-            icon: markRaw(MdiFormatStrikethrough),
-            title: i18n.global.t("editor.common.strike"),
-            action: () => editor.chain().focus().toggleStrike().run(),
-          },
-        };
-      },
     };
   },
 });
diff --git a/packages/editor/src/extensions/subscript/index.ts b/packages/editor/src/extensions/subscript/index.ts
index 953afaf..1e70222 100644
--- a/packages/editor/src/extensions/subscript/index.ts
+++ b/packages/editor/src/extensions/subscript/index.ts
@@ -6,7 +6,6 @@ import MdiFormatSubscript from "~icons/mdi/format-subscript";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
 import type { ExtensionOptions } from "@/types";
-import BubbleItem from "@/components/bubble/BubbleItem.vue";
 
 const Subscript = TiptapSubscript.extend<
   ExtensionOptions & SubscriptExtensionOptions
@@ -27,19 +26,6 @@ const Subscript = TiptapSubscript.extend<
           },
         };
       },
-      getBubbleItems({ editor }: { editor: Editor }) {
-        return {
-          priority: 110,
-          component: markRaw(BubbleItem),
-          props: {
-            editor,
-            isActive: editor.isActive("subscript"),
-            icon: markRaw(MdiFormatSubscript),
-            title: i18n.global.t("editor.common.subscript"),
-            action: () => editor.chain().focus().toggleSubscript().run(),
-          },
-        };
-      },
     };
   },
 });
diff --git a/packages/editor/src/extensions/superscript/index.ts b/packages/editor/src/extensions/superscript/index.ts
index 7152291..ed2dd4f 100644
--- a/packages/editor/src/extensions/superscript/index.ts
+++ b/packages/editor/src/extensions/superscript/index.ts
@@ -6,7 +6,6 @@ import MdiFormatSuperscript from "~icons/mdi/format-superscript";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
 import type { ExtensionOptions } from "@/types";
-import BubbleItem from "@/components/bubble/BubbleItem.vue";
 
 const Superscript = TiptapSuperscript.extend<
   ExtensionOptions & SuperscriptExtensionOptions
@@ -27,19 +26,6 @@ const Superscript = TiptapSuperscript.extend<
           },
         };
       },
-      getBubbleItems({ editor }: { editor: Editor }) {
-        return {
-          priority: 100,
-          component: markRaw(BubbleItem),
-          props: {
-            editor,
-            isActive: editor.isActive("superscript"),
-            icon: markRaw(MdiFormatSuperscript),
-            title: i18n.global.t("editor.common.superscript"),
-            action: () => editor.chain().focus().toggleSuperscript().run(),
-          },
-        };
-      },
     };
   },
 });
diff --git a/packages/editor/src/extensions/text-align/index.ts b/packages/editor/src/extensions/text-align/index.ts
index 359472c..62f42a3 100644
--- a/packages/editor/src/extensions/text-align/index.ts
+++ b/packages/editor/src/extensions/text-align/index.ts
@@ -9,7 +9,6 @@ import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
 import type { ExtensionOptions } from "@/types";
-import BubbleItem from "@/components/bubble/BubbleItem.vue";
 
 const TextAlign = TiptapTextAlign.extend<ExtensionOptions & TextAlignOptions>({
   addOptions() {
@@ -64,55 +63,6 @@ const TextAlign = TiptapTextAlign.extend<ExtensionOptions & TextAlignOptions>({
           },
         ];
       },
-      getBubbleItems({ editor }: { editor: Editor }) {
-        return [
-          {
-            priority: 120,
-            component: markRaw(BubbleItem),
-            props: {
-              editor,
-              isActive: editor.isActive({ textAlign: "left" }),
-              icon: markRaw(MdiFormatAlignLeft),
-              title: i18n.global.t("editor.common.align_left"),
-              action: () => editor.chain().focus().setTextAlign("left").run(),
-            },
-          },
-          {
-            priority: 130,
-            component: markRaw(BubbleItem),
-            props: {
-              editor,
-              isActive: editor.isActive({ textAlign: "center" }),
-              icon: markRaw(MdiFormatAlignCenter),
-              title: i18n.global.t("editor.common.align_center"),
-              action: () => editor.chain().focus().setTextAlign("center").run(),
-            },
-          },
-          {
-            priority: 140,
-            component: markRaw(BubbleItem),
-            props: {
-              editor,
-              isActive: editor.isActive({ textAlign: "right" }),
-              icon: markRaw(MdiFormatAlignRight),
-              title: i18n.global.t("editor.common.align_right"),
-              action: () => editor.chain().focus().setTextAlign("right").run(),
-            },
-          },
-          {
-            priority: 150,
-            component: markRaw(BubbleItem),
-            props: {
-              editor,
-              isActive: editor.isActive({ textAlign: "justify" }),
-              icon: markRaw(MdiFormatAlignJustify),
-              title: i18n.global.t("editor.common.align_justify"),
-              action: () =>
-                editor.chain().focus().setTextAlign("justify").run(),
-            },
-          },
-        ];
-      },
     };
   },
 });
diff --git a/packages/editor/src/extensions/underline/index.ts b/packages/editor/src/extensions/underline/index.ts
index a6767f8..05fef30 100644
--- a/packages/editor/src/extensions/underline/index.ts
+++ b/packages/editor/src/extensions/underline/index.ts
@@ -6,7 +6,6 @@ import MdiFormatUnderline from "~icons/mdi/format-underline";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
 import type { ExtensionOptions } from "@/types";
-import BubbleItem from "@/components/bubble/BubbleItem.vue";
 
 const Underline = TiptapUnderline.extend<ExtensionOptions & UnderlineOptions>({
   addOptions() {
@@ -25,19 +24,6 @@ const Underline = TiptapUnderline.extend<ExtensionOptions & UnderlineOptions>({
           },
         };
       },
-      getBubbleItems({ editor }: { editor: Editor }) {
-        return {
-          priority: 30,
-          component: markRaw(BubbleItem),
-          props: {
-            editor,
-            isActive: editor.isActive("underline"),
-            icon: markRaw(MdiFormatUnderline),
-            title: i18n.global.t("editor.common.underline"),
-            action: () => editor.chain().focus().toggleUnderline().run(),
-          },
-        };
-      },
     };
   },
 });
diff --git a/packages/editor/src/extensions/video/VideoView.vue b/packages/editor/src/extensions/video/VideoView.vue
index 19fa5c4..ff577c4 100644
--- a/packages/editor/src/extensions/video/VideoView.vue
+++ b/packages/editor/src/extensions/video/VideoView.vue
@@ -161,53 +161,6 @@ onMounted(() => {
         </div>
       </template>
       <template #actions>
-        <BlockActionButton
-          :selected="controls"
-          :tooltip="`${
-            controls
-              ? i18n.global.t('editor.extensions.video.disable_controls')
-              : i18n.global.t('editor.extensions.video.enable_controls')
-          }`"
-          @click="handleToggleControls"
-        >
-          <template #icon>
-            <MdiCogPlay v-if="controls" />
-            <MdiCogPlayOutline v-else />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionButton
-          :selected="autoplay"
-          :tooltip="`${
-            autoplay
-              ? i18n.global.t('editor.extensions.video.disable_autoplay')
-              : i18n.global.t('editor.extensions.video.enable_autoplay')
-          }`"
-          @click="handleToggleAutoplay"
-        >
-          <template #icon>
-            <MdiPlayCircle v-if="autoplay" />
-            <MdiPlayCircleOutline v-else />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionButton
-          :selected="loop"
-          :tooltip="`${
-            loop
-              ? i18n.global.t('editor.extensions.video.disable_loop')
-              : i18n.global.t('editor.extensions.video.enable_loop')
-          }`"
-          @click="handleToggleLoop"
-        >
-          <template #icon>
-            <MdiMotionPlay v-if="loop" />
-            <MdiMotionPlayOutline v-else />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionSeparator />
-
         <BlockActionInput
           v-model.lazy.trim="width"
           :tooltip="i18n.global.t('editor.common.tooltip.custom_width_input')"
diff --git a/packages/editor/src/extensions/video/index.ts b/packages/editor/src/extensions/video/index.ts
index 33c0c88..78d60c3 100644
--- a/packages/editor/src/extensions/video/index.ts
+++ b/packages/editor/src/extensions/video/index.ts
@@ -12,6 +12,13 @@ import VideoView from "./VideoView.vue";
 import MdiVideo from "~icons/mdi/video";
 import ToolboxItem from "@/components/toolbox/ToolboxItem.vue";
 import { i18n } from "@/locales";
+import MdiPlayCircle from "~icons/mdi/play-circle";
+import MdiPlayCircleOutline from "~icons/mdi/play-circle-outline";
+import MdiMotionPlayOutline from "~icons/mdi/motion-play-outline";
+import MdiMotionPlay from "~icons/mdi/motion-play";
+import MdiCogPlay from "~icons/mdi/cog-play";
+import MdiCogPlayOutline from "~icons/mdi/cog-play-outline";
+import { BlockActionSeparator } from "@/components";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -182,6 +189,102 @@ const Video = Node.create<ExtensionOptions>({
           },
         ];
       },
+      getBubbleMenu({ editor }: { editor: Editor }) {
+        return {
+          pluginKey: "videoBubbleMenu",
+          shouldShow: () => {
+            return editor.isActive(Video.name);
+          },
+          items: [
+            {
+              priority: 10,
+              props: {
+                isActive: () => {
+                  editor.getAttributes(Video.name).controls;
+                },
+                icon: markRaw(
+                  editor.getAttributes(Video.name).controls
+                    ? MdiCogPlay
+                    : MdiCogPlayOutline
+                ),
+                action: () => {
+                  return editor
+                    .chain()
+                    .updateAttributes(Video.name, {
+                      controls: editor.getAttributes(Video.name).controls
+                        ? null
+                        : true,
+                    })
+                    .setNodeSelection(editor.state.selection.from)
+                    .focus()
+                    .run();
+                },
+                title: editor.getAttributes(Video.name).controls
+                  ? i18n.global.t("editor.extensions.video.disable_controls")
+                  : i18n.global.t("editor.extensions.video.enable_controls"),
+              },
+            },
+            {
+              priority: 20,
+              props: {
+                isActive: () => {
+                  return editor.getAttributes(Video.name).autoplay;
+                },
+                icon: markRaw(
+                  editor.getAttributes(Video.name).autoplay
+                    ? MdiPlayCircle
+                    : MdiPlayCircleOutline
+                ),
+                action: () => {
+                  return editor
+                    .chain()
+                    .updateAttributes(Video.name, {
+                      autoplay: editor.getAttributes(Video.name).autoplay
+                        ? null
+                        : true,
+                    })
+                    .setNodeSelection(editor.state.selection.from)
+                    .focus()
+                    .run();
+                },
+                title: editor.getAttributes(Video.name).autoplay
+                  ? i18n.global.t("editor.extensions.video.disable_autoplay")
+                  : i18n.global.t("editor.extensions.video.enable_autoplay"),
+              },
+            },
+            {
+              priority: 30,
+              props: {
+                isActive: () => {
+                  return editor.getAttributes(Video.name).loop;
+                },
+                icon: markRaw(
+                  editor.getAttributes(Video.name).loop
+                    ? MdiMotionPlay
+                    : MdiMotionPlayOutline
+                ),
+                action: () => {
+                  return editor
+                    .chain()
+                    .updateAttributes(Video.name, {
+                      loop: editor.getAttributes(Video.name).loop ? null : true,
+                    })
+                    .setNodeSelection(editor.state.selection.from)
+                    .focus()
+                    .run();
+                },
+                title: editor.getAttributes(Video.name).loop
+                  ? i18n.global.t("editor.extensions.video.disable_loop")
+                  : i18n.global.t("editor.extensions.video.enable_loop"),
+              },
+            },
+            {
+              priority: 40,
+              component: markRaw(BlockActionSeparator),
+            },
+          ],
+        };
+      },
     };
   },
 });
diff --git a/packages/editor/src/types/index.ts b/packages/editor/src/types/index.ts
index 32f5e3b..441e6af 100644
--- a/packages/editor/src/types/index.ts
+++ b/packages/editor/src/types/index.ts
@@ -16,10 +16,10 @@ export interface ToolbarItem {
   children?: ToolbarItem[];
 }
 
-interface BubbleItemProps {
+interface BubbleMenuProps {
   pluginKey?: string;
-  editor: Editor;
-  updateDelay: number;
+  editor?: Editor;
+  updateDelay?: number;
   shouldShow: (props: {
     editor: Editor;
     view: EditorView;
@@ -28,12 +28,26 @@ interface BubbleItemProps {
     from: number;
     to: number;
   }) => boolean;
+  tippyOptions?: Record<string, unknown>;
+  isDeleteItem?: boolean;
 }
 
-export interface NodeBubbleMenu extends BubbleItemProps {
-  component: Component;
+export interface NodeBubbleMenu extends BubbleMenuProps {
+  component?: Component;
+  items?: BubbleItem[];
 }
 
+export interface BubbleItem {
+  priority: number;
+  component?: Component;
+  props: {
+    isActive: ({ editor }: { editor: Editor }) => boolean;
+    visible?: ({ editor }: { editor: Editor }) => boolean;
+    icon?: Component;
+    title?: string;
+    action?: ({ editor }: { editor: Editor }) => any;
+  };
+}
 export interface ToolboxItem {
   priority: number;
   component: Component;
diff --git a/packages/editor/src/utils/delete-node.ts b/packages/editor/src/utils/delete-node.ts
new file mode 100644
index 0000000..66376c6
--- /dev/null
+++ b/packages/editor/src/utils/delete-node.ts
@@ -0,0 +1,47 @@
+import type { Editor } from "@tiptap/core";
+
+export const deleteNode = (nodeType: string, editor: Editor) => {
+  const { state } = editor;
+  const $pos = state.selection.$anchor;
+  let done = false;
+
+  if ($pos.depth) {
+    for (let d = $pos.depth; d > 0; d--) {
+      const node = $pos.node(d);
+      if (node.type.name === nodeType) {
+        // @ts-ignore
+        if (editor.dispatchTransaction)
+          // @ts-ignore
+          editor.dispatchTransaction(
+            state.tr.delete($pos.before(d), $pos.after(d)).scrollIntoView()
+          );
+        done = true;
+      }
+    }
+  } else {
+    // @ts-ignore
+    const node = state.selection.node;
+    if (node && node.type.name === nodeType) {
+      editor.chain().deleteSelection().run();
+      done = true;
+    }
+  }
+
+  if (!done) {
+    const pos = $pos.pos;
+
+    if (pos) {
+      const node = state.tr.doc.nodeAt(pos);
+
+      if (node && node.type.name === nodeType) {
+        // @ts-ignore
+        if (editor.dispatchTransaction)
+          // @ts-ignore
+          editor.dispatchTransaction(state.tr.delete(pos, pos + node.nodeSize));
+        done = true;
+      }
+    }
+  }
+
+  return done;
+};
diff --git a/packages/editor/src/utils/index.ts b/packages/editor/src/utils/index.ts
new file mode 100644
index 0000000..0e86b17
--- /dev/null
+++ b/packages/editor/src/utils/index.ts
@@ -0,0 +1 @@
+export * from "./delete-node";

From d5c9e583805ebb147dc329aa52e7d5005f2a2b10 Mon Sep 17 00:00:00 2001
From: LIlGG <1103069291@qq.com>
Date: Thu, 31 Aug 2023 18:19:54 +0800
Subject: [PATCH 04/11] wip: refactor the bubble menu.

---
 .../src/components/EditorBubbleMenu.vue       |  34 +-
 .../src/components/bubble/BubbleItem.vue      |   6 +-
 .../src/components/bubble/BubbleMenu.vue      |  78 ++++
 .../src/components/bubble/BubbleMenuPlugin.ts | 338 ++++++++++++++++++
 .../src/components/bubble/TextBubbleMenu.ts   |   7 -
 packages/editor/src/components/index.ts       |   1 +
 ...EditorLink.vue => BubbleItemAudioLink.vue} |   0
 packages/editor/src/extensions/audio/index.ts |  12 +-
 .../src/extensions/code-block/code-block.ts   |  28 +-
 .../iframe/BubbleItemIframeLink.vue           |  32 ++
 .../iframe/BubbleItemIframeSize.vue           |  51 +++
 .../src/extensions/iframe/IframeView.vue      | 287 ++-------------
 .../editor/src/extensions/iframe/index.ts     | 222 ++++++++++++
 .../extensions/video/BubbleItemVideoLink.vue  |  32 ++
 .../extensions/video/BubbleItemVideoSize.vue  |  59 +++
 .../editor/src/extensions/video/VideoView.vue | 248 ++-----------
 packages/editor/src/extensions/video/index.ts | 161 ++++++++-
 packages/editor/src/types/index.ts            |  17 +-
 18 files changed, 1103 insertions(+), 510 deletions(-)
 create mode 100644 packages/editor/src/components/bubble/BubbleMenu.vue
 create mode 100644 packages/editor/src/components/bubble/BubbleMenuPlugin.ts
 rename packages/editor/src/extensions/audio/{BubbleItemEditorLink.vue => BubbleItemAudioLink.vue} (100%)
 create mode 100644 packages/editor/src/extensions/iframe/BubbleItemIframeLink.vue
 create mode 100644 packages/editor/src/extensions/iframe/BubbleItemIframeSize.vue
 create mode 100644 packages/editor/src/extensions/video/BubbleItemVideoLink.vue
 create mode 100644 packages/editor/src/extensions/video/BubbleItemVideoSize.vue

diff --git a/packages/editor/src/components/EditorBubbleMenu.vue b/packages/editor/src/components/EditorBubbleMenu.vue
index 28c6930..8b6a37e 100644
--- a/packages/editor/src/components/EditorBubbleMenu.vue
+++ b/packages/editor/src/components/EditorBubbleMenu.vue
@@ -1,10 +1,13 @@
 <script lang="ts" setup>
 import type { PropType } from "vue";
 import type { Editor, AnyExtension } from "@tiptap/core";
-import { BubbleMenu } from "@tiptap/vue-3";
+import BubbleMenu from "@/components/bubble/BubbleMenu.vue";
 import type { NodeBubbleMenu } from "@/types";
 import BubbleItem from "@/components/bubble/BubbleItem.vue";
 import { defaultTextBubbleMenu } from "@/components/bubble/TextBubbleMenu";
+import type { EditorView } from "prosemirror-view";
+import type { EditorState } from "prosemirror-state";
+import type { BubbleMenuPluginProps } from "./bubble/BubbleMenuPlugin";
 
 const props = defineProps({
   editor: {
@@ -27,25 +30,50 @@ const getBubbleMenuFromExtensions = () => {
         editor: props.editor,
       }) as NodeBubbleMenu;
 
+      if (nodeBubbleMenu.items) {
+        nodeBubbleMenu.items = nodeBubbleMenu.items.sort(
+          (a, b) => a.priority - b.priority
+        );
+      }
+
       return nodeBubbleMenu;
     })
     .concat([defaultTextBubbleMenu])
     .filter(Boolean) as NodeBubbleMenu[];
 };
+
+const shouldShow = (
+  props: {
+    editor: Editor;
+    node?: HTMLElement;
+    view?: EditorView;
+    state?: EditorState;
+    oldState?: EditorState;
+    from?: number;
+    to?: number;
+  },
+  bubbleMenu: NodeBubbleMenu
+) => {
+  if (!props.editor.isEditable) {
+    return false;
+  }
+  return bubbleMenu.shouldShow?.(props);
+};
 </script>
 <template>
   <bubble-menu
     v-for="(bubbleMenu, index) in getBubbleMenuFromExtensions()"
     :key="index"
     :plugin-key="bubbleMenu?.pluginKey"
-    :should-show="bubbleMenu?.shouldShow"
+    :should-show="(prop) => shouldShow(prop, bubbleMenu)"
     :editor="editor"
     :tippy-options="{
       maxWidth: '100%',
       moveTransition: 'transform 0.2s ease-out',
       ...bubbleMenu.tippyOptions,
     }"
-    :update-delay="bubbleMenu.updateDelay || 150"
+    :get-render-container="bubbleMenu.getRenderContainer"
+    :default-animation="bubbleMenu.defaultAnimation"
   >
     <div
       class="bg-white flex items-center rounded p-1 border drop-shadow space-x-0.5"
diff --git a/packages/editor/src/components/bubble/BubbleItem.vue b/packages/editor/src/components/bubble/BubbleItem.vue
index ede50f0..2b0eca1 100644
--- a/packages/editor/src/components/bubble/BubbleItem.vue
+++ b/packages/editor/src/components/bubble/BubbleItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { VTooltip, Dropdown as VDropdown } from "floating-vue";
 import type { Editor } from "@tiptap/core";
-import { ref, type Component, computed, watch } from "vue";
+import { ref, type Component } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -9,6 +9,7 @@ const props = withDefaults(
     isActive: ({ editor }: { editor: Editor }) => boolean;
     visible?: ({ editor }: { editor: Editor }) => boolean;
     icon?: Component;
+    iconStyle?: string;
     title?: string;
     action?: ({ editor }: { editor: Editor }) => Component | void;
   }>(),
@@ -18,6 +19,7 @@ const props = withDefaults(
     title: undefined,
     action: undefined,
     icon: undefined,
+    iconStyle: undefined,
   }
 );
 
@@ -59,7 +61,7 @@ const handleBubbleItemClick = (editor: Editor) => {
       class="text-gray-600 text-lg hover:bg-gray-100 p-2 rounded-sm"
       @click="handleBubbleItemClick(editor)"
     >
-      <component :is="icon" class="w-5 h-5" />
+      <component :is="icon" :style="iconStyle" class="w-5 h-5" />
     </button>
     <template #popper>
       <div
diff --git a/packages/editor/src/components/bubble/BubbleMenu.vue b/packages/editor/src/components/bubble/BubbleMenu.vue
new file mode 100644
index 0000000..f8cdb88
--- /dev/null
+++ b/packages/editor/src/components/bubble/BubbleMenu.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts" name="BubbleMenu">
+import { ref, type PropType, onMounted, onBeforeUnmount } from "vue";
+import {
+  BubbleMenuPlugin,
+  type BubbleMenuPluginProps,
+} from "./BubbleMenuPlugin";
+
+const props = defineProps({
+  pluginKey: {
+    type: [String, Object] as PropType<BubbleMenuPluginProps["pluginKey"]>,
+    default: "bubbleMenu",
+  },
+
+  editor: {
+    type: Object as PropType<BubbleMenuPluginProps["editor"]>,
+    required: true,
+  },
+
+  tippyOptions: {
+    type: Object as PropType<BubbleMenuPluginProps["tippyOptions"]>,
+    default: () => ({}),
+  },
+
+  shouldShow: {
+    type: Function as PropType<
+      Exclude<Required<BubbleMenuPluginProps>["shouldShow"], null>
+    >,
+    default: null,
+  },
+
+  getRenderContainer: {
+    type: Function as PropType<
+      Exclude<Required<BubbleMenuPluginProps>["getRenderContainer"], null>
+    >,
+    default: null,
+  },
+
+  defaultAnimation: {
+    type: Boolean as PropType<BubbleMenuPluginProps["defaultAnimation"]>,
+    default: false,
+  },
+});
+
+const root = ref<HTMLElement | null>(null);
+onMounted(() => {
+  const {
+    editor,
+    pluginKey,
+    shouldShow,
+    tippyOptions,
+    getRenderContainer,
+    defaultAnimation,
+  } = props;
+
+  editor.registerPlugin(
+    BubbleMenuPlugin({
+      editor,
+      element: root.value as HTMLElement,
+      pluginKey,
+      shouldShow,
+      tippyOptions,
+      getRenderContainer,
+      defaultAnimation,
+    })
+  );
+});
+
+onBeforeUnmount(() => {
+  const { pluginKey, editor } = props;
+
+  editor.unregisterPlugin(pluginKey);
+});
+</script>
+<template>
+  <div ref="root">
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/editor/src/components/bubble/BubbleMenuPlugin.ts b/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
new file mode 100644
index 0000000..7c09a49
--- /dev/null
+++ b/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
@@ -0,0 +1,338 @@
+import {
+  Editor,
+  isNodeSelection,
+  isTextSelection,
+  posToDOMRect,
+} from "@tiptap/core";
+
+import { EditorState, Plugin, PluginKey } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import tippy, { type Instance, type Props, sticky } from "tippy.js";
+
+export interface BubbleMenuPluginProps {
+  pluginKey: PluginKey | string;
+  editor: Editor;
+  element: HTMLElement;
+  tippyOptions?: Partial<Props>;
+  shouldShow?:
+    | ((props: {
+        editor: Editor;
+        node?: HTMLElement;
+        view?: EditorView;
+        state?: EditorState;
+        oldState?: EditorState;
+        from?: number;
+        to?: number;
+      }) => boolean)
+    | null;
+  getRenderContainer?: (node: HTMLElement) => HTMLElement;
+  defaultAnimation?: boolean;
+}
+
+export type BubbleMenuViewProps = BubbleMenuPluginProps & {
+  view: EditorView;
+};
+
+const ACTIVE_BUBBLE_MENUS: Instance[] = [];
+
+export class BubbleMenuView {
+  public editor: Editor;
+
+  public element: HTMLElement;
+
+  public view: EditorView;
+
+  public preventHide = false;
+
+  public tippy: Instance | undefined;
+
+  public tippyOptions?: Partial<Props>;
+
+  public getRenderContainer?: BubbleMenuPluginProps["getRenderContainer"];
+
+  public defaultAnimation?: BubbleMenuPluginProps["defaultAnimation"];
+
+  public shouldShow: Exclude<BubbleMenuPluginProps["shouldShow"], null> = ({
+    view,
+    state,
+    from,
+    to,
+  }) => {
+    const { doc, selection } = state;
+    const { empty } = selection;
+
+    // Sometime check for `empty` is not enough.
+    // Doubleclick an empty paragraph returns a node size of 2.
+    // So we check also for an empty text size.
+    const isEmptyTextBlock =
+      !doc.textBetween(from, to).length && isTextSelection(state.selection);
+
+    if (!view.hasFocus() || empty || isEmptyTextBlock) {
+      return false;
+    }
+
+    return true;
+  };
+
+  constructor({
+    editor,
+    element,
+    view,
+    tippyOptions = {},
+    shouldShow,
+    getRenderContainer,
+    defaultAnimation = true,
+  }: BubbleMenuViewProps) {
+    this.editor = editor;
+    this.element = element;
+    this.view = view;
+    this.getRenderContainer = getRenderContainer;
+    this.defaultAnimation = defaultAnimation;
+
+    if (shouldShow) {
+      this.shouldShow = shouldShow;
+    }
+
+    this.element.addEventListener("mousedown", this.mousedownHandler, {
+      capture: true,
+    });
+    this.view.dom.addEventListener("dragstart", this.dragstartHandler);
+    // this.editor.on("focus", this.focusHandler);
+    // this.editor.on('blur', this.blurHandler);
+    this.tippyOptions = tippyOptions || {};
+    // Detaches menu content from its current parent
+    this.element.remove();
+    this.element.style.visibility = "visible";
+  }
+
+  mousedownHandler = () => {
+    this.preventHide = true;
+  };
+
+  dragstartHandler = () => {
+    this.hide();
+  };
+
+  // focusHandler = () => {
+  //   // we use `setTimeout` to make sure `selection` is already updated
+  //   setTimeout(() => this.update(this.editor.view));
+  // };
+
+  blurHandler = ({ event }: { event: FocusEvent }) => {
+    if (this.preventHide) {
+      this.preventHide = false;
+
+      return;
+    }
+
+    if (
+      event?.relatedTarget &&
+      this.element.parentNode?.contains(event.relatedTarget as Node)
+    ) {
+      return;
+    }
+
+    const shouldShow =
+      this.editor.isEditable &&
+      this.shouldShow?.({
+        editor: this.editor,
+      });
+
+    if (shouldShow) return;
+
+    this.hide();
+  };
+
+  createTooltip() {
+    const { element: editorElement } = this.editor.options;
+    const editorIsAttached = !!editorElement.parentElement;
+
+    if (this.tippy || !editorIsAttached) {
+      return;
+    }
+
+    this.tippy = tippy(editorElement, {
+      getReferenceClientRect: null,
+      content: this.element,
+      interactive: true,
+      trigger: "manual",
+      placement: "top",
+      hideOnClick: "toggle",
+      plugins: [sticky],
+      ...Object.assign(
+        {
+          zIndex: 999,
+          duration: 200,
+          ...(this.defaultAnimation
+            ? {
+                animation: "shift-toward-subtle",
+                moveTransition: "transform 0.2s ease-in-out",
+              }
+            : {}),
+        },
+        this.tippyOptions
+      ),
+    });
+
+    // maybe we have to hide tippy on its own blur event as well
+    if (this.tippy.popper.firstChild) {
+      (this.tippy.popper.firstChild as HTMLElement).addEventListener(
+        "blur",
+        (event) => {
+          this.blurHandler({ event });
+        }
+      );
+    }
+  }
+
+  update(view: EditorView, oldState?: EditorState) {
+    const { state, composing } = view;
+    const { doc, selection } = state;
+    const isSame =
+      oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
+
+    if (composing || isSame) {
+      return;
+    }
+
+    this.createTooltip();
+
+    // support for CellSelections
+    const { ranges } = selection;
+    const cursorAt = selection.$anchor.pos;
+    const from = Math.min(...ranges.map((range) => range.$from.pos));
+    const to = Math.max(...ranges.map((range) => range.$to.pos));
+    const placement = isNodeSelection(selection)
+      ? "top"
+      : Math.abs(cursorAt - to) <= Math.abs(cursorAt - from)
+      ? "bottom-start"
+      : "top-start";
+    const domAtPos = view.domAtPos(from).node as HTMLElement;
+    const nodeDOM = view.nodeDOM(from) as HTMLElement;
+    const node = nodeDOM || domAtPos;
+
+    console.log(selection);
+
+    const shouldShow =
+      this.editor.isEditable &&
+      this.shouldShow?.({
+        editor: this.editor,
+        view,
+        node,
+        state,
+        oldState,
+        from,
+        to,
+      });
+
+    if (!shouldShow) {
+      this.hide();
+      return;
+    }
+
+    const otherBubbleMenus = ACTIVE_BUBBLE_MENUS.filter(
+      (instance) =>
+        instance.id !== this.tippy?.id &&
+        instance.popperInstance &&
+        instance.popperInstance.state
+    );
+    const offsetX = this.tippyOptions?.offset?.[0] ?? 0;
+    const offsetY = otherBubbleMenus.length
+      ? otherBubbleMenus.reduce((prev, instance, currentIndex, array) => {
+          const prevY = array[currentIndex - 1]
+            ? array[currentIndex - 1]?.popperInstance?.state?.modifiersData
+                ?.popperOffsets?.y ?? 0
+            : 0;
+          const currentY =
+            instance?.popperInstance?.state?.modifiersData?.popperOffsets?.y ??
+            0;
+          const currentHeight =
+            instance?.popperInstance?.state?.rects?.popper?.height ?? 40;
+
+          if (Math.abs(prevY - currentY) <= currentHeight) {
+            prev += currentHeight;
+          }
+
+          return prev;
+        }, 0)
+      : this.tippyOptions?.offset?.[1] ?? 10;
+
+    this.tippy?.setProps({
+      offset: [offsetX, offsetY],
+      placement,
+      getReferenceClientRect: () => {
+        let toMountNode = null;
+
+        if (isNodeSelection(state.selection)) {
+          if (this.getRenderContainer && node) {
+            toMountNode = this.getRenderContainer(node);
+          }
+        }
+
+        if (this.getRenderContainer && node) {
+          toMountNode = this.getRenderContainer(node);
+        }
+
+        if (toMountNode && toMountNode.getBoundingClientRect) {
+          return toMountNode.getBoundingClientRect();
+        }
+
+        if (node && node.getBoundingClientRect) {
+          return node.getBoundingClientRect();
+        }
+
+        return posToDOMRect(view, from, to);
+      },
+    });
+
+    this.show();
+  }
+
+  addActiveBubbleMenu = () => {
+    const idx = ACTIVE_BUBBLE_MENUS.findIndex(
+      (instance) => instance?.id === this.tippy?.id
+    );
+    if (idx < 0) {
+      ACTIVE_BUBBLE_MENUS.push(this.tippy);
+    }
+  };
+
+  removeActiveBubbleMenu = () => {
+    const idx = ACTIVE_BUBBLE_MENUS.findIndex(
+      (instance) => instance?.id === this.tippy?.id
+    );
+    if (idx > -1) {
+      ACTIVE_BUBBLE_MENUS.splice(idx, 1);
+    }
+  };
+  show() {
+    this.addActiveBubbleMenu();
+    this.tippy?.show();
+  }
+
+  hide() {
+    this.removeActiveBubbleMenu();
+    this.tippy?.hide();
+  }
+
+  destroy() {
+    this.removeActiveBubbleMenu();
+    this.tippy?.destroy();
+    this.element.removeEventListener("mousedown", this.mousedownHandler, {
+      capture: true,
+    });
+    this.view.dom.removeEventListener("dragstart", this.dragstartHandler);
+    // this.editor.off("focus", this.focusHandler);
+    // this.editor.off("blur", this.blurHandler);
+  }
+}
+
+export const BubbleMenuPlugin = (options: BubbleMenuPluginProps) => {
+  return new Plugin({
+    key:
+      typeof options.pluginKey === "string"
+        ? new PluginKey(options.pluginKey)
+        : options.pluginKey,
+    view: (view) => new BubbleMenuView({ view, ...options }),
+  });
+};
diff --git a/packages/editor/src/components/bubble/TextBubbleMenu.ts b/packages/editor/src/components/bubble/TextBubbleMenu.ts
index 7a4dc3a..291f8df 100644
--- a/packages/editor/src/components/bubble/TextBubbleMenu.ts
+++ b/packages/editor/src/components/bubble/TextBubbleMenu.ts
@@ -26,9 +26,6 @@ const OTHER_BUBBLE_MENU_TYPES = ["audio", "video", "image", "iframe"];
 
 export const defaultTextBubbleMenu: NodeBubbleMenu = {
   pluginKey: "textBubbleMenu",
-  tippyOptions: {
-    placement: "top",
-  },
   shouldShow: ({ editor, view, state, from, to }) => {
     const { empty } = editor.state.selection;
     if (empty) {
@@ -52,10 +49,6 @@ export const defaultTextBubbleMenu: NodeBubbleMenu = {
       return false;
     }
 
-    if (!editor.isEditable) {
-      return false;
-    }
-
     return true;
   },
   items: [
diff --git a/packages/editor/src/components/index.ts b/packages/editor/src/components/index.ts
index fb57994..5c7cb3c 100644
--- a/packages/editor/src/components/index.ts
+++ b/packages/editor/src/components/index.ts
@@ -6,6 +6,7 @@ export { default as BlockCard } from "./block/BlockCard.vue";
 
 // bubble
 export { default as BubbleItem } from "./bubble/BubbleItem.vue";
+export { default as BubbleMenu } from "./bubble/BubbleMenu.vue";
 
 // toolbar
 export { default as ToolbarItem } from "./toolbar/ToolbarItem.vue";
diff --git a/packages/editor/src/extensions/audio/BubbleItemEditorLink.vue b/packages/editor/src/extensions/audio/BubbleItemAudioLink.vue
similarity index 100%
rename from packages/editor/src/extensions/audio/BubbleItemEditorLink.vue
rename to packages/editor/src/extensions/audio/BubbleItemAudioLink.vue
diff --git a/packages/editor/src/extensions/audio/index.ts b/packages/editor/src/extensions/audio/index.ts
index 0cc728f..54e7ec1 100644
--- a/packages/editor/src/extensions/audio/index.ts
+++ b/packages/editor/src/extensions/audio/index.ts
@@ -1,6 +1,7 @@
-import type { BubbleItem, ExtensionOptions } from "@/types";
+import type { ExtensionOptions } from "@/types";
 import {
   Editor,
+  isActive,
   mergeAttributes,
   Node,
   nodeInputRule,
@@ -17,11 +18,12 @@ import MdiPlayCircleOutline from "~icons/mdi/play-circle-outline";
 import MdiMotionPlayOutline from "~icons/mdi/motion-play-outline";
 import MdiMotionPlay from "~icons/mdi/motion-play";
 import { BlockActionSeparator } from "@/components";
-import BubbleItemEditorLink from "./BubbleItemEditorLink.vue";
+import BubbleItemAudioLink from "./BubbleItemAudioLink.vue";
 import MdiLinkVariant from "~icons/mdi/link-variant";
 import MdiShare from "~icons/mdi/share";
 import { deleteNode } from "@/utils";
 import MdiDeleteForeverOutline from "~icons/mdi/delete-forever-outline?color=red";
+import { NodeSelection, type EditorState } from "prosemirror-state";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -173,8 +175,8 @@ const Audio = Node.create<ExtensionOptions>({
       getBubbleMenu({ editor }) {
         return {
           pluginKey: "audioBubbleMenu",
-          shouldShow: () => {
-            return editor.isActive(Audio.name);
+          shouldShow: ({ state }: { state: EditorState }) => {
+            return isActive(state, Audio.name);
           },
           items: [
             {
@@ -241,7 +243,7 @@ const Audio = Node.create<ExtensionOptions>({
                 icon: markRaw(MdiLinkVariant),
                 title: i18n.global.t("editor.common.button.edit_link"),
                 action: () => {
-                  return markRaw(BubbleItemEditorLink);
+                  return markRaw(BubbleItemAudioLink);
                 },
               },
             },
diff --git a/packages/editor/src/extensions/code-block/code-block.ts b/packages/editor/src/extensions/code-block/code-block.ts
index 86ba1d3..8a526c2 100644
--- a/packages/editor/src/extensions/code-block/code-block.ts
+++ b/packages/editor/src/extensions/code-block/code-block.ts
@@ -3,6 +3,7 @@ import {
   VueNodeViewRenderer,
   type Range,
   type CommandProps,
+  isActive,
 } from "@tiptap/vue-3";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import type { CodeBlockLowlightOptions } from "@tiptap/extension-code-block-lowlight";
@@ -12,7 +13,12 @@ import MdiCodeBracesBox from "~icons/mdi/code-braces-box";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
 import ToolboxItem from "@/components/toolbox/ToolboxItem.vue";
-import { TextSelection, type Transaction } from "prosemirror-state";
+import {
+  EditorState,
+  NodeSelection,
+  TextSelection,
+  type Transaction,
+} from "prosemirror-state";
 import MdiDeleteForeverOutline from "~icons/mdi/delete-forever-outline?color=red";
 import { deleteNode } from "@/utils";
 
@@ -169,9 +175,23 @@ export default CodeBlockLowlight.extend<
       getBubbleMenu({ editor }: { editor: Editor }) {
         return {
           pluginKey: "codeBlockBubbleMenu",
-          shouldShow: () => {
-            // TODO 定位问题，应当相对于 code 整体而不是其中的某个文本节点
-            return editor.isActive(CodeBlockLowlight.name);
+          shouldShow: ({ state }: { state: EditorState }) => {
+            return isActive(state, CodeBlockLowlight.name);
+          },
+          getRenderContainer: (node: HTMLElement) => {
+            let container = node;
+            // 文本节点
+            if (container.nodeName === "#text") {
+              container = node.parentElement as HTMLElement;
+            }
+            while (
+              container &&
+              container.classList &&
+              !container.classList.contains("hljs")
+            ) {
+              container = container.parentElement as HTMLElement;
+            }
+            return container;
           },
           items: [
             {
diff --git a/packages/editor/src/extensions/iframe/BubbleItemIframeLink.vue b/packages/editor/src/extensions/iframe/BubbleItemIframeLink.vue
new file mode 100644
index 0000000..f959c3b
--- /dev/null
+++ b/packages/editor/src/extensions/iframe/BubbleItemIframeLink.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { i18n } from "@/locales";
+import type { Editor } from "@tiptap/vue-3";
+import { computed, type Component } from "vue";
+import Iframe from "./index";
+
+const props = defineProps<{
+  editor: Editor;
+  isActive: ({ editor }: { editor: Editor }) => boolean;
+  visible?: ({ editor }: { editor: Editor }) => boolean;
+  icon?: Component;
+  title?: string;
+  action?: ({ editor }: { editor: Editor }) => void;
+}>();
+
+const src = computed({
+  get: () => {
+    return props.editor.getAttributes(Iframe.name).src;
+  },
+  set: (src: string) => {
+    props.editor.chain().updateAttributes(Iframe.name, { src: src }).run();
+  },
+});
+</script>
+
+<template>
+  <input
+    v-model.lazy="src"
+    :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
+    class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+  />
+</template>
diff --git a/packages/editor/src/extensions/iframe/BubbleItemIframeSize.vue b/packages/editor/src/extensions/iframe/BubbleItemIframeSize.vue
new file mode 100644
index 0000000..7d4470e
--- /dev/null
+++ b/packages/editor/src/extensions/iframe/BubbleItemIframeSize.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { BlockActionInput, BlockActionSeparator } from "@/components";
+import { i18n } from "@/locales";
+import type { Editor } from "@tiptap/vue-3";
+import { computed } from "vue";
+import Iframe from "./index";
+
+const props = defineProps<{
+  editor: Editor;
+}>();
+
+const width = computed({
+  get: () => {
+    return props.editor.getAttributes(Iframe.name).width;
+  },
+  set: (value: string) => {
+    handleSetSize(value, height.value);
+  },
+});
+
+const height = computed({
+  get: () => {
+    return props.editor.getAttributes(Iframe.name).height;
+  },
+  set: (value: string) => {
+    handleSetSize(width.value, value);
+  },
+});
+
+const handleSetSize = (width: string, height: string) => {
+  props.editor
+    .chain()
+    .updateAttributes(Iframe.name, { width, height })
+    .focus()
+    .setNodeSelection(props.editor.state.selection.from)
+    .run();
+};
+</script>
+<template>
+  <BlockActionInput
+    v-model.lazy.trim="width"
+    :tooltip="i18n.global.t('editor.common.tooltip.custom_width_input')"
+  />
+
+  <BlockActionInput
+    v-model.lazy.trim="height"
+    :tooltip="i18n.global.t('editor.common.tooltip.custom_height_input')"
+  />
+
+  <BlockActionSeparator />
+</template>
diff --git a/packages/editor/src/extensions/iframe/IframeView.vue b/packages/editor/src/extensions/iframe/IframeView.vue
index 283872d..03e8c87 100644
--- a/packages/editor/src/extensions/iframe/IframeView.vue
+++ b/packages/editor/src/extensions/iframe/IframeView.vue
@@ -3,23 +3,6 @@ import type { Node as ProseMirrorNode } from "prosemirror-model";
 import type { Decoration } from "prosemirror-view";
 import { Editor, NodeViewWrapper, Node } from "@tiptap/vue-3";
 import { computed, onMounted, ref } from "vue";
-import { Dropdown as VDropdown } from "floating-vue";
-import BlockCard from "@/components/block/BlockCard.vue";
-import BlockActionButton from "@/components/block/BlockActionButton.vue";
-import BlockActionInput from "@/components/block/BlockActionInput.vue";
-import BlockActionSeparator from "@/components/block/BlockActionSeparator.vue";
-import MdiLinkVariant from "~icons/mdi/link-variant";
-import MdiShare from "~icons/mdi/share";
-import MdiCellphoneIphone from "~icons/mdi/cellphone-iphone";
-import MdiTabletIpad from "~icons/mdi/tablet-ipad";
-import MdiDesktopMac from "~icons/mdi/desktop-mac";
-import MdiBorderAllVariant from "~icons/mdi/border-all-variant";
-import MdiBorderNoneVariant from "~icons/mdi/border-none-variant";
-import MdiFormatAlignLeft from "~icons/mdi/format-align-left";
-import MdiFormatAlignCenter from "~icons/mdi/format-align-center";
-import MdiFormatAlignRight from "~icons/mdi/format-align-right";
-import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
-import MdiWebSync from "~icons/mdi/web-sync";
 import { i18n } from "@/locales";
 
 const props = defineProps<{
@@ -42,24 +25,6 @@ const src = computed({
   },
 });
 
-const width = computed({
-  get: () => {
-    return props.node.attrs.width;
-  },
-  set: (value: string) => {
-    handleSetSize(value, height.value);
-  },
-});
-
-const height = computed({
-  get: () => {
-    return props.node.attrs.height;
-  },
-  set: (value: string) => {
-    handleSetSize(width.value, value);
-  },
-});
-
 const frameborder = computed(() => {
   return props.node.attrs.frameborder;
 });
@@ -67,33 +32,6 @@ const frameborder = computed(() => {
 function handleSetFocus() {
   props.editor.commands.setNodeSelection(props.getPos());
 }
-
-function handleSetSize(width: string, height: string) {
-  props.updateAttributes({ width, height });
-  props.editor.chain().focus().setNodeSelection(props.getPos()).run();
-}
-
-function handleToggleFrameborder() {
-  props.updateAttributes({
-    frameborder: props.node.attrs.frameborder === "0" ? "1" : "0",
-  });
-  props.editor.chain().focus().setNodeSelection(props.getPos()).run();
-}
-
-function sizeMatch(width: string, height: string) {
-  return width === props.node.attrs.width && height === props.node.attrs.height;
-}
-
-function handleOpenLink() {
-  window.open(src.value, "_blank");
-}
-
-const frameRef = ref();
-
-function handleRefresh() {
-  frameRef.value.src = src.value;
-}
-
 const inputRef = ref();
 
 onMounted(() => {
@@ -105,202 +43,37 @@ onMounted(() => {
 
 <template>
   <node-view-wrapper as="div">
-    <block-card
-      :editor="editor"
-      :get-pos="getPos"
-      :delete-node="deleteNode"
-      :selected="selected"
+    <div
+      class="inline-block overflow-hidden transition-all text-center relative h-full"
+      :style="{
+        width: node.attrs.width,
+      }"
     >
-      <template #content>
-        <div
-          class="inline-block overflow-hidden transition-all text-center relative h-full"
-          :style="{
-            width: node.attrs.width,
-          }"
-        >
-          <div v-if="!src" class="p-1.5">
-            <input
-              ref="inputRef"
-              v-model.lazy="src"
-              class="block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
-              :placeholder="
-                i18n.global.t('editor.common.placeholder.link_input')
-              "
-              tabindex="-1"
-              @focus="handleSetFocus"
-            />
-          </div>
-          <iframe
-            v-else
-            ref="frameRef"
-            class="rounded-md"
-            :src="node!.attrs.src"
-            :width="node.attrs.width"
-            :height="node.attrs.height"
-            scrolling="yes"
-            :frameborder="frameborder"
-            framespacing="0"
-            allowfullscreen="true"
-            :class="{
-              'border-2': frameborder === '1',
-            }"
-            @mouseenter="handleSetFocus"
-          ></iframe>
-        </div>
-      </template>
-      <template #actions>
-        <BlockActionButton
-          :selected="frameborder === '1'"
-          :tooltip="`${
-            frameborder === '1'
-              ? i18n.global.t('editor.extensions.iframe.disable_frameborder')
-              : i18n.global.t('editor.extensions.iframe.enable_frameborder')
-          }`"
-          @click="handleToggleFrameborder"
-        >
-          <template #icon>
-            <MdiBorderAllVariant v-if="frameborder === '1'" />
-            <MdiBorderNoneVariant v-else />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionSeparator />
-
-        <BlockActionInput
-          v-model.lazy.trim="width"
-          :tooltip="i18n.global.t('editor.common.tooltip.custom_width_input')"
+      <div v-if="!src" class="p-1.5">
+        <input
+          ref="inputRef"
+          v-model.lazy="src"
+          class="block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
+          :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
+          tabindex="-1"
+          @focus="handleSetFocus"
         />
-
-        <BlockActionInput
-          v-model.lazy.trim="height"
-          :tooltip="i18n.global.t('editor.common.tooltip.custom_height_input')"
-        />
-
-        <BlockActionSeparator />
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.extensions.iframe.phone_size')"
-          :selected="sizeMatch('390px', '844px')"
-          @click="handleSetSize('390px', '844px')"
-        >
-          <template #icon>
-            <MdiCellphoneIphone />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionButton
-          :tooltip="
-            i18n.global.t('editor.extensions.iframe.tablet_vertical_size')
-          "
-          :selected="sizeMatch('834px', '1194px')"
-          @click="handleSetSize('834px', '1194px')"
-        >
-          <template #icon>
-            <MdiTabletIpad />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionButton
-          :tooltip="
-            i18n.global.t('editor.extensions.iframe.tablet_horizontal_size')
-          "
-          :selected="sizeMatch('1194px', '834px')"
-          @click="handleSetSize('1194px', '834px')"
-        >
-          <template #icon>
-            <MdiTabletIpad class="-rotate-90" />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.extensions.iframe.desktop_size')"
-          :selected="sizeMatch('100%', '834px')"
-          @click="handleSetSize('100%', '834px')"
-        >
-          <template #icon>
-            <MdiDesktopMac />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionSeparator />
-
-        <BlockActionButton
-          :selected="editor.isActive({ textAlign: 'left' })"
-          @click="editor.chain().focus().setTextAlign('left').run()"
-        >
-          <template #icon>
-            <MdiFormatAlignLeft />
-          </template>
-        </BlockActionButton>
-        <BlockActionButton
-          :selected="editor.isActive({ textAlign: 'center' })"
-          @click="editor.chain().focus().setTextAlign('center').run()"
-        >
-          <template #icon>
-            <MdiFormatAlignCenter />
-          </template>
-        </BlockActionButton>
-        <BlockActionButton
-          :selected="editor.isActive({ textAlign: 'right' })"
-          @click="editor.chain().focus().setTextAlign('right').run()"
-        >
-          <template #icon>
-            <MdiFormatAlignRight />
-          </template>
-        </BlockActionButton>
-        <BlockActionButton
-          :selected="editor.isActive({ textAlign: 'justify' })"
-          @click="editor.chain().focus().setTextAlign('justify').run()"
-        >
-          <template #icon>
-            <MdiFormatAlignJustify />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionSeparator />
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.common.button.refresh')"
-          @click="handleRefresh"
-        >
-          <template #icon>
-            <MdiWebSync />
-          </template>
-        </BlockActionButton>
-
-        <VDropdown class="inline-flex" :triggers="['click']" :distance="10">
-          <BlockActionButton
-            :tooltip="i18n.global.t('editor.common.button.edit_link')"
-          >
-            <template #icon>
-              <MdiLinkVariant />
-            </template>
-          </BlockActionButton>
-
-          <template #popper>
-            <div
-              class="relative rounded-md bg-white overflow-hidden drop-shadow w-96 p-1 max-h-72 overflow-y-auto"
-            >
-              <input
-                v-model.lazy="src"
-                :placeholder="
-                  i18n.global.t('editor.common.placeholder.link_input')
-                "
-                class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
-              />
-            </div>
-          </template>
-        </VDropdown>
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.common.tooltip.open_link')"
-          @click="handleOpenLink"
-        >
-          <template #icon>
-            <MdiShare />
-          </template>
-        </BlockActionButton>
-      </template>
-    </block-card>
+      </div>
+      <iframe
+        v-else
+        class="rounded-md"
+        :src="node!.attrs.src"
+        :width="node.attrs.width"
+        :height="node.attrs.height"
+        scrolling="yes"
+        :frameborder="frameborder"
+        framespacing="0"
+        allowfullscreen="true"
+        :class="{
+          'border-2': frameborder === '1',
+        }"
+        @mouseenter="handleSetFocus"
+      ></iframe>
+    </div>
   </node-view-wrapper>
 </template>
diff --git a/packages/editor/src/extensions/iframe/index.ts b/packages/editor/src/extensions/iframe/index.ts
index 6e969ec..a69c9d8 100644
--- a/packages/editor/src/extensions/iframe/index.ts
+++ b/packages/editor/src/extensions/iframe/index.ts
@@ -1,6 +1,7 @@
 import type { ExtensionOptions } from "@/types";
 import {
   Editor,
+  isActive,
   mergeAttributes,
   Node,
   nodeInputRule,
@@ -13,6 +14,24 @@ import IframeView from "./IframeView.vue";
 import MdiWeb from "~icons/mdi/web";
 import ToolboxItem from "@/components/toolbox/ToolboxItem.vue";
 import { i18n } from "@/locales";
+import { BlockActionSeparator } from "@/components";
+import BubbleIframeSize from "./BubbleItemIframeSize.vue";
+import BubbleIframeLink from "./BubbleItemIframeLink.vue";
+import MdiBorderAllVariant from "~icons/mdi/border-all-variant";
+import MdiBorderNoneVariant from "~icons/mdi/border-none-variant";
+import MdiDesktopMac from "~icons/mdi/desktop-mac";
+import MdiTabletIpad from "~icons/mdi/tablet-ipad";
+import MdiCellphoneIphone from "~icons/mdi/cellphone-iphone";
+import MdiFormatAlignLeft from "~icons/mdi/format-align-left";
+import MdiFormatAlignCenter from "~icons/mdi/format-align-center";
+import MdiFormatAlignRight from "~icons/mdi/format-align-right";
+import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
+import { deleteNode } from "@/utils";
+import MdiDeleteForeverOutline from "~icons/mdi/delete-forever-outline?color=red";
+import MdiShare from "~icons/mdi/share";
+import MdiLinkVariant from "~icons/mdi/link-variant";
+import MdiWebSync from "~icons/mdi/web-sync";
+import type { EditorState } from "prosemirror-state";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -227,8 +246,211 @@ const Iframe = Node.create<ExtensionOptions>({
           },
         ];
       },
+      getBubbleMenu({ editor }: { editor: Editor }) {
+        return {
+          pluginKey: "iframeBubbleMenu",
+          shouldShow: ({ state }: { state: EditorState }) => {
+            return isActive(state, Iframe.name);
+          },
+          items: [
+            {
+              priority: 10,
+              props: {
+                isActive: () =>
+                  editor.getAttributes(Iframe.name).frameborder === "1",
+                icon: markRaw(
+                  editor.getAttributes(Iframe.name).frameborder === "1"
+                    ? MdiBorderAllVariant
+                    : MdiBorderNoneVariant
+                ),
+                action: () => {
+                  editor
+                    .chain()
+                    .updateAttributes(Iframe.name, {
+                      frameborder:
+                        editor.getAttributes(Iframe.name).frameborder === "1"
+                          ? "0"
+                          : "1",
+                    })
+                    .focus()
+                    .setNodeSelection(editor.state.selection.from)
+                    .run();
+                },
+                title:
+                  editor.getAttributes(Iframe.name).frameborder === "1"
+                    ? i18n.global.t(
+                        "editor.extensions.iframe.disable_frameborder"
+                      )
+                    : i18n.global.t(
+                        "editor.extensions.iframe.enable_frameborder"
+                      ),
+              },
+            },
+            {
+              priority: 20,
+              component: markRaw(BlockActionSeparator),
+            },
+            {
+              priority: 30,
+              component: markRaw(BubbleIframeSize),
+            },
+            {
+              priority: 40,
+              props: {
+                isActive: () => sizeMatch(editor, "390px", "844px"),
+                icon: markRaw(MdiCellphoneIphone),
+                action: () => {
+                  handleSetSize(editor, "390px", "844px");
+                },
+                title: i18n.global.t("editor.extensions.iframe.phone_size"),
+              },
+            },
+            {
+              priority: 50,
+              props: {
+                isActive: () => sizeMatch(editor, "834px", "1194px"),
+                icon: markRaw(MdiTabletIpad),
+                action: () => {
+                  handleSetSize(editor, "834px", "1194px");
+                },
+                title: i18n.global.t(
+                  "editor.extensions.iframe.tablet_vertical_size"
+                ),
+              },
+            },
+            {
+              priority: 60,
+              props: {
+                isActive: () => sizeMatch(editor, "1194px", "834px"),
+                icon: markRaw(MdiTabletIpad),
+                iconStyle: "transform: rotate(90deg)",
+                action: () => {
+                  handleSetSize(editor, "1194px", "834px");
+                },
+                title: i18n.global.t(
+                  "editor.extensions.iframe.tablet_horizontal_size"
+                ),
+              },
+            },
+            {
+              priority: 70,
+              props: {
+                isActive: () => sizeMatch(editor, "100%", "834px"),
+                icon: markRaw(MdiDesktopMac),
+                action: () => {
+                  handleSetSize(editor, "100%", "834px");
+                },
+                title: i18n.global.t("editor.extensions.iframe.desktop_size"),
+              },
+            },
+            {
+              priority: 80,
+              component: markRaw(BlockActionSeparator),
+            },
+            {
+              priority: 90,
+              props: {
+                isActive: () => editor.isActive({ textAlign: "left" }),
+                icon: markRaw(MdiFormatAlignLeft),
+                action: () => handleSetTextAlign(editor, "left"),
+              },
+            },
+            {
+              priority: 100,
+              props: {
+                isActive: () => editor.isActive({ textAlign: "center" }),
+                icon: markRaw(MdiFormatAlignCenter),
+                action: () => handleSetTextAlign(editor, "center"),
+              },
+            },
+            {
+              priority: 110,
+              props: {
+                isActive: () => editor.isActive({ textAlign: "right" }),
+                icon: markRaw(MdiFormatAlignRight),
+                action: () => handleSetTextAlign(editor, "right"),
+              },
+            },
+            {
+              priority: 120,
+              props: {
+                isActive: () => editor.isActive({ textAlign: "justify" }),
+                icon: markRaw(MdiFormatAlignJustify),
+                action: () => handleSetTextAlign(editor, "justify"),
+              },
+            },
+            {
+              priority: 130,
+              component: markRaw(BlockActionSeparator),
+            },
+            {
+              priority: 140,
+              props: {
+                icon: markRaw(MdiWebSync),
+                action: () => {
+                  editor
+                    .chain()
+                    .updateAttributes(Iframe.name, {
+                      src: editor.getAttributes(Iframe.name).src,
+                    })
+                    .run();
+                },
+              },
+            },
+            {
+              priority: 150,
+              props: {
+                icon: markRaw(MdiLinkVariant),
+                title: i18n.global.t("editor.common.button.edit_link"),
+                action: () => {
+                  return markRaw(BubbleIframeLink);
+                },
+              },
+            },
+            {
+              priority: 160,
+              props: {
+                icon: markRaw(MdiShare),
+                title: i18n.global.t("editor.common.tooltip.open_link"),
+                action: () => {
+                  window.open(editor.getAttributes(Iframe.name).src, "_blank");
+                },
+              },
+            },
+            {
+              priority: 190,
+              props: {
+                icon: markRaw(MdiDeleteForeverOutline),
+                title: i18n.global.t("editor.common.button.delete"),
+                action: ({ editor }) => deleteNode(Iframe.name, editor),
+              },
+            },
+          ],
+        };
+      },
     };
   },
 });
 
+const sizeMatch = (editor: Editor, width: string, height: string) => {
+  const attr = editor.getAttributes(Iframe.name);
+  return width === attr.width && height === attr.height;
+};
+
+const handleSetSize = (editor: Editor, width: string, height: string) => {
+  editor
+    .chain()
+    .updateAttributes(Iframe.name, { width, height })
+    .focus()
+    .setNodeSelection(editor.state.selection.from)
+    .run();
+};
+
+const handleSetTextAlign = (
+  editor: Editor,
+  align: "left" | "center" | "right" | "justify"
+) => {
+  editor.chain().focus().setTextAlign(align).run();
+};
+
 export default Iframe;
diff --git a/packages/editor/src/extensions/video/BubbleItemVideoLink.vue b/packages/editor/src/extensions/video/BubbleItemVideoLink.vue
new file mode 100644
index 0000000..993fc9a
--- /dev/null
+++ b/packages/editor/src/extensions/video/BubbleItemVideoLink.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { i18n } from "@/locales";
+import type { Editor } from "@tiptap/vue-3";
+import { computed, type Component } from "vue";
+import Video from "./index";
+
+const props = defineProps<{
+  editor: Editor;
+  isActive: ({ editor }: { editor: Editor }) => boolean;
+  visible?: ({ editor }: { editor: Editor }) => boolean;
+  icon?: Component;
+  title?: string;
+  action?: ({ editor }: { editor: Editor }) => void;
+}>();
+
+const src = computed({
+  get: () => {
+    return props.editor.getAttributes(Video.name).src;
+  },
+  set: (src: string) => {
+    props.editor.chain().updateAttributes(Video.name, { src: src }).run();
+  },
+});
+</script>
+
+<template>
+  <input
+    v-model.lazy="src"
+    :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
+    class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+  />
+</template>
diff --git a/packages/editor/src/extensions/video/BubbleItemVideoSize.vue b/packages/editor/src/extensions/video/BubbleItemVideoSize.vue
new file mode 100644
index 0000000..485e0e1
--- /dev/null
+++ b/packages/editor/src/extensions/video/BubbleItemVideoSize.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { BlockActionInput } from "@/components";
+import type { Editor } from "@tiptap/vue-3";
+import { computed, type Component } from "vue";
+import Video from "./index";
+import { i18n } from "@/locales";
+const props = defineProps<{
+  editor: Editor;
+  isActive: ({ editor }: { editor: Editor }) => boolean;
+  visible?: ({ editor }: { editor: Editor }) => boolean;
+  icon?: Component;
+  title?: string;
+  action?: ({ editor }: { editor: Editor }) => void;
+}>();
+
+const width = computed({
+  get: () => {
+    return props.editor.getAttributes(Video.name).width;
+  },
+  set: (value: string) => {
+    handleSetSize(value, height.value);
+  },
+});
+
+const height = computed({
+  get: () => {
+    return props.editor.getAttributes(Video.name).height;
+  },
+  set: (value: string) => {
+    handleSetSize(width.value, value);
+  },
+});
+
+function handleSetSize(width: string, height: string) {
+  props.editor
+    .chain()
+    .updateAttributes(Video.name, { width, height })
+    .setNodeSelection(props.editor.state.selection.from)
+    .focus()
+    .run();
+}
+</script>
+
+<template>
+  <BlockActionInput
+    v-model.lazy.trim="width"
+    :tooltip="i18n.global.t('editor.common.tooltip.custom_width_input')"
+  />
+
+  <BlockActionInput
+    v-model.lazy.trim="height"
+    :tooltip="i18n.global.t('editor.common.tooltip.custom_height_input')"
+  />
+</template>
+<style lang="scss">
+.editor-block__actions-input {
+  @apply bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-32 py-1 text-sm text-gray-900 border border-gray-300  focus:ring-blue-500 focus:border-blue-500;
+}
+</style>
diff --git a/packages/editor/src/extensions/video/VideoView.vue b/packages/editor/src/extensions/video/VideoView.vue
index ff577c4..2a879f4 100644
--- a/packages/editor/src/extensions/video/VideoView.vue
+++ b/packages/editor/src/extensions/video/VideoView.vue
@@ -3,26 +3,6 @@ import type { Node as ProseMirrorNode } from "prosemirror-model";
 import type { Decoration } from "prosemirror-view";
 import { Editor, NodeViewWrapper, Node } from "@tiptap/vue-3";
 import { computed, onMounted, ref } from "vue";
-import { Dropdown as VDropdown } from "floating-vue";
-import BlockCard from "@/components/block/BlockCard.vue";
-import BlockActionButton from "@/components/block/BlockActionButton.vue";
-import BlockActionInput from "@/components/block/BlockActionInput.vue";
-import BlockActionSeparator from "@/components/block/BlockActionSeparator.vue";
-import MdiLinkVariant from "~icons/mdi/link-variant";
-import MdiShare from "~icons/mdi/share";
-import MdiImageSizeSelectActual from "~icons/mdi/image-size-select-actual";
-import MdiImageSizeSelectSmall from "~icons/mdi/image-size-select-small";
-import MdiImageSizeSelectLarge from "~icons/mdi/image-size-select-large";
-import MdiFormatAlignLeft from "~icons/mdi/format-align-left";
-import MdiFormatAlignCenter from "~icons/mdi/format-align-center";
-import MdiFormatAlignRight from "~icons/mdi/format-align-right";
-import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
-import MdiCogPlay from "~icons/mdi/cog-play";
-import MdiCogPlayOutline from "~icons/mdi/cog-play-outline";
-import MdiPlayCircle from "~icons/mdi/play-circle";
-import MdiPlayCircleOutline from "~icons/mdi/play-circle-outline";
-import MdiMotionPlayOutline from "~icons/mdi/motion-play-outline";
-import MdiMotionPlay from "~icons/mdi/motion-play";
 import { i18n } from "@/locales";
 
 const props = defineProps<{
@@ -45,24 +25,6 @@ const src = computed({
   },
 });
 
-const width = computed({
-  get: () => {
-    return props.node.attrs.width;
-  },
-  set: (value: string) => {
-    handleSetSize(value, height.value);
-  },
-});
-
-const height = computed({
-  get: () => {
-    return props.node.attrs.height;
-  },
-  set: (value: string) => {
-    handleSetSize(width.value, value);
-  },
-});
-
 const controls = computed(() => {
   return props.node.attrs.controls;
 });
@@ -79,36 +41,6 @@ function handleSetFocus() {
   props.editor.commands.setNodeSelection(props.getPos());
 }
 
-function handleSetSize(width: string, height: string) {
-  props.updateAttributes({ width, height });
-  props.editor.chain().focus().setNodeSelection(props.getPos()).run();
-}
-
-function handleToggleControls() {
-  props.updateAttributes({
-    controls: props.node.attrs.controls ? null : true,
-  });
-  props.editor.chain().focus().setNodeSelection(props.getPos()).run();
-}
-
-function handleToggleAutoplay() {
-  props.updateAttributes({
-    autoplay: props.node.attrs.autoplay ? null : true,
-  });
-  props.editor.chain().focus().setNodeSelection(props.getPos()).run();
-}
-
-function handleToggleLoop() {
-  props.updateAttributes({
-    loop: props.node.attrs.loop ? null : true,
-  });
-  props.editor.chain().focus().setNodeSelection(props.getPos()).run();
-}
-
-function handleOpenLink() {
-  window.open(src.value, "_blank");
-}
-
 const inputRef = ref();
 
 onMounted(() => {
@@ -120,159 +52,35 @@ onMounted(() => {
 
 <template>
   <node-view-wrapper as="div">
-    <block-card
-      :editor="editor"
-      :get-pos="getPos"
-      :delete-node="deleteNode"
-      :selected="selected"
+    <div
+      class="inline-block overflow-hidden transition-all text-center relative h-full"
+      :style="{
+        width: node.attrs.width,
+      }"
     >
-      <template #content>
-        <div
-          class="inline-block overflow-hidden transition-all text-center relative h-full"
-          :style="{
-            width: node.attrs.width,
-          }"
-        >
-          <div v-if="!src" class="p-1.5">
-            <input
-              ref="inputRef"
-              v-model.lazy="src"
-              class="block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
-              :placeholder="
-                i18n.global.t('editor.common.placeholder.link_input')
-              "
-              tabindex="-1"
-              @focus="handleSetFocus"
-            />
-          </div>
-          <video
-            v-else
-            :controls="controls"
-            :autoplay="autoplay"
-            :loop="loop"
-            class="rounded-md m-0"
-            :src="node!.attrs.src"
-            :style="{
-              width: node.attrs.width,
-              height: node.attrs.height,
-            }"
-            @mouseenter="handleSetFocus"
-          ></video>
-        </div>
-      </template>
-      <template #actions>
-        <BlockActionInput
-          v-model.lazy.trim="width"
-          :tooltip="i18n.global.t('editor.common.tooltip.custom_width_input')"
+      <div v-if="!src" class="p-1.5">
+        <input
+          ref="inputRef"
+          v-model.lazy="src"
+          class="block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
+          :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
+          tabindex="-1"
+          @focus="handleSetFocus"
         />
-
-        <BlockActionInput
-          v-model.lazy.trim="height"
-          :tooltip="i18n.global.t('editor.common.tooltip.custom_height_input')"
-        />
-
-        <BlockActionSeparator />
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.extensions.video.small_size')"
-          :selected="node.attrs.width === '25%'"
-          @click="handleSetSize('25%', 'auto')"
-        >
-          <template #icon>
-            <MdiImageSizeSelectSmall />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.extensions.video.medium_size')"
-          :selected="node.attrs.width === '50%'"
-          @click="handleSetSize('50%', 'auto')"
-        >
-          <template #icon>
-            <MdiImageSizeSelectLarge />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.extensions.video.large_size')"
-          :selected="node.attrs.width === '100%'"
-          @click="handleSetSize('100%', 'auto')"
-        >
-          <template #icon>
-            <MdiImageSizeSelectActual />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionSeparator />
-
-        <BlockActionButton
-          :selected="editor.isActive({ textAlign: 'left' })"
-          @click="editor.chain().focus().setTextAlign('left').run()"
-        >
-          <template #icon>
-            <MdiFormatAlignLeft />
-          </template>
-        </BlockActionButton>
-        <BlockActionButton
-          :selected="editor.isActive({ textAlign: 'center' })"
-          @click="editor.chain().focus().setTextAlign('center').run()"
-        >
-          <template #icon>
-            <MdiFormatAlignCenter />
-          </template>
-        </BlockActionButton>
-        <BlockActionButton
-          :selected="editor.isActive({ textAlign: 'right' })"
-          @click="editor.chain().focus().setTextAlign('right').run()"
-        >
-          <template #icon>
-            <MdiFormatAlignRight />
-          </template>
-        </BlockActionButton>
-        <BlockActionButton
-          :selected="editor.isActive({ textAlign: 'justify' })"
-          @click="editor.chain().focus().setTextAlign('justify').run()"
-        >
-          <template #icon>
-            <MdiFormatAlignJustify />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionSeparator />
-
-        <VDropdown class="inline-flex" :triggers="['click']" :distance="10">
-          <BlockActionButton
-            :tooltip="i18n.global.t('editor.common.button.edit_link')"
-          >
-            <template #icon>
-              <MdiLinkVariant />
-            </template>
-          </BlockActionButton>
-
-          <template #popper>
-            <div
-              class="relative rounded-md bg-white overflow-hidden drop-shadow w-96 p-1 max-h-72 overflow-y-auto"
-            >
-              <input
-                v-model.lazy="src"
-                :placeholder="
-                  i18n.global.t('editor.common.placeholder.link_input')
-                "
-                class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
-              />
-            </div>
-          </template>
-        </VDropdown>
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.common.tooltip.open_link')"
-          @click="handleOpenLink"
-        >
-          <template #icon>
-            <MdiShare />
-          </template>
-        </BlockActionButton>
-      </template>
-    </block-card>
+      </div>
+      <video
+        v-else
+        :controls="controls"
+        :autoplay="autoplay"
+        :loop="loop"
+        class="rounded-md m-0"
+        :src="node!.attrs.src"
+        :style="{
+          width: node.attrs.width,
+          height: node.attrs.height,
+        }"
+        @mouseenter="handleSetFocus"
+      ></video>
+    </div>
   </node-view-wrapper>
 </template>
diff --git a/packages/editor/src/extensions/video/index.ts b/packages/editor/src/extensions/video/index.ts
index 78d60c3..175523d 100644
--- a/packages/editor/src/extensions/video/index.ts
+++ b/packages/editor/src/extensions/video/index.ts
@@ -1,6 +1,7 @@
 import type { ExtensionOptions } from "@/types";
 import {
   Editor,
+  isActive,
   mergeAttributes,
   Node,
   nodeInputRule,
@@ -12,13 +13,27 @@ import VideoView from "./VideoView.vue";
 import MdiVideo from "~icons/mdi/video";
 import ToolboxItem from "@/components/toolbox/ToolboxItem.vue";
 import { i18n } from "@/locales";
+import { BlockActionSeparator } from "@/components";
+import BubbleItemVideoSize from "./BubbleItemVideoSize.vue";
+import BubbleItemVideoLink from "./BubbleItemVideoLink.vue";
+import MdiImageSizeSelectActual from "~icons/mdi/image-size-select-actual";
+import MdiImageSizeSelectSmall from "~icons/mdi/image-size-select-small";
+import MdiImageSizeSelectLarge from "~icons/mdi/image-size-select-large";
+import MdiFormatAlignLeft from "~icons/mdi/format-align-left";
+import MdiFormatAlignCenter from "~icons/mdi/format-align-center";
+import MdiFormatAlignRight from "~icons/mdi/format-align-right";
+import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
+import MdiCogPlay from "~icons/mdi/cog-play";
+import MdiCogPlayOutline from "~icons/mdi/cog-play-outline";
 import MdiPlayCircle from "~icons/mdi/play-circle";
 import MdiPlayCircleOutline from "~icons/mdi/play-circle-outline";
 import MdiMotionPlayOutline from "~icons/mdi/motion-play-outline";
 import MdiMotionPlay from "~icons/mdi/motion-play";
-import MdiCogPlay from "~icons/mdi/cog-play";
-import MdiCogPlayOutline from "~icons/mdi/cog-play-outline";
-import { BlockActionSeparator } from "@/components";
+import MdiLinkVariant from "~icons/mdi/link-variant";
+import MdiShare from "~icons/mdi/share";
+import { deleteNode } from "@/utils";
+import MdiDeleteForeverOutline from "~icons/mdi/delete-forever-outline?color=red";
+import type { EditorState } from "prosemirror-state";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -103,6 +118,17 @@ const Video = Node.create<ExtensionOptions>({
           };
         },
       },
+      textAlign: {
+        default: null,
+        parseHTML: (element) => {
+          return element.getAttribute("text-align");
+        },
+        renderHTML: (attributes) => {
+          return {
+            "text-align": attributes.textAlign,
+          };
+        },
+      },
     };
   },
 
@@ -192,8 +218,8 @@ const Video = Node.create<ExtensionOptions>({
       getBubbleMenu({ editor }: { editor: Editor }) {
         return {
           pluginKey: "videoBubbleMenu",
-          shouldShow: () => {
-            return editor.isActive(Video.name);
+          shouldShow: ({ state }: { state: EditorState }) => {
+            return isActive(state, Video.name);
           },
           items: [
             {
@@ -282,6 +308,115 @@ const Video = Node.create<ExtensionOptions>({
               priority: 40,
               component: markRaw(BlockActionSeparator),
             },
+            {
+              priority: 50,
+              component: markRaw(BubbleItemVideoSize),
+            },
+            {
+              priority: 60,
+              component: markRaw(BlockActionSeparator),
+            },
+            {
+              priority: 70,
+              props: {
+                isActive: () =>
+                  editor.getAttributes(Video.name).width === "25%",
+                icon: markRaw(MdiImageSizeSelectSmall),
+                action: () => handleSetSize(editor, "25%", "auto"),
+                title: i18n.global.t("editor.extensions.video.small_size"),
+              },
+            },
+            {
+              priority: 80,
+              props: {
+                isActive: () =>
+                  editor.getAttributes(Video.name).width === "50%",
+                icon: markRaw(MdiImageSizeSelectLarge),
+                action: () => handleSetSize(editor, "50%", "auto"),
+                title: i18n.global.t("editor.extensions.video.medium_size"),
+              },
+            },
+            {
+              priority: 90,
+              props: {
+                isActive: () =>
+                  editor.getAttributes(Video.name).width === "100%",
+                icon: markRaw(MdiImageSizeSelectActual),
+                action: () => handleSetSize(editor, "100%", "auto"),
+                title: i18n.global.t("editor.extensions.video.large_size"),
+              },
+            },
+            {
+              priority: 100,
+              component: markRaw(BlockActionSeparator),
+            },
+            {
+              priority: 110,
+              props: {
+                isActive: () => editor.isActive({ textAlign: "left" }),
+                icon: markRaw(MdiFormatAlignLeft),
+                action: () => handleSetTextAlign(editor, "left"),
+              },
+            },
+            {
+              priority: 120,
+              props: {
+                isActive: () => editor.isActive({ textAlign: "center" }),
+                icon: markRaw(MdiFormatAlignCenter),
+                action: () => handleSetTextAlign(editor, "center"),
+              },
+            },
+            {
+              priority: 130,
+              props: {
+                isActive: () => editor.isActive({ textAlign: "right" }),
+                icon: markRaw(MdiFormatAlignRight),
+                action: () => handleSetTextAlign(editor, "right"),
+              },
+            },
+            {
+              priority: 140,
+              props: {
+                isActive: () => editor.isActive({ textAlign: "justify" }),
+                icon: markRaw(MdiFormatAlignJustify),
+                action: () => handleSetTextAlign(editor, "justify"),
+              },
+            },
+            {
+              priority: 150,
+              component: markRaw(BlockActionSeparator),
+            },
+            {
+              priority: 160,
+              props: {
+                icon: markRaw(MdiLinkVariant),
+                title: i18n.global.t("editor.common.button.edit_link"),
+                action: () => {
+                  return markRaw(BubbleItemVideoLink);
+                },
+              },
+            },
+            {
+              priority: 170,
+              props: {
+                icon: markRaw(MdiShare),
+                title: i18n.global.t("editor.common.tooltip.open_link"),
+                action: () =>
+                  window.open(editor.getAttributes(Video.name).src, "_blank"),
+              },
+            },
+            {
+              priority: 180,
+              component: markRaw(BlockActionSeparator),
+            },
+            {
+              priority: 190,
+              props: {
+                icon: markRaw(MdiDeleteForeverOutline),
+                title: i18n.global.t("editor.common.button.delete"),
+                action: ({ editor }) => deleteNode(Video.name, editor),
+              },
+            },
           ],
         };
       },
@@ -289,4 +424,20 @@ const Video = Node.create<ExtensionOptions>({
   },
 });
 
+const handleSetSize = (editor: Editor, width: string, height: string) => {
+  editor
+    .chain()
+    .updateAttributes(Video.name, { width, height })
+    .setNodeSelection(editor.state.selection.from)
+    .focus()
+    .run();
+};
+
+const handleSetTextAlign = (
+  editor: Editor,
+  align: "left" | "center" | "right" | "justify"
+) => {
+  editor.chain().focus().setTextAlign(align).run();
+};
+
 export default Video;
diff --git a/packages/editor/src/types/index.ts b/packages/editor/src/types/index.ts
index 441e6af..10df984 100644
--- a/packages/editor/src/types/index.ts
+++ b/packages/editor/src/types/index.ts
@@ -2,6 +2,7 @@ import type { Editor, Range } from "@tiptap/core";
 import type { EditorState } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
 import type { Component } from "vue";
+import default from '../../vite.config';
 export interface ToolbarItem {
   priority: number;
   component: Component;
@@ -19,17 +20,18 @@ export interface ToolbarItem {
 interface BubbleMenuProps {
   pluginKey?: string;
   editor?: Editor;
-  updateDelay?: number;
   shouldShow: (props: {
     editor: Editor;
-    view: EditorView;
-    state: EditorState;
-    oldState?: EditorState | undefined;
-    from: number;
-    to: number;
+    node?: HTMLElement;
+    view?: EditorView;
+    state?: EditorState;
+    oldState?: EditorState;
+    from?: number;
+    to?: number;
   }) => boolean;
   tippyOptions?: Record<string, unknown>;
-  isDeleteItem?: boolean;
+  getRenderContainer?: (node: HTMLElement) => HTMLElement;
+  defaultAnimation?: boolean;
 }
 
 export interface NodeBubbleMenu extends BubbleMenuProps {
@@ -44,6 +46,7 @@ export interface BubbleItem {
     isActive: ({ editor }: { editor: Editor }) => boolean;
     visible?: ({ editor }: { editor: Editor }) => boolean;
     icon?: Component;
+    iconStyle?: string;
     title?: string;
     action?: ({ editor }: { editor: Editor }) => any;
   };

From f7d4c08511a2f42f12620d4e4783f95beb4bdebb Mon Sep 17 00:00:00 2001
From: LIlGG <1103069291@qq.com>
Date: Thu, 31 Aug 2023 18:28:06 +0800
Subject: [PATCH 05/11] wip: refactor the bubble menu.

---
 .../src/components/bubble/BubbleMenuPlugin.ts | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/bubble/BubbleMenuPlugin.ts b/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
index 7c09a49..93737ce 100644
--- a/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
+++ b/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
@@ -14,6 +14,7 @@ export interface BubbleMenuPluginProps {
   editor: Editor;
   element: HTMLElement;
   tippyOptions?: Partial<Props>;
+  updateDelay?: number;
   shouldShow?:
     | ((props: {
         editor: Editor;
@@ -46,6 +47,10 @@ export class BubbleMenuView {
 
   public tippy: Instance | undefined;
 
+  private updateDebounceTimer: number | undefined;
+
+  public updateDelay: number;
+
   public tippyOptions?: Partial<Props>;
 
   public getRenderContainer?: BubbleMenuPluginProps["getRenderContainer"];
@@ -79,6 +84,7 @@ export class BubbleMenuView {
     element,
     view,
     tippyOptions = {},
+    updateDelay = 250,
     shouldShow,
     getRenderContainer,
     defaultAnimation = true,
@@ -86,6 +92,7 @@ export class BubbleMenuView {
     this.editor = editor;
     this.element = element;
     this.view = view;
+    this.updateDelay = updateDelay;
     this.getRenderContainer = getRenderContainer;
     this.defaultAnimation = defaultAnimation;
 
@@ -185,7 +192,26 @@ export class BubbleMenuView {
     }
   }
 
-  update(view: EditorView, oldState?: EditorState) {
+  update = (view: EditorView, oldState?: EditorState) => {
+    const { state, composing } = view;
+    const { doc, selection } = state;
+    const isSame =
+      oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
+
+    if (composing || isSame) {
+      return;
+    }
+
+    if (this.updateDebounceTimer) {
+      clearTimeout(this.updateDebounceTimer);
+    }
+
+    this.updateDebounceTimer = window.setTimeout(() => {
+      this.updateHandler(view, oldState);
+    }, this.updateDelay);
+  };
+
+  updateHandler(view: EditorView, oldState?: EditorState) {
     const { state, composing } = view;
     const { doc, selection } = state;
     const isSame =

From e8c4429a4f7fe6faa0495f031ef9fb10d3a9dba6 Mon Sep 17 00:00:00 2001
From: LIlGG <1103069291@qq.com>
Date: Fri, 1 Sep 2023 16:54:07 +0800
Subject: [PATCH 06/11] wip: refactor the bubble menu.

---
 .../src/components/EditorBubbleMenu.vue       |   2 -
 .../src/components/bubble/BubbleMenu.vue      |   2 +-
 .../src/components/bubble/BubbleMenuPlugin.ts |  48 +--
 .../src/components/bubble/TextBubbleMenu.ts   |  22 +-
 .../code-block/CodeBlockViewRenderer.vue      |   2 +-
 .../src/extensions/code-block/code-block.ts   |   2 +-
 .../extensions/image/BubbleItemImageAlt.vue   |  37 +++
 .../extensions/image/BubbleItemImageLink.vue  |  37 +++
 .../extensions/image/BubbleItemImageSize.vue  | 170 ++++++++++
 .../editor/src/extensions/image/ImageView.vue | 308 ++----------------
 packages/editor/src/extensions/image/index.ts | 114 ++++++-
 11 files changed, 417 insertions(+), 327 deletions(-)
 create mode 100644 packages/editor/src/extensions/image/BubbleItemImageAlt.vue
 create mode 100644 packages/editor/src/extensions/image/BubbleItemImageLink.vue
 create mode 100644 packages/editor/src/extensions/image/BubbleItemImageSize.vue

diff --git a/packages/editor/src/components/EditorBubbleMenu.vue b/packages/editor/src/components/EditorBubbleMenu.vue
index 8b6a37e..731e5bf 100644
--- a/packages/editor/src/components/EditorBubbleMenu.vue
+++ b/packages/editor/src/components/EditorBubbleMenu.vue
@@ -7,7 +7,6 @@ import BubbleItem from "@/components/bubble/BubbleItem.vue";
 import { defaultTextBubbleMenu } from "@/components/bubble/TextBubbleMenu";
 import type { EditorView } from "prosemirror-view";
 import type { EditorState } from "prosemirror-state";
-import type { BubbleMenuPluginProps } from "./bubble/BubbleMenuPlugin";
 
 const props = defineProps({
   editor: {
@@ -69,7 +68,6 @@ const shouldShow = (
     :editor="editor"
     :tippy-options="{
       maxWidth: '100%',
-      moveTransition: 'transform 0.2s ease-out',
       ...bubbleMenu.tippyOptions,
     }"
     :get-render-container="bubbleMenu.getRenderContainer"
diff --git a/packages/editor/src/components/bubble/BubbleMenu.vue b/packages/editor/src/components/bubble/BubbleMenu.vue
index f8cdb88..dd5e3b6 100644
--- a/packages/editor/src/components/bubble/BubbleMenu.vue
+++ b/packages/editor/src/components/bubble/BubbleMenu.vue
@@ -37,7 +37,7 @@ const props = defineProps({
 
   defaultAnimation: {
     type: Boolean as PropType<BubbleMenuPluginProps["defaultAnimation"]>,
-    default: false,
+    default: true,
   },
 });
 
diff --git a/packages/editor/src/components/bubble/BubbleMenuPlugin.ts b/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
index 93737ce..13b0acf 100644
--- a/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
+++ b/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
@@ -47,10 +47,6 @@ export class BubbleMenuView {
 
   public tippy: Instance | undefined;
 
-  private updateDebounceTimer: number | undefined;
-
-  public updateDelay: number;
-
   public tippyOptions?: Partial<Props>;
 
   public getRenderContainer?: BubbleMenuPluginProps["getRenderContainer"];
@@ -63,16 +59,16 @@ export class BubbleMenuView {
     from,
     to,
   }) => {
-    const { doc, selection } = state;
+    const { doc, selection } = state as EditorState;
     const { empty } = selection;
 
     // Sometime check for `empty` is not enough.
     // Doubleclick an empty paragraph returns a node size of 2.
     // So we check also for an empty text size.
     const isEmptyTextBlock =
-      !doc.textBetween(from, to).length && isTextSelection(state.selection);
+      !doc.textBetween(from || 0, to || 0).length && isTextSelection(selection);
 
-    if (!view.hasFocus() || empty || isEmptyTextBlock) {
+    if (!(view as EditorView).hasFocus() || empty || isEmptyTextBlock) {
       return false;
     }
 
@@ -84,7 +80,6 @@ export class BubbleMenuView {
     element,
     view,
     tippyOptions = {},
-    updateDelay = 250,
     shouldShow,
     getRenderContainer,
     defaultAnimation = true,
@@ -92,7 +87,6 @@ export class BubbleMenuView {
     this.editor = editor;
     this.element = element;
     this.view = view;
-    this.updateDelay = updateDelay;
     this.getRenderContainer = getRenderContainer;
     this.defaultAnimation = defaultAnimation;
 
@@ -169,7 +163,6 @@ export class BubbleMenuView {
       ...Object.assign(
         {
           zIndex: 999,
-          duration: 200,
           ...(this.defaultAnimation
             ? {
                 animation: "shift-toward-subtle",
@@ -192,26 +185,7 @@ export class BubbleMenuView {
     }
   }
 
-  update = (view: EditorView, oldState?: EditorState) => {
-    const { state, composing } = view;
-    const { doc, selection } = state;
-    const isSame =
-      oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
-
-    if (composing || isSame) {
-      return;
-    }
-
-    if (this.updateDebounceTimer) {
-      clearTimeout(this.updateDebounceTimer);
-    }
-
-    this.updateDebounceTimer = window.setTimeout(() => {
-      this.updateHandler(view, oldState);
-    }, this.updateDelay);
-  };
-
-  updateHandler(view: EditorView, oldState?: EditorState) {
+  update(view: EditorView, oldState?: EditorState) {
     const { state, composing } = view;
     const { doc, selection } = state;
     const isSame =
@@ -228,7 +202,9 @@ export class BubbleMenuView {
     const cursorAt = selection.$anchor.pos;
     const from = Math.min(...ranges.map((range) => range.$from.pos));
     const to = Math.max(...ranges.map((range) => range.$to.pos));
-    const placement = isNodeSelection(selection)
+    const placement = this.tippyOptions?.placement
+      ? this.tippyOptions?.placement
+      : isNodeSelection(selection)
       ? "top"
       : Math.abs(cursorAt - to) <= Math.abs(cursorAt - from)
       ? "bottom-start"
@@ -237,8 +213,6 @@ export class BubbleMenuView {
     const nodeDOM = view.nodeDOM(from) as HTMLElement;
     const node = nodeDOM || domAtPos;
 
-    console.log(selection);
-
     const shouldShow =
       this.editor.isEditable &&
       this.shouldShow?.({
@@ -262,7 +236,8 @@ export class BubbleMenuView {
         instance.popperInstance &&
         instance.popperInstance.state
     );
-    const offsetX = this.tippyOptions?.offset?.[0] ?? 0;
+    const offset = this.tippyOptions?.offset as [number, number];
+    const offsetX = offset?.[0] ?? 0;
     const offsetY = otherBubbleMenus.length
       ? otherBubbleMenus.reduce((prev, instance, currentIndex, array) => {
           const prevY = array[currentIndex - 1]
@@ -281,8 +256,7 @@ export class BubbleMenuView {
 
           return prev;
         }, 0)
-      : this.tippyOptions?.offset?.[1] ?? 10;
-
+      : offset?.[1] ?? 10;
     this.tippy?.setProps({
       offset: [offsetX, offsetY],
       placement,
@@ -319,7 +293,7 @@ export class BubbleMenuView {
       (instance) => instance?.id === this.tippy?.id
     );
     if (idx < 0) {
-      ACTIVE_BUBBLE_MENUS.push(this.tippy);
+      ACTIVE_BUBBLE_MENUS.push(this.tippy as Instance);
     }
   };
 
diff --git a/packages/editor/src/components/bubble/TextBubbleMenu.ts b/packages/editor/src/components/bubble/TextBubbleMenu.ts
index 291f8df..53f4a93 100644
--- a/packages/editor/src/components/bubble/TextBubbleMenu.ts
+++ b/packages/editor/src/components/bubble/TextBubbleMenu.ts
@@ -20,37 +20,43 @@ import MdiFormatAlignCenter from "~icons/mdi/format-align-center";
 import MdiFormatAlignRight from "~icons/mdi/format-align-right";
 import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
 import MdiFormatUnderline from "~icons/mdi/format-underline";
-import { isTextSelection } from "@tiptap/core";
+import { isActive, isTextSelection } from "@tiptap/core";
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
 
 const OTHER_BUBBLE_MENU_TYPES = ["audio", "video", "image", "iframe"];
 
 export const defaultTextBubbleMenu: NodeBubbleMenu = {
   pluginKey: "textBubbleMenu",
-  shouldShow: ({ editor, view, state, from, to }) => {
-    const { empty } = editor.state.selection;
+  shouldShow: ({ view, state, from, to }) => {
+    const { doc, selection } = state as EditorState;
+    const { empty } = selection;
     if (empty) {
       return false;
     }
 
-    if (OTHER_BUBBLE_MENU_TYPES.some((type) => editor.isActive(type))) {
+    if (
+      OTHER_BUBBLE_MENU_TYPES.some((type) =>
+        isActive(state as EditorState, type)
+      )
+    ) {
       return false;
     }
 
-    const { doc } = editor.state;
-
     const isEmptyTextBlock =
-      !doc.textBetween(from, to).length && isTextSelection(state.selection);
+      !doc.textBetween(from || 0, to || 0).length && isTextSelection(selection);
     if (isEmptyTextBlock) {
       return false;
     }
 
-    const hasEditorFocus = view.hasFocus();
+    const hasEditorFocus = (view as EditorView).hasFocus();
     if (!hasEditorFocus) {
       return false;
     }
 
     return true;
   },
+  defaultAnimation: false,
   items: [
     {
       priority: 20,
diff --git a/packages/editor/src/extensions/code-block/CodeBlockViewRenderer.vue b/packages/editor/src/extensions/code-block/CodeBlockViewRenderer.vue
index eb536ee..8fcfb94 100644
--- a/packages/editor/src/extensions/code-block/CodeBlockViewRenderer.vue
+++ b/packages/editor/src/extensions/code-block/CodeBlockViewRenderer.vue
@@ -30,7 +30,7 @@ const selectedLanguage = computed({
 });
 </script>
 <template>
-  <node-view-wrapper>
+  <node-view-wrapper as="div" class="code-node">
     <div class="py-1.5">
       <select
         v-model="selectedLanguage"
diff --git a/packages/editor/src/extensions/code-block/code-block.ts b/packages/editor/src/extensions/code-block/code-block.ts
index 8a526c2..5fc1383 100644
--- a/packages/editor/src/extensions/code-block/code-block.ts
+++ b/packages/editor/src/extensions/code-block/code-block.ts
@@ -187,7 +187,7 @@ export default CodeBlockLowlight.extend<
             while (
               container &&
               container.classList &&
-              !container.classList.contains("hljs")
+              !container.classList.contains("code-node")
             ) {
               container = container.parentElement as HTMLElement;
             }
diff --git a/packages/editor/src/extensions/image/BubbleItemImageAlt.vue b/packages/editor/src/extensions/image/BubbleItemImageAlt.vue
new file mode 100644
index 0000000..cff2816
--- /dev/null
+++ b/packages/editor/src/extensions/image/BubbleItemImageAlt.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { i18n } from "@/locales";
+import type { Editor } from "@tiptap/vue-3";
+import { computed, type Component } from "vue";
+import Image from "./index";
+
+const props = defineProps<{
+  editor: Editor;
+  isActive: ({ editor }: { editor: Editor }) => boolean;
+  visible?: ({ editor }: { editor: Editor }) => boolean;
+  icon?: Component;
+  title?: string;
+  action?: ({ editor }: { editor: Editor }) => void;
+}>();
+
+const alt = computed({
+  get: () => {
+    return props.editor.getAttributes(Image.name).alt;
+  },
+  set: (alt: string) => {
+    props.editor
+      .chain()
+      .updateAttributes(Image.name, { alt: alt })
+      .setNodeSelection(props.editor.state.selection.from)
+      .focus()
+      .run();
+  },
+});
+</script>
+
+<template>
+  <input
+    v-model.lazy="alt"
+    :placeholder="i18n.global.t('editor.common.placeholder.alt_input')"
+    class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+  />
+</template>
diff --git a/packages/editor/src/extensions/image/BubbleItemImageLink.vue b/packages/editor/src/extensions/image/BubbleItemImageLink.vue
new file mode 100644
index 0000000..bd71386
--- /dev/null
+++ b/packages/editor/src/extensions/image/BubbleItemImageLink.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { i18n } from "@/locales";
+import type { Editor } from "@tiptap/vue-3";
+import { computed, type Component, watch } from "vue";
+import Image from "./index";
+
+const props = defineProps<{
+  editor: Editor;
+  isActive: ({ editor }: { editor: Editor }) => boolean;
+  visible?: ({ editor }: { editor: Editor }) => boolean;
+  icon?: Component;
+  title?: string;
+  action?: ({ editor }: { editor: Editor }) => void;
+}>();
+
+const src = computed({
+  get: () => {
+    return props.editor.getAttributes(Image.name).src;
+  },
+  set: (src: string) => {
+    props.editor
+      .chain()
+      .updateAttributes(Image.name, { src: src })
+      .setNodeSelection(props.editor.state.selection.from)
+      .focus()
+      .run();
+  },
+});
+</script>
+
+<template>
+  <input
+    v-model.lazy="src"
+    :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
+    class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+  />
+</template>
diff --git a/packages/editor/src/extensions/image/BubbleItemImageSize.vue b/packages/editor/src/extensions/image/BubbleItemImageSize.vue
new file mode 100644
index 0000000..bf732c3
--- /dev/null
+++ b/packages/editor/src/extensions/image/BubbleItemImageSize.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { i18n } from "@/locales";
+import type { Editor } from "@tiptap/vue-3";
+import { computed, type Component, onUnmounted, ref, watch } from "vue";
+import Image from "./index";
+import {
+  BlockActionButton,
+  BlockActionInput,
+  BlockActionSeparator,
+} from "@/components";
+import MdiBackupRestore from "~icons/mdi/backup-restore";
+import MdiImageSizeSelectActual from "~icons/mdi/image-size-select-actual";
+import MdiImageSizeSelectLarge from "~icons/mdi/image-size-select-large";
+import MdiImageSizeSelectSmall from "~icons/mdi/image-size-select-small";
+import { useResizeObserver } from "@vueuse/core";
+
+const props = defineProps<{
+  editor: Editor;
+  isActive: ({ editor }: { editor: Editor }) => boolean;
+  visible?: ({ editor }: { editor: Editor }) => boolean;
+  icon?: Component;
+  title?: string;
+  action?: ({ editor }: { editor: Editor }) => void;
+}>();
+
+const nodeDom = computed(() => {
+  const nodeDomParent = props.editor.view.nodeDOM(
+    props.editor.state.selection.from
+  ) as HTMLElement;
+  if (nodeDomParent && nodeDomParent.hasChildNodes()) {
+    return nodeDomParent.childNodes[0] as HTMLElement;
+  }
+  return undefined;
+});
+
+const width = computed({
+  get: () => {
+    return props.editor.getAttributes(Image.name).width;
+  },
+  set: (value: string) => {
+    handleSetSize(value, height.value);
+  },
+});
+
+const height = computed({
+  get: () => {
+    return props.editor.getAttributes(Image.name).height;
+  },
+  set: (value: string) => {
+    handleSetSize(width.value, value);
+  },
+});
+
+let mounted = false;
+const imgScale = ref<number>(0);
+
+watch(nodeDom, () => {
+  resetResizeObserver();
+});
+
+const reuseResizeObserver = () => {
+  let init = true;
+  return useResizeObserver(
+    nodeDom.value,
+    (entries) => {
+      // Skip first call
+      if (!mounted) {
+        mounted = true;
+        return;
+      }
+      const entry = entries[0];
+      const { width: w, height: h } = entry.contentRect;
+      if (init) {
+        imgScale.value = parseFloat((h / w).toFixed(2));
+        init = false;
+        return;
+      }
+      props.editor
+        .chain()
+        .updateAttributes(Image.name, {
+          width: w + "px",
+          height: w * imgScale.value + "px",
+        })
+        .setNodeSelection(props.editor.state.selection.from)
+        .focus()
+        .run();
+    },
+    { box: "border-box" }
+  );
+};
+
+let resizeObserver = reuseResizeObserver();
+
+window.addEventListener("resize", resetResizeObserver);
+
+onUnmounted(() => {
+  window.removeEventListener("resize", resetResizeObserver);
+});
+
+function resetResizeObserver() {
+  resizeObserver.stop();
+  resizeObserver = reuseResizeObserver();
+}
+
+function handleSetSize(width?: string, height?: string) {
+  resizeObserver.stop();
+  props.editor
+    .chain()
+    .updateAttributes(Image.name, { width, height })
+    .setNodeSelection(props.editor.state.selection.from)
+    .focus()
+    .run();
+  resizeObserver = reuseResizeObserver();
+}
+</script>
+
+<template>
+  <BlockActionInput
+    v-model.lazy.trim="width"
+    :tooltip="i18n.global.t('editor.common.tooltip.custom_width_input')"
+  />
+
+  <BlockActionInput
+    v-model.lazy.trim="height"
+    :tooltip="i18n.global.t('editor.common.tooltip.custom_height_input')"
+  />
+
+  <BlockActionSeparator />
+
+  <BlockActionButton
+    :tooltip="i18n.global.t('editor.extensions.image.small_size')"
+    :selected="editor.getAttributes(Image.name).width === '25%'"
+    @click="handleSetSize('25%', 'auto')"
+  >
+    <template #icon>
+      <MdiImageSizeSelectSmall />
+    </template>
+  </BlockActionButton>
+
+  <BlockActionButton
+    :tooltip="i18n.global.t('editor.extensions.image.medium_size')"
+    :selected="editor.getAttributes(Image.name).width === '50%'"
+    @click="handleSetSize('50%', 'auto')"
+  >
+    <template #icon>
+      <MdiImageSizeSelectLarge />
+    </template>
+  </BlockActionButton>
+
+  <BlockActionButton
+    :tooltip="i18n.global.t('editor.extensions.image.large_size')"
+    :selected="editor.getAttributes(Image.name).width === '100%'"
+    @click="handleSetSize('100%', '100%')"
+  >
+    <template #icon>
+      <MdiImageSizeSelectActual />
+    </template>
+  </BlockActionButton>
+
+  <BlockActionButton
+    :tooltip="i18n.global.t('editor.extensions.image.restore_size')"
+    @click="handleSetSize(undefined, undefined)"
+  >
+    <template #icon>
+      <MdiBackupRestore />
+    </template>
+  </BlockActionButton>
+
+  <BlockActionSeparator />
+</template>
diff --git a/packages/editor/src/extensions/image/ImageView.vue b/packages/editor/src/extensions/image/ImageView.vue
index 047033a..468cfd0 100644
--- a/packages/editor/src/extensions/image/ImageView.vue
+++ b/packages/editor/src/extensions/image/ImageView.vue
@@ -1,27 +1,10 @@
 <script lang="ts" setup>
-import BlockActionButton from "@/components/block/BlockActionButton.vue";
-import BlockActionInput from "@/components/block/BlockActionInput.vue";
-import BlockActionSeparator from "@/components/block/BlockActionSeparator.vue";
-import BlockCard from "@/components/block/BlockCard.vue";
 import { i18n } from "@/locales";
 import { Editor, Node, NodeViewWrapper } from "@tiptap/vue-3";
 import { useResizeObserver } from "@vueuse/core";
-import { Dropdown as VDropdown } from "floating-vue";
 import type { Node as ProseMirrorNode } from "prosemirror-model";
 import type { Decoration } from "prosemirror-view";
-import { computed, onMounted, onUnmounted, ref } from "vue";
-import MdiBackupRestore from "~icons/mdi/backup-restore";
-import MdiFormatAlignCenter from "~icons/mdi/format-align-center";
-import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
-import MdiFormatAlignLeft from "~icons/mdi/format-align-left";
-import MdiFormatAlignRight from "~icons/mdi/format-align-right";
-import MdiImageSizeSelectActual from "~icons/mdi/image-size-select-actual";
-import MdiImageSizeSelectLarge from "~icons/mdi/image-size-select-large";
-import MdiImageSizeSelectSmall from "~icons/mdi/image-size-select-small";
-import MdiLinkVariant from "~icons/mdi/link-variant";
-import MdiShare from "~icons/mdi/share";
-import MdiTextBoxEditOutline from "~icons/mdi/text-box-edit-outline";
-
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 const props = defineProps<{
   editor: Editor;
   node: ProseMirrorNode;
@@ -33,14 +16,14 @@ const props = defineProps<{
   deleteNode: () => void;
 }>();
 
-const imgScale = ref<number>(0);
-
 const src = computed({
   get: () => {
     return props.node?.attrs.src;
   },
   set: (src: string) => {
-    props.updateAttributes({ src: src });
+    props.updateAttributes({
+      src: src,
+    });
   },
 });
 
@@ -53,82 +36,10 @@ const alt = computed({
   },
 });
 
-const width = computed({
-  get: () => {
-    return props.node?.attrs.width;
-  },
-  set: (value: string) => {
-    handleSetSize(value, height.value);
-  },
-});
-
-const height = computed({
-  get: () => {
-    return props.node?.attrs.height;
-  },
-  set: (value: string) => {
-    handleSetSize(width.value, value);
-  },
-});
-
-const resizeRef = ref<HTMLElement>();
-
-let mounted = false;
-
-const reuseResizeObserver = () => {
-  let init = true;
-  return useResizeObserver(
-    resizeRef,
-    (entries) => {
-      // Skip first call
-      if (!mounted) {
-        mounted = true;
-        return;
-      }
-      const entry = entries[0];
-      const { width: w, height: h } = entry.contentRect;
-      if (init) {
-        imgScale.value = parseFloat((h / w).toFixed(2));
-        init = false;
-        return;
-      }
-      props.updateAttributes({
-        width: w + "px",
-        height: w * imgScale.value + "px",
-      });
-    },
-    { box: "border-box" }
-  );
-};
-
-let resizeObserver = reuseResizeObserver();
-
-window.addEventListener("resize", resetResizeObserver);
-
-onUnmounted(() => {
-  window.removeEventListener("resize", resetResizeObserver);
-});
-
-function resetResizeObserver() {
-  resizeObserver.stop();
-  resizeObserver = reuseResizeObserver();
-}
-
-function handleSetSize(width?: string, height?: string) {
-  resizeObserver.stop();
-  props.updateAttributes({ width, height });
-  props.editor.chain().focus().setNodeSelection(props.getPos()).run();
-  resizeObserver = reuseResizeObserver();
-}
-
 function handleSetFocus() {
   props.editor.commands.setNodeSelection(props.getPos());
 }
 
-function handleOpenLink() {
-  window.open(src.value, "_blank");
-}
-
 const inputRef = ref();
 onMounted(() => {
   if (!src.value) {
@@ -139,189 +50,34 @@ onMounted(() => {
 
 <template>
   <node-view-wrapper as="div">
-    <block-card
-      :selected="selected"
-      :editor="editor"
-      :delete-node="deleteNode"
-      :get-pos="getPos"
+    <div v-if="!src" class="p-1.5 w-full">
+      <input
+        ref="inputRef"
+        v-model.lazy="src"
+        class="block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
+        :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
+        tabindex="-1"
+        @focus="handleSetFocus"
+      />
+    </div>
+    <div
+      v-else
+      ref="resizeRef"
+      class="resize-x inline-block overflow-hidden text-center relative rounded-md"
+      :class="{
+        'ring-2 rounded': selected,
+      }"
+      :style="{
+        width: node.attrs.width,
+        height: node.attrs.height,
+      }"
     >
-      <template #content>
-        <div v-if="!src" class="p-1.5 w-full">
-          <input
-            ref="inputRef"
-            v-model.lazy="src"
-            class="block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
-            :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
-            tabindex="-1"
-            @focus="handleSetFocus"
-          />
-        </div>
-        <div
-          v-else
-          ref="resizeRef"
-          class="resize-x inline-block overflow-hidden text-center relative rounded-md"
-          :class="{
-            'ring-2 rounded': selected,
-          }"
-          :style="{
-            width: node.attrs.width,
-            height: node.attrs.height,
-          }"
-        >
-          <img
-            :src="src"
-            :title="node.attrs.title"
-            :alt="alt"
-            class="w-full h-full"
-          />
-        </div>
-      </template>
-      <template #actions>
-        <BlockActionInput
-          v-model.lazy.trim="width"
-          :tooltip="i18n.global.t('editor.common.tooltip.custom_width_input')"
-        />
-
-        <BlockActionInput
-          v-model.lazy.trim="height"
-          :tooltip="i18n.global.t('editor.common.tooltip.custom_height_input')"
-        />
-
-        <BlockActionSeparator />
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.extensions.image.small_size')"
-          :selected="node.attrs.width === '25%'"
-          @click="handleSetSize('25%', 'auto')"
-        >
-          <template #icon>
-            <MdiImageSizeSelectSmall />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.extensions.image.medium_size')"
-          :selected="node.attrs.width === '50%'"
-          @click="handleSetSize('50%', 'auto')"
-        >
-          <template #icon>
-            <MdiImageSizeSelectLarge />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.extensions.image.large_size')"
-          :selected="node.attrs.width === '100%'"
-          @click="handleSetSize('100%', '100%')"
-        >
-          <template #icon>
-            <MdiImageSizeSelectActual />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.extensions.image.restore_size')"
-          @click="handleSetSize(undefined, undefined)"
-        >
-          <template #icon>
-            <MdiBackupRestore />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionSeparator />
-
-        <BlockActionButton
-          :selected="editor.isActive({ textAlign: 'left' })"
-          @click="editor.chain().focus().setTextAlign('left').run()"
-        >
-          <template #icon>
-            <MdiFormatAlignLeft />
-          </template>
-        </BlockActionButton>
-        <BlockActionButton
-          :selected="editor.isActive({ textAlign: 'center' })"
-          @click="editor.chain().focus().setTextAlign('center').run()"
-        >
-          <template #icon>
-            <MdiFormatAlignCenter />
-          </template>
-        </BlockActionButton>
-        <BlockActionButton
-          :selected="editor.isActive({ textAlign: 'right' })"
-          @click="editor.chain().focus().setTextAlign('right').run()"
-        >
-          <template #icon>
-            <MdiFormatAlignRight />
-          </template>
-        </BlockActionButton>
-        <BlockActionButton
-          :selected="editor.isActive({ textAlign: 'justify' })"
-          @click="editor.chain().focus().setTextAlign('justify').run()"
-        >
-          <template #icon>
-            <MdiFormatAlignJustify />
-          </template>
-        </BlockActionButton>
-
-        <BlockActionSeparator />
-
-        <VDropdown class="inline-flex" :triggers="['click']" :distance="10">
-          <BlockActionButton
-            :tooltip="i18n.global.t('editor.extensions.image.edit_link')"
-          >
-            <template #icon>
-              <MdiLinkVariant />
-            </template>
-          </BlockActionButton>
-
-          <template #popper>
-            <div
-              class="relative rounded-md bg-white overflow-hidden drop-shadow w-96 p-1 max-h-72 overflow-y-auto"
-            >
-              <input
-                v-model.lazy="src"
-                :placeholder="
-                  i18n.global.t('editor.common.placeholder.link_input')
-                "
-                class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
-              />
-            </div>
-          </template>
-        </VDropdown>
-
-        <BlockActionButton
-          :tooltip="i18n.global.t('editor.common.tooltip.open_link')"
-          @click="handleOpenLink"
-        >
-          <template #icon>
-            <MdiShare />
-          </template>
-        </BlockActionButton>
-
-        <VDropdown class="inline-flex" :triggers="['click']" :distance="10">
-          <BlockActionButton
-            :tooltip="i18n.global.t('editor.extensions.image.edit_alt')"
-          >
-            <template #icon>
-              <MdiTextBoxEditOutline />
-            </template>
-          </BlockActionButton>
-
-          <template #popper>
-            <div
-              class="relative rounded-md bg-white overflow-hidden drop-shadow w-96 p-1 max-h-72 overflow-y-auto"
-            >
-              <input
-                v-model.lazy="alt"
-                :placeholder="
-                  i18n.global.t('editor.common.placeholder.alt_input')
-                "
-                class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
-              />
-            </div>
-          </template>
-        </VDropdown>
-      </template>
-    </block-card>
+      <img
+        :src="src"
+        :title="node.attrs.title"
+        :alt="alt"
+        class="w-full h-full"
+      />
+    </div>
   </node-view-wrapper>
 </template>
diff --git a/packages/editor/src/extensions/image/index.ts b/packages/editor/src/extensions/image/index.ts
index ac7a597..86879a1 100644
--- a/packages/editor/src/extensions/image/index.ts
+++ b/packages/editor/src/extensions/image/index.ts
@@ -1,5 +1,5 @@
 import TiptapImage from "@tiptap/extension-image";
-import { VueNodeViewRenderer } from "@tiptap/vue-3";
+import { VueNodeViewRenderer, isActive } from "@tiptap/vue-3";
 import ImageView from "./ImageView.vue";
 import type { ImageOptions } from "@tiptap/extension-image";
 import type { ExtensionOptions } from "@/types";
@@ -8,6 +8,20 @@ import ToolboxItem from "@/components/toolbox/ToolboxItem.vue";
 import MdiFileImageBox from "~icons/mdi/file-image-box";
 import { markRaw } from "vue";
 import { i18n } from "@/locales";
+import type { EditorState } from "prosemirror-state";
+import BubbleItemImageSize from "./BubbleItemImageSize.vue";
+import BubbleItemImageAlt from "./BubbleItemImageAlt.vue";
+import BubbleItemVideoLink from "./BubbleItemImageLink.vue";
+import { BlockActionSeparator } from "@/components";
+import MdiFormatAlignLeft from "~icons/mdi/format-align-left";
+import MdiFormatAlignCenter from "~icons/mdi/format-align-center";
+import MdiFormatAlignRight from "~icons/mdi/format-align-right";
+import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
+import MdiLinkVariant from "~icons/mdi/link-variant";
+import MdiShare from "~icons/mdi/share";
+import MdiTextBoxEditOutline from "~icons/mdi/text-box-edit-outline";
+import MdiDeleteForeverOutline from "~icons/mdi/delete-forever-outline?color=red";
+import { deleteNode } from "@/utils";
 
 const Image = TiptapImage.extend<ExtensionOptions & ImageOptions>({
   inline() {
@@ -94,8 +108,106 @@ const Image = TiptapImage.extend<ExtensionOptions & ImageOptions>({
           },
         ];
       },
+      getBubbleMenu({ editor }: { editor: Editor }) {
+        return {
+          pluginKey: "imageBubbleMenu",
+          shouldShow: ({ state }: { state: EditorState }): boolean => {
+            return isActive(state, Image.name);
+          },
+          items: [
+            {
+              priority: 10,
+              component: markRaw(BubbleItemImageSize),
+            },
+            {
+              priority: 20,
+              props: {
+                isActive: () => editor.isActive({ textAlign: "left" }),
+                icon: markRaw(MdiFormatAlignLeft),
+                action: () => handleSetTextAlign(editor, "left"),
+              },
+            },
+            {
+              priority: 30,
+              props: {
+                isActive: () => editor.isActive({ textAlign: "center" }),
+                icon: markRaw(MdiFormatAlignCenter),
+                action: () => handleSetTextAlign(editor, "center"),
+              },
+            },
+            {
+              priority: 40,
+              props: {
+                isActive: () => editor.isActive({ textAlign: "right" }),
+                icon: markRaw(MdiFormatAlignRight),
+                action: () => handleSetTextAlign(editor, "right"),
+              },
+            },
+            {
+              priority: 50,
+              props: {
+                isActive: () => editor.isActive({ textAlign: "justify" }),
+                icon: markRaw(MdiFormatAlignJustify),
+                action: () => handleSetTextAlign(editor, "justify"),
+              },
+            },
+            {
+              priority: 60,
+              component: markRaw(BlockActionSeparator),
+            },
+            {
+              priority: 70,
+              props: {
+                icon: markRaw(MdiLinkVariant),
+                title: i18n.global.t("editor.common.button.edit_link"),
+                action: () => {
+                  return markRaw(BubbleItemVideoLink);
+                },
+              },
+            },
+            {
+              priority: 80,
+              props: {
+                icon: markRaw(MdiShare),
+                title: i18n.global.t("editor.common.tooltip.open_link"),
+                action: () =>
+                  window.open(editor.getAttributes(Image.name).src, "_blank"),
+              },
+            },
+            {
+              priority: 90,
+              props: {
+                icon: markRaw(MdiTextBoxEditOutline),
+                title: i18n.global.t("editor.extensions.image.edit_alt"),
+                action: () => {
+                  return markRaw(BubbleItemImageAlt);
+                },
+              },
+            },
+            {
+              priority: 100,
+              component: markRaw(BlockActionSeparator),
+            },
+            {
+              priority: 110,
+              props: {
+                icon: markRaw(MdiDeleteForeverOutline),
+                title: i18n.global.t("editor.common.button.delete"),
+                action: ({ editor }) => deleteNode(Image.name, editor),
+              },
+            },
+          ],
+        };
+      },
     };
   },
 });
 
+const handleSetTextAlign = (
+  editor: Editor,
+  align: "left" | "center" | "right" | "justify"
+) => {
+  editor.chain().focus().setTextAlign(align).run();
+};
+
 export default Image;

From cc484f2ea30db4060d100650ac5b6653b4123678 Mon Sep 17 00:00:00 2001
From: LIlGG <1103069291@qq.com>
Date: Fri, 1 Sep 2023 17:07:16 +0800
Subject: [PATCH 07/11] wip: refactor the bubble menu.

---
 packages/editor/src/extensions/image/ImageView.vue | 3 +--
 packages/editor/src/types/index.ts                 | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/editor/src/extensions/image/ImageView.vue b/packages/editor/src/extensions/image/ImageView.vue
index 468cfd0..0014de9 100644
--- a/packages/editor/src/extensions/image/ImageView.vue
+++ b/packages/editor/src/extensions/image/ImageView.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { i18n } from "@/locales";
 import { Editor, Node, NodeViewWrapper } from "@tiptap/vue-3";
-import { useResizeObserver } from "@vueuse/core";
 import type { Node as ProseMirrorNode } from "prosemirror-model";
 import type { Decoration } from "prosemirror-view";
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, onMounted, ref } from "vue";
 const props = defineProps<{
   editor: Editor;
   node: ProseMirrorNode;
diff --git a/packages/editor/src/types/index.ts b/packages/editor/src/types/index.ts
index 10df984..8fd620e 100644
--- a/packages/editor/src/types/index.ts
+++ b/packages/editor/src/types/index.ts
@@ -2,7 +2,6 @@ import type { Editor, Range } from "@tiptap/core";
 import type { EditorState } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
 import type { Component } from "vue";
-import default from '../../vite.config';
 export interface ToolbarItem {
   priority: number;
   component: Component;

From 9f3a865467df297a00bf3e5a5ca4b1ad20eabd76 Mon Sep 17 00:00:00 2001
From: LIlGG <1103069291@qq.com>
Date: Fri, 1 Sep 2023 17:15:19 +0800
Subject: [PATCH 08/11] wip: refactor the bubble menu

---
 .../editor/src/components/bubble/TextBubbleMenu.ts     | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/editor/src/components/bubble/TextBubbleMenu.ts b/packages/editor/src/components/bubble/TextBubbleMenu.ts
index 53f4a93..79dcaad 100644
--- a/packages/editor/src/components/bubble/TextBubbleMenu.ts
+++ b/packages/editor/src/components/bubble/TextBubbleMenu.ts
@@ -23,6 +23,7 @@ import MdiFormatUnderline from "~icons/mdi/format-underline";
 import { isActive, isTextSelection } from "@tiptap/core";
 import type { EditorState } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
+import MdiFormatBold from "~icons/mdi/format-bold";
 
 const OTHER_BUBBLE_MENU_TYPES = ["audio", "video", "image", "iframe"];
 
@@ -58,6 +59,15 @@ export const defaultTextBubbleMenu: NodeBubbleMenu = {
   },
   defaultAnimation: false,
   items: [
+    {
+      priority: 10,
+      props: {
+        isActive: ({ editor }) => editor.isActive("bold"),
+        icon: markRaw(MdiFormatBold),
+        title: i18n.global.t("editor.common.bold"),
+        action: ({ editor }) => editor.chain().focus().toggleBold().run(),
+      },
+    },
     {
       priority: 20,
       props: {

From c1fd8ac035d051f61c25b3c3f4b2a75e943e97d4 Mon Sep 17 00:00:00 2001
From: LIlGG <1103069291@qq.com>
Date: Mon, 4 Sep 2023 11:48:46 +0800
Subject: [PATCH 09/11] refactor the bubble menu

---
 docs/extension.md                             |  92 ++++--
 .../src/components/EditorBubbleMenu.vue       |  10 +-
 .../src/components/bubble/BubbleMenuPlugin.ts |   5 +-
 .../src/components/bubble/TextBubbleMenu.ts   | 237 ----------------
 packages/editor/src/components/index.ts       |   2 +-
 packages/editor/src/extensions/index.ts       |   2 +-
 packages/editor/src/extensions/text/index.ts  | 262 ++++++++++++++++++
 7 files changed, 347 insertions(+), 263 deletions(-)
 delete mode 100644 packages/editor/src/components/bubble/TextBubbleMenu.ts

diff --git a/docs/extension.md b/docs/extension.md
index 20288bf..344a445 100644
--- a/docs/extension.md
+++ b/docs/extension.md
@@ -14,7 +14,7 @@
       getToolbarItems({ editor }: { editor: Editor }) {
         return []
       },
-      getBubbleItems({ editor }: { editor: Editor }) {
+      getBubbleMenu({ editor }: { editor: Editor }) {
         return []
       },
       getCommandMenuItems() {
@@ -31,7 +31,7 @@
 其中对象的属性分别对应了工具栏的三个部分，分别是：
 
 - `getToolbarItems`：工具栏
-- `getBubbleItems`：悬浮工具栏
+- `getBubbleMenu`：悬浮工具栏
 - `getCommandMenuItems`：Slash Command
 - `getToolboxItems`：工具箱（Toolbox）
 
@@ -53,17 +53,36 @@ export interface ToolbarItem {
   children?: ToolbarItem[];
 }
 
-// 悬浮工具栏
+// 悬浮菜单
+export interface NodeBubbleMenu {
+  pluginKey?: string;
+  editor?: Editor;
+  shouldShow: (props: {
+    editor: Editor;
+    node?: HTMLElement;
+    view?: EditorView;
+    state?: EditorState;
+    oldState?: EditorState;
+    from?: number;
+    to?: number;
+  }) => boolean;
+  tippyOptions?: Record<string, unknown>;
+  getRenderContainer?: (node: HTMLElement) => HTMLElement;
+  defaultAnimation?: boolean;
+  component?: Component;
+  items?: BubbleItem[];
+}
+
 export interface BubbleItem {
   priority: number;
-  component: Component;
+  component?: Component;
   props: {
-    editor: Editor;
-    isActive: boolean;
-    visible?: boolean;
+    isActive: ({ editor }: { editor: Editor }) => boolean;
+    visible?: ({ editor }: { editor: Editor }) => boolean;
     icon?: Component;
+    iconStyle?: string;
     title?: string;
-    action?: () => void;
+    action?: ({ editor }: { editor: Editor }) => any;
   };
 }
 
@@ -245,14 +264,13 @@ const Video = Node.create<ExtensionOptions>({
             isActive: editor.isActive("video"),
             icon: markRaw(MdiVideo),
             title: "添加视频",
-            action: () => editor
-              .chain()
-              .focus()
-              .deleteRange(range)
-              .insertContent([
-                { type: "video", attrs: { src: "" } },
-              ])
-              .run(),
+            action: () =>
+              editor
+                .chain()
+                .focus()
+                .deleteRange(range)
+                .insertContent([{ type: "video", attrs: { src: "" } }])
+                .run(),
           },
         };
       },
@@ -267,13 +285,49 @@ const Video = Node.create<ExtensionOptions>({
               .chain()
               .focus()
               .deleteRange(range)
-              .insertContent([
-                { type: "video", attrs: { src: "" } },
-              ])
+              .insertContent([{ type: "video", attrs: { src: "" } }])
               .run();
           },
         };
       },
+      getBubbleMenu({ editor }: { editor: Editor }) {
+        return {
+          pluginKey: "videoBubbleMenu",
+          shouldShow: ({ state }: { state: EditorState }) => {
+            return isActive(state, Video.name);
+          },
+          items: [
+            {
+              priority: 10,
+              props: {
+                isActive: () => {
+                  editor.getAttributes(Video.name).controls;
+                },
+                icon: markRaw(
+                  editor.getAttributes(Video.name).controls
+                    ? MdiCogPlay
+                    : MdiCogPlayOutline
+                ),
+                action: () => {
+                  return editor
+                    .chain()
+                    .updateAttributes(Video.name, {
+                      controls: editor.getAttributes(Video.name).controls
+                        ? null
+                        : true,
+                    })
+                    .setNodeSelection(editor.state.selection.from)
+                    .focus()
+                    .run();
+                },
+                title: editor.getAttributes(Video.name).controls
+                  ? "隐藏控制面板"
+                  : "显示控制面板",
+              },
+            },
+          ],
+        };
+      },
     };
   },
 });
diff --git a/packages/editor/src/components/EditorBubbleMenu.vue b/packages/editor/src/components/EditorBubbleMenu.vue
index 731e5bf..849029b 100644
--- a/packages/editor/src/components/EditorBubbleMenu.vue
+++ b/packages/editor/src/components/EditorBubbleMenu.vue
@@ -4,7 +4,6 @@ import type { Editor, AnyExtension } from "@tiptap/core";
 import BubbleMenu from "@/components/bubble/BubbleMenu.vue";
 import type { NodeBubbleMenu } from "@/types";
 import BubbleItem from "@/components/bubble/BubbleItem.vue";
-import { defaultTextBubbleMenu } from "@/components/bubble/TextBubbleMenu";
 import type { EditorView } from "prosemirror-view";
 import type { EditorState } from "prosemirror-state";
 
@@ -37,7 +36,6 @@ const getBubbleMenuFromExtensions = () => {
 
       return nodeBubbleMenu;
     })
-    .concat([defaultTextBubbleMenu])
     .filter(Boolean) as NodeBubbleMenu[];
 };
 
@@ -74,7 +72,7 @@ const shouldShow = (
     :default-animation="bubbleMenu.defaultAnimation"
   >
     <div
-      class="bg-white flex items-center rounded p-1 border drop-shadow space-x-0.5"
+      class="bubble-menu bg-white flex items-center rounded p-1 border drop-shadow space-x-0.5"
     >
       <template v-if="bubbleMenu.items">
         <template
@@ -97,3 +95,9 @@ const shouldShow = (
     </div>
   </bubble-menu>
 </template>
+<style scoped>
+.bubble-menu {
+  max-width: calc(100vw - 30px);
+  overflow-x: auto;
+}
+</style>
diff --git a/packages/editor/src/components/bubble/BubbleMenuPlugin.ts b/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
index 13b0acf..b19a564 100644
--- a/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
+++ b/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
@@ -248,8 +248,8 @@ export class BubbleMenuView {
             instance?.popperInstance?.state?.modifiersData?.popperOffsets?.y ??
             0;
           const currentHeight =
-            instance?.popperInstance?.state?.rects?.popper?.height ?? 40;
-
+            instance?.popperInstance?.state?.rects?.popper?.height ?? 10;
+          console.log(instance);
           if (Math.abs(prevY - currentY) <= currentHeight) {
             prev += currentHeight;
           }
@@ -257,6 +257,7 @@ export class BubbleMenuView {
           return prev;
         }, 0)
       : offset?.[1] ?? 10;
+    console.log(offsetX, offsetY);
     this.tippy?.setProps({
       offset: [offsetX, offsetY],
       placement,
diff --git a/packages/editor/src/components/bubble/TextBubbleMenu.ts b/packages/editor/src/components/bubble/TextBubbleMenu.ts
deleted file mode 100644
index 79dcaad..0000000
--- a/packages/editor/src/components/bubble/TextBubbleMenu.ts
+++ /dev/null
@@ -1,237 +0,0 @@
-import { i18n } from "@/locales";
-import type { NodeBubbleMenu } from "@/types";
-import { markRaw } from "vue";
-import ColorBubbleItem from "@/extensions/color/ColorBubbleItem.vue";
-import HighlightBubbleItem from "@/extensions/highlight/HighlightBubbleItem.vue";
-import LinkBubbleButton from "@/extensions/link/LinkBubbleButton.vue";
-import MdiFormatQuoteOpen from "~icons/mdi/format-quote-open";
-import MdiCodeTags from "~icons/mdi/code-tags";
-import MdiCodeBracesBox from "~icons/mdi/code-braces-box";
-import MdiFormatColor from "~icons/mdi/format-color";
-import MdiFormatColorHighlight from "~icons/mdi/format-color-highlight";
-import MdiFormatItalic from "~icons/mdi/format-italic";
-import MdiLinkVariantOff from "~icons/mdi/link-variant-off";
-import MdiShare from "~icons/mdi/share";
-import MdiFormatStrikethrough from "~icons/mdi/format-strikethrough";
-import MdiFormatSubscript from "~icons/mdi/format-subscript";
-import MdiFormatSuperscript from "~icons/mdi/format-superscript";
-import MdiFormatAlignLeft from "~icons/mdi/format-align-left";
-import MdiFormatAlignCenter from "~icons/mdi/format-align-center";
-import MdiFormatAlignRight from "~icons/mdi/format-align-right";
-import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
-import MdiFormatUnderline from "~icons/mdi/format-underline";
-import { isActive, isTextSelection } from "@tiptap/core";
-import type { EditorState } from "prosemirror-state";
-import type { EditorView } from "prosemirror-view";
-import MdiFormatBold from "~icons/mdi/format-bold";
-
-const OTHER_BUBBLE_MENU_TYPES = ["audio", "video", "image", "iframe"];
-
-export const defaultTextBubbleMenu: NodeBubbleMenu = {
-  pluginKey: "textBubbleMenu",
-  shouldShow: ({ view, state, from, to }) => {
-    const { doc, selection } = state as EditorState;
-    const { empty } = selection;
-    if (empty) {
-      return false;
-    }
-
-    if (
-      OTHER_BUBBLE_MENU_TYPES.some((type) =>
-        isActive(state as EditorState, type)
-      )
-    ) {
-      return false;
-    }
-
-    const isEmptyTextBlock =
-      !doc.textBetween(from || 0, to || 0).length && isTextSelection(selection);
-    if (isEmptyTextBlock) {
-      return false;
-    }
-
-    const hasEditorFocus = (view as EditorView).hasFocus();
-    if (!hasEditorFocus) {
-      return false;
-    }
-
-    return true;
-  },
-  defaultAnimation: false,
-  items: [
-    {
-      priority: 10,
-      props: {
-        isActive: ({ editor }) => editor.isActive("bold"),
-        icon: markRaw(MdiFormatBold),
-        title: i18n.global.t("editor.common.bold"),
-        action: ({ editor }) => editor.chain().focus().toggleBold().run(),
-      },
-    },
-    {
-      priority: 20,
-      props: {
-        isActive: ({ editor }) => editor.isActive("italic"),
-        icon: markRaw(MdiFormatItalic),
-        title: i18n.global.t("editor.common.italic"),
-        action: ({ editor }) => editor.chain().focus().toggleItalic().run(),
-      },
-    },
-    {
-      priority: 30,
-      props: {
-        isActive: ({ editor }) => editor.isActive("underline"),
-        icon: markRaw(MdiFormatUnderline),
-        title: i18n.global.t("editor.common.underline"),
-        action: ({ editor }) => editor.chain().focus().toggleUnderline().run(),
-      },
-    },
-    {
-      priority: 40,
-      props: {
-        isActive: ({ editor }) => editor.isActive("strike"),
-        icon: markRaw(MdiFormatStrikethrough),
-        title: i18n.global.t("editor.common.strike"),
-        action: ({ editor }) => editor.chain().focus().toggleStrike().run(),
-      },
-    },
-    {
-      priority: 50,
-      component: markRaw(HighlightBubbleItem),
-      props: {
-        isActive: ({ editor }) => editor.isActive("highlight"),
-        icon: markRaw(MdiFormatColorHighlight),
-        title: i18n.global.t("editor.common.highlight"),
-      },
-    },
-    {
-      priority: 51,
-      component: markRaw(ColorBubbleItem),
-      props: {
-        isActive: ({ editor }) => editor.isActive("color"),
-        icon: markRaw(MdiFormatColor),
-        title: i18n.global.t("editor.common.color"),
-      },
-    },
-    {
-      priority: 60,
-      props: {
-        isActive: ({ editor }) => editor.isActive("blockquote"),
-        icon: markRaw(MdiFormatQuoteOpen),
-        title: i18n.global.t("editor.common.quote"),
-        action: ({ editor }) => {
-          return editor.commands.toggleBlockquote();
-        },
-      },
-    },
-    {
-      priority: 80,
-      props: {
-        isActive: ({ editor }) => editor.isActive("code"),
-        icon: markRaw(MdiCodeTags),
-        title: i18n.global.t("editor.common.code"),
-        action: ({ editor }) => editor.chain().focus().toggleCode().run(),
-      },
-    },
-    {
-      priority: 90,
-      props: {
-        isActive: ({ editor }) => editor.isActive("codeBlock"),
-        icon: markRaw(MdiCodeBracesBox),
-        title: i18n.global.t("editor.common.codeblock"),
-        action: ({ editor }) => editor.chain().focus().toggleCodeBlock().run(),
-      },
-    },
-    {
-      priority: 100,
-      props: {
-        isActive: ({ editor }) => editor.isActive("superscript"),
-        icon: markRaw(MdiFormatSuperscript),
-        title: i18n.global.t("editor.common.superscript"),
-        action: ({ editor }) =>
-          editor.chain().focus().toggleSuperscript().run(),
-      },
-    },
-    {
-      priority: 110,
-      props: {
-        isActive: ({ editor }) => editor.isActive("subscript"),
-        icon: markRaw(MdiFormatSubscript),
-        title: i18n.global.t("editor.common.subscript"),
-        action: ({ editor }) => editor.chain().focus().toggleSubscript().run(),
-      },
-    },
-    {
-      priority: 120,
-      props: {
-        isActive: ({ editor }) => editor.isActive({ textAlign: "left" }),
-        icon: markRaw(MdiFormatAlignLeft),
-        title: i18n.global.t("editor.common.align_left"),
-        action: ({ editor }) =>
-          editor.chain().focus().setTextAlign("left").run(),
-      },
-    },
-    {
-      priority: 130,
-      props: {
-        isActive: ({ editor }) => editor.isActive({ textAlign: "center" }),
-        icon: markRaw(MdiFormatAlignCenter),
-        title: i18n.global.t("editor.common.align_center"),
-        action: ({ editor }) =>
-          editor.chain().focus().setTextAlign("center").run(),
-      },
-    },
-    {
-      priority: 140,
-      props: {
-        isActive: ({ editor }) => editor.isActive({ textAlign: "right" }),
-        icon: markRaw(MdiFormatAlignRight),
-        title: i18n.global.t("editor.common.align_right"),
-        action: ({ editor }) =>
-          editor.chain().focus().setTextAlign("right").run(),
-      },
-    },
-    {
-      priority: 150,
-      props: {
-        isActive: ({ editor }) => editor.isActive({ textAlign: "justify" }),
-        icon: markRaw(MdiFormatAlignJustify),
-        title: i18n.global.t("editor.common.align_justify"),
-        action: ({ editor }) =>
-          editor.chain().focus().setTextAlign("justify").run(),
-      },
-    },
-    {
-      priority: 160,
-      component: markRaw(LinkBubbleButton),
-      props: {
-        isActive: ({ editor }) => editor.isActive("link"),
-      },
-    },
-    {
-      priority: 170,
-      props: {
-        isActive: () => false,
-        visible: ({ editor }) => editor.isActive("link"),
-        icon: markRaw(MdiLinkVariantOff),
-        title: i18n.global.t("editor.extensions.link.cancel_link"),
-        action: ({ editor }) => editor.commands.unsetLink(),
-      },
-    },
-    {
-      priority: 180,
-      props: {
-        isActive: () => false,
-        visible: ({ editor }) => editor.isActive("link"),
-        icon: markRaw(MdiShare),
-        title: i18n.global.t("editor.common.tooltip.open_link"),
-        action: ({ editor }) => {
-          const attrs = editor.getAttributes("link");
-          if (attrs?.href) {
-            window.open(attrs.href, "_blank");
-          }
-        },
-      },
-    },
-  ],
-};
diff --git a/packages/editor/src/components/index.ts b/packages/editor/src/components/index.ts
index 5c7cb3c..2c45d31 100644
--- a/packages/editor/src/components/index.ts
+++ b/packages/editor/src/components/index.ts
@@ -6,7 +6,7 @@ export { default as BlockCard } from "./block/BlockCard.vue";
 
 // bubble
 export { default as BubbleItem } from "./bubble/BubbleItem.vue";
-export { default as BubbleMenu } from "./bubble/BubbleMenu.vue";
+export { default as NodeBubbleMenu } from "./bubble/BubbleMenu.vue";
 
 // toolbar
 export { default as ToolbarItem } from "./toolbar/ToolbarItem.vue";
diff --git a/packages/editor/src/extensions/index.ts b/packages/editor/src/extensions/index.ts
index e1c4435..cb336fc 100644
--- a/packages/editor/src/extensions/index.ts
+++ b/packages/editor/src/extensions/index.ts
@@ -23,7 +23,6 @@ import ExtensionGapcursor from "@tiptap/extension-gapcursor";
 import ExtensionHardBreak from "@tiptap/extension-hard-break";
 import ExtensionHorizontalRule from "@tiptap/extension-horizontal-rule";
 import ExtensionDocument from "@tiptap/extension-document";
-import ExtensionText from "@tiptap/extension-text";
 import ExtensionPlaceholder from "@tiptap/extension-placeholder";
 import { i18n } from "@/locales";
 
@@ -35,6 +34,7 @@ import ExtensionVideo from "./video";
 import ExtensionAudio from "./audio";
 import ExtensionImage from "./image";
 import ExtensionIndent from "./indent";
+import ExtensionText from "./text";
 
 const allExtensions = [
   ExtensionBlockquote,
diff --git a/packages/editor/src/extensions/text/index.ts b/packages/editor/src/extensions/text/index.ts
index e69de29..2c0a106 100644
--- a/packages/editor/src/extensions/text/index.ts
+++ b/packages/editor/src/extensions/text/index.ts
@@ -0,0 +1,262 @@
+import type { ExtensionOptions } from "@/types";
+import type { Editor } from "@tiptap/core";
+import { Text as TiptapText } from "@tiptap/extension-text";
+import { markRaw } from "vue";
+import ColorBubbleItem from "@/extensions/color/ColorBubbleItem.vue";
+import HighlightBubbleItem from "@/extensions/highlight/HighlightBubbleItem.vue";
+import LinkBubbleButton from "@/extensions/link/LinkBubbleButton.vue";
+import MdiFormatQuoteOpen from "~icons/mdi/format-quote-open";
+import MdiCodeTags from "~icons/mdi/code-tags";
+import MdiCodeBracesBox from "~icons/mdi/code-braces-box";
+import MdiFormatColor from "~icons/mdi/format-color";
+import MdiFormatColorHighlight from "~icons/mdi/format-color-highlight";
+import MdiFormatItalic from "~icons/mdi/format-italic";
+import MdiLinkVariantOff from "~icons/mdi/link-variant-off";
+import MdiShare from "~icons/mdi/share";
+import MdiFormatStrikethrough from "~icons/mdi/format-strikethrough";
+import MdiFormatSubscript from "~icons/mdi/format-subscript";
+import MdiFormatSuperscript from "~icons/mdi/format-superscript";
+import MdiFormatAlignLeft from "~icons/mdi/format-align-left";
+import MdiFormatAlignCenter from "~icons/mdi/format-align-center";
+import MdiFormatAlignRight from "~icons/mdi/format-align-right";
+import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
+import MdiFormatUnderline from "~icons/mdi/format-underline";
+import { isActive, isTextSelection } from "@tiptap/core";
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import MdiFormatBold from "~icons/mdi/format-bold";
+import { i18n } from "@/locales";
+
+const OTHER_BUBBLE_MENU_TYPES = ["audio", "video", "image", "iframe"];
+
+const Text = TiptapText.extend<ExtensionOptions>({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      getBubbleMenu({ editor }: { editor: Editor }) {
+        return {
+          pluginKey: "textBubbleMenu",
+          shouldShow: ({ view, state, from, to }) => {
+            const { doc, selection } = state as EditorState;
+            const { empty } = selection;
+            if (empty) {
+              return false;
+            }
+
+            if (
+              OTHER_BUBBLE_MENU_TYPES.some((type) =>
+                isActive(state as EditorState, type)
+              )
+            ) {
+              return false;
+            }
+
+            const isEmptyTextBlock =
+              !doc.textBetween(from || 0, to || 0).length &&
+              isTextSelection(selection);
+            if (isEmptyTextBlock) {
+              return false;
+            }
+
+            const hasEditorFocus = (view as EditorView).hasFocus();
+            if (!hasEditorFocus) {
+              return false;
+            }
+
+            return true;
+          },
+          defaultAnimation: false,
+          items: [
+            {
+              priority: 10,
+              props: {
+                isActive: ({ editor }) => editor.isActive("bold"),
+                icon: markRaw(MdiFormatBold),
+                title: i18n.global.t("editor.common.bold"),
+                action: ({ editor }) =>
+                  editor.chain().focus().toggleBold().run(),
+              },
+            },
+            {
+              priority: 20,
+              props: {
+                isActive: ({ editor }) => editor.isActive("italic"),
+                icon: markRaw(MdiFormatItalic),
+                title: i18n.global.t("editor.common.italic"),
+                action: ({ editor }) =>
+                  editor.chain().focus().toggleItalic().run(),
+              },
+            },
+            {
+              priority: 30,
+              props: {
+                isActive: ({ editor }) => editor.isActive("underline"),
+                icon: markRaw(MdiFormatUnderline),
+                title: i18n.global.t("editor.common.underline"),
+                action: ({ editor }) =>
+                  editor.chain().focus().toggleUnderline().run(),
+              },
+            },
+            {
+              priority: 40,
+              props: {
+                isActive: ({ editor }) => editor.isActive("strike"),
+                icon: markRaw(MdiFormatStrikethrough),
+                title: i18n.global.t("editor.common.strike"),
+                action: ({ editor }) =>
+                  editor.chain().focus().toggleStrike().run(),
+              },
+            },
+            {
+              priority: 50,
+              component: markRaw(HighlightBubbleItem),
+              props: {
+                isActive: ({ editor }) => editor.isActive("highlight"),
+                icon: markRaw(MdiFormatColorHighlight),
+                title: i18n.global.t("editor.common.highlight"),
+              },
+            },
+            {
+              priority: 51,
+              component: markRaw(ColorBubbleItem),
+              props: {
+                isActive: ({ editor }) => editor.isActive("color"),
+                icon: markRaw(MdiFormatColor),
+                title: i18n.global.t("editor.common.color"),
+              },
+            },
+            {
+              priority: 60,
+              props: {
+                isActive: ({ editor }) => editor.isActive("blockquote"),
+                icon: markRaw(MdiFormatQuoteOpen),
+                title: i18n.global.t("editor.common.quote"),
+                action: ({ editor }) => {
+                  return editor.commands.toggleBlockquote();
+                },
+              },
+            },
+            {
+              priority: 80,
+              props: {
+                isActive: ({ editor }) => editor.isActive("code"),
+                icon: markRaw(MdiCodeTags),
+                title: i18n.global.t("editor.common.code"),
+                action: ({ editor }) =>
+                  editor.chain().focus().toggleCode().run(),
+              },
+            },
+            {
+              priority: 90,
+              props: {
+                isActive: ({ editor }) => editor.isActive("codeBlock"),
+                icon: markRaw(MdiCodeBracesBox),
+                title: i18n.global.t("editor.common.codeblock"),
+                action: ({ editor }) =>
+                  editor.chain().focus().toggleCodeBlock().run(),
+              },
+            },
+            {
+              priority: 100,
+              props: {
+                isActive: ({ editor }) => editor.isActive("superscript"),
+                icon: markRaw(MdiFormatSuperscript),
+                title: i18n.global.t("editor.common.superscript"),
+                action: ({ editor }) =>
+                  editor.chain().focus().toggleSuperscript().run(),
+              },
+            },
+            {
+              priority: 110,
+              props: {
+                isActive: ({ editor }) => editor.isActive("subscript"),
+                icon: markRaw(MdiFormatSubscript),
+                title: i18n.global.t("editor.common.subscript"),
+                action: ({ editor }) =>
+                  editor.chain().focus().toggleSubscript().run(),
+              },
+            },
+            {
+              priority: 120,
+              props: {
+                isActive: ({ editor }) =>
+                  editor.isActive({ textAlign: "left" }),
+                icon: markRaw(MdiFormatAlignLeft),
+                title: i18n.global.t("editor.common.align_left"),
+                action: ({ editor }) =>
+                  editor.chain().focus().setTextAlign("left").run(),
+              },
+            },
+            {
+              priority: 130,
+              props: {
+                isActive: ({ editor }) =>
+                  editor.isActive({ textAlign: "center" }),
+                icon: markRaw(MdiFormatAlignCenter),
+                title: i18n.global.t("editor.common.align_center"),
+                action: ({ editor }) =>
+                  editor.chain().focus().setTextAlign("center").run(),
+              },
+            },
+            {
+              priority: 140,
+              props: {
+                isActive: ({ editor }) =>
+                  editor.isActive({ textAlign: "right" }),
+                icon: markRaw(MdiFormatAlignRight),
+                title: i18n.global.t("editor.common.align_right"),
+                action: ({ editor }) =>
+                  editor.chain().focus().setTextAlign("right").run(),
+              },
+            },
+            {
+              priority: 150,
+              props: {
+                isActive: ({ editor }) =>
+                  editor.isActive({ textAlign: "justify" }),
+                icon: markRaw(MdiFormatAlignJustify),
+                title: i18n.global.t("editor.common.align_justify"),
+                action: ({ editor }) =>
+                  editor.chain().focus().setTextAlign("justify").run(),
+              },
+            },
+            {
+              priority: 160,
+              component: markRaw(LinkBubbleButton),
+              props: {
+                isActive: ({ editor }) => editor.isActive("link"),
+              },
+            },
+            {
+              priority: 170,
+              props: {
+                isActive: () => false,
+                visible: ({ editor }) => editor.isActive("link"),
+                icon: markRaw(MdiLinkVariantOff),
+                title: i18n.global.t("editor.extensions.link.cancel_link"),
+                action: ({ editor }) => editor.commands.unsetLink(),
+              },
+            },
+            {
+              priority: 180,
+              props: {
+                isActive: () => false,
+                visible: ({ editor }) => editor.isActive("link"),
+                icon: markRaw(MdiShare),
+                title: i18n.global.t("editor.common.tooltip.open_link"),
+                action: ({ editor }) => {
+                  const attrs = editor.getAttributes("link");
+                  if (attrs?.href) {
+                    window.open(attrs.href, "_blank");
+                  }
+                },
+              },
+            },
+          ],
+        };
+      },
+    };
+  },
+});
+
+export default Text;

From d4c0ded9dca71deddeecdb4f7c1cf33e36e77458 Mon Sep 17 00:00:00 2001
From: LIlGG <1103069291@qq.com>
Date: Mon, 4 Sep 2023 11:49:55 +0800
Subject: [PATCH 10/11] remove console

---
 packages/editor/src/components/bubble/BubbleMenuPlugin.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/editor/src/components/bubble/BubbleMenuPlugin.ts b/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
index b19a564..d24dd4c 100644
--- a/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
+++ b/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
@@ -249,7 +249,6 @@ export class BubbleMenuView {
             0;
           const currentHeight =
             instance?.popperInstance?.state?.rects?.popper?.height ?? 10;
-          console.log(instance);
           if (Math.abs(prevY - currentY) <= currentHeight) {
             prev += currentHeight;
           }
@@ -257,7 +256,6 @@ export class BubbleMenuView {
           return prev;
         }, 0)
       : offset?.[1] ?? 10;
-    console.log(offsetX, offsetY);
     this.tippy?.setProps({
       offset: [offsetX, offsetY],
       placement,

From c319ad2ba9623cff0bfeba62ecff19291dc13e7d Mon Sep 17 00:00:00 2001
From: LIlGG <1103069291@qq.com>
Date: Mon, 4 Sep 2023 11:53:12 +0800
Subject: [PATCH 11/11] text bubble menu filter

---
 packages/editor/src/extensions/text/index.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/extensions/text/index.ts b/packages/editor/src/extensions/text/index.ts
index 2c0a106..b82866c 100644
--- a/packages/editor/src/extensions/text/index.ts
+++ b/packages/editor/src/extensions/text/index.ts
@@ -27,7 +27,13 @@ import type { EditorView } from "prosemirror-view";
 import MdiFormatBold from "~icons/mdi/format-bold";
 import { i18n } from "@/locales";
 
-const OTHER_BUBBLE_MENU_TYPES = ["audio", "video", "image", "iframe"];
+const OTHER_BUBBLE_MENU_TYPES = [
+  "audio",
+  "video",
+  "image",
+  "iframe",
+  "codeBlock",
+];
 
 const Text = TiptapText.extend<ExtensionOptions>({
   addOptions() {