tiptapify 0.1.3 → 0.1.5

package/src/components/Toolbar/Items.vue

@@ -1,22 +1,23 @@
 <script setup lang="ts">
 
-import defaults from "@tiptapify/constants/defaults";
+import defaults from '@tiptapify/constants/defaults'
+import { variantBtnTypes } from '@tiptapify/types/editor'
 import { PropType } from 'vue'
 
-import { toolbarSections } from "@tiptapify/types/toolbarTypes";
+import { toolbarSections } from '@tiptapify/types/toolbarTypes'
 
 defineProps({
-  variantBtn: { type: String, default () { return defaults.variantBtn }},
-  items: { type: Array as PropType<toolbarSections>, default() { return {} }},
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
+  items: { type: Array as PropType<toolbarSections>, default() { return {} } },
 })
 
 </script>
 
 <template>
-  <VToolbarItems class="py-2">
+  <VToolbarItems class="px-2 py-3">
     <template v-for="item in items" :key="item.section">
       <template v-if="item.section === '__separator__'">
-        <div class="menu-divider"></div>
+        <div class="menu-divider" />
       </template>
       <template v-else>
         <VBtnGroup v-if="item.group" elevation="4">
@@ -26,13 +27,13 @@ defineProps({
         </VBtnGroup>
         <template v-else>
           <component
+            :is="sectionItem.component"
             v-for="sectionItem in item.components"
             :key="sectionItem.name"
-            :is="sectionItem.component"
             v-bind="{ variantBtn, ...sectionItem.props ?? {} }"
           />
         </template>
-        <div class="menu-divider"></div>
+        <div class="menu-divider" />
       </template>
     </template>
   </VToolbarItems>

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

@@ -32,8 +32,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'

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.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) {