본문 내용으로 건너뛰기

가이드

임베딩

임베딩

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} />;
};

각 API가 실행되는 위치

Editor와 Renderer는 실제 DOM을 마운트하므로 브라우저에서만 동작합니다. 이들에는 이펙트나 use client 지시어를 쓰세요. 서버 출력에는 필요 없습니다. renderBlocks는 DOM 없이 완성된 HTML을 그립니다(아래 참조).

서버 컴포넌트 안에서 Editor.create나 Renderer.render를 호출하지 마세요. 실제 document가 필요합니다. 서버에서 렌더링하려면 대신 renderBlocks를 사용하세요.

서버 렌더링

renderBlocks는 같은 문서를 DOM 없이 완성된 HTML 문자열로 그리므로 서버가 진짜 마크업을 보낼 수 있습니다. 크롤러가 읽을 수 있고 마운트 시 다시 그려지지 않습니다. pageStylesheet()를 함께 제공하고, 마운트 후 activateBlocks를 호출하세요.

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);
React를 쓰시나요? @clepit/react가 바로 이 파이프라인을 서버 우선 컴포넌트 ClepitContent로 패키징합니다. React 페이지를 참고하세요.

프레임워크 독립적

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