happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix commands cursor offset and update commands list

This commit is contained in:
Spaghetti 2025-12-08 18:43:20 +00:00
parent 48ce4ccc26
commit cb761e7289
2 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/components/MemoEditor/Editor/CommandSuggestions.tsx
View File

@ -25,11 +25,15 @@ const CommandSuggestions = observer(({ editorRef, editorActions, commands }: Com
onAutocomplete: (cmd, word, index, actions) => { onAutocomplete: (cmd, word, index, actions) => {
// Replace the trigger word with the command output // Replace the trigger word with the command output
actions.removeText(index, word.length); actions.removeText(index, word.length);
const initialPosition = actions.getCursorPosition();
actions.insertText(cmd.run()); actions.insertText(cmd.run());
// Position cursor if command specifies an offset
if (cmd.cursorOffset) { const offset = cmd.cursorRange?.[0];
actions.setCursorPosition(actions.getCursorPosition() + cmd.cursorOffset); if (typeof offset === "undefined") return;
}
const cursorPosition = initialPosition + offset;
const length = cmd.cursorRange?.[1] || 0;
actions.setCursorPosition(cursorPosition, cursorPosition + length);
}, },
}); });

41
web/src/components/MemoEditor/Editor/commands.ts
View File

@ -1,28 +1,47 @@
export interface Command { export interface Command {
name: string; name: string;
run: () => string; run: () => string;
cursorOffset?: number; // Ex.:
// [4] == [4, 0] - cursor offset is 4 chars from initial position
// [7, 2] - cursor offset is 7 chars and 2 next chars selected
// If omitted, cursor stays in the end of the inserted string
cursorRange?: number[];
} }
export const editorCommands: Command[] = [ export const editorCommands: Command[] = [
{ {
name: "todo", name: "code",
run: () => "- [ ] ", run: () => "```js\n\n```", // JS by default as most popular (at least on github)
cursorOffset: 6, // Places cursor after "- [ ] " to start typing task cursorRange: [3, 2],
}, },
{ {
name: "code", // Template from github, but with summary initially selected for better UX
run: () => "```\n\n```", name: "details",
cursorOffset: 4, // Places cursor on empty line between code fences run: () => "<details><summary>Details</summary>\n\n\n</details>",
cursorRange: [18, 7],
},
{
name: "image",
run: () => "![alt text]()", // No need in URL placeholder
cursorRange: [2, 8],
}, },
{ {
name: "link", name: "link",
run: () => "[text](url)", run: () => "[text]()",
cursorOffset: 1, // Places cursor after "[" to type link text cursorRange: [1, 4],
}, },
{ {
name: "table", name: "table",
run: () => "| Header | Header |\n| ------ | ------ |\n| Cell | Cell |", run: () => "| Column1 | Column2 |\n| ------ | ------ |\n| Cell1 | Cell2 |",
cursorOffset: 1, // Places cursor after first "|" to edit first header cursorRange: [2, 7],
},
{
name: "todo",
run: () => "- [ ] ",
},
{
name: "youtube",
run: () => "[![alt text](https://img.youtube.com/vi/VIDEO_ID/0.jpg)](https://www.youtube.com/watch?v=VIDEO_ID)",
cursorRange: [3, 8],
}, },
]; ];