Skip to content

fix: save file caption/name on every keystroke instead of on close #2575

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
YousefED wants to merge 1 commit into
base: main
Choose a base branch
from
+38 −51
Open

fix: save file caption/name on every keystroke instead of on close #2575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 19 additions & 25 deletions packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
ChangeEvent,
KeyboardEvent,
useCallback,
useEffect,
useState,
} from "react";
import { RiInputField } from "react-icons/ri";
Expand Down Expand Up @@ -59,54 +58,49 @@ export const FileCaptionButton = () => {
},
});

const [currentEditingCaption, setCurrentEditingCaption] = useState<string>();

useEffect(() => {
if (block === undefined) {
return;
}
setCurrentEditingCaption(block.props.caption);
}, [block]);
const [popoverOpen, setPopoverOpen] = useState(false);
Copy link

@coderabbitai coderabbitai bot Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Reset popover state when the selected block changes.

popoverOpen (Line 61) survives renders where block is undefined (Line 88), so this popover can reopen unexpectedly when a file block is selected again. Please reset popoverOpen when block identity changes.

Suggested fix 
 import {
   ChangeEvent,
   KeyboardEvent,
   useCallback,
+  useEffect,
   useState,
 } from "react";
@@
   const [popoverOpen, setPopoverOpen] = useState(false);
+
+  useEffect(() => {
+    setPopoverOpen(false);
+  }, [block?.id]);

Also applies to: 88-90, 93-96

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In
`@packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx`
at line 61, popoverOpen state is not reset when the selected file block changes,
causing the popover to persist/reopen incorrectly; add a useEffect that watches
the block identity (e.g., block or block.id) and calls setPopoverOpen(false)
whenever the block changes or becomes undefined to ensure the popover closes on
block switches; update FileCaptionButton to use this effect alongside the
existing popover state and handlers so changes at lines around the block usage
(references to popoverOpen, setPopoverOpen, and block) reliably reset the UI.


const handleChange = useCallback(
(event: ChangeEvent<HTMLInputElement>) =>
setCurrentEditingCaption(event.currentTarget.value),
[],
);

const handleEnter = useCallback(
(event: KeyboardEvent) => {
(event: ChangeEvent<HTMLInputElement>) => {
if (
block !== undefined &&
editorHasBlockWithType(editor, block.type, {
caption: "string",
}) &&
event.key === "Enter" &&
!event.nativeEvent.isComposing
})
) {
event.preventDefault();
editor.updateBlock(block.id, {
props: {
caption: currentEditingCaption,
caption: event.currentTarget.value,
},
});
}
},
[block, currentEditingCaption, editor],
[block, editor],
);

const handleKeyDown = useCallback((event: KeyboardEvent) => {
if (event.key === "Enter" && !event.nativeEvent.isComposing) {
event.preventDefault();
setPopoverOpen(false);
}
}, []);

if (block === undefined) {
return null;
}

return (
<Components.Generic.Popover.Root>
<Components.Generic.Popover.Root
open={popoverOpen}
onOpenChange={setPopoverOpen}
>
<Components.Generic.Popover.Trigger>
<Components.FormattingToolbar.Button
className={"bn-button"}
label={dict.formatting_toolbar.file_caption.tooltip}
mainTooltip={dict.formatting_toolbar.file_caption.tooltip}
icon={<RiInputField />}
onClick={() => setPopoverOpen((open) => !open)}
/>
</Components.Generic.Popover.Trigger>
<Components.Generic.Popover.Content
Expand All @@ -117,10 +111,10 @@ export const FileCaptionButton = () => {
<Components.Generic.Form.TextInput
name={"file-caption"}
icon={<RiInputField />}
value={currentEditingCaption || ""}
value={block.props.caption}
autoFocus={true}
placeholder={dict.formatting_toolbar.file_caption.input_placeholder}
onKeyDown={handleEnter}
onKeyDown={handleKeyDown}
onChange={handleChange}
/>
</Components.Generic.Form.Root>
Expand Down
45 changes: 19 additions & 26 deletions packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
ChangeEvent,
KeyboardEvent,
useCallback,
useEffect,
useState,
} from "react";
import { RiFontFamily } from "react-icons/ri";
Expand Down Expand Up @@ -59,49 +58,42 @@ export const FileRenameButton = () => {
},
});

const [currentEditingName, setCurrentEditingName] = useState<string>();

useEffect(() => {
if (block === undefined) {
return;
}

setCurrentEditingName(block.props.name);
}, [block]);
const [popoverOpen, setPopoverOpen] = useState(false);
Copy link

@coderabbitai coderabbitai bot Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Reset popover state when the selected block changes.

Same issue here: popoverOpen can persist while render returns null (Line 88), which may auto-open the rename popover when a file block is selected later. Reset state on block identity changes.

Suggested fix 
 import {
   ChangeEvent,
   KeyboardEvent,
   useCallback,
+  useEffect,
   useState,
 } from "react";
@@
   const [popoverOpen, setPopoverOpen] = useState(false);
+
+  useEffect(() => {
+    setPopoverOpen(false);
+  }, [block?.id]);

Also applies to: 88-90, 93-96

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In
`@packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx`
at line 61, In FileRenameButton, ensure the popoverOpen state is reset whenever
the selected block identity changes: add a useEffect that watches the selected
block (e.g., selectedBlock or selectedBlockId prop) and calls
setPopoverOpen(false) when that value changes so the rename popover cannot
persist across different block selections; update any paths where render returns
null to rely on this reset.


const handleChange = useCallback(
(event: ChangeEvent<HTMLInputElement>) =>
setCurrentEditingName(event.currentTarget.value),
[],
);

const handleEnter = useCallback(
(event: KeyboardEvent) => {
(event: ChangeEvent<HTMLInputElement>) => {
if (
block !== undefined &&
editorHasBlockWithType(editor, block.type, {
name: "string",
}) &&
event.key === "Enter" &&
!event.nativeEvent.isComposing
})
) {
event.preventDefault();
editor.updateBlock(block.id, {
props: {
name: currentEditingName,
name: event.currentTarget.value,
},
});
}
},
[block, currentEditingName, editor],
[block, editor],
);

const handleKeyDown = useCallback((event: KeyboardEvent) => {
if (event.key === "Enter" && !event.nativeEvent.isComposing) {
event.preventDefault();
setPopoverOpen(false);
}
}, []);

if (block === undefined) {
return null;
}

return (
<Components.Generic.Popover.Root>
<Components.Generic.Popover.Root
open={popoverOpen}
onOpenChange={setPopoverOpen}
>
<Components.Generic.Popover.Trigger>
<Components.FormattingToolbar.Button
className={"bn-button"}
Expand All @@ -114,6 +106,7 @@ export const FileRenameButton = () => {
dict.formatting_toolbar.file_rename.tooltip["file"]
}
icon={<RiFontFamily />}
onClick={() => setPopoverOpen((open) => !open)}
/>
</Components.Generic.Popover.Trigger>
<Components.Generic.Popover.Content
Expand All @@ -124,14 +117,14 @@ export const FileRenameButton = () => {
<Components.Generic.Form.TextInput
name={"file-name"}
icon={<RiFontFamily />}
value={currentEditingName || ""}
value={block.props.name}
autoFocus={true}
placeholder={
dict.formatting_toolbar.file_rename.input_placeholder[
block.type
] || dict.formatting_toolbar.file_rename.input_placeholder["file"]
}
onKeyDown={handleEnter}
onKeyDown={handleKeyDown}
onChange={handleChange}
/>
</Components.Generic.Form.Root>
Expand Down
Loading