Mawy

프로젝트 소개

Mawy는 마크다운 편집기와 뷰어를 하나의 라이브러리로 묶은 것으로, React 라이브러리와 Flutter 패키지로 함께 제공됩니다. 편집기와 따로 관리되는 렌더러는 언젠가 어딘가에서 어긋나기 마련이고 — 표 하나, 중첩된 목록 하나, 코드 블록 하나에서 — 그 순간 글쓴이가 확인한 문서와 읽는 사람이 받는 문서가 달라집니다. 여기서는 양쪽이 같은 파서와 같은 렌더러를 쓰기 때문에, 입력한 그대로가 읽히는 그대로입니다.

편집기는 편집기 두 개가 아니라 문서 하나를 보는 두 가지 방식입니다. 구문에 색이 입혀진 마크다운 원본과 완성된 모습의 문서가 클릭 한 번 거리에 있고, 서식 도구 모음의 모든 명령에는 단축키가 함께 있으며, 전환할 때 한쪽에서 표현하지 못하는 것이 사라지지 않습니다. 색이 입혀진 표면 아래에는 진짜 textarea가 있습니다. 그 덕분에 브라우저가 가진 실행 취소 기록과 한글 조합 입력, 모바일 키보드가 그대로 동작합니다. 뷰어는 그 자체로 완성된 읽기 화면입니다. 글꼴과 글자 크기, 줄 간격, 자간, 단 너비, 밝은 화면과 어두운 화면, 제목 목록까지 고를 수 있고 그 가운데 무엇도 문서를 건드리지 않습니다. 보여 줄 문서를 주지 않으면 뷰어는 파일 선택기가 되므로, .md 파일을 끌어다 놓는 것이 빈 화면의 쓰임새입니다.

설치는 패키지 하나와 CSS 한 줄입니다. 라이브러리가 그리는 모든 것이 --mawy-* 사용자 정의 속성을 거치므로, 테마를 바꾸는 일은 규칙의 우선순위를 이기는 것이 아니라 감싸는 요소에 토큰을 다시 선언하는 일이고 다크 모드도 그 토큰 가운데 하나입니다. 바깥에서 가져오는 것은 없습니다. 글꼴 메뉴는 읽는 사람의 기기에 이미 있는 것을 제시하고, 함께 담긴 열세 개의 자유 라이선스 글꼴은 애플리케이션이 직접 넘겨줄 때만 쓰입니다. 마크다운은 HTML 문자열이 아니라 요소가 되므로 문서와 화면 사이에 innerHTML이 없습니다. React 패키지는 ESM이고 TypeScript 타입 정의를 함께 담고 있으며, 런타임 의존성은 도구 모음 아이콘을 위한 하나뿐입니다.

기능

• 문서 지원

• TypeScript 지원

• 다국어 지원

• 테스트로 검증됨

• 크로스플랫폼 지원

• 접근성 지원

• 다크 모드

• 트리 셰이킹 지원