import { blockHasType, BlockSchema, editorHasBlockWithType, InlineContentSchema, StyleSchema, } from "@blocknote/core"; import { ChangeEvent, useCallback, useState } from "react"; import { RiFontFamily } from "react-icons/ri"; import { useComponentsContext } from "../../../editor/ComponentsContext.js"; import { usePortalElement } from "../../../editor/PortalElementOverride.js"; import { ScreenReaderOnlySubmit } from "../../Form/ScreenReaderOnlySubmit.js"; import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor.js"; import { useEditorState } from "../../../hooks/useEditorState.js"; import { useDictionary } from "../../../i18n/dictionary.js"; export const FileRenameButton = () => { const dict = useDictionary(); const Components = useComponentsContext()!; const portalElement = usePortalElement(); const editor = useBlockNoteEditor< BlockSchema, InlineContentSchema, StyleSchema >(); const block = useEditorState({ editor, selector: ({ editor }) => { if (!editor.isEditable) { return undefined; } const selectedBlocks = editor.getSelection()?.blocks || [ editor.getTextCursorPosition().block, ]; if (selectedBlocks.length !== 1) { return undefined; } const block = selectedBlocks[0]; if ( !blockHasType(block, editor, block.type, { url: "string", name: "string", }) ) { return undefined; } return block; }, }); const [popoverOpen, setPopoverOpenState] = useState(false); // Return focus to the editor when closing, so on mobile the on-screen // keyboard and formatting toolbar stay up instead of being dismissed as // focus falls back to ``. const setPopoverOpen = useCallback( (open: boolean) => { if (!open) { editor.focus(); } setPopoverOpenState(open); }, [editor], ); const handleChange = useCallback( (event: ChangeEvent) => { if ( block !== undefined && editorHasBlockWithType(editor, block.type, { name: "string", }) ) { editor.updateBlock(block.id, { props: { name: event.currentTarget.value, }, }); } }, [block, editor], ); if (block === undefined) { return null; } return ( } onClick={() => setPopoverOpen(!popoverOpen)} /> setPopoverOpen(false)} submitButton={} > } value={block.props.name} autoFocus={true} placeholder={ dict.formatting_toolbar.file_rename.input_placeholder[ block.type ] || dict.formatting_toolbar.file_rename.input_placeholder["file"] } onChange={handleChange} /> ); };