강조 가능한 키워드로 반응 입력

내 마음에 처음 떠오른 것은 누군가 이미 그런 구성 요소를 구축했을 것이고 내가 해야 할 유일한 일은 구현된 솔루션을 적용하는 것뿐이라는 것입니다. 짧은 연구 끝에 별도의 단어를 강조 표시하는 기능이 있는 텍스트 영역과 정확히 작동하는 텍스트 영역을 사용하여 만든 한 가지 예를 찾았습니다 .
또한 StackOverflow의 답변을 통해 이것이 간단한 작업이 아님을 분명히 알 수 있었습니다.

확실한 해결책은 이 구성요소를 두 부분으로 만드는 것이었습니다. 앞에는 투명한 텍스트와 컬러 캐럿이 있는 텍스트 입력 태그와 스타일이 적용된 텍스트를 포함하는 절대적으로 배치된 div가 뒤에 있습니다. 이렇게 함으로써 이미 완전히 사용자 정의 가능한 텍스트를 갖게 되었습니다.

너무 많은 공간을 차지하기 때문에 이 기사에서는 CSS 스타일을 생략하겠습니다. 핵심 원칙은 매우 간단합니다. 글꼴 속성, 패딩 및 크기는 뒷면에 있는 입력 과 div 모두에 대해 동일해야 합니다 .

const [value, setValue] = useState('');

const onChange = (e) => setValue(e.target.value);
const format = (text) => // formatted jsx
<div className="container">
  <div className="text">{format(value)}</div>
  <input type="text" className="field" value={value} onChange={onChange} />
</div>

너무 긴 문자열 입력을 입력하면 필드가 스크롤 되기 시작 하지만 div의 텍스트는 정적 상태로 유지됩니다.

동료와 오랜 논의 끝에 우리는 입력의 왼쪽 스크롤 속성을 가져와서 div 요소에 대해 설정할 수 있다는 것을 깨달았습니다.

// ...
const textBlockRef = useRef(null);
const [scrollValue, setScrollValue] = useState(0);
// ...
const handleScroll = (e) => setScrollValue(e.currentTarget.scrollLeft);

useEffect(() => {
  if (textBlockRef.current) {
    textBlockRef.current.scrollLeft = scrollValue;
  }
}, [scrollValue]);
<!-- ... -->
<div className="text" ref={textBlockRef}>{format(value)}</div>
<input
  type="text"
  className="field"
  value={value}
  onChange={onChange}
  onScroll={handleScroll}
 />
<!-- ... -->

두 번째 문제

알고 보니 첫 번째 문제를 완전히 해결하지 못했고 그것이 두 번째 문제였습니다.

Safari는 입력 요소의 onScroll 속성을 지원하지 않습니다 .

글쎄, 그것은 게임을 바꾸고 (내 생각에는) 내 접근 방식에 대해 정말로 의문을 갖기 시작했습니다. 그러나 Safari가 textarea 요소의 onScroll 속성을 지원한다는 사실을 알게 되어 다행입니다 . 문제가 해결되었습니다. 내가 해야 할 일은 입력[type=”텍스트”] 처럼 보이도록 텍스트 영역의 스타일을 지정하는 것뿐이었습니다 .

<!-- ... -->
<textarea
  className="field"
  ref={ref}
  value={value}
  onChange={onChange}
  onScroll={handleScroll}
  rows={1}
/>
<!-- ... -->

Enter 키를 누르면 textarea가 새 줄을 만듭니다. onKeyDown 핸들러를 만들고 Enter 기본 동작을 취소하면 쉽게 처리할 수 있습니다. 또한 필드가 양식 태그로 래핑된 경우 요청을 제출 해야 합니다 .

// ...
  const submitHandler = (e) => {
    if (e.keyCode === 13 || e.key === "Enter" || e.which === 13) {
      if (!e.repeat && e.target.form) {
        e.target.form.submit();
      }
      e.preventDefault();
    }
  };
// ...
<!-- ... -->
<textarea
  className="field"
  ref={ref}
  value={value}
  onChange={onChange}
  onScroll={handleScroll}
  onKeyDown={submitHandler}
  rows={1}
/>
<!-- ... -->

아마도 이 솔루션에서 더 많은 문제가 발견될 것이며 발견한 내용을 댓글로 공유해 주시면 기쁠 것입니다.