본문 내용으로 건너뛰기

가이드

임베딩

임베딩

Clepit 에디터나 렌더러를 어떤 앱에든 통합하는 것은 간단합니다: DOM 컨테이너가 유일한 제어 지점입니다.

에디터 마운트하기

컨테이너 요소에 id를 부여하고, `Editor.create({ containerId, ... })`를 호출하며, 반환된 `EditorAPI`를 유지하고, 정리 시 `Editor.destroy(containerId)`를 호출하세요.

TypeScript
import { Editor } from '@clepit/core';
import type { EditorAPI } from '@clepit/core';

// 1. Give your container a stable id
// <div id="my-editor"></div>

// 2. Create the editor and hold the returned API
const editor: EditorAPI = Editor.create({
  containerId: 'my-editor',
  minHeight: 400,
  placeholder: 'Start writing...',
  theme: 'auto',
  onChange: data => console.log(data),
  onReady: () => console.log('Editor ready'),
});

// 3. Extract content any time
const data = editor.data.extract();

// 4. Destroy on teardown (e.g. component unmount)
Editor.destroy('my-editor');

출력을 읽기 전용으로 렌더링하기

`Renderer.render({ containerId, data })`를 호출하세요. 아래 예제는 `DocsRenderer` 컴포넌트의 실제 React 패턴을 보여줍니다: `useId`가 고유한 container id를 생성하고 `useEffect`가 렌더링을 트리거합니다.

TSX
import { Renderer } from '@clepit/core';
import type { EditorData } from '@clepit/core';
import { useEffect, useId } from 'react';

type Props = { content: EditorData };

const ReadOnlyView = ({ content }: Props) => {
  // useId produces a stable, unique id per component instance
  const containerId = useId().replace(/[^a-z0-9]/gi, '');

  useEffect(() => {
    Renderer.render({
      containerId,
      data: content,
      margins: { bottom: 0, top: 0 },
    });
  }, [containerId, content]);

  return <div id={containerId} />;
};

클라이언트 전용 렌더링 / SSR

Editor와 Renderer 모두 DOM에서 동작하므로 브라우저에서만 실행됩니다: effects (`useEffect`) 또는 `'use client'` 디렉티브를 사용하세요. SSR 중에는 동작하지 않습니다.

`Editor.create` 또는 `Renderer.render`를 `useEffect` 밖이나 서버 컴포넌트 안에서 호출하지 마세요; "document is not defined" 오류가 발생합니다.

프레임워크 독립적

핵심 @clepit/core 패키지는 순수 TypeScript입니다. React 의존성이 없습니다. React, Vue, Svelte, Angular, 또는 vanilla TS/JS 어떤 것을 사용하든 모두 동일한 API를 사용합니다.