tiptapify 0.0.11 → 0.0.12

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

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

@@ -0,0 +1,64 @@
+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";
+import { useI18n } from "vue-i18n";
+
+interface MDIIcons {
+  [key: string]: string
+}
+const mdiIcons = mdi as MDIIcons
+
+export function useHeading(customHeadingLevels: Array<number> = []) {
+  const { t } = useI18n();
+
+  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

@@ -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 useHighlight(theme: any) {
+  const { t } = useI18n();
+
+  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 || ''),
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { lineHeights } from "@tiptapify/constants/style";
+import LineHeight from "@tiptapify/extensions/components/LineHeight.vue";
+import { computed, inject, markRaw, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useLineHeight() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'line-height',
+    tooltip: computed(() => t('style.lineHeight')),
+    icon: `mdiSvg:${mdi.mdiFormatLineHeight}`,
+    modelValue: null,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().unsetLineHeight().run()),
+      color: computed(() => {
+        let color = ''
+        for (const height of lineHeights) {
+          if (editor.value.isActive('textStyle', { lineHeight: height.toString() })) {
+            color = 'primary'
+            break;
+          }
+        }
+
+        return color
+      }),
+    },
+    component: markRaw(LineHeight),
+    componentProps: {
+      lineHeights,
+      lineHeight: computed(() => {
+        let lineHeight = null
+        for (const height of lineHeights) {
+          if (editor.value.isActive('textStyle', { lineHeight: height.toString() })) {
+            lineHeight = height
+            break;
+          }
+        }
+
+        return lineHeight
+      }),
+    }
+  }
+}

package/src/composables/Toolbar/useActionsItems.ts

@@ -1,35 +1,9 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-
-export function useActionsItems(editor: Editor) {
-  const { t } = useI18n();
+import { useRedo } from "@tiptapify/composables/Toolbar/Actions/useRedo";
+import { useUndo } from "@tiptapify/composables/Toolbar/Actions/useUndo";
 
+export function useActionsItems() {
   return {
-    undo: {
-      name: 'undo',
-      tooltip: computed(() => t('action.undo')),
-      icon: mdi.mdiUndo,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().undo().run()),
-      },
-      attrs: {
-        click: () => editor.chain().focus().undo().run()
-      }
-    },
-    redo: {
-      name: 'redo',
-      tooltip: computed(() => t('action.redo')),
-      icon: mdi.mdiRedo,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().redo().run()),
-      },
-      attrs: {
-        click: () => editor.chain().focus().redo().run()
-      }
-    }
+    undo: useUndo(),
+    redo: useRedo()
   }
 }