tiptapify 0.0.10 → 0.0.11

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/{components/Toolbar/items/style.ts → composables/Toolbar/useStyleItems.ts}

@@ -1,34 +1,36 @@
 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 { fonts } from "@tiptapify/components/Toolbar/fonts";
 import StyleColor from "@tiptapify/extensions/components/StyleColor.vue";
-import { computed, markRaw, ref } from "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 getStyleItems(editor: Editor, theme: any, 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]
+export function useStyleItems(editor: Editor, theme: any, fontMeasure: string, customHeadingLevels: Array<number> = []) {
+  const { t } = useI18n();
 
-  const lineHeights = [1, 1.5, 2, 3, 4]
+  setHeadingLevels(customHeadingLevels)
 
   return {
     heading: {
       name: 'heading',
-      tooltip: 'style.heading',
+      tooltip: computed(() => t('style.heading')),
       icon: mdi.mdiFormatHeaderPound,
       modelValue: null,
       enabled: true,
@@ -37,9 +39,9 @@ export function getStyleItems(editor: Editor, theme: any, fontMeasure: string, c
       },
       children: [
         {
-          name: `paragraph`,
-          tooltip: `style.paragraph`,
-          icon: mdiIcons[`mdiFormatParagraph`],
+          name: 'paragraph',
+          tooltip: computed(() => t('style.paragraph')),
+          icon: mdiIcons['mdiFormatParagraph'],
           noI18n: true,
           enabled: true,
           props: {
@@ -51,9 +53,10 @@ export function getStyleItems(editor: Editor, theme: any, fontMeasure: string, c
         }
       ].concat(
         headingLevels.value.map(level => {
+          const headingLevel: Level = level as Level
           return {
             name: `H${level}`,
-            tooltip: `style.headings.h${level}`,
+            tooltip: computed(() => t(`style.headings.h${level}`)),
             icon: mdiIcons[`mdiFormatHeader${level}`],
             noI18n: true,
             enabled: true,
@@ -61,7 +64,7 @@ export function getStyleItems(editor: Editor, theme: any, fontMeasure: string, c
               color: computed(() => editor.isActive('heading', { level: level }) ? 'primary' : ''),
             },
             attrs: {
-              click: () => editor.chain().focus().toggleHeading({ level }).run()
+              click: () => editor.chain().focus().toggleHeading({ level: headingLevel }).run()
             }
           }
         })
@@ -69,92 +72,116 @@ export function getStyleItems(editor: Editor, theme: any, fontMeasure: string, c
     },
     fontFamily: {
       name: 'font-family',
-      tooltip: 'style.fontFamily',
+      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
+        }),
       },
-      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()
+      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: 'style.fontSize',
+      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
+        }),
       },
-      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()
+      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: 'style.lineHeight',
+      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
+        }),
       },
-      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()
+      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: 'style.color.highlight',
+      tooltip: computed(() => t('style.color.highlight')),
       icon: mdi.mdiFormatColorFill,
       icon2: mdi.mdiColorHelper,
       enabled: true,
@@ -178,7 +205,7 @@ export function getStyleItems(editor: Editor, theme: any, fontMeasure: string, c
     },
     color: {
       name: 'color',
-      tooltip: 'style.color.text',
+      tooltip: computed(() => t('style.color.text')),
       icon: mdi.mdiFormatColorText,
       icon2: mdi.mdiColorHelper,
       enabled: true,

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>

package/src/extensions/components/FontSize.vue

@@ -0,0 +1,83 @@
+<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({
+  sizes: { type: Array<number>, default: [] },
+  measure: { type: String, default: 'px' },
+  fontSize: { type: Number, default () { return null } },
+})
+
+const { t } = useI18n();
+
+const emit = defineEmits(['close'])
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const initialFontSize = ref(computed(() => props.fontSize).value)
+
+const fontSizeSelected = ref<boolean>(false)
+
+function hoverFontSize(fontSize: number) {
+  fontSizeSelected.value = false
+
+  editor.value.chain().focus().setFontSize(`${fontSize}${props.measure}`).run()
+}
+
+function resetFontSize() {
+  if (fontSizeSelected.value) {
+    return
+  }
+
+  initialFontSize.value
+    ? editor.value.chain().focus().setFontSize(`${initialFontSize.value}${props.measure}`).run()
+    : editor.value.chain().focus().unsetFontSize().run()
+}
+
+function clearFontSize() {
+  editor.value.chain().focus().unsetFontSize().run()
+  emit('close')
+}
+
+function setFontSize() {
+  fontSizeSelected.value = true
+
+  emit('close')
+}
+
+function isFontSizeActive(fontSize: number): boolean {
+  return editor.value.isActive('textStyle', { fontSize: `${fontSize}${props.measure}` }) || fontSize === initialFontSize.value
+}
+</script>
+
+<template>
+  <VList class="tiptapify-font-size-list">
+    <VListItem :disabled="fontSize === null" density="compact" @click="clearFontSize">
+      <VListItemTitle class="font-italic text-grey-darken-1">
+        {{ t('defaultValue') }}
+      </VListItemTitle>
+    </VListItem>
+    <VListItem
+      v-for="size in sizes"
+      :active="isFontSizeActive(size)"
+      :color="size === initialFontSize ? 'primary' : ''"
+      density="compact"
+      @click="setFontSize"
+      @mouseover="hoverFontSize(size)"
+      @mouseleave="resetFontSize"
+    >
+      <VListItemTitle>
+        {{ size }}{{ measure}}
+      </VListItemTitle>
+    </VListItem>
+  </VList>
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-font-size-list {
+  max-height: 390px;
+}
+</style>