import { blockHasType, BlockSchema, InlineContentSchema, StyleSchema, } from "@blocknote/core"; import { RiImageEditFill } from "react-icons/ri"; import { useComponentsContext } from "../../../editor/ComponentsContext.js"; import { usePortalElement } from "../../../editor/PortalElementOverride.js"; import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor.js"; import { useEditorState } from "../../../hooks/useEditorState.js"; import { useDictionary } from "../../../i18n/dictionary.js"; import { FilePanel } from "../../FilePanel/FilePanel.js"; export const FileReplaceButton = () => { 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", }) ) { return undefined; } return block; }, }); if (block === undefined) { return null; } return ( { // 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 ``. if (!open) { editor.focus(); } }} // Portal the popover into the editor's themed portal target so it // inherits styling and escapes any scroll-container overflow clipping. portalElement={portalElement} > } /> ); };