tiptapify 0.0.10 → 0.0.12

package/src/composables/Toolbar/Style/useHeading.ts

@@ -0,0 +1,64 @@
+import * as mdi from "@mdi/js";
+import { Level } from "@tiptap/extension-heading";
+import { Editor } from "@tiptap/vue-3";
+import { headingLevels, setHeadingLevels } from "@tiptapify/constants/style";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+interface MDIIcons {
+  [key: string]: string
+}
+const mdiIcons = mdi as MDIIcons
+
+export function useHeading(customHeadingLevels: Array<number> = []) {
+  const { t } = useI18n();
+
+  setHeadingLevels(customHeadingLevels)
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'heading',
+    tooltip: computed(() => t('style.heading')),
+    icon: `mdiSvg:${mdi.mdiFormatHeaderPound}`,
+    modelValue: null,
+    enabled: true,
+    props: {
+      color: computed(() => editor.value.isActive('heading') || editor.value.isActive('paragraph') ? 'primary' : ''),
+    },
+    children: [
+      {
+        name: 'paragraph',
+        tooltip: computed(() => t('style.paragraph')),
+        // icon: mdiIcons['mdiFormatParagraph'],
+        icon: `mdiSvg:${mdiIcons['mdiFormatParagraph']}`,
+        noI18n: true,
+        enabled: true,
+        props: {
+          color: computed(() => editor.value.isActive('paragraph') ? 'primary' : ''),
+        },
+        attrs: {
+          click: () => editor.value.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}`],
+          icon: `mdiSvg:${mdiIcons[`mdiFormatHeader${level}`]}`,
+          noI18n: true,
+          enabled: true,
+          props: {
+            color: computed(() => editor.value.isActive('heading', {level: level}) ? 'primary' : ''),
+          },
+          attrs: {
+            click: () => editor.value.chain().focus().toggleHeading({level: headingLevel}).run()
+          }
+        }
+      })
+    )
+  }
+}

package/src/composables/Toolbar/Style/useHighlight.ts

@@ -0,0 +1,36 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import StyleColor from "@tiptapify/extensions/components/StyleColor.vue";
+import { computed, inject, markRaw, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useHighlight(theme: any) {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'highlight',
+    tooltip: computed(() => t('style.color.highlight')),
+    icon: `mdiSvg:${mdi.mdiFormatColorFill}`,
+    icon2: `mdiSvg:${mdi.mdiColorHelper}`,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().toggleHighlight().run()),
+    },
+    icon2Props: {
+      disabled: computed(() => !editor.value.can().chain().focus().toggleHighlight().run()),
+      color: computed(() => {
+        const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
+        return editor.value.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.value.getAttributes('highlight').color || ''),
+    }
+  }
+}

package/src/composables/Toolbar/Style/useLineHeight.ts

@@ -0,0 +1,49 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { lineHeights } from "@tiptapify/constants/style";
+import LineHeight from "@tiptapify/extensions/components/LineHeight.vue";
+import { computed, inject, markRaw, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useLineHeight() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'line-height',
+    tooltip: computed(() => t('style.lineHeight')),
+    icon: `mdiSvg:${mdi.mdiFormatLineHeight}`,
+    modelValue: null,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().unsetLineHeight().run()),
+      color: computed(() => {
+        let color = ''
+        for (const height of lineHeights) {
+          if (editor.value.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.value.isActive('textStyle', { lineHeight: height.toString() })) {
+            lineHeight = height
+            break;
+          }
+        }
+
+        return lineHeight
+      }),
+    }
+  }
+}

package/src/composables/Toolbar/useActionsItems.ts

@@ -0,0 +1,9 @@
+import { useRedo } from "@tiptapify/composables/Toolbar/Actions/useRedo";
+import { useUndo } from "@tiptapify/composables/Toolbar/Actions/useUndo";
+
+export function useActionsItems() {
+  return {
+    undo: useUndo(),
+    redo: useRedo()
+  }
+}

package/src/composables/Toolbar/useAlignmentItems.ts

@@ -0,0 +1,13 @@
+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: useAlignmentLeft(),
+    alignmentCenter: useAlignmentCenter(),
+    alignmentRight: useAlignmentRight(),
+    alignmentJustify: useAlignmentJustify()
+  }
+}

package/src/composables/Toolbar/useFormatExtraItems.ts

@@ -0,0 +1,15 @@
+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: useSup(),
+    sub: useSub(),
+    code: useCode(),
+    codeBlock: useCodeBlock(),
+    blockquote: useBlockquote()
+  }
+}

package/src/composables/Toolbar/useFormatItems.ts

@@ -0,0 +1,13 @@
+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: useBold(),
+    italic: useItalic(),
+    underline: useUnderline(),
+    strike: useStrike()
+  }
+}

package/src/composables/Toolbar/useListItems.ts

@@ -0,0 +1,15 @@
+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: useBullet(),
+    listNumbered: useNumbered(),
+    listTask: useTask(),
+    listIndent: useIndent(),
+    listOutdent: useOutdent()
+  }
+}

package/src/composables/Toolbar/useMediaItems.ts

@@ -0,0 +1,11 @@
+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() {
+  return {
+    link: useLink(),
+    image: useImage(),
+    table: useTable()
+  }
+}

package/src/composables/Toolbar/useMiscItems.ts

@@ -0,0 +1,17 @@
+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: useLine(),
+    break: useBreak(),
+    source: useSource(),
+    preview: usePreview(),
+    formatClear: useFormatClear(),
+    invisibleCharacters: useInvisibleCharacters(),
+  }
+}

package/src/composables/Toolbar/useStyleItems.ts

@@ -0,0 +1,17 @@
+import { useColor } from "@tiptapify/composables/Toolbar/Style/useColor";
+import { useFontFamily } from "@tiptapify/composables/Toolbar/Style/useFontFamily";
+import { useFontSize } from "@tiptapify/composables/Toolbar/Style/useFontSize";
+import { useHeading } from "@tiptapify/composables/Toolbar/Style/useHeading";
+import { useHighlight } from "@tiptapify/composables/Toolbar/Style/useHighlight";
+import { useLineHeight } from "@tiptapify/composables/Toolbar/Style/useLineHeight";
+
+export function useStyleItems(theme: any, fontMeasure: string, customHeadingLevels: Array<number> = []) {
+  return {
+    heading: useHeading(customHeadingLevels),
+    fontFamily: useFontFamily(),
+    fontSize: useFontSize(fontMeasure),
+    lineHeight: useLineHeight(),
+    highlight: useHighlight(theme),
+    color: useColor(theme)
+  }
+}

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>

package/src/extensions/components/ImageDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import { Editor } from "@tiptap/vue-3";
-import Dialog from "@tiptapify/components/UI/Dialog.vue";
+import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
 
 import { useI18n } from 'vue-i18n'
 import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
@@ -66,6 +66,10 @@ function close() {
 }
 
 const showTiptapifyImage = (event: CustomEvent) => {
+  if (event.detail.editorId !== editor.value.instanceId) {
+    return
+  }
+
   attrs.value.src = event.detail.image?.src
   attrs.value.alt = event.detail.image?.alt
   attrs.value.width = event.detail.image?.width
@@ -84,7 +88,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Dialog ref="dialog" module="image" :max-width="800">
+  <TiptapifyDialog ref="dialog" module="image" :max-width="800">
     <template #content>
       <VCardText>
         <VRow>
@@ -126,5 +130,5 @@ onUnmounted(() => {
         </VRow>
       </VCardActions>
     </template>
-  </Dialog>
+  </TiptapifyDialog>
 </template>

package/src/extensions/components/LineHeight.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({
+  lineHeights: { type: Array<number>, default () { return [] } },
+  lineHeight: { type: Number, default () { return null } },
+})
+
+const { t } = useI18n();
+
+const emit = defineEmits(['close'])
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const initialLineHeight = ref(computed(() => props.lineHeight).value)
+
+const lineHeightSelected = ref<boolean>(false)
+
+function hoverLineHeight(lineHeight: number) {
+  lineHeightSelected.value = false
+
+  editor.value.chain().focus().setLineHeight(lineHeight.toString()).run()
+}
+
+function resetLineHeight() {
+  if (lineHeightSelected.value) {
+    return
+  }
+
+  initialLineHeight.value
+    ? editor.value.chain().focus().setLineHeight(initialLineHeight.value.toString()).run()
+    : editor.value.chain().focus().unsetLineHeight().run()
+}
+
+function clearLineHeight() {
+  editor.value.chain().focus().unsetLineHeight().run()
+  emit('close')
+}
+
+function setLineHeight() {
+  lineHeightSelected.value = true
+
+  emit('close')
+}
+
+function isLineHeightActive(lineHeight: number): boolean {
+  return editor.value.isActive('textStyle', { lineHeight }) || lineHeight === initialLineHeight.value
+}
+</script>
+
+<template>
+  <VList class="tiptapify-line-height-list">
+    <VListItem :disabled="lineHeight === null" density="compact" @click="clearLineHeight">
+      <VListItemTitle class="font-italic text-grey-darken-1">
+        {{ t('defaultValue') }}
+      </VListItemTitle>
+    </VListItem>
+    <VListItem
+      v-for="lineHeight in lineHeights"
+      :active="isLineHeightActive(lineHeight)"
+      :color="lineHeight === initialLineHeight ? 'primary' : ''"
+      density="compact"
+      @click="setLineHeight"
+      @mouseover="hoverLineHeight(lineHeight)"
+      @mouseleave="resetLineHeight"
+    >
+      <VListItemTitle>
+        {{ lineHeight }}
+      </VListItemTitle>
+    </VListItem>
+  </VList>
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-line-height-list {
+  max-height: 390px;
+}
+</style>

package/src/extensions/components/LinkDialog.vue

@@ -5,7 +5,7 @@ import { Editor } from "@tiptap/vue-3";
 import { useI18n } from 'vue-i18n'
 import { computed, inject, onMounted, onUnmounted, Ref, ref, watch } from 'vue'
 
-import Dialog from "@tiptapify/components/UI/Dialog.vue"
+import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue"
 
 defineProps({
   variantBtn: { type: String, default() { return 'elevated' }},
@@ -63,7 +63,11 @@ function close() {
 }
 
 const showLink = (event: CustomEvent) => {
-  attrs.value.href = event.detail.link?.href
+  if (event.detail.editorId !== editor.value.instanceId) {
+    return
+  }
+
+  attrs.value.href = event.detail.link?.href ?? ''
   attrs.value.target = targetAttrs.value.find(item => item.value === event.detail.link?.target) ?? targetAttrs[0]
   attrs.value.rel = event.detail.link?.rel?.split(' ')
   attrs.value.cssClass = event.detail.link?.class
@@ -80,14 +84,30 @@ onUnmounted(() => {
 })
 
 watch(() => attrs.value.href, () => {
-  const regex = new RegExp(/^((https?|ftps?|sftp):\/\/[a-z0-9]+(\.[a-z0-9]+)+|mailto:\w+@[a-z]+(\.[a-z]+)*|tel:\+?\d+)$/, 'igu')
+  const azAZ09 = 'a-zA-Z0-9'
+
+  const regexHrefProto = 'https?:\\/\\/'
+  const regexHrefAuth = `([${azAZ09}]+(:[${azAZ09}]+)?@)?`
+  const regexHrefDomain = `[${azAZ09}]+(\\.[${azAZ09}]+(-?[${azAZ09}]+)?)+`
+  const regexHrefPath = `(\\/[${azAZ09}\\-]+)*`
+  const regexHrefFragment = '(#[^\\s]*)?'
+  const regexHrefQueryParam = `(\\?[${azAZ09}\\-_]+((\\[[${azAZ09}]+\\])?=[${azAZ09}\\-_%]+)?)?`
+  const regexHrefQueryParamExtra = `(&[${azAZ09}\\-_]+((\\[[${azAZ09}]+\\])?=[${azAZ09}\\-_%]+)?)*`
+  const regexHref = `${regexHrefProto}${regexHrefAuth}${regexHrefDomain}${regexHrefPath}${regexHrefFragment}${regexHrefQueryParam}${regexHrefQueryParamExtra}`
+
+  const regexMailto = `mailto:\\w+@[${azAZ09}]+(\\.[${azAZ09}]+)*`
+  const regexTel = 'tel:\\+?[0-9]+'
+
+  const regexAll = [regexHref, regexMailto, regexTel].join('|')
+
+  const regex = new RegExp(`^(${regexAll})$`, 'i')
 
-  hrefInvalid.value = !regex.test(attrs.value.href)
+  hrefInvalid.value = attrs.value.href !== '' && !regex.test(attrs.value.href)
 })
 </script>
 
 <template>
-  <Dialog ref="dialog" module="link">
+  <TiptapifyDialog ref="dialog" module="link">
     <template #content>
       <VCardText>
         <VRow>
@@ -146,12 +166,12 @@ watch(() => attrs.value.href, () => {
             <VBtn :variant="variantBtn" @click="close" class="mr-2">
               {{ t('dialog.close') }}
             </VBtn>
-            <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">
+            <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled || hrefInvalid" @click="apply">
               {{ t('dialog.apply') }}
             </VBtn>
           </VCol>
         </VRow>
       </VCardActions>
     </template>
-  </Dialog>
+  </TiptapifyDialog>
 </template>