1. BlockNote 소개

BlockNote는 React용 블록 기반 리치 텍스트 편집기(RTE)이다. 최소한의 설정을 통해 많은 기능을 제공하는 데 중점을 둔다.

BlockNote를 통해 우리는 개발자가 Notion, Google Docs 또는 Coda와 같은 유명한 text tool과 비슷한 UX를 제공하여 앱에 차세대 텍스트 편집 환경을 쉽게 추가하는 것을 목표로 하고 있다.

다른 일반적인 리치 테스트 편집기 라이브러리와 달리 BlockNote는 문서를 블록으로 구성한다. 이를 통해 사용자는 문서를 더 쉽게 구성하고, 개발자는 코드에서 문자와 상호작용 할 수 있다.

BlockNote는 확장성을 고려하여 만들어졌다. 문서를 사용자가 직접 만들고, 사용자가 직접 블록 유형을 생성하며 메뉴 항목과 같은 UX 요소를 만들 수 있다. 또한 React 대신 Vanilla JavaScript로 자체 UI를 제작하여 BlockNote를 활용할 수도 있다!

2. 왜 BlockNote 인가?

최근에는 서식이 있는 텍스트 편집기를 만들기 위한 라이브러리가 많이 존재한다. BlockNote는 널리 사용하는 ProseMirror와 TipTap를 기반으로 제작되었다.

이러한 라이브러리의 사용은 프로젝트에 효과적인 영향을 줄 수 있지만, learning-curve가 가파르고 편집기의 모든 세부적인 사항을 직접 customize 해야하는 경우가 많다. 이 작업들은 꽤 오랜 시간을 필요로 할 수도 있다.

하지만 BlockNote는 미리 만들어진 애니메이션 UI를 포함하여 최소한의 설정만으로도 개발자들에게 좋은 경험을 줄 수 있다!

추가적으로 BlockNote는 현대적인 블록 기반 디자인도 제공한다. 이는 문서에 더 많은 구조를 제공하고, 더 폭넓은 경험을 제공함과 동시에 편집기 기능을 더 쉽게 사용할 수 있게 해준다.

3. 기능

BlockNote에는 고품질 블록 기반 편집기를 앱에 쉽게 삽입할 수 있는 다양한 기능과 구성요소들이 함께 제공된다.

애니메이션

유용한 Placeholders

Drag and drop 블록

Tab과 Shift+Tab을 이용한 중첩과 들여쓰기

슬래시(/) 메뉴

Format 메뉴

실시간 협업 기능

참고자료

https://www.blocknotejs.org/
https://github.com/TypeCellOS/BlockNote

공식문서는 읽는건.. 항상 힘들다.. ㅠㅠ 하지만 계속 읽어야 늘겠지 ?? 화이팅~