admin/infinite-canvas
1
0
Fork 0
mirror of https://github.com/basketikun/infinite-canvas.git synced 2026-08-06 01:14:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance MentionMenu with active item scrolling functionality

Browse Source
This commit is contained in:
soldier
2026-06-16 11:00:32 +08:00
parent d3923e21e0
commit 0d90465339
1 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/(user)/canvas/components/canvas-config-composer.tsx
+7
View File
@@ -183,6 +183,12 @@ export function CanvasConfigComposer({ value, inputs, onChange, onClose }: Canva
function MentionMenu({ inputs, allInputs, activeIndex, theme, onSelect }: { inputs: NodeGenerationInput[]; allInputs: NodeGenerationInput[]; activeIndex: number; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onSelect: (input: NodeGenerationInput) => void }) { function MentionMenu({ inputs, allInputs, activeIndex, theme, onSelect }: { inputs: NodeGenerationInput[]; allInputs: NodeGenerationInput[]; activeIndex: number; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onSelect: (input: NodeGenerationInput) => void }) {
const selectedRef = useRef(false); const selectedRef = useRef(false);
const activeItemRef = useRef<HTMLButtonElement | null>(null);
useEffect(() => {
activeItemRef.current?.scrollIntoView({ block: "nearest" });
}, [activeIndex, inputs]);
const selectInput = (input: NodeGenerationInput) => { const selectInput = (input: NodeGenerationInput) => {
if (selectedRef.current) return; if (selectedRef.current) return;
selectedRef.current = true; selectedRef.current = true;
@@ -194,6 +200,7 @@ function MentionMenu({ inputs, allInputs, activeIndex, theme, onSelect }: { inpu
{inputs.map((input, index) => ( {inputs.map((input, index) => (
<button <button
key={input.nodeId} key={input.nodeId}
ref={index === activeIndex ? activeItemRef : undefined}
type="button" type="button"
className="flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs transition" className="flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs transition"
style={{ background: index === activeIndex ? theme.toolbar.activeBg : "transparent", color: index === activeIndex ? theme.toolbar.activeText : theme.node.text }} style={{ background: index === activeIndex ? theme.toolbar.activeBg : "transparent", color: index === activeIndex ? theme.toolbar.activeText : theme.node.text }}