feat(VuetifyTiptap): add 'hideBubble' prop to hide the bubble menu

yikoyu · Jan 20, 2024 · 60318c9 · 60318c9
1 parent 7432b7e
commit 60318c9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -429,6 +429,7 @@ const content = ref('')
 | label | string | undefined | Sets input label |
 | hideToolbar | boolean | false | Hidden the toolbar |
 | disableToolbar | boolean | false | Disable the toolbar |
+| hideBubble | boolean | false | Hidden the bubble menu |
 | removeDefaultWrapper | boolean | false | Default wrapper when the delete editor is empty |
 | maxWidth | string \| number | undefined | Sets the maximum width for the component. |
 | minHeight | string \| number | undefined | Sets the minimum height for the component. |

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -427,8 +427,9 @@ const content = ref('')
 | disabled | boolean | false | 禁用输入 |
 | label | string | undefined | 设置输入标签 |
 | hideToolbar | boolean | false | 隐藏工具栏 |
-| removeDefaultWrapper | boolean | false | 删除编辑器为空时默认的包装器 |
 | disableToolbar | boolean | false | 禁用工具栏 |
+| hideBubble | boolean | false | 隐藏气泡菜单 |
+| removeDefaultWrapper | boolean | false | 删除编辑器为空时默认的包装器 |
 | maxWidth | string \| number | undefined | 输入框最大宽度 |
 | minHeight | string \| number | undefined | 输入框最小高度 |
 | maxHeight | string \| number | undefined | 输入框最大高度 |

diff --git a/src/components/VuetifyTiptap.vue b/src/components/VuetifyTiptap.vue
@@ -29,6 +29,7 @@ interface Props {
   label?: string
   hideToolbar?: boolean
   disableToolbar?: boolean
+  hideBubble?: boolean
   removeDefaultWrapper?: boolean
   maxWidth?: string | number
   minHeight?: string | number
@@ -56,6 +57,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: undefined,
   hideToolbar: false,
   disableToolbar: false,
+  hideBubble: false,
   removeDefaultWrapper: false,
   maxWidth: undefined,
   minHeight: undefined,
@@ -188,7 +190,7 @@ defineExpose({ editor })
   <div v-if="editor" class="vuetify-pro-tiptap" :class="{ dense }">
     <VThemeProvider :theme="isDark ? 'dark' : 'light'">
       <!-- Edit Mode -->
-      <BubbleMenu :editor="editor" :disabled="disableToolbar" />
+      <BubbleMenu v-if="!hideBubble" :editor="editor" :disabled="disableToolbar" />
 
       <VInput class="pt-0" hide-details="auto">
         <VCard