Giao diện

Cài đặt và sử dụng — Text Copy ​

Tổng quan ​

Plugin thêm nút "Sao chép" (copy) bên cạnh các field dạng Input, cho phép người dùng sao chép nội dung vào clipboard chỉ bằng một click. Nút copy hiển thị khi hover và sử dụng component Typography.Text của Antd với prop copyable.

Bước 1: Kích hoạt plugin ​

Vào Settings → Plugin Manager, tìm plugin-text-copy và bật.

Hoặc kích hoạt qua dòng lệnh:

bash
yarn pm enable plugin-text-copy

Sau khi kích hoạt, plugin đăng ký schema setting enableCopier vào nhóm fieldSettings:component:Input.

Bước 2: Bật nút copy cho field cụ thể ​

  1. Mở trang có bảng (Table) hoặc form (Form) chứa field muốn thêm nút copy
  2. Vào chế độ thiết kế (Design mode)
  3. Click vào field cần bật → chọn Field Settings
  4. Tìm mục "Hiển thị nút sao chép" (Display copy button) và bật

Khi bật, plugin thực hiện:

  • Gán field.componentProps.addonAfter = TextCopyButton component
  • Cập nhật schema: x-component-props.addonAfter = '{{TextCopyButton}}'
  • Lưu thay đổi qua dn.emit('patch', ...)

Bước 3: Sử dụng ​

Trong chế độ đọc (read-pretty) ​

  • Nút copy ẩn khi không hover — chỉ hiện khi di chuột lên field
  • Click nút copy → giá trị field được sao chép vào clipboard
  • Icon copy đổi thành checkmark trong ~2 giây

Trong chế độ chỉnh sửa (edit) ​

  • Nút copy hiển thị luôn bên phải input (dạng addonAfter)
  • Click để sao chép giá trị hiện tại của field

Chi tiết kỹ thuật ​

Component TextCopyButton ​

Component này là một Formily observer — tự động re-render khi field.value thay đổi:

typescript
// Lấy giá trị field qua Formily hook
const field = useField<Field>();

// Ẩn nút khi:
// - Ở chế độ readPretty VÀ (không có giá trị HOẶC không đang hover)
const hidden = field.readPretty && (!field.value || !show);

// Dùng Typography.Text copyable của Antd
<Typography.Text
  copyable={/* { text: field.value } */}
  style={/* { opacity: hidden ? 0 : 1 } */}
/>

Schema Settings ​

Plugin đăng ký một switch vào settings của Input component:

Thuộc tínhGiá trị
Setting groupfieldSettings:component:Input
Setting nameenableCopier
Loạiswitch
Label"Hiển thị nút sao chép" (Display copy button)

Khi switch bật:

  • x-component-props.addonAfter = '{{TextCopyButton}}'

Khi switch tắt:

  • x-component-props.addonAfter bị xóa (_.unset)

Cơ chế hiện/ẩn khi hover ​

Trong chế độ read-pretty, nút copy sử dụng event listener trên parent element:

typescript
// Lắng nghe mouseover/mouseout trên parent element
currentRef?.parentElement?.addEventListener('mouseover', handleMouseOver);
currentRef?.parentElement?.addEventListener('mouseout', handleMouseOut);
  • mouseover → setShow(true) → opacity = 1
  • mouseout → setShow(false) → opacity = 0

Các loại field hỗ trợ ​

Plugin đăng ký vào fieldSettings:component:Input, nên hoạt động với tất cả field dùng Input component:

Loại fieldHỗ trợGhi chú
Text (string)CóSao chép toàn bộ text
EmailCóSao chép địa chỉ email
PhoneCóSao chép số điện thoại
URLCóSao chép đường dẫn
NumberCóSao chép giá trị số dạng text
TextareaKhôngDùng component khác, không phải Input
Rich TextKhôngDùng component khác

Lưu ý quan trọng ​

  • HTTPS: Clipboard API yêu cầu context bảo mật — chỉ hoạt động trên HTTPS hoặc localhost
  • Antd copyable: Plugin dựa trên Typography.Text copyable — hành vi copy phụ thuộc Antd version
  • Column schema: Plugin hỗ trợ cả field trong Form lẫn column trong Table (qua useColumnSchema)
  • Persistence: Cài đặt copy được lưu trong UI schema — không mất khi refresh