tiptapify 0.1.4 → 0.1.5

package/src/extensions/components/media/image/ImageDialog.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
 
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
-import defaults from "@tiptapify/constants/defaults";
+import * as mdi from '@mdi/js'
+import { Editor } from '@tiptap/vue-3'
+import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
+import defaults from '@tiptapify/constants/defaults'
+import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
 
-import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
+import { computed, inject, onMounted, onUnmounted, PropType, Ref, ref, useTemplateRef } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default() { return defaults.variantBtn }},
-  variantField: { type: String, default() { return defaults.variantField }}
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
+  variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const generateImageAttrs = () => ({
   src: '',
@@ -25,7 +27,7 @@ const generateImageAttrs = () => ({
 
 const attrs = ref(generateImageAttrs())
 
-const dialog = ref(null)
+const dialog = useTemplateRef('dialog')
 
 const isDisabled = computed(() => {
   const { src } = attrs.value
@@ -33,7 +35,7 @@ const isDisabled = computed(() => {
 })
 
 const keepRatio = ref(true)
-const ratio = ref(null)
+const ratio: Ref<string> = ref('')
 function setRatio(force: boolean = false) {
   if (!keepRatio.value && !force) {
     return
@@ -60,7 +62,7 @@ function updateSizeRatio(dim: string) {
 
   const target = source === 'width' ? 'height' : 'width'
 
-  attrs.value[target] = parseFloat(sizeRatio).toFixed(0)
+  attrs.value[target] = parseFloat(String(sizeRatio)).toFixed(0)
 }
 
 function apply() {
@@ -97,7 +99,7 @@ function clear() {
 }
 
 function close() {
-  dialog.value.close()
+  dialog.value?.close()
 
   attrs.value = generateImageAttrs()
   ratio.value = null
@@ -114,7 +116,7 @@ const showTiptapifyImage = (event: CustomEvent) => {
   attrs.value.width = event.detail.image?.width
   attrs.value.height = event.detail.image?.height
 
-  dialog.value.open()
+  dialog.value?.open()
 }
 
 onMounted(() => {
@@ -139,51 +141,53 @@ onUnmounted(() => {
         <div class="tiptapify-grid-row">
           <div>
             <VTextField
-                v-model="attrs.alt"
-                density="comfortable"
-                :label="t('dialog.image.alt')" />
+              v-model="attrs.alt"
+              density="comfortable"
+              :label="t('dialog.image.alt')"
+            />
           </div>
         </div>
 
         <div class="tiptapify-grid-row">
           <div>
             <VTextField
-                v-model="attrs.title"
-                density="comfortable"
-                :label="t('dialog.image.title')" />
+              v-model="attrs.title"
+              density="comfortable"
+              :label="t('dialog.image.title')"
+            />
           </div>
         </div>
 
         <div class="tiptapify-grid-row">
           <div class="tiptapify-image-inputs-container">
             <VTextField
-                v-model="attrs.width"
-                type="number"
-                density="comfortable"
-                :precision="0"
-                :min="1"
-                :label="t('dialog.image.width')"
-                @change="setRatio"
-                @update:model-value="updateSizeRatio('width')"
+              v-model="attrs.width"
+              type="number"
+              density="comfortable"
+              :precision="0"
+              :min="1"
+              :label="t('dialog.image.width')"
+              @change="setRatio"
+              @update:model-value="updateSizeRatio('width')"
             />
             <VTextField
-                v-model="attrs.height"
-                type="number"
-                density="comfortable"
-                :precision="0"
-                :min="1"
-                :label="t('dialog.image.height')"
-                @change="setRatio"
-                @update:model-value="updateSizeRatio('height')"
+              v-model="attrs.height"
+              type="number"
+              density="comfortable"
+              :precision="0"
+              :min="1"
+              :label="t('dialog.image.height')"
+              @change="setRatio"
+              @update:model-value="updateSizeRatio('height')"
             />
           </div>
           <div>
             <VBtn
-                v-model="keepRatio"
-                :color="keepRatio ? 'primary' : 'secondary'"
-                size="48"
-                :variant="variantBtn"
-                @click="keepRatio = !keepRatio"
+              v-model="keepRatio"
+              :color="keepRatio ? 'primary' : 'secondary'"
+              size="48"
+              :variant="variantBtn"
+              @click="keepRatio = !keepRatio"
             >
               <VIcon :icon="keepRatio ? `mdiSvg:${mdi.mdiLock}` : `mdiSvg:${mdi.mdiLockOpenVariant}`" />
               <VTooltip activator="parent">
@@ -199,12 +203,12 @@ onUnmounted(() => {
       <VCardActions>
         <VRow>
           <VCol class="d-flex justify-start">
-            <VBtn color="warning" v-if="editor.isActive('image')" :variant="variantBtn" :disabled="isDisabled" @click="clear">
+            <VBtn v-if="editor.isActive('image')" color="warning" :variant="variantBtn" :disabled="isDisabled" @click="clear">
               {{ t('dialog.clear') }}
             </VBtn>
           </VCol>
           <VCol class="d-flex justify-end">
-            <VBtn :variant="variantBtn" @click="close" class="mr-2">
+            <VBtn :variant="variantBtn" class="mr-2" @click="close">
               {{ t('dialog.close') }}
             </VBtn>
             <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">

package/src/extensions/components/media/link/Button.vue

@@ -1,20 +1,21 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import LinkDialog from "@tiptapify/extensions/components/media/link/LinkDialog.vue";
-import { computed, inject, Ref } from "vue";
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import LinkDialog from '@tiptapify/extensions/components/media/link/LinkDialog.vue'
+import { TiptapifyEditor, variantBtnTypes } from '@tiptapify/types/editor'
+import { computed, inject, PropType, Ref } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
-const editor = inject('tiptapifyEditor') as Ref<Editor>
+const editor = inject('tiptapifyEditor') as Ref<TiptapifyEditor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const icon = computed(() => editor.value.isActive('tiptapifyLink') ? `mdiSvg:${mdi.mdiLinkOff}` : `mdiSvg:${mdi.mdiLink}`)
 
@@ -22,10 +23,10 @@ const icon = computed(() => editor.value.isActive('tiptapifyLink') ? `mdiSvg:${m
 
 <template>
   <VBtn
-      :color="editor.isActive('link') ? 'primary' : ''"
-      :variant="variantBtn"
-      @click="editor.commands.showLink()"
-      size="32"
+    :color="editor.isActive('link') ? 'primary' : ''"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.showLink()"
   >
     <VTooltip activator="parent">
       {{ t('media.link') }}

package/src/extensions/components/media/link/LinkDialog.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
 
-import { Editor } from "@tiptap/vue-3";
-import defaults from "@tiptapify/constants/defaults";
+import { Editor } from '@tiptap/vue-3'
+import defaults from '@tiptapify/constants/defaults'
+import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
 
-import { computed, inject, onMounted, onUnmounted, Ref, ref, watch } from 'vue'
+import { computed, inject, onMounted, onUnmounted, PropType, Ref, ref, useTemplateRef, watch } from 'vue'
 
-import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue"
+import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default() { return defaults.variantBtn }},
-  variantField: { type: String, default() { return 'outlined' }}
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
+  variantField: { type: String as PropType<variantFieldTypes>, default() { return 'outlined' } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const generateLinkAttrs = () => ({
   href: '',
@@ -32,7 +34,7 @@ const targetAttrs = computed(() => [
 const attrs = ref(generateLinkAttrs())
 const hrefInvalid = ref(false)
 
-const dialog = ref(null)
+const dialog = useTemplateRef('dialog')
 
 const isDisabled = computed(() => {
   const { href } = attrs.value
@@ -68,7 +70,7 @@ const showLink = (event: CustomEvent) => {
   }
 
   attrs.value.href = event.detail.link?.href ?? ''
-  attrs.value.target = targetAttrs.value.find(item => item.value === event.detail.link?.target) ?? targetAttrs[0]
+  attrs.value.target = targetAttrs.value.find(item => item.value === event.detail.link?.target) ?? targetAttrs.value[0]
   attrs.value.rel = event.detail.link?.rel?.split(' ')
   attrs.value.cssClass = event.detail.link?.class
 
@@ -113,23 +115,23 @@ watch(() => attrs.value.href, () => {
         <VRow>
           <VCol cols="12">
             <VTextField
-                v-model="attrs.href"
-                density="compact"
-                variant="outlined"
-                :label="t('dialog.link.href')"
-                :error-messages="hrefInvalid ? t('dialog.link.href_error') : ''"
-                autofocus
+              v-model="attrs.href"
+              density="compact"
+              variant="outlined"
+              :label="t('dialog.link.href')"
+              :error-messages="hrefInvalid ? t('dialog.link.href_error') : ''"
+              autofocus
             />
           </VCol>
 
           <VCol cols="12" md="4">
             <VSelect
-                v-model="attrs.target"
-                :items="targetAttrs"
-                :label="t('dialog.link.target')"
-                variant="outlined"
-                return-object
-                density="compact"
+              v-model="attrs.target"
+              :items="targetAttrs"
+              :label="t('dialog.link.target')"
+              variant="outlined"
+              return-object
+              density="compact"
             />
           </VCol>
 
@@ -139,15 +141,15 @@ watch(() => attrs.value.href, () => {
 
           <VCol cols="12">
             <VSelect
-                v-model="attrs.rel"
-                :items="relAttrs"
-                :label="t('dialog.link.rel')"
-                variant="outlined"
-                multiple
-                chips
-                closable-chips
-                clearable
-                density="compact"
+              v-model="attrs.rel"
+              :items="relAttrs"
+              :label="t('dialog.link.rel')"
+              variant="outlined"
+              multiple
+              chips
+              closable-chips
+              clearable
+              density="compact"
             />
           </VCol>
         </VRow>
@@ -158,12 +160,12 @@ watch(() => attrs.value.href, () => {
       <VCardActions>
         <VRow>
           <VCol class="d-flex justify-start">
-            <VBtn color="warning" v-if="editor.isActive('link')" :variant="variantBtn" :disabled="isDisabled" @click="clear">
+            <VBtn v-if="editor.isActive('link')" color="warning" :variant="variantBtn" :disabled="isDisabled" @click="clear">
               {{ t('dialog.clear') }}
             </VBtn>
           </VCol>
           <VCol class="d-flex justify-end">
-            <VBtn :variant="variantBtn" @click="close" class="mr-2">
+            <VBtn :variant="variantBtn" class="mr-2" @click="close">
               {{ t('dialog.close') }}
             </VBtn>
             <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled || hrefInvalid" @click="apply">

package/src/extensions/components/media/link/index.ts

@@ -1,23 +1,22 @@
-import Link from "@tiptap/extension-link";
-
-const name: string = 'link'
+import { CommandProps } from '@tiptap/core'
+import Link from '@tiptap/extension-link'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
-    link: {
+    tiptapify_link: {
       showLink: () => ReturnType
     }
   }
 }
 
 export const TiptapifyLink = Link.extend({
-  name,
+  name: 'tiptapify_link',
 
   addCommands() {
     return {
       ...this.parent?.(),
-      showLink: () => ({ editor }) => {
-        const event = new CustomEvent(`tiptapify-show-${name}`, {
+      showLink: () => ({ editor }: CommandProps) => {
+        const event = new CustomEvent('tiptapify-show-link', {
           detail: {
             link: editor.getAttributes('link'),
             editorId: editor.instanceId

package/src/extensions/components/media/table/Button.vue

@@ -1,22 +1,24 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import ColumnActions from "@tiptapify/extensions/components/media/table/ColumnActions.vue";
-import RowActions from "@tiptapify/extensions/components/media/table/RowActions.vue";
-import TableBuilder from "@tiptapify/extensions/components/media/table/TableBuilder.vue";
-import { inject, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import ColumnActions from '@tiptapify/extensions/components/media/table/ColumnActions.vue'
+import RowActions from '@tiptapify/extensions/components/media/table/RowActions.vue'
+import TableBuilder from '@tiptapify/extensions/components/media/table/TableBuilder.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, PropType, Ref } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 
 const rowActionsDisabled = () => {
@@ -34,11 +36,11 @@ const columnActionsDisabled = () => {
 
 <template>
   <VBtn
-      :id="`tiptapify-table-button-${editor.instanceId}`"
-      :color="editor.isActive('table') ? 'primary' : ''"
-      :disabled="!editor.can().chain().focus().insertTable().run()"
-      :variant="variantBtn"
-      size="32"
+    :id="`tiptapify-table-button-${editor.instanceId}`"
+    :color="editor.isActive('table') ? 'primary' : ''"
+    :disabled="!editor.can().chain().focus().insertTable().run()"
+    :variant="variantBtn"
+    size="32"
   >
     <BtnIcon :icon="`mdiSvg:${mdi.mdiTable}`" />
   </VBtn>
@@ -54,12 +56,12 @@ const columnActionsDisabled = () => {
         </VListItemTitle>
 
         <VMenu
-            submenu
-            activator="parent"
-            :open-on-hover="true"
-            open-on-click
-            :close-on-content-click="false"
-            :disabled="!editor.can().chain().focus().insertTable().run()"
+          submenu
+          activator="parent"
+          :open-on-hover="true"
+          open-on-click
+          :close-on-content-click="false"
+          :disabled="!editor.can().chain().focus().insertTable().run()"
         >
           <TableBuilder />
         </VMenu>

package/src/extensions/components/media/table/ColumnActions.vue

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import { inject, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import { inject, Ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const columnCanAddBefore = () => {
   return editor.value.can().chain().focus().addColumnBefore().run()

package/src/extensions/components/media/table/RowActions.vue

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import { inject, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import { inject, Ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const rowCanAddBefore = () => {
   return editor.value.can().chain().focus().addRowBefore().run()

package/src/extensions/components/media/table/TableBuilder.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 
-import { Editor } from "@tiptap/vue-3";
+import { Editor } from '@tiptap/vue-3'
 
 import { inject, Ref, ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 defineExpose({ open })
 
@@ -48,22 +49,23 @@ function printSelection() {
 <template>
   <VSheet class="pa-2">
     <VCheckbox
-        v-model="withHeaderRow"
-        density="compact"
-        color="primary"
-        :label="t('media.tables.insertWithHeaderRow')" hide-details
+      v-model="withHeaderRow"
+      density="compact"
+      color="primary"
+      :label="t('media.tables.insertWithHeaderRow')"
+      hide-details
     />
 
     <div v-for="rowNum in maxRows" :key="`row-${rowNum}`" class="tiptapify-insert-table-row">
       <div
-          v-for="colNum in maxCols"
-          class="tiptapify-insert-table-col"
-          :class="{'tiptapify-insert-table-col-hovered': rowNum <= rowHover && colNum <= colHover}"
-          @click="insertTable(rowNum, colNum)"
-          @mouseover="hoverCell($el.querySelector('.tiptapify-insert-table-col'), rowNum, colNum)"
-          @mouseout="leaveCell($el.querySelector('.tiptapify-insert-table-col'))"
+        v-for="colNum in maxCols"
+        class="tiptapify-insert-table-col"
+        :class="{'tiptapify-insert-table-col-hovered': rowNum <= rowHover && colNum <= colHover}"
+        @click="insertTable(rowNum, colNum)"
+        @mouseover="hoverCell($el.querySelector('.tiptapify-insert-table-col'), rowNum, colNum)"
+        @mouseout="leaveCell($el.querySelector('.tiptapify-insert-table-col'))"
       >
-        <div class="tiptapify-insert-table-col-button"></div>
+        <div class="tiptapify-insert-table-col-button" />
       </div>
     </div>
 

package/src/extensions/components/media/video/Button.vue

@@ -1,29 +1,31 @@
 <script lang="ts" setup>
 
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import VideoDialog from "@tiptapify/extensions/components/media/video/VideoDialog.vue";
-import { inject, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import VideoDialog from '@tiptapify/extensions/components/media/video/VideoDialog.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, PropType, Ref } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4 6H2v14a2 2 0 0 0 2 2h14v-2H4zm16-4H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2m-8 12.5v-9l6 4.5z"/></svg>'
 </script>
 
 <template>
   <VBtn
-      :color="editor.isActive('video') ? 'primary' : ''"
-      :variant="variantBtn"
-      @click="editor.commands.showTiptapifyVideo()"
-      size="32"
+    :color="editor.isActive('video') ? 'primary' : ''"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.showTiptapifyVideo()"
   >
     <VTooltip activator="parent">
       {{ t('media.video') }}