tiptapify 0.0.8 → 0.0.9

package/index.d.ts

@@ -0,0 +1,49 @@
+import { Editor } from "@tiptap/vue-3";
+import type { DefineComponent } from 'vue'
+import { extensionsComponents } from "./src/types/overridable-extensions";
+
+export interface TiptapifyProps {
+  content: string|object
+  variantBtn: string
+  variantField: string
+  toolbar: boolean
+  items: [string]
+  itemsExclude: boolean
+  bubbleMenu: boolean
+  floatingMenu: boolean
+  slashCommands: boolean
+  placeholder: string
+  showWordsCount: boolean
+  showCharactersCount: boolean
+  defaultFontFamily: string
+  fontMeasure: string
+  rounded: string
+  overrideExtensionsComponents: extensionsComponents
+}
+
+export interface TiptapifyEmits {
+  'editor-ready': (options: {
+    getHTML: () => string
+    getJSON: () => any
+    editor: Editor
+  }) => void
+}
+
+export declare const Tiptapify: DefineComponent<TiptapifyProps, {}, {}, {}, {}, {}, {}, TiptapifyEmits>
+
+// Плагин
+export interface TiptapifyOptions {
+  locale?: string
+}
+
+declare const TiptapifyPlugin: {
+  install: (app: any, options?: TiptapifyOptions) => void
+}
+
+export default TiptapifyPlugin
+
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    Tiptapify: typeof Tiptapify
+  }
+}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "tiptapify",
-  "version": "0.0.8",
+  "types": "./index.d.ts",
+  "version": "0.0.9",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -22,7 +23,8 @@
   "source": "./src/index.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "index.d.ts"
   ],
   "scripts": {
     "dev": "vite",
@@ -49,7 +51,7 @@
   "author": "Igor Voytovich",
   "license": "MIT",
   "repository": "https://github.com/IVoyt/tiptapify",
-  "packageManager": "pnpm@10.11.1",
+  "packageManager": "pnpm@10.12.1",
   "dependencies": {
     "@tiptap/core": "next",
     "@tiptap/extension-blockquote": "next",
@@ -92,7 +94,7 @@
     "highlight.js": "^11.11.1",
     "linkifyjs": "^4.3.1",
     "lowlight": "^3.3.0",
-    "vue-i18n": "^11.1.5"
+    "vue-i18n": "^11.1.6"
   },
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
@@ -102,11 +104,11 @@
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@rollup/plugin-alias": "^5.1.1",
-    "@types/node": "^22.15.30",
+    "@types/node": "^22.15.32",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitejs/plugin-vue-jsx": "^4.2.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
-    "sass-embedded": "^1.89.1",
+    "sass-embedded": "^1.89.2",
     "typescript": "^5.8.3",
     "unplugin-vue-components": "^28.7.0",
     "vite": "^6.3.5",

package/src/components/Footer.vue

@@ -1,17 +1,51 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
-import { inject, Ref } from "vue";
+import { computed, inject, ref, Ref } from "vue";
+
+import { useI18n } from "vue-i18n";
+
+const props = defineProps({
+  showWordsCount: { type: Boolean, default: true },
+  showCharactersCount: { type: Boolean, default: true },
+})
+
+const { t } = useI18n()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const statusItems = ref([
+  {
+    enabled: computed(() => props.showWordsCount),
+    text: 'footer.words',
+    value: computed(() => editor.value.storage.characterCount.words())
+  },
+  {
+    enabled: computed(() => props.showCharactersCount),
+    text: 'footer.chars',
+    value: computed(() => editor.value.storage.characterCount.characters())
+  }
+])
+
+function printStatusItemText(text: string): string {
+  return t(text)
+}
+
+function showFooter() {
+  return editor.value && (props.showWordsCount || props.showCharactersCount)
+}
 </script>
 
 <template>
-  <div v-if="editor" class="tiptapify-footer">
+  <div v-if="showFooter()" class="tiptapify-footer">
     <VRow>
       <VCol class="d-flex justify-end">
-        <span class="words-count">
-          {{ editor.storage.characterCount.words() }} words
-        </span>
+        <template v-for="statusItem in statusItems" :key="statusItem.text">
+          <span v-if="statusItem.enabled" class="tiptapify-footer--status-item">
+            {{ printStatusItemText(statusItem.text) }}: {{ statusItem.value }}
+          </span>
+
+          <VDivider class="tiptapify-footer--divider" vertical />
+        </template>
       </VCol>
     </VRow>
   </div>
@@ -23,7 +57,15 @@ const editor = inject('tiptapifyEditor') as Ref<Editor>
   border-top: var(--border);
 }
 
-.words-count {
+.tiptapify-footer--status-item {
   color: #999;
 }
+
+.tiptapify-footer--divider:not(:last-child) {
+  margin: 0 8px;
+}
+
+.tiptapify-footer--divider:last-child {
+  display: none;
+}
 </style>

package/src/components/Tiptapify.vue

@@ -1,16 +1,21 @@
 <script setup lang="ts">
 
-import { onBeforeUnmount, provide, ref, ShallowRef, shallowRef, watch } from "vue";
+import { extensionsComponents } from "@tiptapify/types/overridable-extensions";
+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'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 
+import { useI18n } from "vue-i18n";
+
 import { getTiptapEditor } from "@tiptapify/components/index";
 
 import Footer from '@tiptapify/components/Footer.vue'
 import { useTheme } from "vuetify/framework";
 
+const { t } = useI18n();
+
 const props = defineProps({
   content: String|Object,
   variantBtn: { type: String, default () { return 'elevated' } },
@@ -21,17 +26,24 @@ const props = defineProps({
   bubbleMenu: { type: Boolean, default () { return true } },
   floatingMenu: { type: Boolean, default () { return true } },
   slashCommands: { type: Boolean, default () { return true } },
-  placeholder: { type: String, default () { return 'Write something here...' } },
-  showCharacterCount: { type: Boolean, default () { return true } },
+  placeholder: { type: String, default () { return '' } },
+  showWordsCount: { type: Boolean, default () { return true } },
+  showCharactersCount: { type: Boolean, default () { return true } },
   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 {} } },
 })
 
-const theme = ref(useTheme().current.value.dark ? 'dark' : 'light')
+// console.log('override extension components', computed(() => props.overrideExtensionsComponents).value)
 
-const editor: ShallowRef<Editor | undefined> = shallowRef(
-    getTiptapEditor(props.content, props.placeholder, props.slashCommands)
+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
 )
 
 const emit = defineEmits(['update:modelValue', 'editor-ready']);
@@ -40,11 +52,10 @@ provide('tiptapifyEditor', editor)
 
 editor.value?.chain().setFontFamily(props.defaultFontFamily).run()
 
-defineExpose({ editor: editor });
-
 watch(() => editor.value, (editorInstance) => {
   if (editorInstance instanceof Editor) {
     emit('editor-ready', {
+      editor: editorInstance,
       getHTML: () => editorInstance.getHTML(),
       getJSON: () => editorInstance.getJSON(),
     });
@@ -69,21 +80,21 @@ onBeforeUnmount(() => {
               :items="items"
               :items-exclude="itemsExclude"
               :rounded="rounded"
+              :override-extensions-components="overrideExtensionsComponents"
+              :theme="currentTheme"
           />
         </template>
 
         <div :class="`border border-t-0 rounded-b-${rounded}`">
           <div class="pa-2 tiptapify-container">
-            <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="theme" />
+            <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="currentTheme" />
 
-            <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="theme" />
+            <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
 
             <EditorContent :editor="editor" class="tiptapify-editor" />
           </div>
 
-          <template v-if="showCharacterCount">
-            <Footer />
-          </template>
+          <Footer :show-words-count="showWordsCount" :show-characters-count="showCharactersCount" />
         </div>
       </VCol>
     </VRow>
@@ -135,7 +146,6 @@ onBeforeUnmount(() => {
     background-repeat: no-repeat;
     background-position: right .1rem center;
     background-size: 1.25rem 1.25rem;
-    /* padding-right: 1.25rem; */
 
     border-radius: .5rem;
     border: none;
@@ -150,8 +160,7 @@ onBeforeUnmount(() => {
   }
 
   /* List styles */
-  ul,
-  ol {
+  ul, ol {
     padding: 0 1rem;
     margin: 1.25rem 1rem 1.25rem 0.4rem;
 
@@ -192,19 +201,13 @@ onBeforeUnmount(() => {
   }
 
   /* Heading styles */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  h1, h2, h3, h4, h5, h6 {
     line-height: 1.1;
     margin-top: 2.5rem;
     text-wrap: pretty;
   }
 
-  h1,
-  h2 {
+  h1, h2 {
     margin-top: 3.5rem;
     margin-bottom: 1.5rem;
   }
@@ -221,9 +224,7 @@ onBeforeUnmount(() => {
     font-size: 1.1rem;
   }
 
-  h4,
-  h5,
-  h6 {
+  h4, h5, h6 {
     font-size: 1rem;
   }
 
@@ -325,8 +326,7 @@ onBeforeUnmount(() => {
     table-layout: fixed;
     width: 100%;
 
-    td,
-    th {
+    td, th {
       border: 1px solid var(--gray-3);
       box-sizing: border-box;
       min-width: 1em;
@@ -368,6 +368,14 @@ onBeforeUnmount(() => {
     }
   }
 
+  p.is-editor-empty:first-child::before {
+    color: var(--gray-4);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+
   .tableWrapper {
     margin: 1.5rem 0;
     overflow-x: auto;

package/src/components/Toolbar/Group.vue

@@ -1,22 +1,16 @@
 <script setup lang="ts">
+import GroupBtn from "@tiptapify/components/Toolbar/GroupBtn.vue";
 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>
@@ -26,14 +20,19 @@ const { ucFirst } = helpers;
         <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" />
+      <VMenu v-else-if="toolbarItem?.component" v-model="toolbarItem.modelValue" :close-on-content-click="false">
+        <template #activator="{ props: menuProps }">
+          <GroupBtn v-bind="menuProps" :toolbar-item="toolbarItem" :variant="variant" />
+        </template>
+
+        <component
+            :is="toolbarItem.component"
+            v-bind="toolbarItem?.componentProps ?? {}"
+            @close="toolbarItem.modelValue = false"
+        />
+      </VMenu>
 
-        <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="small" />
-        <span v-else class="menu-item-title">
-          {{ ucFirst(t(toolbarItem.name)) }}
-        </span>
-      </VBtn>
+      <GroupBtn v-else :toolbar-item="toolbarItem" :variant="variant" />
     </template>
   </VBtnGroup>
 </template>

package/src/components/Toolbar/GroupBtn.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { defineProps, PropType } from 'vue'
+import { useI18n } from "vue-i18n";
+
+import { ToolbarItem } from "@tiptapify/components/Toolbar/items";
+
+import helpers from "@tiptapify/utils/helpers";
+
+defineProps({
+  variant: { type: String, default () { return 'flat' }},
+  toolbarItem: { type: Object as PropType<ToolbarItem>, default() { return {} }}
+})
+
+const { t } = useI18n();
+
+const { ucFirst } = helpers;
+</script>
+
+<template>
+  <VBtn 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>
+
+    <VIcon v-if="toolbarItem.icon2" v-bind="toolbarItem?.icon2Props ?? {}" :icon="toolbarItem.icon2" size="small" style="position: absolute;" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/components/Toolbar/Index.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
-import ImageDialog from "@tiptapify/extensions/components/ImageDialog.vue";
-import LinkDialog from "@tiptapify/extensions/components/LinkDialog.vue";
-import ShowSourceDialog from "@tiptapify/extensions/components/ShowSourceDialog.vue";
-import PreviewDialog from "@tiptapify/extensions/components/PreviewDialog.vue";
-import Group from "@tiptapify/components/Toolbar/Group.vue";
-import Toggle from "@tiptapify/components/Toolbar/Toggle.vue";
-import { computed, defineProps, inject, Ref, ref } from 'vue'
-import { useI18n } from "vue-i18n";
+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 { toolbarItems, ToolbarItemSections } from "@tiptapify/components/Toolbar/items";
+import { toolbarItems } from "@tiptapify/components/Toolbar/items";
+import { useTheme } from "vuetify/framework";
 
 const props = defineProps({
   variantBtn: { type: String, default () { return 'elevated' }},
@@ -22,95 +19,47 @@ const props = defineProps({
   customFontsOverride: { type: Boolean, default() { return false } },
   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 {} } },
 })
 
-const { t } = useI18n();
-
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
+const theme = useTheme()
+
 const items = toolbarItems(
     editor,
+    theme,
     computed(() => props.fontMeasure).value,
     { list: computed(() => props.items).value, exclude: computed(() => props.itemsExclude).value },
     computed(() => props.headingLevels).value
 )
-const toolbarItemsRef: Ref<ToolbarItemSections> = ref(items)
+
+const defaultComponents: extensionsComponents = getDefaultComponents(props.variantField)
+
+const extensions: ShallowRef<extensionsComponents> = shallowRef({})
+Object.keys(defaultComponents).forEach(extension => {
+  extensions.value[extension] = props.overrideExtensionsComponents[extension] ?? defaultComponents[extension]
+})
 
 </script>
 
 <template>
   <div v-if="editor">
-    <VToolbar elevation="1" :theme="theme" height="auto" :class="`ps-1 rounded-t-${rounded}`">
-      <VToolbarItems class="py-2">
-        <template v-for="(toolbarSection, sectionKey) in toolbarItemsRef" :key="sectionKey">
-          <Group v-if="toolbarSection.group" :variant="variantBtn" :toolbar-section="toolbarSection" />
-
-          <Toggle v-else-if="toolbarSection.toggle" :variant="variantBtn" :toolbar-section="toolbarSection" />
-
-          <VBtn
-              v-else
-              v-for="(toolbarItem, itemKey) in toolbarSection.items"
-              :key="itemKey"
-              :variant="variantBtn"
-              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" />
+    <VToolbar elevation="1" :theme="theme" height="auto" :class="`ps-1 pr-1 rounded-t-${rounded}`">
+      <VSlideGroup v-if="toolbarScrollable">
+        <Items :items="items" />
+      </VSlideGroup>
 
-            <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="16" />
-            <span v-else class="menu-item-title">
-              {{ t(toolbarItem.name) }}
-            </span>
-          </VBtn>
-
-          <div class="menu-divider"></div>
-        </template>
-      </VToolbarItems>
+      <Items v-else :items="items" />
     </VToolbar>
 
-    <ImageDialog :variant-field="variantField" />
-    <LinkDialog :variant-field="variantField" />
-    <PreviewDialog />
-    <ShowSourceDialog :variant-field="variantField" />
+    <template v-for="extension in extensions">
+      <component :is="extension.component" v-bind="extension?.props ?? {}"  />
+    </template>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.tiptapify-menu {
-  padding: 8px;
-  border-bottom: var(--border);
-}
-
-:deep(.toolbar__items) {
-  flex-wrap: wrap;
-}
-
-:deep(.v-btn-group) {
-  height: 32px !important;
-}
-
-.menu-item-title {
-  font-size: 14px;
-}
-
-.menu-button {
-  margin: 0 1px;
-}
-
-.menu-divider {
-  margin: 0 4px;
-}
-
-.menu-divider:nth-last-child(1) {
-  display: none;
-}
 
-.v-toolbar-items {
-  flex-wrap: wrap;
-  row-gap: 5px;
-}
 </style>

package/src/components/Toolbar/Items.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+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";
+
+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>
+
+<template>
+  <VToolbarItems class="py-2">
+    <template v-for="(toolbarSection, sectionKey) in toolbarItemsRef" :key="sectionKey">
+      <Group v-if="toolbarSection.group" :variant="variantBtn" :toolbar-section="toolbarSection" />
+
+      <Toggle v-else-if="toolbarSection.toggle" :variant="variantBtn" :toolbar-section="toolbarSection" />
+
+      <VBtn
+          v-else
+          v-for="(toolbarItem, itemKey) in toolbarSection.items"
+          :key="itemKey"
+          :variant="variantBtn"
+          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" />
+
+        <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="16" />
+        <span v-else class="menu-item-title">
+          {{ t(toolbarItem.name) }}
+        </span>
+      </VBtn>
+
+      <div class="menu-divider"></div>
+    </template>
+  </VToolbarItems>
+</template>
+
+<style lang="scss" scoped>
+:deep(.v-btn-group) {
+  height: 32px !important;
+}
+
+.menu-item-title {
+  font-size: 14px;
+}
+
+.menu-button {
+  margin: 0 1px;
+}
+
+.menu-divider {
+  margin: 0 4px;
+}
+
+.menu-divider:nth-last-child(1) {
+  display: none;
+}
+
+.v-toolbar-items {
+  flex-wrap: wrap;
+  row-gap: 5px;
+}
+</style>

package/src/components/Toolbar/defaultExtensionComponents.ts

@@ -0,0 +1,32 @@
+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";
+
+export function getDefaultComponents(variantField: string): extensionsComponents {
+  return {
+    image: {
+      component: ImageDialog,
+      props: {
+        variantField: computed(() => variantField).value,
+      }
+    },
+    link: {
+      component: LinkDialog,
+      props: {
+        variantField: computed(() => variantField).value,
+      }
+    },
+    preview: {
+      component: PreviewDialog,
+    },
+    showSource: {
+      component: ShowSourceDialog,
+      props: {
+        variantField: computed(() => variantField).value,
+      }
+    }
+  }
+}