Wrapping text input with non editable element at front

javascript

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.

Alt Text

This post is also available on DEV.