TitleBar.css

::placeholder {
	color: hsl(var(--blue-a200));
	opacity: 1;
}

:focus::placeholder{
	color: transparent;
	opacity: 0;
}

TitleBar.js

import React from "react"

import "./NoteTitleBar.css"

const PLACEHOLDER = "Tap here to set the title"

function NoteTitleBar({ state, dispatch, ...props }) {
	const h1    = React.useRef(null)
	const input = React.useRef(null)

	const [width, setWidth] = React.useState(0)

	React.useLayoutEffect(() => {
		const { width } = h1.current.getBoundingClientRect()
		setWidth(width + 4)
	}, [state.title])

	return (
		<header className="relative flex -r :center h:8">
			<div className="absolute hidden no-pointer-events">
				<h1 ref={h1} className="fw:700 fs:1.1 lh:1.4 c:black">
					{state.title || (
						PLACEHOLDER
					)}
				</h1>
			</div>
			<h1>
				{state && (
					<input ref={input}
						className="fw:700 fs:1.1 lh:1.4 c:black" style={{ width, textAlign: "center" }}
							type="text" value={state.title} placeholder={PLACEHOLDER} onChange={e => dispatch.setTitle(e.target.value)}
					/>
				)}
			</h1>
		</header>
	)
}

export default NoteTitleBar