import React , { useRef } from 'react' ; import './TitleEditor.css' ; import { HypermergeUrl } from '../ShareLink' ; import { useDocument } from '../Hooks' ; interface Doc { title ? : string ; } interface Props { url : HypermergeUrl ; placeholder ? : string ; preventDrag ? : boolean ; } export default function TitleEditor ( props ) { const [ doc , changeDoc ] = useDocument < Doc > ( props . url ) ; const input = useRef < HTMLInputElement > ( null ) ; const { preventDrag = false , placeholder = '' } = props ; function onKeyDown ( e ) { if ( e . key === 'Enter' || e . key === 'Escape' ) { input . current && input . current . blur ( ) ; } } function onChange ( e ) { changeDoc ( ( doc ) => { doc . title = e . target . value ; } ) ; } function onDragStart ( e ) { if ( preventDrag ) { e . preventDefault ( ) ; e . stopPropagation ( ) ; } } if ( ! doc ) { return null ; } return ( < input ref = { input } draggable = { preventDrag } onDragStart = { onDragStart } type = "text" className = "TitleEditor" value = { doc . title } placeholder = { placeholder } onKeyDown = { onKeyDown } onChange = { onChange } / > ) ; }