tiptapify 0.0.11 → 0.0.12

package/src/components/index.ts

@@ -1,9 +1,15 @@
 import { Editor, useEditor } from "@tiptap/vue-3";
 import { editorExtensions } from "@tiptapify/components/editorExtensions";
+import { extensionComponents } from "@tiptapify/types/extensionComponents";
 import { ShallowRef } from "vue";
 
-export function getTiptapEditor (content: any, placeholder: string, slashCommands: boolean = true): ShallowRef<Editor | undefined> {
-  const extensions = editorExtensions(placeholder, slashCommands)
+export function getTiptapEditor (
+  content: any,
+  placeholder: string,
+  slashCommands: boolean = true,
+  customExtensions: extensionComponents
+): ShallowRef<Editor | undefined> {
+  const extensions = editorExtensions(placeholder, slashCommands, customExtensions)
   const editor: ShallowRef<Editor | undefined> = useEditor({
     content,
     extensions,

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

@@ -0,0 +1,23 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useRedo() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,23 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useUndo() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useAlignmentCenter() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useAlignmentJustify() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useAlignmentLeft() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useAlignmentRight() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useBold() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useItalic() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useStrike() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useUnderline() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useBlockquote() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useCode() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useCodeBlock() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useSub() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useSup() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,23 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useBullet() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useIndent() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,23 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useNumbered() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useOutdent() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,23 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useTask() {
+  const { t } = useI18n();
+
+  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/useImage.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useImage() {
+  const { t } = useI18n();
+
+  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()
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useLink() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: computed(() => t('media.link')),
+    tooltip: computed(() => t('media.link')),
+    icon: computed(() => editor.value.isActive('tiptapifyLink') ? `mdiSvg:${mdi.mdiLinkOff}` : `mdiSvg:${mdi.mdiLink}`),
+    enabled: true,
+    props: {
+      color: computed(() => editor.value.isActive('tiptapifyLink') ? 'primary' : ''),
+      disabled: computed(() => editor.value.isActive('code') || editor.value.isActive('codeBlock')),
+    },
+    attrs: {
+      click: () => editor.value.commands.showLink()
+    }
+  }
+}