tiptapify 0.0.11 → 0.0.13

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

package/src/composables/Toolbar/useAlignmentItems.ts

@@ -1,63 +1,13 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-
-export function useAlignmentItems(editor: Editor) {
-  const { t } = useI18n();
+import { useAlignmentCenter } from "@tiptapify/composables/Toolbar/Alignment/useAlignmentCenter";
+import { useAlignmentJustify } from "@tiptapify/composables/Toolbar/Alignment/useAlignmentJustify";
+import { useAlignmentLeft } from "@tiptapify/composables/Toolbar/Alignment/useAlignmentLeft";
+import { useAlignmentRight } from "@tiptapify/composables/Toolbar/Alignment/useAlignmentRight";
 
+export function useAlignmentItems() {
   return {
-    alignmentLeft: {
-      name: computed(() => t('alignments.left')),
-      tooltip: computed(() => t('alignments.left')),
-      icon: mdi.mdiFormatAlignLeft,
-      enabled: true,
-      props: {
-        active: false,
-        color: computed(() => editor.isActive({ textAlign: 'left' }) ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleTextAlign('left').run()
-      }
-    },
-    alignmentCenter: {
-      name: computed(() => t('alignments.center')),
-      tooltip: computed(() => t('alignments.center')),
-      icon: mdi.mdiFormatAlignCenter,
-      enabled: true,
-      props: {
-        active: false,
-        color: computed(() => editor.isActive({ textAlign: 'center' }) ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleTextAlign('center').run()
-      }
-    },
-    alignmentRight: {
-      name: computed(() => t('alignments.right')),
-      tooltip: computed(() => t('alignments.right')),
-      icon: mdi.mdiFormatAlignRight,
-      enabled: true,
-      props: {
-        active: false,
-        color: computed(() => editor.isActive({ textAlign: 'right' }) ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleTextAlign('right').run()
-      }
-    },
-    alignmentJustify: {
-      name: computed(() => t('alignments.justify')),
-      tooltip: computed(() => t('alignments.justify')),
-      icon: mdi.mdiFormatAlignJustify,
-      enabled: true,
-      props: {
-        active: false,
-        color: computed(() => editor.isActive({ textAlign: 'justify' }) ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleTextAlign('justify').run()
-      }
-    },
+    alignmentLeft: useAlignmentLeft(),
+    alignmentCenter: useAlignmentCenter(),
+    alignmentRight: useAlignmentRight(),
+    alignmentJustify: useAlignmentJustify()
   }
 }

package/src/composables/Toolbar/useFormatExtraItems.ts

@@ -1,76 +1,15 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-
-export function useFormatExtraItems(editor: Editor) {
-  const { t } = useI18n();
+import { useBlockquote } from "@tiptapify/composables/Toolbar/FormatExtra/useBlockquote";
+import { useCode } from "@tiptapify/composables/Toolbar/FormatExtra/useCode";
+import { useCodeBlock } from "@tiptapify/composables/Toolbar/FormatExtra/useCodeBlock";
+import { useSub } from "@tiptapify/composables/Toolbar/FormatExtra/useSub";
+import { useSup } from "@tiptapify/composables/Toolbar/FormatExtra/useSup";
 
+export function useFormatExtraItems() {
   return {
-    sup: {
-      name: 'sup',
-      tooltip: computed(() => t('format.sup')),
-      icon: mdi.mdiFormatSuperscript,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleSuperscript().run()),
-        color: computed(() => editor.isActive('superscript') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleSuperscript().run()
-      }
-    },
-    sub: {
-      name: 'sub',
-      tooltip: computed(() => t('format.sub')),
-      icon: mdi.mdiFormatSubscript,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleSubscript().run()),
-        color: computed(() => editor.isActive('subscript') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleSubscript().run()
-      }
-    },
-    code: {
-      name: 'code',
-      tooltip: computed(() => t('format.code')),
-      icon: mdi.mdiXml,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleCode().run()),
-        color: computed(() => editor.isActive('code') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleCode().run()
-      }
-    },
-    codeBlock: {
-      name: 'codeblock',
-      tooltip: computed(() => t('format.codeblock')),
-      icon: mdi.mdiCodeBlockTags,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleCodeBlock().run()),
-        color: computed(() => editor.isActive('codeBlock') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleCodeBlock().run()
-      }
-    },
-    blockquote: {
-      name: 'blockquote',
-      tooltip: computed(() => t('format.blockquote')),
-      icon: mdi.mdiCommentQuote,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleBlockquote().run() || editor.isActive('codeBlock') || editor.isActive('code')),
-        color: computed(() => editor.isActive('blockquote') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleBlockquote().run()
-      }
-    }
+    sup: useSup(),
+    sub: useSub(),
+    code: useCode(),
+    codeBlock: useCodeBlock(),
+    blockquote: useBlockquote()
   }
 }

package/src/composables/Toolbar/useFormatItems.ts

@@ -1,63 +1,13 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-
-export function useFormatItems(editor: Editor) {
-  const { t } = useI18n();
+import { useBold } from "@tiptapify/composables/Toolbar/Format/useBold";
+import { useItalic } from "@tiptapify/composables/Toolbar/Format/useItalic";
+import { useStrike } from "@tiptapify/composables/Toolbar/Format/useStrike";
+import { useUnderline } from "@tiptapify/composables/Toolbar/Format/useUnderline";
 
+export function useFormatItems() {
   return {
-    bold: {
-      name: 'bold',
-      tooltip: computed(() => t('format.bold')),
-      icon: mdi.mdiFormatBold,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleBold().run()),
-        color: computed(() => editor.isActive('bold') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleBold().run()
-      }
-    },
-    italic: {
-      name: 'italic',
-      tooltip: computed(() => t('format.italic')),
-      icon: mdi.mdiFormatItalic,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleItalic().run()),
-        color: computed(() => editor.isActive('italic') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleItalic().run()
-      }
-    },
-    underline: {
-      name: 'underline',
-      tooltip: computed(() => t('format.underline')),
-      icon: mdi.mdiFormatUnderline,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleUnderline().run()),
-        color: computed(() => editor.isActive('underline') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleUnderline().run()
-      }
-    },
-    strike: {
-      name: 'strike',
-      tooltip: computed(() => t('format.strike')),
-      icon: mdi.mdiFormatStrikethroughVariant,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleStrike().run()),
-        color: computed(() => editor.isActive('strike') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleStrike().run()
-      }
-    }
+    bold: useBold(),
+    italic: useItalic(),
+    underline: useUnderline(),
+    strike: useStrike()
   }
 }

package/src/composables/Toolbar/useListItems.ts

@@ -1,73 +1,15 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-
-export function useListItems(editor: Editor) {
-  const { t } = useI18n();
+import { useBullet } from "@tiptapify/composables/Toolbar/List/useBullet";
+import { useIndent } from "@tiptapify/composables/Toolbar/List/useIndent";
+import { useNumbered } from "@tiptapify/composables/Toolbar/List/useNumbered";
+import { useOutdent } from "@tiptapify/composables/Toolbar/List/useOutdent";
+import { useTask } from "@tiptapify/composables/Toolbar/List/useTask";
 
+export function useListItems() {
   return {
-    listBullet: {
-      name: computed(() => t('lists.bullet')),
-      tooltip: computed(() => t('lists.bullet')),
-      icon: mdi.mdiFormatListBulleted,
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('bulletList') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleBulletList().run()
-      }
-    },
-    listNumbered: {
-      name: computed(() => t('lists.numbered')),
-      tooltip: computed(() => t('lists.numbered')),
-      icon: mdi.mdiFormatListNumbered,
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('orderedList') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleOrderedList().run()
-      }
-    },
-    listTask: {
-      name: computed(() => t('lists.task')),
-      tooltip: computed(() => t('lists.task')),
-      icon: mdi.mdiFormatListChecks,
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('taskList') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleTaskList().run()
-      }
-    },
-    listIndent: {
-      name: computed(() => t('lists.indent')),
-      tooltip: computed(() => t('lists.indent')),
-      icon: mdi.mdiFormatIndentIncrease,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().sinkListItem('listItem')),
-        active: false,
-      },
-      attrs: {
-        click: () => editor.chain().focus().sinkListItem('listItem').run()
-      }
-    },
-    listOutdent: {
-      name: computed(() => t('lists.outdent')),
-      tooltip: computed(() => t('lists.outdent')),
-      icon: mdi.mdiFormatIndentDecrease,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().liftListItem('listItem')),
-        active: false,
-      },
-      attrs: {
-        click: () => editor.chain().focus().liftListItem('listItem').run()
-      }
-    }
+    listBullet: useBullet(),
+    listNumbered: useNumbered(),
+    listTask: useTask(),
+    listIndent: useIndent(),
+    listOutdent: useOutdent()
   }
 }