tiptapify 0.0.6 → 0.0.8

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "tiptapify",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
       "import": {
-        "default": "./dist/tiptapify.es.js",
+        "default": "./dist/tiptapify.mjs",
         "development": "./src/index.ts"
       },
       "require": {
@@ -18,7 +18,7 @@
     "./style.css": "./dist/tiptapify.css"
   },
   "main": "./dist/tiptapify.umd.cjs",
-  "module": "./dist/tiptapify.js",
+  "module": "./dist/tiptapify.mjs",
   "source": "./src/index.ts",
   "files": [
     "dist",
@@ -49,7 +49,7 @@
   "author": "Igor Voytovich",
   "license": "MIT",
   "repository": "https://github.com/IVoyt/tiptapify",
-  "packageManager": "pnpm@10.11.0",
+  "packageManager": "pnpm@10.11.1",
   "dependencies": {
     "@tiptap/core": "next",
     "@tiptap/extension-blockquote": "next",
@@ -92,7 +92,7 @@
     "highlight.js": "^11.11.1",
     "linkifyjs": "^4.3.1",
     "lowlight": "^3.3.0",
-    "vue-i18n": "^11.1.4"
+    "vue-i18n": "^11.1.5"
   },
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
@@ -102,13 +102,13 @@
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@rollup/plugin-alias": "^5.1.1",
-    "@types/node": "^22.15.21",
+    "@types/node": "^22.15.30",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitejs/plugin-vue-jsx": "^4.2.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
-    "sass-embedded": "^1.89.0",
+    "sass-embedded": "^1.89.1",
     "typescript": "^5.8.3",
-    "unplugin-vue-components": "^28.5.0",
+    "unplugin-vue-components": "^28.7.0",
     "vite": "^6.3.5",
     "vite-plugin-vuetify": "^2.1.1",
     "vite-svg-loader": "^5.1.0",

package/src/components/Footer.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { useEditor } from "@tiptapify/composable/useEditor";
-import { ref } from 'vue'
+import { Editor } from "@tiptap/vue-3";
+import { inject, Ref } from "vue";
 
-const { editor } = useEditor()
-const editorInstance = ref(editor.getInstance())
+const editor = inject('tiptapifyEditor') as Ref<Editor>
 </script>
 
 <template>
-  <div v-if="editorInstance" class="tiptapify-footer">
+  <div v-if="editor" class="tiptapify-footer">
     <VRow>
       <VCol class="d-flex justify-end">
         <span class="words-count">
-          {{ editorInstance.storage.characterCount.words() }} words
+          {{ editor.storage.characterCount.words() }} words
         </span>
       </VCol>
     </VRow>

package/src/components/MenuBubble.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import LinkDialog from "@tiptapify/components/extensions/components/LinkDialog.vue";
-import { useEditor } from "@tiptapify/composable/useEditor";
-import { computed, defineProps, ref } from "vue";
+import { Editor } from "@tiptap/vue-3";
+import { computed, defineProps, inject, Ref, ref } from "vue";
 import { BubbleMenu } from '@tiptap/vue-3/menus'
 import * as mdi from '@mdi/js'
 
@@ -10,91 +9,96 @@ defineProps({
   theme: { type: String, default () { return 'light' }},
 })
 
-const { editor } = useEditor()
-const editorInstance = ref(editor.getInstance())
-
-const bubbleMenuLinkButton = ref(null)
+const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const items = ref([
   {
     name: 'bold',
     icon: mdi.mdiFormatBold,
     props: {
-      disabled: computed(() => !editorInstance.value.can().chain().focus().toggleBold().run()),
-      color: computed(() => editorInstance.value.isActive('bold') ? 'primary' : ''),
+      disabled: computed(() => !editor?.value.can().chain().focus().toggleBold().run()),
+      color: computed(() => editor.value.isActive('bold') ? 'primary' : ''),
     },
-    click: () => editorInstance.value.chain().focus().toggleBold().run(),
+    click: () => editor.value.chain().focus().toggleBold().run(),
   },
   {
     name: 'italic',
     icon: mdi.mdiFormatItalic,
     props: {
-      disabled: computed(() => !editorInstance.value.can().chain().focus().toggleItalic().run()),
-      color: computed(() => editorInstance.value.isActive('italic') ? 'primary' : ''),
+      disabled: computed(() => !editor.value.can().chain().focus().toggleItalic().run()),
+      color: computed(() => editor.value.isActive('italic') ? 'primary' : ''),
     },
-    click: () => editorInstance.value.chain().focus().toggleItalic().run(),
+    click: () => editor.value.chain().focus().toggleItalic().run(),
   },
   {
     name: 'strike',
     icon: mdi.mdiFormatStrikethroughVariant,
     props: {
-      disabled: computed(() => !editorInstance.value.can().chain().focus().toggleStrike().run()),
-      color: computed(() => editorInstance.value.isActive('strike') ? 'primary' : ''),
+      disabled: computed(() => !editor.value.can().chain().focus().toggleStrike().run()),
+      color: computed(() => editor.value.isActive('strike') ? 'primary' : ''),
     },
-    click: () => editorInstance.value.chain().focus().toggleStrike().run(),
+    click: () => editor.value.chain().focus().toggleStrike().run(),
   },
   {
     name: 'underline',
     icon: mdi.mdiFormatUnderline,
     props: {
-      disabled: computed(() => !editorInstance.value.can().chain().focus().toggleUnderline().run()),
-      color: computed(() => editorInstance.value.isActive('underline') ? 'primary' : ''),
+      disabled: computed(() => !editor.value.can().chain().focus().toggleUnderline().run()),
+      color: computed(() => editor.value.isActive('underline') ? 'primary' : ''),
     },
-    click: () => editorInstance.value.chain().focus().toggleUnderline().run(),
+    click: () => editor.value.chain().focus().toggleUnderline().run(),
   },
   {
     name: 'highlight',
     icon: mdi.mdiFormatColorHighlight,
     props: {
-      disabled: computed(() => !editorInstance.value.can().chain().focus().toggleHighlight().run()),
-      color: computed(() => editorInstance.value.isActive('highlight') ? 'primary' : ''),
+      disabled: computed(() => !editor.value.can().chain().focus().toggleHighlight().run()),
+      color: computed(() => editor.value.isActive('highlight') ? 'primary' : ''),
     },
-    click: () => editorInstance.value.chain().focus().toggleHighlight().run(),
+    click: () => editor.value.chain().focus().toggleHighlight().run(),
   },
   {
     name: 'code',
     icon: mdi.mdiXml,
     props: {
-      disabled: computed(() => !editorInstance.value.can().chain().focus().toggleCode().run()),
-      color: computed(() => editorInstance.value.isActive('code') ? 'primary' : ''),
+      disabled: computed(() => !editor.value.can().chain().focus().toggleCode().run()),
+      color: computed(() => editor.value.isActive('code') ? 'primary' : ''),
     },
-    click: () => editorInstance.value.chain().focus().toggleCode().run(),
+    click: () => editor.value.chain().focus().toggleCode().run(),
   },
   {
     name: 'link',
-    icon: computed(() => editorInstance.value.isActive('link') ? mdi.mdiLinkOff : mdi.mdiLink),
+    icon: computed(() => editor.value.isActive('link') ? mdi.mdiLinkOff : mdi.mdiLink),
     props: {
-      color: computed(() => editorInstance.value.isActive('link') ? 'primary' : ''),
-      disabled: computed(() => editorInstance.value.isActive('code') || editorInstance.value.isActive('codeBlock')),
+      color: computed(() => editor.value.isActive('link') ? 'primary' : ''),
+      disabled: computed(() => editor.value.isActive('code') || editor.value.isActive('codeBlock')),
     },
-    click: () => linkAction(),
+    click: () => editor.value.commands.showLink()
   },
   {
     name: 'format clear',
     icon: mdi.mdiFormatClear,
-    click: () => editorInstance.value.chain().focus().unsetAllMarks().clearNodes().run(),
+    click: () => editor.value.chain().focus().unsetAllMarks().clearNodes().run(),
   }
 ])
-
-function linkAction() {
-  return editorInstance.value.isActive('link')
-      ? editorInstance.value.chain().focus().unsetLink().run()
-      : bubbleMenuLinkButton.value?.open()
-}
 </script>
 
 <template>
-  <BubbleMenu v-if="editorInstance" :editor="editorInstance" :options="{ placement: 'bottom' }">
+  <BubbleMenu
+      v-if="editor"
+      :editor="editor"
+      :options="{ placement: 'bottom' }"
+      :shouldShow="({ editor, view, state, from, to }) => {
+        if (editor.isActive('image') || editor.isActive('code') || editor.isActive('codeBlock')) {
+          return false
+        }
+
+        const docSize = editor.state.doc.content.size
+        const isAllSelected = from === 0 && to === docSize
+
+        return (from !== to) && !isAllSelected
+      }"
+  >
     <div class="bubble-menu">
       <VCard>
         <VCardText class="pa-0">
@@ -111,8 +115,6 @@ function linkAction() {
       </VCard>
     </div>
   </BubbleMenu>
-
-  <LinkDialog ref="bubbleMenuLinkButton" />
 </template>
 
 <style scoped lang="scss">

package/src/components/MenuFloating.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useEditor } from "@tiptapify/composable/useEditor";
-import { defineProps, ref } from "vue";
+import { Editor } from "@tiptap/vue-3";
+import { defineProps, inject, Ref } from "vue";
 import { FloatingMenu } from '@tiptap/vue-3/menus'
 import * as mdi from '@mdi/js'
 
@@ -9,11 +9,11 @@ defineProps({
   theme: { type: String, default () { return 'light' }},
 })
 
-const editorInstance = ref(useEditor().editor.getInstance())
+const editor = inject('tiptapifyEditor') as Ref<Editor>
 </script>
 
 <template>
-  <FloatingMenu v-if="editorInstance" :editor="editorInstance">
+  <FloatingMenu v-if="editor" :editor="editor">
     <div class="floating-menu">
       <VCard>
         <VCardText class="pa-0">
@@ -21,22 +21,22 @@ const editorInstance = ref(useEditor().editor.getInstance())
             <VToolbarItems>
               <VBtnGroup divided density="compact">
                 <VBtn
-                    @click="editorInstance.chain().focus().toggleHeading({ level: 1 }).run()"
-                    :color="`${editorInstance.isActive('heading', { level: 1 }) ? 'primary' : ''}`"
+                    @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+                    :color="`${editor.isActive('heading', { level: 1 }) ? 'primary' : ''}`"
                     size="small"
                 >
                   <VIcon :icon="mdi['mdiFormatHeader1']" size="16" />
                 </VBtn>
                 <VBtn
-                    @click="editorInstance.chain().focus().toggleHeading({ level: 2 }).run()"
-                    :color="`${editorInstance.isActive('heading', { level: 2 }) ? 'primary' : ''}`"
+                    @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+                    :color="`${editor.isActive('heading', { level: 2 }) ? 'primary' : ''}`"
                     size="small"
                 >
                   <VIcon :icon="mdi['mdiFormatHeader2']" size="16" />
                 </VBtn>
                 <VBtn
-                    @click="editorInstance.chain().focus().toggleBulletList().run()"
-                    :color="`${editorInstance.isActive('bulletList') ? 'primary' : ''}`"
+                    @click="editor.chain().focus().toggleBulletList().run()"
+                    :color="`${editor.isActive('bulletList') ? 'primary' : ''}`"
                     size="small"
                 >
                   <VIcon :icon="mdi['mdiFormatListBulleted']" size="16" />

package/src/components/Tiptapify.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
 
-import { onBeforeUnmount, ref } from "vue";
+import { onBeforeUnmount, provide, ref, ShallowRef, shallowRef, watch } from "vue";
 import { default as Toolbar } from "@tiptapify/components/Toolbar/Index.vue";
-import { EditorContent } from '@tiptap/vue-3'
-import { useEditor } from '@tiptapify/composable/useEditor'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 
+import { getTiptapEditor } from "@tiptapify/components/index";
+
 import Footer from '@tiptapify/components/Footer.vue'
 import { useTheme } from "vuetify/framework";
 
 const props = defineProps({
   content: String|Object,
-  variant: { type: String, default () { return 'elevated' } },
+  variantBtn: { type: String, default () { return 'elevated' } },
+  variantField: { type: String, default () { return 'solo' } },
   toolbar: { type: Boolean, default () { return true } },
   items: { type: Array<string>, default() { return [] }},
   itemsExclude: { type: Boolean, default() { return false } },
@@ -28,14 +30,30 @@ const props = defineProps({
 
 const theme = ref(useTheme().current.value.dark ? 'dark' : 'light')
 
-const editor = useEditor(props.content, props.placeholder, props.slashCommands).editor
-const editorInstance = ref(editor.getInstance())
-editorInstance?.value?.chain().setFontFamily(props.defaultFontFamily).run()
+const editor: ShallowRef<Editor | undefined> = shallowRef(
+    getTiptapEditor(props.content, props.placeholder, props.slashCommands)
+)
+
+const emit = defineEmits(['update:modelValue', 'editor-ready']);
+
+provide('tiptapifyEditor', editor)
+
+editor.value?.chain().setFontFamily(props.defaultFontFamily).run()
+
+defineExpose({ editor: editor });
+
+watch(() => editor.value, (editorInstance) => {
+  if (editorInstance instanceof Editor) {
+    emit('editor-ready', {
+      getHTML: () => editorInstance.getHTML(),
+      getJSON: () => editorInstance.getJSON(),
+    });
+  }
+}, { immediate: true });
 
 onBeforeUnmount(() => {
-  editor.destroy()
+  editor.value?.destroy()
 })
-
 </script>
 
 <template>
@@ -44,8 +62,9 @@ onBeforeUnmount(() => {
       <VCol>
         <template v-if="toolbar">
           <Toolbar
-              v-if="editorInstance"
-              :variant="variant"
+              v-if="editor"
+              :variant-btn="variantBtn"
+              :variant-field="variantField"
               :font-measure="fontMeasure"
               :items="items"
               :items-exclude="itemsExclude"
@@ -55,11 +74,11 @@ onBeforeUnmount(() => {
 
         <div :class="`border border-t-0 rounded-b-${rounded}`">
           <div class="pa-2 tiptapify-container">
-            <MenuFloating v-if="floatingMenu" :variant="variant" :theme="theme" />
+            <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="theme" />
 
-            <MenuBubble v-if="bubbleMenu" :variant="variant" :theme="theme" />
+            <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="theme" />
 
-            <EditorContent :editor="editorInstance" class="tiptapify-editor" />
+            <EditorContent :editor="editor" class="tiptapify-editor" />
           </div>
 
           <template v-if="showCharacterCount">
@@ -297,5 +316,67 @@ onBeforeUnmount(() => {
     border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
+
+  /* Table-specific styling */
+  table {
+    border-collapse: collapse;
+    margin: 0;
+    overflow: hidden;
+    table-layout: fixed;
+    width: 100%;
+
+    td,
+    th {
+      border: 1px solid var(--gray-3);
+      box-sizing: border-box;
+      min-width: 1em;
+      padding: 6px 8px;
+      position: relative;
+      vertical-align: top;
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    th {
+      background-color: var(--gray-1);
+      font-weight: bold;
+      text-align: left;
+    }
+
+    .selectedCell:after {
+      background: var(--gray-2);
+      content: '';
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      pointer-events: none;
+      position: absolute;
+      z-index: 2;
+    }
+
+    .column-resize-handle {
+      background-color: var(--purple);
+      bottom: -2px;
+      pointer-events: none;
+      position: absolute;
+      right: -2px;
+      top: 0;
+      width: 4px;
+    }
+  }
+
+  .tableWrapper {
+    margin: 1.5rem 0;
+    overflow-x: auto;
+  }
+
+  &.resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
+
 }
 </style>

package/src/components/Toolbar/Group.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import GroupDropdown from "@tiptapify/components/Toolbar/GroupDropdown.vue";
 import { defineProps, PropType } from 'vue'
 import { useI18n } from "vue-i18n";
 
 import { ToolbarItemSection } from "@tiptapify/components/Toolbar/items";
 
+import helpers from "@tiptapify/utils/helpers";
+
 defineProps({
   variant: { type: String, default () { return 'flat' }},
   section: { type: String, default() { return '' }},
@@ -12,61 +15,23 @@ defineProps({
 
 const { t } = useI18n();
 
+const { ucFirst } = helpers;
+
 </script>
 
 <template>
   <VBtnGroup :variant="variant" elevation="4">
     <template v-for="(toolbarItem, toolbarItemKey) in toolbarSection.items" :key="toolbarItemKey">
       <template v-if="toolbarItem.children">
-        <VMenu>
-          <template #activator="{ props: menuProps }">
-            <VBtn v-bind="{ ...menuProps, ...toolbarItem.props }" size="32">
-              <VTooltip :text="t(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>
-            </VBtn>
-          </template>
-
-          <VList v-model="toolbarItem.modelValue" max-height="430px">
-            <VListItem
-                v-for="(item, menuItemKey) in toolbarItem.children"
-                :key="menuItemKey"
-                :value="item.name"
-                density="compact"
-                class="pa-0"
-            >
-              <VBtn
-                  variant="flat"
-                  rounded="0"
-                  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" />
-                <span v-else class="menu-item-title">
-                  <template v-if="item.noI18n">
-                    {{ item.name }}
-                  </template>
-                  <template v-else>
-                    {{ t(item.toggle) }}
-                  </template>
-                </span>
-              </VBtn>
-            </VListItem>
-          </VList>
-        </VMenu>
+        <GroupDropdown :toolbar-item="toolbarItem" :variant="variant" />
       </template>
 
       <VBtn v-else v-bind="toolbarItem.props" v-on="toolbarItem.attrs" size="32">
-        <VTooltip :text="t(toolbarItem.tooltip)" location="top" activator="parent" />
+        <VTooltip :text="ucFirst(t(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) }}
+          {{ ucFirst(t(toolbarItem.name)) }}
         </span>
       </VBtn>
     </template>

package/src/components/Toolbar/GroupDropdown.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { defineProps, PropType } from 'vue'
+import { useI18n } from "vue-i18n";
+
+import helpers from "@tiptapify/utils/helpers";
+
+import { ToolbarItem } from "@tiptapify/components/Toolbar/items";
+
+const { ucFirst } = helpers;
+
+defineProps({
+  variant: { type: String, default () { return 'flat' }},
+  nested: { type: Boolean, default () { return false }},
+  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="ucFirst(t(toolbarItem.tooltip))" location="top" activator="parent" />
+
+        <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="small" />
+        <span v-else class="menu-item-title">
+          {{ ucFirst(t(toolbarItem.name)) }}
+        </span>
+      </VBtn>
+    </template>
+
+    <VList v-model="toolbarItem.modelValue" max-height="430px">
+      <VListItem
+          v-for="(item, menuItemKey) in toolbarItem.children"
+          :key="menuItemKey"
+          :value="item.name"
+          density="compact"
+          class="pa-0"
+      >
+        <VBtn
+            variant="text"
+            block
+            class="justify-start"
+            rounded="0"
+            v-bind="item.props ?? {}"
+            v-on="item?.attrs ?? {}"
+        >
+          <VTooltip v-if="item.tooltip" :text="ucFirst(t(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>
+              {{ ucFirst(t(item.toggle)) }}
+            </template>
+          </span>
+
+          <VMenu
+              v-if="item.component"
+              v-bind="item.props"
+          >
+            <VList>
+              <VListItem density="compact">
+                <component :is="item.component" @close="toolbarItem.modelValue = false" />
+              </VListItem>
+            </VList>
+          </VMenu>
+
+          <template v-if="item.children?.length">
+            <GroupDropdown :toolbar-item="item" variant="outline" :nested="true" />
+          </template>
+        </VBtn>
+      </VListItem>
+    </VList>
+  </VMenu>
+</template>
+
+<style lang="scss" scoped>
+
+</style>