ወደ ዋናው ይዘት ዝለል

@clepit/react

የ @clepit/react ጥቅል ለ Clepit አርታኢ የ React ክፍሎችን ይሰጣል፦ በአገልጋይ ላይ ዝግጁ HTML የሚያወጣ ClepitContent እና የ Editor.create ሕይወት ዑደትን የሚይዝ በደንበኛ ብቻ የሚሰራ ClepitEditor።

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

መጫን

Shell
bun add @clepit/core @clepit/react

ClepitContent

ClepitContent ሰነድን በ renderBlocks በኩል ወደ ዝግጁ HTML ይሳላል፣ ስለዚህ በ Server Components ውስጥ፣ በ SSR ጊዜ እና በአሳሹ ውስጥ ይሰራል። ምልክቱ በመጀመሪያው ምላሽ ውስጥ ነው፦ ሰርሳሪዎች ያነቡታል፣ እና በመጫን ጊዜ ምንም አይደገምም። የኮር ስታይል ሉህ በ React የተባዛ የ መለያ ሆኖ አብሮ ይጓዛል።

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

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

በይነተገናኝ ብሎኮች ከመጫን በኋላ በ @clepit/core በሚገኘው activateBlocks በኩል ይነቃሉ፦ የኮድ ልዩነት ትሮች፣ የቋንቋ ማመሳሰልና የቅዳ አዝራር፣ የ openapi ምላሽ ትሮች እና የሰንጠረዥ CSV ማውረድ ሁሉም በአገልጋይ በተሳለው ምልክት ላይ ይሰራሉ፤ የበይነተገናኝ ብሎኮች ውሂብ ብቻ ወደ አሳሹ ይሻገራል።

አማራጭ ባህሪያት፦

መስክአይነትአስፈላጊመግለጫ
theme'auto' | 'light' | 'dark'አይ'auto'
themeOverrides{ light?, dark? }አይThemeTokens
context{ docHref?, mapsEmbedKey?, activeVariant? }አይ
transformHtml(html: string) => stringአይ
classNamestringአይ
testIdstringአይ

ClepitEditor

ClepitEditor በደንበኛ ብቻ ነው እና በራሱ ንዑስ መንገድ ላይ ይኖራል፣ ስለዚህ የማሳያውን ክፍል ማስመጣት የአርትዖት ኮድን ወደ የአገልጋይ ጥቅል በጭራሽ አያመጣም። ክፍሉ የ Editor.create ሕይወት ዑደትን ይይዛል፦ የ effect ሰዓት አያያዝ እና ለ 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'
  />
);

ባህሪያቱ ከ @clepit/core የመጣው EditorConfig ናቸው፣ containerId ሳይኖር (ክፍሉ የራሱን መያዣ ይሳላል)፣ በተጨማሪ id, className, testId እና onApi፣ እሱም Editor.create የመለሰውን EditorAPI ይቀበላል። አርታኢው ቁጥጥር የለሽ ነው፦ የእሴት መስኮች በመጫን ጊዜ አንድ ጊዜ ይነበባሉ፣ callbacks ሁልጊዜ የመጨረሻውን render ባህሪያት ያያሉ፣ እና ማንሳት ኢንስታንሱን ያፈርሳል።