I recently had to build text input that wraps to the next line but has non editable element at the start. Apparently it is quite easy to build with content editable here is the code snippet that does that
import React, { useCallback } from "react";
const WrappingInput = () => {
const handlePaste = useCallback(event => {
event.preventDefault();
const value = event.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, value);
}, []);
return (
<div className="wrapping-input">
<span>Label</span>
<span contentEditable onPaste={handlePaste} />
</div>
);
};
export default WrappingInput;
and the corresponding css
.wrapping-input > span:first-child {
padding: 0.1em 0.5em;
background: #ccc;
}
.wrapping-input > span:last-child {
padding: 0.1em 0.5em;
outline: none;
}
and you get text input like this.
Top comments (0)