@clepit/react

توفر حزمة @clepit/react مكوّنات React لمحرر Clepit: ClepitContent الذي يُخرج HTML جاهزًا على الخادم، وClepitEditor الذي يعمل على العميل فقط ويملك دورة حياة Editor.create.

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

التثبيت

bun add @clepit/core @clepit/react

ClepitContent

يرسم ClepitContent المستند إلى HTML نهائي عبر renderBlocks، فيعمل داخل Server Components وأثناء SSR وفي المتصفح. الترميز موجود في الاستجابة الأولى: تقرؤه الزواحف، ولا يُعاد رسم شيء عند التركيب. تُرافق ورقة أنماط النواة الناتج كوسم يزيل React تكراره.

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

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

تُفعَّل الكتل التفاعلية بعد التركيب عبر activateBlocks من @clepit/core: تبويبات متغيرات الشيفرة، ومزامنة اللغة وزر النسخ، وتبويبات استجابات openapi، وتنزيل CSV للجداول، كلها تعمل على الترميز المرسوم على الخادم؛ ولا تعبر إلى المتصفح سوى بيانات الكتل التفاعلية.

خصائص اختيارية:

ClepitEditor

ClepitEditor للعميل فقط ويعيش على مسار فرعي خاص به، لذا لا يسحب استيراد مكوّن العرض شيفرة التحرير إلى حزمة الخادم أبدًا. يملك المكوّن دورة حياة Editor.create: توقيت الـ effect وتفكيك آمن مع StrictMode.

'use client';

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

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

الخصائص هي EditorConfig من @clepit/core دون containerId (يرسم المكوّن حاويته بنفسه)، إضافة إلى id وclassName وtestId وonApi الذي يتلقى EditorAPI الذي يعيده Editor.create. المحرر غير مُتحكَّم فيه: تُقرأ حقول القيمة مرة واحدة عند التركيب، وترى الاستدعاءات دائمًا خصائص آخر render، ويؤدي الفك إلى تدمير النسخة.