tiptapify 0.0.11 → 0.0.12

package/src/composables/Toolbar/useStyleItems.ts

@@ -1,231 +1,17 @@
-import * as mdi from "@mdi/js";
-import { Level } from "@tiptap/extension-heading";
-import FontFamily from "@tiptapify/extensions/components/FontFamily.vue";
-import FontSize from "@tiptapify/extensions/components/FontSize.vue";
-import LineHeight from "@tiptapify/extensions/components/LineHeight.vue";
-import { Editor } from "@tiptap/vue-3";
-import StyleColor from "@tiptapify/extensions/components/StyleColor.vue";
-import { computed, markRaw } from "vue";
-import { useI18n } from "vue-i18n";
-import {
-  fonts,
-  fontSizes,
-  lineHeights,
-  headingLevels,
-  setHeadingLevels,
-  defaultFontSize,
-  defaultLineHeight
-} from "@tiptapify/constants/style";
-
-interface MDIIcons {
-  [key: string]: string
-}
-const mdiIcons = mdi as MDIIcons
-
-export function useStyleItems(editor: Editor, theme: any, fontMeasure: string, customHeadingLevels: Array<number> = []) {
-  const { t } = useI18n();
-
-  setHeadingLevels(customHeadingLevels)
-
+import { useColor } from "@tiptapify/composables/Toolbar/Style/useColor";
+import { useFontFamily } from "@tiptapify/composables/Toolbar/Style/useFontFamily";
+import { useFontSize } from "@tiptapify/composables/Toolbar/Style/useFontSize";
+import { useHeading } from "@tiptapify/composables/Toolbar/Style/useHeading";
+import { useHighlight } from "@tiptapify/composables/Toolbar/Style/useHighlight";
+import { useLineHeight } from "@tiptapify/composables/Toolbar/Style/useLineHeight";
+
+export function useStyleItems(theme: any, fontMeasure: string, customHeadingLevels: Array<number> = []) {
   return {
-    heading: {
-      name: 'heading',
-      tooltip: computed(() => t('style.heading')),
-      icon: mdi.mdiFormatHeaderPound,
-      modelValue: null,
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('heading') || editor.isActive('paragraph') ? 'primary' : ''),
-      },
-      children: [
-        {
-          name: 'paragraph',
-          tooltip: computed(() => t('style.paragraph')),
-          icon: mdiIcons['mdiFormatParagraph'],
-          noI18n: true,
-          enabled: true,
-          props: {
-            color: computed(() => editor.isActive('paragraph') ? 'primary' : ''),
-          },
-          attrs: {
-            click: () => editor.chain().focus().setParagraph().run()
-          }
-        }
-      ].concat(
-        headingLevels.value.map(level => {
-          const headingLevel: Level = level as Level
-          return {
-            name: `H${level}`,
-            tooltip: computed(() => t(`style.headings.h${level}`)),
-            icon: mdiIcons[`mdiFormatHeader${level}`],
-            noI18n: true,
-            enabled: true,
-            props: {
-              color: computed(() => editor.isActive('heading', { level: level }) ? 'primary' : ''),
-            },
-            attrs: {
-              click: () => editor.chain().focus().toggleHeading({ level: headingLevel }).run()
-            }
-          }
-        })
-      )
-    },
-    fontFamily: {
-      name: 'font-family',
-      tooltip: computed(() => t('style.fontFamily')),
-      icon: mdi.mdiFormatFont,
-      modelValue: false,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().unsetFontFamily().run()),
-        color: computed(() => {
-          let color = ''
-          for (const font in fonts) {
-            if (editor.isActive('textStyle', { fontFamily: fonts[font].fontFamily })) {
-              color = 'primary'
-              break;
-            }
-          }
-
-          return color
-        }),
-      },
-      component: markRaw(FontFamily),
-      componentProps: {
-        fonts: fonts,
-        fontFamily: computed(() => {
-          let fontFamily = ''
-          for (const font in fonts) {
-            if (editor.isActive('textStyle', { fontFamily: fonts[font].fontFamily })) {
-              fontFamily = fonts[font].fontFamily
-              break;
-            }
-          }
-
-          return fontFamily
-        }),
-      }
-    },
-    fontSize: {
-      name: 'font-size',
-      tooltip: computed(() => t('style.fontSize')),
-      icon: mdi.mdiFormatSize,
-      modelValue: false,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().unsetFontSize().run()),
-        color: computed(() => {
-          let color = ''
-          for (const size of fontSizes) {
-            if (editor.isActive('textStyle', { fontSize: `${size}${fontMeasure}` })) {
-              color = 'primary'
-              break;
-            }
-          }
-
-          return color
-        }),
-      },
-      component: markRaw(FontSize),
-      componentProps: {
-        sizes: fontSizes,
-        measure: fontMeasure,
-        fontSize: computed(() => {
-          let fontSize = null
-          for (const size of fontSizes) {
-            if (editor.isActive('textStyle', { fontSize: `${size}${fontMeasure}` })) {
-              fontSize = size
-              break;
-            }
-          }
-
-          return fontSize
-        }),
-      }
-    },
-    lineHeight: {
-      name: 'line-height',
-      tooltip: computed(() => t('style.lineHeight')),
-      icon: mdi.mdiFormatLineHeight,
-      modelValue: null,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().unsetLineHeight().run()),
-        color: computed(() => {
-          let color = ''
-          for (const height of lineHeights) {
-            if (editor.isActive('textStyle', { lineHeight: height.toString() })) {
-              color = 'primary'
-              break;
-            }
-          }
-
-          return color
-        }),
-      },
-      component: markRaw(LineHeight),
-      componentProps: {
-        lineHeights,
-        lineHeight: computed(() => {
-          let lineHeight = null
-          for (const height of lineHeights) {
-            if (editor.isActive('textStyle', { lineHeight: height.toString() })) {
-              lineHeight = height
-              break;
-            }
-          }
-
-          return lineHeight
-        }),
-      }
-    },
-    highlight: {
-      name: 'highlight',
-      tooltip: computed(() => t('style.color.highlight')),
-      icon: mdi.mdiFormatColorFill,
-      icon2: mdi.mdiColorHelper,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
-      },
-      icon2Props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
-        color: computed(() => {
-          const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
-          return editor.getAttributes('highlight').color || defaultColor
-        }),
-        style: 'filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px);'
-      },
-      component: markRaw(StyleColor),
-      componentProps: {
-        fontColor: false,
-        backgroundColor: true,
-        color: computed(() => editor.getAttributes('highlight').color || ''),
-      }
-    },
-    color: {
-      name: 'color',
-      tooltip: computed(() => t('style.color.text')),
-      icon: mdi.mdiFormatColorText,
-      icon2: mdi.mdiColorHelper,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
-      },
-      icon2Props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
-        color: computed(() => {
-          const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
-          return editor.getAttributes('textStyle').color || defaultColor
-        }),
-        style: 'filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px);'
-      },
-      component: markRaw(StyleColor),
-      componentProps: {
-        fontColor: true,
-        backgroundColor: false,
-        color: computed(() => editor.getAttributes('textStyle').color || ''),
-      }
-    }
+    heading: useHeading(customHeadingLevels),
+    fontFamily: useFontFamily(),
+    fontSize: useFontSize(fontMeasure),
+    lineHeight: useLineHeight(),
+    highlight: useHighlight(theme),
+    color: useColor(theme)
   }
 }

package/src/extensions/components/ImageDialog.vue

@@ -1,7 +1,7 @@
 <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 { useI18n } from 'vue-i18n'
 import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
@@ -66,6 +66,10 @@ function close() {
 }
 
 const showTiptapifyImage = (event: CustomEvent) => {
+  if (event.detail.editorId !== editor.value.instanceId) {
+    return
+  }
+
   attrs.value.src = event.detail.image?.src
   attrs.value.alt = event.detail.image?.alt
   attrs.value.width = event.detail.image?.width
@@ -84,7 +88,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Dialog ref="dialog" module="image" :max-width="800">
+  <TiptapifyDialog ref="dialog" module="image" :max-width="800">
     <template #content>
       <VCardText>
         <VRow>
@@ -126,5 +130,5 @@ onUnmounted(() => {
         </VRow>
       </VCardActions>
     </template>
-  </Dialog>
+  </TiptapifyDialog>
 </template>

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>

package/src/extensions/image.ts

@@ -18,7 +18,8 @@ export const TiptapifyImage = Extension.create({
       showTiptapifyImage: () => ({ editor }) => {
         const event = new CustomEvent(`tiptapify-show-${name}`, {
           detail: {
-            image: editor.getAttributes('image')
+            image: editor.getAttributes('image'),
+            editorId: editor.instanceId
           }
         })
 

package/src/extensions/link.ts

@@ -19,7 +19,8 @@ export const TiptapifyLink = Link.extend({
       showLink: () => ({ editor }) => {
         const event = new CustomEvent(`tiptapify-show-${name}`, {
           detail: {
-            link: editor.getAttributes('link')
+            link: editor.getAttributes('link'),
+            editorId: editor.instanceId
           }
         })
 

package/src/extensions/preview.ts

@@ -19,7 +19,8 @@ export const Preview = Extension.create({
       showPreview: () => ({ editor }) => {
         const event = new CustomEvent(`tiptapify-show-${name}`, {
           detail: {
-            html: editor.getHTML()
+            html: editor.getHTML(),
+            editorId: editor.instanceId
           }
         })
 

package/src/extensions/view-source.ts

@@ -27,7 +27,8 @@ export const ViewSource = Extension.create<ViewSourceOptions>({
       showSource: () => ({ editor }) => {
         const event = new CustomEvent('tiptapify-show-source', {
           detail: {
-            html: editor.getHTML()
+            html: editor.getHTML(),
+            editorId: editor.instanceId
           }
         })
 

package/src/i18n/index.ts

@@ -11,6 +11,7 @@ let _i18n: any = null
 export const getI18n = (locale: string) => {
   if (_i18n === null) {
     _i18n = createI18n({
+      legacy: false,
       locale: locale,
       fallbackLocale: 'en',
       messages

package/src/i18n/locales/ch.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "查看源代码",
-    "preview": "预览"
+    "preview": "预览",
+    "toggleInvisibleCharacters": "显示/隐藏不可见字符"
   },
   "footer": {
     "words": "单词",

package/src/i18n/locales/cz.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "Zobrazit zdrojový kód",
-    "preview": "Náhled"
+    "preview": "Náhled",
+    "toggleInvisibleCharacters": "Zobrazit/skrýt neviditelné znaky"
   },
   "footer": {
     "words": "slova",

package/src/i18n/locales/de.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "Quellcode anzeigen",
-    "preview": "Vorschau"
+    "preview": "Vorschau",
+    "toggleInvisibleCharacters": "Unsichtbare Zeichen anzeigen/ausblenden"
   },
   "footer": {
     "words": "Wörter",

package/src/i18n/locales/en.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "View source code",
-    "preview": "Preview"
+    "preview": "Preview",
+    "toggleInvisibleCharacters": "Show/hide invisible characters"
   },
   "footer": {
     "words": "words",

package/src/i18n/locales/es.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "Ver código fuente",
-    "preview": "Vista previa"
+    "preview": "Vista previa",
+    "toggleInvisibleCharacters": "Mostrar/ocultar caracteres invisibles"
   },
   "footer": {
     "words": "palabras",

package/src/i18n/locales/fr.json

@@ -111,7 +111,8 @@
   },
   "misc": {
     "source": "Voir le code source",
-    "preview": "Aperçu"
+    "preview": "Aperçu",
+    "toggleInvisibleCharacters": "Afficher/masquer les caractères invisibles"
   },
   "footer": {
     "words": "mots",

package/src/i18n/locales/it.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "Visualizza codice sorgente",
-    "preview": "Anteprima"
+    "preview": "Anteprima",
+    "toggleInvisibleCharacters": "Mostra/nascondi caratteri invisibili"
   },
   "footer": {
     "words": "parole",

package/src/i18n/locales/la.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "Codicem fontem videre",
-    "preview": "Praevisio"
+    "preview": "Praevisio",
+    "toggleInvisibleCharacters": "Ostende/cela characteres invisibiles"
   },
   "footer": {
     "words": "verba",

package/src/i18n/locales/lt.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "Žiūrėti išeities kodą",
-    "preview": "Peržiūra"
+    "preview": "Peržiūra",
+    "toggleInvisibleCharacters": "Rodyti/slėpti nematomus simbolius"
   },
   "footer": {
     "words": "žodžiai",

package/src/i18n/locales/nl.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "Broncode bekijken",
-    "preview": "Voorvertoning"
+    "preview": "Voorvertoning",
+    "toggleInvisibleCharacters": "Onzichtbare tekens tonen/verbergen"
   },
   "footer": {
     "words": "woorden",

package/src/i18n/locales/pl.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "Pokaż kod źródłowy",
-    "preview": "Podgląd"
+    "preview": "Podgląd",
+    "toggleInvisibleCharacters": "Pokaż/ukryj niewidoczne znaki"
   },
   "footer": {
     "words": "słowa",

package/src/i18n/locales/pt.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "Ver código fonte",
-    "preview": "Visualização"
+    "preview": "Visualização",
+    "toggleInvisibleCharacters": "Mostrar/ocultar caracteres invisíveis"
   },
   "footer": {
     "words": "palavras",

package/src/i18n/locales/ru.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "Просмотр исходного кода",
-    "preview": "Предпросмотр"
+    "preview": "Предпросмотр",
+    "toggleInvisibleCharacters": "Показать/скрыть невидимые символы"
   },
   "footer": {
     "words": "слова",

package/src/i18n/locales/se.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "Visa källkod",
-    "preview": "Förhandsgranskning"
+    "preview": "Förhandsgranskning",
+    "toggleInvisibleCharacters": "Visa/dölj osynliga tecken"
   },
   "footer": {
     "words": "ord",

package/src/i18n/locales/ua.json

@@ -110,7 +110,8 @@
   },
   "misc": {
     "source": "Перегляд вихідного коду",
-    "preview": "Попередній перегляд"
+    "preview": "Попередній перегляд",
+    "toggleInvisibleCharacters": "Показати/приховати невидимі символи"
   },
   "footer": {
     "words": "слова",