개발 에디터 개발
원하는 대로 다 추가가 되는게 너무 재미있긴 하다. editor.css 파일에다가 아래 코드를 적용했다. .editor-body pre { margin: 1em 0; padding: 1em; background: var(--bright-grey); border-radius: 4px; } .editor-body pre code { background: unset; padding: unset; border-radius: unset; } .editor-body code { background: var(--bright-grey); padding: 0.5em; border-radius: 4px; } 굳 잘 적용되쥬??ㅋㅋ
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 오늘부터 작성하는 내용들은 그냥 업데이트 일지라는 제목으로 할까보다. 헤딩 적용 방법을 그냥 무식하게 바꿨다. 기존에 이리저리 위치 계산하고.. 노드 뗐다 붙였다... 엄청나게 뭔가 노력을 했는데 그냥 기존에 있던 커서 탐지 및 복원 로직이 생각보다 스마트해서, 그냥 내용 바꿔치기로 하도록 했다. 방법은 간단하다. 탐지에 앞서 줄을 노멀라이즈 한다. 그 다음에 탐지를 하는데, textContent 기준으로 정규식 판단해서 적용한다. 그다음에 그냥 HTML 날리고 다시 적용시키는 방법을 사용했다. 다만 모든 문자에 대해서 그렇게 적용하면 오버헤드가 너무 많이...
게시판에 카테고리 기능을 추가했다. 사실 UI적인 부분을 추가하는 부분이 크게 어렵지는 않았다. 자바스크립트로 창 열림/닫힘을 구분하는 게 아닌 CSS로 제어하기 얼마 전 습득했던 Tailwind CSS의 플러그인인 DaisyUI의 플로팅 버튼 컴포넌트 사용 방법을 보고 터득한 기술이다. 부모 요소에다가 :focus-within을 걸어버리면 내부 요소에 포커스가 잡혀있는 경우 해당하는 상태로 부모 요소가 지정된다는 사실! 즉, 라벨 요소에 클릭 가능한 요소인 것처럼 인식되게끔 role="button"과 tabindex="0"을 걸어주고, 드롭다운 항목에도 모두 그렇게 해주면 문제는 해결된다. 그러면 자바스크립트 없이도 드롭다운을 구현할 수 있게 되는 놀라운! 선택하면 창이 닫히게 ...
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 키다운 중심 조작에서 뮤테이션옵저버로 기존에 개선한 버전은 각 줄마다 contenteditable을 부여해서 그 안에서 자유롭게 편집 및 데이터가 바인딩되어 작동되도록 했었다. 이 버전만으로도 작동하는 데에는 크게 문제는 없었지만, 문제는 키입력 시 처리해줘야 하는 내용이 너무 많다는 데 있었다. 예를 들면... 화살표 버튼으로 문장 사이를 왔다갔다 해야 하는 경우 커서 위치를 파악하여 앞뒤로 옮겨주는 작업을 해야 했었고, 마찬가지로 백스페이스와 엔터 동작도 그러했다. 무엇보다 가장 큰 문제는, 문장 간 드래그 선택이 안된다는 것이었다. 여러가지로 생각을 ...
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 최대한 충돌이 일어나지 않도록 해보았다. 기존에는 좀 이상했던 것이 사실이다. 렌더링을 걸면서 내용까지 수정하려니 뭐가 이상할래도 많이 이상했겠지... 여러모로 작동이 제대로 안되는 것 같길래 아예 뜯어 고쳤다. 최대한 반응성 있는 방향으로 설계한 것이다. 가장 큰 변화는 자식 요소에 바인딩을 걸지 않았다는 것이다. 바인딩을 걸지 않으니깐 양방향 업데이트든 뭐든 충돌이 발생할 여지가 없다. 한가지 아쉬운 것은 # 을 칠때마다 바로바로 헤딩의 크기가 나타났으면 좋겠는데 그건 나중에 개선을 해볼까 한다. 어쨌든.... 목표는 달성한 것 같아 ...
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) keydown 이벤트와 input 이벤트 분리 기존에는 keydown 이벤트에 setTimeout을 주어 텍스트가 입력되거나 입력이 변경된 후에 대한 처리를 해주었었다. 그런데 이게 좀 불안정했다. 아직도 좀 불안정한 것 같다.. 이렇게 하면 어찌 저찌 되는 것 같다... 다시 한 번 진짜로 해결한 것 같다!!! 원래는 커서가 문장의 맨 처음 가있을 때 백스페이스를 누르면 커서가 이전 문장 맨 뒤에 붙는 게 아니라 맨 앞에 붙는 문제가 있었고, 커서가 어디에 있든지 그 위치에서 엔터를 눌러 줄바꿈 하면 그때도 커서가 다음 문장의 맨 앞에 가는 문제가 있었다...