tiptapify 0.0.5 → 0.0.7

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "tiptapify",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "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,16 +1,16 @@
 <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 LinkDialog from "@tiptapify/extensions/components/LinkDialog.vue";
+import { computed, defineProps, inject, Ref, ref } from "vue";
 import { BubbleMenu } from '@tiptap/vue-3/menus'
 import * as mdi from '@mdi/js'
 
 defineProps({
   variant: { type: String, default () { return 'flat' }},
+  theme: { type: String, default () { return 'light' }},
 })
 
-const { editor } = useEditor()
-const editorInstance = ref(editor.getInstance())
+const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const bubbleMenuLinkButton = ref(null)
 
@@ -19,88 +19,105 @@ const items = ref([
     name: 'bold',
     icon: mdi.mdiFormatBold,
     props: {
-      active: false,
-      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: {
-      active: false,
-      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: {
-      active: false,
-      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: {
-      active: false,
-      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: {
-      active: false,
-      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(() => !editor.value.can().chain().focus().toggleCode().run()),
+      color: computed(() => editor.value.isActive('code') ? 'primary' : ''),
+    },
+    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: {
-      active: false,
-      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(),
   },
   {
     name: 'format clear',
     icon: mdi.mdiFormatClear,
-    props: {
-      active: false,
-    },
-    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()
+  return editor.value.isActive('link')
+      ? editor.value.chain().focus().unsetLink().run()
       : bubbleMenuLinkButton.value?.open()
 }
 </script>
 
 <template>
-<!--  <BubbleMenu v-if="editorInstance" :editor="editorInstance" :tippy-options="{ duration: 100 }">-->
-  <BubbleMenu v-if="editorInstance" :editor="editorInstance" :options="{ placement: 'bottom' }">
+  <BubbleMenu
+      v-if="editor"
+      :editor="editor"
+      :options="{ placement: 'bottom' }"
+      :shouldShow="({ editor, view, state, from, to }) => {
+        const docSize = editor.state.doc.content.size
+        const isAllSelected = from === 0 && to === docSize
+
+        return (from !== to) && !isAllSelected
+      }"
+  >
     <div class="bubble-menu">
-      <VBtnToggle divided density="compact" :variant="variant">
-        <VBtn v-for="(item, key) in items" :key="key" v-bind="item.props" @click="item.click" size="small">
-          <VIcon :icon="item.icon" size="16" />
-        </VBtn>
-      </VBtnToggle>
+      <VCard>
+        <VCardText class="pa-0">
+          <VToolbar :theme="theme" density="compact" height="auto" class="p-0">
+            <VToolbarItems>
+              <VBtnGroup divided density="compact">
+                <VBtn v-for="(item, key) in items" :key="key" v-bind="item.props" @click="item.click" size="x-small">
+                  <VIcon :icon="item.icon" size="20" />
+                </VBtn>
+              </VBtnGroup>
+            </VToolbarItems>
+          </VToolbar>
+        </VCardText>
+      </VCard>
     </div>
   </BubbleMenu>
 
@@ -109,10 +126,7 @@ function linkAction() {
 
 <style scoped lang="scss">
 .bubble-menu {
-  border-radius: 4px;
-  border-color: var(--gray-3);
-  border-style: solid;
-  border-width: 1px;
-  box-shadow: var(--shadow);
+  border-radius: 6px;
+  box-shadow: 4px 4px 20px var(--dark-gray);
 }
 </style>

package/src/components/MenuFloating.vue

@@ -1,54 +1,58 @@
 <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'
 
 defineProps({
   variant: { type: String, default () { return '' }},
+  theme: { type: String, default () { return 'light' }},
 })
 
-const { editor } = useEditor()
-const editorInstance = ref(editor.getInstance())
+const editor = inject('tiptapifyEditor') as Ref<Editor>
 </script>
 
 <template>
-<!--  <FloatingMenu v-if="editorInstance" :editor="editorInstance" :tippy-options="{ duration: 100 }" >-->
-  <FloatingMenu v-if="editorInstance" :editor="editorInstance">
+  <FloatingMenu v-if="editor" :editor="editor">
     <div class="floating-menu">
-      <VBtnToggle divided density="compact" :variant="`${variant || 'plain'}`">
-        <VBtn
-            @click="editorInstance.chain().focus().toggleHeading({ level: 1 }).run()"
-            :color="`${editorInstance.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' : ''}`"
-            size="small"
-        >
-          <VIcon :icon="mdi['mdiFormatHeader2']" size="16" />
-        </VBtn>
-        <VBtn
-            @click="editorInstance.chain().focus().toggleBulletList().run()"
-            :color="`${editorInstance.isActive('bulletList') ? 'primary' : ''}`"
-            size="small"
-        >
-          <VIcon :icon="mdi['mdiFormatListBulleted']" size="16" />
-        </VBtn>
-      </VBtnToggle>
+      <VCard>
+        <VCardText class="pa-0">
+          <VToolbar :theme="theme" density="compact" height="auto" class="p-0">
+            <VToolbarItems>
+              <VBtnGroup divided density="compact">
+                <VBtn
+                    @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="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="editor.chain().focus().toggleBulletList().run()"
+                    :color="`${editor.isActive('bulletList') ? 'primary' : ''}`"
+                    size="small"
+                >
+                  <VIcon :icon="mdi['mdiFormatListBulleted']" size="16" />
+                </VBtn>
+              </VBtnGroup>
+            </VToolbarItems>
+          </VToolbar>
+        </VCardText>
+      </VCard>
     </div>
   </FloatingMenu>
 </template>
 
 <style scoped lang="scss">
 .floating-menu {
-  border-radius: 4px;
-  border-color: var(--gray-3);
-  border-style: solid;
-  border-width: 1px;
-  box-shadow: var(--shadow);
+  border-radius: 6px;
+  box-shadow: 4px 4px 20px var(--dark-gray);
 }
 </style>

package/src/components/Tiptapify.vue

@@ -1,17 +1,19 @@
 <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 'flat' } },
+  variant: { type: String, default () { return 'elevated' } },
   toolbar: { type: Boolean, default () { return true } },
   items: { type: Array<string>, default() { return [] }},
   itemsExclude: { type: Boolean, default() { return false } },
@@ -22,39 +24,59 @@ const props = defineProps({
   showCharacterCount: { type: Boolean, default () { return true } },
   defaultFontFamily: { type: String, default () { return 'Inter' } },
   fontMeasure: { type: String, default () { return 'px' } },
+  rounded: { type: String, default () { return '0' } },
 })
 
-const editor = useEditor(props.content, props.placeholder, props.slashCommands).editor
-const editorInstance = ref(editor.getInstance())
-editorInstance?.value?.chain().setFontFamily(props.defaultFontFamily).run()
+const theme = ref(useTheme().current.value.dark ? 'dark' : 'light')
+
+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>
   <VContainer>
     <VRow>
       <VCol>
-        <div class="border rounded">
-          <template v-if="toolbar">
-            <Toolbar
-                v-if="editorInstance"
-                :variant="variant"
-                :font-measure="fontMeasure"
-                :items="items"
-                :items-exclude="itemsExclude"
-            />
-          </template>
-
+        <template v-if="toolbar">
+          <Toolbar
+              v-if="editor"
+              :variant="variant"
+              :font-measure="fontMeasure"
+              :items="items"
+              :items-exclude="itemsExclude"
+              :rounded="rounded"
+          />
+        </template>
+
+        <div :class="`border border-t-0 rounded-b-${rounded}`">
           <div class="pa-2 tiptapify-container">
-            <MenuFloating v-if="floatingMenu" />
+            <MenuFloating v-if="floatingMenu" :variant="variant" :theme="theme" />
 
-            <MenuBubble v-if="bubbleMenu" />
+            <MenuBubble v-if="bubbleMenu" :variant="variant" :theme="theme" />
 
-            <EditorContent :editor="editorInstance" class="tiptapify-editor" />
+            <EditorContent :editor="editor" class="tiptapify-editor" />
           </div>
 
           <template v-if="showCharacterCount">
@@ -77,6 +99,8 @@ onBeforeUnmount(() => {
   --white: #FFF;
   --black: #2E2B29;
   --black-contrast: #110F0E;
+  --dark-gray: rgb(98, 98, 98);
+  --gray: rgb(223 223 223);
   --gray-1: rgba(61, 37, 20, .05);
   --gray-2: rgba(61, 37, 20, .08);
   --gray-3: rgba(61, 37, 20, .12);
@@ -135,6 +159,36 @@ onBeforeUnmount(() => {
     }
   }
 
+  /* Task list specific styles */
+  ul[data-type='taskList'] {
+    list-style: none;
+    margin-left: 0;
+    padding: 0;
+
+    li {
+      align-items: flex-start;
+      display: flex;
+
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+
+    input[type='checkbox'] {
+      cursor: pointer;
+    }
+
+    ul[data-type='taskList'] {
+      margin: 0;
+    }
+  }
+
   /* Heading styles */
   h1,
   h2,
@@ -260,5 +314,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

@@ -0,0 +1,43 @@
+<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 '' }},
+  toolbarSection: { type: Object as PropType<ToolbarItemSection>, default() { return {} }}
+})
+
+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">
+        <GroupDropdown :toolbar-item="toolbarItem" :variant="variant" />
+      </template>
+
+      <VBtn v-else v-bind="toolbarItem.props" v-on="toolbarItem.attrs" 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>
+  </VBtnGroup>
+</template>
+
+<style lang="scss" scoped>
+
+</style>