Rukia hadi maudhui makuu

@clepit/react

Kifurushi cha @clepit/react kinatoa vijenzi vya React kwa kihariri cha Clepit: ClepitContent, kinachotoa HTML iliyokamilika kwenye seva, na ClepitEditor, kijenzi cha mteja pekee kinachomiliki mzunguko wa maisha wa Editor.create.

npm: @clepit/react · npm: @clepit/core

Sakinisha

Shell
bun add @clepit/core @clepit/react

ClepitContent

ClepitContent huchora hati hadi HTML iliyokamilika kupitia renderBlocks, hivyo hufanya kazi ndani ya Server Components, wakati wa SSR, na kwenye kivinjari. Alama ziko katika jibu la kwanza: watambazaji huzisoma, na hakuna kinachochorwa upya wakati wa kupachika. Laha ya mitindo ya msingi huambatana kama lebo ya inayoondolewa nakala na React.

TypeScript
import { ClepitContent } from '@clepit/react';

export const Article = ({ document }) => <ClepitContent data={document} />;

Vizuizi vya kuingiliana huwa hai baada ya kupachika kupitia activateBlocks kutoka @clepit/core: tabo za aina za msimbo, usawazishaji wa lugha na kitufe cha kunakili, tabo za majibu ya openapi, na upakuaji wa CSV wa jedwali vyote hufanya kazi kwenye alama zilizochorwa na seva; data ya vizuizi vya kuingiliana pekee ndiyo huvuka hadi kivinjari.

Props za hiari:

SehemuAinaInahitajikaMaelezo
theme'auto' | 'light' | 'dark'Hapana'auto'
themeOverrides{ light?, dark? }HapanaThemeTokens
context{ docHref?, mapsEmbedKey?, activeVariant? }Hapana
transformHtml(html: string) => stringHapana
classNamestringHapana
testIdstringHapana

ClepitEditor

ClepitEditor ni ya mteja pekee na huishi kwenye njia yake ndogo, hivyo kuagiza kijenzi cha maonyesho hakuvuti kamwe msimbo wa uhariri kwenye kifurushi cha seva. Kijenzi kinamiliki mzunguko wa maisha wa Editor.create: muda wa effect na ubomoaji salama kwa StrictMode.

TypeScript
'use client';

import { ClepitEditor } from '@clepit/react/editor';

export const Compose = ({ initialData, onSave }) => (
  <ClepitEditor
    initialData={initialData}
    onChange={data => onSave(data)}
    placeholder='Start writing'
  />
);

Props ni EditorConfig kutoka @clepit/core bila containerId (kijenzi huchora kishikilio chake), pamoja na id, className, testId na onApi, inayopokea EditorAPI iliyorejeshwa na Editor.create. Kihariri hakidhibitiwi: sehemu za thamani husomwa mara moja wakati wa kupachika, callbacks daima huona props za render ya hivi karibuni, na kuondoa hupachika huharibu nakala.