tiptapify 0.0.9 → 0.0.10

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.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,80 @@ 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>
-
-        <VSpacer />
+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')
 
-        <VBtn class="mx-0" icon @click="close">
-          <VIcon :icon="mdi.mdiClose" />
-        </VBtn>
-      </VToolbar>
+  hrefInvalid.value = !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="3">
-            <VCheckbox v-model="attrs.target" color="primary" :label="ucFirst(t('dialog.link.target'))" />
+          <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="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')) }}
+              {{ 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,23 +1,20 @@
 <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('')
 
@@ -57,11 +54,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 +78,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 +99,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">

package/src/extensions/components/StyleColor.vue

@@ -7,7 +7,7 @@ import { computed, inject, Ref, ref } from 'vue'
 
 const { t } = useI18n()
 
-defineExpose({ open })
+defineExpose({ open, close })
 
 const props = defineProps({
   show: { type: Boolean, default: true },
@@ -21,25 +21,52 @@ const emit = defineEmits(['close'])
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const colorPicker = ref(false)
+const initialColor = ref(computed(() => props.color).value)
 const customColor = ref(computed(() => props.color).value)
 
-const colors = {
+const colorSelected = ref<boolean>(false)
+
+const greyShades = {
   black: '#000',
+  '#222': '#222',
   darkgray: '#444',
   gray: '#888',
   lightgray: '#ccc',
   white: '#fff',
-  cyan: '#00FFFF',
-  light: '#0088ff',
+}
+const blueShades = {
+  '#000044': '#000044',
+  '#00006e': '#00006e',
+  '#0000bb': '#0000bb',
   blue: '#0000ff',
-  indigo: '#4b0082',
-  purple: '#800080',
-  pink: '#ff00ff',
+  lightblue: '#0088ff',
+  cyan: '#00FFFF',
+}
+const greenShades = {
+  '#003100': '#003100',
+  '#005200': '#005200',
+  '#007000': '#007000',
+  '#00b700': '#00b700',
+  green: '#00ff00',
+  '#70ff70': '#70ff70',
+}
+const redShades = {
+  '#520000': '#520000',
+  '#810000': '#810000',
+  '#b20000': '#b20000',
   red: '#ff0000',
+  '#ff2323': '#ff2323',
+  '#ff5c5c': '#ff5c5c',
+}
+const otherShades = {
+  brown: '#964B00',
   orange: '#ff9900',
   yellow: '#ffff00',
-  green: '#00ff00',
+  pink: '#ff00ff',
+  purple: '#800080',
+  indigo: '#4b0082',
 }
+const colors = { ...greyShades, ...blueShades, ...greenShades, ...redShades, ...otherShades }
 
 type Color = { r: number, g: number, b: number, a?: number }
 
@@ -67,14 +94,38 @@ function hexToRgb(hex: string): Color {
   };
 }
 
-function setColor(color: string) {
+function hoverColor(color: string) {
+  colorSelected.value = false
+
   if (props.fontColor) {
     editor.value.chain().focus().setColor(color).run()
   }
 
   if (props.backgroundColor) {
-    editor.value.chain().focus().setHighlight({ color }).run()
+    editor.value.chain().focus().setHighlight({ color: color }).run()
+  }
+}
+
+function close() {
+  resetColor()
+}
+
+function resetColor() {
+  if (colorSelected.value) {
+    return
+  }
+
+  if (props.fontColor) {
+    editor.value.chain().focus().setColor(initialColor.value).run()
+  }
+
+  if (props.backgroundColor) {
+    editor.value.chain().focus().setHighlight({ color: initialColor.value }).run()
   }
+}
+
+function setColor() {
+  colorSelected.value = true
 
   emit('close')
 }
@@ -103,7 +154,9 @@ function isColorActive(color: string): boolean {
         <div
             class="tiptapify-style-color-item"
             :class="isColorActive(colorCode) ? 'tiptapify-style-color-item-active' : ''"
-            @click="setColor(colorCode)"
+            @mouseenter="hoverColor(colorCode)"
+            @mouseleave="resetColor()"
+            @click="setColor"
         >
           <div
               class="tiptapify-style-color-picker"
@@ -133,12 +186,12 @@ function isColorActive(color: string): boolean {
 
       <VCard>
         <VCardItem>
-          <VColorPicker v-model="customColor" elevated elevation="24" hide-inputs />
+          <VColorPicker v-model="customColor" elevated elevation="24" hide-inputs @update:model-value="hoverColor($event)" />
         </VCardItem>
 
         <VCardActions>
-          <VBtn variant="flat" color="primary" @click="setColor(customColor)">OK</VBtn>
-          <VBtn variant="flat" color="grey-400" @click="colorPicker = !colorPicker; customColor = color">Cancel</VBtn>
+          <VBtn variant="flat" color="primary" @click="setColor">OK</VBtn>
+          <VBtn variant="flat" color="grey-400" @click="colorPicker = !colorPicker; customColor = initialColor; resetColor()">Cancel</VBtn>
         </VCardActions>
       </VCard>
     </VMenu>
@@ -154,7 +207,7 @@ function isColorActive(color: string): boolean {
 <style lang="scss" scoped>
 .tiptapify-style-color-container {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(6, 1fr);
 }
 
 .tiptapify-style-color-item {

package/src/extensions/components/TableBuilder.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
 
 import { Editor } from "@tiptap/vue-3";
-import helpers from '@tiptapify/utils/helpers'
 import { useI18n } from 'vue-i18n'
 
 import { inject, Ref, ref } from 'vue'
 
 const { t } = useI18n()
 
-const { ucFirst } = helpers
-
 defineExpose({ open })
 
 defineProps({
@@ -55,7 +52,7 @@ function printSelection() {
         v-model="withHeaderRow"
         density="compact"
         color="primary"
-        :label="ucFirst(t('media.tables.insertWithHeaderRow'))" hide-details
+        :label="t('media.tables.insertWithHeaderRow')" hide-details
     />
 
     <div v-for="rowNum in maxRows" :key="`row-${rowNum}`" class="tiptapify-insert-table-row">
@@ -73,8 +70,8 @@ function printSelection() {
 
     <div class="tiptapify-table-builder-info">
       <span>
-        {{ ucFirst(t('media.tables.rows')) }}: {{ rowHover }}
-        {{ ucFirst(t('media.tables.cols')) }}: {{ colHover }}
+        {{ t('media.tables.rows') }}: {{ rowHover }}
+        {{ t('media.tables.cols') }}: {{ colHover }}
       </span>
       <span>
         {{ printSelection() }}

package/src/i18n/locales/ch.json

@@ -0,0 +1,118 @@
+{
+  "content": {
+    "placeholder": "Schriibä Sie öppis da..."
+  },
+  "style": {
+    "paragraph": "Absatz",
+    "heading": "Überschrift",
+    "headings": {
+      "h1": "Überschrift Stufe 1",
+      "h2": "Überschrift Stufe 2",
+      "h3": "Überschrift Stufe 3",
+      "h4": "Überschrift Stufe 4",
+      "h5": "Überschrift Stufe 5",
+      "h6": "Überschrift Stufe 6"
+    },
+    "fontFamily": "Schriftart",
+    "fontSize": "Schriftgrösse",
+    "lineHeight": "Zylähöchi",
+    "color": {
+      "highlight": "Markierigsfäru",
+      "text": "Täxtfäru",
+      "unset": "Färu entfärnä",
+      "custom": "Benutzerdefinierti Färu"
+    }
+  },
+  "format": {
+    "bold": "Fett",
+    "italic": "Kursiv",
+    "strike": "Durchgstrichä",
+    "underline": "Unterstrichä",
+    "sup": "Hochgstellt",
+    "sub": "Tiefgstellt",
+    "break": "Hartä Umbruch",
+    "line": "Horizontali Linie",
+    "blockquote": "Zitat",
+    "code": "Code",
+    "codeblock": "Code-Block",
+    "formatClear": "Formatierig löschä"
+  },
+  "media": {
+    "link": "Äxtärnä Link",
+    "image": "Bild",
+    "tables": {
+      "table": "Tabälle",
+      "insertTable": "Tabälle yfügä",
+      "deleteTable": "Tabälle löschä",
+      "insertWithHeaderRow": "Tabälle mit Chopfzyle yfügä",
+      "rows": "Zylä",
+      "row": "Zyle",
+      "insertRowBefore": "Zyle dervor yfügä",
+      "insertRowAfter": "Zyle dernah yfügä",
+      "deleteRow": "Zyle löschä",
+      "cols": "Spaltä",
+      "col": "Spalte",
+      "insertColBefore": "Spalte dervor yfügä",
+      "insertColAfter": "Spalte dernah yfügä",
+      "deleteCol": "Spalte löschä",
+      "mergeCells": "Zällä zämmäfüärä",
+      "splitCell": "Zälle teilä"
+    }
+  },
+  "action": {
+    "undo": "Rückgängig",
+    "redo": "Wiederholä"
+  },
+  "alignment": "Usrichtig",
+  "alignments": {
+    "left": "Links usrichtä",
+    "center": "Zentriert usrichtä",
+    "right": "Rächts usrichtä",
+    "justify": "Blocksatz"
+  },
+  "list": "Lischtä",
+  "lists": {
+    "bullet": "Ungordneti Lischtä",
+    "numbered": "Nummerierti Lischtä",
+    "task": "Uufgabälischtä",
+    "indent": "Lischtäelemänt yrückä",
+    "outdent": "Lischtäelemänt usrückä"
+  },
+  "dialog": {
+    "apply": "Awändä",
+    "clear": "Löschä",
+    "close": "Schliässä",
+    "image": {
+      "title": "Bild hinzuefügä/bearbyitä",
+      "src": "Quälle",
+      "alt": "Alt-Täxt",
+      "width": "Bryti",
+      "height": "Höchi"
+    },
+    "link": {
+      "title": "Link hinzuefügä/bearbyitä",
+      "href": "Link-Adrässe",
+      "href_error": "Ungültigi Link-Adrässe",
+      "target": "Öffnä i...",
+      "target_blank": "Neus Fänschter",
+      "target_self": "Aktuells Fänschter",
+      "rel": "Rel",
+      "class": "CSS-Klasse"
+    },
+    "preview": {
+      "title": "Vorschau"
+    },
+    "source": {
+      "title": "Quellcode azygä",
+      "prettify": "Verschönärä"
+    }
+  },
+  "misc": {
+    "source": "Quellcode azygä",
+    "preview": "Vorschau"
+  },
+  "footer": {
+    "words": "Wörter",
+    "chars": "Zeichä"
+  }
+}