tiptapify 0.1.4 → 0.1.6

package/src/extensions/components/style/color/Button.vue

@@ -1,21 +1,23 @@
 <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 StyleColor from "@tiptapify/extensions/components/style/StyleColor.vue";
-import { computed, inject, Ref } from "vue";
-import { useTheme } from "vuetify/framework";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import StyleColor from '@tiptapify/extensions/components/style/StyleColor.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { computed, inject, PropType, Ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
+import { useTheme } from 'vuetify/framework'
 
 import defaults from '@tiptapify/constants/defaults'
 
 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 appTheme = useTheme()
 
@@ -30,11 +32,11 @@ const selectedColor = computed(() => editor.value.getAttributes('textStyle').col
 
 <template>
   <VBtn
-      :id="`tiptapify-color-button-${editor.instanceId}`"
-      :disabled="!editor.can().chain().focus().toggleHighlight().run()"
-      :variant="variantBtn"
-      @click="editor.chain().focus().redo().run()"
-      size="32"
+    :id="`tiptapify-color-button-${editor.instanceId}`"
+    :disabled="!editor.can().chain().focus().toggleHighlight().run()"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.chain().focus().redo().run()"
   >
     <VTooltip activator="parent">
       {{ t('style.color.text') }}
@@ -42,11 +44,11 @@ const selectedColor = computed(() => editor.value.getAttributes('textStyle').col
 
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatColorText}`" />
     <VIcon
-        :icon="`mdiSvg:${mdi.mdiColorHelper}`"
-        :disabled="!editor.can().chain().focus().toggleHighlight().run()"
-        :color="activeColor"
-        size="small"
-        style="position: absolute; filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px)"
+      :icon="`mdiSvg:${mdi.mdiColorHelper}`"
+      :disabled="!editor.can().chain().focus().toggleHighlight().run()"
+      :color="activeColor"
+      size="small"
+      style="position: absolute; filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px)"
     />
   </VBtn>
 

package/src/extensions/components/style/fontFamily/Button.vue

@@ -1,28 +1,30 @@
 <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 FontFamily from "@tiptapify/extensions/components/style/fontFamily/FontFamily.vue";
-import { fonts } from "@tiptapify/constants/style";
-import { computed, inject, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import FontFamily from '@tiptapify/extensions/components/style/fontFamily/FontFamily.vue'
+import { fonts } from '@tiptapify/constants/style'
+import { 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 { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const activeFontFamily = computed(() => {
   let fontFamily = ''
   for (const font in fonts) {
     if (editor.value.isActive('textStyle', { fontFamily: fonts[font].fontFamily })) {
       fontFamily = fonts[font].fontFamily
-      break;
+      break
     }
   }
 
@@ -34,7 +36,7 @@ function getColor() {
   for (const font in fonts) {
     if (editor.value.isActive('textStyle', { fontFamily: fonts[font].fontFamily })) {
       color = 'primary'
-      break;
+      break
     }
   }
 
@@ -45,11 +47,11 @@ function getColor() {
 
 <template>
   <VBtn
-      :id="`tiptapify-font-family-button-${editor.instanceId}`"
-      :disabled="!editor.can().chain().focus().unsetFontFamily().run()"
-      :color="getColor()"
-      :variant="variantBtn"
-      size="32"
+    :id="`tiptapify-font-family-button-${editor.instanceId}`"
+    :disabled="!editor.can().chain().focus().unsetFontFamily().run()"
+    :color="getColor()"
+    :variant="variantBtn"
+    size="32"
   >
     <VTooltip activator="parent">
       {{ t('style.fontFamily') }}

package/src/extensions/components/style/fontFamily/FontFamily.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 
-import { Editor } from "@tiptap/vue-3";
+import { Editor } from '@tiptap/vue-3'
 
 import { computed, inject, Ref, ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 const props = defineProps({
   fonts: { type: Array<{ name: string, fontFamily: string }>, default: [] },
   fontFamily: { type: String, default: '' },
 })
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/extensions/components/style/fontSize/Button.vue

@@ -1,29 +1,31 @@
 <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 FontSize from "@tiptapify/extensions/components/style/fontSize/FontSize.vue";
-import { fontSizes } from "@tiptapify/constants/style";
-import { computed, inject, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import FontSize from '@tiptapify/extensions/components/style/fontSize/FontSize.vue'
+import { fontSizes } from '@tiptapify/constants/style'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { computed, inject, PropType, Ref } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 const props = defineProps({
-  fontMeasure: { type: String, default () { return 'px' }},
-  variantBtn: { type: String, default: defaults.variantBtn }
+  fontMeasure: { type: String, default () { return 'px' } },
+  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 activeFontSize = computed(() => {
   let fontSize = null
   for (const size of fontSizes) {
     if (editor.value.isActive('textStyle', { fontSize: `${size}${props.fontMeasure}` })) {
       fontSize = size
-      break;
+      break
     }
   }
 
@@ -35,7 +37,7 @@ function getColor() {
   for (const size of fontSizes) {
     if (editor.value.isActive('textStyle', { fontSize: `${size}${props.fontMeasure}` })) {
       color = 'primary'
-      break;
+      break
     }
   }
 
@@ -46,11 +48,11 @@ function getColor() {
 
 <template>
   <VBtn
-      :id="`tiptapify-font-size-button-${editor.instanceId}`"
-      :disabled="!editor.can().chain().focus().unsetFontSize().run()"
-      :color="getColor()"
-      :variant="variantBtn"
-      size="32"
+    :id="`tiptapify-font-size-button-${editor.instanceId}`"
+    :disabled="!editor.can().chain().focus().unsetFontSize().run()"
+    :color="getColor()"
+    :variant="variantBtn"
+    size="32"
   >
     <VTooltip activator="parent">
       {{ t('style.fontSize') }}

package/src/extensions/components/style/fontSize/FontSize.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 
-import { Editor } from "@tiptap/vue-3";
+import { Editor } from '@tiptap/vue-3'
 
 import { computed, inject, Ref, ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 const props = defineProps({
   sizes: { type: Array<number>, default: [] },
@@ -10,7 +11,7 @@ const props = defineProps({
   fontSize: { type: Number, default () { return null } },
 })
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -64,7 +65,7 @@ function isFontSizeActive(fontSize: number): boolean {
       @mouseleave="resetFontSize"
     >
       <VListItemTitle>
-        {{ size }}{{ measure}}
+        {{ size }}{{ measure }}
       </VListItemTitle>
     </VListItem>
   </VList>

package/src/extensions/components/style/heading/Button.vue

@@ -1,16 +1,18 @@
 <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 { Level } from '@tiptap/extension-heading'
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, PropType, Ref } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
 
 const props = defineProps({
-  customHeadingLevels: { type: Array<number>, default: () => [] },
+  customHeadingLevels: { type: Array<Level>, default: () => [] },
   withParagraph: { type: Boolean, default: () => true },
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 interface MDIIcons { [key: string]: string }
@@ -18,20 +20,20 @@ const mdiIcons = mdi as MDIIcons
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
-import { headingLevels, setHeadingLevels } from "@tiptapify/constants/style";
+import { headingLevels, setHeadingLevels } from '@tiptapify/constants/style'
+import { ComposerTranslation } from 'vue-i18n'
 setHeadingLevels(props.customHeadingLevels)
-
 </script>
 
 <template>
   <VBtn
-      :id="`tiptapify-heading-button-${editor.instanceId}`"
-      :color="editor.isActive('heading') ? 'primary' : ''"
-      :variant="variantBtn"
-      @click="editor.chain().focus().redo().run()"
-      size="32"
+    :id="`tiptapify-heading-button-${editor.instanceId}`"
+    :color="editor.isActive('heading') ? 'primary' : ''"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.chain().focus().redo().run()"
   >
     <VTooltip activator="parent">
       {{ t('style.heading') }}
@@ -52,9 +54,10 @@ setHeadingLevels(props.customHeadingLevels)
         </VListItemTitle>
       </VListItem>
       <VListItem
-          v-for="headingLevel in headingLevels" :key="headingLevel"
-          :color="editor.isActive('heading', { level: headingLevel }) ? 'primary' : ''"
-          @click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"
+        v-for="headingLevel in headingLevels"
+        :key="headingLevel"
+        :color="editor.isActive('heading', { level: headingLevel }) ? 'primary' : ''"
+        @click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"
       >
         <VListItemTitle class="d-flex justify-center align-center">
           <BtnIcon :icon="`mdiSvg:${mdiIcons[`mdiFormatHeader${headingLevel}`]}`" />

package/src/extensions/components/style/highlight/Button.vue

@@ -1,21 +1,23 @@
 <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 StyleColor from "@tiptapify/extensions/components/style/StyleColor.vue";
-import { computed, inject, Ref } from "vue";
-import { useTheme } from "vuetify/framework";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import StyleColor from '@tiptapify/extensions/components/style/StyleColor.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { computed, inject, PropType, Ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
+import { useTheme } from 'vuetify/framework'
 
 import defaults from '@tiptapify/constants/defaults'
 
 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 appTheme = useTheme()
 
@@ -30,11 +32,11 @@ const selectedColor = computed(() => editor.value.getAttributes('highlight').col
 
 <template>
   <VBtn
-      :id="`tiptapify-highlight-button-${editor.instanceId}`"
-      :disabled="!editor.can().chain().focus().toggleHighlight().run()"
-      :variant="variantBtn"
-      @click="editor.chain().focus().redo().run()"
-      size="32"
+    :id="`tiptapify-highlight-button-${editor.instanceId}`"
+    :disabled="!editor.can().chain().focus().toggleHighlight().run()"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.chain().focus().redo().run()"
   >
     <VTooltip activator="parent">
       {{ t('style.color.highlight') }}
@@ -42,11 +44,11 @@ const selectedColor = computed(() => editor.value.getAttributes('highlight').col
 
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatColorFill}`" />
     <VIcon
-        :icon="`mdiSvg:${mdi.mdiColorHelper}`"
-        :disabled="!editor.can().chain().focus().toggleHighlight().run()"
-        :color="activeColor"
-        size="small"
-        style="position: absolute; filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px)"
+      :icon="`mdiSvg:${mdi.mdiColorHelper}`"
+      :disabled="!editor.can().chain().focus().toggleHighlight().run()"
+      :color="activeColor"
+      size="small"
+      style="position: absolute; filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px)"
     />
   </VBtn>
 

package/src/extensions/components/style/lineHeight/Button.vue

@@ -1,28 +1,30 @@
 <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 LineHeight from "@tiptapify/extensions/components/style/lineHeight/LineHeight.vue";
-import { lineHeights } from "@tiptapify/constants/style";
-import { computed, inject, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import LineHeight from '@tiptapify/extensions/components/style/lineHeight/LineHeight.vue'
+import { lineHeights } from '@tiptapify/constants/style'
+import { 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 { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const activeLineHeight = computed(() => {
   let lineHeight = null
   for (const height of lineHeights) {
     if (editor.value.isActive('textStyle', { lineHeight: height.toString() })) {
       lineHeight = height
-      break;
+      break
     }
   }
 
@@ -34,7 +36,7 @@ function getColor() {
   for (const height of lineHeights) {
     if (editor.value.isActive('textStyle', { lineHeight: height.toString() })) {
       color = 'primary'
-      break;
+      break
     }
   }
 
@@ -45,11 +47,11 @@ function getColor() {
 
 <template>
   <VBtn
-      :id="`tiptapify-line-height-button-${editor.instanceId}`"
-      :disabled="!editor.can().chain().focus().unsetLineHeight().run()"
-      :color="getColor()"
-      :variant="variantBtn"
-      size="32"
+    :id="`tiptapify-line-height-button-${editor.instanceId}`"
+    :disabled="!editor.can().chain().focus().unsetLineHeight().run()"
+    :color="getColor()"
+    :variant="variantBtn"
+    size="32"
   >
     <VTooltip activator="parent">
       {{ t('style.lineHeight') }}

package/src/extensions/components/style/lineHeight/FontFamily.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 
-import { Editor } from "@tiptap/vue-3";
+import { Editor } from '@tiptap/vue-3'
 
 import { computed, inject, Ref, ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 const props = defineProps({
   fonts: { type: Array<{ name: string, fontFamily: string }>, default: [] },
   fontFamily: { type: String, default: '' },
 })
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const emit = defineEmits(['close'])
 

package/src/extensions/components/style/lineHeight/LineHeight.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 
-import { Editor } from "@tiptap/vue-3";
+import { Editor } from '@tiptap/vue-3'
 
 import { computed, inject, Ref, ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 const props = defineProps({
   lineHeights: { type: Array<number>, default () { return [] } },
   lineHeight: { type: Number, default () { return null } },
 })
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>