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

Saan tumatakbo ang bawat API

Nagmo-mount ng live na DOM ang Editor at Renderer, kaya sa browser lang sila tumatakbo: gumamit ng effects o ng use client directive para sa kanila. Hindi sila kailangan ng server output: gumuguhit ang renderBlocks ng tapos na HTML nang walang anumang DOM, tinalakay sa ibaba.

Huwag tawagin ang Editor.create o Renderer.render sa loob ng server component; kailangan nila ng totoong document. Para mag-render sa server, gamitin ang renderBlocks sa halip.

Server rendering

Iginuguhit ng renderBlocks ang parehong dokumento sa tapos na HTML string nang walang DOM, kaya nakakapagpadala ang server ng totoong markup: nababasa ito ng mga crawler at walang nagre-repaint sa mount. Ihain ang pageStylesheet() kasabay nito, at tawagin ang activateBlocks pagkatapos ng mount.

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

Gumagamit ng React? Ibinabalot ng @clepit/react ang eksaktong pipeline na ito bilang ClepitContent, isang server-first na component; tingnan ang React page.

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.

Pagsisimula

Mga gabay