feat: improve slash command menu - new blocks, formatting, IA Note section, premium design

memento-note/components/rich-text-editor.tsx

@@ -23,6 +23,7 @@ import {
   Quote, CodeXml, Minus, ImageIcon, Type, Highlighter, Link as LinkIcon,
   Sparkles, Wand2, Scissors, Lightbulb, X, Check, ExternalLink,
   FileText, Pilcrow, MessageSquare, AlignLeft, AlignCenter, AlignRight,
+  Superscript as SuperscriptIcon, Subscript as SubscriptIcon, Expand,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -42,6 +43,7 @@ type SlashItem = {
   description: string
   icon: typeof Bold
   category?: string
+  shortcut?: string
   isImage?: boolean
   isAi?: boolean
   aiOption?: 'clarify' | 'shorten' | 'improve'
@@ -49,20 +51,26 @@ type SlashItem = {
 }
 
 const slashCommands: SlashItem[] = [
-  { title: 'Text', description: 'Just start writing with plain text', icon: Pilcrow, category: 'Basic blocks', command: (e) => e.chain().focus().setParagraph().run() },
-  { title: 'Heading 1', description: 'Big section heading', icon: Heading1, category: 'Basic blocks', command: (e) => e.chain().focus().toggleHeading({ level: 1 }).run() },
-  { title: 'Heading 2', description: 'Medium section heading', icon: Heading2, category: 'Basic blocks', command: (e) => e.chain().focus().toggleHeading({ level: 2 }).run() },
-  { title: 'Heading 3', description: 'Small section heading', icon: Heading3, category: 'Basic blocks', command: (e) => e.chain().focus().toggleHeading({ level: 3 }).run() },
-  { title: 'Bullet List', description: 'Create a simple bullet list', icon: List, category: 'Basic blocks', command: (e) => e.chain().focus().toggleBulletList().run() },
-  { title: 'Numbered List', description: 'Create a list with numbering', icon: ListOrdered, category: 'Basic blocks', command: (e) => e.chain().focus().toggleOrderedList().run() },
-  { title: 'To-do List', description: 'Track tasks with checkboxes', icon: CheckSquare, category: 'Basic blocks', command: (e) => e.chain().focus().toggleTaskList().run() },
-  { title: 'Quote', description: 'Capture a quote', icon: Quote, category: 'Basic blocks', command: (e) => e.chain().focus().toggleBlockquote().run() },
-  { title: 'Code Block', description: 'Capture a code snippet', icon: CodeXml, category: 'Basic blocks', command: (e) => e.chain().focus().toggleCodeBlock().run() },
-  { title: 'Divider', description: 'Visually divide blocks', icon: Minus, category: 'Basic blocks', command: (e) => e.chain().focus().setHorizontalRule().run() },
-  { title: 'Image', description: 'Embed an image from URL', icon: ImageIcon, category: 'Media', isImage: true, command: () => {} },
-  { title: 'Clarify', description: 'Make text clearer and easier to understand', icon: Lightbulb, category: 'AI', isAi: true, aiOption: 'clarify', command: () => {} },
-  { title: 'Shorten', description: 'Make text more concise', icon: Scissors, category: 'AI', isAi: true, aiOption: 'shorten', command: () => {} },
-  { title: 'Improve', description: 'Improve writing style and flow', icon: Wand2, category: 'AI', isAi: true, aiOption: 'improve', command: () => {} },
+  { title: 'Text', description: 'Plain paragraph', icon: Pilcrow, category: 'Basic blocks', shortcut: '¶', command: (e) => e.chain().focus().setParagraph().run() },
+  { title: 'Heading 1', description: 'Big section heading', icon: Heading1, category: 'Basic blocks', shortcut: '#', command: (e) => e.chain().focus().toggleHeading({ level: 1 }).run() },
+  { title: 'Heading 2', description: 'Medium section heading', icon: Heading2, category: 'Basic blocks', shortcut: '##', command: (e) => e.chain().focus().toggleHeading({ level: 2 }).run() },
+  { title: 'Heading 3', description: 'Small section heading', icon: Heading3, category: 'Basic blocks', shortcut: '###', command: (e) => e.chain().focus().toggleHeading({ level: 3 }).run() },
+  { title: 'Bullet List', description: 'Unordered list', icon: List, category: 'Basic blocks', shortcut: '-', command: (e) => e.chain().focus().toggleBulletList().run() },
+  { title: 'Numbered List', description: 'Ordered numbered list', icon: ListOrdered, category: 'Basic blocks', shortcut: '1.', command: (e) => e.chain().focus().toggleOrderedList().run() },
+  { title: 'To-do List', description: 'Checkboxes for tasks', icon: CheckSquare, category: 'Basic blocks', shortcut: '[]', command: (e) => e.chain().focus().toggleTaskList().run() },
+  { title: 'Quote', description: 'Capture a quote', icon: Quote, category: 'Basic blocks', shortcut: '>', command: (e) => e.chain().focus().toggleBlockquote().run() },
+  { title: 'Code Block', description: 'Code snippet', icon: CodeXml, category: 'Basic blocks', shortcut: '```', command: (e) => e.chain().focus().toggleCodeBlock().run() },
+  { title: 'Divider', description: 'Horizontal separator', icon: Minus, category: 'Basic blocks', shortcut: '---', command: (e) => e.chain().focus().setHorizontalRule().run() },
+  { title: 'Image', description: 'Embed image from URL', icon: ImageIcon, category: 'Media', isImage: true, command: () => {} },
+  { title: 'Align Left', description: 'Align text left', icon: AlignLeft, category: 'Formatting', command: (e) => e.chain().focus().setTextAlign('left').run() },
+  { title: 'Align Center', description: 'Center text', icon: AlignCenter, category: 'Formatting', command: (e) => e.chain().focus().setTextAlign('center').run() },
+  { title: 'Align Right', description: 'Align text right', icon: AlignRight, category: 'Formatting', command: (e) => e.chain().focus().setTextAlign('right').run() },
+  { title: 'Superscript', description: 'Raise text above baseline', icon: SuperscriptIcon, category: 'Formatting', command: (e) => e.chain().focus().toggleSuperscript().run() },
+  { title: 'Subscript', description: 'Lower text below baseline', icon: SubscriptIcon, category: 'Formatting', command: (e) => e.chain().focus().toggleSubscript().run() },
+  { title: 'Clarifier', description: 'Rendre le texte plus clair', icon: Lightbulb, category: 'IA Note', isAi: true, aiOption: 'clarify', command: () => {} },
+  { title: 'Raccourcir', description: 'Condenser le texte', icon: Scissors, category: 'IA Note', isAi: true, aiOption: 'shorten', command: () => {} },
+  { title: 'Améliorer', description: 'Améliorer le style', icon: Wand2, category: 'IA Note', isAi: true, aiOption: 'improve', command: () => {} },
+  { title: 'Développer', description: 'Élaborer et enrichir le texte', icon: Expand, category: 'IA Note', isAi: true, aiOption: 'clarify', command: () => {} },
 ]
 
 async function aiReformulate(text: string, option: 'clarify' | 'shorten' | 'improve'): Promise<string> {
@@ -417,30 +425,44 @@ function SlashCommandMenu({ editor, onInsertImage }: { editor: Editor; onInsertI
 
   return (
     <div ref={menuRef} className="notion-slash-menu" style={{ top: coords.top, left: coords.left }} onClick={(e) => e.stopPropagation()}>
+      {/* Header hint */}
+      <div className="notion-slash-header">
+        <Sparkles className="w-3 h-3" />
+        <span>Blocs — utilisez ↑↓ pour naviguer, Entrée pour insérer</span>
+      </div>
       {aiLoading && (
         <div className="notion-slash-loading">
           <Sparkles className="w-3.5 h-3.5 animate-spin" />
-          <span>AI is thinking...</span>
+          <span>IA Note réfléchit...</span>
         </div>
       )}
       {!aiLoading && Object.entries(categories).map(([cat, items]) => (
         <div key={cat} className="notion-slash-section">
-          <div className="notion-slash-label">{cat}</div>
+          <div className={cn('notion-slash-label', cat === 'IA Note' && 'notion-slash-label-ai')}>
+            {cat === 'IA Note' && <Sparkles className="w-3 h-3 inline mr-1" />}
+            {cat}
+          </div>
           {items.map((item) => {
             flatIndex++
             const idx = flatIndex
+            const isSelected = idx === selectedIndex
             return (
               <button
                 key={item.title}
-                className={cn('notion-slash-item', idx === selectedIndex && 'notion-slash-item-selected')}
+                className={cn('notion-slash-item', isSelected && 'notion-slash-item-selected')}
                 onClick={() => handleSelect(item)}
                 onMouseEnter={() => setSelectedIndex(idx)}
               >
                 <div className={cn('notion-slash-icon', item.isAi && 'notion-slash-icon-ai')}>
-                  <item.icon className="w-3 h-3" />
+                  <item.icon className="w-4 h-4" />
                 </div>
-                <span className="notion-slash-title">{item.title}</span>
-                <span className="notion-slash-desc">{item.description}</span>
+                <div className="notion-slash-content">
+                  <span className="notion-slash-title">{item.title}</span>
+                  <span className="notion-slash-desc">{item.description}</span>
+                </div>
+                {item.shortcut && (
+                  <span className="notion-slash-shortcut">{item.shortcut}</span>
+                )}
               </button>
             )
           })}