tiptapify 0.0.11 → 0.0.12

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

package/src/composables/Toolbar/useMediaItems.ts

@@ -1,213 +1,11 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import TableBuilder from "@tiptapify/extensions/components/TableBuilder.vue";
-import { computed, markRaw } from "vue";
-import { useI18n } from "vue-i18n";
+import { useImage } from "@tiptapify/composables/Toolbar/Media/useImage";
+import { useLink } from "@tiptapify/composables/Toolbar/Media/useLink";
+import { useTable } from "@tiptapify/composables/Toolbar/Media/useTable";
 
-export function useMediaItems(editor: Editor) {
-  const { t } = useI18n();
+export function useMediaItems() {
   return {
-    link: {
-      name: computed(() => t('media.link')),
-      tooltip: computed(() => t('media.link')),
-      icon: computed(() => editor.isActive('tiptapifyLink') ? mdi.mdiLinkOff : mdi.mdiLink),
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('tiptapifyLink') ? 'primary' : ''),
-        disabled: computed(() => editor.isActive('code') || editor.isActive('codeBlock')),
-      },
-      attrs: {
-        click: () => editor.commands.showLink()
-      }
-    },
-    image: {
-      name: computed(() => t('media.image')),
-      tooltip: computed(() => t('media.image')),
-      icon: mdi.mdiImage,
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('image') ? 'primary' : ''),
-        disabled: computed(() => editor.isActive('code') || editor.isActive('codeBlock')),
-      },
-      attrs: {
-        click: () => editor.commands.showTiptapifyImage()
-      }
-    },
-    table: {
-      name: 'tables',
-      tooltip: computed(() => t('media.tables.table')),
-      icon: mdi.mdiTable,
-      modelValue: false,
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('table') ? 'primary' : ''),
-        disabled: computed(() => !editor.can().chain().focus().insertTable().run()),
-      },
-      children: [
-        {
-          name: 'insert table',
-          tooltip: computed(() => t('media.tables.insertTable')),
-          icon: mdi.mdiTablePlus,
-          enabled: true,
-          props: {
-            disabled: computed(() => !editor.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: mdi.mdiTableMinus,
-          enabled: true,
-          props: {
-            disabled: computed(() => !editor.can().chain().focus().deleteTable().run()),
-          },
-          attrs: {
-            click: () => editor.chain().focus().deleteTable().run()
-          }
-        },
-        {
-          name: 'table row',
-          tooltip: computed(() => t('media.tables.row')),
-          icon: mdi.mdiTableRow,
-          enabled: true,
-          props: {
-            disabled: computed(
-              () =>
-                !editor.can().chain().focus().addRowBefore().run() &&
-                !editor.can().chain().focus().addRowAfter().run() &&
-                !editor.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: mdi.mdiTableRowPlusBefore,
-              enabled: true,
-              props: {
-                disabled: computed(() => !editor.can().chain().focus().addRowBefore().run()),
-              },
-              attrs: {
-                click: () => editor.chain().focus().addRowBefore().run()
-              }
-            },
-            {
-              name: 'insert row after',
-              tooltip: computed(() => t('media.tables.insertRowAfter')),
-              icon: mdi.mdiTableRowPlusAfter,
-              enabled: true,
-              props: {
-                disabled: computed(() => !editor.can().chain().focus().addRowAfter().run()),
-              },
-              attrs: {
-                click: () => editor.chain().focus().addRowAfter().run()
-              }
-            },
-            {
-              name: 'delete row',
-              tooltip: computed(() => t('media.tables.deleteRow')),
-              icon: mdi.mdiTableRowRemove,
-              enabled: true,
-              props: {
-                disabled: computed(() => !editor.can().chain().focus().deleteRow().run()),
-              },
-              attrs: {
-                click: () => editor.chain().focus().deleteRow().run()
-              }
-            },
-          ]
-        },
-        {
-          name: 'column',
-          tooltip: computed(() => t('media.tables.col')),
-          icon: mdi.mdiTableColumn,
-          enabled: true,
-          props: {
-            disabled: computed(
-              () =>
-                !editor.can().chain().focus().addColumnBefore().run() &&
-                !editor.can().chain().focus().addColumnAfter().run() &&
-                !editor.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: mdi.mdiTableColumnPlusBefore,
-              enabled: true,
-              props: {
-                disabled: computed(() => !editor.can().chain().focus().addColumnBefore().run()),
-              },
-              attrs: {
-                click: () => editor.chain().focus().addColumnBefore().run()
-              }
-            },
-            {
-              name: 'insert column after',
-              tooltip: computed(() => t('media.tables.insertColAfter')),
-              icon: mdi.mdiTableColumnPlusAfter,
-              enabled: true,
-              props: {
-                disabled: computed(() => !editor.can().chain().focus().addColumnAfter().run()),
-              },
-              attrs: {
-                click: () => editor.chain().focus().addColumnAfter().run()
-              }
-            },
-            {
-              name: 'delete column',
-              tooltip: computed(() => t('media.tables.deleteCol')),
-              icon: mdi.mdiTableColumnRemove,
-              enabled: true,
-              props: {
-                disabled: computed(() => !editor.can().chain().focus().deleteColumn().run()),
-              },
-              attrs: {
-                click: () => editor.chain().focus().deleteColumn().run()
-              }
-            }
-          ]
-        },
-        {
-          name: 'merge cells',
-          tooltip: computed(() => t('media.tables.mergeCells')),
-          icon: mdi.mdiTableMergeCells,
-          enabled: true,
-          props: {
-            disabled: computed(() => !editor.can().chain().focus().mergeCells().run()),
-          },
-          attrs: {
-            click: () => editor.chain().focus().mergeCells().run()
-          }
-        },
-        {
-          name: 'split cell',
-          tooltip: computed(() => t('media.tables.splitCell')),
-          icon: mdi.mdiTableSplitCell,
-          enabled: true,
-          props: {
-            disabled: computed(() => !editor.can().chain().focus().splitCell().run()),
-          },
-          attrs: {
-            click: () => editor.chain().focus().splitCell().run()
-          }
-        }
-      ]
-    }
+    link: useLink(),
+    image: useImage(),
+    table: useTable()
   }
 }

package/src/composables/Toolbar/useMiscItems.ts

@@ -1,62 +1,17 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-
-export function useMiscItems(editor: Editor) {
-  const { t } = useI18n();
+import { useBreak } from "@tiptapify/composables/Toolbar/Misc/useBreak";
+import { useFormatClear } from "@tiptapify/composables/Toolbar/Misc/useFormatClear";
+import { useInvisibleCharacters } from "@tiptapify/composables/Toolbar/Misc/useInvisibleCharacters";
+import { useLine } from "@tiptapify/composables/Toolbar/Misc/useLine";
+import { usePreview } from "@tiptapify/composables/Toolbar/Misc/usePreview";
+import { useSource } from "@tiptapify/composables/Toolbar/Misc/useSource";
 
+export function useMiscItems() {
   return {
-    line: {
-      name: 'line',
-      tooltip: computed(() => t('format.line')),
-      icon: mdi.mdiMinus,
-      enabled: true,
-      props: {},
-      attrs: {
-        click: () => editor.chain().focus().setHorizontalRule().run()
-      }
-    },
-    break: {
-      name: 'break',
-      tooltip: computed(() => t('format.break')),
-      icon: mdi.mdiFormatPageBreak,
-      enabled: true,
-      props: {},
-      attrs: {
-        click: () => editor.chain().focus().setHardBreak().run()
-      }
-    },
-    source: {
-      name: 'source',
-      tooltip: computed(() => t('misc.source')),
-      icon: mdi.mdiCodeTags,
-      enabled: true,
-      props: {},
-      attrs: {
-        click: () => editor.commands.showSource()
-      }
-    },
-    preview: {
-      name: 'preview',
-      tooltip: computed(() => t('misc.preview')),
-      icon: mdi.mdiFileEyeOutline,
-      enabled: true,
-      attrs: {
-        click: () => editor.commands.showPreview()
-      }
-    },
-    formatClear: {
-      name: 'format clear',
-      tooltip: computed(() => t('format.formatClear')),
-      icon: mdi.mdiFormatClear,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().unsetAllMarks().run()),
-      },
-      attrs: {
-        click: () => editor.chain().focus().unsetAllMarks().clearNodes().run()
-      }
-    },
+    line: useLine(),
+    break: useBreak(),
+    source: useSource(),
+    preview: usePreview(),
+    formatClear: useFormatClear(),
+    invisibleCharacters: useInvisibleCharacters(),
   }
 }