시작하기

어떤 패키지를 설치할지

• 일반적인 문서 편집기: @inkio/simple
• notion-like 에디터: @inkio/editor
• comments, mention, wiki link 같은 고급 기능: @inkio/advanced
• 이미지 편집: @inkio/image-editor

설치

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 initialContent="<p>Hello Inkio</p>" />;
}

Editor:

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

기억할 규칙

• content와 initialContent는 동시에 넘기지 않습니다.
• @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 를 직접 조합하세요.