tiptapify 0.0.9 → 0.0.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -94,7 +94,7 @@
     "highlight.js": "^11.11.1",
     "linkifyjs": "^4.3.1",
     "lowlight": "^3.3.0",
-    "vue-i18n": "^11.1.6"
+    "vue-i18n": "^11.1.9"
   },
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
@@ -104,17 +104,17 @@
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@rollup/plugin-alias": "^5.1.1",
-    "@types/node": "^22.15.32",
+    "@types/node": "^22.16.4",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitejs/plugin-vue-jsx": "^4.2.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
     "sass-embedded": "^1.89.2",
     "typescript": "^5.8.3",
-    "unplugin-vue-components": "^28.7.0",
+    "unplugin-vue-components": "^28.8.0",
     "vite": "^6.3.5",
     "vite-plugin-vuetify": "^2.1.1",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^2.2.12"
   }
 }

package/src/components/Toolbar/GroupBtn.vue

@@ -4,25 +4,21 @@ import { useI18n } from "vue-i18n";
 
 import { ToolbarItem } from "@tiptapify/components/Toolbar/items";
 
-import helpers from "@tiptapify/utils/helpers";
-
 defineProps({
   variant: { type: String, default () { return 'flat' }},
   toolbarItem: { type: Object as PropType<ToolbarItem>, default() { return {} }}
 })
 
 const { t } = useI18n();
-
-const { ucFirst } = helpers;
 </script>
 
 <template>
   <VBtn v-bind="toolbarItem?.props ?? {}" v-on="toolbarItem?.attrs ?? {}" size="32">
-    <VTooltip :text="ucFirst(t(toolbarItem.tooltip))" location="top" activator="parent" />
+    <VTooltip :text="t(toolbarItem.tooltip)" location="top" activator="parent" />
 
     <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="small" />
     <span v-else class="menu-item-title">
-      {{ ucFirst(t(toolbarItem.name)) }}
+      {{ t(toolbarItem.name) }}
     </span>
 
     <VIcon v-if="toolbarItem.icon2" v-bind="toolbarItem?.icon2Props ?? {}" :icon="toolbarItem.icon2" size="small" style="position: absolute;" />

package/src/components/Toolbar/GroupDropdown.vue

@@ -2,12 +2,8 @@
 import { defineProps, PropType } from 'vue'
 import { useI18n } from "vue-i18n";
 
-import helpers from "@tiptapify/utils/helpers";
-
 import { ToolbarItem } from "@tiptapify/components/Toolbar/items";
 
-const { ucFirst } = helpers;
-
 defineProps({
   variant: { type: String, default () { return 'flat' }},
   nested: { type: Boolean, default () { return false }},
@@ -22,11 +18,11 @@ const { t } = useI18n();
   <VMenu v-model="toolbarItem.modelValue" v-bind="toolbarItem.props">
     <template v-if="!nested" #activator="{ props: menuProps }">
       <VBtn v-bind="{ ...menuProps, ...toolbarItem.props }" size="32">
-        <VTooltip :text="ucFirst(t(toolbarItem.tooltip))" location="top" activator="parent" />
+        <VTooltip :text="t(toolbarItem.tooltip)" location="top" activator="parent" />
 
         <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="small" />
         <span v-else class="menu-item-title">
-          {{ ucFirst(t(toolbarItem.name)) }}
+          {{ t(toolbarItem.name) }}
         </span>
       </VBtn>
     </template>
@@ -47,7 +43,7 @@ const { t } = useI18n();
             v-bind="item.props ?? {}"
             v-on="item?.attrs ?? {}"
         >
-          <VTooltip v-if="item.tooltip" :text="ucFirst(t(item.tooltip))" location="top" activator="parent" />
+          <VTooltip v-if="item.tooltip" :text="t(item.tooltip)" location="top" activator="parent" />
 
           <VIcon v-if="item.icon" :icon="item.icon" size="small" />
 
@@ -56,7 +52,7 @@ const { t } = useI18n();
               {{ item.name }}
             </template>
             <template v-else>
-              {{ ucFirst(t(item.toggle)) }}
+              {{ t(item.toggle) }}
             </template>
           </span>
 

package/src/components/Toolbar/Index.vue

@@ -25,11 +25,11 @@ const props = defineProps({
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const theme = useTheme()
+const appTheme = useTheme()
 
 const items = toolbarItems(
     editor,
-    theme,
+    appTheme,
     computed(() => props.fontMeasure).value,
     { list: computed(() => props.items).value, exclude: computed(() => props.itemsExclude).value },
     computed(() => props.headingLevels).value

package/src/components/Toolbar/items/format.ts

@@ -30,19 +30,6 @@ export function getFormatItems(editor: Editor) {
         click: () => editor.chain().focus().toggleItalic().run()
       }
     },
-    strike: {
-      name: 'strike',
-      tooltip: 'format.strike',
-      icon: mdi.mdiFormatStrikethroughVariant,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleStrike().run()),
-        color: computed(() => editor.isActive('strike') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleStrike().run()
-      }
-    },
     underline: {
       name: 'underline',
       tooltip: 'format.underline',
@@ -55,6 +42,19 @@ export function getFormatItems(editor: Editor) {
       attrs: {
         click: () => editor.chain().focus().toggleUnderline().run()
       }
+    },
+    strike: {
+      name: 'strike',
+      tooltip: 'format.strike',
+      icon: mdi.mdiFormatStrikethroughVariant,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleStrike().run()),
+        color: computed(() => editor.isActive('strike') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleStrike().run()
+      }
     }
   }
 }

package/src/components/Toolbar/items/formatExtra.ts

@@ -62,7 +62,7 @@ export function getFormatExtraItems(editor: Editor) {
       icon: mdi.mdiCommentQuote,
       enabled: true,
       props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleBlockquote().run()),
+        disabled: computed(() => !editor.can().chain().focus().toggleBlockquote().run() || editor.isActive('codeBlock') || editor.isActive('code')),
         color: computed(() => editor.isActive('blockquote') ? 'primary' : ''),
       },
       attrs: {

package/src/components/Toolbar/items/style.ts

@@ -73,6 +73,9 @@ export function getStyleItems(editor: Editor, theme: any, fontMeasure: string, c
       icon: mdi.mdiFormatFont,
       modelValue: false,
       enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().unsetFontFamily().run()),
+      },
       attrs: {
         click: () => editor.chain().focus().unsetFontFamily().run()
       },
@@ -99,6 +102,9 @@ export function getStyleItems(editor: Editor, theme: any, fontMeasure: string, c
       icon: mdi.mdiFormatSize,
       modelValue: false,
       enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().unsetFontSize().run()),
+      },
       attrs: {
         click: () => editor.chain().focus().unsetFontSize().run()
       },
@@ -124,6 +130,9 @@ export function getStyleItems(editor: Editor, theme: any, fontMeasure: string, c
       icon: mdi.mdiFormatLineHeight,
       modelValue: null,
       enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().unsetLineHeight().run()),
+      },
       attrs: {
         click: () => editor.chain().focus().unsetLineHeight().run()
       },
@@ -149,7 +158,11 @@ export function getStyleItems(editor: Editor, theme: any, fontMeasure: string, c
       icon: mdi.mdiFormatColorFill,
       icon2: mdi.mdiColorHelper,
       enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
+      },
       icon2Props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
         color: computed(() => {
           const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
           return editor.getAttributes('highlight').color || defaultColor
@@ -169,7 +182,11 @@ export function getStyleItems(editor: Editor, theme: any, fontMeasure: string, c
       icon: mdi.mdiFormatColorText,
       icon2: mdi.mdiColorHelper,
       enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
+      },
       icon2Props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
         color: computed(() => {
           const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
           return editor.getAttributes('textStyle').color || defaultColor

package/src/components/UI/Dialog.vue

@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+
+import * as mdi from "@mdi/js";
+import { nextTick, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+const props = defineProps({
+  module: String,
+  fullscreen: { type: Boolean, default () { return false } },
+  maxWidth: { type: Number, default () { return 800 } },
+})
+
+const { t } = useI18n();
+
+defineExpose({ open, close })
+const emits = defineEmits(['closeDialog'])
+
+const dialog = ref<boolean>(false)
+const movableHandler = ref(null)
+
+function open() {
+  dialog.value = true
+}
+
+function close() {
+  dialog.value = false
+}
+
+function emitClose() {
+  emits('closeDialog')
+
+  close()
+}
+
+function dragElement(trigger: HTMLElement, container: HTMLElement) {
+  const coordinates = {
+    moveX: 0,
+    moveY: 0,
+    cursorX: 0,
+    cursorY: 0,
+  }
+
+  trigger.onmousedown = dragMouseDown
+
+  function dragMouseDown(e: MouseEvent) {
+    e.preventDefault()
+
+    coordinates.cursorX = e.clientX
+    coordinates.cursorY = e.clientY
+
+    document.onmouseup = closeDragElement
+    document.onmousemove = elementDrag
+  }
+
+  function elementDrag(e: MouseEvent) {
+    e.preventDefault();
+
+    coordinates.moveX = coordinates.cursorX - e.clientX
+    coordinates.moveY = coordinates.cursorY - e.clientY
+    coordinates.cursorX = e.clientX
+    coordinates.cursorY = e.clientY
+
+    const parentOffsetLeft = container.parentNode.offsetLeft
+    const parentOffsetTop = container.parentNode.offsetTop
+
+    let left = container.offsetLeft - coordinates.moveX
+    if (left < (parentOffsetLeft * -1)) {
+      left = (parentOffsetLeft * -1)
+    }
+    if (left >= parentOffsetLeft) {
+      left = parentOffsetLeft
+    }
+
+    let top = container.offsetTop - coordinates.moveY
+    if (top < (parentOffsetTop * -1)) {
+      top = (parentOffsetTop * -1)
+    }
+    if (top >= parentOffsetTop) {
+      top = parentOffsetTop
+    }
+
+    container.style.left = `${left}px`
+    container.style.top = `${top}px`
+  }
+
+  function closeDragElement() {
+    document.onmouseup = null
+    document.onmousemove = null
+  }
+}
+
+watch(() => dialog.value, async () => {
+  await nextTick()
+
+  if (!movableHandler.value) {
+    return
+  }
+
+  if (dialog.value && !props.fullscreen) {
+    dragElement(movableHandler.value.$el as HTMLElement, movableHandler.value.$el.parentNode as HTMLElement)
+  }
+})
+</script>
+
+<template>
+  <VDialog v-model="dialog" :max-width="maxWidth" :fullscreen="fullscreen" absolute @click:outside="emitClose">
+    <VCard>
+      <VCardTitle ref="movableHandler" :class="`d-flex ${!fullscreen ? 'tiptapify-movable-handler' : ''}`" style="user-select: none;">
+        <VLabel>
+          {{ t(`dialog.${module}.title`) }}
+        </VLabel>
+
+        <VSpacer />
+
+        <VBtn density="compact" class="tiptapify-dialog-close" variant="elevated" elevation="4" icon @click="emitClose">
+          <VIcon size="x-small" :icon="mdi.mdiClose" />
+        </VBtn>
+      </VCardTitle>
+
+      <VDivider />
+
+      <slot name="content" />
+
+      <slot name="actions" />
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss" scoped>
+  :deep(.v-overlay__content) {
+    position: fixed;
+  }
+
+  .tiptapify-movable-handler, :deep(.tiptapify-movable-handler > *) {
+    cursor: move;
+  }
+
+  .tiptapify-dialog-close:hover {
+    cursor: pointer;
+  }
+</style>

package/src/extensions/components/ImageDialog.vue

@@ -1,20 +1,16 @@
 <script setup lang="ts">
 
-import * as mdi from '@mdi/js'
 import { Editor } from "@tiptap/vue-3";
+import Dialog from "@tiptapify/components/UI/Dialog.vue";
 
 import { useI18n } from 'vue-i18n'
 import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
 
-import helpers from '@tiptapify/utils/helpers'
-
 defineProps({
   variantBtn: { type: String, default() { return 'elevated' }},
   variantField: { type: String, default() { return 'solo' }}
 })
 
-const { ucFirst } = helpers
-
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 const { t } = useI18n()
 
@@ -27,7 +23,7 @@ const generateImageAttrs = () => ({
 
 const attrs = ref(generateImageAttrs())
 
-const dialog = ref<boolean>(false)
+const dialog = ref(null)
 
 const isDisabled = computed(() => {
   const { src } = attrs.value
@@ -64,7 +60,7 @@ function clear() {
 }
 
 function close() {
-  dialog.value = false
+  dialog.value.close()
 
   attrs.value = generateImageAttrs()
 }
@@ -75,7 +71,7 @@ const showTiptapifyImage = (event: CustomEvent) => {
   attrs.value.width = event.detail.image?.width
   attrs.value.height = event.detail.image?.height
 
-  dialog.value = true;
+  dialog.value.open()
 }
 
 onMounted(() => {
@@ -88,55 +84,47 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VDialog v-model="dialog" max-width="800" absolute @click:outside="close">
-    <VCard>
-      <VToolbar class="px-6" density="compact">
-        <span class="headline">{{ ucFirst(t('dialog.image.title')) }}</span>
-
-        <VSpacer />
-
-        <VBtn class="mx-0" icon @click="close">
-          <VIcon :icon="mdi.mdiClose" />
-        </VBtn>
-      </VToolbar>
-
+  <Dialog ref="dialog" module="image" :max-width="800">
+    <template #content>
       <VCardText>
         <VRow>
           <VCol cols="12">
-            <VTextField v-model="attrs.src" :variant="variantField" :label="ucFirst(t('dialog.image.src'))" />
+            <VTextField v-model="attrs.src" density="compact" variant="outlined" :label="t('dialog.image.src')" />
           </VCol>
 
           <VCol cols="12" md="6">
-            <VTextField v-model="attrs.alt" :variant="variantField" :label="ucFirst(t('dialog.image.alt'))" />
+            <VTextField v-model="attrs.alt" density="compact" variant="outlined" :label="t('dialog.image.alt')" />
           </VCol>
 
           <VCol cols="12" md="3">
-            <VTextField v-model="attrs.width" type="number" :variant="variantField" :precision="0" :min="1" :label="ucFirst(t('dialog.image.width'))" />
+            <VTextField v-model="attrs.width" type="number" density="compact" variant="outlined" :precision="0" :min="1" :label="t('dialog.image.width')" />
           </VCol>
 
           <VCol cols="12" md="3">
-            <VTextField v-model="attrs.height" type="number" :variant="variantField" :precision="0" :min="1" :label="ucFirst(t('dialog.image.height'))" />
+            <VTextField v-model="attrs.height" type="number" density="compact" variant="outlined" :precision="0" :min="1" :label="t('dialog.image.height')" />
           </VCol>
         </VRow>
       </VCardText>
+    </template>
 
+    <template #actions>
       <VCardActions>
         <VRow>
           <VCol class="d-flex justify-start">
             <VBtn color="warning" v-if="editor.isActive('image')" :variant="variantBtn" :disabled="isDisabled" @click="clear">
-              {{ ucFirst(t('dialog.clear')) }}
+              {{ t('dialog.clear') }}
             </VBtn>
           </VCol>
           <VCol class="d-flex justify-end">
             <VBtn :variant="variantBtn" @click="close" class="mr-2">
-              {{ ucFirst(t('dialog.close')) }}
+              {{ t('dialog.close') }}
             </VBtn>
             <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">
-              {{ ucFirst(t('dialog.apply')) }}
+              {{ t('dialog.apply') }}
             </VBtn>
           </VCol>
         </VRow>
       </VCardActions>
-    </VCard>
-  </VDialog>
+    </template>
+  </Dialog>
 </template>