tiptapify 0.0.11 → 0.0.13

package/src/extensions/components/LinkDialog.vue

@@ -5,7 +5,7 @@ import { Editor } from "@tiptap/vue-3";
 import { useI18n } from 'vue-i18n'
 import { computed, inject, onMounted, onUnmounted, Ref, ref, watch } from 'vue'
 
-import Dialog from "@tiptapify/components/UI/Dialog.vue"
+import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue"
 
 defineProps({
   variantBtn: { type: String, default() { return 'elevated' }},
@@ -63,6 +63,10 @@ function close() {
 }
 
 const showLink = (event: CustomEvent) => {
+  if (event.detail.editorId !== editor.value.instanceId) {
+    return
+  }
+
   attrs.value.href = event.detail.link?.href ?? ''
   attrs.value.target = targetAttrs.value.find(item => item.value === event.detail.link?.target) ?? targetAttrs[0]
   attrs.value.rel = event.detail.link?.rel?.split(' ')
@@ -103,7 +107,7 @@ watch(() => attrs.value.href, () => {
 </script>
 
 <template>
-  <Dialog ref="dialog" module="link">
+  <TiptapifyDialog ref="dialog" module="link">
     <template #content>
       <VCardText>
         <VRow>
@@ -169,5 +173,5 @@ watch(() => attrs.value.href, () => {
         </VRow>
       </VCardActions>
     </template>
-  </Dialog>
+  </TiptapifyDialog>
 </template>

package/src/extensions/components/PreviewDialog.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
-import Dialog from "@tiptapify/components/UI/Dialog.vue";
-import { ref, onMounted, onUnmounted } from 'vue'
+import { Editor } from "@tiptap/vue-3";
+import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
+import { ref, onMounted, onUnmounted, inject, Ref } from 'vue'
 
 const content = ref()
 
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
 const dialog = ref(null)
 
 const showDialog = (event: CustomEvent) => {
+  if (event.detail.editorId !== editor.value.instanceId) {
+    return
+  }
+
   content.value = event.detail.html
 
   dialog.value.open()
@@ -22,13 +29,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Dialog ref="dialog" module="preview" fullscreen>
+  <TiptapifyDialog ref="dialog" module="preview" fullscreen>
     <template #content>
       <VCardItem>
         <div class="tiptap" v-html="content"></div>
       </VCardItem>
     </template>
-  </Dialog>
+  </TiptapifyDialog>
 </template>
 
 <style lang="scss">

package/src/extensions/components/ShowSourceDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
-import Dialog from "@tiptapify/components/UI/Dialog.vue";
+import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
 import { ref, onMounted, onUnmounted, watch, inject, Ref } from 'vue'
 import { useI18n } from "vue-i18n";
 
@@ -54,6 +54,9 @@ const unformatHtml = (html: string): string => {
 }
 
 const showDialog = (event: CustomEvent) => {
+  if (event.detail.editorId !== editor.value.instanceId) {
+    return
+  }
   sourceCode.value = event.detail.html
 
   dialog.value.open()
@@ -79,7 +82,7 @@ watch(() => formatted.value, () => {
 </script>
 
 <template>
-  <Dialog ref="dialog" module="source" :max-width="1500">
+  <TiptapifyDialog ref="dialog" module="source" :max-width="1500">
     <template #content>
       <VCardText>
         <VContainer fluid class="pt-0 pl-0 pr-0">
@@ -105,7 +108,7 @@ watch(() => formatted.value, () => {
     <template #actions>
       <VCardActions>
         <VSpacer></VSpacer>
-        <VBtn :variant="variantBtn" @click="dialog = false">
+        <VBtn :variant="variantBtn" @click="dialog.close()">
           {{ t('dialog.close') }}
         </VBtn>
         <VBtn :variant="variantBtn" color="primary" @click="saveChanges">
@@ -113,7 +116,7 @@ watch(() => formatted.value, () => {
         </VBtn>
       </VCardActions>
     </template>
-  </Dialog>
+  </TiptapifyDialog>
 </template>
 
 <style scoped lang="scss">

package/src/extensions/components/StyleColor.vue

@@ -170,7 +170,7 @@ function isColorActive(color: string): boolean {
 
     <VMenu v-model="colorPicker" :close-on-content-click="false">
       <template #activator="{ props: menuProps }">
-        <VBtn v-bind="menuProps" variant="flat" block>
+        <VBtn v-bind="menuProps" color="default" variant="flat" block>
           <template #prepend>
             <div
                 class="tiptapify-style-color-picker"
@@ -198,7 +198,7 @@ function isColorActive(color: string): boolean {
 
     <VDivider class="mt-2 mb-2" />
 
-    <VBtn @click="unsetColor" block variant="flat">
+    <VBtn @click="unsetColor" color="default" block variant="flat">
       {{ t('style.color.unset') }}
     </VBtn>
   </VSheet>

package/src/extensions/components/slashCommands/CommandsList.vue

@@ -77,10 +77,7 @@ defineExpose({
           @click="selectItem(index)"
           size="small"
       >
-        <VIcon v-if="item.icon" :icon="mdi[`mdi${item.icon}`]" size="16" />
-        <span v-else>
-          {{ item.title }}
-        </span>
+        <VIcon :icon="`mdiSvg:${mdi[`mdi${item.icon}`]}` || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="16" />
       </VBtn>
     </template>
     <div class="item" v-else>No result</div>