tiptapify 0.0.5 → 0.0.7

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

@@ -0,0 +1,202 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import TableBuilder from "@tiptapify/extensions/components/TableBuilder.vue";
+import { computed, markRaw, Ref } from "vue";
+
+export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
+  return {
+    link: {
+      name: 'format.link',
+      tooltip: 'format.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: computed(() => {
+          return editor.isActive('link')
+            ? editor.chain().focus().unsetLink().run
+            : toolbarLinkButton?.value?.open
+        })
+      }
+    },
+    table: {
+      name: 'tables',
+      tooltip: 'format.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: 'format.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: 'insert table',
+          tooltip: 'format.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: 'format.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: 'format.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: 'format.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: 'format.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: 'format.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: 'format.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: 'format.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: 'format.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: 'format.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: 'format.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

@@ -0,0 +1,59 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, Ref } 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()
+      }
+    },
+  }
+}

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

@@ -0,0 +1,146 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { fonts } from "@tiptapify/components/Toolbar/fonts";
+import { computed, ref } from "vue";
+
+interface MDIIcons {
+  [key: string]: string
+}
+const mdiIcons = mdi as MDIIcons
+
+export function getStyleItems(editor: Editor, fontMeasure: string, customHeadingLevels: Array<number> = []) {
+  const headingLevels = ref([1, 2, 3, 4, 5, 6])
+  if (customHeadingLevels.length) {
+    customHeadingLevels.forEach(level => {
+      if (level <= 0 || level > 6) {
+        throw new Error('customHeadingLevels must be between 1 and 6')
+      }
+    })
+
+    headingLevels.value = customHeadingLevels
+  }
+
+  const fontSizes = [6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 48, 64, 96]
+
+  const lineHeights = [1, 1.5, 2, 3, 4]
+
+  return {
+    heading: {
+      name: 'heading',
+      tooltip: 'style.heading',
+      icon: mdi.mdiFormatHeaderPound,
+      modelValue: null,
+      enabled: true,
+      props: {
+        color: computed(() => editor.isActive('heading') || editor.isActive('paragraph') ? 'primary' : ''),
+      },
+      children: [
+        {
+          name: `paragraph`,
+          tooltip: `style.paragraph`,
+          icon: mdiIcons[`mdiFormatParagraph`],
+          noI18n: true,
+          enabled: true,
+          props: {
+            color: computed(() => editor.isActive('paragraph') ? 'primary' : ''),
+          },
+          attrs: {
+            click: () => editor.chain().focus().setParagraph().run()
+          }
+        }
+      ].concat(
+        headingLevels.value.map(level => {
+          return {
+            name: `H${level}`,
+            tooltip: `style.headings.h${level}`,
+            icon: mdiIcons[`mdiFormatHeader${level}`],
+            noI18n: true,
+            enabled: true,
+            props: {
+              color: computed(() => editor.isActive('heading', { level: level }) ? 'primary' : ''),
+            },
+            attrs: {
+              click: () => editor.chain().focus().toggleHeading({ level }).run()
+            }
+          }
+        })
+      )
+    },
+    fontFamily: {
+      name: 'font-family',
+      tooltip: 'style.fontFamily',
+      icon: mdi.mdiFormatFont,
+      modelValue: false,
+      enabled: true,
+      attrs: {
+        click: () => editor.chain().focus().unsetFontFamily().run()
+      },
+      children: fonts.map((font) => {
+        return {
+          name: font.name,
+          tooltip: '',
+          icon: '',
+          enabled: true,
+          noI18n: true,
+          props: {
+            color: computed(() => editor.isActive('textStyle', {fontFamily: font.fontFamily}) ? 'primary' : ''),
+            style: `font-family: ${font.fontFamily};`
+          },
+          attrs: {
+            click: () => editor.chain().focus().setFontFamily(font.fontFamily).run()
+          }
+        }
+      })
+    },
+    fontSize: {
+      name: 'font-size',
+      tooltip: 'style.fontSize',
+      icon: mdi.mdiFormatSize,
+      modelValue: false,
+      enabled: true,
+      attrs: {
+        click: () => editor.chain().focus().unsetFontSize().run()
+      },
+      children: fontSizes.map((fontSize) => {
+        return {
+          name: `${fontSize}${fontMeasure}`,
+          tooltip: '',
+          icon: '',
+          enabled: true,
+          noI18n: true,
+          props: {
+            color: computed(() => editor.isActive('textStyle', {fontSizes: fontSize}) ? 'primary' : ''),
+          },
+          attrs: {
+            click: () => editor.chain().focus().setFontSize(`${fontSize}${fontMeasure}`).run()
+          }
+        }
+      })
+    },
+    lineHeight: {
+      name: 'line-height',
+      tooltip: 'style.lineHeight',
+      icon: mdi.mdiFormatLineHeight,
+      modelValue: null,
+      enabled: true,
+      attrs: {
+        click: () => editor.chain().focus().unsetLineHeight().run()
+      },
+      children: lineHeights.map((lineHeight) => {
+        return {
+          name: lineHeight,
+          tooltip: '',
+          icon: '',
+          enabled: true,
+          noI18n: true,
+          props: {
+            color: computed(() => editor.isActive('textStyle', {lineHeights: lineHeight}) ? 'primary' : ''),
+          },
+          attrs: {
+            click: () => editor.chain().focus().setLineHeight(lineHeight.toString()).run()
+          }
+        }
+      })
+    }
+  }
+}