@djangocfg/widget-editor 0.1.93 → 0.1.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/widget-editor",
-  "version": "0.1.93",
+  "version": "0.1.95",
   "description": "TipTap editors: a markdown field with mentions and chips, and a Notion-style block editor with slash commands, tables and embedded blocks",
   "keywords": [
     "editor",
@@ -71,9 +71,9 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@djangocfg/widget-data": "^0.1.18",
+    "@djangocfg/widget-data": "^0.1.21",
     "@djangocfg/widget-kit": "^0.1.19",
-    "@djangocfg/widget-map": "^0.1.22",
+    "@djangocfg/widget-map": "^0.1.25",
     "@floating-ui/dom": "^1.8.0",
     "@tiptap/core": "^3.32.2",
     "@tiptap/extension-code-block-lowlight": "^3.32.2",
@@ -95,15 +95,15 @@
     "tiptap-extension-global-drag-handle": "^0.1.18"
   },
   "peerDependencies": {
-    "@djangocfg/ui-core": "^2.1.635",
+    "@djangocfg/ui-core": "^2.1.637",
     "lucide-react": "^1.68.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.635",
-    "@djangocfg/ui-core": "^2.1.635",
+    "@djangocfg/typescript-config": "^2.1.637",
+    "@djangocfg/ui-core": "^2.1.637",
     "@storybook/react-vite": "^10.6.5",
     "@types/node": "^25.9.5",
     "@types/react": "19.3.0",

package/src/notion/NotionEditor.tsx

@@ -35,7 +35,7 @@ import {
   Underline as UnderlineIcon,
   type LucideIcon,
 } from 'lucide-react';
-import { Kbd, Tooltip, TooltipContent, TooltipTrigger } from '@djangocfg/ui-core';
+import { TooltipHint } from '@djangocfg/ui-core';
 import { useHotkey } from '@djangocfg/ui-core/hooks';
 import { notionExtensions } from './extensions';
 import { LinkDialog } from './LinkDialog';
@@ -191,8 +191,8 @@ export const NotionEditor = forwardRef<NotionEditorHandle, NotionEditorProps>(
 interface BubbleItem {
   icon: LucideIcon;
   title: string;
-  /** Keyboard shortcut to display in the tooltip. macOS-style (⌘ B). */
-  shortcut: readonly string[];
+  /** Keyboard shortcut to display in the tooltip. `useHotkey` string (mod+b). */
+  hotkey: string;
   isActive: () => boolean;
   run: () => void;
 }
@@ -214,49 +214,49 @@ function BubbleSelectionToolbar({
     {
       icon: Bold,
       title: 'Bold',
-      shortcut: ['⌘', 'B'],
+      hotkey: 'mod+b',
       isActive: () => editor.isActive('bold'),
       run: () => editor.chain().focus().toggleBold().run(),
     },
     {
       icon: Italic,
       title: 'Italic',
-      shortcut: ['⌘', 'I'],
+      hotkey: 'mod+i',
       isActive: () => editor.isActive('italic'),
       run: () => editor.chain().focus().toggleItalic().run(),
     },
     {
       icon: UnderlineIcon,
       title: 'Underline',
-      shortcut: ['⌘', 'U'],
+      hotkey: 'mod+u',
       isActive: () => editor.isActive('underline'),
       run: () => editor.chain().focus().toggleUnderline().run(),
     },
     {
       icon: Strikethrough,
       title: 'Strike',
-      shortcut: ['⌘', '⇧', 'X'],
+      hotkey: 'mod+shift+x',
       isActive: () => editor.isActive('strike'),
       run: () => editor.chain().focus().toggleStrike().run(),
     },
     {
       icon: CodeIcon,
       title: 'Inline code',
-      shortcut: ['⌘', 'E'],
+      hotkey: 'mod+e',
       isActive: () => editor.isActive('code'),
       run: () => editor.chain().focus().toggleCode().run(),
     },
     {
       icon: Highlighter,
       title: 'Highlight',
-      shortcut: ['⌘', '⇧', 'H'],
+      hotkey: 'mod+shift+h',
       isActive: () => editor.isActive('highlight'),
       run: () => editor.chain().focus().toggleHighlight().run(),
     },
     {
       icon: LinkIcon,
       title: 'Link',
-      shortcut: ['⌘', 'K'],
+      hotkey: 'mod+k',
       isActive: () => editor.isActive('link'),
       run: onOpenLink,
     },
@@ -280,28 +280,18 @@ function BubbleSelectionToolbar({
         const Icon = item.icon;
         const active = item.isActive();
         return (
-          <Tooltip key={item.title}>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                aria-label={item.title}
-                aria-pressed={active}
-                onMouseDown={(e) => e.preventDefault()}
-                onClick={item.run}
-                className={`notion-bubble-btn${active ? ' notion-bubble-btn--active' : ''}`}
-              >
-                <Icon style={{ width: 14, height: 14 }} aria-hidden />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="top" sideOffset={6} className="flex items-center gap-1.5">
-              <span>{item.title}</span>
-              <span className="flex items-center gap-0.5">
-                {item.shortcut.map((k) => (
-                  <Kbd key={k}>{k}</Kbd>
-                ))}
-              </span>
-            </TooltipContent>
-          </Tooltip>
+          <TooltipHint key={item.title} tooltip={{ content: item.title, hotkey: item.hotkey, side: 'top', sideOffset: 6 }}>
+            <button
+              type="button"
+              aria-label={item.title}
+              aria-pressed={active}
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={item.run}
+              className={`notion-bubble-btn${active ? ' notion-bubble-btn--active' : ''}`}
+            >
+              <Icon style={{ width: 14, height: 14 }} aria-hidden />
+            </button>
+          </TooltipHint>
         );
       })}
     </BubbleMenu>