From 5925e3cfc13fb35ae3f6a4ba4755527cea4755e6 Mon Sep 17 00:00:00 2001
From: Johnny <yourselfhosted@gmail.com>
Date: Sun, 9 Nov 2025 13:09:50 +0800
Subject: [PATCH] chore(web): simplify command system and improve editor UX
 (#5242)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../MemoEditor/ActionButton/InsertMenu.tsx        |  4 ++--
 .../MemoEditor/Editor/CommandSuggestions.tsx      |  7 +------
 web/src/components/MemoEditor/Editor/commands.ts  | 15 +++++----------
 .../MemoEditor/Editor/useListAutoCompletion.ts    |  3 +--
 web/src/components/MemoEditor/types/command.ts    |  1 -
 5 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/web/src/components/MemoEditor/ActionButton/InsertMenu.tsx b/web/src/components/MemoEditor/ActionButton/InsertMenu.tsx
index 69975eccf..fdaebe2cf 100644
--- a/web/src/components/MemoEditor/ActionButton/InsertMenu.tsx
+++ b/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)}>
diff --git a/web/src/components/MemoEditor/Editor/CommandSuggestions.tsx b/web/src/components/MemoEditor/Editor/CommandSuggestions.tsx
index db1c99a89..9e4dd5c7f 100644
--- a/web/src/components/MemoEditor/Editor/CommandSuggestions.tsx
+++ b/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) => (
-        <>
-          <OverflowTip>/{cmd.name}</OverflowTip>
-          {cmd.description && <span className="ml-2 text-xs text-muted-foreground">{cmd.description}</span>}
-        </>
-      )}
+      renderItem={(cmd) => <OverflowTip>/{cmd.name}</OverflowTip>}
     />
   );
 });
diff --git a/web/src/components/MemoEditor/Editor/commands.ts b/web/src/components/MemoEditor/Editor/commands.ts
index edc375842..4cf7e225b 100644
--- a/web/src/components/MemoEditor/Editor/commands.ts
+++ b/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
   },
 ];
diff --git a/web/src/components/MemoEditor/Editor/useListAutoCompletion.ts b/web/src/components/MemoEditor/Editor/useListAutoCompletion.ts
index ce250b1ef..408018ddf 100644
--- a/web/src/components/MemoEditor/Editor/useListAutoCompletion.ts
+++ b/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
 }
diff --git a/web/src/components/MemoEditor/types/command.ts b/web/src/components/MemoEditor/types/command.ts
index 8d472506c..aab2a38ef 100644
--- a/web/src/components/MemoEditor/types/command.ts
+++ b/web/src/components/MemoEditor/types/command.ts
@@ -1,6 +1,5 @@
 export type Command = {
   name: string;
-  description?: string;
   run: () => string;
   cursorOffset?: number;
 };