tiptapify 0.2.6 → 0.3.0

package/src/extensions/components/style/fontSize/Button.vue

@@ -3,19 +3,20 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import FontSize from '@tiptapify/extensions/components/style/fontSize/FontSize.vue'
 import { fontSizes } from '@tiptapify/constants/style'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { computed, inject, PropType, Ref } from 'vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { computed, inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
 const props = defineProps({
   fontMeasure: { type: String, default () { return 'px' } },
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
+const { variantBtn } = useTiptapifyConfig()
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
@@ -54,9 +55,7 @@ function getColor() {
     :variant="variantBtn"
     size="32"
   >
-    <VTooltip activator="parent">
-      {{ t('style.fontSize') }}
-    </VTooltip>
+    <Tooltip :label="t('style.fontSize')" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatSize}`" />
   </VBtn>
 

package/src/extensions/components/style/heading/Button.vue

@@ -4,17 +4,17 @@ import * as mdi from '@mdi/js'
 import { Level } from '@tiptap/extension-heading'
 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 defaults from '@tiptapify/constants/defaults'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
 const props = defineProps({
   customHeadingLevels: { type: Array<Level>, default: () => [] },
   withParagraph: { type: Boolean, default: () => true },
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
+const { variantBtn } = useTiptapifyConfig()
+
 interface MDIIcons { [key: string]: string }
 const mdiIcons = mdi as MDIIcons
 
@@ -35,9 +35,7 @@ setHeadingLevels(props.customHeadingLevels)
     size="32"
     @click="editor.chain().focus().redo().run()"
   >
-    <VTooltip activator="parent">
-      {{ t('style.heading') }}
-    </VTooltip>
+    <Tooltip :label="t('style.heading')" hotkey="Mod-Alt-1..6" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatHeaderPound}`" />
   </VBtn>
 

package/src/extensions/components/style/highlight/Button.vue

@@ -3,17 +3,15 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import StyleColor from '@tiptapify/extensions/components/style/StyleColor.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { computed, inject, PropType, Ref } from 'vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { computed, inject, Ref } from 'vue'
 import { ComposerTranslation } from 'vue-i18n'
 import { useTheme } from 'vuetify/framework'
 
-import defaults from '@tiptapify/constants/defaults'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -37,9 +35,7 @@ const selectedColor = computed(() => editor.value.getAttributes('highlight').col
     :variant="variantBtn"
     size="32"
   >
-    <VTooltip activator="parent">
-      {{ t('style.color.highlight') }}
-    </VTooltip>
+    <Tooltip :label="t('style.color.highlight')" hotkey="Mod-Shift-h" />
 
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatColorFill}`" />
     <VIcon

package/src/extensions/components/style/lineHeight/Button.vue

@@ -3,17 +3,15 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import LineHeight from '@tiptapify/extensions/components/style/lineHeight/LineHeight.vue'
 import { lineHeights } from '@tiptapify/constants/style'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { computed, inject, PropType, Ref } from 'vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { computed, 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>
 
@@ -53,9 +51,7 @@ function getColor() {
     :variant="variantBtn"
     size="32"
   >
-    <VTooltip activator="parent">
-      {{ t('style.lineHeight') }}
-    </VTooltip>
+    <Tooltip :label="t('style.lineHeight')" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatLineHeight}`" />
   </VBtn>
 

package/src/index.ts

@@ -1,6 +1,7 @@
 import { Plugin } from 'vue'
 import Tiptapify from '@tiptapify/components/Tiptapify.vue'
 import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 import { TiptapifyFooterAlignment } from '@tiptapify/types/editor'
 import { createAiBackendProvider } from '@tiptapify/extensions/components/ai/backend'
 
@@ -38,6 +39,7 @@ export {
   VueNodeViewRenderer,
   Tiptapify,
   TiptapifyDialog,
+  useTiptapifyConfig,
   createAiBackendProvider,
   Node,
   Mark,
@@ -46,6 +48,7 @@ export {
   mergeAttributes,
 }
 
+export type { TiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 export type { TiptapifyFooterAlignment }
 export type { CommandProps, InputRuleMatch, PasteRuleMatch }
 export type {

package/src/utils/hotkeys.test.ts

@@ -0,0 +1,146 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { hotkeyParts, isMac } from './hotkeys'
+
+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 IPHONE_UA = 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1'
+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'
+const LINUX_UA = 'Mozilla/5.0 (X11; Linux x86_64) 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 expectIcon (part: { icon?: string }): void {
+  expect(part.icon).toBeDefined()
+  expect(part.icon).toContain('mdiSvg:')
+}
+
+describe('isMac', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('returns true for macOS user agent', () => {
+    mockUserAgent(MAC_UA)
+    expect(isMac()).toBe(true)
+  })
+
+  it('returns true for Apple mobile user agents', () => {
+    mockUserAgent(IPHONE_UA)
+    expect(isMac()).toBe(true)
+  })
+
+  it('returns false for Windows user agent', () => {
+    mockUserAgent(WIN_UA)
+    expect(isMac()).toBe(false)
+  })
+
+  it('returns false for Linux user agent', () => {
+    mockUserAgent(LINUX_UA)
+    expect(isMac()).toBe(false)
+  })
+
+  it('returns false when navigator is unavailable', () => {
+    vi.stubGlobal('navigator', undefined)
+    expect(isMac()).toBe(false)
+  })
+})
+
+describe('hotkeyParts', () => {
+  it('renders Mod as Ctrl text on Windows', () => {
+    mockUserAgent(WIN_UA)
+    expect(hotkeyParts('Mod-b')).toEqual([
+      { label: 'Ctrl' },
+      { label: 'B' },
+    ])
+  })
+
+  it('renders Mod as the Command icon on macOS', () => {
+    mockUserAgent(MAC_UA)
+    const parts = hotkeyParts('Mod-Shift-b')
+    expect(parts).toHaveLength(3)
+    expect(parts[0].label).toBe('Command')
+    expectIcon(parts[0])
+    expect(parts[1].label).toBe('Shift')
+    expectIcon(parts[1])
+    expect(parts[2]).toEqual({ label: 'B' })
+  })
+
+  it('renders Alt as text on Windows and Linux', () => {
+    mockUserAgent(WIN_UA)
+    expect(hotkeyParts('Mod-Alt-c')).toEqual([
+      { label: 'Ctrl' },
+      { label: 'Alt' },
+      { label: 'C' },
+    ])
+    mockUserAgent(LINUX_UA)
+    expect(hotkeyParts('Mod-Alt-c')).toEqual([
+      { label: 'Ctrl' },
+      { label: 'Alt' },
+      { label: 'C' },
+    ])
+  })
+
+  it('renders Alt as the Option icon on macOS', () => {
+    mockUserAgent(MAC_UA)
+    const parts = hotkeyParts('Mod-Alt-c')
+    expect(parts[0].label).toBe('Command')
+    expectIcon(parts[0])
+    expect(parts[1].label).toBe('Option')
+    expectIcon(parts[1])
+    expect(parts[2]).toEqual({ label: 'C' })
+  })
+
+  it('renders Enter as the return icon on macOS', () => {
+    mockUserAgent(MAC_UA)
+    const parts = hotkeyParts('Mod-Enter')
+    expect(parts[0].label).toBe('Command')
+    expectIcon(parts[0])
+    expect(parts[1].label).toBe('Enter')
+    expectIcon(parts[1])
+  })
+
+  it('renders Enter as text on Windows', () => {
+    mockUserAgent(WIN_UA)
+    expect(hotkeyParts('Mod-Enter')).toEqual([
+      { label: 'Ctrl' },
+      { label: 'Enter' },
+    ])
+  })
+
+  it('preserves modifier order', () => {
+    mockUserAgent(WIN_UA)
+    expect(hotkeyParts('Mod-Shift-s')).toEqual([
+      { label: 'Ctrl' },
+      { label: 'Shift' },
+      { label: 'S' },
+    ])
+  })
+
+  it('keeps punctuation keys as is', () => {
+    mockUserAgent(WIN_UA)
+    expect(hotkeyParts('Mod-,').map(part => part.label)).toEqual(['Ctrl', ','])
+    expect(hotkeyParts('Mod-.').map(part => part.label)).toEqual(['Ctrl', '.'])
+  })
+
+  it('renders numeric ranges with a dash', () => {
+    mockUserAgent(WIN_UA)
+    expect(hotkeyParts('Mod-Alt-1..6')).toEqual([
+      { label: 'Ctrl' },
+      { label: 'Alt' },
+      { label: '1–6' },
+    ])
+  })
+
+  it('renders digits as is', () => {
+    mockUserAgent(WIN_UA)
+    expect(hotkeyParts('Mod-Shift-8')).toEqual([
+      { label: 'Ctrl' },
+      { label: 'Shift' },
+      { label: '8' },
+    ])
+  })
+})

package/src/utils/hotkeys.ts

@@ -0,0 +1,65 @@
+import * as mdi from '@mdi/js'
+
+export interface HotkeyPart {
+  icon?: string
+  label: string
+}
+
+/**
+ * Detects whether the current platform is macOS (or an Apple mobile device).
+ * Returns false in non-browser environments (SSR, tests).
+ */
+export function isMac (): boolean {
+  if (typeof navigator === 'undefined') {
+    return false
+  }
+
+  return /mac|iphone|ipad|ipod/i.test(navigator.userAgent)
+}
+
+function partForKey (key: string, mac: boolean): HotkeyPart {
+  const normalized = key.toLowerCase()
+
+  if (normalized === 'mod') {
+    return mac
+      ? { label: 'Command', icon: `mdiSvg:${mdi.mdiAppleKeyboardCommand}` }
+      : { label: 'Ctrl' }
+  }
+  if (normalized === 'shift') {
+    return mac
+      ? { label: 'Shift', icon: `mdiSvg:${mdi.mdiAppleKeyboardShift}` }
+      : { label: 'Shift' }
+  }
+  if (normalized === 'alt') {
+    return mac
+      ? { label: 'Option', icon: `mdiSvg:${mdi.mdiAppleKeyboardOption}` }
+      : { label: 'Alt' }
+  }
+  if (normalized === 'enter') {
+    return mac
+      ? { label: 'Enter', icon: `mdiSvg:${mdi.mdiKeyboardReturn}` }
+      : { label: 'Enter' }
+  }
+
+  // numeric ranges in "1..6" format are rendered as "1–6"
+  const range = normalized.match(/^(\d+)\.\.(\d+)$/)
+  if (range) {
+    return { label: `${range[1]}–${range[2]}` }
+  }
+
+  return { label: key.toUpperCase() }
+}
+
+/**
+ * Converts a Tiptap-style shortcut string ("Mod-Shift-b", "Mod-Alt-1..6")
+ * into display parts for the current platform. On macOS modifier keys
+ * get their Apple keyboard glyphs (⌘ ⌥ ⇧ ⏎), on other platforms
+ * everything is rendered as text.
+ */
+export function hotkeyParts (shortcut: string): HotkeyPart[] {
+  const mac = isMac()
+
+  return shortcut
+    .split('-')
+    .map(key => partForKey(key, mac))
+}