Xây Dựng Trình Soạn Thảo Văn Bản Đầy Đủ Kiểu Dữ Liệu Trong Next.js (với Lexical & Lexkit)

Giới thiệu

Tôi luôn cảm thấy khó khăn khi xây dựng các trình soạn thảo. Đôi khi chúng quá đơn giản, hoặc ngược lại, quá phức tạp. Từ đó, tôi quyết định tự phát triển một trình soạn thảo riêng cho mình, và LexKit đã ra đời! ⚡️

LexKit là một hệ thống trình soạn thảo thân thiện với nhà phát triển, an toàn kiểu dữ liệu, được xây dựng dựa trên Lexical. Đây là lựa chọn hoàn hảo cho các ứng dụng Next.js nếu bạn muốn một thứ gì đó nhẹ nhàng nhưng không nhàm chán.

Bắt đầu (Ví dụ cơ bản)

Dưới đây là cách đơn giản nhất để tạo một trình soạn thảo với LexKit:

"use client";

import {
  createEditorSystem,
  boldExtension,
  italicExtension,
  listExtension,
  linkExtension,
  historyExtension,
  RichText,
} from "@lexkit/editor";
import "./basic-editor.css";

// 1. Định nghĩa các extensions của bạn (cho các tính năng như in đậm, danh sách, v.v.)
const extensions = [
  boldExtension,
  italicExtension,
  listExtension,
  linkExtension,
  historyExtension,
] as const;

// 2. Tạo hệ thống trình soạn thảo kiểu dữ liệu
const { Provider, useEditor } = createEditorSystem<typeof extensions>();

Đó là "động cơ" của chúng ta. Bây giờ hãy thêm một toolbar để bạn có thể thực sự nhấn vào các nút:

function Toolbar() {
  const { commands, activeStates } = useEditor();

  return (
    <div className="basic-toolbar">
      <button onClick={() => commands.toggleBold()} className={activeStates.bold ? "active" : ""}>
        In đậm
      </button>
      <button onClick={() => commands.toggleItalic()} className={activeStates.italic ? "active" : ""}>
        In nghiêng
      </button>
      <button onClick={() => commands.toggleUnorderedList()}>• Danh sách</button>
      <button onClick={() => commands.toggleOrderedList()}>1. Danh sách</button>
      <button onClick={() => commands.undo()} disabled={!activeStates.canUndo}>Hoàn tác</button>
      <button onClick={() => commands.redo()} disabled={!activeStates.canRedo}>Làm lại</button>
    </div>
  );
}

Và đây là trình soạn thảo chính:

function Editor() {
  return (
    <div className="basic-editor">
      <Toolbar />
      <RichText
        placeholder="Bắt đầu viết nội dung của bạn ở đây..."
        classNames={{
          container: "basic-editor-container",
          contentEditable: "basic-content",
          placeholder: "basic-placeholder",
        }}
      />
    </div>
  );
}

export function BasicEditorExample() {
  return (
    <Provider extensions={extensions}>
      <Editor />
    </Provider>
  );
}

Và chỉ như vậy, bạn đã có một trình soạn thảo hoạt động trong Next.js với các tính năng như in đậm, in nghiêng, danh sách, hoàn tác và làm lại. Không cần cấu hình phức tạp, không bị khóa vào nhà cung cấp.

Tính năng nổi bật

• Extensions an toàn kiểu dữ liệu → tự động hoàn thành biết các lệnh nào tồn tại.
• Sẵn sàng với Next.js → hoạt động ngay lập tức với use client.
• Chủ đề? Có → DefaultTemplate tương thích tốt với next-themes.
• Sẵn sàng cho sản xuất → hình ảnh, bảng, markdown, nhập/xuất html, lịch sử, bạn muốn gì cũng có.

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

• Sử dụng các extensions xác định rõ ràng để đảm bảo tính nhất quán và dễ bảo trì.
• Tối ưu hóa trải nghiệm người dùng với các nút dễ sử dụng và giao diện thân thiện.
• Thực hiện kiểm tra lỗi để đảm bảo rằng trình soạn thảo hoạt động mượt mà trong mọi tình huống.

Những cạm bẫy thường gặp

• Bỏ qua tính năng lịch sử có thể làm mất mát nội dung của người dùng.
• Không kiểm tra tính tương thích với các trình duyệt khác nhau có thể dẫn đến trải nghiệm người dùng kém.
• Không cung cấp tài liệu đầy đủ cho người sử dụng có thể làm giảm số lượng người sử dụng.

Mẹo hiệu suất

• Giảm thiểu kích thước gói bằng cách chỉ nhập các extensions cần thiết.
• Sử dụng lazy loading cho các tính năng không cần thiết ngay lập tức.
• Tối ưu hóa CSS để giảm thời gian tải trang.

Khắc phục sự cố

• Nếu trình soạn thảo không hiển thị đúng, hãy kiểm tra console để tìm lỗi.
• Đảm bảo rằng tất cả các extension đều được nhập và sử dụng chính xác.

Kết luận

Trình soạn thảo văn bản không còn khó khăn khi bạn có thể thực sự hiểu mã nguồn. LexKit là nỗ lực của tôi để làm cho việc xây dựng trình soạn thảo trở nên thú vị và thân thiện với nhà phát triển.

Nếu bạn đang làm việc trong thế giới Next.js, hãy thử nghiệm với LexKit! Tài liệu có sẵn tại đây.

PS: Nếu bài viết này hữu ích, hãy bấm ❤️ hoặc để lại một bình luận. Điều đó giúp tôi cảm thấy không phải đang mã hóa một cách vô nghĩa 😂

Lexkit là mã nguồn mở, miễn phí và được cấp phép theo MIT. Tôi rất thích phát triển nó và đưa nó tiến xa hơn. Nhưng như mọi dự án mã nguồn mở khác, điều này chỉ có thể thực hiện được với sự hỗ trợ của bạn, dù là một ngôi sao trên GitHub⭐, một bình luận hoặc thậm chí là một khoản ủng hộ nhỏ.

Để hỗ trợ dự án này, hãy kiểm tra Github Repo.

Cảm ơn bạn đã dành thời gian, hãy thử nghiệm và báo cáo bất kỳ sự cố hoặc lỗi nào.