Inkio

Inkio는 Tiptap 기반의 레이어드 에디터 패키지 모음입니다.

시작점

• @inkio/simple
  • classic WYSIWYG
  • toolbar-first
  • 가장 쉬운 시작점
• @inkio/editor
  • notion-like
  • bubble/floating menu, slash command, block handle 중심
• @inkio/advanced
  • comments, mention, hashtag, wiki link 같은 고급 확장
• @inkio/image-editor
  • ImageBlock용 이미지 편집 UI

공통 스타일 언어

패키지별 배치는 다릅니다.

• @inkio/simple: classic toolbar-first
• @inkio/editor: notion-like
• @inkio/image-editor: fullscreen overlay

대신 chrome surface는 공통 Inkio token을 공유합니다.

• shell: toolbar, dock, command bar, sidebar
• panel: popover, floating card, picker
• field: input, select, textarea, search

빠른 설치

Classic:

npm install @inkio/simple react react-dom

Notion-like:

npm install @inkio/editor react react-dom

옵션 패키지:

npm install @inkio/image-editor

CommentPanel 같은 advanced export를 앱 코드에서 직접 import할 때만 @inkio/advanced를 추가 설치합니다.

예제

import { Editor } from '@inkio/simple';
import '@inkio/simple/minimal.css';
 
export function Page() {
  return <Editor initialContent="<p>Hello Inkio</p>" />;
}

Markdown은 서브패스로 제공합니다.

import { parseMarkdown, stringifyMarkdown } from '@inkio/simple/markdown';

구현은 remark/unified 기반이며 markdown과 JSONContent를 직접 변환합니다.