tiptapify 0.1.4 → 0.1.6

package/src/components/Toolbar/actions.ts

@@ -1,6 +1,6 @@
-import { default as UndoButton } from "@tiptapify/extensions/components/actions/undo/Button.vue";
-import { default as RedoButton } from "@tiptapify/extensions/components/actions/redo/Button.vue";
-import { markRaw } from "vue";
+import { default as UndoButton } from '@tiptapify/extensions/components/actions/undo/Button.vue'
+import { default as RedoButton } from '@tiptapify/extensions/components/actions/redo/Button.vue'
+import { markRaw } from 'vue'
 
 export default {
   section: 'actions',

package/src/components/Toolbar/alignment.ts

@@ -1,8 +1,8 @@
-import { default as AlignmentLeftButton } from "@tiptapify/extensions/components/alignment/left/Button.vue";
-import { default as AlignmentCenterButton } from "@tiptapify/extensions/components/alignment/center/Button.vue";
-import { default as AlignmentRightButton } from "@tiptapify/extensions/components/alignment/right/Button.vue";
-import { default as AlignmentJustifyButton } from "@tiptapify/extensions/components/alignment/justify/Button.vue";
-import { markRaw } from "vue";
+import { default as AlignmentLeftButton } from '@tiptapify/extensions/components/alignment/left/Button.vue'
+import { default as AlignmentCenterButton } from '@tiptapify/extensions/components/alignment/center/Button.vue'
+import { default as AlignmentRightButton } from '@tiptapify/extensions/components/alignment/right/Button.vue'
+import { default as AlignmentJustifyButton } from '@tiptapify/extensions/components/alignment/justify/Button.vue'
+import { markRaw } from 'vue'
 
 export default {
   section: 'alignment',

package/src/components/Toolbar/format.ts

@@ -1,8 +1,8 @@
-import { default as BoldButton } from "@tiptapify/extensions/components/format/bold/Button.vue";
-import { default as ItalicButton } from "@tiptapify/extensions/components/format/italic/Button.vue";
-import { default as UnderlineButton } from "@tiptapify/extensions/components/format/underline/Button.vue";
-import { default as StrikeButton } from "@tiptapify/extensions/components/format/strike/Button.vue";
-import { markRaw } from "vue";
+import { default as BoldButton } from '@tiptapify/extensions/components/format/bold/Button.vue'
+import { default as ItalicButton } from '@tiptapify/extensions/components/format/italic/Button.vue'
+import { default as UnderlineButton } from '@tiptapify/extensions/components/format/underline/Button.vue'
+import { default as StrikeButton } from '@tiptapify/extensions/components/format/strike/Button.vue'
+import { markRaw } from 'vue'
 
 export default {
   section: 'format',

package/src/components/Toolbar/formatExtra.ts

@@ -1,9 +1,9 @@
-import { default as SupButton } from "@tiptapify/extensions/components/formatExtra/sup/Button.vue";
-import { default as SubButton } from "@tiptapify/extensions/components/formatExtra/sub/Button.vue";
-import { default as CodeButton } from "@tiptapify/extensions/components/formatExtra/code/Button.vue";
-import { default as CodeBlockButton } from "@tiptapify/extensions/components/formatExtra/codeBlock/Button.vue";
-import { default as BlockquoteButton } from "@tiptapify/extensions/components/formatExtra/quote/Button.vue";
-import { markRaw } from "vue";
+import { default as SupButton } from '@tiptapify/extensions/components/formatExtra/sup/Button.vue'
+import { default as SubButton } from '@tiptapify/extensions/components/formatExtra/sub/Button.vue'
+import { default as CodeButton } from '@tiptapify/extensions/components/formatExtra/code/Button.vue'
+import { default as CodeBlockButton } from '@tiptapify/extensions/components/formatExtra/codeBlock/Button.vue'
+import { default as BlockquoteButton } from '@tiptapify/extensions/components/formatExtra/quote/Button.vue'
+import { markRaw } from 'vue'
 
 export default {
   section: 'formatExtra',

package/src/components/Toolbar/items.ts

@@ -1,11 +1,11 @@
-import actions from "@tiptapify/components/Toolbar/actions";
-import alignment from "@tiptapify/components/Toolbar/alignment";
-import format from "@tiptapify/components/Toolbar/format";
-import formatExtra from "@tiptapify/components/Toolbar/formatExtra";
-import style from "@tiptapify/components/Toolbar/style";
-import list from "@tiptapify/components/Toolbar/list";
-import media from "@tiptapify/components/Toolbar/media";
-import misc from "@tiptapify/components/Toolbar/misc";
+import actions from '@tiptapify/components/Toolbar/actions'
+import alignment from '@tiptapify/components/Toolbar/alignment'
+import format from '@tiptapify/components/Toolbar/format'
+import formatExtra from '@tiptapify/components/Toolbar/formatExtra'
+import style from '@tiptapify/components/Toolbar/style'
+import list from '@tiptapify/components/Toolbar/list'
+import media from '@tiptapify/components/Toolbar/media'
+import misc from '@tiptapify/components/Toolbar/misc'
 
 const items = {
   style,

package/src/components/Toolbar/list.ts

@@ -1,9 +1,9 @@
-import { default as BulletListButton } from "@tiptapify/extensions/components/list/bullet/Button.vue";
-import { default as NumberedListButton } from "@tiptapify/extensions/components/list/numbered/Button.vue";
-import { default as TaskListButton } from "@tiptapify/extensions/components/list/task/Button.vue";
-import { default as IndentListButton } from "@tiptapify/extensions/components/list/indent/Button.vue";
-import { default as OutdentListButton } from "@tiptapify/extensions/components/list/outdent/Button.vue";
-import { markRaw } from "vue";
+import { default as BulletListButton } from '@tiptapify/extensions/components/list/bullet/Button.vue'
+import { default as NumberedListButton } from '@tiptapify/extensions/components/list/numbered/Button.vue'
+import { default as TaskListButton } from '@tiptapify/extensions/components/list/task/Button.vue'
+import { default as IndentListButton } from '@tiptapify/extensions/components/list/indent/Button.vue'
+import { default as OutdentListButton } from '@tiptapify/extensions/components/list/outdent/Button.vue'
+import { markRaw } from 'vue'
 
 export default {
   section: 'list',

package/src/components/Toolbar/media.ts

@@ -1,11 +1,11 @@
-import { default as EmojiButton } from "@tiptapify/extensions/components/media/emoji/Button.vue";
-import { default as CharmapButton } from "@tiptapify/extensions/components/media/charmap/Button.vue";
-import { default as LinkButton } from "@tiptapify/extensions/components/media/link/Button.vue";
-import { default as ImageButton } from "@tiptapify/extensions/components/media/image/Button.vue";
-import { default as IframeButton } from "@tiptapify/extensions/components/media/iframe/Button.vue";
-import { default as TableButton } from "@tiptapify/extensions/components/media/table/Button.vue";
-import { default as VideoButton } from "@tiptapify/extensions/components/media/video/Button.vue";
-import { markRaw } from "vue";
+import { default as EmojiButton } from '@tiptapify/extensions/components/media/emoji/Button.vue'
+import { default as CharmapButton } from '@tiptapify/extensions/components/media/charmap/Button.vue'
+import { default as LinkButton } from '@tiptapify/extensions/components/media/link/Button.vue'
+import { default as ImageButton } from '@tiptapify/extensions/components/media/image/Button.vue'
+import { default as IframeButton } from '@tiptapify/extensions/components/media/iframe/Button.vue'
+import { default as TableButton } from '@tiptapify/extensions/components/media/table/Button.vue'
+import { default as VideoButton } from '@tiptapify/extensions/components/media/video/Button.vue'
+import { markRaw } from 'vue'
 
 export default {
   section: 'media',

package/src/components/Toolbar/misc.ts

@@ -1,11 +1,11 @@
-import { default as LineButton } from "@tiptapify/extensions/components/misc/line/Button.vue";
-import { default as BreakButton } from "@tiptapify/extensions/components/misc/break/Button.vue";
-import { default as PreviewButton } from "@tiptapify/extensions/components/misc/preview/Button.vue";
-import { default as FullscreenButton } from "@tiptapify/extensions/components/misc/fullscreen/Button.vue";
-import { default as SourceButton } from "@tiptapify/extensions/components/misc/source/Button.vue";
-import { default as InvisibleCharButton } from "@tiptapify/extensions/components/misc/invisibleChar/Button.vue";
-import { default as FormatClearButton } from "@tiptapify/extensions/components/misc/formatClear/Button.vue";
-import { markRaw } from "vue";
+import { default as LineButton } from '@tiptapify/extensions/components/misc/line/Button.vue'
+import { default as BreakButton } from '@tiptapify/extensions/components/misc/break/Button.vue'
+import { default as PreviewButton } from '@tiptapify/extensions/components/misc/preview/Button.vue'
+import { default as FullscreenButton } from '@tiptapify/extensions/components/misc/fullscreen/Button.vue'
+import { default as SourceButton } from '@tiptapify/extensions/components/misc/source/Button.vue'
+import { default as InvisibleCharButton } from '@tiptapify/extensions/components/misc/invisibleChar/Button.vue'
+import { default as FormatClearButton } from '@tiptapify/extensions/components/misc/formatClear/Button.vue'
+import { markRaw } from 'vue'
 
 export default {
   section: 'misc',

package/src/components/Toolbar/style.ts

@@ -1,10 +1,10 @@
-import { default as HeadingButton } from "@tiptapify/extensions/components/style/heading/Button.vue";
-import { default as FontFamilyButton } from "@tiptapify/extensions/components/style/fontFamily/Button.vue";
-import { default as FontSizeButton } from "@tiptapify/extensions/components/style/fontSize/Button.vue";
-import { default as LineHeightButton } from "@tiptapify/extensions/components/style/lineHeight/Button.vue";
-import { default as ColorButton } from "@tiptapify/extensions/components/style/color/Button.vue";
-import { default as HighlightButton } from "@tiptapify/extensions/components/style/highlight/Button.vue";
-import { markRaw } from "vue";
+import { default as HeadingButton } from '@tiptapify/extensions/components/style/heading/Button.vue'
+import { default as FontFamilyButton } from '@tiptapify/extensions/components/style/fontFamily/Button.vue'
+import { default as FontSizeButton } from '@tiptapify/extensions/components/style/fontSize/Button.vue'
+import { default as LineHeightButton } from '@tiptapify/extensions/components/style/lineHeight/Button.vue'
+import { default as ColorButton } from '@tiptapify/extensions/components/style/color/Button.vue'
+import { default as HighlightButton } from '@tiptapify/extensions/components/style/highlight/Button.vue'
+import { markRaw } from 'vue'
 
 export default {
   section: 'style',

package/src/components/UI/TiptapifyDialog.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 
-import * as mdi from "@mdi/js";
-import { inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import * as mdi from '@mdi/js'
+import { inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 const props = defineProps({
   module: String,
@@ -10,20 +11,20 @@ const props = defineProps({
   maxWidth: { type: Number, default () { return 800 } },
 })
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 defineExpose({ open, close })
 const emits = defineEmits(['closeDialog'])
 
-const dialog = ref<boolean>(false)
+const showDialog = ref<boolean>(false)
 const movableHandler = ref(null)
 
 function open() {
-  dialog.value = true
+  showDialog.value = true
 }
 
 function close() {
-  dialog.value = false
+  showDialog.value = false
 }
 
 function emitClose() {
@@ -53,7 +54,7 @@ function dragElement(trigger: HTMLElement, container: HTMLElement) {
   }
 
   function elementDrag(e: MouseEvent) {
-    e.preventDefault();
+    e.preventDefault()
 
     coordinates.moveX = coordinates.cursorX - e.clientX
     coordinates.moveY = coordinates.cursorY - e.clientY
@@ -89,26 +90,26 @@ function dragElement(trigger: HTMLElement, container: HTMLElement) {
   }
 }
 
-watch(() => dialog.value, async () => {
+watch(() => showDialog.value, async () => {
   await nextTick()
 
   if (!movableHandler.value) {
     return
   }
 
-  if (dialog.value && !props.fullscreen) {
+  if (showDialog.value && !props.fullscreen) {
     dragElement(movableHandler.value.$el as HTMLElement, movableHandler.value.$el.parentNode as HTMLElement)
   }
 })
 
 function resizeListener() {
-  if (!dialog.value) {
+  if (!showDialog.value) {
     return
   }
 
-  const dialogCoordinates = movableHandler.value.$el.parentNode.getBoundingClientRect();
+  const dialogCoordinates = movableHandler.value.$el.parentNode.getBoundingClientRect()
 
-  function checkBoundLeftTop(type) {
+  function checkBoundLeftTop(type: string) {
     if (dialogCoordinates[type] < 0) {
       const dialogOffset = movableHandler.value.$el.parentNode.style[type]
       const newOffset = parseInt(dialogOffset) - dialogCoordinates[type]
@@ -139,7 +140,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <VDialog v-model="dialog" :max-width="maxWidth" :fullscreen="fullscreen" @click:outside="emitClose">
+  <VDialog v-model="showDialog" :max-width="maxWidth" :fullscreen="fullscreen" @click:outside="emitClose">
     <VCard>
       <VCardTitle
         ref="movableHandler"

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'
@@ -32,8 +33,8 @@ import { TiptapifyLink } from '@tiptapify/extensions/components/media/link'
 import { TiptapifyVideo } from '@tiptapify/extensions/components/media/video'
 import CodeBlockComponent from '@tiptapify/extensions/components/CodeBlockComponent.vue'
 import SlashCommands, { SlashCommandsExtensionOptions } from '@tiptapify/extensions/slash-commands'
-import { SlashCommandsConfig, SlashCommandId } from '@tiptapify/types/slashCommandsTypes'
-import { toolbarSections } from "@tiptapify/types/toolbarTypes";
+import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
+import { toolbarSections } from '@tiptapify/types/toolbarTypes'
 
 // load all languages with "all" or common languages with "common"
 import { common, createLowlight } from 'lowlight'
@@ -61,6 +62,7 @@ export function editorExtensions (placeholder: string, slashCommands: SlashComma
     Bold,
     Italic,
     Strike,
+    Link,
     Blockquote,
     OrderedList,
     BulletList,

package/src/components/index.ts

@@ -1,11 +1,11 @@
-import { Editor, useEditor } from "@tiptap/vue-3";
-import { editorExtensions } from "@tiptapify/components/editorExtensions";
-import { toolbarSections } from "@tiptapify/types/toolbarTypes";
-import { SlashCommandsConfig } from "@tiptapify/types/slashCommandsTypes";
-import { ShallowRef } from "vue";
+import { Editor, useEditor } from '@tiptap/vue-3'
+import { editorExtensions } from '@tiptapify/components/editorExtensions'
+import { toolbarSections } from '@tiptapify/types/toolbarTypes'
+import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
+import { ShallowRef } from 'vue'
 
 export function getTiptapEditor (
-  content: any,
+  content: string|object,
   placeholder: string,
   slashCommands: SlashCommandsConfig = true,
   customExtensions: toolbarSections,

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/constants/style.ts

@@ -1,4 +1,5 @@
-import { ref } from "vue";
+import { Level } from '@tiptap/extension-heading'
+import { Ref, ref } from 'vue'
 
 export const defaultFontSize = 12
 export const fontSizes = [6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 48, 64, 96]
@@ -6,8 +7,8 @@ export const fontSizes = [6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 48, 64, 96]
 export const defaultLineHeight = 1
 export const lineHeights = [1, 1.5, 2, 3, 4]
 
-export const headingLevels = ref([1, 2, 3, 4, 5, 6])
-export function setHeadingLevels(customHeadingLevels: number[]) {
+export const headingLevels: Ref<Level[]> = ref([1, 2, 3, 4, 5, 6])
+export function setHeadingLevels(customHeadingLevels: Level[]) {
   if (customHeadingLevels.length) {
     customHeadingLevels.forEach(level => {
       if (level < 1 || level > 6) {

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()
+  })
+})