المفاهيم الأساسية

نموذج الكتلة

جوهر EditorData هو مصفوفة blocks: وهي كائنات Block التي تحتفظ بالترتيب. تتضمن كل Block نوعها (type) وبياناتها الخاصة بالنوع (data) وبيانات tunes اختيارية.

{
  "time": 1745000000000,
  "version": "1.0.0",
  "blocks": [
    {
      "id": "abc123",
      "type": "header",
      "data": { "html": "Hello world", "level": "h1" }
    },
    {
      "id": "def456",
      "type": "paragraph",
      "data": { "html": "This is a <b>rich</b> paragraph." }
    }
  ]
}

أدوات الكتل مقابل الأدوات المضمّنة

تُنشئ أدوات الكتل مواضع مستقلة مباشرة داخل EditorData. أما الأدوات المضمّنة فتُزيّن النص داخل حمولة html التي تحتوي عليها الكتلة. الطبقتان منفصلتان تمامًا. لا يمكن استبدال إحداهما بالأخرى.

مخرجات أولى من JSON

لا يحتفظ المحرر أبدًا بـ HTML. عندما تستدعي editor.data.extract()، تحصل على JSON نقي لـ EditorData: وهو كامل بما يشمل عناوين URL للوسائط. يمكن حفظ هذا JSON في قاعدة البيانات أو تعديله أو تحويله إلى صيغ أخرى.

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

const editor = Editor.create({ containerId: 'editor' });

const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [ ... ]
// }

Editor مقابل Renderer

ضبطيات الكتلة

التعديلات (tunes) هي لوحة بيانات وصفية غير منضوية لأي نوع من أنواع الكتل. المفتاح هو اسم التعديل الذي يُعيّنه النظام أو الإضافة، والقيمة مُعيَّنة إلى BlockTuneData: أي مجموعة من string أو number أو boolean أو null. يمكن للتعديلات إضافة دلالات دون كسر بنية البيانات الأساسية.

{
  "id": "abc123",
  "type": "paragraph",
  "data": { "html": "Some text." },
  "tunes": {
    "textAlign": { "alignment": "center" },
    "visibility": { "hidden": false }
  }
}