mirror of https://github.com/usememos/memos.git
refactor(web): improve CommandSuggestions and TagSuggestions components
- Extract shared logic into useSuggestions custom hook - Create SuggestionsPopup component for consistent rendering - Standardize filtering logic between both components - Remove code duplication and improve maintainability - Reduce component complexity from ~130 lines to ~55 lines each - Replace Fuse.js with simpler string filtering for consistency - Add proper TypeScript interfaces and documentation The refactoring maintains all existing functionality while making the codebase more maintainable and consistent.
This commit is contained in:
Claude
parent
bd21338fdb
commit
f11c355446
|
|
@ -1,130 +1,53 @@
|
|||
import { observer } from "mobx-react-lite";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import getCaretCoordinates from "textarea-caret";
|
||||
import OverflowTip from "@/components/kit/OverflowTip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { EditorRefActions } from ".";
|
||||
import { Command } from "../types/command";
|
||||
import { SuggestionsPopup } from "./SuggestionsPopup";
|
||||
import { useSuggestions } from "./useSuggestions";
|
||||
|
||||
type Props = {
|
||||
interface CommandSuggestionsProps {
|
||||
editorRef: React.RefObject<HTMLTextAreaElement>;
|
||||
editorActions: React.ForwardedRef<EditorRefActions>;
|
||||
commands: Command[];
|
||||
};
|
||||
}
|
||||
|
||||
type Position = { left: number; top: number; height: number };
|
||||
const CommandSuggestions = observer(({ editorRef, editorActions, commands }: CommandSuggestionsProps) => {
|
||||
const { position, suggestions, selectedIndex, isVisible, handleItemSelect } = useSuggestions({
|
||||
editorRef,
|
||||
editorActions,
|
||||
triggerChar: "/",
|
||||
items: commands,
|
||||
filterItems: (items, searchQuery) => {
|
||||
// Show all commands when no search query
|
||||
if (!searchQuery) return items;
|
||||
// Filter commands that start with the search query
|
||||
return items.filter((cmd) => cmd.name.toLowerCase().startsWith(searchQuery));
|
||||
},
|
||||
onAutocomplete: (cmd, word, index, actions) => {
|
||||
actions.removeText(index, word.length);
|
||||
actions.insertText(cmd.run());
|
||||
if (cmd.cursorOffset) {
|
||||
actions.setCursorPosition(actions.getCursorPosition() + cmd.cursorOffset);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const CommandSuggestions = observer(({ editorRef, editorActions, commands }: Props) => {
|
||||
const [position, setPosition] = useState<Position | null>(null);
|
||||
const [selected, select] = useState(0);
|
||||
const selectedRef = useRef(selected);
|
||||
selectedRef.current = selected;
|
||||
if (!isVisible || !position) return null;
|
||||
|
||||
const hide = () => setPosition(null);
|
||||
|
||||
const getCurrentWord = (): [word: string, startIndex: number] => {
|
||||
const editor = editorRef.current;
|
||||
if (!editor) return ["", 0];
|
||||
const cursorPos = editor.selectionEnd;
|
||||
const before = editor.value.slice(0, cursorPos).match(/\S*$/) || { 0: "", index: cursorPos };
|
||||
const after = editor.value.slice(cursorPos).match(/^\S*/) || { 0: "" };
|
||||
return [before[0] + after[0], before.index ?? cursorPos];
|
||||
};
|
||||
|
||||
// Filter commands based on the current word after the slash
|
||||
const suggestionsRef = useRef<Command[]>([]);
|
||||
suggestionsRef.current = (() => {
|
||||
const [word] = getCurrentWord();
|
||||
if (!word.startsWith("/")) return [];
|
||||
const search = word.slice(1).toLowerCase();
|
||||
if (!search) return commands;
|
||||
return commands.filter((cmd) => cmd.name.toLowerCase().startsWith(search));
|
||||
})();
|
||||
|
||||
const isVisibleRef = useRef(false);
|
||||
isVisibleRef.current = !!(position && suggestionsRef.current.length > 0);
|
||||
|
||||
const autocomplete = (cmd: Command) => {
|
||||
if (!editorActions || !("current" in editorActions) || !editorActions.current) return;
|
||||
const [word, index] = getCurrentWord();
|
||||
editorActions.current.removeText(index, word.length);
|
||||
editorActions.current.insertText(cmd.run());
|
||||
if (cmd.cursorOffset) {
|
||||
editorActions.current.setCursorPosition(editorActions.current.getCursorPosition() + cmd.cursorOffset);
|
||||
}
|
||||
hide();
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (!isVisibleRef.current) return;
|
||||
const suggestions = suggestionsRef.current;
|
||||
const selected = selectedRef.current;
|
||||
if (["Escape", "ArrowLeft", "ArrowRight"].includes(e.code)) hide();
|
||||
if ("ArrowDown" === e.code) {
|
||||
select((selected + 1) % suggestions.length);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
if ("ArrowUp" === e.code) {
|
||||
select((selected - 1 + suggestions.length) % suggestions.length);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
if (["Enter", "Tab"].includes(e.code)) {
|
||||
autocomplete(suggestions[selected]);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
};
|
||||
|
||||
const handleInput = () => {
|
||||
const editor = editorRef.current;
|
||||
if (!editor) return;
|
||||
select(0);
|
||||
const [word, index] = getCurrentWord();
|
||||
const currentChar = editor.value[editor.selectionEnd];
|
||||
const isActive = word.startsWith("/") && currentChar !== "/";
|
||||
const caretCordinates = getCaretCoordinates(editor, index);
|
||||
caretCordinates.top -= editor.scrollTop;
|
||||
if (isActive) {
|
||||
setPosition(caretCordinates);
|
||||
} else {
|
||||
hide();
|
||||
}
|
||||
};
|
||||
|
||||
const listenersAreRegisteredRef = useRef(false);
|
||||
const registerListeners = () => {
|
||||
const editor = editorRef.current;
|
||||
if (!editor || listenersAreRegisteredRef.current) return;
|
||||
editor.addEventListener("click", hide);
|
||||
editor.addEventListener("blur", hide);
|
||||
editor.addEventListener("keydown", handleKeyDown);
|
||||
editor.addEventListener("input", handleInput);
|
||||
listenersAreRegisteredRef.current = true;
|
||||
};
|
||||
useEffect(registerListeners, [!!editorRef.current]);
|
||||
|
||||
if (!isVisibleRef.current || !position) return null;
|
||||
return (
|
||||
<div
|
||||
className="z-20 p-1 mt-1 -ml-2 absolute max-w-48 gap-px rounded font-mono flex flex-col justify-start items-start overflow-auto shadow bg-popover"
|
||||
style={{ left: position.left, top: position.top + position.height }}
|
||||
>
|
||||
{suggestionsRef.current.map((cmd, i) => (
|
||||
<div
|
||||
key={cmd.name}
|
||||
onMouseDown={() => autocomplete(cmd)}
|
||||
className={cn(
|
||||
"rounded p-1 px-2 w-full truncate text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground",
|
||||
i === selected ? "bg-accent text-accent-foreground" : "",
|
||||
)}
|
||||
>
|
||||
<SuggestionsPopup
|
||||
position={position}
|
||||
suggestions={suggestions}
|
||||
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>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
import { ReactNode } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Position } from "./useSuggestions";
|
||||
|
||||
interface SuggestionsPopupProps<T> {
|
||||
position: Position;
|
||||
suggestions: T[];
|
||||
selectedIndex: number;
|
||||
onItemSelect: (item: T) => void;
|
||||
renderItem: (item: T, isSelected: boolean) => ReactNode;
|
||||
getItemKey: (item: T, index: number) => string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shared popup component for displaying suggestion items.
|
||||
* Provides consistent styling and behavior across different suggestion types.
|
||||
*/
|
||||
export function SuggestionsPopup<T>({
|
||||
position,
|
||||
suggestions,
|
||||
selectedIndex,
|
||||
onItemSelect,
|
||||
renderItem,
|
||||
getItemKey,
|
||||
}: SuggestionsPopupProps<T>) {
|
||||
return (
|
||||
<div
|
||||
className="z-20 p-1 mt-1 -ml-2 absolute max-w-48 gap-px rounded font-mono flex flex-col justify-start items-start overflow-auto shadow bg-popover"
|
||||
style={{ left: position.left, top: position.top + position.height }}
|
||||
>
|
||||
{suggestions.map((item, i) => (
|
||||
<div
|
||||
key={getItemKey(item, i)}
|
||||
onMouseDown={() => onItemSelect(item)}
|
||||
className={cn(
|
||||
"rounded p-1 px-2 w-full truncate text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground",
|
||||
i === selectedIndex ? "bg-accent text-accent-foreground" : "",
|
||||
)}
|
||||
>
|
||||
{renderItem(item, i === selectedIndex)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,132 +1,55 @@
|
|||
import Fuse from "fuse.js";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import getCaretCoordinates from "textarea-caret";
|
||||
import { useMemo } from "react";
|
||||
import OverflowTip from "@/components/kit/OverflowTip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { userStore } from "@/store";
|
||||
import { EditorRefActions } from ".";
|
||||
import { SuggestionsPopup } from "./SuggestionsPopup";
|
||||
import { useSuggestions } from "./useSuggestions";
|
||||
|
||||
type Props = {
|
||||
interface TagSuggestionsProps {
|
||||
editorRef: React.RefObject<HTMLTextAreaElement>;
|
||||
editorActions: React.ForwardedRef<EditorRefActions>;
|
||||
};
|
||||
}
|
||||
|
||||
type Position = { left: number; top: number; height: number };
|
||||
const TagSuggestions = observer(({ editorRef, editorActions }: TagSuggestionsProps) => {
|
||||
// Sort tags by usage count (descending), then alphabetically
|
||||
const sortedTags = useMemo(
|
||||
() =>
|
||||
Object.entries(userStore.state.tagCount)
|
||||
.sort((a, b) => a[0].localeCompare(b[0]))
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.map(([tag]) => tag),
|
||||
[userStore.state.tagCount],
|
||||
);
|
||||
|
||||
const TagSuggestions = observer(({ editorRef, editorActions }: Props) => {
|
||||
const [position, setPosition] = useState<Position | null>(null);
|
||||
const [selected, select] = useState(0);
|
||||
const selectedRef = useRef(selected);
|
||||
selectedRef.current = selected;
|
||||
const tags = Object.entries(userStore.state.tagCount)
|
||||
.sort((a, b) => a[0].localeCompare(b[0]))
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.map(([tag]) => tag);
|
||||
const { position, suggestions, selectedIndex, isVisible, handleItemSelect } = useSuggestions({
|
||||
editorRef,
|
||||
editorActions,
|
||||
triggerChar: "#",
|
||||
items: sortedTags,
|
||||
filterItems: (items, searchQuery) => {
|
||||
// Show all tags when no search query
|
||||
if (!searchQuery) return items;
|
||||
// Filter tags that contain the search query
|
||||
return items.filter((tag) => tag.toLowerCase().includes(searchQuery));
|
||||
},
|
||||
onAutocomplete: (tag, word, index, actions) => {
|
||||
actions.removeText(index, word.length);
|
||||
actions.insertText(`#${tag}`);
|
||||
},
|
||||
});
|
||||
|
||||
const hide = () => setPosition(null);
|
||||
if (!isVisible || !position) return null;
|
||||
|
||||
const getCurrentWord = (): [word: string, startIndex: number] => {
|
||||
const editor = editorRef.current;
|
||||
if (!editor) return ["", 0];
|
||||
const cursorPos = editor.selectionEnd;
|
||||
const before = editor.value.slice(0, cursorPos).match(/\S*$/) || { 0: "", index: cursorPos };
|
||||
const after = editor.value.slice(cursorPos).match(/^\S*/) || { 0: "" };
|
||||
return [before[0] + after[0], before.index ?? cursorPos];
|
||||
};
|
||||
|
||||
const suggestionsRef = useRef<string[]>([]);
|
||||
suggestionsRef.current = (() => {
|
||||
const search = getCurrentWord()[0].slice(1).toLowerCase();
|
||||
if (search === "") {
|
||||
return tags; // Show all tags when no search term
|
||||
}
|
||||
const fuse = new Fuse(tags);
|
||||
return fuse.search(search).map((result) => result.item);
|
||||
})();
|
||||
|
||||
const isVisibleRef = useRef(false);
|
||||
isVisibleRef.current = !!(position && suggestionsRef.current.length > 0);
|
||||
|
||||
const autocomplete = (tag: string) => {
|
||||
if (!editorActions || !("current" in editorActions) || !editorActions.current) return;
|
||||
const [word, index] = getCurrentWord();
|
||||
editorActions.current.removeText(index, word.length);
|
||||
editorActions.current.insertText(`#${tag}`);
|
||||
hide();
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (!isVisibleRef.current) return;
|
||||
const suggestions = suggestionsRef.current;
|
||||
const selected = selectedRef.current;
|
||||
if (["Escape", "ArrowLeft", "ArrowRight"].includes(e.code)) hide();
|
||||
if ("ArrowDown" === e.code) {
|
||||
select((selected + 1) % suggestions.length);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
if ("ArrowUp" === e.code) {
|
||||
select((selected - 1 + suggestions.length) % suggestions.length);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
if (["Enter", "Tab"].includes(e.code)) {
|
||||
autocomplete(suggestions[selected]);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
};
|
||||
|
||||
const handleInput = () => {
|
||||
const editor = editorRef.current;
|
||||
if (!editor) return;
|
||||
|
||||
select(0);
|
||||
const [word, index] = getCurrentWord();
|
||||
const currentChar = editor.value[editor.selectionEnd];
|
||||
const isActive = word.startsWith("#") && currentChar !== "#";
|
||||
|
||||
const caretCordinates = getCaretCoordinates(editor, index);
|
||||
caretCordinates.top -= editor.scrollTop;
|
||||
if (isActive) {
|
||||
setPosition(caretCordinates);
|
||||
} else {
|
||||
hide();
|
||||
}
|
||||
};
|
||||
|
||||
const listenersAreRegisteredRef = useRef(false);
|
||||
const registerListeners = () => {
|
||||
const editor = editorRef.current;
|
||||
if (!editor || listenersAreRegisteredRef.current) return;
|
||||
editor.addEventListener("click", hide);
|
||||
editor.addEventListener("blur", hide);
|
||||
editor.addEventListener("keydown", handleKeyDown);
|
||||
editor.addEventListener("input", handleInput);
|
||||
listenersAreRegisteredRef.current = true;
|
||||
};
|
||||
useEffect(registerListeners, [!!editorRef.current]);
|
||||
|
||||
if (!isVisibleRef.current || !position) return null;
|
||||
return (
|
||||
<div
|
||||
className="z-20 p-1 mt-1 -ml-2 absolute max-w-48 gap-px rounded font-mono flex flex-col justify-start items-start overflow-auto shadow bg-popover"
|
||||
style={{ left: position.left, top: position.top + position.height }}
|
||||
>
|
||||
{suggestionsRef.current.map((tag, i) => (
|
||||
<div
|
||||
key={tag}
|
||||
onMouseDown={() => autocomplete(tag)}
|
||||
className={cn(
|
||||
"rounded p-1 px-2 w-full truncate text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground",
|
||||
i === selected ? "bg-accent text-accent-foreground" : "",
|
||||
)}
|
||||
>
|
||||
<OverflowTip>#{tag}</OverflowTip>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<SuggestionsPopup
|
||||
position={position}
|
||||
suggestions={suggestions}
|
||||
selectedIndex={selectedIndex}
|
||||
onItemSelect={handleItemSelect}
|
||||
getItemKey={(tag) => tag}
|
||||
renderItem={(tag) => <OverflowTip>#{tag}</OverflowTip>}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,155 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import getCaretCoordinates from "textarea-caret";
|
||||
import { EditorRefActions } from ".";
|
||||
|
||||
export type Position = { left: number; top: number; height: number };
|
||||
|
||||
export interface UseSuggestionsOptions<T> {
|
||||
editorRef: React.RefObject<HTMLTextAreaElement>;
|
||||
editorActions: React.ForwardedRef<EditorRefActions>;
|
||||
triggerChar: string;
|
||||
items: T[];
|
||||
filterItems: (items: T[], searchQuery: string) => T[];
|
||||
onAutocomplete: (item: T, word: string, startIndex: number, actions: EditorRefActions) => void;
|
||||
}
|
||||
|
||||
export interface UseSuggestionsReturn<T> {
|
||||
position: Position | null;
|
||||
suggestions: T[];
|
||||
selectedIndex: number;
|
||||
isVisible: boolean;
|
||||
handleItemSelect: (item: T) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shared hook for managing suggestion popups in the editor.
|
||||
* Handles positioning, keyboard navigation, filtering, and autocomplete logic.
|
||||
*/
|
||||
export function useSuggestions<T>({
|
||||
editorRef,
|
||||
editorActions,
|
||||
triggerChar,
|
||||
items,
|
||||
filterItems,
|
||||
onAutocomplete,
|
||||
}: UseSuggestionsOptions<T>): UseSuggestionsReturn<T> {
|
||||
const [position, setPosition] = useState<Position | null>(null);
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
|
||||
// Use refs to avoid stale closures in event handlers
|
||||
const selectedRef = useRef(selectedIndex);
|
||||
selectedRef.current = selectedIndex;
|
||||
|
||||
const getCurrentWord = (): [word: string, startIndex: number] => {
|
||||
const editor = editorRef.current;
|
||||
if (!editor) return ["", 0];
|
||||
const cursorPos = editor.selectionEnd;
|
||||
const before = editor.value.slice(0, cursorPos).match(/\S*$/) || { 0: "", index: cursorPos };
|
||||
const after = editor.value.slice(cursorPos).match(/^\S*/) || { 0: "" };
|
||||
return [before[0] + after[0], before.index ?? cursorPos];
|
||||
};
|
||||
|
||||
const hide = () => setPosition(null);
|
||||
|
||||
// Filter items based on the current word after the trigger character
|
||||
const suggestionsRef = useRef<T[]>([]);
|
||||
suggestionsRef.current = (() => {
|
||||
const [word] = getCurrentWord();
|
||||
if (!word.startsWith(triggerChar)) return [];
|
||||
const searchQuery = word.slice(triggerChar.length).toLowerCase();
|
||||
return filterItems(items, searchQuery);
|
||||
})();
|
||||
|
||||
const isVisibleRef = useRef(false);
|
||||
isVisibleRef.current = !!(position && suggestionsRef.current.length > 0);
|
||||
|
||||
const handleAutocomplete = (item: T) => {
|
||||
if (!editorActions || !("current" in editorActions) || !editorActions.current) return;
|
||||
const [word, index] = getCurrentWord();
|
||||
onAutocomplete(item, word, index, editorActions.current);
|
||||
hide();
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (!isVisibleRef.current) return;
|
||||
|
||||
const suggestions = suggestionsRef.current;
|
||||
const selected = selectedRef.current;
|
||||
|
||||
// Hide on Escape or horizontal arrows
|
||||
if (["Escape", "ArrowLeft", "ArrowRight"].includes(e.code)) {
|
||||
hide();
|
||||
return;
|
||||
}
|
||||
|
||||
// Navigate down
|
||||
if (e.code === "ArrowDown") {
|
||||
setSelectedIndex((selected + 1) % suggestions.length);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
// Navigate up
|
||||
if (e.code === "ArrowUp") {
|
||||
setSelectedIndex((selected - 1 + suggestions.length) % suggestions.length);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
// Accept suggestion
|
||||
if (["Enter", "Tab"].includes(e.code)) {
|
||||
handleAutocomplete(suggestions[selected]);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
};
|
||||
|
||||
const handleInput = () => {
|
||||
const editor = editorRef.current;
|
||||
if (!editor) return;
|
||||
|
||||
setSelectedIndex(0);
|
||||
const [word, index] = getCurrentWord();
|
||||
const currentChar = editor.value[editor.selectionEnd];
|
||||
const isActive = word.startsWith(triggerChar) && currentChar !== triggerChar;
|
||||
|
||||
if (isActive) {
|
||||
const caretCoordinates = getCaretCoordinates(editor, index);
|
||||
caretCoordinates.top -= editor.scrollTop;
|
||||
setPosition(caretCoordinates);
|
||||
} else {
|
||||
hide();
|
||||
}
|
||||
};
|
||||
|
||||
// Register event listeners
|
||||
const listenersRegisteredRef = useRef(false);
|
||||
useEffect(() => {
|
||||
const editor = editorRef.current;
|
||||
if (!editor || listenersRegisteredRef.current) return;
|
||||
|
||||
editor.addEventListener("click", hide);
|
||||
editor.addEventListener("blur", hide);
|
||||
editor.addEventListener("keydown", handleKeyDown);
|
||||
editor.addEventListener("input", handleInput);
|
||||
listenersRegisteredRef.current = true;
|
||||
|
||||
return () => {
|
||||
editor.removeEventListener("click", hide);
|
||||
editor.removeEventListener("blur", hide);
|
||||
editor.removeEventListener("keydown", handleKeyDown);
|
||||
editor.removeEventListener("input", handleInput);
|
||||
listenersRegisteredRef.current = false;
|
||||
};
|
||||
}, [editorRef.current]);
|
||||
|
||||
return {
|
||||
position,
|
||||
suggestions: suggestionsRef.current,
|
||||
selectedIndex,
|
||||
isVisible: isVisibleRef.current,
|
||||
handleItemSelect: handleAutocomplete,
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue