chore(web): simplify command system and improve editor UX (#5242)

Streamlines the command suggestion interface and fixes list auto-completion behavior:

- Remove command descriptions for cleaner suggestion popup UI
- Replace PaperclipIcon with FileIcon for semantic accuracy
- Fix list auto-completion to avoid extra newline when exiting list mode
- Add explanatory comments for cursor offset positions
- Improve dependency array in useListAutoCompletion hook

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

web/src/components/MemoEditor/ActionButton/InsertMenu.tsx

@@ -1,6 +1,6 @@
 import { LatLng } from "leaflet";
 import { uniqBy } from "lodash-es";
-import { LinkIcon, LoaderIcon, MapPinIcon, PaperclipIcon, PlusIcon } from "lucide-react";
+import { FileIcon, LinkIcon, LoaderIcon, MapPinIcon, PlusIcon } from "lucide-react";
 import { observer } from "mobx-react-lite";
 import { useContext, useState } from "react";
 import { Button } from "@/components/ui/button";
@@ -113,7 +113,7 @@ const InsertMenu = observer((props: Props) => {
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           <DropdownMenuItem onClick={handleUploadClick}>
-            <PaperclipIcon className="w-4 h-4" />
+            <FileIcon className="w-4 h-4" />
             {t("common.upload")}
           </DropdownMenuItem>
           <DropdownMenuItem onClick={() => setLinkDialogOpen(true)}>

web/src/components/MemoEditor/Editor/CommandSuggestions.tsx

@@ -51,12 +51,7 @@ const CommandSuggestions = observer(({ editorRef, editorActions, commands }: Com
       selectedIndex={selectedIndex}
       onItemSelect={handleItemSelect}
       getItemKey={(cmd) => cmd.name}
-      renderItem={(cmd) => (
+      renderItem={(cmd) => <OverflowTip>/{cmd.name}</OverflowTip>}
-        <>
-          <OverflowTip>/{cmd.name}</OverflowTip>
-          {cmd.description && <span className="ml-2 text-xs text-muted-foreground">{cmd.description}</span>}
-        </>
-      )}
     />
   );
 });

web/src/components/MemoEditor/Editor/commands.ts

@@ -3,32 +3,27 @@ import { Command } from "@/components/MemoEditor/types/command";
 export const editorCommands: Command[] = [
   {
     name: "todo",
-    description: "Insert a task checkbox",
     run: () => "- [ ] ",
-    cursorOffset: 6,
+    cursorOffset: 6, // Places cursor after "- [ ] " to start typing task
   },
   {
     name: "code",
-    description: "Insert a code block",
     run: () => "```\n\n```",
-    cursorOffset: 4,
+    cursorOffset: 4, // Places cursor on empty line between code fences
   },
   {
     name: "link",
-    description: "Insert a link",
     run: () => "[text](url)",
-    cursorOffset: 1,
+    cursorOffset: 1, // Places cursor after "[" to type link text
   },
   {
     name: "table",
-    description: "Insert a table",
     run: () => "| Header | Header |\n| ------ | ------ |\n| Cell   | Cell |",
-    cursorOffset: 1,
+    cursorOffset: 1, // Places cursor after first "|" to edit first header
   },
   {
     name: "highlight",
-    description: "Insert highlighted text",
     run: () => "==text==",
-    cursorOffset: 2,
+    cursorOffset: 2, // Places cursor between "==" markers to type highlighted text
   },
 ];

web/src/components/MemoEditor/Editor/useListAutoCompletion.ts

@@ -68,7 +68,6 @@ export function useListAutoCompletion({ editorRef, editorActions, isInIME }: Use
           // Remove the empty list marker and exit list mode
           const lineStartPos = cursorPosition - currentLine.length;
           actions.removeText(lineStartPos, currentLine.length);
-          actions.insertText("\n");
         } else {
           // Continue the list with the next item
           const continuation = generateListContinuation(listInfo);
@@ -82,5 +81,5 @@ export function useListAutoCompletion({ editorRef, editorActions, isInIME }: Use
     return () => {
       editor.removeEventListener("keydown", handleKeyDown);
     };
-  }, [editorRef.current]);
+  }, []); // Editor ref is stable; state accessed via refs to avoid stale closures
 }

web/src/components/MemoEditor/types/command.ts

@@ -1,6 +1,5 @@
 export type Command = {
   name: string;
-  description?: string;
   run: () => string;
   cursorOffset?: number;
 };