TextLayer 엘리먼트 내용 편집 기능 구현

[choegyumin]

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable

판매를 위한 제품을 만드는 것도 아니고, TextLayer 하위에는 컬러를 입히기 위한 span 태그와, 줄바꿈을 위한 br 태그만 들어가므로 contenteditable로 충분히 구현 가능해보임.

contenteditable 엘리먼트에서 enter를 입력할 때 개행 방식은 다음과 같음.

<!-- Enter -->
<div contenteditable="true">
  <p>사람을 화가 나게 하는 방법 중 하나는 말을 하다 마는 것이</p>
  <p>고</p>
</div>

<!-- Shift + Enter -->
<div contenteditable="true">
  <p>
    사람을 화가 나게 하는 방법 중 하나는 말을 하다 마는 것이
    <br />
    고
  </p>
</div>

키 이벤트가 enter라면 인터셉트해서 차단하고 shift+enter를 발생시켜주거나, 아님 직접 DOM 치환하거나.
또한 Ctrl(Cmd) + Enter 시 완료처리 함.