Tổng quan về Craft.js (Phần 2)

Trong phần 1 chúng ta đã tìm hiểu tổng quan về Craft.js, các tính năng chính của Craft.js, kiến trúc cũng như quy trình làm việc. Trong phần này chúng ta sẽ đưa ra một vài ví dụ cụ thể trong việc sử dụng Craft.js.

5. Detailed Example với Custom Components

Chúng ta hãy tiến xa hơn một bước trong quy trình tạo các thành phần tùy chỉnh. Trong ví dụ này, chúng ta sẽ xây dựng một thành phần thẻ có thể chỉnh sửa với văn bản và hình ảnh mà người dùng có thể sửa đổi thông qua các điều khiển prop.

Tạo Card Component

import React from "react";
import { useNode } from "@craftjs/core";

const Card = ({ imageSrc, title, description }) => {
  const { connectors: { connect, drag }, actions: { setProp } } = useNode();

  return (
    <div
      ref={(ref) => {
        connect(drag(ref))
      }}
      style={{ border: '1px solid #ccc', padding: '20px' }}
    >
      <img src={imageSrc} alt={title} style={{ width: '100%', height: 'auto' }} />
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
};

Add Card to the Editor

Bây giờ chúng ta thêm Card Component vào trình soạn thảo bằng cách gói nó bằng thành phần Element từ Craft.js:

import React from "react";
import { Editor, Frame, Element } from "@craftjs/core";
import Card from "./components/Card";

const App = () => {
  return (
    <Editor>
      <Frame>
        <Element canvas>
          <Card imageSrc="https://via.placeholder.com/150" title="Sample Card" description="This is a description." />
        </Element>
      </Frame>
    </Editor>
  );
};

export default App;

Ví dụ này tạo ra một thẻ có thể chỉnh sửa với khả năng cập nhật hình ảnh, tiêu đề và mô tả một cách linh hoạt.

6. Tùy chỉnh và khả năng mở rộng nâng cao

Craft.js cho phép các nhà phát triển vượt ra ngoài chức năng cơ bản là kéo và thả các thành phần. Sau đây là một số kỹ thuật tùy chỉnh nâng cao:

Building Custom Prop Editors

Để tạo trình soạn thảo WYSIWYG tương tác hoàn toàn, bạn thường cần các điều khiển tùy chỉnh cho phép người dùng điều chỉnh các thuộc tính thành phần một cách linh hoạt.

import { useNode } from "@craftjs/core";

const TextEditor = () => {
  const { actions, selectedNode } = useEditor((state) => ({
    selectedNode: state.nodes[state.events.selected],
  }));

  return (
    <div>
      <label>Font Size:</label>
      <input
        type="number"
        value={selectedNode?.data.props.fontSize || 16}
        onChange={(e) => actions.setProp(selectedNode.id, (props) => props.fontSize = e.target.value)}
      />
    </div>
  );
};

7. Craft.js Workflows

Dưới đây là sơ đồ minh họa cách Craft.js xử lý các sự kiện và hiển thị các thành phần:

Event Workflow

Tạo thành phần (Creating Components):

• Người dùng có thể thêm các thành phần từ hộp công cụ vào canvas.
• Trình chỉnh sửa (Editor) quản lý trạng thái, tạo một nút mới cho mỗi thành phần.

Thao tác với thành phần (Manipulating Components):

• Người dùng có thể kéo và thả các thành phần, điều này sẽ cập nhật cây nút trong Trạng thái của Trình chỉnh sửa (Editor State).
• Thuộc tính của các thành phần có thể được chỉnh sửa theo thời gian thực nhờ vào hệ thống quản lý trạng thái.

Kết xuất (Rendering):

• Frame lấy cấu trúc cây nút hiện tại và hiển thị nó dưới dạng biểu diễn trực quan trong Canvas.
• Các nút sẽ cập nhật việc hiển thị của chúng dựa trên những thay đổi được thực hiện qua trình chỉnh sửa.

Tương tác (Interacting):

• Connectors cho phép tương tác trực tiếp với các thành phần (ví dụ: thay đổi kích thước, di chuyển).
• Trình chỉnh sửa theo dõi các tương tác này, giúp dễ dàng triển khai các tính năng như hoàn tác/làm lại

8. Các phương pháp tốt nhất khi làm việc với Craft.js

• Chi tiết hóa thành phần (Component Granularity): Chia nhỏ các thành phần thành các phần nhỏ và có thể tái sử dụng. Điều này cải thiện hiệu suất và giúp trạng thái dễ quản lý hơn.
• Xử lý thuộc tính hiệu quả (Efficient Prop Handling): Đảm bảo rằng các cập nhật thuộc tính được thực hiện hiệu quả để tránh việc tái hiển thị không cần thiết.
• Tránh lồng ghép quá sâu (Avoid Deep Nesting): Mặc dù Craft.js xử lý tốt các thành phần lồng nhau, hãy tránh các cấu trúc phân cấp quá phức tạp để đảm bảo hiệu suất tối ưu.

9. Kết luận

Craft.js là một framework mạnh mẽ để xây dựng các trình chỉnh sửa UI có khả năng tùy chỉnh, mang lại cho nhà phát triển sự linh hoạt và kiểm soát chưa từng có đối với cách cấu trúc UI.

Dù bạn đang tạo một trình tạo trang, trình chỉnh sửa email, hay công cụ thiết kế tùy chỉnh, Craft.js cung cấp tất cả các khối xây dựng cần thiết để quản lý hiệu quả các bố cục, trạng thái, và tương tác phức tạp.

Bằng cách thành thạo hệ thống nút, quy trình xử lý sự kiện, và quản lý trạng thái, các nhà phát triển có thể tận dụng Craft.js để xây dựng các trình chỉnh sửa mở rộng, hiệu suất cao phù hợp với nhu cầu cụ thể.