tiptapify 0.0.32 → 0.0.34

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

package/src/components/Toolbar/Index.vue

@@ -145,7 +145,17 @@ function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: any, itemTit
 }
 
 Object.keys(props.customExtensions).forEach((key: any) => {
-  toolbarItems.push(props.customExtensions[key])
+  const existingSection = toolbarItems.find(item => item.section === props.customExtensions[key].section)
+  if (existingSection) {
+    for (const component of props.customExtensions[key].components) {
+      const existingComponent = existingSection.components.find(_component => _component.name === component.name)
+      if (existingComponent) {
+        existingComponent.component = component.component
+      }
+    }
+  } else {
+    toolbarItems.push(props.customExtensions[key])
+  }
 })
 
 </script>

package/src/extensions/components/media/image/ImageDialog.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 
+import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
 import defaults from "@tiptapify/constants/defaults";
@@ -30,6 +31,37 @@ const isDisabled = computed(() => {
   return !src
 })
 
+const keepRatio = ref(true)
+const ratio = ref(null)
+function setRatio(force: boolean = false) {
+  if (!keepRatio.value && !force) {
+    return
+  }
+
+  if ((!ratio.value || force) && attrs.value.width && attrs.value.height) {
+    ratio.value = parseFloat(attrs.value.width / attrs.value.height).toFixed(4)
+  }
+}
+function updateSizeRatio(dim: string) {
+  if (!ratio.value || !attrs.value.width || !attrs.value.height) {
+    return
+  }
+
+  if (!keepRatio.value) {
+    setRatio(true)
+    return
+  }
+
+  const source = dim.toLowerCase()
+  const sizeRatio = source === 'width'
+    ? (attrs.value.width / ratio.value)
+    : (attrs.value.height * ratio.value)
+
+  const target = source === 'width' ? 'height' : 'width'
+
+  attrs.value[target] = parseFloat(sizeRatio).toFixed(0)
+}
+
 function apply() {
   let { src, alt, width, height } = attrs.value
 
@@ -63,6 +95,7 @@ function close() {
   dialog.value.close()
 
   attrs.value = generateImageAttrs()
+  ratio.value = null
 }
 
 const showTiptapifyImage = (event: CustomEvent) => {
@@ -96,16 +129,45 @@ onUnmounted(() => {
             <VTextField v-model="attrs.src" density="compact" variant="outlined" :label="t('dialog.image.src')" />
           </VCol>
 
-          <VCol cols="12" md="6">
+          <VCol cols="12" md="5">
             <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" density="compact" variant="outlined" :precision="0" :min="1" :label="t('dialog.image.width')" />
+          <VCol cols="5" md="3">
+            <VTextField
+                v-model="attrs.width"
+                type="number"
+                density="compact"
+                variant="outlined"
+                :precision="0"
+                :min="1"
+                :label="t('dialog.image.width')"
+                @change="setRatio"
+                @update:model-value="updateSizeRatio('width')"
+            />
+          </VCol>
+
+          <VCol cols="5" md="3">
+            <VTextField
+                v-model="attrs.height"
+                type="number"
+                density="compact"
+                variant="outlined"
+                :precision="0"
+                :min="1"
+                :label="t('dialog.image.height')"
+                @change="setRatio"
+                @update:model-value="updateSizeRatio('height')"
+            />
           </VCol>
 
-          <VCol cols="12" md="3">
-            <VTextField v-model="attrs.height" type="number" density="compact" variant="outlined" :precision="0" :min="1" :label="t('dialog.image.height')" />
+          <VCol cols="2" md="1">
+            <VBtn size="40" :variant="variantBtn" v-model="keepRatio" @click="keepRatio = !keepRatio">
+              <VIcon :icon="keepRatio ? `mdiSvg:${mdi.mdiLock}` : `mdiSvg:${mdi.mdiLockOpen}`" />
+              <VTooltip activator="parent">
+                {{ t('dialog.image.keep_ratio') }}
+              </VTooltip>
+            </VBtn>
           </VCol>
         </VRow>
       </VCardText>

package/src/i18n/locales/ar.json

@@ -0,0 +1,153 @@
+{
+  "defaultValue": "القيمة الافتراضية",
+  "content": {
+    "placeholder": "اكتب شيئاً..."
+  },
+  "style": {
+    "paragraph": "فقرة",
+    "heading": "عنوان رئيسي",
+    "headings": {
+      "h1": "عنوان المستوى الأول",
+      "h2": "عنوان المستوى الثاني",
+      "h3": "عنوان المستوى الثالث",
+      "h4": "عنوان المستوى الرابع",
+      "h5": "عنوان المستوى الخامس",
+      "h6": "عنوان المستوى السادس"
+    },
+    "fontFamily": "عائلة الخطوط",
+    "fontSize": "حجم الخط",
+    "lineHeight": "ارتفاع السطر",
+    "color": {
+      "highlight": "لون التحديد",
+      "text": "لون النص",
+      "unset": "إزالة اللون",
+      "custom": "تحديد مخصص"
+    }
+  },
+  "format": {
+    "bold": "عريض",
+    "italic": "مائل",
+    "strike": "مشطوب",
+    "underline": "تسطير",
+    "sup": "أس فوق السطر",
+    "sub": "أس تحت السطر",
+    "break": "كسر سطر قسري",
+    "line": "خط أفقي",
+    "blockquote": "اقتباس",
+    "code": "شفرة برمجية",
+    "codeblock": "كتلة شفرة",
+    "formatClear": "مسح التنسيق"
+  },
+  "media": {
+    "link": "رابط خارجي",
+    "iframe": "إطار مضمن",
+    "image": "صورة",
+    "emoji": {
+      "title": "رموز تعبيرية",
+      "activities": "أنشطة",
+      "animals_and_nature": "حيوانات وطبيعة",
+      "component": "مكون",
+      "flags": "أعلام",
+      "food_and_drink": "طعام وشراب",
+      "objects": "أشياء",
+      "people_and_body": "أشخاص وجسد",
+      "smileys_and_emotion": "ابتسامات ومشاعر",
+      "symbols": "رموز",
+      "travel_and_places": "سفر وأماكن"
+    },
+    "tables": {
+      "table": "جدول",
+      "insertTable": "إدراج جدول",
+      "deleteTable": "حذف جدول",
+      "insertWithHeaderRow": "إدراج جدول مع صف ترويسة",
+      "rows": "صفوف",
+      "row": "صف",
+      "insertRowBefore": "إدراج صف قبل",
+      "insertRowAfter": "إدراج صف بعد",
+      "deleteRow": "حذف صف",
+      "cols": "أعمدة",
+      "col": "عمود",
+      "insertColBefore": "إدراج عمود قبل",
+      "insertColAfter": "إدراج عمود بعد",
+      "deleteCol": "حذف عمود",
+      "mergeCells": "دمج الخلايا",
+      "splitCell": "تقسيم الخلية"
+    },
+    "video": "فيديو"
+  },
+  "action": {
+    "undo": "تراجع",
+    "redo": "إعادة"
+  },
+  "alignment": "محاذاة",
+  "alignments": {
+    "left": "محاذاة لليسار",
+    "center": "محاذاة إلى المنتصف",
+    "right": "محاذاة لليمين",
+    "justify": "ضبط"
+  },
+  "list": "قائمة",
+  "lists": {
+    "bullet": "قائمة غير مرقمة",
+    "numbered": "قائمة مرقمة",
+    "task": "قائمة مهام",
+    "indent": "زيادة المسافة البادئة",
+    "outdent": "تقليل المسافة البادئة"
+  },
+  "dialog": {
+    "apply": "تطبيق",
+    "clear": "مسح",
+    "close": "إغلاق",
+    "iframe": {
+      "dialog_title": "إضافة/تعديل إطار مضمن",
+      "src": "المصدر",
+      "name": "الاسم",
+      "title": "العنوان",
+      "width": "العرض",
+      "height": "الارتفاع",
+      "frameborder": "حدود الإطار",
+      "src_invalid": "عنوان URL المدخل غير صالح"
+    },
+    "image": {
+      "title": "إضافة/تعديل صورة",
+      "src": "المصدر",
+      "keep_ratio": "الحفاظ على نسبة العرض إلى الارتفاع",
+      "alt": "نص بديل",
+      "width": "العرض",
+      "height": "الارتفاع"
+    },
+    "link": {
+      "title": "إضافة/تعديل رابط",
+      "href": "عنوان الرابط",
+      "href_error": "عنوان رابط غير صالح",
+      "target": "افتح في...",
+      "target_blank": "نافذة جديدة",
+      "target_self": "النافذة الحالية",
+      "rel": "نسبة",
+      "class": "فئة CSS"
+    },
+    "preview": {
+      "title": "معاينة"
+    },
+    "source": {
+      "title": "عرض كود المصدر",
+      "prettify": "تنسيق"
+    },
+    "video": {
+      "title": "إضافة/تعديل فيديو",
+      "src": "المصدر",
+      "width": "العرض",
+      "height": "الارتفاع"
+    }
+  },
+  "misc": {
+    "fullscreen": "وضع ملء الشاشة",
+    "preview": "معاينة",
+    "source": "عرض كود المصدر",
+    "toggleInvisibleCharacters": "إظهار/إخفاء الأحرف غير المرئية"
+  },
+  "footer": {
+    "words": "كلمات",
+    "chars": "حروف"
+  }
+}

package/src/i18n/locales/ch.json

@@ -40,8 +40,10 @@
   },
   "media": {
     "link": "外部链接",
+    "iframe": "iframe",
     "image": "图片",
     "emoji": {
+      "title": "表情符号",
       "activities": "活动",
       "animals_and_nature": "动物与自然",
       "component": "组件",
@@ -70,7 +72,8 @@
       "deleteCol": "删除列",
       "mergeCells": "合并单元格",
       "splitCell": "拆分单元格"
-    }
+    },
+    "video": "视频"
   },
   "action": {
     "undo": "撤销",
@@ -108,6 +111,7 @@
     "image": {
       "title": "添加/修改图片",
       "src": "源",
+      "keep_ratio": "保持比例",
       "alt": "替代文本",
       "width": "宽度",
       "height": "高度"

package/src/i18n/locales/cz.json

@@ -40,8 +40,10 @@
   },
   "media": {
     "link": "Externí odkaz",
+    "iframe": "iframe",
     "image": "Obrázek",
     "emoji": {
+      "title": "Emoji",
       "activities": "Aktivity",
       "animals_and_nature": "Zvířata a příroda",
       "component": "Komponenta",
@@ -70,7 +72,8 @@
       "deleteCol": "Smazat sloupec",
       "mergeCells": "Sloučit buňky",
       "splitCell": "Rozdělit buňku"
-    }
+    },
+    "video": "Video"
   },
   "action": {
     "undo": "Zpět",
@@ -108,6 +111,7 @@
     "image": {
       "title": "Přidání/úprava obrázku",
       "src": "Zdroj",
+      "keep_ratio": "Udržet poměr stran",
       "alt": "alt",
       "width": "Šířka",
       "height": "Výška"

package/src/i18n/locales/de.json

@@ -40,8 +40,10 @@
   },
   "media": {
     "link": "Externer Link",
+    "iframe": "iframe",
     "image": "Bild",
     "emoji": {
+      "title": "Emoji",
       "activities": "Aktivitäten",
       "animals_and_nature": "Tiere & Natur",
       "component": "Komponente",
@@ -70,7 +72,8 @@
       "deleteCol": "Spalte löschen",
       "mergeCells": "Zellen zusammenführen",
       "splitCell": "Zelle teilen"
-    }
+    },
+    "video": "Video"
   },
   "action": {
     "undo": "Rückgängig",
@@ -108,6 +111,7 @@
     "image": {
       "title": "Bild hinzufügen/ändern",
       "src": "Quelle",
+      "keep_ratio": "Seitenverhältnis beibehalten",
       "alt": "alt",
       "width": "Breite",
       "height": "Höhe"

package/src/i18n/locales/en.json

@@ -111,6 +111,7 @@
     "image": {
       "title": "Add/edit image",
       "src": "Source",
+      "keep_ratio": "Keep ratio",
       "alt": "Alt",
       "width": "Width",
       "height": "Height"

package/src/i18n/locales/es.json

@@ -40,8 +40,10 @@
   },
   "media": {
     "link": "Enlace externo",
+    "iframe": "iframe",
     "image": "Imagen",
     "emoji": {
+      "title": "Emoji",
       "activities": "Actividades",
       "animals_and_nature": "Animales y naturaleza",
       "component": "Componente",
@@ -70,7 +72,8 @@
       "deleteCol": "Eliminar columna",
       "mergeCells": "Fusionar celdas",
       "splitCell": "Dividir celda"
-    }
+    },
+    "video": "Video"
   },
   "action": {
     "undo": "Deshacer",
@@ -108,6 +111,7 @@
     "image": {
       "title": "Agregar/modificar imagen",
       "src": "Fuente",
+      "keep_ratio": "Mantener proporción",
       "alt": "alt",
       "width": "Ancho",
       "height": "Alto"

package/src/i18n/locales/fi.json

@@ -0,0 +1,153 @@
+{
+  "defaultValue": "Oletusarvo",
+  "content": {
+    "placeholder": "Kirjoita jotain..."
+  },
+  "style": {
+    "paragraph": "Kappale",
+    "heading": "Otsikko",
+    "headings": {
+      "h1": "Otsikon taso 1",
+      "h2": "Otsikon taso 2",
+      "h3": "Otsikon taso 3",
+      "h4": "Otsikon taso 4",
+      "h5": "Otsikon taso 5",
+      "h6": "Otsikon taso 6"
+    },
+    "fontFamily": "Fonttiperhe",
+    "fontSize": "Kirjasinkoko",
+    "lineHeight": "Rivin korkeus",
+    "color": {
+      "highlight": "Korostuksen väri",
+      "text": "Tekstin väri",
+      "unset": "Poista väri",
+      "custom": "Mukautettu valinta"
+    }
+  },
+  "format": {
+    "bold": "Lihavoitu",
+    "italic": "Kursiivi",
+    "strike": "Yliviivattu",
+    "underline": "Alleviivattu",
+    "sup": "Yläindeksi",
+    "sub": "Alikindeksi",
+    "break": "Rivin katkaisu",
+    "line": "Vaakatason viiva",
+    "blockquote": "Lainaus",
+    "code": "Koodi",
+    "codeblock": "Koodilohko",
+    "formatClear": "Poista muotoilu"
+  },
+  "media": {
+    "link": "Ulkoisen linkin",
+    "iframe": "iframe",
+    "image": "Kuva",
+    "emoji": {
+      "title": "Emoji",
+      "activities": "Toiminnot",
+      "animals_and_nature": "Eläimet ja luonto",
+      "component": "Komponentti",
+      "flags": "Liput",
+      "food_and_drink": "Ruoka ja juoma",
+      "objects": "Objektit",
+      "people_and_body": "Ihmiset ja ruumis",
+      "smileys_and_emotion": "Hymyjä ja tunteita",
+      "symbols": "Symbolit",
+      "travel_and_places": "Matkustaminen ja paikat"
+    },
+    "tables": {
+      "table": "Taulukko",
+      "insertTable": "Lisää taulukko",
+      "deleteTable": "Poista taulukko",
+      "insertWithHeaderRow": "Lisää taulukko otsikkorivillä",
+      "rows": "Rivit",
+      "row": "Rivi",
+      "insertRowBefore": "Lisää rivi ennen",
+      "insertRowAfter": "Lisää rivi jälkeen",
+      "deleteRow": "Poista rivi",
+      "cols": "Sarakkeet",
+      "col": "Sarake",
+      "insertColBefore": "Lisää sarake ennen",
+      "insertColAfter": "Lisää sarake jälkeen",
+      "deleteCol": "Poista sarake",
+      "mergeCells": "Yhdistä solut",
+      "splitCell": "Jaa solu"
+    },
+    "video": "Video"
+  },
+  "action": {
+    "undo": "Kumoa",
+    "redo": "Tee uudelleen"
+  },
+  "alignment": "Tasaus",
+  "alignments": {
+    "left": "Vasemmalle tasattu",
+    "center": "Keskitetty",
+    "right": "Oikealle tasattu",
+    "justify": "Tasaa"
+  },
+  "list": "Lista",
+  "lists": {
+    "bullet": "Luettelomerkki-luettelo",
+    "numbered": "Numeroiden luettelo",
+    "task": "Tehtävälista",
+    "indent": "Lisää sisennystä",
+    "outdent": "Vähennä sisennystä"
+  },
+  "dialog": {
+    "apply": "Käytä",
+    "clear": "Tyhjennä",
+    "close": "Sulje",
+    "iframe": {
+      "dialog_title": "Lisää/muokkaa iframe",
+      "src": "Lähde",
+      "name": "Nimi",
+      "title": "Otsikko",
+      "width": "Leveys",
+      "height": "Korkeus",
+      "frameborder": "Iframe-reunalinja",
+      "src_invalid": "Syötetty URL ei ole kelvollinen"
+    },
+    "image": {
+      "title": "Lisää/muokkaa kuvaa",
+      "src": "Lähde",
+      "keep_ratio": "Säilytä suhde",
+      "alt": "Vaihtoehtoinen teksti",
+      "width": "Leveys",
+      "height": "Korkeus"
+    },
+    "link": {
+      "title": "Lisää/muokkaa linkkiä",
+      "href": "Linkin osoite",
+      "href_error": "Virheellinen linkin osoite",
+      "target": "Avaa...",
+      "target_blank": "Uuteen ikkunaan",
+      "target_self": "Nykyiseen ikkunaan",
+      "rel": "suhteessa",
+      "class": "CSS-luokka"
+    },
+    "preview": {
+      "title": "Esikatselu"
+    },
+    "source": {
+      "title": "Näytä lähdekoodi",
+      "prettify": "Muotoile"
+    },
+    "video": {
+      "title": "Lisää/muokkaa videoa",
+      "src": "Lähde",
+      "width": "Leveys",
+      "height": "Korkeus"
+    }
+  },
+  "misc": {
+    "fullscreen": "Täysi-ikkuna tila",
+    "preview": "Esikatselu",
+    "source": "Näytä lähdekoodi",
+    "toggleInvisibleCharacters": "Näytä/piilota näkymättömät merkit"
+  },
+  "footer": {
+    "words": "sanaa",
+    "chars": "merkkiä"
+  }
+}

package/src/i18n/locales/fr.json

@@ -1,4 +1,3 @@
-
 {
   "defaultValue": "Valeur par défaut",
   "content": {
@@ -41,8 +40,10 @@
   },
   "media": {
     "link": "Lien externe",
+    "iframe": "iframe",
     "image": "Image",
     "emoji": {
+      "title": "Emoji",
       "activities": "Activités",
       "animals_and_nature": "Animaux et nature",
       "component": "Composant",
@@ -71,7 +72,8 @@
       "deleteCol": "Supprimer la colonne",
       "mergeCells": "Fusionner les cellules",
       "splitCell": "Diviser la cellule"
-    }
+    },
+    "video": "Vidéo"
   },
   "action": {
     "undo": "Annuler",
@@ -109,6 +111,7 @@
     "image": {
       "title": "Ajouter/modifier l'image",
       "src": "Source",
+      "keep_ratio": "Conserver le ratio d'aspect",
       "alt": "alt",
       "width": "Largeur",
       "height": "Hauteur"