@clepit/react

Gói @clepit/react cung cấp các thành phần React cho trình soạn thảo Clepit: ClepitContent, phát ra HTML hoàn chỉnh trên máy chủ, và ClepitEditor, thành phần chỉ chạy phía máy khách sở hữu vòng đời Editor.create.

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

Cài đặt

bun add @clepit/core @clepit/react

ClepitContent

ClepitContent vẽ tài liệu thành HTML hoàn chỉnh qua renderBlocks, nên hoạt động trong Server Components, trong lúc SSR và trong trình duyệt. Mã đánh dấu nằm ngay trong phản hồi đầu tiên: trình thu thập đọc được, và không có gì vẽ lại khi gắn kết. Bảng kiểu lõi đi kèm dưới dạng thẻ được React khử trùng lặp.

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

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

Các khối tương tác trở nên sống động sau khi gắn kết qua activateBlocks từ @clepit/core: tab biến thể mã, đồng bộ ngôn ngữ và nút sao chép, tab phản hồi openapi, và tải CSV của bảng đều hoạt động trên mã đánh dấu do máy chủ vẽ; chỉ dữ liệu của các khối tương tác đi sang trình duyệt.

Các props tùy chọn:

ClepitEditor

ClepitEditor chỉ chạy phía máy khách và nằm trên đường dẫn con riêng, nên việc nhập thành phần hiển thị không bao giờ kéo mã chỉnh sửa vào gói máy chủ. Thành phần này sở hữu vòng đời Editor.create: thời điểm effect và việc gỡ bỏ an toàn với StrictMode.

'use client';

import { ClepitEditor } from '@clepit/react/editor';

export const Compose = ({ initialData, onSave }) => (
  <ClepitEditor
    initialData={initialData}
    onChange={data => onSave(data)}
    placeholder='Start writing'
  />
);

Props là EditorConfig từ @clepit/core trừ containerId (thành phần tự vẽ phần giữ của nó), cộng với id, className, testId và onApi, nhận EditorAPI do Editor.create trả về. Trình soạn thảo không được kiểm soát: các trường giá trị chỉ đọc một lần khi gắn kết, callback luôn thấy props của lần render mới nhất, và việc gỡ gắn kết sẽ hủy thực thể.