에디터 (Editor)
원본 Figma의 920×52 툴바 구성을 바탕으로 v1.2.1의 문단·서식·색상·표·링크·이미지·YouTube·HTML 편집 기능을 제공하는 React 리치 텍스트 에디터예요.
Usage
import { useState } from "react";import { Editor } from "podo-ui/react";import "podo-ui/styles.css";
export default function Page() { const [html, setHtml] = useState("<p>내용</p>"); return <Editor value={html} onChange={setHtml} height="320px" />;}툴바와 편집 기능
toolbar prop을 생략하면 v1의 13개 그룹이 모두 표시돼요. 필요한 그룹만 원하는 순서로 전달할 수도 있어요.
| 그룹 | 기능 |
|---|---|
| undo-redo | 실행 취소, 다시 실행, Ctrl/Cmd+Z·Y |
| paragraph | 제목 1~3, 본문 크기/굵기 |
| text-style / color | 굵게, 기울임, 밑줄, 취소선, 글자색, 배경색 |
| align / list | 좌·중앙·우·양쪽 정렬, 순서/비순서 목록 |
| table | 1~10행·열 삽입, 행·열 추가/삭제, 병합, 셀 정렬·배경 |
| link | 링크 삽입, 새 창/현재 창, 클릭 후 수정·삭제 |
| image | 파일/URL/붙여넣기/드롭, 외부 업로드, 크기·정렬·대체 텍스트, 수정·삭제 |
| youtube | URL 삽입, 크기·정렬, 클릭 후 수정·삭제 |
| hr / format / code | 구분선, 서식 지우기, HTML 소스 편집 |
외부 이미지 업로드 처리
onImageUpload을 지정하면 파일 선택·클립보드 붙여넣기·드롭이 모두 같은 비동기 콜백을 거쳐요. 업로드가 끝난 공개 URL만 HTML에 들어가며, 콜백을 생략하면 하위 호환을 위해 data URL을 사용합니다. Hono SSR은 상호작용 에디터를 직접 렌더하지 않으므로 업로드 API와 React client island를 조합하세요.
import { useState } from "react";import { Editor, type EditorImageUploadHandler } from "podo-ui/react";
const uploadImage: EditorImageUploadHandler = async (file) => { const body = new FormData(); body.append("image", file); const response = await fetch("/api/images", { method: "POST", body }); if (!response.ok) throw new Error("이미지 업로드 실패"); return (await response.json()) as { src: string; alt?: string };};
export function ArticleEditor() { const [html, setHtml] = useState(""); return <Editor value={html} onChange={setHtml} onImageUpload={uploadImage} />;}보기 전용 HTML
에디터 예제
텍스트를 선택한 뒤 툴바와 각 팝업을 사용해 보세요.
모바일과 팝업
600px 이하에서는 툴바가 여러 줄로 흐르고 터치 영역이 40px로 커져요. 링크·표·이미지·YouTube·편집 팝업과 표 컨텍스트 메뉴는 뷰포트 안으로 제한돼요.
| 팝업 | PC | 모바일 |
|---|---|---|
| 문단·정렬·색상 | 툴바 기준 배치 | 줄바꿈된 툴바 기준 배치 |
| 링크·표 | 고정 최소 폭 | 화면 폭에 맞춰 축소 |
| 이미지·YouTube | 360px, 세로 스크롤 | 화면 폭 제한, 입력 행 재배치 |
| 링크·미디어 편집 | 선택 요소 아래 | 뷰포트 크기 제한과 내부 스크롤 |
| 표 컨텍스트 메뉴 | 포인터 위치 | 화면 네 방향 경계 안으로 보정 |
지원 범위
React Native는 react-native-webview의 contenteditable 문서로 실제 WYSIWYG 편집을 제공해요. 네이티브 picker 결과도 onImageUpload에서 외부 저장소 URL로 바꾼 뒤 삽입할 수 있습니다. Provider의 webViewComponent 또는 createNativeComponents의 WebView host를 설정하세요. Hono에서는 서버 업로드 endpoint와 React client island의 Editor를 함께 사용하며, 상호작용이 없는 SSR만으로는 Editor를 제공하지 않아요.
| React | Next.js | Hono | React Native |
|---|---|---|---|
| 전체 지원 | 전체 지원 (use client) | React island에서 지원 | Native UI 지원 |
주요 속성 (props)
| Prop | Type | Default | 설명 |
|---|---|---|---|
value / onChange | string / (html) => void | — | 제어형 HTML 값 |
width / height | string | 100% / 400px | 에디터 크기 |
minHeight / maxHeight | string | — | 편집 영역 높이 제한 |
resizable | boolean | false | 세로 크기 조절 |
toolbar | ToolbarItem[] | 전체 | 표시할 그룹과 순서 |
validator | ZodType | — | HTML 값 검증과 성공/오류 표시 |
onImageUpload | (file) => Promise<string | { src, alt? }> | data URL | 선택·붙여넣기·드롭 이미지 외부 처리 |
onImageUploadError | (error, file) => void | — | 외부 이미지 처리 실패 알림 |
placeholder | string | 내용을 입력하세요… | 빈 편집 영역 안내 |
ariaLabel | string | 리치 텍스트 편집기 | 접근성 이름 |