Vuetify Pro Tiptap

To use the editor, you must create a plugin instance using createVuetifyProTipTap and register it with your Vue application. You should provide the components (VuetifyTiptap, VuetifyViewer) and an array of extensions to define the editor's capabilities.

Note: When using Vue 3, it is recommended to set app.config.unwrapInjectedRef = true to avoid warnings related to injected properties.

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import { VuetifyTiptap, VuetifyViewer, createVuetifyProTipTap } from 'vuetify-pro-tiptap'
import 'vuetify-pro-tiptap/style.css'

// 1. Create the plugin instance
export const vuetifyProTipTap = createVuetifyProTipTap({
  lang: 'zhHans',
  fallbackLang: 'en',
  components: {
    VuetifyTiptap,
    VuetifyViewer
  },
  extensions: [
    // Add extensions here, e.g., Bold, Italic, etc.
  ]
})

// 2. Register with Vue app
const app = createApp(App)
app.use(createVuetify())
app.use(vuetifyProTipTap)
app.config.unwrapInjectedRef = true
app.mount('#app')

To use the editor, you must initialize it using createVuetifyProTipTap. This function allows you to configure global settings, register components (like VuetifyTiptap and VuetifyViewer), and define which extensions are available in the editor toolbar.

Note: For Vue 3 projects, you should also set app.config.unwrapInjectedRef = true to prevent warnings related to injected properties.

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

export const vuetifyProTipTap = createVuetifyProTipTap({
  lang: 'zhHans',
  fallbackLang: 'en',
  components: {
    VuetifyTiptap,
    VuetifyViewer
  },
  extensions: [
    BaseKit.configure({
      placeholder: { placeholder: 'Enter some text...' }
    }),
    Bold,
    Italic,
    // ... add other extensions as needed
    Image.configure({
      imageTabs: [{ name: 'SELECT', component: markRaw(MySelectComponent) }],
      upload(file: File) {
        const url = URL.createObjectURL(file)
        return Promise.resolve(url)
      }
    }),
    Fullscreen
  ]
})

// In your main.ts
const app = createApp(App)
app.use(vuetify)
app.use(vuetifyProTipTap)
app.config.unwrapInjectedRef = true
app.mount('#app')

You can customize the editor's behavior globally via createVuetifyProTipTap. Key configuration options include:

• lang: The default language.
• fallbackLang: The fallback language if the current language is missing a translation.
• markdownTheme: The theme used for rendering markdown (e.g., 'github').
• components: Global registration of components like VuetifyTiptap and VuetifyViewer.
• extensions: An array of extensions. You can use BaseKit.configure to customize the bubble menu items for different content types (image, text, video).

export const vuetifyProTipTap = createVuetifyProTipTap({
  lang: 'zhHans',
  fallbackLang: 'en',
  markdownTheme: 'github',
  components: {
    VuetifyTiptap,
    VuetifyViewer
  },
  extensions: [
    BaseKit.configure({
      bubble: {
        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 => defaultBubbleList(editor)
      }
    }),
    // ... other extensions
  ]
})

To customize how an extension's button appears in the toolbar, you can provide a ButtonView function via GeneralOptions.

1. Implement the ButtonView function: It receives ButtonViewParams containing the editor, the extension instance, and a translation function t.
2. Return a ButtonViewReturn: This object specifies the Vue component to render, its props (like icon, tooltip, and isActive state), and its slots.

This allows you to inject custom logic, such as toggling states or opening dialogs, directly into the toolbar buttons.

// Example structure of a ButtonView return
export interface ButtonViewReturn {
  component: unknown
  componentProps: {
    action?: (value?: unknown) => void
    isActive?: () => boolean
    icon?: keyof IconsOptions
    tooltip?: string
    [x: string]: any
  }
  componentSlots?: {
    dialog: () => any
    [x: string]: () => any
  }
}

You can customize the editor's behavior globally via the createVuetifyProTipTap configuration object. Key options include:

• lang: The default language.
• fallbackLang: The language to use if the current language is unavailable.
• markdownTheme: The theme used for rendering markdown (e.g., 'github').
• components: Global registration of VuetifyTiptap and VuetifyViewer.
• extensions: An array of extensions. You can use .configure() on extensions like BaseKit or Image to set specific behaviors, such as custom bubble menus or upload functions.

export const vuetifyProTipTap = createVuetifyProTipTap({
  lang: 'zhHans',
  fallbackLang: 'en',
  markdownTheme: 'github',
  components: {
    VuetifyTiptap,
    VuetifyViewer
  },
  extensions: [
    BaseKit.configure({
      bubble: {
        list: {
          text: ['bold', 'italic', 'underline', 'strike', 'divider', 'color', 'highlight', 'textAlign', 'divider', 'link']
        },
        defaultBubbleList: editor => defaultBubbleList(editor)
      }
    }),
    Image.configure({
      divider: true,
      upload(file) {
        const url = URL.createObjectURL(file)
        return Promise.resolve(url)
      }
    })
  ]
})