البدء

ثبّت الحزمة، وركّبها في أي عنصر حاوية عبر المعرّف id، واستخرج JSON نظيفًا متى احتجت إليه. لا يعتمد Clepit على أي إطار عمل قرين، لذا يندمج في React أو Vue أو Svelte أو JavaScript الخام دون أغلفة.

التثبيت

أضف @clepit/core إلى مشروعك. يُشحن المحرر كحزمة ESM واحدة مع تعريفات TypeScript.

bun add @clepit/core

إنشاء محرر

أضف div ثم استدعِ Editor.create مع خيارات EditorConfig التي تحتاجها. containerId هو الوحيد المطلوب؛ كل الباقي اختياري.

import { Editor } from '@clepit/core';

const editor = Editor.create({
  containerId: 'editor',
  onChange: data => console.log(data),
  placeholder: 'Start writing…',
  theme: 'auto',
});

التحرير والحفظ

استدعِ editor.data.extract() بعد أن يكتب المستخدمون للتجميع في شكل JSON من نوع EditorData. تحتوي الحزمة على مصفوفة { blocks } مع كل كتلة.

const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [
//     { id: 'abc123', type: 'paragraph', data: { html: 'Hello world' } },
//     ...
//   ]
// }

العرض للقراءة فقط

استخدم Renderer.render لتحويل EditorData المحفوظة في أي مكان إلى HTML. لا يحتفظ Renderer بأي حالة. يحتاج فقط إلى div يحتوي على containerId.

import { Renderer } from '@clepit/core';

Renderer.render({
  containerId: 'output',
  data: savedEditorData,
  margins: { bottom: 0, top: 0 },
});

مستقل عن أطر العمل

لا تحتوي @clepit/core على أي تبعيات لأطر العمل المقابلة. يتطلب كلٌّ من Editor.create وRenderer.render فقط DOM API كامل: React أو Vue أو Svelte أو JavaScript الخالص تعمل جميعها مباشرةً.