시작하기

어떤 패키지를 설치할지

• 댓글·멘션·슬래시 메뉴가 필요하면 → @inkio/editor
• 툴바 위주 classic 편집기로 충분하면 → @inkio/simple
• 실시간 협업이 필요하면 → 위 선택 + @inkio/collab
• 이미지 자르기·모자이크가 필요하면 → 위 선택 + @inkio/image-editor
• 직접 조합(스키마·확장 단위 제어)이 필요하면 → @inkio/core (+ @inkio/advanced)

@inkio/advanced는 단독 설치하지 마세요. editor에 포함되어 있고, 직접 import하는 export를 쓸 때만 추가합니다.

설치

npm install @inkio/simple react react-dom

또는:

npm install @inkio/editor react react-dom

옵션:

npm install @inkio/image-editor

CommentPanel이나 comment i18n처럼 advanced export를 직접 import할 때만 @inkio/advanced를 추가 설치합니다.

Inkio는 자신이 사용하는 Tiptap runtime을 직접 소유합니다. 일반 사용자는 React peer만 맞추면 됩니다.

스타일

Simple:

import '@inkio/simple/minimal.css';

Editor:

import '@inkio/editor/minimal.css';

Image editor:

import '@inkio/image-editor/style.css';

기본 사용

Simple:

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

Editor:

import { Editor } from '@inkio/editor';
 
export function Page() {
  return (
    <Editor
      content="<p>Hello Inkio</p>"
      hashtagItems={({ query }) => [
        { id: query || 'inkio', label: `#${query || 'inkio'}` },
      ]}
      ui={{ showBubbleMenu: true, showFloatingMenu: true }}
    />
  );
}

기억할 규칙

• content는 초기 문서입니다. 마운트 후 상태는 에디터가 소유하며, 외부에서 값을 바꾸려면 onCreate 인스턴스의 editor.commands.setContent()를 쓰세요.
• @inkio/editor는 notion-like surface 기본값을 가집니다.
• @inkio/simple은 classic toolbar surface 기본값을 가집니다.
• shell / panel / field 같은 chrome surface는 패키지 간에 공통 Inkio token을 공유합니다.
• @inkio/image-editor는 fullscreen overlay 구조지만 같은 surface 계층을 씁니다.
• @inkio/editor CSS는 advanced preset 스타일을 이미 포함합니다.
• justify alignment는 지원하지 않습니다.
• math는 내장하지 않습니다. 필요하면 Tiptap Mathematics 를 직접 조합하세요.