[Mission5/홍건우] Project_Notion_VanillaJS 과제 #40
Conversation
HongGunWoo
changed the title
| // 커서 위치 불러옴 | ||
| $node.focus(); | ||
|
|
||
| const range = document.createRange(); |
There was a problem hiding this comment.
한글 입력 후 enter 입력 시 range의 출력 값이 다른데 해당 부분이 문제인 것 같습니다.ㅠㅠ
영어, 숫자 입력 후 range 값
한글 입력 후 range 값
There was a problem hiding this comment.
고생하셨습니다! 비주얼적으로도 안정감있고, 컴포넌트 역할분리도 안정적이네요 👍 !!
enter키를 입력하고 나서 커서를 유지하는 방법, h1 태그 등을 적용시키는 방법 등 rich 에디터를 구현하는데 너무 많은 고민을 했었던 것 같습니다ㅠㅠ...
아직도 불안정하다고 생각되고 실제로 고치지 못한 버그도 있는데 위의 동영상을 보면 숫자나 영어로 입력하고 난 후 enter를 입력했을 때 커서가 잘 유지되어서 다음 줄로 넘어가지만,
- 한글을 입력하고 enter를 입력할 경우 커서가 유지되지 않고 이상하게 동작되는 것을 볼 수 있습니다.
- 하지만 한글을 입력하고 난 후 화살표 키를 사용해 커서를 오른쪽으로 이동시키면 제대로 동작하는 것을 확인했습니다.
- 찾아보니 한글 입력 시 조합과 관련된 문제 때문인 것 같아서 isComposing을 적용해봤으나 해결하지 못했습니다. 어떻게 하면 해결할 수 있을지 궁금합니다.
해당 이슈는 저도 겪어보진 못했어서, 조금 더 디버깅을 해봐야겠네요 🤔
slack 채널에도 공유해보고 강사님이나 다른분들께 조언을 구해보는것도 방법일듯합니다.
또, 전체적으로 rich 에디터를 구현하는데 사용한 커서 유지 방법이나 구현된 방식이 어느 부분이 잘못되고 올바르지 않은 코드인지도 궁금합니다!
ContentEditable를 활용했을때 커서 유지는 보편적으로 해당 방법으로 구현하는 것으로 알고 있습니다.
다만 키보드 액션과 함께 다이나믹학 에디터를 구현하고 계셔서 사이드 이펙트 파악이 어려운 것 같습니다.
키보드 액션에대한 엣지케이스가 많기도 한 듯해서,
1차적으로는 위지윅 에디터처럼 버튼 형태로 텍스트 스타일링을 하는 방식으로 스펙을 쪼개가는 것도 방법일 듯 합니다.
| if (doc) { | ||
| div.innerHTML = `<span data-id=${doc.id} class="linkToDoc">${doc.title}</span>`; | ||
| } | ||
| doc = null; |
There was a problem hiding this comment.
"/ aaa"를 입력후 "aaa" title을 가진 문서가 존재하는 경우 span 태그로 변하게 됩니다. 그런데 변경된 span태그가 있는 줄에서 enter를 입력하고 문서를 계속 작성할 경우 span태그가 다음 줄에도 적용되는 문제가 발생해서 해결해보려고 작성한 코드였는데 실패했었습니다 ㅎㅎ... ㅠㅠ
📌 과제 설명
2023-07-06.11.31.05.mov
링크
Main 컴포넌트는 DocumentsList 컴포넌트와 DocumentDetailPage 컴포넌트를 렌더링하며
DocumentsList는 화면 좌측의 리스트를, DocumentDetailPage는 document 클릭 시 우측에 에디터 화면을 담당하게 구현하였습니다.
👩💻 요구 사항과 구현 내용
기본 요구사항
화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링
Document Save API를 이용해 지속적으로 서버에 저장되도록 구현
History API를 이용해 SPA 형태로 구현
보너스 요구사항
✅ PR 포인트 & 궁금한 점
2023-07-06.11.47.49.mov
enter키를 입력하고 나서 커서를 유지하는 방법, h1 태그 등을 적용시키는 방법 등 rich 에디터를 구현하는데 너무 많은 고민을 했었던 것 같습니다ㅠㅠ...
아직도 불안정하다고 생각되고 실제로 고치지 못한 버그도 있는데 위의 동영상을 보면 숫자나 영어로 입력하고 난 후 enter를 입력했을 때 커서가 잘 유지되어서 다음 줄로 넘어가지만 한글을 입력하고 enter를 입력할 경우 커서가 유지되지 않고 이상하게 동작되는 것을 볼 수 있습니다. 하지만 한글을 입력하고 난 후 화살표 키를 사용해 커서를 오른쪽으로 이동시키면 제대로 동작하는 것을 확인했습니다.
찾아보니 한글 입력 시 조합과 관련된 문제 때문인 것 같아서 isComposing을 적용해봤으나 해결하지 못했습니다. 어떻게 하면 해결할 수 있을지 궁금합니다.
또, 전체적으로 rich 에디터를 구현하는데 사용한 커서 유지 방법이나 구현된 방식이 어느 부분이 잘못되고 올바르지 않은 코드인지도 궁금합니다!