React 관련 싹훑기(8) - 간단하게 Notion처럼 Editing이 가능한 블럭 구성하기

오늘 대략 nested block 구조를 잡긴했고, 현재 모양상으로는 1depth기준으로만 블럭이 추가되도록 되어있다. Enter를 치면 새로운 블럭이 추가되거나 다음 블럭으로 focus를 이동하고 있다. 

 

redux를 잘몰랐을때 notion을 만들어보려고 했었을때는 머리가 정말 뽀개지는줄알았는데, redux를 쓰니까 확실히 편하다. redux를 통해서 앱을 설계할때 디비 설계하는 것처럼 섬세하게 설계한다음 해야하는거구나 알 수 있었던 시간이다.

 

 

 

신기했던 것은 https://mytutorials.tistory.com/406?category=917383

React컴포넌트에서 HTMLElement contentEditable 속성 사용하기

react-contenteditable 을 통해서 손쉽게 editable 가능한 블럭을 구성할 수 있다는 것이다. 신경을 좀 썼던 것은 block의 아이디를 받아서 editableBlock이 rendering이 되는데, 이때 처음에는 parentComponent에서 page정보와 블럭 정보를 합쳐서 내려줬었는데, 생각을 해보니 그렇게 되면 block에서 뭔가 업데이트가 되거나 중간에 뭔가가 추가되면 전체 block관련이 re-rendering이 될것같아서 parent에서는 그냥 root의 block 만 읽어오고, 각 editable block에서 redux 스토어에 접근해서 자기의 정보를 찾아오도록 했다. 

 

 

여기까지 작업한건 editable-component라는 이름으로 브랜치를 따놓았다. 

https://github.com/hayoung0Lee/custom-notion/tree/editable-component

hayoung0Lee/custom-notion

 

이제 할일은 아래 몇가지들이다. 

1. nested되게 rendering 하는것(tab 사용해서 nested되게 하되 depth를 제한할 예정). 지금 action같은건 구현이 되어있는데, ui에 붙이질 못해서 붙이면서 손좀 봐야한다.

2. 현재는 page가 추가는 되지만, block 정보는 모두 intro page에서만 읽어오고있는데 이걸 바꿔야한다. 

3. 한글이 이상하게 깨지는데 이건 좀 오래 걸릴것같다.