에디터 및 수식 렌더링 라이브러리를 선정한다.

[chysis]

🍆 Description

• 지문 작성 페이지에서는 에디터와 사용자가 입력한 텍스트 및 HTML을 수식으로 실시간 렌더링하기 위한 라이브러리가 필요합니다.

🥔 To do

• 다양한 후보 라이브러리를 찾아보고, 어떤 것이 우리 서비스에 더 적합할지 고민해봅시다.

[chysis]

에디터 라이브러리

• 에디터를 직접 구현하는 데는 많은 시간과 노력이 필요하다. 구현 및 유지보수를 위해 직접 구현하기보다는 잘 만들어진 Rich Text 에디터 라이브러리를 선정해서 MathJax와 함께 사용하자.
• BOJ 문제 스타일 가이드를 사용자가 쉽게 따라갈 수 있도록 다양한 기능들을 제공할 것이므로, 확장성 및 커스터마이징이 중요한 선정 기준이 될 것이다.

<후보>

1. Draft.js
2. Slate.js
3. Quill.js

[chysis]

Draft.js

• 문서 상태를 JSON으로 관리
• inline 스타일링을 지원
• 다른 라이브러리에 비해 사용이 다소 복잡할 수 있다.

Quill.js

• DOM을 HTML 형태로 직접 렌더링하고 관리하기 때문에 수식 렌더링 라이브러리와의 통합이 상대적으로 어렵다.
• 플러그인 기반이 아닌 델타 기반의 내부 데이터 모델을 사용하기 때문에 수식 관련 커스터마이징에 제약이 있다고 한다.

Slate.js

• 구조적으로 블록, 인라인, 스타일 등을 직접 정의할 수 있어 수식 관련 기능 커스터마이징이 자유롭다.
• 다른 라이브러리들에 비해 굉장히 유연하고 완전한 커스터마이징이 가능하다.
• 플러그인 기반이다.

[chysis]

결정

사용이 쉽고, 수식 렌더링 라이브러리(MathJax)와 함께 사용하기 적합하고, 커스터마이징이 용이한 라이브러리인 Slate.js를 사용한다.

Slate도 기본적으로 bold, italic, underline, code, quote, align 등 에디터가 기본적으로 갖추어야 할 기능들은 제공한다. 거기에 더해 필요한 기능들은 따로 구현하는 방향으로 생각하고 있다.

[chysis]

수식 렌더링 라이브러리

1. MathJax (better-react-mathjax, react-mathjax)
2. KaTeX

[chysis]

결정

• BOJ는 MathJax로 수식을 렌더링하기 때문에 우리 서비스도 MathJax를 사용한다.
• 리액트 환경에서 사용 가능한 몇 가지 mathjax 라이브러리가 있는데, 그 중 현재까지도 개발되고 있는 better-react-mathjax 라이브러리를 사용한다.

번외로...

• KaTeX는 MathJax에 비해 가볍고 렌더링 속도가 빠르지만 커스터마이징이 제한적이고 일부 고급 LaTeX 기능을 지원하지 않는다. 알고리즘 문제에서는 복잡한 수식이 들어가는 경우도 많기 때문에 적합하지 않다.

[donghoony]

Katex가 진짜 빠르다곤 하던데, 최근에 MathJax 2.0 업데이트하면서 속도 많이 비슷해졌더라고요 😀