tiptapify 0.0.10 → 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.10",
+  "version": "0.0.12",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -53,48 +53,49 @@
   "repository": "https://github.com/IVoyt/tiptapify",
   "packageManager": "pnpm@10.12.1",
   "dependencies": {
-    "@tiptap/core": "next",
-    "@tiptap/extension-blockquote": "next",
-    "@tiptap/extension-bold": "next",
-    "@tiptap/extension-bubble-menu": "next",
-    "@tiptap/extension-code": "next",
-    "@tiptap/extension-code-block": "next",
-    "@tiptap/extension-code-block-lowlight": "next",
-    "@tiptap/extension-color": "next",
-    "@tiptap/extension-document": "next",
-    "@tiptap/extension-floating-menu": "next",
-    "@tiptap/extension-font-family": "next",
-    "@tiptap/extension-hard-break": "next",
-    "@tiptap/extension-heading": "next",
-    "@tiptap/extension-highlight": "next",
-    "@tiptap/extension-horizontal-rule": "next",
-    "@tiptap/extension-image": "next",
-    "@tiptap/extension-italic": "next",
-    "@tiptap/extension-link": "next",
-    "@tiptap/extension-list": "next",
-    "@tiptap/extension-list-item": "next",
-    "@tiptap/extension-paragraph": "next",
-    "@tiptap/extension-placeholder": "next",
-    "@tiptap/extension-strike": "next",
-    "@tiptap/extension-subscript": "next",
-    "@tiptap/extension-superscript": "next",
-    "@tiptap/extension-table": "next",
-    "@tiptap/extension-task-item": "next",
-    "@tiptap/extension-task-list": "next",
-    "@tiptap/extension-text": "next",
-    "@tiptap/extension-text-align": "next",
-    "@tiptap/extension-text-style": "next",
-    "@tiptap/extension-typography": "next",
-    "@tiptap/extension-underline": "next",
-    "@tiptap/extensions": "next",
-    "@tiptap/pm": "next",
-    "@tiptap/starter-kit": "next",
-    "@tiptap/suggestion": "next",
-    "@tiptap/vue-3": "next",
+    "@tiptap/core": "^3.0.7",
+    "@tiptap/extension-blockquote": "^3.0.7",
+    "@tiptap/extension-bold": "^3.0.7",
+    "@tiptap/extension-bubble-menu": "^3.0.7",
+    "@tiptap/extension-code": "^3.0.7",
+    "@tiptap/extension-code-block": "^3.0.7",
+    "@tiptap/extension-code-block-lowlight": "^3.0.7",
+    "@tiptap/extension-color": "^3.0.7",
+    "@tiptap/extension-document": "^3.0.7",
+    "@tiptap/extension-floating-menu": "^3.0.7",
+    "@tiptap/extension-font-family": "^3.0.7",
+    "@tiptap/extension-hard-break": "^3.0.7",
+    "@tiptap/extension-heading": "^3.0.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",
+    "@tiptap/extension-list-item": "^3.0.7",
+    "@tiptap/extension-paragraph": "^3.0.7",
+    "@tiptap/extension-placeholder": "^3.0.7",
+    "@tiptap/extension-strike": "^3.0.7",
+    "@tiptap/extension-subscript": "^3.0.7",
+    "@tiptap/extension-superscript": "^3.0.7",
+    "@tiptap/extension-table": "^3.0.7",
+    "@tiptap/extension-task-item": "^3.0.7",
+    "@tiptap/extension-task-list": "^3.0.7",
+    "@tiptap/extension-text": "^3.0.7",
+    "@tiptap/extension-text-align": "^3.0.7",
+    "@tiptap/extension-text-style": "^3.0.7",
+    "@tiptap/extension-typography": "^3.0.7",
+    "@tiptap/extension-underline": "^3.0.7",
+    "@tiptap/extensions": "^3.0.7",
+    "@tiptap/pm": "^3.0.7",
+    "@tiptap/starter-kit": "^3.0.7",
+    "@tiptap/suggestion": "^3.0.7",
+    "@tiptap/vue-3": "^3.0.7",
     "highlight.js": "^11.11.1",
     "linkifyjs": "^4.3.1",
     "lowlight": "^3.3.0",
-    "vue-i18n": "^11.1.9"
+    "vue-i18n": "^11.1.10"
   },
   "peerDependencies": {
     "@mdi/js": "^7.4.47",

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' } },
-  overrideExtensionsComponents: { 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']);
@@ -80,7 +79,7 @@ onBeforeUnmount(() => {
               :items="items"
               :items-exclude="itemsExclude"
               :rounded="rounded"
-              :override-extensions-components="overrideExtensionsComponents"
+              :custom-extensions="customExtensions"
               :theme="currentTheme"
           />
         </template>

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="t(toolbarItem.tooltip)" location="top" activator="parent" />
+    <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">
-      {{ t(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,20 +10,15 @@ defineProps({
   toolbarItem: { type: Object as PropType<ToolbarItem>, default() { return {} }}
 })
 
-const { t } = useI18n();
-
 </script>
 
 <template>
   <VMenu v-model="toolbarItem.modelValue" v-bind="toolbarItem.props">
     <template v-if="!nested" #activator="{ props: menuProps }">
       <VBtn v-bind="{ ...menuProps, ...toolbarItem.props }" size="32">
-        <VTooltip :text="t(toolbarItem.tooltip)" location="top" activator="parent" />
+        <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">
-          {{ t(toolbarItem.name) }}
-        </span>
+        <VIcon :icon="toolbarItem.icon || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="small" />
       </VBtn>
     </template>
 
@@ -43,18 +38,9 @@ const { t } = useI18n();
             v-bind="item.props ?? {}"
             v-on="item?.attrs ?? {}"
         >
-          <VTooltip v-if="item.tooltip" :text="t(item.tooltip)" location="top" activator="parent" />
-
-          <VIcon v-if="item.icon" :icon="item.icon" size="small" />
+          <VTooltip v-if="item.tooltip" :text="item.tooltip" location="top" activator="parent" />
 
-          <span v-else class="menu-item-title">
-            <template v-if="item.noI18n">
-              {{ item.name }}
-            </template>
-            <template v-else>
-              {{ t(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 } },
-  overrideExtensionsComponents: { 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.overrideExtensionsComponents[extension] ?? defaultComponents[extension]
+  extensions.value[extension] = defaultComponents[extension]
+})
+Object.keys(props.customExtensions).forEach(extension => {
+  extensions.value[extension] = props.customExtensions[extension]
 })
 
 </script>
@@ -54,8 +57,9 @@ Object.keys(defaultComponents).forEach(extension => {
       <Items v-else :items="items" />
     </VToolbar>
 
+    <!-- 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,18 +26,18 @@ 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"
           rounded="sm"
       >
-        <VTooltip :text="t(toolbarItem.tooltip)" location="top" activator="parent" />
+        <VTooltip :text="toolbarItem.tooltip" location="top" activator="parent" />
 
         <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="16" />
         <span v-else class="menu-item-title">
-          {{ t(toolbarItem.name) }}
+          {{ toolbarItem.name }}
         </span>
       </VBtn>
 

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";
 
@@ -17,12 +18,9 @@ const { t } = useI18n();
   <VBtnToggle :variant="variant" elevation="4">
     <template v-for="(item, key) in toolbarSection.items" :key="key">
       <VBtn v-bind="item.props" v-on="item.attrs" size="32">
-        <VTooltip :text="t(item.name)" location="top" activator="parent" />
+        <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">
-          {{ t(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,
     }
   }
 }