tiptapify 0.0.9 → 0.0.11

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,20 +1,16 @@
 <script setup lang="ts">
 
-import * as mdi from '@mdi/js'
 import { Editor } from "@tiptap/vue-3";
+import Dialog from "@tiptapify/components/UI/Dialog.vue";
 
 import { useI18n } from 'vue-i18n'
 import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
 
-import helpers from '@tiptapify/utils/helpers'
-
 defineProps({
   variantBtn: { type: String, default() { return 'elevated' }},
   variantField: { type: String, default() { return 'solo' }}
 })
 
-const { ucFirst } = helpers
-
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 const { t } = useI18n()
 
@@ -27,7 +23,7 @@ const generateImageAttrs = () => ({
 
 const attrs = ref(generateImageAttrs())
 
-const dialog = ref<boolean>(false)
+const dialog = ref(null)
 
 const isDisabled = computed(() => {
   const { src } = attrs.value
@@ -64,7 +60,7 @@ function clear() {
 }
 
 function close() {
-  dialog.value = false
+  dialog.value.close()
 
   attrs.value = generateImageAttrs()
 }
@@ -75,7 +71,7 @@ const showTiptapifyImage = (event: CustomEvent) => {
   attrs.value.width = event.detail.image?.width
   attrs.value.height = event.detail.image?.height
 
-  dialog.value = true;
+  dialog.value.open()
 }
 
 onMounted(() => {
@@ -88,55 +84,47 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VDialog v-model="dialog" max-width="800" absolute @click:outside="close">
-    <VCard>
-      <VToolbar class="px-6" density="compact">
-        <span class="headline">{{ ucFirst(t('dialog.image.title')) }}</span>
-
-        <VSpacer />
-
-        <VBtn class="mx-0" icon @click="close">
-          <VIcon :icon="mdi.mdiClose" />
-        </VBtn>
-      </VToolbar>
-
+  <Dialog ref="dialog" module="image" :max-width="800">
+    <template #content>
       <VCardText>
         <VRow>
           <VCol cols="12">
-            <VTextField v-model="attrs.src" :variant="variantField" :label="ucFirst(t('dialog.image.src'))" />
+            <VTextField v-model="attrs.src" density="compact" variant="outlined" :label="t('dialog.image.src')" />
           </VCol>
 
           <VCol cols="12" md="6">
-            <VTextField v-model="attrs.alt" :variant="variantField" :label="ucFirst(t('dialog.image.alt'))" />
+            <VTextField v-model="attrs.alt" density="compact" variant="outlined" :label="t('dialog.image.alt')" />
           </VCol>
 
           <VCol cols="12" md="3">
-            <VTextField v-model="attrs.width" type="number" :variant="variantField" :precision="0" :min="1" :label="ucFirst(t('dialog.image.width'))" />
+            <VTextField v-model="attrs.width" type="number" density="compact" variant="outlined" :precision="0" :min="1" :label="t('dialog.image.width')" />
           </VCol>
 
           <VCol cols="12" md="3">
-            <VTextField v-model="attrs.height" type="number" :variant="variantField" :precision="0" :min="1" :label="ucFirst(t('dialog.image.height'))" />
+            <VTextField v-model="attrs.height" type="number" density="compact" variant="outlined" :precision="0" :min="1" :label="t('dialog.image.height')" />
           </VCol>
         </VRow>
       </VCardText>
+    </template>
 
+    <template #actions>
       <VCardActions>
         <VRow>
           <VCol class="d-flex justify-start">
             <VBtn color="warning" v-if="editor.isActive('image')" :variant="variantBtn" :disabled="isDisabled" @click="clear">
-              {{ ucFirst(t('dialog.clear')) }}
+              {{ t('dialog.clear') }}
             </VBtn>
           </VCol>
           <VCol class="d-flex justify-end">
             <VBtn :variant="variantBtn" @click="close" class="mr-2">
-              {{ ucFirst(t('dialog.close')) }}
+              {{ t('dialog.close') }}
             </VBtn>
             <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">
-              {{ ucFirst(t('dialog.apply')) }}
+              {{ t('dialog.apply') }}
             </VBtn>
           </VCol>
         </VRow>
       </VCardActions>
-    </VCard>
-  </VDialog>
+    </template>
+  </Dialog>
 </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

@@ -1,35 +1,38 @@
 <script setup lang="ts">
 
-import * as mdi from '@mdi/js'
 import { Editor } from "@tiptap/vue-3";
 
 import { useI18n } from 'vue-i18n'
-import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
+import { computed, inject, onMounted, onUnmounted, Ref, ref, watch } from 'vue'
 
-import helpers from '@tiptapify/utils/helpers'
+import Dialog from "@tiptapify/components/UI/Dialog.vue"
 
 defineProps({
   variantBtn: { type: String, default() { return 'elevated' }},
-  variantField: { type: String, default() { return 'solo' }}
+  variantField: { type: String, default() { return 'outlined' }}
 })
 
-const { ucFirst } = helpers
-
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 const { t } = useI18n()
 
 const generateLinkAttrs = () => ({
   href: '',
-  target: '_blank',
+  target: targetAttrs.value[0],
   cssClass: '',
   rel: ''
 })
 
-const relAttrs = ['alternate', 'author', 'bookmark', 'external', 'help', 'license', 'next', 'nofollow', 'noreferrer', 'noopener', 'prev', 'search', 'tag']
+const relAttrs = ['alternate', 'author', 'bookmark', 'external', 'help', 'license', 'me', 'next', 'nofollow', 'noopener', 'noreferrer', 'opener', 'prev', 'privacy-policy', 'search', 'tag', 'terms-of-service']
+
+const targetAttrs = computed(() => [
+  { value: '_blank', title: t('dialog.link.target_blank') },
+  { value: '_self', title: t('dialog.link.target_self') }
+])
 
 const attrs = ref(generateLinkAttrs())
+const hrefInvalid = ref(false)
 
-const dialog = ref<boolean>(false)
+const dialog = ref(null)
 
 const isDisabled = computed(() => {
   const { href } = attrs.value
@@ -38,11 +41,10 @@ const isDisabled = computed(() => {
 
 function apply() {
   let { href, target, rel, cssClass } = attrs.value
-  target = target ? '_blank' : '_self'
-  rel = rel.join(' ')
+  rel = rel?.length ? rel.join(' ') : null
 
   if (href) {
-    editor.value.chain().focus().extendMarkRange('link').setLink({ href, target, rel, class: cssClass }).run()
+    editor.value.chain().focus().extendMarkRange('link').setLink({ href, target: target.value, rel, class: cssClass }).run()
   }
 
   close()
@@ -55,18 +57,18 @@ function clear() {
 }
 
 function close() {
-  dialog.value = false
-
   attrs.value = generateLinkAttrs()
+
+  dialog.value.close()
 }
 
 const showLink = (event: CustomEvent) => {
-  attrs.value.href = event.detail.link?.href
-  attrs.value.target = event.detail.link?.target === '_blank'
+  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
 
-  dialog.value = true;
+  dialog.value.open()
 }
 
 onMounted(() => {
@@ -76,67 +78,96 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('tiptapify-show-link', showLink as EventListener)
 })
-</script>
 
-<template>
-  <VDialog v-model="dialog" max-width="800" absolute @click:outside="close">
-    <VCard>
-      <VToolbar class="px-6" density="compact">
-        <span class="headline">{{ ucFirst(t('dialog.link.title')) }}</span>
+watch(() => attrs.value.href, () => {
+  const azAZ09 = 'a-zA-Z0-9'
 
-        <VSpacer />
+  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}`
 
-        <VBtn class="mx-0" icon @click="close">
-          <VIcon :icon="mdi.mdiClose" />
-        </VBtn>
-      </VToolbar>
+  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 = attrs.value.href !== '' && !regex.test(attrs.value.href)
+})
+</script>
 
+<template>
+  <Dialog ref="dialog" module="link">
+    <template #content>
       <VCardText>
         <VRow>
-          <VCol cols="12" md="9">
-            <VTextField v-model="attrs.href" :variant="variantField" :label="ucFirst(t('dialog.link.href'))" autofocus />
+          <VCol cols="12">
+            <VTextField
+                v-model="attrs.href"
+                density="compact"
+                variant="outlined"
+                :label="t('dialog.link.href')"
+                :error-messages="hrefInvalid ? t('dialog.link.href_error') : ''"
+                autofocus
+            />
+          </VCol>
+
+          <VCol cols="12" md="4">
+            <VSelect
+                v-model="attrs.target"
+                :items="targetAttrs"
+                :label="t('dialog.link.target')"
+                variant="outlined"
+                return-object
+                density="compact"
+            />
           </VCol>
 
-          <VCol cols="12" md="3">
-            <VCheckbox v-model="attrs.target" color="primary" :label="ucFirst(t('dialog.link.target'))" />
+          <VCol cols="12" md="8">
+            <VTextField v-model="attrs.cssClass" density="compact" variant="outlined" :label="t('dialog.link.class')" />
           </VCol>
 
           <VCol cols="12">
             <VSelect
                 v-model="attrs.rel"
                 :items="relAttrs"
-                :label="ucFirst(t('dialog.link.rel'))"
-                :variant="variantField"
+                :label="t('dialog.link.rel')"
+                variant="outlined"
                 multiple
                 chips
                 closable-chips
                 clearable
+                density="compact"
             />
           </VCol>
-
-          <VCol cols="12">
-            <VTextField v-model="attrs.cssClass" :variant="variantField" :label="ucFirst(t('dialog.link.class'))" />
-          </VCol>
         </VRow>
       </VCardText>
+    </template>
 
+    <template #actions>
       <VCardActions>
         <VRow>
           <VCol class="d-flex justify-start">
             <VBtn color="warning" v-if="editor.isActive('link')" :variant="variantBtn" :disabled="isDisabled" @click="clear">
-              {{ ucFirst(t('dialog.clear')) }}
+              {{ t('dialog.clear') }}
             </VBtn>
           </VCol>
           <VCol class="d-flex justify-end">
             <VBtn :variant="variantBtn" @click="close" class="mr-2">
-              {{ ucFirst(t('dialog.close')) }}
+              {{ t('dialog.close') }}
             </VBtn>
-            <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">
-              {{ ucFirst(t('dialog.apply')) }}
+            <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled || hrefInvalid" @click="apply">
+              {{ t('dialog.apply') }}
             </VBtn>
           </VCol>
         </VRow>
       </VCardActions>
-    </VCard>
-  </VDialog>
+    </template>
+  </Dialog>
 </template>

package/src/extensions/components/PreviewDialog.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
+import Dialog from "@tiptapify/components/UI/Dialog.vue";
 import { ref, onMounted, onUnmounted } from 'vue'
-import { useI18n } from "vue-i18n";
-import * as mdi from '@mdi/js'
-
-const { t } = useI18n();
 
 const content = ref()
 
-const dialog = ref(false)
+const dialog = ref(null)
 
 const showDialog = (event: CustomEvent) => {
   content.value = event.detail.html
-  dialog.value = true;
+
+  dialog.value.open()
 }
 
 onMounted(() => {
@@ -24,19 +22,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VDialog v-model="dialog" fullscreen>
-    <VCard>
-      <VToolbar>
-        <VBtn :icon="mdi.mdiClose" @click="dialog = false" />
-
-        <VToolbarTitle>Preview</VToolbarTitle>
-      </VToolbar>
-
+  <Dialog ref="dialog" module="preview" fullscreen>
+    <template #content>
       <VCardItem>
         <div class="tiptap" v-html="content"></div>
       </VCardItem>
-    </VCard>
-  </VDialog>
+    </template>
+  </Dialog>
 </template>
 
 <style lang="scss">

package/src/extensions/components/ShowSourceDialog.vue

@@ -1,30 +1,27 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
+import Dialog from "@tiptapify/components/UI/Dialog.vue";
 import { ref, onMounted, onUnmounted, watch, inject, Ref } from 'vue'
 import { useI18n } from "vue-i18n";
 
-import helpers from "@tiptapify/utils/helpers";
-
 const props = defineProps({
   indent: { type: Number, default: 2 },
   variantBtn: { type: String, default: 'elevated' },
   variantField: { type: String, default: 'solo' }
 })
 
-const { ucFirst } = helpers;
-
 const { t } = useI18n();
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const dialog = ref(false)
+const dialog = ref(null)
 const formatted = ref(false)
 const sourceCode = ref('')
 
 const formatHtml = (html: string): string => {
+  const singleTags = ['img', 'hr', 'br', 'input']
   let formatted = html.replace(/>/g, '>\n');
 
-  formatted = formatted.replace(/\n</g, '\n<');
   formatted = formatted.replace(/([^>\n])</g, '$1\n<');
 
   const lines = formatted.split('\n');
@@ -38,7 +35,8 @@ const formatHtml = (html: string): string => {
 
         const indentedLine = ' '.repeat(indentLevel * props.indent) + line;
 
-        if (line.match(/<[^\/][^>]*>/) && !line.match(/<.*\/>/)) {
+        const tag = line.match(/<\/?(\S+).*>/) ?? []
+        if (!singleTags.includes(tag[1] ?? '') && line.match(/<[^\/][^>]*>/) && !line.match(/<.*\/>/)) {
           indentLevel++;
         }
 
@@ -57,11 +55,12 @@ const unformatHtml = (html: string): string => {
 
 const showDialog = (event: CustomEvent) => {
   sourceCode.value = event.detail.html
-  dialog.value = true;
+
+  dialog.value.open()
 }
 
 const saveChanges = () => {
-  dialog.value = false
+  dialog.value.close()
 
   editor.value.commands.setContent(sourceCode.value, true)
 }
@@ -80,16 +79,14 @@ watch(() => formatted.value, () => {
 </script>
 
 <template>
-  <VDialog v-model="dialog" max-width="1500">
-    <VCard>
-      <VCardTitle>{{ ucFirst(t('dialog.source.title')) }}</VCardTitle>
-
+  <Dialog ref="dialog" module="source" :max-width="1500">
+    <template #content>
       <VCardText>
         <VContainer fluid class="pt-0 pl-0 pr-0">
           <VRow>
             <VCol>
               <VBtn v-model="formatted" :color="`${formatted ? 'primary' : ''}`" @click="formatted = !formatted">
-                {{ ucFirst(t('dialog.source.prettify')) }}
+                {{ t('dialog.source.prettify') }}
               </VBtn>
             </VCol>
           </VRow>
@@ -103,18 +100,20 @@ watch(() => formatted.value, () => {
             class="source-code-area"
         />
       </VCardText>
+    </template>
 
+    <template #actions>
       <VCardActions>
         <VSpacer></VSpacer>
         <VBtn :variant="variantBtn" @click="dialog = false">
-          {{ ucFirst(t('dialog.close')) }}
+          {{ t('dialog.close') }}
         </VBtn>
         <VBtn :variant="variantBtn" color="primary" @click="saveChanges">
-          {{ ucFirst(t('dialog.apply')) }}
+          {{ t('dialog.apply') }}
         </VBtn>
       </VCardActions>
-    </VCard>
-  </VDialog>
+    </template>
+  </Dialog>
 </template>
 
 <style scoped lang="scss">