Upachikaji

Kuunganisha kihariri au kidhibiti cha Clepit katika programu yoyote ni rahisi: chombo cha DOM ndicho chanzo pekee cha udhibiti.

Kupachika kihariri

Weka id kwenye kipande cha chombo, ita `Editor.create({ containerId, ... })`, hifadhi `EditorAPI` iliyorudishwa, na ita `Editor.destroy(containerId)` wakati wa kusafisha.

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

Kuonyesha matokeo ya kusoma tu

Ita `Renderer.render({ containerId, data })`. Mfano hapa chini unaonyesha muundo halisi wa React kutoka kwa kipande cha `DocsRenderer`: `useId` hutengeneza id ya chombo ya kipekee na `useEffect` husababisha uonyeshaji.

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

Kila API inafanya kazi wapi

Editor na Renderer hupachika DOM hai, hivyo hufanya kazi kwenye kivinjari pekee: tumia effects au maelekezo ya use client kwao. Matokeo ya seva hayavihitaji: renderBlocks huchora HTML iliyokamilika bila DOM kabisa, imeelezwa hapa chini.

Usiite Editor.create au Renderer.render ndani ya kijenzi cha seva; vinahitaji document halisi. Kuonyesha kwenye seva, tumia renderBlocks badala yake.

Uonyeshaji wa seva

renderBlocks huchora hati ile ile hadi mfuatano wa HTML uliokamilika bila DOM, hivyo seva inaweza kutuma alama halisi: watambazaji huzisoma na hakuna kinachochorwa upya wakati wa kupachika. Toa pageStylesheet() kando yake, na uite activateBlocks baada ya kupachika.

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

Unatumia React? @clepit/react hufunga msururu huu huu kama ClepitContent, kijenzi kinachoanzia seva; ona ukurasa wa React.

Haitegemei mfumo wowote

Pakiti kuu ya @clepit/core ni TypeScript safi, hakuna utegemezi wa React. Unatumia React, Vue, Svelte, Angular, au vanilla TS/JS, zote zinatumia API ile ile.

Kuanza

Mwongozo