API 참조

@clepit/core의 공개 익스포트. 아래 각 심볼은 타입이 지정된 시그니처와 최소한의 사용 예제를 제공합니다.

Editor

핵심 에디터 클래스입니다. Editor는 두 가지 공개 정적 메서드를 제공합니다: create(주요 팩토리)와 destroy. create() 메서드는 EditorAPI 객체를 반환하며, 에디터가 마운트된 후 모든 인스턴스 메서드에 접근할 수 있습니다.

메서드	시그니처	설명
Editor.create	Editor.create(config: EditorConfig): EditorAPI	새 에디터 인스턴스를 생성하고 제공된 containerId를 가진 DOM 요소에 마운트합니다.
Editor.destroy	Editor.destroy(containerId: string): void	EditorAPI 객체의 destroy() 메서드는 이 인스턴스에 대해 Editor.destroy()를 호출합니다.

메서드	시그니처	설명
data.extract	data.extract(): EditorData	에디터 인스턴스에서 현재 블록 데이터를 JSON 안전한 EditorData로 추출합니다.
data.set	data.set(data: EditorData): void	전체 블록 목록을 새 데이터 페이로드로 교체합니다. 전체 다시 렌더링을 트리거합니다.
data.clear	data.clear(): void	블록 콘텐츠와 저장된 상태 데이터 모두 지웁니다.
data.clearContent	data.clearContent(): void	블록만 제거하고 스토어 데이터는 그대로 유지합니다.
data.clearStorage	data.clearStorage(): void	스토어 데이터만 지우고 현재 블록은 그대로 유지합니다.
blocks.insert	blocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number, id?: string): HTMLElement \| null	지정된 index에 블록을 삽입합니다. 대상 블록 유형과 동일한 데이터 형태를 허용합니다.
blocks.convert	blocks.convert(blockId: string, newType: BlockToolType): void	블록을 제자리에서 새 유형으로 변환합니다.
blocks.remove	blocks.remove(index: number): void	지정된 index에 있는 블록을 제거합니다.
blocks.move	blocks.move(fromIndex: number, toIndex: number): void	블록을 한 인덱스에서 다른 인덱스로 이동합니다.
blocks.update	blocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): void	기존 블록의 데이터를 제자리에서 업데이트합니다. 타입은 변경되지 않습니다.
blocks.get	blocks.get(blockId: string): EditorData['blocks'][number] \| null	ID로 블록을 가져옵니다. 찾지 못하면 null을 반환합니다.
blocks.getAll	blocks.getAll(): EditorData['blocks']	모든 블록의 데이터를 배열로 반환합니다.
blocks.count	blocks.count(): number	에디터의 블록 수를 반환합니다.
focus	focus(): void	포커스를 에디터로 이동시켜 첫 번째 블록에 포커스합니다.
blur	blur(): void	에디터 내의 활성 포커스를 제거합니다.
destroy	destroy(): void	EditorAPI 객체의 destroy() 메서드는 이 인스턴스에 대해 Editor.destroy()를 호출합니다.
selection.get	selection.get(): Selection \| null	창 선택 객체 또는 null을 반환합니다.
selection.set	selection.set(selection: Selection): void	창 선택을 제공된 Selection 객체로 설정합니다.
selection.clear	selection.clear(): void	창 선택에서 모든 범위를 제거합니다.
ui.showBlockMenu	ui.showBlockMenu(block: HTMLElement): void	지정된 블록 DOM 요소에 대한 블록 타입 메뉴를 표시합니다.
ui.hideBlockMenu	ui.hideBlockMenu(): void	블록 타입 메뉴가 열려 있으면 숨깁니다.
ui.showToolbar	ui.showToolbar(x: number, y: number): void	제공된 x, y 뷰포트 좌표에 인라인 도구 모음을 표시합니다.
ui.hideToolbar	ui.hideToolbar(): void	인라인 도구 모음이 표시되면 숨깁니다.
view.getCurrentView	view.getCurrentView(containerId: string): EditorView \| null	주어진 containerId에 대한 현재 뷰(edit, preview 또는 json)를 반환합니다.
view.switchView	view.switchView(containerId: string, view: EditorView): void	에디터를 지정된 뷰로 전환합니다: edit, preview 또는 json。

일반적인 사용 예시

TypeScript

import { Editor } from '@clepit/core';

const editor = Editor.create({
  containerId: 'editor',
  theme: 'auto',
  placeholder: 'Start writing...',
  minHeight: 300,
});

// Insert a block
editor.blocks.insert('paragraph', { html: 'Hello world' }, 0);

// Extract data
const data = editor.data.extract();

// Switch view
editor.view.switchView('editor', 'preview');

// Tear down
editor.destroy();

Renderer

저장된 블록 데이터를 DOM 요소 내 읽기 전용 HTML로 변환하는 클래스입니다. 이 클래스에는 하나의 공개 정적 메서드가 있습니다: render()。

메서드	시그니처	설명
Renderer.render	Renderer.render(config: RendererConfig): HTMLElement	저장된 블록 JSON을 읽기 전용 HTML로 컨테이너에 렌더링합니다. 편집 기능 없이 콘텐츠를 표시하려는 곳 어디에서나 사용하세요.

일반적인 사용 예시

TypeScript

import { Renderer } from '@clepit/core';

Renderer.render({
  containerId: 'output',
  data,
  theme: 'auto',
  margins: { bottom: 12, top: 0 },
});

서버 렌더링

이 함수들은 DOM도 브라우저도 없이 동작합니다. 완성된 HTML 문자열을 그리므로 Node, 엣지 런타임, 서버 컴포넌트에서 작동합니다. React에서는 @clepit/react가 이를 ClepitContent로 감쌉니다.

메서드	시그니처	설명
renderBlocks	renderBlocks(blocks: Block[], context?: DrawContext): string	문서를 완성된 HTML 문자열로 그립니다. DOM이 필요 없습니다.
renderPage	renderPage(page: PublicPage, context?: DrawContext): string	문서의 완전한 공개 HTML 페이지를 그립니다. 마크업, 스타일시트, 메타데이터, 앵커로 이동 가능한 블록 id를 포함합니다.
pageStylesheet	pageStylesheet(): string	정적으로 그린 마크업의 스타일시트를 반환합니다. renderBlocks 출력 옆에 제공하거나 인라인합니다.
activateBlocks	activateBlocks(container: HTMLElement, blocks: readonly Block[]): () => void	마운트 후 서버가 그린 마크업에 인터랙티브 동작(코드 탭, 복사 버튼, openapi 응답 탭, 테이블 CSV 다운로드)을 연결하고 해제 함수를 반환합니다.
drawBlock	drawBlock(block: Block, backing: Backing, context?: DrawContext): ClepitElement \| null	하나의 블록을 backing에 그립니다. string backing을 쓰면 DOM 없이 그립니다.
tokensToLightDarkBlock	tokensToLightDarkBlock(light: ThemeTokens, dark: ThemeTokens, selector: string): string	라이트와 다크 ThemeTokens 쌍을 선택자용 light-dark() CSS 변수 블록으로 바꿉니다. 라이브 StyleManager 없이 정적 마크업에 테마를 적용합니다.

TypeScript

import { activateBlocks, pageStylesheet, renderBlocks } from '@clepit/core';

// On the server: finished HTML, no DOM needed
const html = renderBlocks(doc.blocks);
const css = pageStylesheet();

// In the browser, after mount: wire the interactive blocks
const dispose = activateBlocks(container, doc.blocks);

StyleManager

테마 시스템을 관리하는 중앙 집중식 클래스입니다. 소비자를 위한 세 가지 유용한 공개 정적 메서드를 제공합니다: subscribe(OS 수준의 테마 변경용), getResolvedTheme(현재 OS 테마 읽기), injectStyles(커스텀 CSS 주입).

메서드	시그니처	설명
StyleManager.subscribe	StyleManager.subscribe(cb: (theme: 'light' \| 'dark') => void): () => void	런타임 테마 토큰 변경을 구독합니다. theme 또는 themeOverrides가 변경될 때마다 리스너가 실행됩니다.
StyleManager.getResolvedTheme	StyleManager.getResolvedTheme(): 'light' \| 'dark'	현재 OS 테마("light" 또는 "dark")를 읽습니다. matchMedia를 사용할 수 없으면 "light"를 반환합니다.
StyleManager.injectStyles	StyleManager.injectStyles(styleId: string, styles: string): boolean	CSS 문자열을 document.head에 주입합니다(고유한 styleId 사용). 이미 존재하면 false, 아니면 true를 반환합니다.

일반적인 사용 예시

TypeScript

import { StyleManager } from '@clepit/core';

// React to OS theme changes
const unsubscribe = StyleManager.subscribe(theme => {
  console.log('OS theme:', theme); // 'light' | 'dark'
});

// Read current OS theme
const current = StyleManager.getResolvedTheme();

// Inject custom CSS once
StyleManager.injectStyles('my-overrides', `
  .clepit-editor { font-family: 'Inter', sans-serif; }
`);

// Unsubscribe when done
unsubscribe();