tiptapify 0.1.5 → 0.1.6

package/index.d.ts

@@ -42,6 +42,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'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "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,6 +145,7 @@
     "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/editorExtensions.ts

@@ -9,6 +9,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'
@@ -61,6 +62,7 @@ export function editorExtensions (placeholder: string, slashCommands: SlashComma
     Bold,
     Italic,
     Strike,
+    Link,
     Blockquote,
     OrderedList,
     BulletList,

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/media/link/LinkDialog.vue

@@ -21,7 +21,7 @@ const generateLinkAttrs = () => ({
   href: '',
   target: targetAttrs.value[0],
   cssClass: '',
-  rel: ''
+  rel: []
 })
 
 const relAttrs = ['alternate', 'author', 'bookmark', 'external', 'help', 'license', 'me', 'next', 'nofollow', 'noopener', 'noreferrer', 'opener', 'prev', 'privacy-policy', 'search', 'tag', 'terms-of-service']
@@ -43,10 +43,10 @@ const isDisabled = computed(() => {
 
 function apply() {
   let { href, target, rel, cssClass } = attrs.value
-  rel = rel?.length ? rel.join(' ') : null
+  const relStr = rel?.length ? rel.join(' ') : null
 
   if (href) {
-    editor.value.chain().focus().extendMarkRange('link').setLink({ href, target: target.value, rel, class: cssClass }).run()
+    editor.value.chain().focus().extendMarkRange('link').setLink({ href, target: target.value, rel: relStr, class: cssClass }).run()
   }
 
   close()
@@ -61,7 +61,7 @@ function clear() {
 function close() {
   attrs.value = generateLinkAttrs()
 
-  dialog.value.close()
+  dialog.value?.close()
 }
 
 const showLink = (event: CustomEvent) => {
@@ -74,7 +74,7 @@ const showLink = (event: CustomEvent) => {
   attrs.value.rel = event.detail.link?.rel?.split(' ')
   attrs.value.cssClass = event.detail.link?.class
 
-  dialog.value.open()
+  dialog.value?.open()
 }
 
 onMounted(() => {

package/src/utils/helpers.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest'
+import helpers from './helpers'
+
+describe('ucFirst', () => {
+  it('capitalizes the first character of a string', () => {
+    expect(helpers.ucFirst('hello')).toBe('Hello')
+  })
+
+  it('returns empty string for empty input', () => {
+    expect(helpers.ucFirst('')).toBe('')
+  })
+
+  it('converts snake_case to words and capitalizes', () => {
+    expect(helpers.ucFirst('hello_world', true)).toBe('Hello world')
+  })
+
+  it('converts kebab-case to words and capitalizes', () => {
+    expect(helpers.ucFirst('hello-world', false, true)).toBe('Hello world')
+  })
+
+  it('converts both snake_case and kebab-case', () => {
+    expect(helpers.ucFirst('hello_world-test', true, true)).toBe('Hello world test')
+  })
+
+  it('handles already capitalized string', () => {
+    expect(helpers.ucFirst('Hello')).toBe('Hello')
+  })
+
+  it('handles single character', () => {
+    expect(helpers.ucFirst('a')).toBe('A')
+  })
+})