tiptapify 0.0.13 → 0.0.15

package/src/composables/Toolbar/Media/useLink.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 useLink() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/composables/Toolbar/Media/useTable.ts

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

package/src/composables/Toolbar/Media/useVideo.ts

@@ -0,0 +1,22 @@
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+
+export function useVideo() {
+  const { t } = inject('tiptapifyI18n') as any
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: computed(() => t('media.video')),
+    tooltip: computed(() => t('media.video')),
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4 6H2v14a2 2 0 0 0 2 2h14v-2H4zm16-4H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2m-8 12.5v-9l6 4.5z"/></svg>',
+    enabled: true,
+    props: {
+      color: computed(() => editor.value.isActive('youtube') ? 'primary' : ''),
+      disabled: computed(() => editor.value.isActive('code') || editor.value.isActive('codeBlock')),
+    },
+    attrs: {
+      click: () => editor.value.commands.showTiptapifyVideo()
+    }
+  }
+}

package/src/composables/Toolbar/Misc/useBreak.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 useBreak() {
-  const { t } = useI18n();
+  const { t } = inject('tiptapifyI18n') as any
 
   const editor = inject('tiptapifyEditor') as Ref<Editor>
 

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>
 
@@ -11,7 +10,7 @@ export function useInvisibleCharacters() {
     name: 'show/hide invisible characters',
     tooltip: computed(() => t('misc.toggleInvisibleCharacters')),
     svg: true,
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M256 64L512 64C529.7 64 544 78.3 544 96C544 113.7 529.7 128 512 128L480 128L480 544C480 561.7 465.7 576 448 576C430.3 576 416 561.7 416 544L416 128L368 128L368 544C368 561.7 353.7 576 336 576C318.3 576 304 561.7 304 544L304 384L256 384C167.6 384 96 312.4 96 224C96 135.6 167.6 64 256 64z"/></svg>`,
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="currentColor" d="M256 64L512 64C529.7 64 544 78.3 544 96C544 113.7 529.7 128 512 128L480 128L480 544C480 561.7 465.7 576 448 576C430.3 576 416 561.7 416 544L416 128L368 128L368 544C368 561.7 353.7 576 336 576C318.3 576 304 561.7 304 544L304 384L256 384C167.6 384 96 312.4 96 224C96 135.6 167.6 64 256 64z"/></svg>`,
     enabled: true,
     props: {
       color: computed(() => editor.value.storage.invisibleCharacters.visibility() ? 'primary' : ''),

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": {