Rgbitcode 에디터 개발기 - mermaid 차트 입력기능

배경

개발 중인 에디터에 수식 입력기능을 구현하고 이왕 이 기능을 넣은 김에 mermaid 입력을 지원하면 좋을 것 같다는 생각을 했습니다. 그리고 아래처럼 일단 구현을 하는데 성공했습니다.

개발일지

과정

개발중인 에디터에 mermaid 문법 지원

에디터에서 ```mermaid 라고 입력하면 아래처럼 mermaid 문법을 입력할 수 있게 구현을 해봤습니다.

그런데 codeblock 을 ```java 이런식으로 (```[영문 대소문자,소문자,숫자] ) 형태로 입력받을 수 있었기에

/^```([\dA-Za-z]*) $/ 로 정의된 입력 패턴 Rule의 수정이 필요하였습니다.

즉, 기존 remirror 에디터에서 정의되어 있던 코드블럭 익스텐션을 수정을 해서 써야만 했습니다.

그런데 기존에 쓰고 있는 remirror 코드블럭 익스텐션이 refractor이라는 라이브러리에 의존하고 있고

https://github.com/wooorm/refractor

refractor는 mermaid를 지원하지 않고 있기에...

해당 익스텐션에서 mermaid와 통합시키려면 많은 부분을 뜯어고쳐야 할 것으로 보였습니다.

그래서 codeblock 을 ```에 이어 mermaid를 제외한 영문 대소문자,소문자,숫자 패턴으로

/^```(?!mermaid)([\dA-Za-z]*) $/ 로 변경하여 ```mermaid 입력은 들어오지 못하게 하고

새로운 memaid 노드와 별도의 InputRule를 정의한 별도의 익스텐션을 만들어서 적용을 해봤네요.

그렇게 mermaid 처리 부분을 분리하여 별도로 분기가 되는지 테스트를 해보고

mermaid 텍스트 스트링을 SVG 형태로 랜더링 하는 방법을 찾아보았습니다.

mermaid 텍스트를 SVG 로 랜더링

mermaid 패키지를 설치합니다. npm i -D mermaid

그리고 아래처럼 사용해 볼 수 있습니다. 아래는 그냥 예시입니다.

import mermaid from 'mermaid'
const textString = 'graph TB\na-->b'
const {svg} = await mermaid.render('graph', texString);

document.querySelector('.target')
element.innerHTML = svg

현재 문제점

export const Helper = ()=>{
    const helpers = useHelpers();

    function exportHtml(){
        console.log(helpers.getHTML());
    }
    function exportMD(){
        console.log(helpers.getMarkdown());
    }
    function exportJSON(){
        console.log(helpers.getJSON());

    }
		return (<></>)
}

<Remirror
    placeholder="콘텐츠를 작성해주세요... 마크다운 문법을 지원합니다."
    manager={manager}
    autoFocus={true}
    autoRender={true}
    initialContent={initialContent}
>
    <ToolBar />
    <Helper/>
    <OnChangeJSON onChange={onChange} />
</Remirror>

remirror 에디터에서 이런식으로 useHelpers() 을 통해 HTML, JSON, Markdown 을 가져올 수 있는데,

기존 remirror 에서 지원하지 않던 신규 node 를 추가하고 확장기능을 넣으니...

새로 추가한 수식입력과 mermaid가 일반적인 Markdown 문법으로 변환해서 가져오지 않고,

Html 을 가져오는 쪽도 문제가 있어 내부 라이브러리를 수정하거나 별도로 구현해야하는 문제가 발견 됬네요.

개발을 하다보면 이렇게 예상하지 못한 문제들을 종종 만나게 되는것 같습니다.

그리고 하찮고 사소해 보이는 이런 문제 때문에 골머리 앓는 경우도 생기고요.

느낀점

아무것도 모를때는 remirror가 사용하기는 쉽지만... 제대로 커스텀 마이징을 하려면 결국 Remirror의 근본이 되는 ProseMirror 에 대한 이해가 바탕이 되어야 한다는 것입니다.

그런데 remirror는 ProseMirror를 Wrapping 하며 많은 추상화로 인해 구조를 보다 복잡하게 만들었고

변경이 용이하지 않은 API를 제공하면서 커스텀 마이징이 오리지널 보다 더 어렵다는 것입니다.

결국 둘다 학습해야하는 러닝커브로 이어지고 있는데, 이미 강을 많이 건너온 것 같아서 이대로 멈출 수가 없는..

그냥 이대로 끝장을 보자...!

추가 아이디어

만들고 보니 latex나 mermaid 문법을 잘 알고 있는 사용자라면 이정도만 해도 쓸만하겠지만,

해당 문법을 잘 모르는 사람들을 위해 누구나 사용하기 쉬운 UI 로 더 편리하게 입력할 수 있도록 만들면 좋겠다는 생각이...

상당히 귀찮은 작업이 될 것 같은데, 일단 메모...

결국 누구나 하기 싫은 귀찮은 작업을 해야... 누구나 쓰고 싶어지는 문서작업도구가 탄생되지 않을까ㅠㅠ