개발 에디터 개발
원하는 대로 다 추가가 되는게 너무 재미있긴 하다. 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(-...
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 이탤릭체... 넌 누구냐 마크다운 문법에서는 별 한 개로 감싸면 기울임꼴이 된다. 이렇게 그리고 별 두개로 감싸면 굵은 글씨가 된다. 이렇게 그리고 이 두개 조합도 된다. 이렇게 그런데 아무래도 형식이 비슷하다보니 적용되는 순서도 그렇고 검출하는 방식도 그렇고 참 쉽지가 않은 것 같다. 지피티나 잼민이는 AST 구조로 하라고는 하는데 뭐 어느정도는 설득력 ...
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 오늘부터 작성하는 내용들은 그냥 업데이트 일지라는 제목으로 할까보다. 헤딩 적용 방법을 그냥 무식하게 바꿨다. 기존에 이리저리 위치 계산하고.. 노드 뗐다 붙였다... 엄청나게 뭔가 노력을 했는데 그냥 기존에 있던 커서 탐지 및 복원 로직이 생각보다 스마트해서, 그냥 내용 바꿔치기로 하도록 했다. 방법은 간단하다. 탐지에 앞서 줄을 노멀라이즈 한다. 그 다음에 탐지를 하는데, text...
게시판에 카테고리 기능을 추가했다. 사실 UI적인 부분을 추가하는 부분이 크게 어렵지는 않았다. 자바스크립트로 창 열림/닫힘을 구분하는 게 아닌 CSS로 제어하기 얼마 전 습득했던 Tailwind CSS의 플러그인인 DaisyUI의 플로팅 버튼 컴포넌트 사용 방법을 보고 터득한 기술이다. 부모 요소에다가 :focus-within을 걸어버리면 내부 요소에 포커스가 잡혀있는 경우 해당하는 상태로 부모 요소가 지정된다는 사실! 즉, 라벨 요소에 클릭 가능한 요소인 것처럼 인식되게끔 role="button"과 tabind...
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 키다운 중심 조작에서 뮤테이션옵저버로 기존에 개선한 버전은 각 줄마다 contenteditable을 부여해서 그 안에서 자유롭게 편집 및 데이터가 바인딩되어 작동되도록 했었다. 이 버전만으로도 작동하는 데에는 크게 문제는 없었지만, 문제는 키입력 시 처리해줘야 하는 내용이 너무 많다는 데 있었다. 예를 들면... 화살표 버튼으로 문장 사이를 왔다갔다 해야 하는 경우 커서 위치를 파악하...
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 최대한 충돌이 일어나지 않도록 해보았다. 기존에는 좀 이상했던 것이 사실이다. 렌더링을 걸면서 내용까지 수정하려니 뭐가 이상할래도 많이 이상했겠지... 여러모로 작동이 제대로 안되는 것 같길래 아예 뜯어 고쳤다. 최대한 반응성 있는 방향으로 설계한 것이다. 가장 큰 변화는 자식 요소에 바인딩을 걸지 않았다는 것이다. 바인딩을 걸지 않으니깐 양방향 업데이트든 뭐든 충돌이 발생할...
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) keydown 이벤트와 input 이벤트 분리 기존에는 keydown 이벤트에 setTimeout을 주어 텍스트가 입력되거나 입력이 변경된 후에 대한 처리를 해주었었다. 그런데 이게 좀 불안정했다. 아직도 좀 불안정한 것 같다.. 이렇게 하면 어찌 저찌 되는 것 같다... 다시 한 번 진짜로 해결한 것 같다!!! 원래는 커서가 문장의 맨 처음 가있을 때 백스페이스를 누르면 커서가 이...