Giới thiệu

Trong bài viết trước, tôi đã chia sẻ những khó khăn khi xây dựng các trình soạn thảo văn bản phong phú. Mỗi khi tôi làm việc với Lexical, tôi rất thích ý tưởng cốt lõi nhưng trải nghiệm phát triển (DX) lại không tốt lắm.

Tôi muốn một thứ mà tôi có thể cắm vào các tiện ích mở rộng, có đảm bảo kiểu toàn diện, và không phải đấu tranh với mã nguồn mỗi hai dòng.

Và cuối cùng, tôi đã làm được điều đó 🎉. Tôi đã xây dựng LexKit — một framework nhỏ của riêng tôi trên nền tảng Lexical.

LexKit thân thiện với DX, mô-đun, và thực sự là hệ thống trình soạn thảo mà tôi luôn mong muốn.

Xem trước Trình Soạn Thảo Shadcn

👉 Trình Soạn Thảo dựa trên Shadcn (xem demo)

LexKit RTE được xây dựng trên Lexical

LexKit phụ thuộc vào Lexical. Để thêm trình soạn thảo này vào dự án React của bạn, hãy làm theo các bước sau:

Bước 1: Cài đặt LexKit

npm install @lexkit/editor

Bước 2: Cài đặt các phụ thuộc của Lexical

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

Bước 3: Tham khảo tài liệu để cắm vào Mẫu Shadcn

Shadcn Based Template Docs | Mã nguồn trên Github

Thế là xong. Không có phép thuật nào. Chỉ cần cài đặt, sao chép, dán, và bạn đã có một trình soạn thảo RTE với hương vị Shadcn.

Ví dụ Trình Soạn Thảo Nhanh để xem cách hoạt động

Dưới đây là một thiết lập trình soạn thảo tối thiểu sử dụng LexKit. Chỉ khoảng 10 dòng mã:

import { createEditorSystem, richTextExtension, boldExtension, italicExtension } from "@lexkit/editor"

const extensions = [
  richTextExtension,
  boldExtension,
  italicExtension,
] as const

const { Provider } = createEditorSystem<typeof extensions>()

export default function MyEditor() {
  return (
    <Provider extensions={extensions}>
      <div className="p-4 border rounded">
        {/* RichText extension renders automatically */}
      </div>
    </Provider>
  )
}

Chỉ cần như vậy. Bạn có thể bắt đầu gõ ngay lập tức.

Tại sao tôi xây dựng LexKit?

Bởi vì DX rất quan trọng với tôi. Tôi đã mệt mỏi với việc đoán kiểu, đấu tranh với các plugin, và vá các ví dụ ngẫu nhiên từ GitHub gists.

Với LexKit:

• bạn nhận được các lệnh và truy vấn trạng thái kiểu sẵn có
• các tiện ích mở rộng là có thể kết hợp và không có đầu (giống như các khối lego 🧱)
• nó ưu tiên React, vì vậy không có các wrapper kỳ lạ
• và vâng… nó thực sự hoạt động trong môi trường sản xuất.

Những gì tiếp theo?

Tôi đang làm việc để thêm nhiều tiện ích mở rộng hơn, nhiều mẫu và demo hơn cũng như nhiều tài liệu hơn.

Sự ủng hộ của bạn sẽ giúp dự án này tiếp tục phát triển. Nó có thể là một bình luận, một sao trên Github, gợi ý tính năng và báo cáo lỗi, hoặc thậm chí là một khoản quyên góp nhỏ hoặc tài trợ 🙈

👉 Tài liệu Lexkit
👉 GitHub

Thế là xong. Hy vọng điều này sẽ giúp bạn nếu bạn đang lạc lối trong địa ngục RTE như tôi đã từng. Và nếu bạn thử nghiệm, hãy cho tôi biết điều gì bị lỗi 😅

Thực hành tốt nhất

• Luôn kiểm tra tài liệu chính thức của LexKit và Lexical để cập nhật các tính năng mới.
• Sử dụng các tiện ích mở rộng một cách hợp lý để giữ cho mã nguồn của bạn gọn gàng và dễ bảo trì.

Cạm bẫy phổ biến

• Không xác định đúng kiểu dữ liệu có thể dẫn đến lỗi không mong muốn trong quá trình phát triển.
• Không kiểm tra kỹ lưỡng các tiện ích mở rộng có thể gây ra xung đột khi tích hợp vào dự án.

Mẹo hiệu suất

• Tối ưu hóa các tiện ích mở rộng để giảm thiểu tải trọng cho trình soạn thảo.
• Sử dụng lazy loading cho các tiện ích mở rộng không cần thiết ngay lập tức.

Giải quyết sự cố

• Nếu trình soạn thảo không hoạt động như mong đợi, hãy kiểm tra các phiên bản của các gói đã cài đặt.
• Đảm bảo rằng bạn đã cài đặt tất cả các phụ thuộc cần thiết trước khi khởi động ứng dụng.

Câu hỏi thường gặp (FAQ)

Q: LexKit có tương thích với các phiên bản cũ của React không?
A: LexKit được thiết kế để hoạt động tốt với React phiên bản mới nhất. Tuy nhiên, bạn nên kiểm tra tài liệu để biết thêm chi tiết.

Q: Tôi có thể thêm các tiện ích mở rộng tùy chỉnh vào LexKit không?
A: Có, bạn có thể tạo và tích hợp các tiện ích mở rộng tùy chỉnh vào LexKit một cách dễ dàng.