الإعداد

EditorConfig وRendererConfig هما نقطتا الدخول لكل تخصيص. مرر أيًا منهما إلى Editor.create() أو Renderer.render() على التوالي. containerId فقط (وdata للـ Renderer) مطلوبان، وباقي الخيارات لها قيم افتراضية آمنة.

EditorConfig

مرر EditorConfig كوسيط وحيد إلى Editor.create(). يجب أن يتطابق containerId المطلوب مع معرف عنصر DOM موجود مسبقًا.

الخيار	النوع	مطلوب	الوصف
containerId	string	نعم	معرف عنصر DOM الذي سيستضيف المحرر. يجب أن يكون موجودًا في DOM قبل استدعاء Editor.create().
maxHeight	number	لا	الارتفاع الأقصى للمحرر بالبكسل. اضبط على 0 (الافتراضي) لعدم وضع حد أقصى للارتفاع.
minHeight	number	لا	الارتفاع الأدنى للمحرر بالبكسل. الافتراضي هو 300.
onChange	(data: EditorData) => void	لا	دالة رد نداء تُطلق عند كل تغيير في المستند. تستقبل لقطة كاملة من EditorData.
onReady	() => void	لا	دالة رد نداء تُطلق بمجرد اكتمال تهيئة المحرر واستعداده لاستقبال استدعاءات API.
placeholder	string	لا	نص العنصر النائب المعروض عندما يكون المحرر فارغًا. الافتراضي هو "Start writing...".
initialData	EditorData	لا	EditorData محملة مسبقًا لتحميلها عند تركيب المحرر.
initialView	'edit' \| 'preview' \| 'json'	لا	وضع العرض الأولي. أحد القيم: edit وpreview وjson. الافتراضي هو "edit".
allowJsonViewEditing	boolean	لا	عند الضبط على true، يصبح عرض JSON قابلًا للتحرير وتنتشر التغييرات مجددًا إلى المستند. الافتراضي false.
margins	BlockMargins	لا	الهامش العلوي والسفلي العام (بالبكسل) المطبق على كل كتلة. تأخذ الإعدادات على مستوى الكتلة الأولوية.
styles	EditorStyles	لا	كائن EditorStyles لتخصيص CSS الدقيق لواجهة المحرر (أشرطة الأدوات والحوارات والعناصر التفاعلية).
classNames	EditorClassNames	لا	كائن EditorClassNames لإرفاق أسماء فئات CSS بعناصر واجهة المحرر.
imageUploader	UploadFunction	لا	دالة غير متزامنة تُحمّل ملف صورة وتُعيد سلسلة URL عامة.
audioUploader	UploadFunction	لا	دالة غير متزامنة تُحمّل ملف صوت وتُعيد سلسلة URL عامة.
videoUploader	UploadFunction	لا	دالة غير متزامنة تُحمّل ملف فيديو وتُعيد سلسلة URL عامة.
theme	'auto' \| 'light' \| 'dark'	لا	نظام الألوان. أحد القيم: auto (يتبع النظام)، light، dark. الافتراضي هو auto.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	لا	تجاوزات الرمز المميز لكل وضع. قدّم خرائط رموز light و/أو dark لتخصيص الألوان دون استبدال الثيم الكامل.

TypeScript

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

const editor = Editor.create({
  containerId: 'editor',
  minHeight: 400,
  placeholder: 'Start writing...',
  theme: 'auto',
  onChange: data => console.log(data),
  onReady: () => console.log('Editor ready'),
  imageUploader: async file => {
    const form = new FormData();
    form.append('file', file);
    const res = await fetch('/api/upload', { body: form, method: 'POST' });
    const { url } = await res.json();
    return url;
  },
});

RendererConfig

مرر RendererConfig كوسيط وحيد إلى Renderer.render(). كلٌّ من containerId وdata مطلوبان.

الخيار	النوع	مطلوب	الوصف
containerId	string	نعم	معرف عنصر DOM حيث سيتم حقن الناتج المُصيَّر.
data	EditorData	نعم	مستند EditorData المراد تصييره. مطلوب.
margins	BlockMargins	لا	الهامش العلوي والسفلي العام (بالبكسل) المطبق على كل كتلة مُصيَّرة.
styles	BlockStyles	لا	خريطة BlockStyles لتخصيص CSS لكل نوع كتلة في الناتج المُصيَّر.
classNames	BlockClassNames	لا	خريطة BlockClassNames لأسماء فئات CSS لكل نوع كتلة في الناتج المُصيَّر.
editorClassNames	EditorClassNames	لا	EditorClassNames تُمرَّر إلى الكتل التي تُصيِّر مكونات تفاعلية (مثل أسماء فئات tooltip للفقرات).
configs	Partial<BlockTypeOutputConfigs>	لا	خريطة جزئية من كائنات OutputConfig لكل كتلة. يمكن لكل إدخال تعيين هوامش على مستوى الكتلة وأسماء فئات tooltip.
theme	'auto' \| 'light' \| 'dark'	لا	نظام الألوان. أحد القيم: auto وlight وdark.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	لا	تجاوزات الرمز المميز لكل وضع للناتج المُصيَّر.

TypeScript

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

const data: EditorData = await fetch('/api/content/123').then(r => r.json());

Renderer.render({
  containerId: 'output',
  data,
  theme: 'auto',
  margins: { bottom: 16, top: 16 },
});

التنسيق على مستوى الكتلة

يقبل كلٌّ من EditorConfig وRendererConfig خصائص styles وclassNames وconfigs مفتاحة حسب نوع الكتلة. استخدمها للتجاوزات المستهدفة؛ راجع صفحة Themes للحصول على مرجع الرمز المميز الكامل لكل كتلة.

TypeScript

import { Editor, Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames, EditorStyles } from '@clepit/core';

const editorStyles: EditorStyles = {
  blockToolbar: { container: { borderRadius: '8px' } },
};

const blockStyles: BlockStyles = {
  header: { h1: { fontFamily: 'Georgia, serif' } },
  paragraph: { lineHeight: '1.75' },
  table: { cell: { padding: '8px 12px' } },
};

const blockClassNames: BlockClassNames = {
  paragraph: 'prose-paragraph',
  header: { h1: 'prose-h1', h2: 'prose-h2' },
  alert: { info: 'alert-info', error: 'alert-error' },
};

Editor.create({
  containerId: 'editor',
  styles: editorStyles,
});

Renderer.render({
  containerId: 'output',
  data,
  styles: blockStyles,
  classNames: blockClassNames,
});

البدء

المرجع

واجهة الخادم

الأدلة

الإعداد

EditorConfig

RendererConfig

التنسيق على مستوى الكتلة