diff --git a/src/components/ActionButton.vue b/src/components/ActionButton.vue
index e39ed2b..38ed6bb 100644
--- a/src/components/ActionButton.vue
+++ b/src/components/ActionButton.vue
@@ -6,6 +6,7 @@ import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from '@/comp
 import type { TooltipContentProps } from 'radix-vue'
 import { icons, Icon } from '@/components/icons'
 import type { Editor } from '@tiptap/core'
+import type { HTMLAttributes } from 'vue'
 
 interface Props {
   icon?: keyof typeof icons
@@ -20,6 +21,7 @@ interface Props {
   action?: ButtonViewReturnComponentProps['action']
   isActive?: ButtonViewReturnComponentProps['isActive']
   editor?: Editor
+  class?: HTMLAttributes['class']
 }
 withDefaults(defineProps<Props>(), {
   icon: undefined,
diff --git a/src/components/ActionDropdownButton.vue b/src/components/ActionDropdownButton.vue
index 9932b30..229d354 100644
--- a/src/components/ActionDropdownButton.vue
+++ b/src/components/ActionDropdownButton.vue
@@ -30,7 +30,14 @@ const props = withDefaults(defineProps<Props>(), {
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger :disabled="disabled">
-      <ActionMenuButton :class="btn_class" :title="title" :icon="icon" :tooltip="tooltip" :disabled="disabled" />
+      <ActionMenuButton
+        :class="btn_class"
+        :title="title"
+        :icon="icon"
+        :tooltip="tooltip"
+        :disabled="disabled"
+        :is-active="isActive"
+      />
     </DropdownMenuTrigger>
     <DropdownMenuContent :class="cn('min-w-24', props.class)" align="start" side="bottom" v-bind="$attrs">
       <slot />
diff --git a/src/components/ActionDropdownButtonSplit.vue b/src/components/ActionDropdownButtonSplit.vue
index 4e0cf95..fb0b40e 100644
--- a/src/components/ActionDropdownButtonSplit.vue
+++ b/src/components/ActionDropdownButtonSplit.vue
@@ -13,6 +13,7 @@ interface Props {
   tooltip?: string
   disabled?: boolean
   class?: string
+  shortcutKeys?: string[]
   btn_class?: string
   action?: ButtonViewReturnComponentProps['action']
   isActive?: ButtonViewReturnComponentProps['isActive']
@@ -25,13 +26,14 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   action: undefined,
   isActive: undefined,
+  shortcutKeys: undefined,
   class: '',
   btn_class: '',
 })
 </script>
 
 <template>
-  <div class="flex items-center h-[32px] hover:bg-muted rounded-md">
+  <div class="flex items-center h-[32px] hover:bg-muted rounded-md" :class="[isActive?.() && 'bg-muted']">
     <ActionButton
       :class="btn_class"
       :action="action"
@@ -39,6 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
       :icon="icon"
       :tooltip="tooltip"
       :disabled="disabled"
+      :shortcut-keys="shortcutKeys"
     >
     </ActionButton>
     <DropdownMenu>
diff --git a/src/components/Printer.vue b/src/components/Printer.vue
index 8545112..e6d5f61 100644
--- a/src/components/Printer.vue
+++ b/src/components/Printer.vue
@@ -7,12 +7,10 @@ import { useHotkeys } from '@/hooks'
 interface Props {
   editor: Editor
   disabled?: boolean
-  containerRef: Object
 }
 
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
-  containerRef: undefined,
 })
 const { state } = useTiptapStore()
 const srcdoc = ref('')
diff --git a/src/components/menus/AIMenu.vue b/src/components/menus/AIMenu.vue
index 853578f..b869542 100644
--- a/src/components/menus/AIMenu.vue
+++ b/src/components/menus/AIMenu.vue
@@ -90,7 +90,6 @@ async function handleCompletion(context: string, prompt_: string) {
   }
 }
 const tippyOptions = reactive<Record<string, unknown>>({
-  key: 'ai',
   maxWidth: 600,
   zIndex: 99,
   appendTo: 'parent',
diff --git a/src/components/menus/ContentMenu.vue b/src/components/menus/ContentMenu.vue
index c57356f..2575705 100644
--- a/src/components/menus/ContentMenu.vue
+++ b/src/components/menus/ContentMenu.vue
@@ -27,7 +27,7 @@ type PluginRefType = Plugin<{
 }>
 
 interface Props {
-  className: string
+  className?: string
   editor: Editor
   disabled?: boolean
   pluginKey?: PluginKey | string
diff --git a/src/components/menus/ImageBubbleMenu.vue b/src/components/menus/ImageBubbleMenu.vue
index a041a67..aaf1b91 100644
--- a/src/components/menus/ImageBubbleMenu.vue
+++ b/src/components/menus/ImageBubbleMenu.vue
@@ -109,6 +109,7 @@ function handleRemove() {
       popperOptions: {
         modifiers: [{ name: 'flip', enabled: false }],
       },
+      appendTo: 'parent',
       getReferenceClientRect: getReferenceClientRect.value,
       plugins: [sticky],
       sticky: 'popper',
diff --git a/src/extensions/FontFamily/FontFamily.ts b/src/extensions/FontFamily/FontFamily.ts
index 65bc47f..88ddba7 100644
--- a/src/extensions/FontFamily/FontFamily.ts
+++ b/src/extensions/FontFamily/FontFamily.ts
@@ -3,7 +3,6 @@ import { FontFamily as TiptapFontFamily } from '@tiptap/extension-font-family'
 import FontFamilyButton from './components/FontFamilyMenuButton.vue'
 import type { GeneralOptions } from '@/type'
 import { DEFAULT_FONT_FAMILY_MAP } from '@/constants'
-import TextStyle from '@tiptap/extension-text-style'
 
 export interface FontFamilyOptions extends TiptapFontFamilyOptions, GeneralOptions<FontFamilyOptions> {
   fontFamilyMap: {
@@ -81,8 +80,4 @@ export const FontFamily = TiptapFontFamily.extend<FontFamilyOptions>({
         },
     }
   },
-
-  addExtensions() {
-    return [TextStyle]
-  },
 })
diff --git a/src/extensions/OrderedList/components/OrderedListMenuButton.vue b/src/extensions/OrderedList/components/OrderedListMenuButton.vue
index 75f1d7a..6773a31 100644
--- a/src/extensions/OrderedList/components/OrderedListMenuButton.vue
+++ b/src/extensions/OrderedList/components/OrderedListMenuButton.vue
@@ -5,6 +5,7 @@ import { useLocale } from '@/locales'
 import type { Editor } from '@tiptap/vue-3'
 import ActionDropdownButtonSplit from '@/components/ActionDropdownButtonSplit.vue'
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
+import { ButtonViewReturnComponentProps } from '@/type'
 
 interface OrderedListOption {
   label: string
@@ -23,11 +24,15 @@ interface Props {
   editor: Editor
   disabled?: boolean
   tooltip?: string
+  shortcutKeys?: string[]
+  isActive?: ButtonViewReturnComponentProps['isActive']
 }
 
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   tooltip: '',
+  shortcutKeys: undefined,
+  isActive: undefined,
 })
 
 const { t } = useLocale()
@@ -77,11 +82,13 @@ function toggleOrderedList(item: OrderedListOption) {
     :action="toggleOrderedList"
     :disabled="disabled"
     :tooltip="tooltip"
+    :is-active="isActive"
+    :shortcutKeys="shortcutKeys"
     class="min-w-4 w-full grid grid-cols-3 gap-1"
   >
     <TooltipProvider>
       <Tooltip :delay-duration="0" v-for="item in OrderedListOptions" :key="item.value">
-        <TooltipTrigger>
+        <TooltipTrigger as-child>
           <DropdownMenuItem class="p-0" @click="toggleOrderedList(item)">
             <div
               :class="[active === item.value ? 'bg-accent border border-accent-foreground' : '']"
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..ac1ded7
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}