확장

Inkio 확장은 두 층으로 나뉩니다.

• @inkio/core
  • callout
  • details/toggle
  • table
  • keyboard shortcuts
• @inkio/advanced
  • slash command
  • block handle
  • mention
  • hashtag
  • wiki link
  • bookmark
  • comment

권장 시작점

• classic editor가 필요하면 @inkio/simple
• notion-like editor가 필요하면 @inkio/editor
• low-level 조합이 필요하면 @inkio/core 또는 @inkio/advanced

조합 예시

import { Editor } from '@inkio/core';
import { getDefaultExtensions } from '@inkio/advanced';
import '@inkio/core/minimal.css';
import '@inkio/advanced/style.css';
 
const extensions = getDefaultExtensions({
  hashtagItems: ({ query }) => [{ id: query || 'inkio', label: `#${query || 'inkio'}` }],
});
 
export function Page() {
  return <Editor extensions={extensions} initialContent="<p>Hello Inkio</p>" />;
}

Image editor

import { Editor } from '@inkio/editor';
import { ImageEditorModal } from '@inkio/image-editor';
import '@inkio/image-editor/style.css';
 
export function Page() {
  return (
    <Editor
      onImageUpload={async (file) => URL.createObjectURL(file)}
      imageBlock={{ imageEditor: ImageEditorModal }}
    />
  );
}

TocBlock (인라인 목차)

@inkio/core에 기본 포함됩니다. 문서 안에 Notion 스타일의 인라인 목차 블록을 삽입합니다.

참고: 에디터 외부에 오버레이 미니맵 형태로 표시하려면 <ToC> 컴포넌트를 사용하세요. 컴포넌트 문서 참고

• /toc 슬래시 커맨드로 삽입 (@inkio/advanced SlashCommand 필요)
• 헤딩이 추가/수정/삭제되면 자동으로 업데이트됩니다
• 항목 클릭 시 해당 헤딩으로 스크롤됩니다
• 배경/테두리 없는 Notion 스타일 미니멀 디자인 (텍스트 링크만)
• 헤딩이 없으면 muted 플레이스홀더 표시: “Add headings to see the table of contents.”

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

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

CodeBlock (코드 블록)

@inkio/core에 기본 포함되며, lowlight 기반 구문 강조를 제공합니다. 37개의 일반적인 언어를 지원합니다.

• 에디터 모드: 플로팅 언어 선택기(드롭다운)로 언어 변경
• 뷰어 모드: 복사 버튼 + 언어 배지 표시
• tsx / jsx는 각각 typescript / javascript의 별칭으로 처리됩니다

코드 블록을 비활성화하려면 codeBlock={false}를 전달합니다(@inkio/editor 전용 기능 토글 참고).

커스텀 확장

extensions prop으로 Tiptap 확장을 추가하거나 교체할 수 있습니다.

타입

type ExtensionsInput =
  | Extension[]
  | { items: Extension[]; replace?: boolean };

• 배열 전달: 기본 확장에 추가합니다. 동일한 이름의 확장이 있으면 교체됩니다.
• { items, replace: true } 전달: 기본 확장을 전부 교체합니다.

예시: 확장 추가

import { Editor } from '@inkio/editor';
import CharacterCount from '@tiptap/extension-character-count';
 
<Editor
  extensions={[CharacterCount.configure({ limit: 1000 })]}
/>

예시: 기본 확장 전체 교체

import { Editor } from '@inkio/editor';
import { Document, Paragraph, Text } from '@tiptap/starter-kit';
 
<Editor
  extensions={{ items: [Document, Paragraph, Text], replace: true }}
/>

기능 토글 (@inkio/editor 전용)

@inkio/editor의 Editor 컴포넌트는 주요 확장을 prop으로 켜고 끌 수 있습니다.

<Editor
  blockHandle={false}
  wikiLink={false}
/>

CSS

• @inkio/simple/minimal.css
• @inkio/editor/minimal.css
• @inkio/advanced/style.css — @inkio/core + @inkio/advanced 직접 조합 시
• @inkio/image-editor/style.css