tiptapify 0.2.6 → 0.3.1

package/index.d.ts

@@ -62,6 +62,7 @@ import '@tiptap/extension-invisible-characters'
 
 import Tiptapify from './src/components/Tiptapify.vue'
 import TiptapifyDialog from './src/components/UI/TiptapifyDialog.vue'
+import { TIPTAPIFY_CONFIG_KEY, useTiptapifyConfig, TiptapifyConfig } from './src/composables/useTiptapifyConfig'
 import * as mdi from '@mdi/js'
 
 export type TiptapifyFooterAlignment = 'start' | 'center' | 'end'
@@ -188,6 +189,8 @@ export {
   mdi,
   Tiptapify,
   TiptapifyDialog,
+  TIPTAPIFY_CONFIG_KEY,
+  useTiptapifyConfig,
   TiptapEditor,
   nodeViewProps,
   NodeViewWrapper,
@@ -225,6 +228,8 @@ export type {
   SingleCommands,
 }
 
+export type { TiptapifyConfig }
+
 declare module '@vue/runtime-core' {
   interface GlobalComponents {
     Tiptapify: typeof Tiptapify

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.2.6",
+  "version": "0.3.1",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

package/src/components/Footer.vue

@@ -57,7 +57,7 @@ function showFooter() {
     <VRow>
       <VCol class="d-flex align-center" :class="`justify-${alignment}`">
         <template v-if="limit > 0">
-          <VTooltip>
+          <VTooltip :open-delay="1500">
             <template #default>
               <span v-html="limitText" />
             </template>

package/src/components/Tiptapify.vue

@@ -3,7 +3,7 @@
 import defaults from '@tiptapify/constants/defaults'
 import { itemsPropType, toolbarSections } from '@tiptapify/types/toolbarTypes'
 import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
-import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef } from 'vue'
+import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef, toRef } from 'vue'
 import { default as Toolbar } from '@tiptapify/components/Toolbar/Index.vue'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import { TiptapifyAiOptions, TiptapifyAiResolvedOptions, TiptapifyEditor, TiptapifyFooterAlignment, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
@@ -13,6 +13,7 @@ import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 import { useI18n } from 'vue-i18n'
 
 import { getTiptapEditor } from '@tiptapify/components/index'
+import { TIPTAPIFY_CONFIG_KEY } from '@tiptapify/composables/useTiptapifyConfig'
 import { createAiBackendProvider } from '@tiptapify/extensions/components/ai/backend'
 
 import Footer from '@tiptapify/components/Footer.vue'
@@ -139,6 +140,10 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
 provide('tiptapifyEditor', editor)
 provide('tiptapifyI18n', { t })
 provide('tiptapifyAi', tiptapifyAi)
+provide(TIPTAPIFY_CONFIG_KEY, {
+  variantBtn: toRef(props, 'variantBtn'),
+  variantField: toRef(props, 'variantField'),
+})
 
 editor.value?.chain().setFontFamily(props.defaultFontFamily).run()
 
@@ -162,7 +167,6 @@ onBeforeUnmount(() => {
       <template v-if="toolbar">
         <Toolbar
           v-if="editor"
-          :variant-btn="variantBtn"
           :variant-field="variantField"
           :font-measure="fontMeasure"
           :items="items"

package/src/components/Toolbar/Index.vue

@@ -2,14 +2,13 @@
 import { Editor } from '@tiptap/vue-3'
 import Items from '@tiptapify/components/Toolbar/Items.vue'
 import defaults from '@tiptapify/constants/defaults'
-import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+import { variantFieldTypes } from '@tiptapify/types/editor'
 import { computed, inject, PropType, Ref } from 'vue'
 import { itemsPropType, toolbarSections } from '@tiptapify/types/toolbarTypes'
 
 import { default as toolbarItemsGroups, availableItems } from '@tiptapify/components/Toolbar/items'
 
 const props = defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
   variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
   items: { type: [Array, Object] as PropType<itemsPropType>, default() { return [] } },
   itemsExclude: { type: Boolean, default() { return false } },
@@ -178,10 +177,10 @@ Object.keys(props.customExtensions).forEach((key: any) => {
   <div v-if="editor" class="tiptapify-toolbar">
     <VToolbar elevation="1" :theme="theme" height="auto" :class="`ps-1 pr-1 rounded-t-${rounded}`">
       <VSlideGroup v-if="toolbarScrollable">
-        <Items :items="toolbarItems" :variant-btn="variantBtn" />
+        <Items :items="toolbarItems" />
       </VSlideGroup>
 
-      <Items v-else :items="toolbarItems" :variant-btn="variantBtn" />
+      <Items v-else :items="toolbarItems" />
     </VToolbar>
   </div>
 </template>

package/src/components/Toolbar/Items.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createSSRApp, h, provide, ref } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { createVuetify } from 'vuetify'
+import Items from '@tiptapify/components/Toolbar/Items.vue'
+import HeadingButton from '@tiptapify/extensions/components/style/heading/Button.vue'
+
+const editor = {
+  instanceId: 1,
+  isActive: () => false,
+  can: () => ({ chain: () => ({ focus: () => ({ toggleHeading: () => ({ run: () => false }) }) }) }),
+  chain: () => ({ focus: () => ({ redo: () => ({ run: () => false }) }) }),
+  commands: {},
+}
+
+const items = [
+  {
+    section: 'style',
+    group: true,
+    components: [{ name: 'heading', component: HeadingButton }],
+  },
+]
+
+async function renderToolbar () {
+  const warnings: string[] = []
+  const warn = vi.spyOn(console, 'warn').mockImplementation((...args: unknown[]) => {
+    warnings.push(args.map(String).join(' '))
+  })
+
+  const app = createSSRApp({
+    setup () {
+      provide('tiptapifyEditor', ref(editor))
+      provide('tiptapifyI18n', { t: (key: string) => key })
+
+      return () => h(Items, { items })
+    },
+  })
+  app.use(createVuetify())
+
+  const html = await renderToString(app)
+  warn.mockRestore()
+
+  return { html, warnings }
+}
+
+describe('Toolbar Items', () => {
+  it('does not pass undeclared attributes to toolbar buttons', async () => {
+    const { html, warnings } = await renderToolbar()
+
+    expect(html).toContain('tiptapify-heading-button-1')
+    expect(warnings.join('\n')).not.toContain('Extraneous non-props attributes')
+  })
+})

package/src/components/Toolbar/Items.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 
-import defaults from '@tiptapify/constants/defaults'
-import { variantBtnTypes } from '@tiptapify/types/editor'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 import { PropType } from 'vue'
 
 import { toolbarSections } from '@tiptapify/types/toolbarTypes'
 
 defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
   items: { type: Array as PropType<toolbarSections>, default() { return {} } },
 })
 
+const { variantBtn } = useTiptapifyConfig()
+
 </script>
 
 <template>
@@ -22,7 +22,7 @@ defineProps({
       <template v-else>
         <VBtnGroup v-if="item.group" elevation="4" :class="{ 'tiptapify-btn-group--elevated': variantBtn === 'elevated' }">
           <template v-for="sectionItem in item.components" :key="sectionItem.name">
-            <component :is="sectionItem.component" v-bind="{ variantBtn, ...sectionItem.props ?? {} }" />
+            <component :is="sectionItem.component" v-bind="sectionItem.props ?? {}" />
           </template>
         </VBtnGroup>
         <template v-else>
@@ -30,7 +30,7 @@ defineProps({
             :is="sectionItem.component"
             v-for="sectionItem in item.components"
             :key="sectionItem.name"
-            v-bind="{ variantBtn, ...sectionItem.props ?? {} }"
+            v-bind="sectionItem.props ?? {}"
           />
         </template>
         <div class="menu-divider" />

package/src/components/UI/HotkeyTooltip.test.ts

@@ -0,0 +1,65 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createSSRApp, h } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { createVuetify } from 'vuetify'
+import HotkeyTooltip from './HotkeyTooltip.vue'
+
+const MAC_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'
+const WIN_UA = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'
+
+function mockUserAgent (userAgent: string) {
+  Object.defineProperty(window.navigator, 'userAgent', {
+    value: userAgent,
+    configurable: true,
+  })
+}
+
+function renderTooltip (label: string, hotkey: string): Promise<string> {
+  const app = createSSRApp({
+    render: () => h(HotkeyTooltip, { label, hotkey })
+  })
+  app.use(createVuetify())
+
+  return renderToString(app)
+}
+
+describe('HotkeyTooltip', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('renders label and spelled-out hotkey on two lines on Windows', async () => {
+    mockUserAgent(WIN_UA)
+    const html = await renderTooltip('Bold', 'Mod-Shift-b')
+
+    expect(html).toContain('t-hotkey-tooltip__label')
+    expect(html).toContain('t-hotkey-tooltip__hotkey')
+    expect(html).toContain('Bold')
+    expect(html).toContain('Ctrl')
+    expect(html).toContain('Shift')
+    expect(html).toContain('>B</span>')
+    expect(html).not.toContain('mdiSvg:')
+  })
+
+  it('renders the hotkey with icons on macOS without spelled-out names', async () => {
+    mockUserAgent(MAC_UA)
+    const html = await renderTooltip('Heading', 'Mod-Alt-1..6')
+
+    expect(html).toContain('t-hotkey-tooltip__label')
+    expect(html).toContain('t-hotkey-tooltip__hotkey')
+    expect(html).toContain('Heading')
+    expect(html).toContain('mdiSvg:')
+    expect(html).toContain('1–6')
+    expect(html).not.toContain('Ctrl')
+    expect(html).not.toContain('>Command<')
+    expect(html).not.toContain('>Option<')
+  })
+
+  it('renders Enter as an icon on macOS', async () => {
+    mockUserAgent(MAC_UA)
+    const html = await renderTooltip('Hard break', 'Mod-Enter')
+
+    expect(html).toContain('mdiSvg:')
+    expect(html).not.toContain('>Enter<')
+  })
+})

package/src/components/UI/HotkeyTooltip.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+
+import { computed } from 'vue'
+import { hotkeyParts } from '@tiptapify/utils/hotkeys'
+
+const props = defineProps({
+  label: { type: String, required: true },
+  hotkey: { type: String, required: true },
+})
+
+const parts = computed(() => hotkeyParts(props.hotkey))
+
+</script>
+
+<template>
+  <span class="t-hotkey-tooltip">
+    <span class="t-hotkey-tooltip__label">{{ label }}</span>
+    <span class="t-hotkey-tooltip__hotkey">
+      <template v-for="(part, index) in parts" :key="index">
+        <span v-if="index" class="t-hotkey-sep">+</span>
+        <VIcon v-if="part.icon" :icon="part.icon" size="12" class="t-hotkey-icon" />
+        <span v-else>{{ part.label }}</span>
+      </template>
+    </span>
+  </span>
+</template>
+
+<style scoped lang="scss">
+.t-hotkey-tooltip {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 4px 0;
+  white-space: nowrap;
+}
+
+.t-hotkey-tooltip__hotkey {
+  align-items: center;
+  background: rgba(127, 127, 127, .2);
+  background: color-mix(in srgb, currentColor 14%, transparent);
+  border-radius: 4px;
+  display: inline-flex;
+  font-family: 'JetBrainsMono', ui-monospace, Menlo, Consolas, monospace;
+  font-size: 11px;
+  gap: 4px;
+  letter-spacing: .03em;
+  padding: 3px 6px;
+
+  .t-hotkey-icon {
+    font-size: 12px;
+  }
+}
+</style>

package/src/components/UI/Tooltip.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+import HotkeyTooltip from '@tiptapify/components/UI/HotkeyTooltip.vue'
+
+defineProps({
+  label: { type: String, default: '' },
+  hotkey: { type: String, default: '' },
+  openDelay: { type: Number, default: 500 },
+})
+
+</script>
+
+<template>
+  <VTooltip activator="parent" :open-delay="openDelay">
+    <HotkeyTooltip v-if="hotkey" :label="label" :hotkey="hotkey" />
+    <slot v-else>
+      {{ label }}
+    </slot>
+  </VTooltip>
+</template>

package/src/composables/useTiptapifyConfig.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+import { createSSRApp, h, provide, ref } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { createVuetify } from 'vuetify'
+import BoldButton from '@tiptapify/extensions/components/format/bold/Button.vue'
+import { TIPTAPIFY_CONFIG_KEY, useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+
+const editor = {
+  isActive: () => false,
+  can: () => ({ chain: () => ({ focus: () => ({ toggleBold: () => ({ run: () => false }) }) }) }),
+  commands: { toggleBold: () => {} },
+}
+
+const Consumer = {
+  setup () {
+    const { variantBtn, variantField } = useTiptapifyConfig()
+    return () => h('span', [
+      h('span', { id: 'variant-btn' }, variantBtn.value),
+      h('span', { id: 'variant-field' }, variantField.value),
+    ])
+  },
+}
+
+function render (root: () => any, withConfig: boolean) {
+  const app = createSSRApp({
+    setup () {
+      if (withConfig) {
+        provide(TIPTAPIFY_CONFIG_KEY, {
+          variantBtn: ref('tonal'),
+          variantField: ref('outlined'),
+        })
+      }
+      provide('tiptapifyEditor', ref(editor))
+      provide('tiptapifyI18n', { t: (key: string) => key })
+      return root
+    },
+  })
+  app.use(createVuetify())
+
+  return renderToString(app)
+}
+
+describe('useTiptapifyConfig', () => {
+  it('exposes provided config values', async () => {
+    const html = await render(() => h(Consumer), true)
+
+    expect(html).toContain('<span id="variant-btn">tonal</span>')
+    expect(html).toContain('<span id="variant-field">outlined</span>')
+  })
+
+  it('falls back to defaults when no provider is present', async () => {
+    const html = await render(() => h(Consumer), false)
+
+    expect(html).toContain('<span id="variant-btn">flat</span>')
+    expect(html).toContain('<span id="variant-field">solo</span>')
+  })
+
+  it('is consumed by toolbar extension buttons', async () => {
+    const custom = await render(() => h(BoldButton), true)
+    const fallback = await render(() => h(BoldButton), false)
+
+    expect(custom).toContain('tonal')
+    expect(fallback).toContain('flat')
+    expect(custom).not.toEqual(fallback)
+  })
+})

package/src/composables/useTiptapifyConfig.ts

@@ -0,0 +1,17 @@
+import { computed, inject, InjectionKey, Ref } from 'vue'
+import defaults from '@tiptapify/constants/defaults'
+import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+
+export interface TiptapifyConfig {
+  variantBtn: Ref<variantBtnTypes>
+  variantField: Ref<variantFieldTypes>
+}
+
+export const TIPTAPIFY_CONFIG_KEY: InjectionKey<TiptapifyConfig> = Symbol('tiptapifyConfig')
+
+export function useTiptapifyConfig(): TiptapifyConfig {
+  return inject(TIPTAPIFY_CONFIG_KEY, {
+    variantBtn: computed(() => defaults.variantBtn),
+    variantField: computed(() => defaults.variantField),
+  })
+}

package/src/constants/defaults.ts

@@ -1,4 +1,6 @@
+import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+
 export default {
-  variantBtn: 'flat',
-  variantField: 'solo',
+  variantBtn: 'flat' as variantBtnTypes,
+  variantField: 'solo' as variantFieldTypes,
 }

package/src/extensions/components/actions/redo/Button.vue

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -27,9 +25,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     :variant="variantBtn"
     @click="editor.chain().focus().redo().run()"
   >
-    <VTooltip activator="parent">
-      {{ t('action.redo') }}
-    </VTooltip>
+    <Tooltip :label="t('action.redo')" hotkey="Mod-Shift-z" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiRedo}`" />
   </VBtn>
 </template>

package/src/extensions/components/actions/undo/Button.vue

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -27,9 +25,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     :variant="variantBtn"
     @click="editor.chain().focus().undo().run()"
   >
-    <VTooltip activator="parent">
-      {{ t('action.undo') }}
-    </VTooltip>
+    <Tooltip :label="t('action.undo')" hotkey="Mod-z" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiUndo}`" />
   </VBtn>
 </template>

package/src/extensions/components/ai/Button.vue

@@ -2,15 +2,14 @@
 
 import * as mdi from '@mdi/js'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import AiDialog from '@tiptapify/extensions/components/ai/Dialog.vue'
-import defaults from '@tiptapify/constants/defaults'
-import { TiptapifyAiResolvedOptions, variantBtnTypes } from '@tiptapify/types/editor'
-import { computed, ComputedRef, inject, PropType, useTemplateRef } from 'vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { TiptapifyAiResolvedOptions } from '@tiptapify/types/editor'
+import { computed, ComputedRef, inject, useTemplateRef } from 'vue'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 const ai = inject('tiptapifyAi') as ComputedRef<TiptapifyAiResolvedOptions | false>
@@ -32,11 +31,9 @@ function showDialog() {
 
 <template>
   <VBtn color="" :variant="variantBtn" size="32" :disabled="!isAvailable" @click="showDialog">
-    <VTooltip activator="parent">
-      {{ isAvailable ? t('ai.title') : t('ai.unavailable') }}
-    </VTooltip>
+    <Tooltip :label="isAvailable ? t('ai.title') : t('ai.unavailable')" />
     <BtnIcon :icon="icon" />
   </VBtn>
 
-  <AiDialog ref="dialog" :variant-btn="variantBtn" />
+  <AiDialog ref="dialog" />
 </template>

package/src/extensions/components/ai/Dialog.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 
 import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
-import defaults from '@tiptapify/constants/defaults'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 import {
   TiptapifyAiEditorContext,
   TiptapifyAiMode,
@@ -11,20 +11,15 @@ import {
   TiptapifyAiResponse,
   TiptapifyAiResolvedOptions,
   TiptapifyAiStream,
-  TiptapifyEditor,
-  variantBtnTypes,
-  variantFieldTypes
+  TiptapifyEditor
 } from '@tiptapify/types/editor'
-import { computed, ComputedRef, inject, nextTick, PropType, Ref, ref, useTemplateRef, watch } from 'vue'
+import { computed, ComputedRef, inject, nextTick, Ref, ref, useTemplateRef, watch } from 'vue'
 import * as mdi from '@mdi/js'
 import { ComposerTranslation } from 'vue-i18n'
 import { exceedsLimit } from './charLimit'
 import { DEFAULT_AI_INSTRUCTION } from './backend'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-  variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
-})
+const { variantBtn, variantField } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<TiptapifyEditor>
 const ai = inject('tiptapifyAi') as ComputedRef<TiptapifyAiResolvedOptions | false>

package/src/extensions/components/alignment/center/Button.vue

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -26,9 +24,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.chain().focus().toggleTextAlign('center').run()"
   >
-    <VTooltip activator="parent">
-      {{ t('alignments.center') }}
-    </VTooltip>
+    <Tooltip :label="t('alignments.center')" hotkey="Mod-Shift-e" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatAlignCenter}`" />
   </VBtn>
 </template>

package/src/extensions/components/alignment/justify/Button.vue

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -26,9 +24,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     size="32"
     @click="editor.chain().focus().toggleTextAlign('justify').run()"
   >
-    <VTooltip activator="parent">
-      {{ t('alignments.justify') }}
-    </VTooltip>
+    <Tooltip :label="t('alignments.justify')" hotkey="Mod-Shift-j" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatAlignJustify}`" />
   </VBtn>
 </template>