tiptapify 0.3.1 → 0.3.3

package/src/extensions/components/style/heading/Button.vue

@@ -11,6 +11,7 @@ import { inject, Ref } from 'vue'
 const props = defineProps({
   customHeadingLevels: { type: Array<Level>, default: () => [] },
   withParagraph: { type: Boolean, default: () => true },
+  inline: { type: Boolean, default: () => false },
 })
 
 const { variantBtn } = useTiptapifyConfig()
@@ -25,46 +26,85 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 import { headingLevels, setHeadingLevels } from '@tiptapify/constants/style'
 import { ComposerTranslation } from 'vue-i18n'
 setHeadingLevels(props.customHeadingLevels)
+
+// A function, not a computed: `isActive` reads the editor state, which Vue does not track
+function currentStyleIcon(): string {
+  const activeLevel = headingLevels.value.find(level => editor.value.isActive('heading', { level }))
+
+  return activeLevel ? `mdiFormatHeader${activeLevel}` : 'mdiFormatParagraph'
+}
 </script>
 
 <template>
-  <VBtn
-    :id="`tiptapify-heading-button-${editor.instanceId}`"
-    :color="editor.isActive('heading') ? 'primary' : ''"
-    :variant="variantBtn"
-    size="32"
-    @click="editor.chain().focus().redo().run()"
-  >
-    <Tooltip :label="t('style.heading')" hotkey="Mod-Alt-1..6" />
-    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatHeaderPound}`" />
-  </VBtn>
+  <template v-if="inline">
+    <VBtn
+      v-if="withParagraph"
+      :color="editor.isActive('paragraph') ? 'primary' : ''"
+      :variant="variantBtn"
+      size="32"
+      @click="editor.chain().focus().setParagraph().run()"
+    >
+      <Tooltip :label="t('style.paragraph')" hotkey="Mod-Alt-0" />
+      <BtnIcon :icon="`mdiSvg:${mdiIcons['mdiFormatParagraph']}`" />
+    </VBtn>
+    <VBtn
+      v-for="headingLevel in headingLevels"
+      :key="headingLevel"
+      :color="editor.isActive('heading', { level: headingLevel }) ? 'primary' : ''"
+      :variant="variantBtn"
+      size="32"
+      @click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"
+    >
+      <Tooltip :label="t(`style.headings.h${headingLevel}`)" :hotkey="`Mod-Alt-${headingLevel}`" />
+      <BtnIcon :icon="`mdiSvg:${mdiIcons[`mdiFormatHeader${headingLevel}`]}`" />
+    </VBtn>
+  </template>
+
+  <template v-else>
+    <VBtn
+      :id="`tiptapify-heading-button-${editor.instanceId}`"
+      class="tiptapify-dropdown-button"
+      :color="editor.isActive('heading') ? 'primary' : ''"
+      :variant="variantBtn"
+      height="32"
+    >
+      <Tooltip :label="t('style.heading')" hotkey="Mod-Alt-1..6" />
+      <BtnIcon :icon="`mdiSvg:${mdiIcons[currentStyleIcon()]}`" />
+      <BtnIcon :icon="`mdiSvg:${mdi.mdiChevronDown}`" class="tiptapify-dropdown-button__chevron" />
+    </VBtn>
 
-  <VMenu :activator="`#tiptapify-heading-button-${editor.instanceId}`">
-    <VList density="compact">
-      <VListItem
-        v-if="withParagraph"
-        link
-        :color="editor.isActive('paragraph') ? 'primary' : ''"
-        @click="editor.chain().focus().setParagraph().run()"
-      >
-        <VListItemTitle class="d-flex justify-center align-center">
-          <BtnIcon :icon="`mdiSvg:${mdiIcons['mdiFormatParagraph']}`" />
-        </VListItemTitle>
-      </VListItem>
-      <VListItem
-        v-for="headingLevel in headingLevels"
-        :key="headingLevel"
-        :color="editor.isActive('heading', { level: headingLevel }) ? 'primary' : ''"
-        @click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"
-      >
-        <VListItemTitle class="d-flex justify-center align-center">
-          <BtnIcon :icon="`mdiSvg:${mdiIcons[`mdiFormatHeader${headingLevel}`]}`" />
-        </VListItemTitle>
-      </VListItem>
-    </VList>
-  </VMenu>
+    <VMenu :activator="`#tiptapify-heading-button-${editor.instanceId}`" content-class="tiptapify-menu">
+      <VList density="compact">
+        <VListItem
+          v-if="withParagraph"
+          link
+          :active="editor.isActive('paragraph')"
+          @click="editor.chain().focus().setParagraph().run()"
+        >
+          <Tooltip :label="t('style.paragraph')" hotkey="Mod-Alt-0" />
+          <template #prepend>
+            <BtnIcon :icon="`mdiSvg:${mdiIcons['mdiFormatParagraph']}`" />
+          </template>
+          <VListItemTitle>{{ t('style.paragraph') }}</VListItemTitle>
+        </VListItem>
+        <VListItem
+          v-for="headingLevel in headingLevels"
+          :key="headingLevel"
+          link
+          :active="editor.isActive('heading', { level: headingLevel })"
+          @click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"
+        >
+          <Tooltip :label="t(`style.headings.h${headingLevel}`)" :hotkey="`Mod-Alt-${headingLevel}`" />
+          <template #prepend>
+            <BtnIcon :icon="`mdiSvg:${mdiIcons[`mdiFormatHeader${headingLevel}`]}`" />
+          </template>
+          <VListItemTitle>{{ t(`style.headings.h${headingLevel}`) }}</VListItemTitle>
+        </VListItem>
+      </VList>
+    </VMenu>
+  </template>
 </template>
 
 <style lang="scss" scoped>
 
-</style>
+</style>

package/src/i18n/locales/ar.json

@@ -65,6 +65,8 @@
     },
     "image": {
       "alt": "نص بديل",
+      "caption": "التعليق",
+      "caption_placeholder": "أضف تعليقًا…",
       "dialog_title": "إضافة/تعديل صورة",
       "height": "الارتفاع",
       "keep_ratio": "الحفاظ على نسبة العرض إلى الارتفاع",
@@ -121,6 +123,16 @@
     "indent": "زيادة المسافة البادئة",
     "numbered": "قائمة مرقمة",
     "outdent": "تقليل المسافة البادئة",
+    "styles": {
+      "circle": "Circle",
+      "default": "Default",
+      "lower_alpha": "Lower alpha",
+      "lower_greek": "Lower Greek",
+      "lower_roman": "Lower Roman",
+      "square": "Square",
+      "upper_alpha": "Upper alpha",
+      "upper_roman": "Upper Roman"
+    },
     "task": "قائمة مهام"
   },
   "media": {
@@ -161,7 +173,17 @@
     },
     "iframe": "إطار مضمن",
     "image": "صورة",
+    "image_toolbar": {
+      "align_left": "Align left",
+      "align_right": "Align right",
+      "delete": "Remove",
+      "download": "Download",
+      "edit": "Edit or replace",
+      "move_back": "Move one slide back",
+      "move_forward": "Move one slide forward"
+    },
     "link": "رابط خارجي",
+    "slider": "شرائح",
     "tables": {
       "col": "عمود",
       "cols": "أعمدة",

package/src/i18n/locales/bg.json

@@ -65,6 +65,8 @@
     },
     "image": {
       "alt": "Алтернативен текст",
+      "caption": "Надпис",
+      "caption_placeholder": "Добавете надпис…",
       "dialog_title": "Добави/редактирай изображение",
       "height": "Височина",
       "keep_ratio": "Пазене на пропорцията",
@@ -121,6 +123,16 @@
     "indent": "Увеличаване на отстъпа на елемент от списъка",
     "numbered": "Нумериран списък",
     "outdent": "Намаляване на отстъпа на елемент от списъка",
+    "styles": {
+      "circle": "Circle",
+      "default": "Default",
+      "lower_alpha": "Lower alpha",
+      "lower_greek": "Lower Greek",
+      "lower_roman": "Lower Roman",
+      "square": "Square",
+      "upper_alpha": "Upper alpha",
+      "upper_roman": "Upper Roman"
+    },
     "task": "Списък със задачи"
   },
   "media": {
@@ -161,7 +173,17 @@
     },
     "iframe": "iframe",
     "image": "Изображение",
+    "image_toolbar": {
+      "align_left": "Align left",
+      "align_right": "Align right",
+      "delete": "Remove",
+      "download": "Download",
+      "edit": "Edit or replace",
+      "move_back": "Move one slide back",
+      "move_forward": "Move one slide forward"
+    },
     "link": "Външен линк",
+    "slider": "Слайдер",
     "tables": {
       "col": "Колона",
       "cols": "Колони",

package/src/i18n/locales/ch.json

@@ -65,6 +65,8 @@
     },
     "image": {
       "alt": "替代文本",
+      "caption": "图片说明",
+      "caption_placeholder": "添加图片说明…",
       "dialog_title": "添加/修改图片",
       "height": "高度",
       "keep_ratio": "保持比例",
@@ -121,6 +123,16 @@
     "indent": "增加列表项缩进",
     "numbered": "有序列表",
     "outdent": "减少列表项缩进",
+    "styles": {
+      "circle": "Circle",
+      "default": "Default",
+      "lower_alpha": "Lower alpha",
+      "lower_greek": "Lower Greek",
+      "lower_roman": "Lower Roman",
+      "square": "Square",
+      "upper_alpha": "Upper alpha",
+      "upper_roman": "Upper Roman"
+    },
     "task": "任务列表"
   },
   "media": {
@@ -161,7 +173,17 @@
     },
     "iframe": "iframe",
     "image": "图片",
+    "image_toolbar": {
+      "align_left": "Align left",
+      "align_right": "Align right",
+      "delete": "Remove",
+      "download": "Download",
+      "edit": "Edit or replace",
+      "move_back": "Move one slide back",
+      "move_forward": "Move one slide forward"
+    },
     "link": "外部链接",
+    "slider": "幻灯片",
     "tables": {
       "col": "列",
       "cols": "列",

package/src/i18n/locales/cz.json

@@ -65,6 +65,8 @@
     },
     "image": {
       "alt": "alt",
+      "caption": "Popisek",
+      "caption_placeholder": "Přidejte popisek…",
       "dialog_title": "Přidání/úprava obrázku",
       "height": "Výška",
       "keep_ratio": "Udržet poměr stran",
@@ -121,6 +123,16 @@
     "indent": "Zvětšit odsazení položky seznamu",
     "numbered": "Číslovaný seznam",
     "outdent": "Zmenšit odsazení položky seznamu",
+    "styles": {
+      "circle": "Circle",
+      "default": "Default",
+      "lower_alpha": "Lower alpha",
+      "lower_greek": "Lower Greek",
+      "lower_roman": "Lower Roman",
+      "square": "Square",
+      "upper_alpha": "Upper alpha",
+      "upper_roman": "Upper Roman"
+    },
     "task": "Seznam úkolů"
   },
   "media": {
@@ -161,7 +173,17 @@
     },
     "iframe": "iframe",
     "image": "Obrázek",
+    "image_toolbar": {
+      "align_left": "Align left",
+      "align_right": "Align right",
+      "delete": "Remove",
+      "download": "Download",
+      "edit": "Edit or replace",
+      "move_back": "Move one slide back",
+      "move_forward": "Move one slide forward"
+    },
     "link": "Externí odkaz",
+    "slider": "Slider",
     "tables": {
       "col": "Sloupec",
       "cols": "Sloupce",

package/src/i18n/locales/de.json

@@ -65,6 +65,8 @@
     },
     "image": {
       "alt": "alt",
+      "caption": "Bildunterschrift",
+      "caption_placeholder": "Bildunterschrift hinzufügen…",
       "dialog_title": "Bild hinzufügen/ändern",
       "height": "Höhe",
       "keep_ratio": "Seitenverhältnis beibehalten",
@@ -121,6 +123,16 @@
     "indent": "Einzug vergrößern",
     "numbered": "Nummerierte Liste",
     "outdent": "Einzug verkleinern",
+    "styles": {
+      "circle": "Circle",
+      "default": "Default",
+      "lower_alpha": "Lower alpha",
+      "lower_greek": "Lower Greek",
+      "lower_roman": "Lower Roman",
+      "square": "Square",
+      "upper_alpha": "Upper alpha",
+      "upper_roman": "Upper Roman"
+    },
     "task": "Aufgabenliste"
   },
   "media": {
@@ -161,7 +173,17 @@
     },
     "iframe": "iframe",
     "image": "Bild",
+    "image_toolbar": {
+      "align_left": "Align left",
+      "align_right": "Align right",
+      "delete": "Remove",
+      "download": "Download",
+      "edit": "Edit or replace",
+      "move_back": "Move one slide back",
+      "move_forward": "Move one slide forward"
+    },
     "link": "Externer Link",
+    "slider": "Slider",
     "tables": {
       "col": "Spalte",
       "cols": "Spalten",

package/src/i18n/locales/el.json

@@ -65,6 +65,8 @@
     },
     "image": {
       "alt": "Εναλλακτικό κείμενο",
+      "caption": "Λεζάντα",
+      "caption_placeholder": "Προσθέστε λεζάντα…",
       "dialog_title": "Προσθήκη/επεξεργασία εικόνας",
       "height": "Ύψος",
       "keep_ratio": "Διατήρηση αναλογίας",
@@ -121,6 +123,16 @@
     "indent": "Εσοχή στοιχείου λίστας",
     "numbered": "Αριθμημένη λίστα",
     "outdent": "Μείωση εσοχής στοιχείου λίστας",
+    "styles": {
+      "circle": "Circle",
+      "default": "Default",
+      "lower_alpha": "Lower alpha",
+      "lower_greek": "Lower Greek",
+      "lower_roman": "Lower Roman",
+      "square": "Square",
+      "upper_alpha": "Upper alpha",
+      "upper_roman": "Upper Roman"
+    },
     "task": "Λίστα εργασιών"
   },
   "media": {
@@ -161,7 +173,17 @@
     },
     "iframe": "iframe",
     "image": "Εικόνα",
+    "image_toolbar": {
+      "align_left": "Align left",
+      "align_right": "Align right",
+      "delete": "Remove",
+      "download": "Download",
+      "edit": "Edit or replace",
+      "move_back": "Move one slide back",
+      "move_forward": "Move one slide forward"
+    },
     "link": "Εξωτερικός σύνδεσμος",
+    "slider": "Slider",
     "tables": {
       "col": "Στήλη",
       "cols": "Στήλες",

package/src/i18n/locales/en.json

@@ -65,10 +65,12 @@
     },
     "image": {
       "alt": "Alt",
+      "caption": "Caption",
+      "caption_placeholder": "Add a caption…",
       "dialog_title": "Add/edit image",
       "height": "Height",
       "keep_ratio": "Keep ratio",
-      "src": "Source",
+      "src": "Image URL",
       "title": "Add/edit image",
       "width": "Width"
     },
@@ -121,6 +123,16 @@
     "indent": "List item indent",
     "numbered": "Ordered list",
     "outdent": "List item outdent",
+    "styles": {
+      "circle": "Circle",
+      "default": "Default",
+      "lower_alpha": "Lower alpha",
+      "lower_greek": "Lower Greek",
+      "lower_roman": "Lower Roman",
+      "square": "Square",
+      "upper_alpha": "Upper alpha",
+      "upper_roman": "Upper Roman"
+    },
     "task": "Task list"
   },
   "media": {
@@ -161,7 +173,17 @@
     },
     "iframe": "iframe",
     "image": "Image",
+    "image_toolbar": {
+      "align_left": "Align left",
+      "align_right": "Align right",
+      "delete": "Remove",
+      "download": "Download",
+      "edit": "Edit or replace",
+      "move_back": "Move one slide back",
+      "move_forward": "Move one slide forward"
+    },
     "link": "External link",
+    "slider": "Slider",
     "tables": {
       "col": "Column",
       "cols": "Columns",

package/src/i18n/locales/es.json

@@ -65,6 +65,8 @@
     },
     "image": {
       "alt": "alt",
+      "caption": "Pie de foto",
+      "caption_placeholder": "Añade un pie de foto…",
       "dialog_title": "Agregar/modificar imagen",
       "height": "Alto",
       "keep_ratio": "Mantener proporción",
@@ -121,6 +123,16 @@
     "indent": "Aumentar sangría del elemento",
     "numbered": "Lista numerada",
     "outdent": "Disminuir sangría del elemento",
+    "styles": {
+      "circle": "Circle",
+      "default": "Default",
+      "lower_alpha": "Lower alpha",
+      "lower_greek": "Lower Greek",
+      "lower_roman": "Lower Roman",
+      "square": "Square",
+      "upper_alpha": "Upper alpha",
+      "upper_roman": "Upper Roman"
+    },
     "task": "Lista de tareas"
   },
   "media": {
@@ -161,7 +173,17 @@
     },
     "iframe": "iframe",
     "image": "Imagen",
+    "image_toolbar": {
+      "align_left": "Align left",
+      "align_right": "Align right",
+      "delete": "Remove",
+      "download": "Download",
+      "edit": "Edit or replace",
+      "move_back": "Move one slide back",
+      "move_forward": "Move one slide forward"
+    },
     "link": "Enlace externo",
+    "slider": "Carrusel",
     "tables": {
       "col": "Columna",
       "cols": "Columnas",

package/src/i18n/locales/et.json

@@ -65,6 +65,8 @@
     },
     "image": {
       "alt": "Alternatiivne tekst",
+      "caption": "Pildiallkiri",
+      "caption_placeholder": "Lisa pildiallkiri…",
       "dialog_title": "Lisa/redigeeri pilt",
       "height": "Kõrgus",
       "keep_ratio": "Säilita suhe",
@@ -121,6 +123,16 @@
     "indent": "Nimekirja elemendi sammu lisamine",
     "numbered": "Numbreeritud nimekiri",
     "outdent": "Nimekirja elemendi sammu eemaldamine",
+    "styles": {
+      "circle": "Circle",
+      "default": "Default",
+      "lower_alpha": "Lower alpha",
+      "lower_greek": "Lower Greek",
+      "lower_roman": "Lower Roman",
+      "square": "Square",
+      "upper_alpha": "Upper alpha",
+      "upper_roman": "Upper Roman"
+    },
     "task": "Ülesannete nimekiri"
   },
   "media": {
@@ -161,7 +173,17 @@
     },
     "iframe": "iframe",
     "image": "Pilt",
+    "image_toolbar": {
+      "align_left": "Align left",
+      "align_right": "Align right",
+      "delete": "Remove",
+      "download": "Download",
+      "edit": "Edit or replace",
+      "move_back": "Move one slide back",
+      "move_forward": "Move one slide forward"
+    },
     "link": "Väline link",
+    "slider": "Slaider",
     "tables": {
       "col": "Veerg",
       "cols": "Veerud",

package/src/i18n/locales/fi.json

@@ -65,6 +65,8 @@
     },
     "image": {
       "alt": "Vaihtoehtoinen teksti",
+      "caption": "Kuvateksti",
+      "caption_placeholder": "Lisää kuvateksti…",
       "dialog_title": "Lisää/muokkaa kuvaa",
       "height": "Korkeus",
       "keep_ratio": "Säilytä suhde",
@@ -121,6 +123,16 @@
     "indent": "Lisää sisennystä",
     "numbered": "Numeroiden luettelo",
     "outdent": "Vähennä sisennystä",
+    "styles": {
+      "circle": "Circle",
+      "default": "Default",
+      "lower_alpha": "Lower alpha",
+      "lower_greek": "Lower Greek",
+      "lower_roman": "Lower Roman",
+      "square": "Square",
+      "upper_alpha": "Upper alpha",
+      "upper_roman": "Upper Roman"
+    },
     "task": "Tehtävälista"
   },
   "media": {
@@ -161,7 +173,17 @@
     },
     "iframe": "iframe",
     "image": "Kuva",
+    "image_toolbar": {
+      "align_left": "Align left",
+      "align_right": "Align right",
+      "delete": "Remove",
+      "download": "Download",
+      "edit": "Edit or replace",
+      "move_back": "Move one slide back",
+      "move_forward": "Move one slide forward"
+    },
     "link": "Ulkoisen linkin",
+    "slider": "Kuvakaruselli",
     "tables": {
       "col": "Sarake",
       "cols": "Sarakkeet",

package/src/i18n/locales/fr.json

@@ -65,6 +65,8 @@
     },
     "image": {
       "alt": "alt",
+      "caption": "Légende",
+      "caption_placeholder": "Ajouter une légende…",
       "dialog_title": "Ajouter/modifier l'image",
       "height": "Hauteur",
       "keep_ratio": "Conserver le ratio d'aspect",
@@ -121,6 +123,16 @@
     "indent": "Augmenter l'indentation de l'élément",
     "numbered": "Liste numérotée",
     "outdent": "Diminuer l'indentation de l'élément",
+    "styles": {
+      "circle": "Circle",
+      "default": "Default",
+      "lower_alpha": "Lower alpha",
+      "lower_greek": "Lower Greek",
+      "lower_roman": "Lower Roman",
+      "square": "Square",
+      "upper_alpha": "Upper alpha",
+      "upper_roman": "Upper Roman"
+    },
     "task": "Liste de tâches"
   },
   "media": {
@@ -161,7 +173,17 @@
     },
     "iframe": "iframe",
     "image": "Image",
+    "image_toolbar": {
+      "align_left": "Align left",
+      "align_right": "Align right",
+      "delete": "Remove",
+      "download": "Download",
+      "edit": "Edit or replace",
+      "move_back": "Move one slide back",
+      "move_forward": "Move one slide forward"
+    },
     "link": "Lien externe",
+    "slider": "Carrousel",
     "tables": {
       "col": "Colonne",
       "cols": "Colonnes",

package/src/i18n/locales/he.json

@@ -65,6 +65,8 @@
     },
     "image": {
       "alt": "טקסט חלופי",
+      "caption": "כיתוב",
+      "caption_placeholder": "הוסיפו כיתוב…",
       "dialog_title": "הוסף/ערוך תמונה",
       "height": "גובה",
       "keep_ratio": "שמור על יחס",
@@ -121,6 +123,16 @@
     "indent": "העמקה בפריט הרשימה",
     "numbered": "רשימה ממוספרת",
     "outdent": "הדקת פריט הרשימה",
+    "styles": {
+      "circle": "Circle",
+      "default": "Default",
+      "lower_alpha": "Lower alpha",
+      "lower_greek": "Lower Greek",
+      "lower_roman": "Lower Roman",
+      "square": "Square",
+      "upper_alpha": "Upper alpha",
+      "upper_roman": "Upper Roman"
+    },
     "task": "רשימת משימות"
   },
   "media": {
@@ -161,7 +173,17 @@
     },
     "iframe": "iframe",
     "image": "תמונה",
+    "image_toolbar": {
+      "align_left": "Align left",
+      "align_right": "Align right",
+      "delete": "Remove",
+      "download": "Download",
+      "edit": "Edit or replace",
+      "move_back": "Move one slide back",
+      "move_forward": "Move one slide forward"
+    },
     "link": "קישור חיצוני",
+    "slider": "מצגת",
     "tables": {
       "col": "עמודה",
       "cols": "עמודות",