tiptapify 0.0.16 → 0.0.17

package/src/components/Toolbar/GroupDropdown.vue

@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import { defineProps, PropType } from 'vue'
-import * as mdi from '@mdi/js'
-
-import { ToolbarItem } from "@tiptapify/components/Toolbar/items";
-
-defineProps({
-  variant: { type: String, default () { return 'flat' }},
-  nested: { type: Boolean, default () { return false }},
-  toolbarItem: { type: Object as PropType<ToolbarItem>, default() { return {} }}
-})
-
-</script>
-
-<template>
-  <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="toolbarItem.tooltip" location="top" activator="parent" />
-
-        <VIcon :icon="toolbarItem.icon || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="small" />
-      </VBtn>
-    </template>
-
-    <VList v-model="toolbarItem.modelValue" max-height="430px">
-      <VListItem
-          v-for="(item, menuItemKey) in toolbarItem.children"
-          :key="menuItemKey"
-          :value="item.name"
-          density="compact"
-          class="pa-0"
-      >
-        <VBtn
-            variant="text"
-            block
-            class="justify-start"
-            rounded="0"
-            v-bind="item.props ?? {}"
-            v-on="item?.attrs ?? {}"
-        >
-          <VTooltip v-if="item.tooltip" :text="item.tooltip" location="top" activator="parent" />
-
-          <VIcon :icon="item.icon || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="small" />
-
-          <VMenu
-              v-if="item.component"
-              v-bind="item.props"
-          >
-            <VList>
-              <VListItem density="compact">
-                <component :is="item.component" @close="toolbarItem.modelValue = false" />
-              </VListItem>
-            </VList>
-          </VMenu>
-
-          <template v-if="item.children?.length">
-            <GroupDropdown :toolbar-item="item" variant="outline" :nested="true" />
-          </template>
-        </VBtn>
-      </VListItem>
-    </VList>
-  </VMenu>
-</template>
-
-<style lang="scss" scoped>
-
-</style>

package/src/components/Toolbar/defaultExtensionComponents.ts

@@ -1,65 +0,0 @@
-import { useImage } from "@tiptapify/composables/Toolbar/Media/useImage";
-import { useLink } from "@tiptapify/composables/Toolbar/Media/useLink";
-import { useVideo } from "@tiptapify/composables/Toolbar/Media/useVideo";
-import { usePreview } from "@tiptapify/composables/Toolbar/Misc/usePreview";
-import { useSource } from "@tiptapify/composables/Toolbar/Misc/useSource";
-import ImageDialog from "@tiptapify/extensions/components/ImageDialog.vue";
-import LinkDialog from "@tiptapify/extensions/components/LinkDialog.vue";
-import PreviewDialog from "@tiptapify/extensions/components/PreviewDialog.vue";
-import ShowSourceDialog from "@tiptapify/extensions/components/ShowSourceDialog.vue";
-import VideoDialog from "@tiptapify/extensions/components/VideoDialog.vue";
-import { extensionComponents } from "@tiptapify/types/extensionComponents";
-import { ToolbarSections } from "@tiptapify/types/toolbarSections";
-import { computed, markRaw } from "vue";
-
-export function getDefaultComponents(variantField: string): extensionComponents {
-  return {
-    image: {
-      component: markRaw(ImageDialog),
-      componentProps: {
-        variantField: computed(() => variantField).value,
-      },
-      section: ToolbarSections.media,
-      name: useImage().name,
-      tooltip: useImage().tooltip,
-      icon: useImage().icon,
-    },
-    link: {
-      component: markRaw(LinkDialog),
-      componentProps: {
-        variantField: computed(() => variantField).value,
-      },
-      section: ToolbarSections.media,
-      name: useLink().name,
-      tooltip: useLink().tooltip,
-      icon: useLink().icon,
-    },
-    preview: {
-      component: markRaw(PreviewDialog),
-      section: ToolbarSections.misc,
-      name: usePreview().name,
-      tooltip: usePreview().tooltip,
-      icon: usePreview().icon,
-    },
-    showSource: {
-      component: markRaw(ShowSourceDialog),
-      componentProps: {
-        variantField: computed(() => variantField).value,
-      },
-      section: ToolbarSections.misc,
-      name: useSource().name,
-      tooltip: useSource().tooltip,
-      icon: useSource().icon,
-    },
-    video: {
-      component: markRaw(VideoDialog),
-      componentProps: {
-        variantField: computed(() => variantField).value,
-      },
-      section: ToolbarSections.media,
-      name: useVideo().name,
-      tooltip: useVideo().tooltip,
-      icon: useVideo().icon,
-    },
-  }
-}

package/src/composables/Toolbar/Actions/useRedo.ts

@@ -1,22 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useRedo() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'redo',
-    tooltip: computed(() => t('action.redo')),
-    icon: `mdiSvg:${mdi.mdiRedo}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().redo().run()),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().redo().run()
-    }
-  }
-}

package/src/composables/Toolbar/Actions/useUndo.ts

@@ -1,22 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useUndo() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'undo',
-    tooltip: computed(() => t('action.undo')),
-    icon: `mdiSvg:${mdi.mdiUndo}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().undo().run()),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().undo().run()
-    }
-  }
-}

package/src/composables/Toolbar/Alignment/useAlignmentCenter.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useAlignmentCenter() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: computed(() => t('alignments.center')),
-    tooltip: computed(() => t('alignments.center')),
-    icon: `mdiSvg:${mdi.mdiFormatAlignCenter}`,
-    enabled: true,
-    props: {
-      active: false,
-      color: computed(() => editor.value.isActive({ textAlign: 'center' }) ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleTextAlign('center').run()
-    }
-  }
-}

package/src/composables/Toolbar/Alignment/useAlignmentJustify.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useAlignmentJustify() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: computed(() => t('alignments.justify')),
-    tooltip: computed(() => t('alignments.justify')),
-    icon: `mdiSvg:${mdi.mdiFormatAlignJustify}`,
-    enabled: true,
-    props: {
-      active: false,
-      color: computed(() => editor.value.isActive({ textAlign: 'justify' }) ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleTextAlign('justify').run()
-    }
-  }
-}

package/src/composables/Toolbar/Alignment/useAlignmentLeft.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useAlignmentLeft() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: computed(() => t('alignments.left')),
-    tooltip: computed(() => t('alignments.left')),
-    icon: `mdiSvg:${mdi.mdiFormatAlignLeft}`,
-    enabled: true,
-    props: {
-      active: false,
-      color: computed(() => editor.value.isActive({ textAlign: 'left' }) ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleTextAlign('left').run()
-    }
-  }
-}

package/src/composables/Toolbar/Alignment/useAlignmentRight.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useAlignmentRight() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: computed(() => t('alignments.right')),
-    tooltip: computed(() => t('alignments.right')),
-    icon: `mdiSvg:${mdi.mdiFormatAlignRight}`,
-    enabled: true,
-    props: {
-      active: false,
-      color: computed(() => editor.value.isActive({ textAlign: 'right' }) ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleTextAlign('right').run()
-    }
-  }
-}

package/src/composables/Toolbar/Format/useBold.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useBold() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'bold',
-    tooltip: computed(() => t('format.bold')),
-    icon: `mdiSvg:${mdi.mdiFormatBold}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleBold().run()),
-      color: computed(() => editor.value.isActive('bold') ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleBold().run()
-    }
-  }
-}

package/src/composables/Toolbar/Format/useItalic.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useItalic() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'italic',
-    tooltip: computed(() => t('format.italic')),
-    icon: `mdiSvg:${mdi.mdiFormatItalic}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleItalic().run()),
-      color: computed(() => editor.value.isActive('italic') ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleItalic().run()
-    }
-  }
-}

package/src/composables/Toolbar/Format/useStrike.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useStrike() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'strike',
-    tooltip: computed(() => t('format.strike')),
-    icon: `mdiSvg:${mdi.mdiFormatStrikethroughVariant}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleStrike().run()),
-      color: computed(() => editor.value.isActive('strike') ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleStrike().run()
-    }
-  }
-}

package/src/composables/Toolbar/Format/useUnderline.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useUnderline() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'underline',
-    tooltip: computed(() => t('format.underline')),
-    icon: `mdiSvg:${mdi.mdiFormatUnderline}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleUnderline().run()),
-      color: computed(() => editor.value.isActive('underline') ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleUnderline().run()
-    }
-  }
-}

package/src/composables/Toolbar/FormatExtra/useBlockquote.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useBlockquote() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'blockquote',
-    tooltip: computed(() => t('format.blockquote')),
-    icon: `mdiSvg:${mdi.mdiCommentQuote}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleBlockquote().run() || editor.value.isActive('codeBlock') || editor.value.isActive('code')),
-      color: computed(() => editor.value.isActive('blockquote') ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleBlockquote().run()
-    }
-  }
-}

package/src/composables/Toolbar/FormatExtra/useCode.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useCode() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'code',
-    tooltip: computed(() => t('format.code')),
-    icon: `mdiSvg:${mdi.mdiXml}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleCode().run()),
-      color: computed(() => editor.value.isActive('code') ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleCode().run()
-    }
-  }
-}

package/src/composables/Toolbar/FormatExtra/useCodeBlock.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useCodeBlock() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'codeblock',
-    tooltip: computed(() => t('format.codeblock')),
-    icon: `mdiSvg:${mdi.mdiCodeBlockTags}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleCodeBlock().run()),
-      color: computed(() => editor.value.isActive('codeBlock') ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleCodeBlock().run()
-    }
-  }
-}

package/src/composables/Toolbar/FormatExtra/useSub.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useSub() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'sub',
-    tooltip: computed(() => t('format.sub')),
-    icon: `mdiSvg:${mdi.mdiFormatSubscript}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleSubscript().run()),
-      color: computed(() => editor.value.isActive('subscript') ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleSubscript().run()
-    }
-  }
-}

package/src/composables/Toolbar/FormatExtra/useSup.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useSup() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'sup',
-    tooltip: computed(() => t('format.sup')),
-    icon: `mdiSvg:${mdi.mdiFormatSuperscript}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleSuperscript().run()),
-      color: computed(() => editor.value.isActive('superscript') ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleSuperscript().run()
-    }
-  }
-}

package/src/composables/Toolbar/List/useBullet.ts

@@ -1,22 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useBullet() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: computed(() => t('lists.bullet')),
-    tooltip: computed(() => t('lists.bullet')),
-    icon: `mdiSvg:${mdi.mdiFormatListBulleted}`,
-    enabled: true,
-    props: {
-      color: computed(() => editor.value.isActive('bulletList') ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleBulletList().run()
-    }
-  }
-}

package/src/composables/Toolbar/List/useIndent.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useIndent() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: computed(() => t('lists.indent')),
-    tooltip: computed(() => t('lists.indent')),
-    icon: `mdiSvg:${mdi.mdiFormatIndentIncrease}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().sinkListItem('listItem')),
-      active: false,
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().sinkListItem('listItem').run()
-    }
-  }
-}

package/src/composables/Toolbar/List/useNumbered.ts

@@ -1,22 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useNumbered() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: computed(() => t('lists.numbered')),
-    tooltip: computed(() => t('lists.numbered')),
-    icon: `mdiSvg:${mdi.mdiFormatListNumbered}`,
-    enabled: true,
-    props: {
-      color: computed(() => editor.value.isActive('orderedList') ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleOrderedList().run()
-    }
-  }
-}

package/src/composables/Toolbar/List/useOutdent.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useOutdent() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: computed(() => t('lists.outdent')),
-    tooltip: computed(() => t('lists.outdent')),
-    icon: `mdiSvg:${mdi.mdiFormatIndentDecrease}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().liftListItem('listItem')),
-      active: false,
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().liftListItem('listItem').run()
-    }
-  }
-}

package/src/composables/Toolbar/List/useTask.ts

@@ -1,22 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useTask() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: computed(() => t('lists.task')),
-    tooltip: computed(() => t('lists.task')),
-    icon: `mdiSvg:${mdi.mdiFormatListChecks}`,
-    enabled: true,
-    props: {
-      color: computed(() => editor.value.isActive('taskList') ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().toggleTaskList().run()
-    }
-  }
-}

package/src/composables/Toolbar/Media/useEmoji.ts

@@ -1,19 +0,0 @@
-import * as mdi from "@mdi/js";
-import Emoji from "@tiptapify/extensions/components/Emoji.vue";
-import { computed, inject, markRaw } from "vue";
-
-export function useEmoji() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  return {
-    name: computed(() => t('media.emoji.title')),
-    tooltip: computed(() => t('media.emoji.title')),
-    icon: `mdiSvg:${mdi.mdiEmoticon}`,
-    enabled: true,
-    component: markRaw(Emoji),
-    props: {
-      persistent: false,
-      closeOnContentClick: false,
-    }
-  }
-}

package/src/composables/Toolbar/Media/useImage.ts

@@ -1,23 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useImage() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: computed(() => t('media.image')),
-    tooltip: computed(() => t('media.image')),
-    icon: `mdiSvg:${mdi.mdiImage}`,
-    enabled: true,
-    props: {
-      color: computed(() => editor.value.isActive('image') ? 'primary' : ''),
-      disabled: computed(() => editor.value.isActive('code') || editor.value.isActive('codeBlock')),
-    },
-    attrs: {
-      click: () => editor.value.commands.showTiptapifyImage()
-    }
-  }
-}