컴포넌트

Editor

@inkio/editor — Editor

Notion-like 에디터. bubble menu, floating menu, slash command, block handle이 기본으로 활성화됩니다.


import { Editor } from '@inkio/editor';
import '@inkio/editor/style.css';

Prop	타입	설명
`content`	`string \| JSONContent`	제어 모드 콘텐츠 (controlled)
`initialContent`	`string \| JSONContent`	비제어 모드 초기 콘텐츠
`editable`	`boolean`	편집 가능 여부 (기본값: `true`)
`placeholder`	`string`	빈 에디터 placeholder 텍스트
`locale`	`InkioLocaleInput`	로케일
`tabBehavior`	`'indent' \| 'default'`	Tab 키 동작 (기본값: `'indent'`)
`onUpdate`	`(content: JSONContent) => void`	콘텐츠 변경 콜백
`onCreate`	`(editor: TiptapEditor) => void`	에디터 인스턴스 준비 콜백
`onError`	`InkioErrorHandler`	에러 핸들러
`ui`	`EditorUiOptions`	UI 옵션 (아래 참고)
`hashtagItems`	`(params: { query: string }) => HashTagItem[] \| Promise<HashTagItem[]>`	해시태그 제안
`mentionItems`	`(params: { query: string }) => MentionItem[] \| Promise<MentionItem[]>`	멘션 제안
`slashCommands`	`(query: string) => SlashCommandItem[] \| Promise<SlashCommandItem[]>`	슬래시 커맨드 오버라이드
`transformSlashCommands`	`SlashCommandTransform`	슬래시 커맨드 변환
`onWikiLinkClick`	`(href: string) => void`	위키 링크 클릭 핸들러
`onImageUpload`	`(file: File) => Promise<string \| { src: string }>`	이미지 업로드 핸들러
`imageBlock`	`Partial<ImageBlockOptions>`	ImageBlock 확장 옵션
`comment`	`false \| CommentConfig`	댓글 기능 설정 (`false`로 비활성화)
`bookmark`	`false \| { onResolveBookmark? }`	북마크 기능 설정
`blockHandle`	`boolean`	블록 핸들 표시 여부
`wikiLink`	`boolean`	위키 링크 활성화 여부
`table`	`boolean`	테이블 활성화 여부
`callout`	`boolean`	Callout 활성화 여부
`toggleList`	`boolean`	토글 리스트 활성화 여부
`extensions`	`ExtensionsInput`	확장 추가/교체

EditorUiOptions:

옵션	타입	설명
`showBubbleMenu`	`boolean`	bubble menu 표시 (기본값: `true`)
`showFloatingMenu`	`boolean`	floating menu 표시 (기본값: `true`)
`showTableMenu`	`boolean`	table menu 표시 (기본값: `true`)
`fill`	`boolean`	부모 높이를 채움
`autoresize`	`boolean`	콘텐츠 높이에 맞게 자동 조절
`bordered`	`boolean`	테두리 표시
`className`	`string`	루트 엘리먼트 클래스
`style`	`React.CSSProperties`	루트 엘리먼트 스타일
`messages`	`InkioMessageOverrides`	UI 메시지 오버라이드
`icons`	`Partial<InkioIconRegistry>`	아이콘 오버라이드
`bubbleMenu`	`Omit<BubbleMenuProps, 'editor'>`	BubbleMenu 세부 옵션
`floatingMenu`	`Omit<FloatingMenuProps, 'editor'>`	FloatingMenu 세부 옵션
`tableMenu`	`Omit<TableMenuProps, 'editor'>`	TableMenu 세부 옵션


export function EditorPage() {
  return (
    <Editor
      initialContent="<p>Hello Inkio</p>"
      hashtagItems={({ query }) => [
        { id: query || 'inkio', label: `#${query || 'inkio'}` },
      ]}
      mentionItems={async ({ query }) => searchUsers(query)}
      onImageUpload={async (file) => URL.createObjectURL(file)}
      ui={{ showBubbleMenu: true, showFloatingMenu: true, fill: true }}
    />
  );
}

@inkio/simple — Editor

Classic toolbar-first 에디터. toolbar가 기본으로 활성화됩니다.


import { Editor } from '@inkio/simple';
import '@inkio/simple/style.css';

Prop	타입	설명
`content`	`string \| JSONContent`	제어 모드 콘텐츠
`initialContent`	`string \| JSONContent`	비제어 모드 초기 콘텐츠
`editable`	`boolean`	편집 가능 여부
`placeholder`	`string`	placeholder 텍스트
`locale`	`InkioLocaleInput`	로케일
`tabBehavior`	`'indent' \| 'default'`	Tab 키 동작
`onUpdate`	`(content: JSONContent) => void`	콘텐츠 변경 콜백
`onCreate`	`(editor: TiptapEditor) => void`	에디터 인스턴스 준비 콜백
`onError`	`InkioErrorHandler`	에러 핸들러
`onImageUpload`	`(file: File) => Promise<string \| { src: string }>`	이미지 업로드 핸들러
`imageBlock`	`Partial<ImageBlockOptions>`	ImageBlock 확장 옵션
`ui`	`SimpleEditorUiOptions`	UI 옵션
`extensions`	`ExtensionsInput`	확장 추가/교체

SimpleEditorUiOptions (@inkio/simple):

showToolbar (기본값: true), showBubbleMenu, showFloatingMenu, showTableMenu, fill, autoresize, bordered, className, style, messages, icons, toolbar, bubbleMenu, floatingMenu, tableMenu

패키지별 prop 비교

Prop	@inkio/editor	@inkio/simple
`content` / `initialContent`	O	O
`onUpdate`, `onCreate`, `onError`	O	O
`ui.showToolbar`	- (항상 off)	O
`ui.showBubbleMenu`	O (기본 on)	O (기본 off)
`ui.showFloatingMenu`	O (기본 on)	O (기본 off)
`hashtagItems`	O	-
`mentionItems`	O	-
`slashCommands`	O	-
`onWikiLinkClick`	O	-
`comment`	O	-
`bookmark`	O	-
`blockHandle`	O	-
`wikiLink`	O	-
`onImageUpload`	O	O

Viewer

@inkio/editor — Viewer

@inkio/editor의 Viewer는 댓글(comment) 기능을 지원합니다.


import { Viewer } from '@inkio/editor';

Prop	타입	설명
`content`	`string \| JSONContent`	표시할 콘텐츠 (필수)
`locale`	`InkioLocaleInput`	로케일
`ui`	`{ className?, style?, bordered?, messages?, icons? }`	UI 옵션
`comment`	`false \| ViewerCommentOptions`	댓글 표시 설정
`extensions`	`ExtensionsInput`	확장 추가/교체
`onCreate`	`(editor: TiptapEditor) => void`	에디터 인스턴스 준비 콜백

ViewerCommentOptions:


{
  getComments: (commentId: string) => CommentData | null;
  onReply?: (commentId: string, text: string) => void;
  onResolve?: (commentId: string) => void;
}


<Viewer
  content={content}
  comment={{
    getComments: (id) => store.getComment(id),
    onReply: (id, text) => store.reply(id, text),
    onResolve: (id) => store.resolve(id),
  }}
/>

@inkio/simple — Viewer


import { Viewer } from '@inkio/simple';

Prop	타입	설명
`content`	`string \| JSONContent`	표시할 콘텐츠 (필수)
`locale`	`InkioLocaleInput`	로케일
`ui`	`{ className?, style?, bordered?, messages?, icons? }`	UI 옵션
`extensions`	`ExtensionsInput`	확장 추가/교체

ToC (목차)

Inkio는 두 가지 목차 옵션을 제공합니다.

Option 1: TocBlock (인라인 블록)

@inkio/core에 기본 포함되는 인라인 목차 블록입니다. /toc 슬래시 커맨드로 에디터 안에 직접 삽입하며, 헤딩이 추가·수정·삭제되면 자동으로 업데이트됩니다. 배경·테두리 없는 Notion 스타일 미니멀 디자인입니다.

비활성화하려면 getExtensions에 tocBlock: false를 전달합니다:


import { getExtensions } from '@inkio/core';
 
const extensions = getExtensions({ tocBlock: false });

자세한 내용은 TocBlock 확장을 참고하세요.

Option 2: `<ToC>` 컴포넌트 (오버레이 미니맵)

에디터 오른쪽 가장자리에 Notion 스타일 미니맵 바를 표시하는 오버레이 컴포넌트입니다. 바에 마우스를 올리면 슬라이드 애니메이션과 함께 전체 헤딩 패널이 펼쳐집니다.

에디터를 감싸는 컨테이너에 position: relative를 설정하고, 그 안에 <ToC>를 배치합니다.


import { ToC } from '@inkio/editor';
// 또는
import { ToC } from '@inkio/core';

Prop	타입	기본값	설명
`source`	`TiptapEditor \| null`	-	에디터 인스턴스
`maxLevel`	`number`	`3`	포함할 최대 헤딩 레벨 (h1-h3)
`className`	`string`	-	루트 엘리먼트 클래스
`style`	`React.CSSProperties`	-	루트 엘리먼트 스타일


import { useState } from 'react';
import { Editor, ToC } from '@inkio/editor';
import '@inkio/editor/style.css';
 
function MyEditor() {
  const [editor, setEditor] = useState(null);
  return (
    <div style={{ position: 'relative' }}>
      <Editor onCreate={setEditor} />
      <ToC source={editor} />
    </div>
  );
}

헤딩 클릭 시 스크롤 오프셋을 조정하려면 CSS 변수를 사용하세요:


:root {
  --inkio-scroll-offset: 80px; /* sticky header 높이 등 */
}

CSS

파일	포함 내용	용도
`@inkio/editor/style.css`	전체 스타일 (advanced 프리셋 포함)	일반 사용
`@inkio/simple/style.css`	core 스타일만	classic 에디터
`@inkio/editor/minimal.css`	구조만 (색상·폰트 없음)	커스텀 테마
`@inkio/simple/minimal.css`	구조만	커스텀 테마

minimal.css는 레이아웃과 구조적 스타일만 포함합니다. 색상, 폰트, 배경 등은 직접 정의해야 합니다.


// 일반 사용
import '@inkio/editor/style.css';
 
// 커스텀 테마 (디자인 토큰을 직접 정의할 때)
import '@inkio/editor/minimal.css';

공통 UI override

ui prop으로 UI 관련 옵션을 묶어 전달합니다.


import { Editor, type InkioMessageOverrides } from '@inkio/editor';
 
const messages: InkioMessageOverrides = {
  core: {
    suggestion: { empty: 'No matching items.' },
  },
};
 
export function Page() {
  return (
    <Editor
      ui={{
        messages,
        showBubbleMenu: true,
        showFloatingMenu: true,
        fill: true,
      }}
    />
  );
}

부모 높이를 기준으로 에디터를 채우려면 ui.fill을 사용합니다. 부모 컨테이너에 계산된 높이가 있어야 동작합니다.


<section style={{ height: '640px' }}>
  <Editor ui={{ fill: true }} />
</section>

기본 메시지 export


import { enCoreMessages } from '@inkio/editor';
import { enCommentMessages } from '@inkio/advanced';
import { enImageEditorMessages } from '@inkio/image-editor';