Bim Bim

Bạn là kiến ​​trúc sư plugin CKEditor 5 cấp cao.

Tôi cần bạn xây dựng một plugin CKEditor 5 hoàn chỉnh có tên là "NewsletterPlugin".

Bối cảnh:
- Đây là sự di chuyển từ plugin CKEditor 4 cũ.
- Phải tuân thủ nghiêm ngặt kiến ​​trúc CKEditor 5.
- Phải sử dụng hệ thống plugin và framework CKEditor 5 UI.
- Phải tuân theo các tài liệu:
  https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/ui-comComponents.html
  https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html

Môi trường:
- Bản dựng tùy chỉnh CKEditor 5
- Mô-đun ES6
- Ưu tiên Typescript (nếu có thể)
- Không sử dụng API CKEditor 4

============================================
YÊU CẦU TÍNH NĂNG
============================================

1) Nút thanh công cụ:
- Thêm nút thanh công cụ có tên là “bản tin”
- Biểu tượng: giữ chỗ SVG đơn giản
- Khi nhấn vào → mở hộp thoại (modal)

2) Hành vi hộp thoại:
Hộp thoại phải chứa các trường đầu vào:
- tiêu đề (nhập văn bản)
- mô tả (vùng văn bản)
- tab (danh sách động, người dùng có thể thêm/xóa các mục tab)
    Mỗi mục tab:
        - tabTiêu đề
        - tabContent (cho phép HTML)

Nút:
- Hủy bỏ
- Được rồi

3) Bật OK:
- Tạo khối HTML có cấu trúc bên trong trình soạn thảo
- Ví dụ về cấu trúc:

<div class="newsletter">
    <ul class="newsletter-tabs">
        <li class="active">
            <a href="#tab-1" class="active">Tab 1</a>
        </li>
        <li>
            <a href="#tab-2">Tab 2</a>
        </li>
    </ul>
    <div class="newsletter-content">
        <div id="tab-1" class="tab-pane active">
            Nội dung 1
        </div>
        <div id="tab-2" class="tab-pane">
            Nội dung 2
        </div>
    </div>
</div>

4) Hành vi bên trong trình soạn thảo:

- Tab đầu tiên luôn hoạt động theo mặc định.
- Khi người dùng nhấp vào liên kết tab <a>:
    - Xóa lớp "hoạt động" khỏi tất cả các tab và khung
    - Thêm lớp "hoạt động" vào tab đã nhấp và khung tương ứng
- Khi người dùng nhấp đúp vào <a>:
    - Mở lại hộp thoại
    - Tải dữ liệu hiện có
    - Cho phép chỉnh sửa
    - Cập nhật cấu trúc HTML

5) PHẢI SỬ DỤNG:
- GeneralHtmlSupport (GHS) để cho phép các lớp và thuộc tính tùy chỉnh
- Bộ chuyển đổi upcast / downcast thích hợp
- API tiện ích (toWidget, toWidgetEditable nếu cần)
- Lớp lệnh
- Hệ thống Thành phần UI (ButtonView, View, inputTextView)
- Phần chỉnh sửa & giao diện người dùng được tách riêng
- Đăng ký Schema đúng cách

6) Kiến trúc yêu cầu:

Tạo cấu trúc:

- bản tin/
    - bản tinplugin.ts
    - bản tinediting.ts
    - bản tinui.ts
    - bản tincommand.ts

7) Yêu cầu kỹ thuật:

- Đăng ký phần tử lược đồ:
    bản tinKhối
- Phải cho phép:
    lớp học
    mã số
    href
    thuộc tính dữ liệu

- Sử dụng:
    editor.model.change()
    chuyển đổi.for('upcast')
    chuyển đổi.for('downcast')

- Xử lý sự kiện click thông qua chỉnh sửa tài liệu xem
- Sử dụng edit.view.document.on( 'click', ... )
- Phát hiện sự kiện click đúp

8) Quan trọng:
KHÔNG sử dụng thao tác DOM thô.
Tất cả các bản cập nhật phải thông qua editor.model.

9) Yêu cầu đầu ra:
- Mã plugin đầy đủ
- Nhập khẩu hợp lý
- Bình luận giải thích kiến trúc
- Giải thích sự khác biệt về di chuyển so với CKEditor 4
- Hướng dẫn đăng ký plugin trong build

10) Bổ sung:
Giải thích cách bật cấu hình GeneralHtmlSupport trong cấu hình trình soạn thảo.

============================================

Vui lòng tạo mã sạch sẵn sàng cho sản xuất.
Đừng đơn giản hóa logic.
Tuân thủ nghiêm ngặt 5 phương pháp hay nhất của CKEditor.