md-editor-lite

A lightweight React markdown editor focused on the core editing experience.
Built with TypeScript, designed for library-friendly usage, and has no runtime dependency other than React.

> Minimal. Predictable. Easy to integrate.

---

✨ Features

- ⚡ Minimal dependencies
→ No heavy editor engines, no unnecessary packages
→ Regex-based parsing for predictable behavior

- 🔁 Controlled & Uncontrolled modes
→ Works well with forms and external state management

- 🧩 Customizable toolbar
→ Enable only the features you need

- 🎨 No CSS framework dependency
→ No Tailwind, no opinionated styles
→ Fully styleable with plain CSS

---

🧠 Supported Markdown Syntax

- Bold: bold
- Italic: _italic_
- Underline: underline
- Strikethrough: ~~strike~~
- Inline code: code
- Blockquote: > quote
- Headings:#, ##, ###
- Ordered / Unordered lists:
- - item
- 1. item
- Images: !alt
- Links: text

> ⚠️ This editor intentionally does not support fenced code blocks
> (code) to keep parsing logic lightweight and predictable.

---

📦 Installation

``bash
npm install md-editor-lite
`

---

$3

This library does not inject styles automatically.

`ts
import "md-editor-lite/style.css";
`

---

🚀 Basic Usage (Uncontrolled)

`tsx
import { MarkdownEditor } from "md-editor-lite";

function App() {
return ;
}
`

---

🎛 Controlled Usage

`tsx
import { useState } from "react";
import { MarkdownEditor } from "md-editor-lite";

function App() {
const [value, setValue] = useState("");

return (
value={value}
onChange={setValue}
placeholder="Write your markdown here..."
/>
);
}
`

> Controlled mode is recommended when:
>
> - Integrating with forms
> - Saving content externally
> - Syncing editor state with other UI

---

🧩 Props API

$3

| Prop | Type | Description |
| -------------- | ------------------------- | ---------------------------------- |
| value | string | Markdown content (controlled mode) |
| onChange | (value: string) => void | Called when content changes |
| defaultValue | string | Initial value (uncontrolled mode) |
| placeholder | string | Placeholder text for the editor |
| readOnly | boolean | Disable editing |
| toolbar | ToolbarItem[] | Customize visible toolbar items |
| className | string | Custom class for root container |

> If value is provided, the editor automatically works in controlled mode.

---

📱 Responsive Behavior

This library relies on the browser viewport for responsive layouts.

Make sure the following meta tag exists in your HTML document:

`html

``

> ⚠️ This library does not inject meta tags automatically
> → Host applications should manage viewport settings themselves

---

🚫 Non-goals

md-editor-lite intentionally does NOT aim to be:

- A full CommonMark implementation
- A WYSIWYG editor
- A syntax-highlighting code editor

This library focuses on simple text input with markdown preview,
not complex document authoring.

---

🇰🇷 한국어 설명

소개

md-editor-lite는
“필요한 기능만 제공하고, 나머지는 개발자에게 맡긴다”는 철학으로 만든
경량 React 마크다운 에디터 라이브러리입니다.

대형 에디터들이 흔히 가지는

- 과도한 번들 사이즈
- 복잡한 설정
- 강제되는 스타일 구조

이런 문제를 피하고,
폼 / CMS / 관리자 페이지 / 사이드 프로젝트 어디에든
부담 없이 사용할 수 있도록 설계되었습니다.

---

주요 특징

$3

- 런타임 의존성은 React만 필요
- 외부 에디터 엔진 없이 동작
- 라이브러리·디자인 시스템 내부에서도 안전하게 사용 가능

$3

- 단순 textarea처럼 빠르게 사용 가능
- 상태를 외부에서 완전히 제어하는 구조도 지원
- React Hook Form 등과 호환 가능

$3

- Tailwind / CSS Modules / styled-components 등
어떤 스타일링 방식과도 충돌하지 않음
- 기본 스타일은 최소한만 제공

$3

- 전역 CSS 주입 없음
- meta tag 자동 삽입 없음
- 호스트 애플리케이션의 환경을 침범하지 않음

---

이런 경우에 잘 어울려요

- “에디터 하나 때문에 라이브러리가 무거워지는 게 싫을 때”
- 관리자 페이지에 심플한 마크다운 입력 UI가 필요할 때
- 디자인 시스템 안에 자연스럽게 녹아드는 에디터가 필요할 때

---

> md-editor-lite는 CommonMark 전체를 구현하는 것을 목표로 하지 않습니다.
> 문법 충돌과 예외 처리가 많은 기능(code block, table 등)은 의도적으로 제외했습니다.