LexKit: Trình soạn thảo văn bản phong phú dễ sử dụng

LexKit: Trình Soạn Thảo Văn Bản Phong Phú Dễ Sử Dụng

Chào mừng bạn đến với LexKit, giải pháp mã nguồn mở của tôi cho các trình soạn thảo văn bản phong phú. Được ra mắt vào ngày 18 tháng 9 năm 2025, LexKit là một lớp bao quanh Meta's Lexical, được thiết kế nhẹ và ưu tiên TypeScript. Nó miễn phí (giấy phép MIT), không có giao diện và giúp việc xây dựng các trình soạn thảo cho các ứng dụng React - như blog hoặc CMS - trở nên thú vị. Hãy thử bản demo với một mẫu ShadCN ấn tượng!

Tại Sao Tôi Tạo Ra LexKit

Các trình soạn thảo văn bản phong phú đã khiến tôi đau đầu. Lexical? Nhanh và nhẹ (khoảng 20kb), nhưng việc thiết lập nó thật là một cơn ác mộng - quá nhiều mã mẫu. TipTap? Mạnh mẽ nhưng lại cồng kềnh và khó sử dụng. Tôi muốn một giải pháp đơn giản, an toàn về kiểu dữ liệu và linh hoạt. Do đó, tôi đã xây dựng LexKit để làm cho Lexical trở nên dễ dàng hơn.

Những Đặc Điểm Nổi Bật Của LexKit

An toàn kiểu dữ liệu: Không có lỗi thời gian chạy, cảm ơn TypeScript. Tự động hoàn thành thật tuyệt vời.

typescript Copy

import { createEditorSystem, boldExtension } from '@lexkit/editor';

const extensions = [boldExtension] as const;
const { Provider, useEditor } = createEditorSystem(extensions);

function Editor() {
  const { commands } = useEditor();
  return (
    <Provider extensions={extensions}>
      <button onClick={() => commands.toggleBold()}>Đậm</button>
      <div contentEditable className="editor-content" />
    </Provider>
  );
}

Headless: Sử dụng ShadCN, Tailwind, hoặc bất kỳ thứ gì bạn muốn. Bạn tùy chỉnh giao diện, LexKit xử lý logic.
Hơn 25 Extensions: Đậm, hình ảnh, bảng, markdown - dễ dàng cắm vào:

typescript Copy

imageExtension.configure({ uploadHandler: async (file) => { /* xử lý tải lên */ } });

Nhanh và Nhẹ: Được xây dựng trên Lexical, vì vậy nó rất nhạy.
Mẫu ShadCN: Giao diện sẵn sàng trong bản demo.

Hướng Dẫn Bắt Đầu Nhanh

Cài đặt:

bash Copy

npm install @lexkit/editor lexical @lexical/react @lexical/html @lexical/markdown @lexical/list @lexical/rich-text @lexical/selection @lexical/utils

(Lỗi chính tả trong "instal" là cố ý để tạo cảm giác gần gũi.)

Trình Soạn Thảo Cơ Bản:

typescript Copy

import { createEditorSystem, richTextExtension, boldExtension } from '@lexkit/editor';

const extensions = [
  richTextExtension({ placeholder: 'Gõ vào đây...', classNames: { contentEditable: 'editor' } }),
  boldExtension
] as const;

const { Provider, useEditor } = createEditorSystem(extensions);

function Editor() {
  const { commands } = useEditor();
  return (
    <Provider extensions={extensions}>
      <button onClick={() => commands.toggleBold()}>Làm cho nó đậm!</button>
      {/* Trình soạn thảo sẽ hiển thị tại đây */}
    </Provider>
  );
}

Kiểm tra tài liệu để biết thêm thông tin, như thay đổi giao diện hoặc các phần mở rộng tùy chỉnh.

Những Gì Sẽ Đến Tiếp Theo?

Y.js cho việc cộng tác thời gian thực
Các tính năng AI (tự động hoàn thành, ngữ pháp)
Nhiều mẫu hơn (ShadCN, Radix)

Hãy Nói Chuyện!

LexKit là sản phẩm tâm huyết của tôi nhằm làm cho các trình soạn thảo bớt đau đầu hơn. Hãy thử bản demo, đánh giá trên GitHub, hoặc liên hệ với tôi qua Discord. Câu chuyện tồi tệ nhất của bạn về trình soạn thảo là gì? Lexical hay TipTap đã khiến bạn thất vọng? Hãy bình luận bên dưới nhé!

Xây dựng với ❤️ bởi một lập trình viên độc lập. Hãy cho tôi một sao nếu bạn thấy thích nó!

LexKit: Trình soạn thảo văn bản phong phú dễ sử dụng