tiptapify 0.0.11 → 0.0.12

package/index.d.ts

@@ -1,6 +1,6 @@
 import { Editor } from "@tiptap/vue-3";
 import type { DefineComponent } from 'vue'
-import { extensionsComponents } from "./src/types/overridable-extensions";
+import { extensionComponents } from "./src/types/extensionComponents";
 
 export interface TiptapifyProps {
   content: string|object
@@ -18,7 +18,7 @@ export interface TiptapifyProps {
   defaultFontFamily: string
   fontMeasure: string
   rounded: string
-  overrideExtensionsComponents: extensionsComponents
+  customExtensions: extensionComponents
 }
 
 export interface TiptapifyEmits {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -69,6 +69,7 @@
     "@tiptap/extension-highlight": "^3.0.7",
     "@tiptap/extension-horizontal-rule": "^3.0.7",
     "@tiptap/extension-image": "^3.0.7",
+    "@tiptap/extension-invisible-characters": "^3.0.7",
     "@tiptap/extension-italic": "^3.0.7",
     "@tiptap/extension-link": "^3.0.7",
     "@tiptap/extension-list": "^3.0.7",

package/src/components/MenuBubble.vue

@@ -14,7 +14,7 @@ const editor = inject('tiptapifyEditor') as Ref<Editor>
 const items = ref([
   {
     name: 'bold',
-    icon: mdi.mdiFormatBold,
+    icon: `mdiSvg:${mdi.mdiFormatBold}`,
     props: {
       disabled: computed(() => !editor?.value.can().chain().focus().toggleBold().run()),
       color: computed(() => editor.value.isActive('bold') ? 'primary' : ''),
@@ -23,7 +23,7 @@ const items = ref([
   },
   {
     name: 'italic',
-    icon: mdi.mdiFormatItalic,
+    icon: `mdiSvg:${mdi.mdiFormatItalic}`,
     props: {
       disabled: computed(() => !editor.value.can().chain().focus().toggleItalic().run()),
       color: computed(() => editor.value.isActive('italic') ? 'primary' : ''),
@@ -32,7 +32,7 @@ const items = ref([
   },
   {
     name: 'strike',
-    icon: mdi.mdiFormatStrikethroughVariant,
+    icon: `mdiSvg:${mdi.mdiFormatStrikethroughVariant}`,
     props: {
       disabled: computed(() => !editor.value.can().chain().focus().toggleStrike().run()),
       color: computed(() => editor.value.isActive('strike') ? 'primary' : ''),
@@ -41,7 +41,7 @@ const items = ref([
   },
   {
     name: 'underline',
-    icon: mdi.mdiFormatUnderline,
+    icon: `mdiSvg:${mdi.mdiFormatUnderline}`,
     props: {
       disabled: computed(() => !editor.value.can().chain().focus().toggleUnderline().run()),
       color: computed(() => editor.value.isActive('underline') ? 'primary' : ''),
@@ -50,7 +50,7 @@ const items = ref([
   },
   {
     name: 'highlight',
-    icon: mdi.mdiFormatColorHighlight,
+    icon: `mdiSvg:${mdi.mdiFormatColorHighlight}`,
     props: {
       disabled: computed(() => !editor.value.can().chain().focus().toggleHighlight().run()),
       color: computed(() => editor.value.isActive('highlight') ? 'primary' : ''),
@@ -59,7 +59,7 @@ const items = ref([
   },
   {
     name: 'code',
-    icon: mdi.mdiXml,
+    icon: `mdiSvg:${mdi.mdiXml}`,
     props: {
       disabled: computed(() => !editor.value.can().chain().focus().toggleCode().run()),
       color: computed(() => editor.value.isActive('code') ? 'primary' : ''),
@@ -68,7 +68,7 @@ const items = ref([
   },
   {
     name: 'link',
-    icon: computed(() => editor.value.isActive('link') ? mdi.mdiLinkOff : mdi.mdiLink),
+    icon: computed(() => editor.value.isActive('link') ? `mdiSvg:${mdi.mdiLinkOff}` : `mdiSvg:${mdi.mdiLink}`),
     props: {
       color: computed(() => editor.value.isActive('link') ? 'primary' : ''),
       disabled: computed(() => editor.value.isActive('code') || editor.value.isActive('codeBlock')),
@@ -77,7 +77,7 @@ const items = ref([
   },
   {
     name: 'format clear',
-    icon: mdi.mdiFormatClear,
+    icon: `mdiSvg:${mdi.mdiFormatClear}`,
     click: () => editor.value.chain().focus().unsetAllMarks().clearNodes().run(),
   }
 ])

package/src/components/Tiptapify.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import { extensionsComponents } from "@tiptapify/types/overridable-extensions";
+import { extensionComponents } from "@tiptapify/types/extensionComponents";
 import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef, watch } from "vue";
 import { default as Toolbar } from "@tiptapify/components/Toolbar/Index.vue";
 import { Editor, EditorContent } from '@tiptap/vue-3'
@@ -32,18 +32,17 @@ const props = defineProps({
   defaultFontFamily: { type: String, default () { return 'Inter' } },
   fontMeasure: { type: String, default () { return 'px' } },
   rounded: { type: String, default () { return '0' } },
-  customExtensions: { type: Object as PropType<extensionsComponents>, default() { return {} } },
+  customExtensions: { type: Object as PropType<extensionComponents>, default() { return {} } },
 })
 
-// console.log('override extension components', computed(() => props.overrideExtensionsComponents).value)
-
 const appTheme = useTheme()
 const currentTheme = ref(appTheme.global.name)
 
 const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
     props.content,
     computed(() => props.placeholder || t('content.placeholder')).value,
-    props.slashCommands
+    props.slashCommands,
+    props.customExtensions
 )
 
 const emit = defineEmits(['update:modelValue', 'editor-ready']);

package/src/components/Toolbar/Group.vue

@@ -3,7 +3,7 @@ import GroupBtn from "@tiptapify/components/Toolbar/GroupBtn.vue";
 import GroupDropdown from "@tiptapify/components/Toolbar/GroupDropdown.vue";
 import { defineProps, PropType } from 'vue'
 
-import { ToolbarItemSection } from "@tiptapify/components/Toolbar/items";
+import { ToolbarItemSection } from "@tiptapify/types/toolbarItems";
 
 defineProps({
   variant: { type: String, default () { return 'flat' }},
@@ -20,7 +20,7 @@ defineProps({
         <GroupDropdown :toolbar-item="toolbarItem" :variant="variant" />
       </template>
 
-      <VMenu v-else-if="toolbarItem?.component" v-model="toolbarItem.modelValue" :close-on-content-click="false">
+      <VMenu v-else-if="toolbarItem?.component" v-model="toolbarItem.modelValue" :close-on-content-click="false" v-bind="toolbarItem.props">
         <template #activator="{ props: menuProps }">
           <GroupBtn v-bind="menuProps" :toolbar-item="toolbarItem" :variant="variant" />
         </template>

package/src/components/Toolbar/GroupBtn.vue

@@ -1,27 +1,30 @@
 <script setup lang="ts">
+import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { defineProps, PropType } from 'vue'
-import { useI18n } from "vue-i18n";
 
-import { ToolbarItem } from "@tiptapify/components/Toolbar/items";
+
+import { ToolbarItem } from '@tiptapify/types/toolbarItems'
 
 defineProps({
   variant: { type: String, default () { return 'flat' }},
   toolbarItem: { type: Object as PropType<ToolbarItem>, default() { return {} }}
 })
 
-const { t } = useI18n();
 </script>
 
 <template>
   <VBtn v-bind="toolbarItem?.props ?? {}" v-on="toolbarItem?.attrs ?? {}" size="32">
     <VTooltip :text="toolbarItem.tooltip" location="top" activator="parent" />
 
-    <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="small" />
-    <span v-else class="menu-item-title">
-      {{ toolbarItem.name }}
-    </span>
+    <BtnIcon :icon="toolbarItem.icon" />
 
-    <VIcon v-if="toolbarItem.icon2" v-bind="toolbarItem?.icon2Props ?? {}" :icon="toolbarItem.icon2" size="small" style="position: absolute;" />
+    <VIcon
+        v-if="toolbarItem.icon2"
+        v-bind="toolbarItem?.icon2Props ?? {}"
+        :icon="toolbarItem.icon2"
+        size="small"
+        style="position: absolute;"
+    />
   </VBtn>
 </template>
 

package/src/components/Toolbar/GroupDropdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { defineProps, PropType } from 'vue'
-import { useI18n } from "vue-i18n";
+import * as mdi from '@mdi/js'
 
 import { ToolbarItem } from "@tiptapify/components/Toolbar/items";
 
@@ -10,8 +10,6 @@ defineProps({
   toolbarItem: { type: Object as PropType<ToolbarItem>, default() { return {} }}
 })
 
-const { t } = useI18n();
-
 </script>
 
 <template>
@@ -20,10 +18,7 @@ const { t } = useI18n();
       <VBtn v-bind="{ ...menuProps, ...toolbarItem.props }" size="32">
         <VTooltip :text="toolbarItem.tooltip" location="top" activator="parent" />
 
-        <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="small" />
-        <span v-else class="menu-item-title">
-          {{ toolbarItem.name }}
-        </span>
+        <VIcon :icon="toolbarItem.icon || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="small" />
       </VBtn>
     </template>
 
@@ -45,16 +40,7 @@ const { t } = useI18n();
         >
           <VTooltip v-if="item.tooltip" :text="item.tooltip" location="top" activator="parent" />
 
-          <VIcon v-if="item.icon" :icon="item.icon" size="small" />
-
-          <span v-else class="menu-item-title">
-            <template v-if="item.noI18n">
-              {{ item.name }}
-            </template>
-            <template v-else>
-              {{ item.toggle }}
-            </template>
-          </span>
+          <VIcon :icon="item.icon || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="small" />
 
           <VMenu
               v-if="item.component"

package/src/components/Toolbar/Index.vue

@@ -2,8 +2,8 @@
 import { Editor } from "@tiptap/vue-3";
 import { getDefaultComponents } from "@tiptapify/components/Toolbar/defaultExtensionComponents";
 import Items from "@tiptapify/components/Toolbar/Items.vue";
-import { computed, defineProps, inject, PropType, ref, Ref, ShallowRef, shallowRef, triggerRef } from 'vue'
-import { extensionsComponents } from '@tiptapify/types/overridable-extensions'
+import { computed, defineProps, inject, PropType, Ref, ShallowRef, shallowRef } from 'vue'
+import { extensionComponents, ToolbarItemType } from '@tiptapify/types/extensionComponents'
 
 import { toolbarItems } from "@tiptapify/components/Toolbar/items";
 import { useTheme } from "vuetify/framework";
@@ -20,7 +20,7 @@ const props = defineProps({
   theme: { type: String, default() { return 'light' } },
   rounded: { type: String, default() { return '0' } },
   toolbarScrollable: { type: Boolean, default() { return false } },
-  customExtensions: { type: Object as PropType<extensionsComponents>, default() { return {} } },
+  customExtensions: { type: Object as PropType<extensionComponents>, default() { return {} } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -28,18 +28,21 @@ const editor = inject('tiptapifyEditor') as Ref<Editor>
 const appTheme = useTheme()
 
 const items = toolbarItems(
-    editor,
     appTheme,
     computed(() => props.fontMeasure).value,
     { list: computed(() => props.items).value, exclude: computed(() => props.itemsExclude).value },
-    computed(() => props.headingLevels).value
+    computed(() => props.headingLevels).value,
+    props.customExtensions
 )
 
-const defaultComponents: extensionsComponents = getDefaultComponents(props.variantField)
+const defaultComponents: extensionComponents = getDefaultComponents(props.variantField)
 
-const extensions: ShallowRef<extensionsComponents> = shallowRef({})
+const extensions: ShallowRef<extensionComponents> = shallowRef({})
 Object.keys(defaultComponents).forEach(extension => {
-  extensions.value[extension] = props.customExtensions[extension] ?? defaultComponents[extension]
+  extensions.value[extension] = defaultComponents[extension]
+})
+Object.keys(props.customExtensions).forEach(extension => {
+  extensions.value[extension] = props.customExtensions[extension]
 })
 
 </script>
@@ -54,9 +57,9 @@ Object.keys(defaultComponents).forEach(extension => {
       <Items v-else :items="items" />
     </VToolbar>
 
-    <!-- mount components mentioned in "items" -->
+    <!-- mount built-in and/or custom components -->
     <template v-for="extension in extensions">
-      <component :is="extension.component" v-bind="extension?.props ?? {}"  />
+      <component v-if="extension.type !== ToolbarItemType.dropdown" :is="extension.component" v-bind="{ ...extension?.props ?? {}, ...extension?.componentProps ?? {} }"  />
     </template>
   </div>
 </template>

package/src/components/Toolbar/Items.vue

@@ -2,17 +2,14 @@
 import Group from "@tiptapify/components/Toolbar/Group.vue";
 import Toggle from "@tiptapify/components/Toolbar/Toggle.vue";
 import { computed, defineProps, PropType, Ref, ref } from 'vue'
-import { useI18n } from "vue-i18n";
 
-import { ToolbarItemSections } from "@tiptapify/components/Toolbar/items";
+import { ToolbarItemSections } from "@tiptapify/types/toolbarItems";
 
 const props = defineProps({
   variantBtn: { type: String, default () { return 'elevated' }},
   items: { type: Object as PropType<ToolbarItemSections>, default() { return {} }},
 })
 
-const { t } = useI18n();
-
 const toolbarItemsRef: Ref<ToolbarItemSections> = ref(computed(() => props.items).value)
 
 </script>
@@ -29,8 +26,8 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(computed(() => props.items
           v-for="(toolbarItem, itemKey) in toolbarSection.items"
           :key="itemKey"
           :variant="variantBtn"
-          v-bind="toolbarItem.props"
-          v-on="toolbarItem.attrs"
+          v-bind="toolbarItem?.props ?? {}"
+          v-on="toolbarItem?.attrs ?? {}"
           class="menu-button"
           size="32"
           elevation="4"

package/src/components/Toolbar/Toggle.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { defineProps, PropType } from 'vue'
 import { useI18n } from "vue-i18n";
+import * as mdi from '@mdi/js'
 
 import { ToolbarItemSection } from "@tiptapify/components/Toolbar/items";
 
@@ -19,10 +20,7 @@ const { t } = useI18n();
       <VBtn v-bind="item.props" v-on="item.attrs" size="32">
         <VTooltip :text="item.name" location="top" activator="parent" />
 
-        <VIcon v-if="item.icon" :icon="item.icon" size="small" />
-        <span v-else class="menu-item-title">
-          {{ item.name }}
-        </span>
+        <VIcon :icon="item.icon || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="small" />
       </VBtn>
     </template>
   </VBtnToggle>

package/src/components/Toolbar/defaultExtensionComponents.ts

@@ -1,32 +1,53 @@
+import { useImage } from "@tiptapify/composables/Toolbar/Media/useImage";
+import { useLink } from "@tiptapify/composables/Toolbar/Media/useLink";
+import { usePreview } from "@tiptapify/composables/Toolbar/Misc/usePreview";
+import { useSource } from "@tiptapify/composables/Toolbar/Misc/useSource";
 import ImageDialog from "@tiptapify/extensions/components/ImageDialog.vue";
 import LinkDialog from "@tiptapify/extensions/components/LinkDialog.vue";
 import PreviewDialog from "@tiptapify/extensions/components/PreviewDialog.vue";
 import ShowSourceDialog from "@tiptapify/extensions/components/ShowSourceDialog.vue";
-import { extensionsComponents } from "@tiptapify/types/overridable-extensions";
-import { computed } from "vue";
+import { extensionComponents } from "@tiptapify/types/extensionComponents";
+import { ToolbarSections } from "@tiptapify/types/toolbarSections";
+import { computed, markRaw } from "vue";
 
-export function getDefaultComponents(variantField: string): extensionsComponents {
+export function getDefaultComponents(variantField: string): extensionComponents {
   return {
     image: {
-      component: ImageDialog,
-      props: {
+      component: markRaw(ImageDialog),
+      componentProps: {
         variantField: computed(() => variantField).value,
-      }
+      },
+      section: ToolbarSections.media,
+      name: useImage().name,
+      tooltip: useImage().tooltip,
+      icon: useImage().icon,
     },
     link: {
-      component: LinkDialog,
-      props: {
+      component: markRaw(LinkDialog),
+      componentProps: {
         variantField: computed(() => variantField).value,
-      }
+      },
+      section: ToolbarSections.media,
+      name: useLink().name,
+      tooltip: useLink().tooltip,
+      icon: useLink().icon,
     },
     preview: {
-      component: PreviewDialog,
+      component: markRaw(PreviewDialog),
+      section: ToolbarSections.misc,
+      name: usePreview().name,
+      tooltip: usePreview().tooltip,
+      icon: usePreview().icon,
     },
     showSource: {
-      component: ShowSourceDialog,
-      props: {
+      component: markRaw(ShowSourceDialog),
+      componentProps: {
         variantField: computed(() => variantField).value,
-      }
+      },
+      section: ToolbarSections.misc,
+      name: useSource().name,
+      tooltip: useSource().tooltip,
+      icon: useSource().icon,
     }
   }
 }

package/src/components/Toolbar/items.ts

@@ -6,63 +6,26 @@ import { useListItems } from "@tiptapify/composables/Toolbar/useListItems";
 import { useMediaItems } from "@tiptapify/composables/Toolbar/useMediaItems";
 import { useMiscItems } from "@tiptapify/composables/Toolbar/useMiscItems";
 import { useStyleItems } from "@tiptapify/composables/Toolbar/useStyleItems";
-import { ComputedRef, ref } from "vue";
-
-interface ToolbarItemAttrs {
-  [key: string]: Function | any
-}
-
-interface ToolbarItemProps {
-  [key: string]: any
-}
-
-export interface ToolbarItem {
-  name: string|number|ComputedRef<string>,
-  tooltip: string|ComputedRef<string>,
-  icon: string|ComputedRef<string>,
-  icon2?: string|ComputedRef<string>,
-  noI18n?: boolean,
-  enabled: boolean,
-  component?: any,
-  modelValue?: any,
-  group?: boolean,
-  toggle?: boolean,
-  icon2Props?: ToolbarItemProps,
-  componentProps?: ToolbarItemProps,
-  props?: ToolbarItemProps,
-  attrs?: ToolbarItemAttrs,
-  children?: ToolbarItems|ToolbarItem[],
-}
-
-export interface ToolbarItems {
-  [key: string]: ToolbarItem
-}
-
-export interface ToolbarItemSection {
-  group?: boolean,
-  toggle?: boolean,
-  items: ToolbarItems,
-}
-
-export interface ToolbarItemSections {
-  [key: string]: ToolbarItemSection
-}
+import { extensionComponents } from "@tiptapify/types/extensionComponents";
+import { ref } from "vue";
+
+import { ToolbarItem, ToolbarItemSections } from '@tiptapify/types/toolbarItems'
 
 export function toolbarItems(
-  editor: any,
   theme: any,
   fontMeasure: string,
-  items: { list: Array<string>, exclude: boolean },
-  customHeadingLevels: Array<number>
+  items: { list: Array<ToolbarItem>, exclude: boolean },
+  customHeadingLevels: Array<number>,
+  customExtensions: extensionComponents
 ): ToolbarItemSections {
-  const styleItems = ref(useStyleItems(editor.value, theme, fontMeasure, customHeadingLevels))
-  const formatItems = ref(useFormatItems(editor.value))
-  const formatExtraItems = ref(useFormatExtraItems(editor.value))
-  const alignmentItems = ref(useAlignmentItems(editor.value))
-  const listItems = ref(useListItems(editor.value))
-  const actionsItems = ref(useActionsItems(editor.value))
-  const miscItems = ref(useMiscItems(editor.value))
-  const mediaItems = ref(useMediaItems(editor.value))
+  const styleItems = ref(useStyleItems(theme, fontMeasure, customHeadingLevels))
+  const formatItems = ref(useFormatItems())
+  const formatExtraItems = ref(useFormatExtraItems())
+  const alignmentItems = ref(useAlignmentItems())
+  const listItems = ref(useListItems())
+  const actionsItems = ref(useActionsItems())
+  const miscItems = ref(useMiscItems())
+  const mediaItems = ref(useMediaItems())
 
   const allMenuItems: ToolbarItemSections = {
     /**
@@ -78,6 +41,7 @@ export function toolbarItems(
     list: { group: true, items: listItems.value },
     actions: { group: true, items: actionsItems.value },
     misc: { group: true, items: miscItems.value },
+    extra: { group: true, items: {} },
   }
 
   const pluginsList: Array<string> = []
@@ -85,13 +49,13 @@ export function toolbarItems(
     Object.keys(allMenuItems[section]).forEach(item => pluginsList.push(item))
   })
 
-  if (items.list.length) {
-    items.list.forEach(item => {
-      if (!pluginsList.includes(item)) {
-        throw new Error(`Unknown plugin name: ${item}! Supported plugins: ${pluginsList.join(', ')}`)
-      }
-    })
-  }
+  // if (items.list.length) {
+  //   items.list.forEach(item => {
+  //     if (!pluginsList.includes(item)) {
+  //       throw new Error(`Unknown plugin name: ${item}! Supported plugins: ${pluginsList.join(', ')}`)
+  //     }
+  //   })
+  // }
 
   const toolbarItems: ToolbarItemSections = {}
 
@@ -100,7 +64,7 @@ export function toolbarItems(
   Object.keys(allMenuItems).forEach(sectionName => {
     const section = allMenuItems[sectionName]
     Object.keys(section.items).forEach(plugin => {
-      const item = section.items[plugin]
+      const item: ToolbarItem = section.items[plugin]
 
       if (items.list.length) {
         item.enabled = items.list.includes(plugin)
@@ -132,5 +96,24 @@ export function toolbarItems(
     }
   })
 
+  // add/override custom extensions
+  Object.keys(customExtensions).forEach(extension => {
+    const section = customExtensions[extension].section
+
+    if (typeof customExtensions[extension]?.props === 'undefined') {
+      customExtensions[extension].props = toolbarItems[section]?.items[extension]?.props ?? {}
+    }
+
+    if (typeof customExtensions[extension]?.attrs === 'undefined') {
+      customExtensions[extension].attrs = toolbarItems[section]?.items[extension]?.attrs ?? {}
+    }
+
+    if (typeof toolbarItems[section] === 'undefined') {
+      toolbarItems[section] = { group: true, items: {} }
+      toolbarItems[section].items[extension] = {}
+    }
+    toolbarItems[section].items[extension] = customExtensions[extension]
+  })
+
   return toolbarItems
 }

package/src/components/UI/BtnIcon.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import * as mdi from '@mdi/js'
+
+defineProps({
+  icon: String
+})
+
+const isSvgString = (icon: any) => {
+  return typeof icon === 'string' && icon.includes('<svg')
+}
+</script>
+
+<template>
+  <div v-if="isSvgString(icon)" v-html="icon" class="v-icon tiptapify-btn-svg-icon"></div>
+  <VIcon v-else :icon="icon || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="small" />
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-btn-svg-icon {
+  width: 16px;
+  height: 16px;
+}
+</style>

package/src/components/UI/{Dialog.vue → TiptapifyDialog.vue}

@@ -6,6 +6,7 @@ import { useI18n } from "vue-i18n";
 
 const props = defineProps({
   module: String,
+  title: String,
   fullscreen: { type: Boolean, default () { return false } },
   maxWidth: { type: Number, default () { return 800 } },
 })
@@ -103,17 +104,17 @@ watch(() => dialog.value, async () => {
 </script>
 
 <template>
-  <VDialog v-model="dialog" :max-width="maxWidth" :fullscreen="fullscreen" absolute @click:outside="emitClose">
+  <VDialog v-model="dialog" :max-width="maxWidth" :fullscreen="fullscreen" @click:outside="emitClose">
     <VCard>
       <VCardTitle ref="movableHandler" :class="`d-flex ${!fullscreen ? 'tiptapify-movable-handler' : ''}`" style="user-select: none;">
         <VLabel>
-          {{ t(`dialog.${module}.title`) }}
+          {{ title ?? t(`dialog.${module}.title`) }}
         </VLabel>
 
         <VSpacer />
 
         <VBtn density="compact" class="tiptapify-dialog-close" variant="elevated" elevation="4" icon @click="emitClose">
-          <VIcon size="x-small" :icon="mdi.mdiClose" />
+          <VIcon size="x-small" :icon="`mdiSvg:${mdi.mdiClose}`" />
         </VBtn>
       </VCardTitle>
 

package/src/components/editorExtensions.ts

@@ -22,6 +22,7 @@ import { TextAlign } from '@tiptap/extension-text-align'
 import { Underline } from '@tiptap/extension-underline'
 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/link'
 import { TiptapifyImage } from '@tiptapify/extensions/image'
@@ -30,6 +31,7 @@ import { ViewSource } from '@tiptapify/extensions/view-source'
 import { Preview } from '@tiptapify/extensions/preview'
 import SlashCommands from '@tiptapify/extensions/slash-commands'
 import suggestion from '@tiptapify/extensions/components/slashCommands/suggestion'
+import { extensionComponents } from "@tiptapify/types/extensionComponents";
 
 // load all languages with "all" or common languages with "common"
 import { common, createLowlight } from 'lowlight'
@@ -47,7 +49,7 @@ const lowlight = createLowlight(common)
 // register language example
 // lowlight.register('ts', ts)
 
-export function editorExtensions (placeholder: string, slashCommands: boolean) {
+export function editorExtensions (placeholder: string, slashCommands: boolean, customExtensions: extensionComponents) {
   const extensions = [
     TextStyleKit,
     Document,
@@ -94,6 +96,9 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
     Placeholder.configure({ placeholder }),
     CharacterCount,
     ViewSource,
+    InvisibleCharacters.configure({
+      visible: false,
+    }),
     Preview
   ]
 
@@ -101,5 +106,15 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
     extensions.push(SlashCommands.configure({ suggestion }))
   }
 
+  if (Object.keys(customExtensions).length) {
+    for (const customExtension of Object.values(customExtensions)) {
+      if (typeof customExtension.extensions !== 'undefined') {
+        for (const extension of customExtension.extensions) {
+          extensions.push(extension)
+        }
+      }
+    }
+  }
+
   return extensions
 }