bytelyst/learning_ai_notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): close tone dropdown on outside click

Browse Source 
Add useRef + useEffect mousedown listener to dismiss the Change Tone
dropdown when clicking outside. Prevents stale dropdown from lingering.
This commit is contained in:
saravanakumardb1 2026-04-06 10:46:03 -07:00
parent f2c3258b53
commit b424b490be
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/components/NoteEditor.tsx
View File

@ -55,9 +55,21 @@ export function NoteEditor({
const [copilotBusy, setCopilotBusy] = useState(false); const [copilotBusy, setCopilotBusy] = useState(false);
const [toneMenuOpen, setToneMenuOpen] = useState(false); const [toneMenuOpen, setToneMenuOpen] = useState(false);
const [explainResult, setExplainResult] = useState<string | null>(null); const [explainResult, setExplainResult] = useState<string | null>(null);
const toneMenuRef = useRef<HTMLDivElement>(null);
const onSaveRef = useRef(onSave); const onSaveRef = useRef(onSave);
onSaveRef.current = onSave; onSaveRef.current = onSave;
useEffect(() => {
if (!toneMenuOpen) return;
const handler = (e: MouseEvent) => {
if (toneMenuRef.current && !toneMenuRef.current.contains(e.target as Node)) {
setToneMenuOpen(false);
}
};
document.addEventListener("mousedown", handler);
return () => document.removeEventListener("mousedown", handler);
}, [toneMenuOpen]);
const editor = useEditor({ const editor = useEditor({
extensions: [ extensions: [
StarterKit.configure({ StarterKit.configure({
@ -214,7 +226,7 @@ export function NoteEditor({
<span style={{ width: 1, background: "var(--nl-border-default)", margin: "0 4px", alignSelf: "stretch" }} /> <span style={{ width: 1, background: "var(--nl-border-default)", margin: "0 4px", alignSelf: "stretch" }} />
<span style={{ color: "var(--nl-text-secondary)", fontSize: "var(--nl-fs-sm)", marginRight: 4 }}>AI</span> <span style={{ color: "var(--nl-text-secondary)", fontSize: "var(--nl-fs-sm)", marginRight: 4 }}>AI</span>
<button type="button" disabled={copilotBusy} style={{ ...TOOLBAR_BTN, opacity: copilotBusy ? 0.5 : 1 }} onClick={() => void runCopilot("fix-rewrite")}>Fix & Rewrite</button> <button type="button" disabled={copilotBusy} style={{ ...TOOLBAR_BTN, opacity: copilotBusy ? 0.5 : 1 }} onClick={() => void runCopilot("fix-rewrite")}>Fix & Rewrite</button>
<div style={{ position: "relative" }}> <div ref={toneMenuRef} style={{ position: "relative" }}>
<button type="button" disabled={copilotBusy} style={{ ...TOOLBAR_BTN, opacity: copilotBusy ? 0.5 : 1 }} onClick={() => setToneMenuOpen(!toneMenuOpen)}>Change Tone ▾</button> <button type="button" disabled={copilotBusy} style={{ ...TOOLBAR_BTN, opacity: copilotBusy ? 0.5 : 1 }} onClick={() => setToneMenuOpen(!toneMenuOpen)}>Change Tone ▾</button>
{toneMenuOpen && ( {toneMenuOpen && (
<div style={{ position: "absolute", top: "100%", left: 0, zIndex: 50, background: "var(--nl-surface-card)", border: "1px solid var(--nl-border-default)", borderRadius: "var(--nl-radius-md)", padding: 4, display: "grid", gap: 2, minWidth: 120 }}> <div style={{ position: "absolute", top: "100%", left: 0, zIndex: 50, background: "var(--nl-surface-card)", border: "1px solid var(--nl-border-default)", borderRadius: "var(--nl-radius-md)", padding: 4, display: "grid", gap: 2, minWidth: 120 }}>