tiptapify 0.0.17 → 0.0.19

package/package.json

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

package/src/components/Toolbar/Index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
 import Items from "@tiptapify/components/Toolbar/Items.vue";
-import { defineProps, inject, PropType, ref, Ref } from 'vue'
+import { defineProps, inject, PropType, Ref } from 'vue'
 import { toolbarSections } from '@tiptapify/types/toolbarSections'
 
-import { default as items } from "@tiptapify/components/Toolbar/items";
+import items from "@tiptapify/components/Toolbar/items";
 
 const props = defineProps({
   variantBtn: { type: String, default () { return 'elevated' }},
@@ -18,15 +18,16 @@ const props = defineProps({
   theme: { type: String, default() { return 'light' } },
   rounded: { type: String, default() { return '0' } },
   toolbarScrollable: { type: Boolean, default() { return false } },
-  customExtensions: { type: Array as PropType<toolbarSections>, default() { return {} } },
+  customExtensions: { type: Array as PropType<toolbarSections>, default() { return [] } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const toolbarItems = ref<Ref<toolbarSections>>(items)
+// this prevents from overriding the default items
+const toolbarItems = [...items]
 
-Object.keys(props.customExtensions).forEach(extension => {
-  toolbarItems.value.push(props.customExtensions[extension])
+Object.keys(props.customExtensions).forEach((key: any) => {
+  toolbarItems.push(props.customExtensions[key])
 })
 
 </script>

package/src/components/editorExtensions.ts

@@ -25,11 +25,12 @@ import { TableKit } from '@tiptap/extension-table'
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 import { InvisibleCharacters } from '@tiptap/extension-invisible-characters'
 
-import { TiptapifyLink } from '@tiptapify/extensions/components/media/link/link'
-import { TiptapifyImage } from '@tiptapify/extensions/components/media/image/image'
+import { TiptapifyLink } from '@tiptapify/extensions/components/media/link'
+import { TiptapifyImage } from '@tiptapify/extensions/components/media/image'
+import { TiptapifyVideo } from '@tiptapify/extensions/components/media/video'
 import CodeBlockComponent from '@tiptapify/extensions/components/CodeBlockComponent.vue'
-import { ViewSource } from '@tiptapify/extensions/view-source'
-import { Preview } from '@tiptapify/extensions/preview'
+import { ViewSource } from '@tiptapify/extensions/components/misc/source'
+import { Preview } from '@tiptapify/extensions/components/misc/preview'
 import SlashCommands from '@tiptapify/extensions/slash-commands'
 import suggestion from '@tiptapify/extensions/components/slashCommands/suggestion'
 import { toolbarSections } from "@tiptapify/types/toolbarSections";
@@ -83,6 +84,7 @@ export function editorExtensions (placeholder: string, slashCommands: boolean, c
       nocookie: true,
     }),
     TiptapifyImage,
+    TiptapifyVideo,
     Superscript,
     Subscript,
     TableKit,

package/src/extensions/components/media/emoji/Button.vue

@@ -37,9 +37,9 @@ const filterEmoji = (filterValue: string) => {
 
   const filtered: any[] = []
 
-  const groupItems = emojisRef.value.find(item => item.group === tab.value)
+  const groupItems = emojisRef.value.find((item: any) => item.group === tab.value)
   if (groupItems?.emojis) {
-    groupItems.emojis.forEach(item => {
+    groupItems.emojis.forEach((item: any) => {
       if (item.name.toLowerCase().match(filterValue)) {
         filtered.push(item)
       }
@@ -62,7 +62,7 @@ watch(() => tab.value, () => {
 
 <template>
   <VBtn
-      id="tiptapify-emoji-button"
+      :id="`tiptapify-emoji-button-${editor.instanceId}`"
       :color="editor.isActive('image') ? 'primary' : ''"
       size="32"
   >
@@ -72,7 +72,7 @@ watch(() => tab.value, () => {
     <BtnIcon :icon="`mdiSvg:${mdi.mdiEmoticon}`" />
   </VBtn>
 
-  <VMenu activator="#tiptapify-emoji-button" :close-on-content-click="false">
+  <VMenu :activator="`#tiptapify-emoji-button-${editor.instanceId}`" :close-on-content-click="false">
     <VSheet class="pa-2" max-width="570">
       <div class="d-flex flex-row">
         <VTabs v-model="tab" mandatory direction="vertical" color="primary" density="compact">

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

@@ -3,6 +3,7 @@
 import * as mdi from '@mdi/js'
 import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
+import ImageDialog from "@tiptapify/extensions/components/media/image/ImageDialog.vue";
 import { inject, Ref } from "vue";
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -22,6 +23,8 @@ const { t } = inject('tiptapifyI18n') as any
     </VTooltip>
     <BtnIcon :icon="`mdiSvg:${mdi.mdiImage}`" />
   </VBtn>
+
+  <ImageDialog />
 </template>
 
 <style lang="scss" scoped>

package/src/extensions/components/media/link/Button.vue

@@ -3,6 +3,7 @@
 import * as mdi from '@mdi/js'
 import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
+import LinkDialog from "@tiptapify/extensions/components/media/link/LinkDialog.vue";
 import { computed, inject, Ref } from "vue";
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -24,6 +25,8 @@ const icon = computed(() => editor.value.isActive('tiptapifyLink') ? `mdiSvg:${m
     </VTooltip>
     <BtnIcon :icon="icon" />
   </VBtn>
+
+  <LinkDialog />
 </template>
 
 <style lang="scss" scoped>

package/src/extensions/components/media/table/Button.vue

@@ -28,7 +28,7 @@ const columnActionsDisabled = () => {
 
 <template>
   <VBtn
-      id="tiptapify-table-button"
+      :id="`tiptapify-table-button-${editor.instanceId}`"
       :color="editor.isActive('table') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().insertTable().run()"
       size="32"
@@ -36,7 +36,7 @@ const columnActionsDisabled = () => {
     <BtnIcon :icon="`mdiSvg:${mdi.mdiTable}`" />
   </VBtn>
 
-  <VMenu activator="#tiptapify-table-button" :close-on-content-click="false">
+  <VMenu :activator="`#tiptapify-table-button-${editor.instanceId}`" :close-on-content-click="false">
     <VList density="compact">
       <VListItem link>
         <VTooltip activator="parent">
@@ -49,7 +49,7 @@ const columnActionsDisabled = () => {
         <VMenu
             submenu
             activator="parent"
-            :open-on-hover="false"
+            :open-on-hover="true"
             open-on-click
             :close-on-content-click="false"
             :disabled="!editor.can().chain().focus().insertTable().run()"

package/src/extensions/components/media/video/Button.vue

@@ -2,6 +2,7 @@
 
 import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
+import VideoDialog from "@tiptapify/extensions/components/media/video/VideoDialog.vue";
 import { inject, Ref } from "vue";
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -22,6 +23,8 @@ const icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" vie
     </VTooltip>
     <BtnIcon :icon="icon" />
   </VBtn>
+
+  <VideoDialog />
 </template>
 
 <style lang="scss" scoped>

package/src/extensions/components/media/video/index.ts

@@ -0,0 +1,32 @@
+import { Extension } from '@tiptap/core'
+
+const name: string = 'tiptapifyVideo'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    tiptapifyVideo: {
+      showTiptapifyVideo: () => ReturnType
+    }
+  }
+}
+
+export const TiptapifyVideo = Extension.create({
+  name,
+
+  addCommands() {
+    return {
+      showTiptapifyVideo: () => ({ editor }) => {
+        const event = new CustomEvent(`tiptapify-show-${name}`, {
+          detail: {
+            video: editor.getAttributes('video'),
+            editorId: editor.instanceId
+          }
+        })
+
+        window.dispatchEvent(event)
+
+        return true
+      },
+    }
+  },
+})

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

@@ -28,7 +28,7 @@ const selectedColor = computed(() => editor.value.getAttributes('textStyle').col
 
 <template>
   <VBtn
-      id="tiptapify-color-button"
+      :id="`tiptapify-color-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().toggleHighlight().run()"
       @click="editor.chain().focus().redo().run()"
       size="32"
@@ -47,7 +47,7 @@ const selectedColor = computed(() => editor.value.getAttributes('textStyle').col
     />
   </VBtn>
 
-  <VMenu activator="#tiptapify-color-button">
+  <VMenu :activator="`#tiptapify-color-button-${editor.instanceId}`">
     <StyleColor :font-color="true" :background-color="false" :color="selectedColor" />
   </VMenu>
 </template>

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

@@ -39,7 +39,7 @@ function getColor() {
 
 <template>
   <VBtn
-      id="tiptapify-font-family-button"
+      :id="`tiptapify-font-family-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().unsetFontFamily().run()"
       :color="getColor()"
       size="32"
@@ -50,7 +50,7 @@ function getColor() {
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatFont}`" />
   </VBtn>
 
-  <VMenu activator="#tiptapify-font-family-button">
+  <VMenu :activator="`#tiptapify-font-family-button-${editor.instanceId}`">
     <FontFamily :fonts="fonts" :font-family="activeFontFamily" />
   </VMenu>
 </template>

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

@@ -43,7 +43,7 @@ function getColor() {
 
 <template>
   <VBtn
-      id="tiptapify-font-size-button"
+      :id="`tiptapify-font-size-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().unsetFontSize().run()"
       :color="getColor()"
       size="32"
@@ -54,7 +54,7 @@ function getColor() {
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatSize}`" />
   </VBtn>
 
-  <VMenu activator="#tiptapify-font-size-button">
+  <VMenu :activator="`#tiptapify-font-size-button-${editor.instanceId}`">
     <FontSize :sizes="fontSizes" :measure="fontMeasure" :font-size="activeFontSize" />
   </VMenu>
 </template>

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

@@ -25,7 +25,7 @@ setHeadingLevels(props.customHeadingLevels)
 
 <template>
   <VBtn
-      id="tiptapify-heading-button"
+      :id="`tiptapify-heading-button-${editor.instanceId}`"
       :color="editor.isActive('heading') ? 'primary' : ''"
       @click="editor.chain().focus().redo().run()"
       size="32"
@@ -36,7 +36,7 @@ setHeadingLevels(props.customHeadingLevels)
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatHeaderPound}`" />
   </VBtn>
 
-  <VMenu activator="#tiptapify-heading-button">
+  <VMenu :activator="`#tiptapify-heading-button-${editor.instanceId}`">
     <VList density="compact">
       <VListItem link :color="editor.isActive('paragraph') ? 'primary' : ''" @click="editor.chain().focus().setParagraph().run()">
         <VListItemTitle class="d-flex justify-center align-center">

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

@@ -28,7 +28,7 @@ const selectedColor = computed(() => editor.value.getAttributes('highlight').col
 
 <template>
   <VBtn
-      id="tiptapify-highlight-button"
+      :id="`tiptapify-highlight-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().toggleHighlight().run()"
       @click="editor.chain().focus().redo().run()"
       size="32"
@@ -47,7 +47,7 @@ const selectedColor = computed(() => editor.value.getAttributes('highlight').col
     />
   </VBtn>
 
-  <VMenu activator="#tiptapify-highlight-button">
+  <VMenu :activator="`#tiptapify-highlight-button-${editor.instanceId}`">
     <StyleColor :font-color="false" :background-color="true" :color="selectedColor" />
   </VMenu>
 </template>

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

@@ -39,7 +39,7 @@ function getColor() {
 
 <template>
   <VBtn
-      id="tiptapify-line-height-button"
+      :id="`tiptapify-line-height-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().unsetLineHeight().run()"
       :color="getColor()"
       size="32"
@@ -50,7 +50,7 @@ function getColor() {
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatLineHeight}`" />
   </VBtn>
 
-  <VMenu activator="#tiptapify-line-height-button">
+  <VMenu :activator="`#tiptapify-line-height-button-${editor.instanceId}`">
     <LineHeight :line-heights="lineHeights" :line-height="activeLineHeight" />
   </VMenu>
 </template>