RgbitCode 에디터 개발기 - 공학용 수식입력기 구현

수식 입력기

개발배경

처음 개발당시에는 수식입력기를 전혀 생각하지 않았는데, 딥러닝 공부를 하다보니 글을 쓸때 수식을 써야할때가 종종 생기는 바람에... 이 기능이 에디터에 있어야 겠다는 생각을 했습니다. 그런데 아래같은 난관에 부딪힙니다.

무엇이 문제였나?

현재 이 사이트 관리자 페이지에 달려있는 RgbitCode 에디터는 Remirror에 의존하고 있습니다.

Remirror는 prosemirror 을 React 컴포넌트로 추상화하여 Wrapping 한 툴킷이고 Remirror을 사용하면 미리 구현된 많은 extensions 을 통해 prosemirror를 보다 쉽게 다룰 수 있지만, Remirror에서 지원하지 않은 사용자정의 extensions 을 만들어야 하는 경우나 내맘대로 뜯어고치려면 결국 prosemirror 를 제대로 이해하지 못하면 불가능 하다는 것이였습니다.

그런데, 수식입력기는 Remirror에서 extensions이 개발되어 있지 않아서 직접 구현을 해줘야 하는데 결국

prosemirror 에 대한 이해가 필요하게 되었습니다. 다소 러닝커브가 있는 편입니다.

구현과정

1. Prosemirror-math 클론코딩

참고 레퍼런스 : https://github.com/benrbray/prosemirror-math

공식 플러그인은 아닌데, 누가 prosemirror기반으로 누가 수식입력 기능을 오픈소스로 공개한 사람이 있었습니다. 아래 해당 오픈소스를 찾지 못했다면, 더 오랜시간이 걸렸을 것 같습니다. 처음에는 해당 깃허브 코드를 보면서 prosemirror에 대해 더 이해를 해보고 클론코딩을 해봤습니다.

2. React로 재구성하여 Prosemirror기반 Editor 구현

Prosemirror 기반으로 React 로 구현된 마크다운 + 수식입력 에디터를 먼저 만들어 봤습니다.

기본적인 마크다운 문법지원과 수식입력이 되는 에디터입니다.

( 소스코드 하이라이팅은 만들어 보고 있는 중입니다. )

해당코드는 제 깃허브 중 하나인 https://github.com/senspond20/math-editor 에 올려봤습니다.

3. 현재 개발중인 Rgbit-Editor에 마이그레이션

RgbitCode 웹사이트에서 사용하고 있고 계속 다뤄오던 에디터에 이 기능을 붙여넣는 것이 만약 불가능하다면, prosemirror 기반으로 처음부터 다시 만들어야 할지도 모르기에 중요한 과제였습니다.

그런데 Remirror 는 prosmirror 를 보다 추상화하여 Wrapping 해놓은 탓에 인터페이스가 달라 귀찮은 마이그레이션 작업이 조금 필요했습니다.

어찌됬든 목표한 기능 구현에 성공은 했고 조만간 마무리를 하고 다음단계로 넘어가야 겠네요.

다음 목표는 주피터 노트북 파일 불러와서 랜더링입니다.