tiptapify 0.0.12 → 0.0.14

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>
 

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

@@ -1,11 +1,15 @@
 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

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+
+import { Editor } from "@tiptap/vue-3";
+
+import tiptapifyEmojis from "@tiptapify/extensions/emoji"
+
+import { computed, inject, Ref, ref } from 'vue'
+
+const { t } = inject('tiptapifyI18n') as any
+
+defineExpose({ open, close })
+
+const emit = defineEmits(['close'])
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const tab = ref('smileys_and_emotion')
+const sorted = tiptapifyEmojis.sort((previous, current) => {
+  if (previous.order < current.order) {
+    return -1
+  }
+  if (previous.order > current.order) {
+    return 1
+  }
+
+  return 0
+})
+const emojis = computed(() => sorted.map(item => { return { group: item.name, emojis: item.items } }))
+
+const handleEmojiClick = (emoji: any) => {
+  editor.value.chain().focus().insertContent(emoji.char).run()
+  close()
+}
+
+function close() {
+  emit('close')
+}
+</script>
+
+<template>
+  <VSheet class="pa-2" max-width="570">
+    <div class="d-flex flex-row">
+      <VTabs v-model="tab" mandatory direction="vertical" color="primary" density="compact">
+        <VTab
+            v-for="item of emojis"
+            :text="item.group"
+            :value="item.group"
+            :key="item.group"
+            density="compact"
+            rounded
+            size="small"
+        >
+          {{ t(`media.emoji.${item.group}`) }}
+        </VTab>
+      </VTabs>
+
+      <VWindow v-model="tab" direction="vertical">
+        <VWindowItem v-for="item of emojis" :value="item.group">
+          <div class="tiptapify-emoji-container">
+            <div v-for="emojiItem in item.emojis" class="tiptapify-emoji-container-item" @click="handleEmojiClick(emojiItem)" :title="emojiItem.name">
+              <div class="tiptapify-emoji-container-item__overlay">
+                <span>
+                  {{ emojiItem.char }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </VWindowItem>
+      </VWindow>
+    </div>
+  </VSheet>
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-emoji-container {
+  max-height: 500px;
+  overflow-y: auto;
+
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  filter: drop-shadow(1px 2px 3px #777);
+}
+
+.tiptapify-emoji-container-item__overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 5px;
+  z-index: 1;
+}
+
+.tiptapify-emoji-container-item {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.tiptapify-emoji-container-item:hover .tiptapify-emoji-container-item__overlay {
+  background-color: rgba(var(--v-theme-on-background), calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier)));
+}
+</style>

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>