tiptapify 0.0.9 → 0.0.11

package/src/{components/Toolbar/items/format.ts → composables/Toolbar/useFormatItems.ts}

@@ -1,12 +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 useFormatItems(editor: Editor) {
+  const { t } = useI18n();
 
-export function getFormatItems(editor: Editor) {
   return {
     bold: {
       name: 'bold',
-      tooltip: 'format.bold',
+      tooltip: computed(() => t('format.bold')),
       icon: mdi.mdiFormatBold,
       enabled: true,
       props: {
@@ -19,7 +22,7 @@ export function getFormatItems(editor: Editor) {
     },
     italic: {
       name: 'italic',
-      tooltip: 'format.italic',
+      tooltip: computed(() => t('format.italic')),
       icon: mdi.mdiFormatItalic,
       enabled: true,
       props: {
@@ -30,22 +33,9 @@ export function getFormatItems(editor: Editor) {
         click: () => editor.chain().focus().toggleItalic().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()
-      }
-    },
     underline: {
       name: 'underline',
-      tooltip: 'format.underline',
+      tooltip: computed(() => t('format.underline')),
       icon: mdi.mdiFormatUnderline,
       enabled: true,
       props: {
@@ -55,6 +45,19 @@ export function getFormatItems(editor: Editor) {
       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()
+      }
     }
   }
 }

package/src/{components/Toolbar/items/list.ts → composables/Toolbar/useListItems.ts}

@@ -1,12 +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();
 
-export function getListItems(editor: Editor) {
   return {
     listBullet: {
-      name: 'lists.bullet',
-      tooltip: 'lists.bullet',
+      name: computed(() => t('lists.bullet')),
+      tooltip: computed(() => t('lists.bullet')),
       icon: mdi.mdiFormatListBulleted,
       enabled: true,
       props: {
@@ -17,8 +20,8 @@ export function getListItems(editor: Editor) {
       }
     },
     listNumbered: {
-      name: 'lists.numbered',
-      tooltip: 'lists.numbered',
+      name: computed(() => t('lists.numbered')),
+      tooltip: computed(() => t('lists.numbered')),
       icon: mdi.mdiFormatListNumbered,
       enabled: true,
       props: {
@@ -29,8 +32,8 @@ export function getListItems(editor: Editor) {
       }
     },
     listTask: {
-      name: 'lists.task',
-      tooltip: 'lists.task',
+      name: computed(() => t('lists.task')),
+      tooltip: computed(() => t('lists.task')),
       icon: mdi.mdiFormatListChecks,
       enabled: true,
       props: {
@@ -41,8 +44,8 @@ export function getListItems(editor: Editor) {
       }
     },
     listIndent: {
-      name: 'lists.indent',
-      tooltip: 'lists.indent',
+      name: computed(() => t('lists.indent')),
+      tooltip: computed(() => t('lists.indent')),
       icon: mdi.mdiFormatIndentIncrease,
       enabled: true,
       props: {
@@ -54,8 +57,8 @@ export function getListItems(editor: Editor) {
       }
     },
     listOutdent: {
-      name: 'lists.outdent',
-      tooltip: 'lists.outdent',
+      name: computed(() => t('lists.outdent')),
+      tooltip: computed(() => t('lists.outdent')),
       icon: mdi.mdiFormatIndentDecrease,
       enabled: true,
       props: {

package/src/{components/Toolbar/items/media.ts → composables/Toolbar/useMediaItems.ts}

@@ -2,16 +2,18 @@ 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";
 
-export function getMediaItems(editor: Editor) {
+export function useMediaItems(editor: Editor) {
+  const { t } = useI18n();
   return {
     link: {
-      name: 'media.link',
-      tooltip: 'media.link',
-      icon: computed(() => editor.isActive('link') ? mdi.mdiLinkOff : mdi.mdiLink),
+      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('link') ? 'primary' : ''),
+        color: computed(() => editor.isActive('tiptapifyLink') ? 'primary' : ''),
         disabled: computed(() => editor.isActive('code') || editor.isActive('codeBlock')),
       },
       attrs: {
@@ -19,8 +21,8 @@ export function getMediaItems(editor: Editor) {
       }
     },
     image: {
-      name: 'media.image',
-      tooltip: 'media.image',
+      name: computed(() => t('media.image')),
+      tooltip: computed(() => t('media.image')),
       icon: mdi.mdiImage,
       enabled: true,
       props: {
@@ -33,7 +35,7 @@ export function getMediaItems(editor: Editor) {
     },
     table: {
       name: 'tables',
-      tooltip: 'media.tables.table',
+      tooltip: computed(() => t('media.tables.table')),
       icon: mdi.mdiTable,
       modelValue: false,
       enabled: true,
@@ -44,7 +46,7 @@ export function getMediaItems(editor: Editor) {
       children: [
         {
           name: 'insert table',
-          tooltip: 'media.tables.insertTable',
+          tooltip: computed(() => t('media.tables.insertTable')),
           icon: mdi.mdiTablePlus,
           enabled: true,
           props: {
@@ -59,7 +61,7 @@ export function getMediaItems(editor: Editor) {
         },
         {
           name: 'delete table',
-          tooltip: 'media.tables.deleteTable',
+          tooltip: computed(() => t('media.tables.deleteTable')),
           icon: mdi.mdiTableMinus,
           enabled: true,
           props: {
@@ -71,7 +73,7 @@ export function getMediaItems(editor: Editor) {
         },
         {
           name: 'table row',
-          tooltip: 'media.tables.row',
+          tooltip: computed(() => t('media.tables.row')),
           icon: mdi.mdiTableRow,
           enabled: true,
           props: {
@@ -89,7 +91,7 @@ export function getMediaItems(editor: Editor) {
           children: [
             {
               name: 'insert row before',
-              tooltip: 'media.tables.insertRowBefore',
+              tooltip: computed(() => t('media.tables.insertRowBefore')),
               icon: mdi.mdiTableRowPlusBefore,
               enabled: true,
               props: {
@@ -101,7 +103,7 @@ export function getMediaItems(editor: Editor) {
             },
             {
               name: 'insert row after',
-              tooltip: 'media.tables.insertRowAfter',
+              tooltip: computed(() => t('media.tables.insertRowAfter')),
               icon: mdi.mdiTableRowPlusAfter,
               enabled: true,
               props: {
@@ -113,7 +115,7 @@ export function getMediaItems(editor: Editor) {
             },
             {
               name: 'delete row',
-              tooltip: 'media.tables.deleteRow',
+              tooltip: computed(() => t('media.tables.deleteRow')),
               icon: mdi.mdiTableRowRemove,
               enabled: true,
               props: {
@@ -127,7 +129,7 @@ export function getMediaItems(editor: Editor) {
         },
         {
           name: 'column',
-          tooltip: 'media.tables.col',
+          tooltip: computed(() => t('media.tables.col')),
           icon: mdi.mdiTableColumn,
           enabled: true,
           props: {
@@ -145,7 +147,7 @@ export function getMediaItems(editor: Editor) {
           children: [
             {
               name: 'insert col before',
-              tooltip: 'media.tables.insertColBefore',
+              tooltip: computed(() => t('media.tables.insertColBefore')),
               icon: mdi.mdiTableColumnPlusBefore,
               enabled: true,
               props: {
@@ -157,7 +159,7 @@ export function getMediaItems(editor: Editor) {
             },
             {
               name: 'insert column after',
-              tooltip: 'media.tables.insertColAfter',
+              tooltip: computed(() => t('media.tables.insertColAfter')),
               icon: mdi.mdiTableColumnPlusAfter,
               enabled: true,
               props: {
@@ -169,7 +171,7 @@ export function getMediaItems(editor: Editor) {
             },
             {
               name: 'delete column',
-              tooltip: 'media.tables.deleteCol',
+              tooltip: computed(() => t('media.tables.deleteCol')),
               icon: mdi.mdiTableColumnRemove,
               enabled: true,
               props: {
@@ -183,7 +185,7 @@ export function getMediaItems(editor: Editor) {
         },
         {
           name: 'merge cells',
-          tooltip: 'media.tables.mergeCells',
+          tooltip: computed(() => t('media.tables.mergeCells')),
           icon: mdi.mdiTableMergeCells,
           enabled: true,
           props: {
@@ -195,7 +197,7 @@ export function getMediaItems(editor: Editor) {
         },
         {
           name: 'split cell',
-          tooltip: 'media.tables.splitCell',
+          tooltip: computed(() => t('media.tables.splitCell')),
           icon: mdi.mdiTableSplitCell,
           enabled: true,
           props: {

package/src/{components/Toolbar/items/misc.ts → composables/Toolbar/useMiscItems.ts}

@@ -1,12 +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 useMiscItems(editor: Editor) {
+  const { t } = useI18n();
 
-export function getMiscItems(editor: Editor) {
   return {
     line: {
       name: 'line',
-      tooltip: 'format.line',
+      tooltip: computed(() => t('format.line')),
       icon: mdi.mdiMinus,
       enabled: true,
       props: {},
@@ -16,7 +19,7 @@ export function getMiscItems(editor: Editor) {
     },
     break: {
       name: 'break',
-      tooltip: 'format.break',
+      tooltip: computed(() => t('format.break')),
       icon: mdi.mdiFormatPageBreak,
       enabled: true,
       props: {},
@@ -26,7 +29,7 @@ export function getMiscItems(editor: Editor) {
     },
     source: {
       name: 'source',
-      tooltip: 'misc.source',
+      tooltip: computed(() => t('misc.source')),
       icon: mdi.mdiCodeTags,
       enabled: true,
       props: {},
@@ -36,7 +39,7 @@ export function getMiscItems(editor: Editor) {
     },
     preview: {
       name: 'preview',
-      tooltip: 'misc.preview',
+      tooltip: computed(() => t('misc.preview')),
       icon: mdi.mdiFileEyeOutline,
       enabled: true,
       attrs: {
@@ -45,7 +48,7 @@ export function getMiscItems(editor: Editor) {
     },
     formatClear: {
       name: 'format clear',
-      tooltip: 'format.formatClear',
+      tooltip: computed(() => t('format.formatClear')),
       icon: mdi.mdiFormatClear,
       enabled: true,
       props: {

package/src/composables/Toolbar/useStyleItems.ts

@@ -0,0 +1,231 @@
+import * as mdi from "@mdi/js";
+import { Level } from "@tiptap/extension-heading";
+import FontFamily from "@tiptapify/extensions/components/FontFamily.vue";
+import FontSize from "@tiptapify/extensions/components/FontSize.vue";
+import LineHeight from "@tiptapify/extensions/components/LineHeight.vue";
+import { Editor } from "@tiptap/vue-3";
+import StyleColor from "@tiptapify/extensions/components/StyleColor.vue";
+import { computed, markRaw } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+  fonts,
+  fontSizes,
+  lineHeights,
+  headingLevels,
+  setHeadingLevels,
+  defaultFontSize,
+  defaultLineHeight
+} from "@tiptapify/constants/style";
+
+interface MDIIcons {
+  [key: string]: string
+}
+const mdiIcons = mdi as MDIIcons
+
+export function useStyleItems(editor: Editor, theme: any, fontMeasure: string, customHeadingLevels: Array<number> = []) {
+  const { t } = useI18n();
+
+  setHeadingLevels(customHeadingLevels)
+
+  return {
+    heading: {
+      name: 'heading',
+      tooltip: computed(() => t('style.heading')),
+      icon: mdi.mdiFormatHeaderPound,
+      modelValue: null,
+      enabled: true,
+      props: {
+        color: computed(() => editor.isActive('heading') || editor.isActive('paragraph') ? 'primary' : ''),
+      },
+      children: [
+        {
+          name: 'paragraph',
+          tooltip: computed(() => t('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 => {
+          const headingLevel: Level = level as Level
+          return {
+            name: `H${level}`,
+            tooltip: computed(() => t(`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: headingLevel }).run()
+            }
+          }
+        })
+      )
+    },
+    fontFamily: {
+      name: 'font-family',
+      tooltip: computed(() => t('style.fontFamily')),
+      icon: mdi.mdiFormatFont,
+      modelValue: false,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().unsetFontFamily().run()),
+        color: computed(() => {
+          let color = ''
+          for (const font in fonts) {
+            if (editor.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.isActive('textStyle', { fontFamily: fonts[font].fontFamily })) {
+              fontFamily = fonts[font].fontFamily
+              break;
+            }
+          }
+
+          return fontFamily
+        }),
+      }
+    },
+    fontSize: {
+      name: 'font-size',
+      tooltip: computed(() => t('style.fontSize')),
+      icon: mdi.mdiFormatSize,
+      modelValue: false,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().unsetFontSize().run()),
+        color: computed(() => {
+          let color = ''
+          for (const size of fontSizes) {
+            if (editor.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.isActive('textStyle', { fontSize: `${size}${fontMeasure}` })) {
+              fontSize = size
+              break;
+            }
+          }
+
+          return fontSize
+        }),
+      }
+    },
+    lineHeight: {
+      name: 'line-height',
+      tooltip: computed(() => t('style.lineHeight')),
+      icon: mdi.mdiFormatLineHeight,
+      modelValue: null,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().unsetLineHeight().run()),
+        color: computed(() => {
+          let color = ''
+          for (const height of lineHeights) {
+            if (editor.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.isActive('textStyle', { lineHeight: height.toString() })) {
+              lineHeight = height
+              break;
+            }
+          }
+
+          return lineHeight
+        }),
+      }
+    },
+    highlight: {
+      name: 'highlight',
+      tooltip: computed(() => t('style.color.highlight')),
+      icon: mdi.mdiFormatColorFill,
+      icon2: mdi.mdiColorHelper,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
+      },
+      icon2Props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
+        color: computed(() => {
+          const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
+          return editor.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.getAttributes('highlight').color || ''),
+      }
+    },
+    color: {
+      name: 'color',
+      tooltip: computed(() => t('style.color.text')),
+      icon: mdi.mdiFormatColorText,
+      icon2: mdi.mdiColorHelper,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
+      },
+      icon2Props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
+        color: computed(() => {
+          const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
+          return editor.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.getAttributes('textStyle').color || ''),
+      }
+    }
+  }
+}

package/src/{components/Toolbar/fonts.ts → constants/style.ts}

@@ -1,3 +1,24 @@
+import { ref } from "vue";
+
+export const defaultFontSize = 12
+export const fontSizes = [6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 48, 64, 96]
+
+export const defaultLineHeight = 1
+export const lineHeights = [1, 1.5, 2, 3, 4]
+
+export const headingLevels = ref([1, 2, 3, 4, 5, 6])
+export function setHeadingLevels(customHeadingLevels: number[]) {
+  if (customHeadingLevels.length) {
+    customHeadingLevels.forEach(level => {
+      if (level < 1 || level > 6) {
+        throw new Error('customHeadingLevels must be between 1 and 6')
+      }
+    })
+
+    headingLevels.value = customHeadingLevels
+  }
+}
+
 export const fonts = [
   {
     name: 'Arial',

package/src/extensions/components/FontFamily.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+
+import { Editor } from "@tiptap/vue-3";
+
+import { computed, inject, Ref, ref } from 'vue'
+import { useI18n } from "vue-i18n";
+
+const props = defineProps({
+  fonts: { type: Array<{ name: string, fontFamily: string }>, default: [] },
+  fontFamily: { type: String, default: '' },
+})
+
+const { t } = useI18n();
+
+const emit = defineEmits(['close'])
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const initialFontFamily = ref(computed(() => props.fontFamily).value)
+
+const fontSelected = ref<boolean>(false)
+
+function hoverFontFamily(font: string) {
+  fontSelected.value = false
+
+  editor.value.chain().focus().setFontFamily(font).run()
+}
+
+function resetFontFamily() {
+  if (fontSelected.value) {
+    return
+  }
+
+  initialFontFamily.value
+    ? editor.value.chain().focus().setFontFamily(initialFontFamily.value).run()
+    : editor.value.chain().focus().unsetFontFamily().run()
+}
+
+function clearFontFamily() {
+  editor.value.chain().focus().unsetFontFamily().run()
+  emit('close')
+}
+
+function setFontFamily() {
+  fontSelected.value = true
+
+  emit('close')
+}
+
+function isFontFamilyActive(fontFamily: string): boolean {
+  return editor.value.isActive('textStyle', { fontFamily }) || fontFamily === initialFontFamily.value
+}
+</script>
+
+<template>
+  <VList class="tiptapify-font-family-list">
+    <VListItem :disabled="fontFamily === ''" density="compact" @click="clearFontFamily">
+      <VListItemTitle class="font-italic text-grey-darken-1">
+        {{ t('defaultValue') }}
+      </VListItemTitle>
+    </VListItem>
+    <VListItem
+      v-for="font in fonts"
+      :active="isFontFamilyActive(font.fontFamily)"
+      :color="font.fontFamily === initialFontFamily ? 'primary' : ''"
+      density="compact"
+      @click="setFontFamily"
+      @mouseover="hoverFontFamily(font.fontFamily)"
+      @mouseleave="resetFontFamily"
+    >
+      <VListItemTitle>
+        {{ font.name }}
+      </VListItemTitle>
+    </VListItem>
+  </VList>
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-font-family-list {
+  max-height: 390px;
+}
+</style>