기존에 사용하던 라이브러리 문제

기존에 사용하던 라이브러리 - toast ui react-markdown editor

커스텀 스타일을 적용하기 힘들다.

해당 깃허브 pr과 이슈에서 다음과 같은 키워드로 검색해봤는데 마땅한 해결책을 찾지 못했다.

responsive, width, styled-comopnent, custom style,,,

혹시나 해서 라이브러리 타입을 타고 들어가서 관련된 속성이 있나 확인했지만 역시 찾지 못했다.

분명 공식홈페이지에 나오는 예시를 보면 반응형으로 동작하는 것 같은데 내가 사용하면 다음과 같이 깨져서 나왔다.

또한, Failed to parse source map (@toast-ui/editor/dist/purify.js.map) 과 같은 이슈가 발생해 다른 라이브러리를 쓰는게 좋다고 판단!

대체 라이브러리

https://uiwjs.github.io/react-md-editor/

https://www.npmjs.com/package/@uiw/react-md-editor

공식문서 설명도 깔끔하고 codesandbox 예제로 이것저것 태스트해봤는데 잘 돼, 사용하기로 했다.

import React, { useState } from 'react';
import MDEditor from '@uiw/react-md-editor';
import PropTypes from 'prop-types';
import * as S from './MarkdownEditor.style';

MarkdownEditor.propTypes = {
  onlyViewer: PropTypes.bool.isRequired,
  content: PropTypes.string.isRequired,
  customStyle: PropTypes.array,
};

export default function MarkdownEditor({ onlyViewer, content, customStyle }) {
  const [value, setValue] = useState(content);
  return (
    <S.Container data-color-mode="light" customStyle={customStyle}>
      {onlyViewer ? (
        <MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />
      ) : (
        <MDEditor value={value} onChange={setValue} />
      )}
    </S.Container>
  );
}