boat-editor

AI 기능, 투표, 이미지 업로드를 내장한 커스텀 Tiptap 에디터 React 컴포넌트.

Installation

npm install boat-editor

Usage

'use client'

import { BoatEditor } from 'boat-editor'
import 'boat-editor/styles.css'

function MyEditor() {
  const [html, setHtml] = useState('<p>Hello!</p>')

  return (
    <BoatEditor
      content={html}
      onChange={setHtml}
      placeholder="내용을 입력하세요..."
      minHeight={300}
    />
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | '' | 초기 HTML 콘텐츠 | | onChange | (html: string) => void | — | 콘텐츠 변경 콜백 | | editable | boolean | true | 편집 가능 여부 (false로 뷰어 모드) | | placeholder | string | — | 플레이스홀더 텍스트 | | tools | ToolName[] | 전체 도구 | 표시할 툴바 버튼 | | className | string | — | 커스텀 CSS 클래스 | | minHeight | string \| number | — | 에디터 최소 높이 | | debug | boolean | false | 디버그 콘솔 표시 |

AI Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | aiEndpoint | string | — | AI API 엔드포인트 URL | | aiEnabled | boolean | false | AI 기능 활성화 |

Image Upload Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | imageUploadEndpoint | string | — | 이미지 업로드 API URL | | imageMaxSize | number | 10485760 (10MB) | 최대 파일 크기 (bytes) | | imageAccept | string[] | ['image/jpeg', ...] | 허용 MIME 타입 |

Poll Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | pollEndpoint | string | — | 투표 API 엔드포인트 URL | | pollEnabled | boolean | false | 투표 기능 활성화 | | currentUserId | string | — | 현재 사용자 ID |

Full Example

<BoatEditor
  content={html}
  onChange={setHtml}
  placeholder="내용을 입력하세요..."
  minHeight={300}
  // AI
  aiEndpoint="/api/ai"
  aiEnabled={true}
  // Image Upload
  imageUploadEndpoint="/api/image/upload"
  // Poll
  pollEndpoint="/api/poll"
  pollEnabled={true}
  currentUserId="user-123"
  // Debug
  debug={process.env.NODE_ENV === 'development'}
/>

Features

AI (맞춤법 검사 / 문맥 연결 / 콘텐츠 생성)

aiEndpoint와 aiEnabled를 설정하면 툴바에 AI 버튼이 표시됩니다. 서버는 boat-editor-server로 구성합니다.

• 맞춤법 검사 — 선택한 텍스트의 오탈자/문법 교정
• 문맥 연결 — 커서 위치 기준 앞뒤 문맥을 자연스럽게 연결
• 콘텐츠 생성 — 지시사항 기반 텍스트 생성 (SSE 스트리밍)

Image Upload (이미지 업로드)

imageUploadEndpoint를 설정하면 이미지 기능이 활성화됩니다.

• 드래그&드롭, 클립보드 붙여넣기, 파일 선택
• 업로드 중 placeholder 표시 → 완료 시 실제 URL로 교체
• 이미지 리사이즈 (드래그 핸들) + 정렬 (좌/중/우)

Poll (투표)

pollEndpoint, pollEnabled, currentUserId를 설정하면 투표 기능이 활성화됩니다.

• 편집 모드: 투표 생성 폼 → 칩으로 접힘 → 옵션 미리보기
• 뷰 모드 (editable={false}): 투표 카드 표시, 투표 참여 가능

Viewer Mode (뷰어 모드)

<BoatEditor content={savedHtml} editable={false} />

editable={false}로 설정하면 읽기 전용 뷰어로 동작합니다. 이미지, 투표 등 모든 리치 콘텐츠가 정상 표시됩니다.

Styling

import 'boat-editor/styles.css'

모든 CSS 클래스는 boat- 접두사를 사용하여 네임스페이스 충돌을 방지합니다. Tailwind CSS에 의존하지 않습니다.

License

MIT