CKEditor 5 Newsletter Plugin Development

Project Overview

You are a senior CKEditor 5 plugin architect tasked with creating a new plugin, "NewsletterPlugin," by migrating existing functionality from a legacy CKEditor 4 plugin to the CKEditor 5 architecture. This plugin must adhere strictly to CKEditor 5's plugin system, UI framework, and architectural guidelines.

Technical Environment

CKEditor 5 custom build
ES6 modules
TypeScript preferred (if possible)
No usage of CKEditor 4 APIs
GeneralHtmlSupport enabled in editor configuration

Plugin Architecture

The "NewsletterPlugin" should be structured as follows:

newsletter/
- newsletterplugin.ts (Entry point)
- newsletterediting.ts (Editing part)
- newsletterui.ts (UI part)
- newslettercommand.ts (Command class)
- newsletterschema.ts (Schema registration)

Feature Requirements

1. Toolbar Button

Add a toolbar button named "newsletter" with a simple SVG icon.
Clicking the button opens a dialog (modal) with input fields for title, description, and dynamic tabs.

2. Dialog Behavior

The dialog contains:

Text input for title
Textarea for description
Dynamic list of tabs, user can add/remove items
Each tab item:
- tabTitle
- tabContent (HTML allowed)

Buttons:

Cancel
OK

3. On OK click

Generate a structured HTML block inside the editor using the provided example structure.
Ensure that the first tab is always active by default.

4. Behavior inside the editor

When a user clicks a
tab link:
- Remove the "active" class from all tabs and panes
- Add the "active" class to the clicked tab and its corresponding pane

When a user double-clicks a
tab:
- Open the dialog again
- Load existing data
- Allow editing
- Update the HTML structure

5. Technical Requirements

Register a schema element named "newsletterBlock"
Allow the following attributes for the schema element: class, id, href, data attributes
Use editor.model.change(), conversion.for('upcast'), and conversion.for('downcast')
Handle the click event via editing.view.document.on('click', ...)
Detect double click events

6. Architecture and Best Practices

Separate the editing and UI parts
Register proper upcast/downcast converters
Use the Widget API (toWidget, toWidgetEditable if needed)
Ensure proper schema registration
Do NOT use raw DOM manipulation; all updates must go through editor.model

7. Output

Provide the complete plugin code with proper imports
Include comments explaining the architecture and migration differences from CKEditor 4
Explain how to register the plugin in a build
Demonstrate how to enable GeneralHtmlSupport in the editor configuration

8. Code Style

Follow CKEditor 5 best practices strictly
Write clean, production-ready code
Avoid unnecessary simplifications in logic

Deliverables

The complete NewsletterPlugin code in a structured folder
An explanation of the migration process and differences compared to CKEditor 4
Step-by-step instructions for integrating the plugin into a CKEditor 5 build
Any relevant examples or demonstrations

Submission Guidelines

Please upload the code in a zip file or a GitHub repository link.
Include a README file explaining the folder structure, how to build the project, and any dependencies.
Ensure the code is well-commented and follows best practices for readability and maintainability.

Please provide a polished, detailed, and unambiguous version of the prompt that will guide the AI to generate the required CKEditor 5 plugin with the specified features and architecture.

CKEditor 5 Plugin