feat: Notion-like rich text editor with TipTap, 4 note types, slash commands & bubble menu

memento-note/components/note-actions.tsx

@@ -19,6 +19,10 @@ import {
   Trash2,
   RotateCcw,
   History,
+  AlignLeft,
+  FileCode2,
+  PenLine,
+  ListChecks,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { NOTE_COLORS } from "@/lib/types"
@@ -38,6 +42,7 @@ interface NoteActionsProps {
   onDelete: () => void
   onShareCollaborators?: () => void
   isMarkdown?: boolean
+  noteType?: string
   onToggleMarkdown?: () => void
   isTrashView?: boolean
   onRestore?: () => void
@@ -62,6 +67,7 @@ export function NoteActions({
   onDelete,
   onShareCollaborators,
   isMarkdown = false,
+  noteType = 'text',
   onToggleMarkdown,
   isTrashView,
   onRestore,
@@ -170,19 +176,22 @@ export function NoteActions({
         </DropdownMenuContent>
       </DropdownMenu>
 
-      {/* Markdown Toggle */}
-      {onToggleMarkdown && (
-        <Button 
-          variant="ghost" 
-          size="sm" 
-          className={cn("h-8 gap-1 px-2 text-xs", isMarkdown && "text-primary bg-primary/10")} 
-          title="Markdown"
-          onClick={onToggleMarkdown}
-        >
-          <FileText className="h-4 w-4" />
-          <span className="hidden sm:inline">MD</span>
-        </Button>
-      )}
+      {onToggleMarkdown && (() => {
+        const iconMap: Record<string, React.ElementType> = { text: AlignLeft, markdown: FileCode2, richtext: PenLine, checklist: ListChecks }
+        const TypeIcon = iconMap[noteType] || FileText
+        return (
+          <Button 
+            variant="ghost" 
+            size="sm" 
+            className={cn("h-8 gap-1 px-2 text-xs", noteType !== 'text' && "text-primary bg-primary/10")} 
+            title={noteType === 'markdown' ? 'Markdown' : noteType === 'richtext' ? 'Rich Text' : noteType === 'checklist' ? 'Checklist' : 'Text'}
+            onClick={onToggleMarkdown}
+          >
+            <TypeIcon className="h-4 w-4" />
+            <span className="hidden sm:inline">{noteType === 'markdown' ? 'MD' : noteType === 'richtext' ? 'RT' : noteType === 'checklist' ? 'CL' : 'TXT'}</span>
+          </Button>
+        )
+      })()}
 
       {/* More Options */}
       <DropdownMenu>