Vuetify Pro Tiptap

https://github.com/yikoyu/vuetify-pro-tiptap
Admin
A WYSIWYG rich-text editor for Vue.js that integrates Tiptap with Vuetify components, offering...
Tokens:5,686
Snippets:23
Trust Score:7.1
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Custom Markdown Theme Implementation for Vuetify Pro Tiptap

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.zh-CN.md

This section illustrates how to create and apply a custom markdown theme. It includes an SCSS example for defining theme styles, a TypeScript example for importing the custom stylesheet, and a Vue template example for applying the theme to `VuetifyTiptap` and `VuetifyViewer` components.

```SCSS
$value: 'github';

.vuetify-pro-tiptap-editor__content.markdown-theme-#{$value} {
  // 自定义样式
  &.__dark {
    // dark 模式下的自定义样式
  }
}
```

```TypeScript
// import 'vuetify-pro-tiptap/style.css' // 导入全部（editor 和 markdown）样式
import 'vuetify-pro-tiptap/styles/editor.css' // 只使用 editor 样式，不使用 markdown 样式
import './styles/markdown/github.scss'
```

```Vue
<template>
  <VuetifyTiptap v-model="content" markdown-theme="github" />
  <VuetifyViewer :value="content" markdown-theme="github" />
</template>
```

--------------------------------

### Install Vuetify Pro Tiptap Package

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

This snippet provides commands to install the `vuetify-pro-tiptap` package using popular package managers like pnpm, yarn, or npm. It's the first step to integrate the editor into your project.

```shell
pnpm add vuetify-pro-tiptap
# or
yarn add vuetify-pro-tiptap
# or
npm i vuetify-pro-tiptap -S
```

--------------------------------

### Integrate Vuetify Pro Tiptap into Vue Application (main.ts)

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

This TypeScript snippet illustrates the main application entry point (`main.ts`) for a Vue 3 project. It shows how to create a Vue app, install Vuetify, and then register the `vuetifyProTipTap` plugin. It also includes a configuration to unwrap injected refs, addressing a common Tiptap warning.

```TypeScript
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import App from './App.vue'
import { vuetifyProTipTap } from './tiptap'

import 'vuetify/styles'

const vuetify = createVuetify()

const app = createApp(App)
app.use(vuetify)
app.use(vuetifyProTipTap)

// fix warning injected property "decorationClasses" is a ref and will be auto-unwrapped
// https://github.com/ueberdosis/tiptap/issues/1719
app.config.unwrapInjectedRef = true

app.mount('#app')
```

--------------------------------

### Basic Usage of Vuetify Pro Tiptap Editor

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

Provides a complete example of integrating and using the `VuetifyTiptap` component in a Vue application. It demonstrates importing necessary components and extensions, configuring extensions, and binding content using `v-model`.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { BaseKit, Bold, Color, Fullscreen, Heading, Highlight, History, Image, Italic, Link, Strike, Table, Underline, Video, VuetifyTiptap, VuetifyViewer } from 'vuetify-pro-tiptap'
import 'vuetify-pro-tiptap/style.css'

const extensions = [
  BaseKit.configure({
    placeholder: {
      placeholder: 'Enter some text...'
    }
  }),
  Bold,
  Italic,
  Underline,
  Strike,
  Color,
  Highlight,
  Heading,
  Link,
  Image,
  Video,
  Table,
  Fullscreen,
  History
]

const content = ref('')
</script>

<template>
  <VApp id="app">
    <VContainer>
      <VuetifyTiptap v-model="content" label="Title" rounded :min-height="200" :max-height="465" :max-width="900" :extensions="extensions" />
      <VuetifyViewer :value="content" />
    </VContainer>
  </VApp>
</template>
```

--------------------------------

### Implement Custom Markdown Theme for VuetifyProTipTap

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

This snippet provides a multi-language example for creating and applying a custom markdown theme. It includes SCSS for defining theme styles, TypeScript for importing the stylesheet, and a Vue template demonstrating how to apply the markdown-theme prop to VuetifyTiptap and VuetifyViewer components.

```SCSS
$value: 'github';

.vuetify-pro-tiptap-editor__content.markdown-theme-#{$value} {
  // your custom styles
  &.__dark {
    // your dark mode custom styles
  }
}
```

```TypeScript
// import 'vuetify-pro-tiptap/style.css' // import all(editor and markdown) styles
import 'vuetify-pro-tiptap/styles/editor.css' // only use editor style, not using markdown style
import './styles/markdown/github.scss'
```

```Vue
<template>
  <VuetifyTiptap v-model="content" markdown-theme="github" />
  <VuetifyViewer :value="content" markdown-theme="github" />
</template>
```

--------------------------------

### Project Contribution Workflow

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.zh-CN.md

Step-by-step instructions for contributing code to the project, covering the Git workflow from forking to submitting a pull request.

```Git
1. Fork it
2. Create your branch: `git checkout -b your-branch`
3. Make your changes
4. Commit your changes with [Semantic Commit Messages (recommended)](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716)
5. Push to the branch: `git push origin your-branch`
6. Submit a PR to `develop` branch
```

--------------------------------

### Project Contribution Workflow with Git

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

Outlines the standard Git workflow for contributing to the project. This includes steps for forking the repository, creating a new branch, making changes, committing with semantic messages, pushing to the branch, and submitting a pull request.

```bash
git checkout -b your-branch
git commit -m "feat: your changes"
git push origin your-branch
```

--------------------------------

### Initialize Vuetify Pro Tiptap with Language Settings

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

Demonstrates how to initialize the `vuetify-pro-tiptap` plugin with specific language and fallback language settings during its creation.

```typescript
import { createVuetifyProTipTap } from 'vuetify-pro-tiptap'

const VuetifyProTipTap = createVuetifyProTipTap({
  lang: 'zhHans',
  fallbackLang: 'en'
})
```

--------------------------------

### Configure Vuetify Pro Tiptap Plugin (tiptap.ts)

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

This TypeScript configuration file demonstrates how to initialize `vuetifyProTipTap` by importing core components and a wide array of Tiptap extensions. It includes settings for language, placeholder text, and custom image upload logic, allowing for a highly customized editor experience.

```TypeScript
import { markRaw } from 'vue'
import { VuetifyTiptap, VuetifyViewer, createVuetifyProTipTap } from 'vuetify-pro-tiptap'
import { BaseKit, Bold, Italic, Underline, Strike, Color, Highlight, Heading, TextAlign, FontFamily, FontSize, SubAndSuperScript, BulletList, OrderedList, TaskList, Indent, Link, Image, Video, Table, Blockquote, HorizontalRule, Code, CodeBlock, Clear, Fullscreen, History } from 'vuetify-pro-tiptap'
import 'vuetify-pro-tiptap/style.css'
import SelectImage from './components/SelectImage.vue'

export const vuetifyProTipTap = createVuetifyProTipTap({
  lang: 'zhHans',
  fallbackLang: 'en',
  components: {
    VuetifyTiptap,
    VuetifyViewer
  },
  extensions: [
    BaseKit.configure({
      placeholder: {
        placeholder: 'Enter some text...'
      }
    }),
    Bold,
    Italic,
    Underline,
    Strike,
    Code.configure({ divider: true }),
    Heading,
    TextAlign,
    FontFamily,
    FontSize,
    Color,
    Highlight.configure({ divider: true }),
    SubAndSuperScript.configure({ divider: true }),
    Clear.configure({ divider: true }),
    BulletList,
    OrderedList,
    TaskList,
    Indent.configure({ divider: true }),
    Link,
    Image.configure({
      imageTabs: [{ name: 'SELECT', component: markRaw(SelectImage) }],
      // hiddenTabs: ['upload'],
      upload(file: File) {
        const url = URL.createObjectURL(file)
        console.log('mock upload api :>> ', url)
        return Promise.resolve(url)
      }
    }),
    Video,
    Table.configure({ divider: true }),
    Blockquote,
    HorizontalRule,
    CodeBlock.configure({ divider: true }),
    History.configure({ divider: true }),
    Fullscreen
  ]
})
```

--------------------------------

### VuetifyViewer Component API Reference

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.zh-CN.md

Detailed API documentation for the VuetifyViewer component, outlining its configurable properties and available slots for displaying Tiptap content.

```APIDOC
VuetifyViewer:
  Description: A component for displaying Tiptap content, often used for previewing.
  Props:
    value:
      Type: string | JSONContent
      Default: ''
      Description: The content to be displayed in the viewer.
    dark:
      Type: boolean
      Default: false
      Description: Controls whether the component uses a dark theme.
    dense:
      Type: boolean
      Default: false
      Description: Enables a compact mode for the component.
    markdownTheme:
      Type: string | false
      Default: 'default'
      Description: Specifies the markdown theme to apply to the displayed content.
    xss:
      Type: boolean
      Default: true
      Description: Determines whether XSS filtering is enabled for the content.
    xssOptions:
      Type: xss.IWhiteList
      Default: Built-in default rules
      Description: Configuration rules for XSS filtering.
    maxWidth:
      Type: string | number
      Default: undefined
      Description: Sets the maximum width for the viewer.
    extensions:
      Type: AnyExtension[]
      Default: []
      Description: An array of Tiptap extensions to enable for rendering.
  Slots:
    before:
      Description: Provides a slot for content to be added before the main viewer content.
    after:
      Description: Provides a slot for content to be added after the main viewer content.
```

--------------------------------

### Configure Global Settings for VuetifyProTipTap

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

This TypeScript snippet demonstrates how to initialize vuetify-pro-tiptap using createVuetifyProTipTap. It covers setting default language, markdown theme, registering global components, and configuring extensions like BaseKit, Image, and Fullscreen with custom options for bubble menus, image tabs, and upload functions.

```TypeScript
import { markRaw } from 'vue'
import { VuetifyTiptap, VuetifyViewer, createVuetifyProTipTap, defaultBubbleList } from 'vuetify-pro-tiptap'
import { BaseKit, Image, Fullscreen } from 'vuetify-pro-tiptap'
import 'vuetify-pro-tiptap/style.css'
import SelectImage from './components/SelectImage.vue'

export const vuetifyProTipTap = createVuetifyProTipTap({
  // Set default lang
  lang: 'zhHans',
  // Set default fallback lang
  fallbackLang: 'en',
  // Set markdown theme
  markdownTheme: 'github',
  // Global registration app.component
  components: {
    VuetifyTiptap,
    VuetifyViewer
  },
  // Global registration extensions
  extensions: [
    BaseKit.configure({
      placeholder: {
        placeholder: 'Enter some text...'
      },
      bubble: {
        // default config
        list: {
          image: [ 'float-left', 'float-none', 'float-right', 'divider', 'size-small', 'size-medium', 'size-large', 'divider', 'textAlign', 'divider', 'image', 'image-aspect-ratio', 'remove'],
          text: ['bold', 'italic', 'underline', 'strike', 'divider', 'color', 'highlight', 'textAlign', 'divider', 'link'],
          video: ['video', 'remove']
        },
        defaultBubbleList: editor => {
          // You can customize the bubble menu here
          return defaultBubbleList(editor) // default customize bubble list
        }
      }
    }),
    Image.configure({
      // Generate a VDivider after the button
      divider: true,
      // Custom image tabs
      imageTabs: [{ name: 'SELECT', component: markRaw(SelectImage) }],
      // hidden default tab
      hiddenTabs: ['upload'],
      // custom upload function
      upload(file) {
        const url = URL.createObjectURL(file)
        console.log('mock upload api :>> ', url)
        return Promise.resolve(url)
      }
    }),
    Fullscreen.configure({
      // Generate a VSpacer after the button
      spacer: true
    })
  ]
})
```

--------------------------------

### Available VuetifyProTipTap Extensions

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

This API documentation lists all available extensions for vuetify-pro-tiptap. These extensions provide various functionalities, and their declaration order influences the addition of corresponding command-buttons in the editor interface.

```APIDOC
- BaseKit
- Bold
- Italic
- Underline
- Strike
- Color
- Highlight
- Heading
- TextAlign
- FontFamily
- FontSize
- SubAndSuperScript
- BulletList
- OrderedList
- TaskList
- Indent
- Link
- MarkdownTheme
- Image
- Video
- Table
- Blockquote
- HorizontalRule
- Code
- CodeBlock
- Clear
- Fullscreen
- History
```

--------------------------------

### Vuetify-Pro-Tiptap Component API Reference

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.zh-CN.md

Detailed API documentation for the Vuetify-Pro-Tiptap rich text editor, including its configurable properties (props), available content injection points (slots), and emitted events.

```APIDOC
Vuetify-Pro-Tiptap:
  Description: A rich text editor component built with Vuetify and Tiptap.
  Props:
    modelValue:
      Type: string
      Default: ''
      Description: Input value of the editor.
    markdownTheme:
      Type: string | false
      Default: 'default'
      Description: Specifies the markdown theme to apply.
    output:
      Type: 'html' | 'json' | 'text'
      Default: 'html'
      Description: Defines the output format of the editor content.
    dark:
      Type: boolean
      Default: false
      Description: Controls whether the component uses a dark theme.
    dense:
      Type: boolean
      Default: false
      Description: Enables a compact mode for the component.
    outlined:
      Type: boolean
      Default: true
      Description: Applies an outlined style to the input area.
    flat:
      Type: boolean
      Default: true
      Description: Removes the elevation from the component's card-like structure.
    disabled:
      Type: boolean
      Default: false
      Description: Disables user interaction with the editor.
    label:
      Type: string
      Default: undefined
      Description: Sets the floating label for the input.
    hideToolbar:
      Type: boolean
      Default: false
      Description: Hides the editor's toolbar.
    disableToolbar:
      Type: boolean
      Default: false
      Description: Disables all controls within the toolbar.
    hideBubble:
      Type: boolean
      Default: false
      Description: Hides the context-sensitive bubble menu.
    removeDefaultWrapper:
      Type: boolean
      Default: false
      Description: Removes the default wrapper element when the editor content is empty.
    maxWidth:
      Type: string | number
      Default: undefined
      Description: Sets the maximum width for the input box.
    minHeight:
      Type: string | number
      Default: undefined
      Description: Sets the minimum height for the input box.
    maxHeight:
      Type: string | number
      Default: undefined
      Description: Sets the maximum height for the input box.
    extensions:
      Type: AnyExtension[]
      Default: []
      Description: An array of Tiptap extensions to enable.
    editorClass:
      Type: string | string[] | Record<string, any>
      Default: undefined
      Description: CSS class(es) to apply to the editor element.
  Slots:
    editor:
      Description: Allows customization of the editor's main content area.
    bottom:
      Description: Provides a slot for content at the bottom of the editor.
  Events:
    update:modelValue:
      Type: string | JSONContent
      Description: Emitted when the editor's content changes, updating the v-model.
    update:markdownTheme:
      Type: string
      Description: Emitted when the markdown theme is switched.
    change:
      Type: { editor: Editor, output: string | JSONContent }
      Description: Emitted on editor content update, providing the editor instance and output.
    enter:
      Type: N/A
      Description: Emitted when the Enter key is pressed within the editor.
```

--------------------------------

### Global Configuration for Vuetify Pro Tiptap

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.zh-CN.md

This TypeScript snippet demonstrates how to initialize and configure `vuetify-pro-tiptap` globally using `createVuetifyProTipTap`. It includes setting default language, registering components, and configuring extensions like `BaseKit` for placeholders and bubble menus, `Image` for custom tabs and upload functions, and `Fullscreen` for button spacing.

```TypeScript
import { markRaw } from 'vue'
import { VuetifyTiptap, VuetifyViewer, createVuetifyProTipTap, defaultBubbleList } from 'vuetify-pro-tiptap'
import { BaseKit, Image, Fullscreen } from 'vuetify-pro-tiptap'
import 'vuetify-pro-tiptap/style.css'
import SelectImage from './components/SelectImage.vue'

export const vuetifyProTipTap = createVuetifyProTipTap({
  // Set default lang
  lang: 'zhHans',
  // Set default fallback lang
  fallbackLang: 'en',
  // Set markdown theme
  markdownTheme: 'github',
  // Global registration app.component
  components: {
    VuetifyTiptap,
    VuetifyViewer
  },
  // Global registration extensions
  extensions: [
    BaseKit.configure({
      placeholder: {
        placeholder: 'Enter some text...'
      },
      bubble: {
        // default config
        list: {
          image: [ 'float-left', 'float-none', 'float-right', 'divider', 'size-small', 'size-medium', 'size-large', 'divider', 'textAlign', 'divider', 'image', 'image-aspect-ratio', 'remove'],
          text: ['bold', 'italic', 'underline', 'strike', 'divider', 'color', 'highlight', 'textAlign', 'divider', 'link'],
          video: ['video', 'remove']
        },
        defaultBubbleList: editor => {
          // You can customize the bubble menu here
          return defaultBubbleList(editor) // default customize bubble list
        }
      }
    }),
    Image.configure({
      // Generate a VDivider after the button
      divider: true,
      // Custom image tabs
      imageTabs: [{ name: 'SELECT', component: markRaw(SelectImage) }],
      // hidden default tab
      hiddenTabs: ['upload'],
      // custom upload function
      upload(file) {
        const url = URL.createObjectURL(file)
        console.log('mock upload api :>> ', url)
        return Promise.resolve(url)
      }
    }),
    Fullscreen.configure({
      // Generate a VSpacer after the button
      spacer: true
    })
  ]
})
```

--------------------------------

### Tiptap Extension for Preview Functionality

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

Creates a custom Tiptap extension named 'preview' that integrates the `PreviewActionButton` Vue component. This extension allows adding a preview button to the Tiptap editor toolbar.

```typescript
import type { ButtonView, GeneralOptions } from 'vuetify-pro-tiptap'

import { Extension } from '@tiptap/core'
import PreviewActionButton from '../components/PreviewActionButton.vue'

export interface PreviewOptions extends GeneralOptions {
  button: ButtonView
}

export default Extension.create<PreviewOptions>({
  name: 'preview',
  addOptions() {
    return {
      divider: false,
      spacer: false,
      button: () => ({
        component: PreviewActionButton,
        componentProps: {}
      })
    }
  }
})
```

--------------------------------

### VuetifyTiptap Component Props API Reference

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

Documents the available properties (props) for the `VuetifyTiptap` component, including their names, types, default values, and descriptions. These props control the editor's behavior and appearance.

```APIDOC
VuetifyTiptap:
  Props:
    modelValue: string | JSONContent (Default: '') - The input’s value
    markdownTheme: string | false (Default: 'default') - Markdown theme
    output: 'html' | 'json' | 'text' (Default: 'html') - Output format
    dark: boolean (Default: false) - Applies the dark theme variant to the component.
    dense: boolean (Default: false) - Reduces the input height
    outlined: boolean (Default: true) - Applies the outlined style to the input
    flat: boolean (Default: true) - Removes the card’s elevation
    disabled: boolean (Default: false) - Disable the input
    label: string (Default: undefined) - Sets input label
    hideToolbar: boolean (Default: false) - Hidden the toolbar
    disableToolbar: boolean (Default: false) - Disable the toolbar
    hideBubble: boolean (Default: false) - Hidden the bubble menu
    removeDefaultWrapper: boolean (Default: false) - Default wrapper when the delete editor is empty
    maxWidth: string | number (Default: undefined) - Sets the maximum width for the component.
    minHeight: string | number (Default: undefined) - Sets the minimum height for the component.
    maxHeight: string | number (Default: undefined) - Sets the maximum height for the component.
    extensions: AnyExtension[] (Default: []) - Tiptap the extensions
    editorClass: string | string[] | Record<string, any> (Default: undefined) - Editor class
```

--------------------------------

### VuetifyTiptap Component Slots API Reference

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

Documents the available slots for the `VuetifyTiptap` component, allowing customization of specific areas within the editor, such as the editor content area and the bottom section.

```APIDOC
VuetifyTiptap:
  Slots:
    editor: Slot to customize editor
    bottom: Slot to customize editor bottom
```

--------------------------------

### VuetifyViewer Component Props API

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

Lists the configurable properties (props) for the VuetifyViewer component. Each prop includes its type, default value, and a brief description of its purpose, allowing customization of the viewer's behavior and appearance.

```APIDOC
VuetifyViewer Props:
  value:
    Type: string | JSONContent
    Default: ''
    Description: The preview’s value
  dark:
    Type: boolean
    Default: false
    Description: Applies the dark theme variant to the component.
  dense:
    Type: boolean
    Default: false
    Description: Reduces the input height
  markdownTheme:
    Type: string | false
    Default: 'default'
    Description: Markdown theme
  xss:
    Type: boolean
    Default: true
    Description: Enable xss filter
  xssOptions:
    Type: xss.IWhiteList
    Default: Default rule
    Description: Xss filter rule config
  maxWidth:
    Type: string | number
    Default: undefined
    Description: Sets the maximum width for the component.
  extensions:
    Type: AnyExtension[]
    Default: []
    Description: Tiptap the extensions
```

--------------------------------

### Dynamically Change Vuetify Pro Tiptap Language

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

Shows how to dynamically change the language of the `vuetify-pro-tiptap` plugin at runtime using the `locale.setLang` method.

```typescript
import { locale } from 'vuetify-pro-tiptap'

locale.setLang('en')
```

--------------------------------

### Vue Component for Tiptap Preview Action Button

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

Defines a Vue component that acts as an action button for the Tiptap editor, providing a fullscreen preview of the editor's HTML content. It uses Vuetify components for UI and integrates with Tiptap's editor instance.

```vue
<script setup lang="ts">
import type { Editor } from '@tiptap/vue-3'
import { mdiClose, mdiFileCodeOutline } from '@mdi/js'
import { ref } from 'vue'
import { ActionButton } from 'vuetify-pro-tiptap'

interface Props {
  editor: Editor
  tooltip?: string
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  tooltip: undefined,
  disabled: false
})

const dialog = ref(false)
const maxWidth = ref<number>(900)
</script>

<template>
  <ActionButton tooltip="全屏" :disabled="disabled">
    <VIcon>{{ `svg:${mdiFileCodeOutline}` }}</VIcon>
    <VDialog v-model="dialog" fullscreen hide-overlay activator="parent">
      <VCard>
        <VToolbar dark color="primary">
          <VBtn icon dark @click="dialog = false">
            <VIcon>{{ `svg:${mdiClose}` }}</VIcon>
          </VBtn>
        </VToolbar>

        <VContainer>
          <VSheet class="mx-auto" :max-width="maxWidth">
            <VuetifyViewer :value="editor.getHTML()" />
          </VSheet>
        </VContainer>
      </VCard>
    </VDialog>
  </ActionButton>
</template>
```

--------------------------------

### VuetifyViewer Component Slots API

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

Describes the available slots for the VuetifyViewer component. Slots provide designated areas where custom content can be injected, allowing for flexible layout and content placement within the component.

```APIDOC
VuetifyViewer Slots:
  before:
    Description: Add content at the before
  after:
    Description: Add content at the after
```

--------------------------------

### VuetifyViewer Component Events API

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

Defines the events emitted by the VuetifyViewer component, including their types and descriptions. These events allow for interaction and state updates based on user actions or internal component changes.

```APIDOC
Event:
  update:modelValue:
    Type: string | JSONContent
    Description: Emitted when editor onUpdate
  update:markdownTheme:
    Type: string
    Description: Emitted when change theme
  change:
    Type: { editor: Editor, output: string | JSONContent }
    Description: Emitted when editor onUpdate
  enter:
    Type: 
    Description: Keyboard enter return
```

--------------------------------

### Add and Use Unavailable Language in Vuetify Pro Tiptap

Source: https://github.com/yikoyu/vuetify-pro-tiptap/blob/master/README.md

Illustrates how to add custom internationalization messages for an unavailable language using `locale.setMessage` and then activate it with `locale.setLang`.

```typescript
import { locale } from 'vuetify-pro-tiptap'

locale.setMessage('zhHant', {
  // i18n text
})
locale.setLang('zhHant')
```
Tokens:
Raw