@letsoft/quq-tiptap

Tiptap extension for inserting files from QuqManager.

Install

npm install @letsoft/quq-tiptap @tiptap/core @tiptap/pm @tiptap/starter-kit

Usage

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { QuqManager } from '@letsoft/quq-tiptap'

const editor = new Editor({
  element: document.querySelector('#editor')!,
  extensions: [
    StarterKit,
    QuqManager.configure({
      apiKey: 'qk_project_key',
      multiple: true,
      accept: ['image/*', 'application/pdf', 'audio/*', 'video/*']
    })
  ]
})

document.querySelector('[data-action="quq"]')?.addEventListener('click', () => {
  editor.commands.openQuqManager()
})

Images and video are inserted at 100% width by default. Audio is inserted at 50% width by default. Selecting media shows contextual alignment buttons, 15%, 50%, 100% quick-size buttons, and drag resize handles.

apiUrl is optional for managed QuqManager projects and defaults to the platform API. Pass it only when connecting to a self-hosted API:

QuqManager.configure({
  apiUrl: 'https://files.example.com/api',
  apiKey: 'qk_project_key'
})

Options

QuqManager.configure({
  apiKey: 'qk_project_key',
  multiple: true,
  accept: ['image/*', 'application/pdf', 'audio/*', 'video/*'],
  mediaToolbar: true,
  mediaResizer: true,
  mediaToolbarItems: ['left', 'center', 'right', '15%', '50%', '100%']
})

License

MIT © LetSoft. See LICENSE.