feat(VuetifyTiptap): add removeDefaultWrapper option to remove defaul…

…t wrapper

Tiptap will automatically insert an empty <p> tag when in an empty editing state

fix #208

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 |
+| 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. |
 | maxHeight | string \| number | undefined | Sets the maximum height for the component. |

README.zh-CN.md

@@ -427,6 +427,7 @@ const content = ref('')
 | disabled | boolean | false | 禁用输入 |
 | label | string | undefined | 设置输入标签 |
 | hideToolbar | boolean | false | 隐藏工具栏 |
+| removeDefaultWrapper | boolean | false | 删除编辑器为空时默认的包装器 |
 | disableToolbar | boolean | false | 禁用工具栏 |
 | maxWidth | string \| number | undefined | 输入框最大宽度 |
 | minHeight | string \| number | undefined | 输入框最小高度 |

src/components/VuetifyTiptap.vue

@@ -18,7 +18,7 @@ type HandleKeyDown = NonNullable<EditorOptions['editorProps']['handleKeyDown']>
 type OnUpdate = NonNullable<EditorOptions['onUpdate']>
 
 interface Props {
-  modelValue?: string | JSONContent
+  modelValue?: string | object
   markdownTheme?: string | false
   output?: 'html' | 'json' | 'text'
   dark?: boolean
@@ -29,6 +29,7 @@ interface Props {
   label?: string
   hideToolbar?: boolean
   disableToolbar?: boolean
+  removeDefaultWrapper?: boolean
   maxWidth?: string | number
   minHeight?: string | number
   maxHeight?: string | number
@@ -55,6 +56,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: undefined,
   hideToolbar: false,
   disableToolbar: false,
+  removeDefaultWrapper: false,
   maxWidth: undefined,
   minHeight: undefined,
   maxHeight: undefined,
@@ -147,6 +149,13 @@ const contentDynamicStyles = computed(() => {
 })
 
 function getOutput(editor: CoreEditor, output: Props['output']) {
+  if (props.removeDefaultWrapper) {
+    if (output === 'html') return editor.isEmpty ? '' : editor.getHTML()
+    if (output === 'json') return editor.isEmpty ? {} : editor.getJSON()
+    if (output === 'text') return editor.isEmpty ? '' : editor.getText()
+    return ''
+  }
+
   if (output === 'html') return editor.getHTML()
   if (output === 'json') return editor.getJSON()
   if (output === 'text') return editor.getText()