Làm Nổi Bật Hình Ảnh Entity trong DraftJS: Hướng Dẫn Chi Tiết

DraftJS là một framework JavaScript phổ biến được sử dụng để xây dựng các trình soạn thảo văn bản phong phú, cho phép người dùng tạo và chỉnh sửa nội dung với nhiều định dạng khác nhau. Một trong những tính năng hữu ích của DraftJS là khả năng nhúng các thực thể (entity), chẳng hạn như hình ảnh, vào nội dung văn bản. Tuy nhiên, việc làm nổi bật các thực thể hình ảnh này một cách trực quan để người dùng dễ dàng nhận biết và tương tác có thể đòi hỏi một số tùy chỉnh. Bài viết này sẽ hướng dẫn bạn cách làm nổi bật hình ảnh entity trong DraftJS, giúp nâng cao trải nghiệm người dùng cho trình soạn thảo của bạn.

Hiểu về DraftJS Entity

Trong DraftJS, entity là các đối tượng đặc biệt được nhúng trực tiếp vào nội dung văn bản. Chúng đại diện cho các phần tử không phải văn bản, chẳng hạn như hình ảnh, liên kết, hastag và mentions. Mỗi entity có một kiểu duy nhất xác định cách nó được hiển thị và xử lý trong trình soạn thảo. Ví dụ, entity kiểu “IMAGE” sẽ hiển thị dưới dạng một hình ảnh, trong khi entity kiểu “LINK” sẽ hiển thị dưới dạng một liên kết có thể nhấp.

Tạo Custom Entity cho Hình Ảnh

Để làm nổi bật hình ảnh entity trong DraftJS, bạn cần tạo một custom entity riêng cho mục đích này. Custom entity này sẽ kế thừa từ entity “IMAGE” mặc định của DraftJS và được tùy chỉnh để áp dụng các kiểu CSS riêng.

import { Entity } from 'draft-js';

const createImageEntity = ({ src, alt }) => {
  return Entity.create(
    'IMAGE',
    'IMMUTABLE',
    { src, alt },
  );
};

export default createImageEntity;

Sử dụng Decorator để Áp Dụng Kiểu CSS

DraftJS cung cấp một cơ chế gọi là “decorator” cho phép bạn áp dụng các kiểu CSS cho các phần tử cụ thể trong nội dung văn bản. Bạn có thể sử dụng decorator để tìm kiếm các entity hình ảnh trong nội dung và áp dụng các kiểu CSS mong muốn để làm nổi bật chúng.

import React from 'react';

const imageDecorator = {
  strategy: (contentBlock, callback) => {
    contentBlock.findEntityRanges(
      (character) => {
        const entityKey = character.getEntity();
        return (
          entityKey !== null &&
          Entity.get(entityKey).getType() === 'IMAGE'
        );
      },
      callback
    );
  },
  component: (props) => {
    const { entityKey } = props;
    const data = Entity.get(entityKey).getData();
    return (
      <img
        src={data.src}
        alt={data.alt}
        style={{ border: '2px solid blue' }}
      />
    );
  },
};

export default imageDecorator;

Kết Hợp Custom Entity và Decorator

Để sử dụng custom entity và decorator cùng nhau, bạn cần truyền decorator vào EditorState của DraftJS khi khởi tạo trình soạn thảo. Bằng cách này, decorator sẽ được áp dụng cho tất cả các entity hình ảnh trong nội dung.

import React, { useState } from 'react';
import { Editor, EditorState } from 'draft-js';
import createImageEntity from './createImageEntity';
import imageDecorator from './imageDecorator';

const MyEditor = () => {
  const [editorState, setEditorState] = useState(
    EditorState.createEmpty(imageDecorator)
  );

  const handleKeyCommand = (command, editorState) => {
    // Xử lý lệnh chèn hình ảnh
    if (command === 'insert-image') {
      const entityKey = createImageEntity({
        src: 'đường dẫn hình ảnh',
        alt: 'mô tả hình ảnh',
      });
      // Cập nhật EditorState với entity hình ảnh mới
      setEditorState(
        // ...
      );
      return 'handled';
    }
    return 'not-handled';
  };

  return (
    <Editor
      editorState={editorState}
      onChange={setEditorState}
      handleKeyCommand={handleKeyCommand}
    />
  );
};

export default MyEditor;

Bằng cách kết hợp custom entity và decorator, bạn có thể dễ dàng làm nổi bật các hình ảnh entity trong DraftJS, giúp người dùng dễ dàng nhận biết và tương tác với chúng.