tiptapify 0.1.5 → 0.2.0

package/index.d.ts

@@ -32,6 +32,7 @@ import type {
   SingleCommands,
 } from '@tiptap/core'
 
+import '@tiptap/extensions'
 import '@tiptap/extension-text-style'
 import '@tiptap/extension-list'
 import '@tiptap/extensions'
@@ -42,6 +43,7 @@ import '@tiptap/extension-heading'
 import '@tiptap/extension-bold'
 import '@tiptap/extension-italic'
 import '@tiptap/extension-strike'
+import '@tiptap/extension-link'
 import '@tiptap/extension-code'
 import '@tiptap/extension-blockquote'
 import '@tiptap/extension-hard-break'
@@ -66,6 +68,74 @@ export interface TiptapifyOptions {
   i18n?: string
 }
 
+export type TiptapifyAiMode = 'insert' | 'replace' | 'append'
+
+export interface TiptapifyAiPromptExample {
+  title: string
+  prompt: string
+}
+
+export type TiptapifyAiChatRole = 'system' | 'user' | 'assistant' | 'developer' | 'tool'
+
+export interface TiptapifyAiChatMessage {
+  role: TiptapifyAiChatRole
+  content: string
+}
+
+export interface TiptapifyAiEditorContext {
+  prompt: string
+  selectedText: string
+  text: string
+  html: string
+  json: object
+  mode: TiptapifyAiMode
+}
+
+export interface TiptapifyAiRequest {
+  model?: string
+  messages: TiptapifyAiChatMessage[]
+  temperature?: number
+  stream?: false
+  [key: string]: unknown
+}
+
+export interface TiptapifyAiResponse {
+  content: string
+}
+
+export interface TiptapifyAiOpenAiResponse {
+  choices?: Array<{
+    message?: {
+      content?: string
+    }
+    text?: string
+  }>
+}
+
+export type TiptapifyAiProvider = (request: TiptapifyAiRequest, context: TiptapifyAiEditorContext) => Promise<TiptapifyAiResponse | TiptapifyAiOpenAiResponse | string>
+
+export type TiptapifyAiTokenProvider = () => Promise<string | null> | string | null
+
+export interface TiptapifyAiStorage {
+  getItem: (key: string) => string | null | Promise<string | null>
+  setItem: (key: string, value: string) => void | Promise<void>
+  removeItem: (key: string) => void | Promise<void>
+}
+
+export interface TiptapifyAiOptions {
+  aiProvider?: TiptapifyAiProvider
+  model?: string
+  promptExamples?: TiptapifyAiPromptExample[]
+  mode?: TiptapifyAiMode
+  defaultPrompt?: string
+  systemPrompt?: string
+  temperature?: number
+  chatCompletionOptions?: Record<string, unknown>
+  createMessages?: (context: TiptapifyAiEditorContext) => TiptapifyAiChatMessage[]
+  tokenProvider?: TiptapifyAiTokenProvider
+  storage?: TiptapifyAiStorage
+}
+
 declare const TiptapifyPlugin: {
   install: (app: never, options?: TiptapifyOptions) => void
 }
@@ -114,4 +184,4 @@ declare module '@vue/runtime-core' {
   interface GlobalComponents {
     Tiptapify: typeof Tiptapify
   }
-}
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -30,7 +30,8 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint resources/ts --fix --ext .ts,.js,.cjs,.vue,.tsx,.jsx",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "build:charmap": "tsx build-charmap.ts",
     "build:emojis": "tsx build-emojis.ts",
     "docs:dev": "pnpm --filter tiptapify-docs docs:dev",
@@ -55,6 +56,10 @@
     "material design icons",
     "wysiwyg",
     "wysiwyg toolbar",
+    "rich text editor",
+    "vue editor",
+    "vue rich text",
+    "vue wysiwyg",
     "markdown",
     "emoji",
     "emoticons"
@@ -65,45 +70,45 @@
   "packageManager": "pnpm@11.8.0",
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@tiptap/core": "^3.26.1",
-    "@tiptap/extension-blockquote": "^3.26.1",
-    "@tiptap/extension-bold": "^3.26.1",
-    "@tiptap/extension-bubble-menu": "^3.26.1",
-    "@tiptap/extension-code": "^3.26.1",
-    "@tiptap/extension-code-block": "^3.26.1",
-    "@tiptap/extension-code-block-lowlight": "^3.26.1",
-    "@tiptap/extension-color": "^3.26.1",
-    "@tiptap/extension-document": "^3.26.1",
-    "@tiptap/extension-floating-menu": "^3.26.1",
-    "@tiptap/extension-font-family": "^3.26.1",
-    "@tiptap/extension-hard-break": "^3.26.1",
-    "@tiptap/extension-heading": "^3.26.1",
-    "@tiptap/extension-highlight": "^3.26.1",
-    "@tiptap/extension-horizontal-rule": "^3.26.1",
-    "@tiptap/extension-image": "^3.26.1",
-    "@tiptap/extension-invisible-characters": "^3.26.1",
-    "@tiptap/extension-italic": "^3.26.1",
-    "@tiptap/extension-link": "^3.26.1",
-    "@tiptap/extension-list": "^3.26.1",
-    "@tiptap/extension-list-item": "^3.26.1",
-    "@tiptap/extension-paragraph": "^3.26.1",
-    "@tiptap/extension-placeholder": "^3.26.1",
-    "@tiptap/extension-strike": "^3.26.1",
-    "@tiptap/extension-subscript": "^3.26.1",
-    "@tiptap/extension-superscript": "^3.26.1",
-    "@tiptap/extension-table": "^3.26.1",
-    "@tiptap/extension-task-item": "^3.26.1",
-    "@tiptap/extension-task-list": "^3.26.1",
-    "@tiptap/extension-text": "^3.26.1",
-    "@tiptap/extension-text-align": "^3.26.1",
-    "@tiptap/extension-text-style": "^3.26.1",
-    "@tiptap/extension-typography": "^3.26.1",
-    "@tiptap/extension-underline": "^3.26.1",
-    "@tiptap/extension-youtube": "^3.26.1",
-    "@tiptap/extensions": "^3.26.1",
-    "@tiptap/pm": "^3.26.1",
-    "@tiptap/suggestion": "^3.26.1",
-    "@tiptap/vue-3": "^3.26.1",
+    "@tiptap/core": "^3.27.1",
+    "@tiptap/extension-blockquote": "^3.27.1",
+    "@tiptap/extension-bold": "^3.27.1",
+    "@tiptap/extension-bubble-menu": "^3.27.1",
+    "@tiptap/extension-code": "^3.27.1",
+    "@tiptap/extension-code-block": "^3.27.1",
+    "@tiptap/extension-code-block-lowlight": "^3.27.1",
+    "@tiptap/extension-color": "^3.27.1",
+    "@tiptap/extension-document": "^3.27.1",
+    "@tiptap/extension-floating-menu": "^3.27.1",
+    "@tiptap/extension-font-family": "^3.27.1",
+    "@tiptap/extension-hard-break": "^3.27.1",
+    "@tiptap/extension-heading": "^3.27.1",
+    "@tiptap/extension-highlight": "^3.27.1",
+    "@tiptap/extension-horizontal-rule": "^3.27.1",
+    "@tiptap/extension-image": "^3.27.1",
+    "@tiptap/extension-invisible-characters": "^3.27.1",
+    "@tiptap/extension-italic": "^3.27.1",
+    "@tiptap/extension-link": "^3.27.1",
+    "@tiptap/extension-list": "^3.27.1",
+    "@tiptap/extension-list-item": "^3.27.1",
+    "@tiptap/extension-paragraph": "^3.27.1",
+    "@tiptap/extension-placeholder": "^3.27.1",
+    "@tiptap/extension-strike": "^3.27.1",
+    "@tiptap/extension-subscript": "^3.27.1",
+    "@tiptap/extension-superscript": "^3.27.1",
+    "@tiptap/extension-table": "^3.27.1",
+    "@tiptap/extension-task-item": "^3.27.1",
+    "@tiptap/extension-task-list": "^3.27.1",
+    "@tiptap/extension-text": "^3.27.1",
+    "@tiptap/extension-text-align": "^3.27.1",
+    "@tiptap/extension-text-style": "^3.27.1",
+    "@tiptap/extension-typography": "^3.27.1",
+    "@tiptap/extension-underline": "^3.27.1",
+    "@tiptap/extension-youtube": "^3.27.1",
+    "@tiptap/extensions": "^3.27.1",
+    "@tiptap/pm": "^3.27.1",
+    "@tiptap/suggestion": "^3.27.1",
+    "@tiptap/vue-3": "^3.27.1",
     "emoji.json": "^16.0.0",
     "highlight.js": "^11.11.1",
     "linkifyjs": "^4.3.3",
@@ -116,8 +121,8 @@
     "vuetify": "^3.8.5 || ^4.0.0"
   },
   "devDependencies": {
-    "@intlify/unplugin-vue-i18n": "^11.2.3",
-    "@types/node": "^25.9.3",
+    "@intlify/unplugin-vue-i18n": "^11.2.4",
+    "@types/node": "^26.0.0",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitejs/plugin-vue-jsx": "^5.1.5",
     "eslint": "^10.5.0",
@@ -127,8 +132,9 @@
     "eslint-plugin-promise": "^7.3.0",
     "eslint-plugin-regexp": "3.1.0",
     "eslint-plugin-sonarjs": "2.0.4",
-    "eslint-plugin-unicorn": "^67.0.0",
+    "eslint-plugin-unicorn": "^68.0.0",
     "eslint-plugin-vue": "^10.9.2",
+    "jsdom": "^29.1.1",
     "sass-embedded": "^1.100.0",
     "stylelint": "^17.13.0",
     "stylelint-config-standard-scss": "17.0.0",
@@ -139,7 +145,8 @@
     "vite": "^8.0.16",
     "vite-plugin-vuetify": "^2.1.3",
     "vite-svg-loader": "^5.1.1",
+    "vitest": "^4.1.9",
     "vue-eslint-parser": "^10.4.1",
     "vue-tsc": "^3.3.5"
   }
-}
+}

package/src/components/Tiptapify.vue

@@ -6,7 +6,7 @@ import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
 import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef } from 'vue'
 import { default as Toolbar } from '@tiptapify/components/Toolbar/Index.vue'
 import { Editor, EditorContent } from '@tiptap/vue-3'
-import { TiptapifyEditor, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+import { TiptapifyAiOptions, TiptapifyEditor, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 
@@ -32,10 +32,12 @@ const props = defineProps({
   placeholder: { type: String, default () { return '' } },
   showWordsCount: { type: Boolean, default () { return true } },
   showCharactersCount: { type: Boolean, default () { return true } },
+  limit: { type: Number as PropType<number | null>, default () { return null } },
   defaultFontFamily: { type: String, default () { return 'Inter' } },
   fontMeasure: { type: String, default () { return 'px' } },
   rounded: { type: String, default () { return '0' } },
   customExtensions: { type: Array as PropType<toolbarSections>, default() { return [] } },
+  ai: { type: [Boolean, Object] as PropType<boolean | TiptapifyAiOptions>, default() { return false } },
   interactiveStyles: { type: Boolean, default() { return true } },
   loading: { type: Boolean, default() { return false } },
   loadingColor: { type: String, default() { return 'default' } },
@@ -49,6 +51,39 @@ const { t } = useI18n()
 const appTheme = useTheme()
 const currentTheme = ref(appTheme.global.name)
 
+const defaultAiPromptExamples = computed(() => [
+  {
+    title: t('ai.defaultExamples.improve.title'),
+    prompt: t('ai.defaultExamples.improve.prompt'),
+  },
+  {
+    title: t('ai.defaultExamples.proofReading.title'),
+    prompt: t('ai.defaultExamples.proofReading.prompt'),
+  },
+  {
+    title: t('ai.defaultExamples.summarize.title'),
+    prompt: t('ai.defaultExamples.summarize.prompt'),
+  },
+  {
+    title: t('ai.defaultExamples.expand.title'),
+    prompt: t('ai.defaultExamples.expand.prompt'),
+  },
+])
+
+const tiptapifyAi = computed(() => {
+  if (props.ai === false) {
+    return false
+  }
+
+  const options = props.ai === true ? {} : props.ai
+
+  return {
+    ...options,
+    enabled: true,
+    promptExamples: options.promptExamples?.length ? options.promptExamples : defaultAiPromptExamples.value,
+  }
+})
+
 function contentChanged() {
   emit('content-changed', { html: editor.value?.getHTML(), json: editor.value?.getJSON() })
 }
@@ -58,6 +93,7 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
     computed(() => props.placeholder || t('content.placeholder')).value,
     props.slashCommands,
     props.customExtensions,
+    props.limit,
     contentChanged,
     (editorInstance: Editor) => {
       (<TiptapifyEditor>editorInstance).interactiveStyles = props.interactiveStyles
@@ -73,6 +109,7 @@ const emit = defineEmits(['update:modelValue', 'editor-ready', 'content-changed'
 
 provide('tiptapifyEditor', editor)
 provide('tiptapifyI18n', { t })
+provide('tiptapifyAi', tiptapifyAi)
 
 editor.value?.chain().setFontFamily(props.defaultFontFamily).run()
 

package/src/components/Toolbar/ai.ts

@@ -0,0 +1,13 @@
+import { default as AiButton } from '@tiptapify/extensions/components/ai/Button.vue'
+import { markRaw } from 'vue'
+
+export default {
+  section: 'ai',
+  group: true,
+  components: [
+    {
+      name: 'ai',
+      component: markRaw(AiButton),
+    }
+  ]
+}

package/src/components/Toolbar/items.ts

@@ -1,4 +1,5 @@
 import actions from '@tiptapify/components/Toolbar/actions'
+import ai from '@tiptapify/components/Toolbar/ai'
 import alignment from '@tiptapify/components/Toolbar/alignment'
 import format from '@tiptapify/components/Toolbar/format'
 import formatExtra from '@tiptapify/components/Toolbar/formatExtra'
@@ -15,6 +16,7 @@ const items = {
   alignment,
   list,
   actions,
+  ai,
   misc,
 }
 

package/src/components/editorExtensions.ts

@@ -1,4 +1,5 @@
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import { Gapcursor } from '@tiptap/extensions'
 import { TextStyleKit } from '@tiptap/extension-text-style'
 import { BulletList, OrderedList, ListItem, ListKeymap, TaskList, TaskItem } from '@tiptap/extension-list'
 import { Selection, Focus, Placeholder, UndoRedo, Dropcursor, CharacterCount } from '@tiptap/extensions'
@@ -9,6 +10,7 @@ import { Heading } from '@tiptap/extension-heading'
 import { Bold } from '@tiptap/extension-bold'
 import { Italic } from '@tiptap/extension-italic'
 import { Strike } from '@tiptap/extension-strike'
+import { Link } from '@tiptap/extension-link'
 import { Code } from '@tiptap/extension-code'
 import { Blockquote } from '@tiptap/extension-blockquote'
 import { HardBreak } from '@tiptap/extension-hard-break'
@@ -51,8 +53,11 @@ const lowlight = createLowlight(common)
 // register language example
 // lowlight.register('ts', ts)
 
-export function editorExtensions (placeholder: string, slashCommands: SlashCommandsConfig, customExtensions: toolbarSections) {
+export function editorExtensions (placeholder: string, slashCommands: SlashCommandsConfig, customExtensions: toolbarSections, limit: number | null = null) {
+  const characterCount = limit && limit > 0 ? CharacterCount.configure({ limit }) : CharacterCount
+
   const extensions = [
+    Gapcursor,
     TextStyleKit,
     Document,
     Text,
@@ -61,6 +66,7 @@ export function editorExtensions (placeholder: string, slashCommands: SlashComma
     Bold,
     Italic,
     Strike,
+    Link,
     Blockquote,
     OrderedList,
     BulletList,
@@ -107,7 +113,7 @@ export function editorExtensions (placeholder: string, slashCommands: SlashComma
     Selection.configure({ className: 'selection' }),
     TextAlign.configure({ types: ['heading', 'paragraph'] }),
     Placeholder.configure({ placeholder }),
-    CharacterCount,
+    characterCount,
     InvisibleCharacters.configure({
       visible: false,
     }),
@@ -135,4 +141,4 @@ export function editorExtensions (placeholder: string, slashCommands: SlashComma
   }
 
   return extensions
-}
+}

package/src/components/index.ts

@@ -9,15 +9,16 @@ export function getTiptapEditor (
   placeholder: string,
   slashCommands: SlashCommandsConfig = true,
   customExtensions: toolbarSections,
+  limit: number | null = null,
   onUpdate: Function = () => {},
   onCreate?: (editor: Editor) => void,
 ): ShallowRef<Editor | undefined> {
-  const extensions = editorExtensions(placeholder, slashCommands, customExtensions)
+  const extensions = editorExtensions(placeholder, slashCommands, customExtensions, limit)
 
   return useEditor({
     content,
     extensions,
     onUpdate: ({ editor }) => onUpdate(),
-    onCreate: onCreate ? ({ editor }) => onCreate(editor) : undefined,
+    onCreate: onCreate ? ({ editor }) => onCreate(editor as Editor) : undefined,
   })
-}
+}

package/src/constants/style.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { setHeadingLevels, headingLevels, fontSizes, defaultFontSize, lineHeights, defaultLineHeight } from './style'
+
+describe('style constants', () => {
+  beforeEach(() => {
+    headingLevels.value = [1, 2, 3, 4, 5, 6]
+  })
+
+  it('sets custom heading levels', () => {
+    setHeadingLevels([2, 3, 4])
+    expect(headingLevels.value).toEqual([2, 3, 4])
+  })
+
+  it('does not change heading levels on empty array', () => {
+    setHeadingLevels([])
+    expect(headingLevels.value).toEqual([1, 2, 3, 4, 5, 6])
+  })
+
+  it('rejects levels below 1', () => {
+    expect(() => setHeadingLevels([0])).toThrow('customHeadingLevels must be between 1 and 6')
+  })
+
+  it('rejects levels above 6', () => {
+    expect(() => setHeadingLevels([7])).toThrow('customHeadingLevels must be between 1 and 6')
+  })
+
+  it('rejects any invalid level in a mixed array', () => {
+    expect(() => setHeadingLevels([1, 2, 7])).toThrow('customHeadingLevels must be between 1 and 6')
+  })
+
+  it('has valid fontSizes constant', () => {
+    expect(fontSizes).toContain(12)
+    expect(fontSizes).toContain(6)
+    expect(fontSizes).toContain(96)
+  })
+
+  it('has valid defaultFontSize', () => {
+    expect(defaultFontSize).toBe(12)
+  })
+
+  it('has valid lineHeights constant', () => {
+    expect(lineHeights).toContain(1)
+    expect(lineHeights).toContain(4)
+  })
+
+  it('has valid defaultLineHeight', () => {
+    expect(defaultLineHeight).toBe(1)
+  })
+})

package/src/extensions/PickerEventBus.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from 'vitest'
+import { PickerEventBus } from './PickerEventBus'
+
+describe('PickerEventBus', () => {
+  it('calls registered callback on emit', () => {
+    const callback = vi.fn()
+    PickerEventBus.on('close', callback)
+    PickerEventBus.emit('close', { type: 'emoji' })
+    expect(callback).toHaveBeenCalledWith({ type: 'emoji' })
+  })
+
+  it('does not call callback after off', () => {
+    const callback = vi.fn()
+    PickerEventBus.on('close', callback)
+    PickerEventBus.off('close', callback)
+    PickerEventBus.emit('close', { type: 'charmap' })
+    expect(callback).not.toHaveBeenCalled()
+  })
+
+  it('supports multiple listeners', () => {
+    const callback1 = vi.fn()
+    const callback2 = vi.fn()
+    PickerEventBus.on('close', callback1)
+    PickerEventBus.on('close', callback2)
+    PickerEventBus.emit('close', { type: 'emoji' })
+    expect(callback1).toHaveBeenCalledTimes(1)
+    expect(callback2).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not throw when emitting with no listeners', () => {
+    expect(() => PickerEventBus.emit('close', { type: 'emoji' })).not.toThrow()
+  })
+
+  it('does not throw when removing unregistered listener', () => {
+    const callback = vi.fn()
+    expect(() => PickerEventBus.off('close', callback)).not.toThrow()
+  })
+})

package/src/extensions/components/ai/Button.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+
+import * as mdi from '@mdi/js'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import AiDialog from '@tiptapify/extensions/components/ai/Dialog.vue'
+import defaults from '@tiptapify/constants/defaults'
+import { TiptapifyAiResolvedOptions, variantBtnTypes } from '@tiptapify/types/editor'
+import { computed, ComputedRef, inject, PropType, useTemplateRef } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
+
+defineProps({
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
+})
+
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
+const ai = inject('tiptapifyAi') as ComputedRef<TiptapifyAiResolvedOptions | false>
+const dialog = useTemplateRef('dialog')
+
+const isAvailable = computed(() => Boolean(ai?.value && ai.value.aiProvider))
+const mdiIcons = mdi as Record<string, string>
+const icon = computed(() => `mdiSvg:${mdiIcons.mdiSparklesOutline ?? mdiIcons.mdiSparkles ?? mdi.mdiCreationOutline}`)
+
+function showDialog() {
+  if (!isAvailable.value) {
+    return
+  }
+
+  dialog.value?.showDialog()
+}
+
+</script>
+
+<template>
+  <VBtn color="" :variant="variantBtn" size="32" :disabled="!isAvailable" @click="showDialog">
+    <VTooltip activator="parent">
+      {{ isAvailable ? t('ai.title') : t('ai.unavailable') }}
+    </VTooltip>
+    <BtnIcon :icon="icon" />
+  </VBtn>
+
+  <AiDialog ref="dialog" />
+</template>