শুরু করা

প্যাকেজটি ইনস্টল করুন, এটিকে id দিয়ে যেকোনো কন্টেইনার এলিমেন্টে মাউন্ট করুন এবং যখন প্রয়োজন তখন পরিষ্কার JSON বের করুন। Clepit-এর কোনো পিয়ার ফ্রেমওয়ার্ক নির্ভরতা নেই, তাই এটি র‍্যাপার ছাড়াই React, Vue, Svelte বা ভ্যানিলা JavaScript-এ যুক্ত হয়।

ইনস্টল

আপনার প্রকল্পে @clepit/core যোগ করুন। এডিটরটি একটি একক ESM বান্ডল এবং TypeScript সংজ্ঞাসহ আসে।

bun add @clepit/core

একটি এডিটর তৈরি করুন

একটি div যোগ করুন, তারপর আপনার প্রয়োজনীয় EditorConfig অপশন দিয়ে Editor.create কল করুন। containerId বাধ্যতামূলক; বাকি সব ঐচ্ছিক।

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

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

সম্পাদনা ও সংরক্ষণ

ব্যবহারকারীরা লেখার পর EditorData JSON আকারে সিরিয়ালাইজ করতে editor.data.extract() কল করুন। পেলোড একটি { blocks } অ্যারে বহন করে যেখানে প্রতিটি ব্লক থাকে।

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

শুধু-পড়ার জন্য রেন্ডার করুন

যেকোনো জায়গায় সংরক্ষিত EditorData থেকে HTML আউটপুট করতে Renderer.render ব্যবহার করুন। Renderer কোনো অবস্থা বজায় রাখে না। শুধু containerId সহ একটি div দরকার।

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 বা vanilla script সবই সরাসরি কাজ করে।