chore: improve tooltip and use kbd

src/components/minimal-tiptap/components/section/two.tsx

@@ -5,6 +5,7 @@ import { DotsHorizontalIcon, FontBoldIcon, FontItalicIcon } from '@radix-ui/reac
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { ToolbarButton } from '../toolbar-button'
 import { ShortcutKey } from '../shortcut-key'
+import { getShortcutKey } from '../../utils'
 
 interface FormatAction {
   label: string
@@ -17,18 +18,20 @@ interface FormatAction {
 
 const formatActions: FormatAction[] = [
   {
-    label: 'Bold',
+    label: 'Bold ',
     icon: <FontBoldIcon className="size-5" />,
     action: editor => editor.chain().focus().toggleBold().run(),
     isActive: editor => editor.isActive('bold'),
-    canExecute: editor => editor.can().chain().focus().toggleBold().run() && !editor.isActive('codeBlock')
+    canExecute: editor => editor.can().chain().focus().toggleBold().run() && !editor.isActive('codeBlock'),
+    shortcut: ['mod', 'B']
   },
   {
     label: 'Italic',
     icon: <FontItalicIcon className="size-5" />,
     action: editor => editor.chain().focus().toggleItalic().run(),
     isActive: editor => editor.isActive('italic'),
-    canExecute: editor => editor.can().chain().focus().toggleItalic().run() && !editor.isActive('codeBlock')
+    canExecute: editor => editor.can().chain().focus().toggleItalic().run() && !editor.isActive('codeBlock'),
+    shortcut: ['mod', 'I']
   },
   {
     label: 'Strikethrough',
@@ -63,7 +66,7 @@ export const SectionTwo = ({ editor }: { editor: Editor }) => {
       onClick={() => action.action(editor)}
       disabled={!action.canExecute(editor)}
       isActive={action.isActive(editor)}
-      tooltip={action.label}
+      tooltip={`${action.label} ${action.shortcut && `${action.shortcut.map(s => getShortcutKey(s).symbol).join(' ')}`}`}
       aria-label={action.label}
     >
       {action.icon}

src/components/minimal-tiptap/components/shortcut-key.tsx

@@ -1,18 +1,32 @@
+import * as React from 'react'
 import { cn } from '@/lib/utils'
-import { getShortcutKeys } from '../utils'
+import { getShortcutKey } from '../utils'
 
-interface ShortcutKeyProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface ShortcutKeyProps extends React.HTMLAttributes<HTMLSpanElement> {
   keys: string[]
 }
 
-export const ShortcutKey = ({ className, keys, ...props }: ShortcutKeyProps) => {
+export const ShortcutKey = React.forwardRef<HTMLSpanElement, ShortcutKeyProps>(({ className, keys, ...props }, ref) => {
+  const modifiedKeys = keys.map(key => getShortcutKey(key))
+  const ariaLabel = modifiedKeys.map(shortcut => shortcut.readable).join(' + ')
+
   return (
-    <span className={cn('text-xs tracking-widest opacity-60', className)} {...props}>
-      <span className={cn('ml-4')}>{getShortcutKeys(keys)}</span>
+    <span aria-label={ariaLabel} className={cn('inline-flex items-center gap-0.5', className)} {...props} ref={ref}>
+      {modifiedKeys.map(shortcut => (
+        <kbd
+          className={cn(
+            'inline-block min-w-2.5 text-center align-baseline font-sans text-xs font-medium capitalize text-[rgb(156,157,160)]',
+
+            className
+          )}
+          {...props}
+          ref={ref}
+        >
+          {shortcut.symbol}
+        </kbd>
+      ))}
     </span>
   )
-}
+})
 
 ShortcutKey.displayName = 'ShortcutKey'
-
-export default ShortcutKey

src/components/minimal-tiptap/utils.ts

@@ -47,20 +47,26 @@ export function isMacOS() {
   return isMac
 }
 
-export function getShortcutKey(key: string) {
-  if (key.toLowerCase() === 'mod') {
-    return isMacOS() ? '⌘' : 'Ctrl'
-  } else if (key.toLowerCase() === 'alt') {
-    return isMacOS() ? '⌥' : 'Alt'
-  } else if (key.toLowerCase() === 'shift') {
-    return isMacOS() ? '⇧' : 'Shift'
+interface ShortcutKeyResult {
+  symbol: string
+  readable: string
+}
+
+export function getShortcutKey(key: string): ShortcutKeyResult {
+  const lowercaseKey = key.toLowerCase()
+  if (lowercaseKey === 'mod') {
+    return isMacOS() ? { symbol: '⌘', readable: 'Command' } : { symbol: 'Ctrl', readable: 'Control' }
+  } else if (lowercaseKey === 'alt') {
+    return isMacOS() ? { symbol: '⌥', readable: 'Option' } : { symbol: 'Alt', readable: 'Alt' }
+  } else if (lowercaseKey === 'shift') {
+    return isMacOS() ? { symbol: '⇧', readable: 'Shift' } : { symbol: 'Shift', readable: 'Shift' }
   } else {
-    return key
+    return { symbol: key, readable: key }
   }
 }
 
-export function getShortcutKeys(keys: string[]) {
-  return keys.map(key => getShortcutKey(key)).join('')
+export function getShortcutKeys(keys: string[]): ShortcutKeyResult[] {
+  return keys.map(key => getShortcutKey(key))
 }
 
 export function getOutput(editor: Editor, format: MinimalTiptapProps['output']) {