tiptapify 0.0.10 → 0.0.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -53,48 +53,48 @@
   "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-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/Tiptapify.vue

@@ -32,7 +32,7 @@ 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<extensionsComponents>, default() { return {} } },
 })
 
 // console.log('override extension components', computed(() => props.overrideExtensionsComponents).value)
@@ -80,7 +80,7 @@ onBeforeUnmount(() => {
               :items="items"
               :items-exclude="itemsExclude"
               :rounded="rounded"
-              :override-extensions-components="overrideExtensionsComponents"
+              :custom-extensions="customExtensions"
               :theme="currentTheme"
           />
         </template>

package/src/components/Toolbar/GroupBtn.vue

@@ -14,11 +14,11 @@ const { t } = useI18n();
 
 <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) }}
+      {{ toolbarItem.name }}
     </span>
 
     <VIcon v-if="toolbarItem.icon2" v-bind="toolbarItem?.icon2Props ?? {}" :icon="toolbarItem.icon2" size="small" style="position: absolute;" />

package/src/components/Toolbar/GroupDropdown.vue

@@ -18,11 +18,11 @@ const { t } = useI18n();
   <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) }}
+          {{ toolbarItem.name }}
         </span>
       </VBtn>
     </template>
@@ -43,7 +43,7 @@ const { t } = useI18n();
             v-bind="item.props ?? {}"
             v-on="item?.attrs ?? {}"
         >
-          <VTooltip v-if="item.tooltip" :text="t(item.tooltip)" location="top" activator="parent" />
+          <VTooltip v-if="item.tooltip" :text="item.tooltip" location="top" activator="parent" />
 
           <VIcon v-if="item.icon" :icon="item.icon" size="small" />
 
@@ -52,7 +52,7 @@ const { t } = useI18n();
               {{ item.name }}
             </template>
             <template v-else>
-              {{ t(item.toggle) }}
+              {{ item.toggle }}
             </template>
           </span>
 

package/src/components/Toolbar/Index.vue

@@ -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<extensionsComponents>, default() { return {} } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -39,7 +39,7 @@ const defaultComponents: extensionsComponents = getDefaultComponents(props.varia
 
 const extensions: ShallowRef<extensionsComponents> = shallowRef({})
 Object.keys(defaultComponents).forEach(extension => {
-  extensions.value[extension] = props.overrideExtensionsComponents[extension] ?? defaultComponents[extension]
+  extensions.value[extension] = props.customExtensions[extension] ?? defaultComponents[extension]
 })
 
 </script>
@@ -54,6 +54,7 @@ Object.keys(defaultComponents).forEach(extension => {
       <Items v-else :items="items" />
     </VToolbar>
 
+    <!-- mount components mentioned in "items" -->
     <template v-for="extension in extensions">
       <component :is="extension.component" v-bind="extension?.props ?? {}"  />
     </template>

package/src/components/Toolbar/Items.vue

@@ -36,11 +36,11 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(computed(() => props.items
           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

@@ -17,11 +17,11 @@ 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) }}
+          {{ item.name }}
         </span>
       </VBtn>
     </template>

package/src/components/Toolbar/items.ts

@@ -1,11 +1,11 @@
-import { getActionsItems } from "@tiptapify/components/Toolbar/items/actions";
-import { getAlignmentItems } from "@tiptapify/components/Toolbar/items/alignment";
-import { getFormatExtraItems } from "@tiptapify/components/Toolbar/items/formatExtra";
-import { getFormatItems } from "@tiptapify/components/Toolbar/items/format";
-import { getListItems } from "@tiptapify/components/Toolbar/items/list";
-import { getMediaItems } from "@tiptapify/components/Toolbar/items/media";
-import { getMiscItems } from "@tiptapify/components/Toolbar/items/misc";
-import { getStyleItems } from "@tiptapify/components/Toolbar/items/style";
+import { useActionsItems } from "@tiptapify/composables/Toolbar/useActionsItems";
+import { useAlignmentItems } from "@tiptapify/composables/Toolbar/useAlignmentItems";
+import { useFormatExtraItems } from "@tiptapify/composables/Toolbar/useFormatExtraItems";
+import { useFormatItems } from "@tiptapify/composables/Toolbar/useFormatItems";
+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 {
@@ -17,8 +17,8 @@ interface ToolbarItemProps {
 }
 
 export interface ToolbarItem {
-  name: string|number,
-  tooltip: string,
+  name: string|number|ComputedRef<string>,
+  tooltip: string|ComputedRef<string>,
   icon: string|ComputedRef<string>,
   icon2?: string|ComputedRef<string>,
   noI18n?: boolean,
@@ -55,20 +55,20 @@ export function toolbarItems(
   items: { list: Array<string>, exclude: boolean },
   customHeadingLevels: Array<number>
 ): ToolbarItemSections {
-  const styleItems = ref(getStyleItems(editor.value, theme, fontMeasure, customHeadingLevels))
-  const formatItems = ref(getFormatItems(editor.value))
-  const formatExtraItems = ref(getFormatExtraItems(editor.value))
-  const alignmentItems = ref(getAlignmentItems(editor.value))
-  const listItems = ref(getListItems(editor.value))
-  const actionsItems = ref(getActionsItems(editor.value))
-  const miscItems = ref(getMiscItems(editor.value))
-  const mediaItems = ref(getMediaItems(editor.value))
+  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 allMenuItems: ToolbarItemSections = {
     /**
      * todo
      *
-     * media (image, video)
+     * media (video)
      */
     style: { group: true, items: styleItems.value },
     format: { group: true, items: formatItems.value },
@@ -95,7 +95,7 @@ export function toolbarItems(
 
   const toolbarItems: ToolbarItemSections = {}
 
-  const sections = {}
+  const sections: { [key: string]: number } = {}
 
   Object.keys(allMenuItems).forEach(sectionName => {
     const section = allMenuItems[sectionName]

package/src/components/editorExtensions.ts

@@ -25,7 +25,7 @@ import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 
 import { TiptapifyLink } from '@tiptapify/extensions/link'
 import { TiptapifyImage } from '@tiptapify/extensions/image'
-import CodeBlockComponent from '@tiptapify/components/CodeBlockComponent.vue'
+import CodeBlockComponent from '@tiptapify/extensions/components/CodeBlockComponent.vue'
 import { ViewSource } from '@tiptapify/extensions/view-source'
 import { Preview } from '@tiptapify/extensions/preview'
 import SlashCommands from '@tiptapify/extensions/slash-commands'

package/src/{components/Toolbar/items/actions.ts → composables/Toolbar/useActionsItems.ts}

@@ -1,12 +1,15 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useActionsItems(editor: Editor) {
+  const { t } = useI18n();
 
-export function getActionsItems(editor: Editor) {
   return {
     undo: {
       name: 'undo',
-      tooltip: 'action.undo',
+      tooltip: computed(() => t('action.undo')),
       icon: mdi.mdiUndo,
       enabled: true,
       props: {
@@ -18,7 +21,7 @@ export function getActionsItems(editor: Editor) {
     },
     redo: {
       name: 'redo',
-      tooltip: 'action.redo',
+      tooltip: computed(() => t('action.redo')),
       icon: mdi.mdiRedo,
       enabled: true,
       props: {

package/src/{components/Toolbar/items/alignment.ts → composables/Toolbar/useAlignmentItems.ts}

@@ -1,12 +1,15 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useAlignmentItems(editor: Editor) {
+  const { t } = useI18n();
 
-export function getAlignmentItems(editor: Editor) {
   return {
     alignmentLeft: {
-      name: 'alignments.left',
-      tooltip: 'alignments.left',
+      name: computed(() => t('alignments.left')),
+      tooltip: computed(() => t('alignments.left')),
       icon: mdi.mdiFormatAlignLeft,
       enabled: true,
       props: {
@@ -18,8 +21,8 @@ export function getAlignmentItems(editor: Editor) {
       }
     },
     alignmentCenter: {
-      name: 'alignments.center',
-      tooltip: 'alignments.center',
+      name: computed(() => t('alignments.center')),
+      tooltip: computed(() => t('alignments.center')),
       icon: mdi.mdiFormatAlignCenter,
       enabled: true,
       props: {
@@ -31,8 +34,8 @@ export function getAlignmentItems(editor: Editor) {
       }
     },
     alignmentRight: {
-      name: 'alignments.right',
-      tooltip: 'alignments.right',
+      name: computed(() => t('alignments.right')),
+      tooltip: computed(() => t('alignments.right')),
       icon: mdi.mdiFormatAlignRight,
       enabled: true,
       props: {
@@ -44,8 +47,8 @@ export function getAlignmentItems(editor: Editor) {
       }
     },
     alignmentJustify: {
-      name: 'alignments.justify',
-      tooltip: 'alignments.justify',
+      name: computed(() => t('alignments.justify')),
+      tooltip: computed(() => t('alignments.justify')),
       icon: mdi.mdiFormatAlignJustify,
       enabled: true,
       props: {

package/src/{components/Toolbar/items/formatExtra.ts → composables/Toolbar/useFormatExtraItems.ts}

@@ -1,12 +1,15 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useFormatExtraItems(editor: Editor) {
+  const { t } = useI18n();
 
-export function getFormatExtraItems(editor: Editor) {
   return {
     sup: {
       name: 'sup',
-      tooltip: 'format.sup',
+      tooltip: computed(() => t('format.sup')),
       icon: mdi.mdiFormatSuperscript,
       enabled: true,
       props: {
@@ -19,7 +22,7 @@ export function getFormatExtraItems(editor: Editor) {
     },
     sub: {
       name: 'sub',
-      tooltip: 'format.sub',
+      tooltip: computed(() => t('format.sub')),
       icon: mdi.mdiFormatSubscript,
       enabled: true,
       props: {
@@ -32,7 +35,7 @@ export function getFormatExtraItems(editor: Editor) {
     },
     code: {
       name: 'code',
-      tooltip: 'format.code',
+      tooltip: computed(() => t('format.code')),
       icon: mdi.mdiXml,
       enabled: true,
       props: {
@@ -45,7 +48,7 @@ export function getFormatExtraItems(editor: Editor) {
     },
     codeBlock: {
       name: 'codeblock',
-      tooltip: 'format.codeblock',
+      tooltip: computed(() => t('format.codeblock')),
       icon: mdi.mdiCodeBlockTags,
       enabled: true,
       props: {
@@ -58,7 +61,7 @@ export function getFormatExtraItems(editor: Editor) {
     },
     blockquote: {
       name: 'blockquote',
-      tooltip: 'format.blockquote',
+      tooltip: computed(() => t('format.blockquote')),
       icon: mdi.mdiCommentQuote,
       enabled: true,
       props: {

package/src/{components/Toolbar/items/format.ts → composables/Toolbar/useFormatItems.ts}

@@ -1,12 +1,15 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useFormatItems(editor: Editor) {
+  const { t } = useI18n();
 
-export function getFormatItems(editor: Editor) {
   return {
     bold: {
       name: 'bold',
-      tooltip: 'format.bold',
+      tooltip: computed(() => t('format.bold')),
       icon: mdi.mdiFormatBold,
       enabled: true,
       props: {
@@ -19,7 +22,7 @@ export function getFormatItems(editor: Editor) {
     },
     italic: {
       name: 'italic',
-      tooltip: 'format.italic',
+      tooltip: computed(() => t('format.italic')),
       icon: mdi.mdiFormatItalic,
       enabled: true,
       props: {
@@ -32,7 +35,7 @@ export function getFormatItems(editor: Editor) {
     },
     underline: {
       name: 'underline',
-      tooltip: 'format.underline',
+      tooltip: computed(() => t('format.underline')),
       icon: mdi.mdiFormatUnderline,
       enabled: true,
       props: {
@@ -45,7 +48,7 @@ export function getFormatItems(editor: Editor) {
     },
     strike: {
       name: 'strike',
-      tooltip: 'format.strike',
+      tooltip: computed(() => t('format.strike')),
       icon: mdi.mdiFormatStrikethroughVariant,
       enabled: true,
       props: {

package/src/{components/Toolbar/items/list.ts → composables/Toolbar/useListItems.ts}

@@ -1,12 +1,15 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useListItems(editor: Editor) {
+  const { t } = useI18n();
 
-export function getListItems(editor: Editor) {
   return {
     listBullet: {
-      name: 'lists.bullet',
-      tooltip: 'lists.bullet',
+      name: computed(() => t('lists.bullet')),
+      tooltip: computed(() => t('lists.bullet')),
       icon: mdi.mdiFormatListBulleted,
       enabled: true,
       props: {
@@ -17,8 +20,8 @@ export function getListItems(editor: Editor) {
       }
     },
     listNumbered: {
-      name: 'lists.numbered',
-      tooltip: 'lists.numbered',
+      name: computed(() => t('lists.numbered')),
+      tooltip: computed(() => t('lists.numbered')),
       icon: mdi.mdiFormatListNumbered,
       enabled: true,
       props: {
@@ -29,8 +32,8 @@ export function getListItems(editor: Editor) {
       }
     },
     listTask: {
-      name: 'lists.task',
-      tooltip: 'lists.task',
+      name: computed(() => t('lists.task')),
+      tooltip: computed(() => t('lists.task')),
       icon: mdi.mdiFormatListChecks,
       enabled: true,
       props: {
@@ -41,8 +44,8 @@ export function getListItems(editor: Editor) {
       }
     },
     listIndent: {
-      name: 'lists.indent',
-      tooltip: 'lists.indent',
+      name: computed(() => t('lists.indent')),
+      tooltip: computed(() => t('lists.indent')),
       icon: mdi.mdiFormatIndentIncrease,
       enabled: true,
       props: {
@@ -54,8 +57,8 @@ export function getListItems(editor: Editor) {
       }
     },
     listOutdent: {
-      name: 'lists.outdent',
-      tooltip: 'lists.outdent',
+      name: computed(() => t('lists.outdent')),
+      tooltip: computed(() => t('lists.outdent')),
       icon: mdi.mdiFormatIndentDecrease,
       enabled: true,
       props: {