Lumaktaw sa pangunahing nilalaman

Mga gabay

Pag-embed

Pag-embed

Ang pag-integrate ng Clepit editor o renderer sa anumang application ay simple: ang isang DOM container ang tanging punto ng kontrol.

Pag-mount ng editor

Bigyan ng id ang container element, tawagan ang `Editor.create({ containerId, ... })`, itago ang ibinalik na `EditorAPI`, at tawagan ang `Editor.destroy(containerId)` sa paglilinis.

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');

Pag-render ng output nang read-only

Tawagan ang `Renderer.render({ containerId, data })`. Ipinapakita ng halimbawa sa ibaba ang tunay na React pattern mula sa `DocsRenderer` component: gumagawa ang `useId` ng natatanging container id at ang `useEffect` ang nagpapatakbo ng render.

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

Pag-render sa client lamang / SSR

Parehong gumagana ang Editor at Renderer sa DOM kaya nagtatakbo lamang sa browser: gumamit ng effects (`useEffect`) o ng `'use client'` directive. Hindi sila gumagana sa SSR.

Huwag tawagin ang `Editor.create` o `Renderer.render` sa labas ng `useEffect` o sa loob ng isang server component; magdudulot ito ng error na "document is not defined".

Hindi nakadepende sa framework

Ang pangunahing @clepit/core package ay simpleng TypeScript, walang React dependency. Maging React, Vue, Svelte, Angular, o vanilla TS/JS ang ginagamit mo, lahat ay gumagamit ng parehong API.