tiptapify 0.0.10 → 0.0.12

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

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

@@ -0,0 +1,188 @@
+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";
+import { useI18n } from "vue-i18n";
+
+export function useTable() {
+  const { t } = useI18n();
+
+  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/Misc/useBreak.ts

@@ -0,0 +1,21 @@
+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 useBreak() {
+  const { t } = useI18n();
+
+  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

@@ -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 useFormatClear() {
+  const { t } = useI18n();
+
+  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

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

@@ -0,0 +1,21 @@
+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 useLine() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,20 @@
+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 usePreview() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,21 @@
+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 useSource() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,36 @@
+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";
+import { useI18n } from "vue-i18n";
+
+export function useColor(theme: any) {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,49 @@
+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";
+import { useI18n } from "vue-i18n";
+
+export function useFontFamily() {
+  const { t } = useI18n();
+
+  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

@@ -0,0 +1,50 @@
+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";
+import { useI18n } from "vue-i18n";
+
+export function useFontSize(fontMeasure: string) {
+  const { t } = useI18n();
+
+  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
+      }),
+    }
+  }
+}