tiptapify 0.0.13 → 0.0.14

package/src/composables/Toolbar/Misc/useFormatClear.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useFormatClear() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Misc/useInvisibleCharacters.ts

@@ -1,9 +1,8 @@
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useInvisibleCharacters() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Misc/useLine.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useLine() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Misc/usePreview.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function usePreview() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Misc/useSource.ts

@@ -1,10 +1,9 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed, inject, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useSource() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

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

@@ -2,10 +2,9 @@ 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 useColor(theme: any) {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

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

@@ -3,10 +3,9 @@ import { Editor } from "@tiptap/vue-3";
 import { fonts } from "@tiptapify/constants/style";
 import FontFamily from "@tiptapify/extensions/components/FontFamily.vue";
 import { computed, inject, markRaw, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useFontFamily() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

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

@@ -3,10 +3,9 @@ import { Editor } from "@tiptap/vue-3";
 import { fontSizes } from "@tiptapify/constants/style";
 import FontSize from "@tiptapify/extensions/components/FontSize.vue";
 import { computed, inject, markRaw, Ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 export function useFontSize(fontMeasure: string) {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

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

@@ -3,7 +3,6 @@ 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
@@ -11,7 +10,7 @@ interface MDIIcons {
 const mdiIcons = mdi as MDIIcons
 
 export function useHeading(customHeadingLevels: Array<number> = []) {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   setHeadingLevels(customHeadingLevels)
 

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

@@ -2,10 +2,9 @@ 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 { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

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

@@ -3,10 +3,9 @@ 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 { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/useMediaItems.ts

@@ -2,11 +2,13 @@ import { useImage } from "@tiptapify/composables/Toolbar/Media/useImage";
 import { useEmoji } from "@tiptapify/composables/Toolbar/Media/useEmoji";
 import { useLink } from "@tiptapify/composables/Toolbar/Media/useLink";
 import { useTable } from "@tiptapify/composables/Toolbar/Media/useTable";
+import { useVideo } from "@tiptapify/composables/Toolbar/Media/useVideo";
 
 export function useMediaItems() {
   return {
     link: useLink(),
     image: useImage(),
+    video: useVideo(),
     emoji: useEmoji(),
     table: useTable()
   }

package/src/extensions/components/Emoji.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 
 import { Editor } from "@tiptap/vue-3";
-import { useI18n } from 'vue-i18n'
 
 import tiptapifyEmojis from "@tiptapify/extensions/emoji"
 
 import { computed, inject, Ref, ref } from 'vue'
 
-const { t } = useI18n()
+const { t } = inject('tiptapifyI18n') as any
 
 defineExpose({ open, close })
 

package/src/extensions/components/FontFamily.vue

@@ -3,14 +3,13 @@
 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 { t } = inject('tiptapifyI18n') as any
 
 const emit = defineEmits(['close'])
 

package/src/extensions/components/FontSize.vue

@@ -3,7 +3,6 @@
 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: [] },
@@ -11,7 +10,7 @@ const props = defineProps({
   fontSize: { type: Number, default () { return null } },
 })
 
-const { t } = useI18n();
+const { t } = inject('tiptapifyI18n') as any
 
 const emit = defineEmits(['close'])
 

package/src/extensions/components/ImageDialog.vue

@@ -3,7 +3,6 @@
 import { Editor } from "@tiptap/vue-3";
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
 
-import { useI18n } from 'vue-i18n'
 import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
 
 defineProps({
@@ -12,7 +11,7 @@ defineProps({
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
-const { t } = useI18n()
+const { t } = inject('tiptapifyI18n') as any
 
 const generateImageAttrs = () => ({
   src: '',

package/src/extensions/components/LineHeight.vue

@@ -3,14 +3,13 @@
 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 { t } = inject('tiptapifyI18n') as any
 
 const emit = defineEmits(['close'])
 

package/src/extensions/components/LinkDialog.vue

@@ -2,7 +2,6 @@
 
 import { Editor } from "@tiptap/vue-3";
 
-import { useI18n } from 'vue-i18n'
 import { computed, inject, onMounted, onUnmounted, Ref, ref, watch } from 'vue'
 
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue"
@@ -13,7 +12,7 @@ defineProps({
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
-const { t } = useI18n()
+const { t } = inject('tiptapifyI18n') as any
 
 const generateLinkAttrs = () => ({
   href: '',

package/src/extensions/components/ShowSourceDialog.vue

@@ -2,7 +2,6 @@
 import { Editor } from "@tiptap/vue-3";
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
 import { ref, onMounted, onUnmounted, watch, inject, Ref } from 'vue'
-import { useI18n } from "vue-i18n";
 
 const props = defineProps({
   indent: { type: Number, default: 2 },
@@ -10,7 +9,7 @@ const props = defineProps({
   variantField: { type: String, default: 'solo' }
 })
 
-const { t } = useI18n();
+const { t } = inject('tiptapifyI18n') as any
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/extensions/components/StyleColor.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 
 import { Editor } from "@tiptap/vue-3";
-import { useI18n } from 'vue-i18n'
 
 import { computed, inject, Ref, ref } from 'vue'
 
-const { t } = useI18n()
+const { t } = inject('tiptapifyI18n') as any
 
 defineExpose({ open, close })
 

package/src/extensions/components/TableBuilder.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 
 import { Editor } from "@tiptap/vue-3";
-import { useI18n } from 'vue-i18n'
 
 import { inject, Ref, ref } from 'vue'
 
-const { t } = useI18n()
+const { t } = inject('tiptapifyI18n') as any
 
 defineExpose({ open })
 

package/src/extensions/components/VideoDialog.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+
+import { Editor } from "@tiptap/vue-3";
+import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
+
+import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
+
+defineProps({
+  variantBtn: { type: String, default() { return 'elevated' }},
+  variantField: { type: String, default() { return 'solo' }}
+})
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+const { t } = inject('tiptapifyI18n') as any
+
+type videoAttrs = {
+  src: string,
+  width?: number,
+  height?: number
+}
+const generateVideoAttrs = () => ({
+  src: '',
+  height: null,
+  width: null
+})
+
+const attrs = ref(generateVideoAttrs())
+
+const dialog = ref(null)
+
+const isDisabled = computed(() => {
+  const { src } = attrs.value
+  return !src
+})
+
+function apply() {
+  let { src, width, height } = attrs.value
+
+  const videoOptions: videoAttrs = { src }
+
+  if (width) {
+    videoOptions.width = width
+  }
+
+  if (height) {
+    videoOptions.height = height
+  }
+
+  if (src) {
+    editor.value.commands.setYoutubeVideo(videoOptions)
+    // editor.value.commands.setYoutubeVideo({
+    //   src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+    //   width: 640,
+    //   height: 480,
+    // })
+  }
+
+  close()
+}
+
+function clear() {
+  editor.value.commands.deleteSelection()
+
+  close()
+}
+
+function close() {
+  dialog.value.close()
+
+  attrs.value = generateVideoAttrs()
+}
+
+const showTiptapifyVideo = (event: CustomEvent) => {
+  if (event.detail.editorId !== editor.value.instanceId) {
+    return
+  }
+
+  attrs.value.src = event.detail.video?.src
+  attrs.value.width = event.detail.video?.width
+  attrs.value.height = event.detail.video?.height
+
+  dialog.value.open()
+}
+
+onMounted(() => {
+  window.addEventListener('tiptapify-show-tiptapifyVideo', showTiptapifyVideo as EventListener)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('tiptapify-show-tiptapifyVideo', showTiptapifyVideo as EventListener)
+})
+</script>
+
+<template>
+  <TiptapifyDialog ref="dialog" module="video" :max-width="800">
+    <template #content>
+      <VCardText>
+        <VRow>
+<!--          <VCol cols="12">-->
+<!--            <VSelect v-model="attrs.type" density="compact" variant="outlined" :label="t('dialog.video.src')" />-->
+<!--          </VCol>-->
+
+          <VCol cols="12">
+            <VTextField v-model="attrs.src" density="compact" variant="outlined" :label="t('dialog.video.src')" />
+          </VCol>
+
+          <VCol cols="12" md="3">
+            <VTextField v-model="attrs.width" type="number" density="compact" variant="outlined" :precision="0" :min="1" :label="t('dialog.video.width')" />
+          </VCol>
+
+          <VCol cols="12" md="3">
+            <VTextField v-model="attrs.height" type="number" density="compact" variant="outlined" :precision="0" :min="1" :label="t('dialog.video.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">
+              {{ t('dialog.clear') }}
+            </VBtn>
+          </VCol>
+          <VCol class="d-flex justify-end">
+            <VBtn :variant="variantBtn" @click="close" class="mr-2">
+              {{ t('dialog.close') }}
+            </VBtn>
+            <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">
+              {{ t('dialog.apply') }}
+            </VBtn>
+          </VCol>
+        </VRow>
+      </VCardActions>
+    </template>
+  </TiptapifyDialog>
+</template>

package/src/i18n/index.ts

@@ -1,4 +1,5 @@
 import { createI18n } from 'vue-i18n'
+import { ref, computed } from 'vue'
 
 const messages = Object.fromEntries(
   Object.entries(
@@ -6,17 +7,29 @@ const messages = Object.fromEntries(
     .map(([key, value]) => [key.slice(10, -5), value.default]),
 )
 
-let _i18n: any = null
+export function useLocale(initialLocale: string = 'en') {
+  const currentLocale = ref(initialLocale)
 
-export const getI18n = (locale: string) => {
-  if (_i18n === null) {
-    _i18n = createI18n({
-      legacy: false,
-      locale: locale,
-      fallbackLocale: 'en',
-      messages
-    })
+  const i18n = createI18n({
+    legacy: false,
+    locale: currentLocale.value,
+    fallbackLocale: 'en',
+    messages
+  })
+
+  const { t, locale } = i18n.global
+
+  const setLocale = (newLocale: string) => {
+    if (messages[newLocale]) {
+      currentLocale.value = newLocale
+      locale.value = newLocale
+    }
   }
 
-  return _i18n
+  return {
+    i18n,
+    t,
+    locale: computed(() => currentLocale.value),
+    setLocale
+  }
 }

package/src/i18n/locales/ch.json

@@ -118,6 +118,12 @@
     "source": {
       "title": "查看源代码",
       "prettify": "美化"
+    },
+    "video": {
+      "title": "添加/编辑视频",
+      "src": "来源",
+      "width": "宽度",
+      "height": "高度"
     }
   },
   "misc": {

package/src/i18n/locales/cz.json

@@ -118,6 +118,12 @@
     "source": {
       "title": "Zobrazit zdrojový kód",
       "prettify": "prettify"
+    },
+    "video": {
+      "title": "Přidat/upravit video",
+      "src": "Zdroj",
+      "width": "Šířka",
+      "height": "Výška"
     }
   },
   "misc": {

package/src/i18n/locales/de.json

@@ -118,6 +118,12 @@
     "source": {
       "title": "Quellcode anzeigen",
       "prettify": "prettify"
+    },
+    "video": {
+      "title": "Video hinzufügen/bearbeiten",
+      "src": "Quelle",
+      "width": "Breite",
+      "height": "Höhe"
     }
   },
   "misc": {

package/src/i18n/locales/en.json

@@ -42,6 +42,7 @@
     "link": "External link",
     "image": "Image",
     "emoji": {
+      "title": "Emoji",
       "activities": "Activities",
       "animals_and_nature": "Animals & nature",
       "component": "Component",
@@ -70,7 +71,8 @@
       "deleteCol": "Delete column",
       "mergeCells": "Merge cells",
       "splitCell": "Split cell"
-    }
+    },
+    "video": "Video"
   },
   "action": {
     "undo": "Undo",
@@ -118,6 +120,12 @@
     "source": {
       "title": "View source code",
       "prettify": "Prettify"
+    },
+    "video": {
+      "title": "Add/edit video",
+      "src": "Source",
+      "width": "Width",
+      "height": "Height"
     }
   },
   "misc": {

package/src/i18n/locales/es.json

@@ -118,6 +118,12 @@
     "source": {
       "title": "Ver código fuente",
       "prettify": "prettify"
+    },
+    "video": {
+      "title": "Agregar/editar video",
+      "src": "Fuente",
+      "width": "Ancho",
+      "height": "Alto"
     }
   },
   "misc": {

package/src/i18n/locales/fr.json

@@ -119,6 +119,12 @@
     "source": {
       "title": "Voir le code source",
       "prettify": "prettify"
+    },
+    "video": {
+      "title": "Ajouter/modifier une vidéo",
+      "src": "Source",
+      "width": "Largeur",
+      "height": "Hauteur"
     }
   },
   "misc": {

package/src/i18n/locales/it.json

@@ -118,6 +118,12 @@
     "source": {
       "title": "Visualizza codice sorgente",
       "prettify": "prettify"
+    },
+    "video": {
+      "title": "Aggiungi/modifica video",
+      "src": "Sorgente",
+      "width": "Larghezza",
+      "height": "Altezza"
     }
   },
   "misc": {

package/src/i18n/locales/la.json

@@ -118,6 +118,12 @@
     "source": {
       "title": "Codicem fontem videre",
       "prettify": "prettify"
+    },
+    "video": {
+      "title": "Addere/mutare video",
+      "src": "Fons",
+      "width": "Latitudo",
+      "height": "Altitudo"
     }
   },
   "misc": {

package/src/i18n/locales/lt.json

@@ -118,6 +118,12 @@
     "source": {
       "title": "Žiūrėti išeities kodą",
       "prettify": "prettify"
+    },
+    "video": {
+      "title": "Pridėti/redaguoti vaizdo įrašą",
+      "src": "Šaltinis",
+      "width": "Plotis",
+      "height": "Aukštis"
     }
   },
   "misc": {

package/src/i18n/locales/nl.json

@@ -118,6 +118,12 @@
     "source": {
       "title": "Broncode bekijken",
       "prettify": "prettify"
+    },
+    "video": {
+      "title": "Video toevoegen/bewerken",
+      "src": "Bron",
+      "width": "Breedte",
+      "height": "Hoogte"
     }
   },
   "misc": {

package/src/i18n/locales/pl.json

@@ -118,6 +118,12 @@
     "source": {
       "title": "Pokaż kod źródłowy",
       "prettify": "prettify"
+    },
+    "video": {
+      "title": "Dodaj/edytuj wideo",
+      "src": "Źródło",
+      "width": "Szerokość",
+      "height": "Wysokość"
     }
   },
   "misc": {