@clepit/react

@clepit/react প্যাকেজ Clepit এডিটরের জন্য React কম্পোনেন্ট দেয়: ClepitContent, যা সার্ভারে প্রস্তুত HTML বের করে, এবং ClepitEditor, যা শুধু ক্লায়েন্টে চলে এবং Editor.create লাইফসাইকেলের মালিক।

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

ইনস্টল

bun add @clepit/core @clepit/react

ClepitContent

ClepitContent একটি ডকুমেন্টকে renderBlocks দিয়ে প্রস্তুত HTML এ আঁকে, তাই এটি Server Components এ, SSR এর সময় এবং ব্রাউজারে কাজ করে। মার্কআপ প্রথম রেসপন্সেই থাকে: ক্রলাররা তা পড়ে, এবং মাউন্টে কিছুই আবার আঁকা হয় না। কোর স্টাইলশিট React দ্বারা ডিডুপ্লিকেট হওয়া ট্যাগ হিসেবে সাথে যায়।

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

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

ইন্টারঅ্যাকটিভ ব্লকগুলো মাউন্টের পরে @clepit/core এর activateBlocks দিয়ে জীবন্ত হয়: কোড ভ্যারিয়েন্ট ট্যাব, ভাষা সিঙ্ক ও কপি বোতাম, 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'
  />
);

প্রপসগুলো @clepit/core এর EditorConfig, শুধু containerId বাদে (কম্পোনেন্ট নিজের হোল্ডার আঁকে), সাথে id, className, testId এবং onApi, যা Editor.create এর ফেরত দেওয়া EditorAPI পায়। এডিটরটি আনকন্ট্রোলড: ভ্যালু ফিল্ড মাউন্টে একবার পড়া হয়, callbacks সবসময় সর্বশেষ রেন্ডারের প্রপস দেখে, এবং আনমাউন্ট ইনস্ট্যান্সটি ধ্বংস করে।