md-editor-lite 0.1.0

package/README.md

@@ -0,0 +1,175 @@
+# 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
+
+- 🔁 **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**
+- _Italic_
+- `Inline code`
+- > Blockquote
+- Headings (`#`, `##`, `###`)
+- Ordered / Unordered lists
+- Images: `![alt](url)`
+- Links: `[text](url)`
+
+---
+
+## 📦 Installation
+
+```bash
+npm install md-editor-lite
+```
+
+---
+
+## 🚀 Basic Usage (Uncontrolled)
+
+```tsx
+import { MarkdownEditor } from "md-editor-lite";
+
+function App() {
+  return <MarkdownEditor />;
+}
+```
+
+---
+
+## 🎛 Controlled Usage
+
+```tsx
+import { useState } from "react";
+import { MarkdownEditor } from "md-editor-lite";
+
+function App() {
+  const [value, setValue] = useState("");
+
+  return (
+    <MarkdownEditor
+      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
+
+### `MarkdownEditor`
+
+| 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
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+```
+
+> ⚠️ This library does **not** inject meta tags automatically
+> → Host applications should manage viewport settings themselves
+
+---
+
+<details>
+<summary>🇰🇷 한국어 설명</summary>
+
+## 소개
+
+**md-editor-lite**는
+“필요한 기능만 제공하고, 나머지는 개발자에게 맡긴다”는 철학으로 만든
+**경량 React 마크다운 에디터 라이브러리**입니다.
+
+대형 에디터들이 흔히 가지는
+
+- 과도한 번들 사이즈
+- 복잡한 설정
+- 강제되는 스타일 구조
+
+이런 문제를 피하고,
+**폼 / CMS / 관리자 페이지 / 사이드 프로젝트** 어디에든
+부담 없이 사용할 수 있도록 설계되었습니다.
+
+---
+
+## 주요 특징
+
+### ⚡ 가볍고 예측 가능한 구조
+
+- 런타임 의존성은 **React만 필요**
+- 외부 에디터 엔진 없이 동작
+- 라이브러리·디자인 시스템 내부에서도 안전하게 사용 가능
+
+### 🎛 Controlled / Uncontrolled 모두 지원
+
+- 단순 textarea처럼 빠르게 사용 가능
+- 상태를 외부에서 완전히 제어하는 구조도 지원
+- React Hook Form 등과 호환 가능
+
+### 🎨 스타일 독립성
+
+- Tailwind / CSS Modules / styled-components 등
+  **어떤 스타일링 방식과도 충돌하지 않음**
+- 기본 스타일은 최소한만 제공
+
+### 📦 라이브러리 배포를 고려한 설계
+
+- 전역 CSS 주입 없음
+- meta tag 자동 삽입 없음
+- 호스트 애플리케이션의 환경을 침범하지 않음
+
+---
+
+## 이런 경우에 잘 어울려요
+
+- “에디터 하나 때문에 라이브러리가 무거워지는 게 싫을 때”
+- 관리자 페이지에 **심플한 마크다운 입력 UI**가 필요할 때
+- 디자인 시스템 안에 자연스럽게 녹아드는 에디터가 필요할 때
+
+</details>

package/dist/index.css

@@ -0,0 +1,181 @@
+/* src/css/editor.css */
+.editor {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.editor-header {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  height: 88px;
+  padding: 0 16px;
+  background-color: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+@media (min-width: 768px) {
+  .editor-header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 48px;
+  }
+}
+.editor-tab-container {
+  display: flex;
+  gap: 1rem;
+  font-weight: 500;
+}
+.editor-tab {
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  font-size: small;
+  font-weight: 500;
+  transition: color 0.2s;
+  color: #4b5563;
+  &:hover {
+    color: #1f2937;
+  }
+}
+.editor-tab--active {
+  color: #111827;
+  border-bottom: 2px solid #111827;
+}
+.editor-textarea {
+  width: 100%;
+  min-height: 200px;
+  margin: 0;
+  padding: 16px;
+  border: none;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
+/* src/css/preview.css */
+.preview {
+  color: #111827;
+  width: 100%;
+  min-height: 200px;
+  padding: 16px;
+  border: none;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+  list-style: decimal inside;
+}
+
+/* src/css/toolbar.css */
+.toolbar-menu {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  gap: 16px;
+  box-sizing: border-box;
+}
+.toolbar-button {
+  background: none;
+  width: 28px;
+  height: 28px;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  &:hover {
+    background-color: #f3f4f6;
+  }
+  &:active {
+    background-color: #e5e7eb;
+  }
+}
+
+/* src/css/dropdown.css */
+.md-dropdown {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.md-dropdown__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.md-dropdown__trigger:hover {
+  background-color: #f3f4f6;
+}
+.md-dropdown__trigger--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.md-dropdown__menu {
+  position: absolute;
+  top: 0;
+  left: -35%;
+  z-index: 50;
+  margin-top: 4px;
+  min-width: 40px;
+  max-height: 240px;
+  overflow-y: auto;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 4px 0;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+.md-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  font-size: 14px;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.15s ease;
+}
+.md-dropdown__item:hover {
+  background-color: #f3f4f6;
+}
+.md-dropdown__item--selected {
+  background-color: #fefce8;
+  color: #a16207;
+  font-weight: 500;
+}
+.md-dropdown__icon {
+  display: flex;
+  color: #9ca3af;
+}
+.md-dropdown__label {
+  white-space: nowrap;
+}
+.dropdown-item {
+  color: #374151;
+  background-color: #f3f4f6;
+  position: relative;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  font-size: 0.875rem;
+  transition: all ease-in-out;
+}
+.dropdown-item--selected {
+  background-color: #fefce8;
+  color: #a16207;
+  font-weight: 500;
+}

package/dist/index.d.mts

@@ -0,0 +1,81 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default from 'react';
+import * as lucide_react from 'lucide-react';
+
+interface EditorHeaderProps {
+    mode: "write" | "preview";
+    setMode: (mode: "write" | "preview") => void;
+    insertMarkdown: (before: string, after?: string) => void;
+}
+declare function EditorHeader({ mode, setMode, insertMarkdown, }: EditorHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface EditorTabProps {
+    mode: string;
+    setMode: (mode: "write" | "preview") => void;
+}
+declare function EditorTab({ mode, setMode }: EditorTabProps): react_jsx_runtime.JSX.Element;
+
+interface EditorTextareaProps {
+    value: string;
+    placeholder?: string;
+    setValue: (value: string) => void;
+    onImageUpload?: (file: File) => Promise<string>;
+}
+declare const EditorTextarea: react.ForwardRefExoticComponent<EditorTextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface MarkdownEditorProps {
+    value: string;
+    onChange: (v: string) => void;
+    onImageUpload?: (file: File) => Promise<string>;
+}
+declare function MarkdownEditor({ value, onChange: setValue, onImageUpload, }: MarkdownEditorProps): react_jsx_runtime.JSX.Element;
+
+interface PreviewProps {
+    value: string;
+}
+declare function Preview({ value }: PreviewProps): react_jsx_runtime.JSX.Element;
+
+interface ToolbarProps {
+    insertMarkdown: (before: string, after?: string) => void;
+}
+declare function Toolbar({ insertMarkdown }: ToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface ToolbarDropdownProps {
+    insertMarkdown: (before: string, after?: string) => void;
+}
+declare function ToolbarDropdownHeading({ insertMarkdown, }: ToolbarDropdownProps): react_jsx_runtime.JSX.Element;
+declare function ToolbarDropdownList({ insertMarkdown }: ToolbarDropdownProps): react_jsx_runtime.JSX.Element;
+
+type DropdownOption = {
+    value: string;
+    label?: string;
+    Icon?: react__default.ComponentType<react__default.SVGProps<SVGSVGElement>>;
+};
+
+type ToolbarDropdownOption = DropdownOption & {
+    before: string;
+};
+declare const TOOLBAR_BUTTONS: {
+    key: string;
+    before: string;
+    after: string;
+    Icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+}[];
+declare const headingOptions: ToolbarDropdownOption[];
+declare const listOptions: ToolbarDropdownOption[];
+
+interface UseMarkdownEditorProps {
+    value: string;
+    setValue: (v: string) => void;
+}
+declare function useMarkdownEditor({ value, setValue }: UseMarkdownEditorProps): {
+    textareaRef: react.RefObject<HTMLTextAreaElement | null>;
+    insertMarkdown: (before: string, after?: string) => void;
+};
+
+declare function cx(...classes: (string | false | undefined)[]): string;
+
+declare function markdownToHtml(markdown: string): string;
+
+export { EditorHeader, EditorTab, EditorTextarea, MarkdownEditor, Preview, TOOLBAR_BUTTONS, Toolbar, ToolbarDropdownHeading, ToolbarDropdownList, cx, headingOptions, listOptions, markdownToHtml, useMarkdownEditor };

package/dist/index.d.ts

@@ -0,0 +1,81 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default from 'react';
+import * as lucide_react from 'lucide-react';
+
+interface EditorHeaderProps {
+    mode: "write" | "preview";
+    setMode: (mode: "write" | "preview") => void;
+    insertMarkdown: (before: string, after?: string) => void;
+}
+declare function EditorHeader({ mode, setMode, insertMarkdown, }: EditorHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface EditorTabProps {
+    mode: string;
+    setMode: (mode: "write" | "preview") => void;
+}
+declare function EditorTab({ mode, setMode }: EditorTabProps): react_jsx_runtime.JSX.Element;
+
+interface EditorTextareaProps {
+    value: string;
+    placeholder?: string;
+    setValue: (value: string) => void;
+    onImageUpload?: (file: File) => Promise<string>;
+}
+declare const EditorTextarea: react.ForwardRefExoticComponent<EditorTextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface MarkdownEditorProps {
+    value: string;
+    onChange: (v: string) => void;
+    onImageUpload?: (file: File) => Promise<string>;
+}
+declare function MarkdownEditor({ value, onChange: setValue, onImageUpload, }: MarkdownEditorProps): react_jsx_runtime.JSX.Element;
+
+interface PreviewProps {
+    value: string;
+}
+declare function Preview({ value }: PreviewProps): react_jsx_runtime.JSX.Element;
+
+interface ToolbarProps {
+    insertMarkdown: (before: string, after?: string) => void;
+}
+declare function Toolbar({ insertMarkdown }: ToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface ToolbarDropdownProps {
+    insertMarkdown: (before: string, after?: string) => void;
+}
+declare function ToolbarDropdownHeading({ insertMarkdown, }: ToolbarDropdownProps): react_jsx_runtime.JSX.Element;
+declare function ToolbarDropdownList({ insertMarkdown }: ToolbarDropdownProps): react_jsx_runtime.JSX.Element;
+
+type DropdownOption = {
+    value: string;
+    label?: string;
+    Icon?: react__default.ComponentType<react__default.SVGProps<SVGSVGElement>>;
+};
+
+type ToolbarDropdownOption = DropdownOption & {
+    before: string;
+};
+declare const TOOLBAR_BUTTONS: {
+    key: string;
+    before: string;
+    after: string;
+    Icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+}[];
+declare const headingOptions: ToolbarDropdownOption[];
+declare const listOptions: ToolbarDropdownOption[];
+
+interface UseMarkdownEditorProps {
+    value: string;
+    setValue: (v: string) => void;
+}
+declare function useMarkdownEditor({ value, setValue }: UseMarkdownEditorProps): {
+    textareaRef: react.RefObject<HTMLTextAreaElement | null>;
+    insertMarkdown: (before: string, after?: string) => void;
+};
+
+declare function cx(...classes: (string | false | undefined)[]): string;
+
+declare function markdownToHtml(markdown: string): string;
+
+export { EditorHeader, EditorTab, EditorTextarea, MarkdownEditor, Preview, TOOLBAR_BUTTONS, Toolbar, ToolbarDropdownHeading, ToolbarDropdownList, cx, headingOptions, listOptions, markdownToHtml, useMarkdownEditor };