tiptapify 0.0.16 → 0.0.18

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()
-    }
-  }
-}

package/src/composables/Toolbar/Media/useLink.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 useLink() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  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()
-    }
-  }
-}

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

@@ -1,187 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import TableBuilder from "@tiptapify/extensions/components/TableBuilder.vue";
-import { computed, inject, markRaw, Ref } from "vue";
-
-export function useTable() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'tables',
-    tooltip: computed(() => t('media.tables.table')),
-    icon: `mdiSvg:${mdi.mdiTable}`,
-    modelValue: false,
-    enabled: true,
-    props: {
-      color: computed(() => editor.value.isActive('table') ? 'primary' : ''),
-      disabled: computed(() => !editor.value.can().chain().focus().insertTable().run()),
-    },
-    children: [
-      {
-        name: 'insert table',
-        tooltip: computed(() => t('media.tables.insertTable')),
-        icon: `mdiSvg:${mdi.mdiTablePlus}`,
-        enabled: true,
-        props: {
-          disabled: computed(() => !editor.value.can().chain().focus().insertTable().run()),
-          activator: 'parent',
-          openOnClick: true,
-          openOnHover: false,
-          closeOnContentClick: false,
-          submenu: true
-        },
-        component: markRaw(TableBuilder),
-      },
-      {
-        name: 'delete table',
-        tooltip: computed(() => t('media.tables.deleteTable')),
-        icon: `mdiSvg:${mdi.mdiTableMinus}`,
-        enabled: true,
-        props: {
-          disabled: computed(() => !editor.value.can().chain().focus().deleteTable().run()),
-        },
-        attrs: {
-          click: () => editor.value.chain().focus().deleteTable().run()
-        }
-      },
-      {
-        name: 'table row',
-        tooltip: computed(() => t('media.tables.row')),
-        icon: `mdiSvg:${mdi.mdiTableRow}`,
-        enabled: true,
-        props: {
-          disabled: computed(
-            () =>
-              !editor.value.can().chain().focus().addRowBefore().run() &&
-              !editor.value.can().chain().focus().addRowAfter().run() &&
-              !editor.value.can().chain().focus().deleteRow().run()
-          ),
-          openOnHover: true,
-          openOnClick: true,
-          activator: 'parent',
-          submenu: true
-        },
-        children: [
-          {
-            name: 'insert row before',
-            tooltip: computed(() => t('media.tables.insertRowBefore')),
-            icon: `mdiSvg:${mdi.mdiTableRowPlusBefore}`,
-            enabled: true,
-            props: {
-              disabled: computed(() => !editor.value.can().chain().focus().addRowBefore().run()),
-            },
-            attrs: {
-              click: () => editor.value.chain().focus().addRowBefore().run()
-            }
-          },
-          {
-            name: 'insert row after',
-            tooltip: computed(() => t('media.tables.insertRowAfter')),
-            icon: `mdiSvg:${mdi.mdiTableRowPlusAfter}`,
-            enabled: true,
-            props: {
-              disabled: computed(() => !editor.value.can().chain().focus().addRowAfter().run()),
-            },
-            attrs: {
-              click: () => editor.value.chain().focus().addRowAfter().run()
-            }
-          },
-          {
-            name: 'delete row',
-            tooltip: computed(() => t('media.tables.deleteRow')),
-            icon: `mdiSvg:${mdi.mdiTableRowRemove}`,
-            enabled: true,
-            props: {
-              disabled: computed(() => !editor.value.can().chain().focus().deleteRow().run()),
-            },
-            attrs: {
-              click: () => editor.value.chain().focus().deleteRow().run()
-            }
-          },
-        ]
-      },
-      {
-        name: 'column',
-        tooltip: computed(() => t('media.tables.col')),
-        icon: `mdiSvg:${mdi.mdiTableColumn}`,
-        enabled: true,
-        props: {
-          disabled: computed(
-            () =>
-              !editor.value.can().chain().focus().addColumnBefore().run() &&
-              !editor.value.can().chain().focus().addColumnAfter().run() &&
-              !editor.value.can().chain().focus().deleteColumn().run()
-          ),
-          openOnHover: true,
-          openOnClick: true,
-          activator: 'parent',
-          submenu: true
-        },
-        children: [
-          {
-            name: 'insert col before',
-            tooltip: computed(() => t('media.tables.insertColBefore')),
-            icon: `mdiSvg:${mdi.mdiTableColumnPlusBefore}`,
-            enabled: true,
-            props: {
-              disabled: computed(() => !editor.value.can().chain().focus().addColumnBefore().run()),
-            },
-            attrs: {
-              click: () => editor.value.chain().focus().addColumnBefore().run()
-            }
-          },
-          {
-            name: 'insert column after',
-            tooltip: computed(() => t('media.tables.insertColAfter')),
-            icon: `mdiSvg:${mdi.mdiTableColumnPlusAfter}`,
-            enabled: true,
-            props: {
-              disabled: computed(() => !editor.value.can().chain().focus().addColumnAfter().run()),
-            },
-            attrs: {
-              click: () => editor.value.chain().focus().addColumnAfter().run()
-            }
-          },
-          {
-            name: 'delete column',
-            tooltip: computed(() => t('media.tables.deleteCol')),
-            icon: `mdiSvg:${mdi.mdiTableColumnRemove}`,
-            enabled: true,
-            props: {
-              disabled: computed(() => !editor.value.can().chain().focus().deleteColumn().run()),
-            },
-            attrs: {
-              click: () => editor.value.chain().focus().deleteColumn().run()
-            }
-          }
-        ]
-      },
-      {
-        name: 'merge cells',
-        tooltip: computed(() => t('media.tables.mergeCells')),
-        icon: `mdiSvg:${mdi.mdiTableMergeCells}`,
-        enabled: true,
-        props: {
-          disabled: computed(() => !editor.value.can().chain().focus().mergeCells().run()),
-        },
-        attrs: {
-          click: () => editor.value.chain().focus().mergeCells().run()
-        }
-      },
-      {
-        name: 'split cell',
-        tooltip: computed(() => t('media.tables.splitCell')),
-        icon: `mdiSvg:${mdi.mdiTableSplitCell}`,
-        enabled: true,
-        props: {
-          disabled: computed(() => !editor.value.can().chain().focus().splitCell().run()),
-        },
-        attrs: {
-          click: () => editor.value.chain().focus().splitCell().run()
-        }
-      }
-    ]
-  }
-}

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

@@ -1,22 +0,0 @@
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useVideo() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: computed(() => t('media.video')),
-    tooltip: computed(() => t('media.video')),
-    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>',
-    enabled: true,
-    props: {
-      color: computed(() => editor.value.isActive('youtube') ? 'primary' : ''),
-      disabled: computed(() => editor.value.isActive('code') || editor.value.isActive('codeBlock')),
-    },
-    attrs: {
-      click: () => editor.value.commands.showTiptapifyVideo()
-    }
-  }
-}

package/src/composables/Toolbar/Misc/useBreak.ts

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

package/src/composables/Toolbar/Misc/useFormatClear.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 useFormatClear() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'format clear',
-    tooltip: computed(() => t('format.formatClear')),
-    icon: `mdiSvg:${mdi.mdiFormatClear}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().unsetAllMarks().run()),
-    },
-    attrs: {
-      click: () => editor.value.chain().focus().unsetAllMarks().clearNodes().run()
-    }
-  }
-}

package/src/composables/Toolbar/Misc/useInvisibleCharacters.ts

@@ -1,22 +0,0 @@
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useInvisibleCharacters() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'show/hide invisible characters',
-    tooltip: computed(() => t('misc.toggleInvisibleCharacters')),
-    svg: true,
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="currentColor" d="M256 64L512 64C529.7 64 544 78.3 544 96C544 113.7 529.7 128 512 128L480 128L480 544C480 561.7 465.7 576 448 576C430.3 576 416 561.7 416 544L416 128L368 128L368 544C368 561.7 353.7 576 336 576C318.3 576 304 561.7 304 544L304 384L256 384C167.6 384 96 312.4 96 224C96 135.6 167.6 64 256 64z"/></svg>`,
-    enabled: true,
-    props: {
-      color: computed(() => editor.value.storage.invisibleCharacters.visibility() ? 'primary' : ''),
-    },
-    attrs: {
-      click: () => editor.value.commands.toggleInvisibleCharacters()
-    }
-  }
-}

package/src/composables/Toolbar/Misc/useLine.ts

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

package/src/composables/Toolbar/Misc/usePreview.ts

@@ -1,19 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function usePreview() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'preview',
-    tooltip: computed(() => t('misc.preview')),
-    icon: `mdiSvg:${mdi.mdiFileEyeOutline}`,
-    enabled: true,
-    attrs: {
-      click: () => editor.value.commands.showPreview()
-    }
-  }
-}

package/src/composables/Toolbar/Misc/useSource.ts

@@ -1,20 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref } from "vue";
-
-export function useSource() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'source',
-    tooltip: computed(() => t('misc.source')),
-    icon: `mdiSvg:${mdi.mdiCodeTags}`,
-    enabled: true,
-    props: {},
-    attrs: {
-      click: () => editor.value.commands.showSource()
-    }
-  }
-}

package/src/composables/Toolbar/Style/useColor.ts

@@ -1,35 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import StyleColor from "@tiptapify/extensions/components/StyleColor.vue";
-import { computed, inject, markRaw, Ref } from "vue";
-
-export function useColor(theme: any) {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'color',
-    tooltip: computed(() => t('style.color.text')),
-    icon: `mdiSvg:${mdi.mdiFormatColorText}`,
-    icon2: `mdiSvg:${mdi.mdiColorHelper}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleHighlight().run()),
-    },
-    icon2Props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleHighlight().run()),
-      color: computed(() => {
-        const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
-        return editor.value.getAttributes('textStyle').color || defaultColor
-      }),
-      style: 'filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px);'
-    },
-    component: markRaw(StyleColor),
-    componentProps: {
-      fontColor: true,
-      backgroundColor: false,
-      color: computed(() => editor.value.getAttributes('textStyle').color || ''),
-    }
-  }
-}

package/src/composables/Toolbar/Style/useFontFamily.ts

@@ -1,48 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { fonts } from "@tiptapify/constants/style";
-import FontFamily from "@tiptapify/extensions/components/FontFamily.vue";
-import { computed, inject, markRaw, Ref } from "vue";
-
-export function useFontFamily() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'font-family',
-    tooltip: computed(() => t('style.fontFamily')),
-    icon: `mdiSvg:${mdi.mdiFormatFont}`,
-    modelValue: false,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().unsetFontFamily().run()),
-      color: computed(() => {
-        let color = ''
-        for (const font in fonts) {
-          if (editor.value.isActive('textStyle', { fontFamily: fonts[font].fontFamily })) {
-            color = 'primary'
-            break;
-          }
-        }
-
-        return color
-      }),
-    },
-    component: markRaw(FontFamily),
-    componentProps: {
-      fonts: fonts,
-      fontFamily: computed(() => {
-        let fontFamily = ''
-        for (const font in fonts) {
-          if (editor.value.isActive('textStyle', { fontFamily: fonts[font].fontFamily })) {
-            fontFamily = fonts[font].fontFamily
-            break;
-          }
-        }
-
-        return fontFamily
-      }),
-    }
-  }
-}

package/src/composables/Toolbar/Style/useFontSize.ts

@@ -1,49 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { fontSizes } from "@tiptapify/constants/style";
-import FontSize from "@tiptapify/extensions/components/FontSize.vue";
-import { computed, inject, markRaw, Ref } from "vue";
-
-export function useFontSize(fontMeasure: string) {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'font-size',
-    tooltip: computed(() => t('style.fontSize')),
-    icon: `mdiSvg:${mdi.mdiFormatSize}`,
-    modelValue: false,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().unsetFontSize().run()),
-      color: computed(() => {
-        let color = ''
-        for (const size of fontSizes) {
-          if (editor.value.isActive('textStyle', { fontSize: `${size}${fontMeasure}` })) {
-            color = 'primary'
-            break;
-          }
-        }
-
-        return color
-      }),
-    },
-    component: markRaw(FontSize),
-    componentProps: {
-      sizes: fontSizes,
-      measure: fontMeasure,
-      fontSize: computed(() => {
-        let fontSize = null
-        for (const size of fontSizes) {
-          if (editor.value.isActive('textStyle', { fontSize: `${size}${fontMeasure}` })) {
-            fontSize = size
-            break;
-          }
-        }
-
-        return fontSize
-      }),
-    }
-  }
-}

package/src/composables/Toolbar/Style/useHeading.ts

@@ -1,63 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Level } from "@tiptap/extension-heading";
-import { Editor } from "@tiptap/vue-3";
-import { headingLevels, setHeadingLevels } from "@tiptapify/constants/style";
-import { computed, inject, Ref } from "vue";
-
-interface MDIIcons {
-  [key: string]: string
-}
-const mdiIcons = mdi as MDIIcons
-
-export function useHeading(customHeadingLevels: Array<number> = []) {
-  const { t } = inject('tiptapifyI18n') as any
-
-  setHeadingLevels(customHeadingLevels)
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'heading',
-    tooltip: computed(() => t('style.heading')),
-    icon: `mdiSvg:${mdi.mdiFormatHeaderPound}`,
-    modelValue: null,
-    enabled: true,
-    props: {
-      color: computed(() => editor.value.isActive('heading') || editor.value.isActive('paragraph') ? 'primary' : ''),
-    },
-    children: [
-      {
-        name: 'paragraph',
-        tooltip: computed(() => t('style.paragraph')),
-        // icon: mdiIcons['mdiFormatParagraph'],
-        icon: `mdiSvg:${mdiIcons['mdiFormatParagraph']}`,
-        noI18n: true,
-        enabled: true,
-        props: {
-          color: computed(() => editor.value.isActive('paragraph') ? 'primary' : ''),
-        },
-        attrs: {
-          click: () => editor.value.chain().focus().setParagraph().run()
-        }
-      }
-    ].concat(
-      headingLevels.value.map(level => {
-        const headingLevel: Level = level as Level
-        return {
-          name: `H${level}`,
-          tooltip: computed(() => t(`style.headings.h${level}`)),
-          // icon: mdiIcons[`mdiFormatHeader${level}`],
-          icon: `mdiSvg:${mdiIcons[`mdiFormatHeader${level}`]}`,
-          noI18n: true,
-          enabled: true,
-          props: {
-            color: computed(() => editor.value.isActive('heading', {level: level}) ? 'primary' : ''),
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().toggleHeading({level: headingLevel}).run()
-          }
-        }
-      })
-    )
-  }
-}

package/src/composables/Toolbar/Style/useHighlight.ts

@@ -1,35 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import StyleColor from "@tiptapify/extensions/components/StyleColor.vue";
-import { computed, inject, markRaw, Ref } from "vue";
-
-export function useHighlight(theme: any) {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'highlight',
-    tooltip: computed(() => t('style.color.highlight')),
-    icon: `mdiSvg:${mdi.mdiFormatColorFill}`,
-    icon2: `mdiSvg:${mdi.mdiColorHelper}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleHighlight().run()),
-    },
-    icon2Props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleHighlight().run()),
-      color: computed(() => {
-        const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
-        return editor.value.getAttributes('highlight').color || defaultColor
-      }),
-      style: 'filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px);'
-    },
-    component: markRaw(StyleColor),
-    componentProps: {
-      fontColor: false,
-      backgroundColor: true,
-      color: computed(() => editor.value.getAttributes('highlight').color || ''),
-    }
-  }
-}