tiptapify 0.0.10 → 0.0.12

package/src/i18n/locales/ua.json

@@ -1,4 +1,5 @@
 {
+  "defaultValue": "Значення за замовчуванням",
   "content": {
     "placeholder": "Напишіть щонебудь..."
   },
@@ -109,7 +110,8 @@
   },
   "misc": {
     "source": "Перегляд вихідного коду",
-    "preview": "Попередній перегляд"
+    "preview": "Попередній перегляд",
+    "toggleInvisibleCharacters": "Показати/приховати невидимі символи"
   },
   "footer": {
     "words": "слова",

package/src/index.ts

@@ -1,5 +1,6 @@
 import { Plugin } from 'vue';
 import Tiptapify from '@tiptapify/components/Tiptapify.vue';
+import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue';
 import { getI18n } from "@tiptapify/i18n";
 
 interface PackageOptions {
@@ -11,8 +12,9 @@ const TiptapifyPlugin: Plugin = {
     const locale = options.locale || 'en'
     app.use(getI18n(locale));
     app.component('Tiptapify', Tiptapify);
+    app.component('TiptapifyDialog', TiptapifyDialog);
   }
 };
 
-export { Tiptapify };
+export { Tiptapify, TiptapifyDialog };
 export default TiptapifyPlugin;

package/src/types/extensionComponents.ts

@@ -0,0 +1,22 @@
+import { ToolbarSections } from "@tiptapify/types/toolbarSections";
+import { ComputedRef } from "vue";
+
+export enum ToolbarItemType {
+  dropdown = 'dropdown',
+  modal = 'modal',
+}
+
+export type extensionComponents = {
+  [key: string]: {
+    type: ToolbarItemType,
+    component: any,
+    extensions?: Array<any>,
+    componentProps?: any
+    props?: any
+    attrs?: any
+    section: ToolbarSections,
+    name: ComputedRef|string,
+    tooltip: ComputedRef|string,
+    icon: ComputedRef|string,
+  }
+}

package/src/types/toolbarItems.ts

@@ -0,0 +1,43 @@
+import { ComputedRef } from "vue";
+
+type ToolbarItemAttrs = {
+  [key: string]: Function | any
+}
+
+type ToolbarItemProps = {
+  [key: string]: any
+}
+
+export type ToolbarItem = {
+  // type: ToolbarItemType,
+  name: string|number|ComputedRef<string>,
+  tooltip: string|ComputedRef<string>,
+  icon: string|ComputedRef<string>,
+  icon2?: string|ComputedRef<string>,
+  svg?: boolean,
+  noI18n?: boolean,
+  enabled: boolean,
+  component?: any,
+  modelValue?: any,
+  group?: boolean,
+  toggle?: boolean,
+  icon2Props?: ToolbarItemProps,
+  componentProps?: ToolbarItemProps,
+  props?: ToolbarItemProps,
+  attrs?: ToolbarItemAttrs,
+  children?: ToolbarItems|ToolbarItem[],
+}
+
+export type ToolbarItems = {
+  [key: string]: ToolbarItem
+}
+
+export type ToolbarItemSection = {
+  group?: boolean,
+  toggle?: boolean,
+  items: ToolbarItems | {},
+}
+
+export type ToolbarItemSections = {
+  [key: string]: ToolbarItemSection
+}

package/src/types/toolbarSections.ts

@@ -0,0 +1,11 @@
+export enum ToolbarSections {
+  actions = 'actions',
+  alignment = 'alignment',
+  extra = 'extra',
+  formatExtra = 'formatExtra',
+  format = 'format',
+  list = 'list',
+  media = 'media',
+  misc = 'misc',
+  style = 'style',
+}

package/src/components/Toolbar/items/actions.ts

@@ -1,32 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
-
-export function getActionsItems(editor: Editor) {
-  return {
-    undo: {
-      name: 'undo',
-      tooltip: '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: 'action.redo',
-      icon: mdi.mdiRedo,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().redo().run()),
-      },
-      attrs: {
-        click: () => editor.chain().focus().redo().run()
-      }
-    }
-  }
-}

package/src/components/Toolbar/items/alignment.ts

@@ -1,60 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
-
-export function getAlignmentItems(editor: Editor) {
-  return {
-    alignmentLeft: {
-      name: 'alignments.left',
-      tooltip: '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: 'alignments.center',
-      tooltip: '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: 'alignments.right',
-      tooltip: '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: 'alignments.justify',
-      tooltip: '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()
-      }
-    },
-  }
-}

package/src/components/Toolbar/items/format.ts

@@ -1,60 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
-
-export function getFormatItems(editor: Editor) {
-  return {
-    bold: {
-      name: 'bold',
-      tooltip: '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: '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: '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: '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()
-      }
-    }
-  }
-}

package/src/components/Toolbar/items/formatExtra.ts

@@ -1,73 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
-
-export function getFormatExtraItems(editor: Editor) {
-  return {
-    sup: {
-      name: 'sup',
-      tooltip: '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: '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: '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: '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: '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()
-      }
-    }
-  }
-}

package/src/components/Toolbar/items/list.ts

@@ -1,70 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
-
-export function getListItems(editor: Editor) {
-  return {
-    listBullet: {
-      name: 'lists.bullet',
-      tooltip: 'lists.bullet',
-      icon: mdi.mdiFormatListBulleted,
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('bulletList') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleBulletList().run()
-      }
-    },
-    listNumbered: {
-      name: 'lists.numbered',
-      tooltip: 'lists.numbered',
-      icon: mdi.mdiFormatListNumbered,
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('orderedList') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleOrderedList().run()
-      }
-    },
-    listTask: {
-      name: 'lists.task',
-      tooltip: 'lists.task',
-      icon: mdi.mdiFormatListChecks,
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('taskList') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleTaskList().run()
-      }
-    },
-    listIndent: {
-      name: 'lists.indent',
-      tooltip: '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: 'lists.outdent',
-      tooltip: 'lists.outdent',
-      icon: mdi.mdiFormatIndentDecrease,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().liftListItem('listItem')),
-        active: false,
-      },
-      attrs: {
-        click: () => editor.chain().focus().liftListItem('listItem').run()
-      }
-    }
-  }
-}

package/src/components/Toolbar/items/media.ts

@@ -1,211 +0,0 @@
-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";
-
-export function getMediaItems(editor: Editor) {
-  return {
-    link: {
-      name: 'media.link',
-      tooltip: 'media.link',
-      icon: computed(() => editor.isActive('link') ? mdi.mdiLinkOff : mdi.mdiLink),
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('link') ? 'primary' : ''),
-        disabled: computed(() => editor.isActive('code') || editor.isActive('codeBlock')),
-      },
-      attrs: {
-        click: () => editor.commands.showLink()
-      }
-    },
-    image: {
-      name: 'media.image',
-      tooltip: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: 'media.tables.splitCell',
-          icon: mdi.mdiTableSplitCell,
-          enabled: true,
-          props: {
-            disabled: computed(() => !editor.can().chain().focus().splitCell().run()),
-          },
-          attrs: {
-            click: () => editor.chain().focus().splitCell().run()
-          }
-        }
-      ]
-    }
-  }
-}

package/src/components/Toolbar/items/misc.ts

@@ -1,59 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
-
-export function getMiscItems(editor: Editor) {
-  return {
-    line: {
-      name: 'line',
-      tooltip: 'format.line',
-      icon: mdi.mdiMinus,
-      enabled: true,
-      props: {},
-      attrs: {
-        click: () => editor.chain().focus().setHorizontalRule().run()
-      }
-    },
-    break: {
-      name: 'break',
-      tooltip: 'format.break',
-      icon: mdi.mdiFormatPageBreak,
-      enabled: true,
-      props: {},
-      attrs: {
-        click: () => editor.chain().focus().setHardBreak().run()
-      }
-    },
-    source: {
-      name: 'source',
-      tooltip: 'misc.source',
-      icon: mdi.mdiCodeTags,
-      enabled: true,
-      props: {},
-      attrs: {
-        click: () => editor.commands.showSource()
-      }
-    },
-    preview: {
-      name: 'preview',
-      tooltip: 'misc.preview',
-      icon: mdi.mdiFileEyeOutline,
-      enabled: true,
-      attrs: {
-        click: () => editor.commands.showPreview()
-      }
-    },
-    formatClear: {
-      name: 'format clear',
-      tooltip: 'format.formatClear',
-      icon: mdi.mdiFormatClear,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().unsetAllMarks().run()),
-      },
-      attrs: {
-        click: () => editor.chain().focus().unsetAllMarks().clearNodes().run()
-      }
-    },
-  }
-}