developer coding user risk: low
CKEditor 5 Newsletter Plugin Developer
Directs the model to create a complete CKEditor 5 plugin called NewsletterPlugin as a senior architect, including a toolbar button opening a modal dialog for title, description, an…
PROMPT
You are a senior CKEditor 5 plugin architect.
I need you to build a complete CKEditor 5 plugin called "NewsletterPlugin".
Context:
- This is a migration from a legacy CKEditor 4 plugin.
- Must follow CKEditor 5 architecture strictly.
- Must use CKEditor 5 UI framework and plugin system.
- Must follow documentation:
https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/ui-components.html
https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html
Environment:
- CKEditor 5 custom build
- ES6 modules
- Typescript preferred (if possible)
- No usage of CKEditor 4 APIs
========================================
FEATURE REQUIREMENTS
========================================
1) Toolbar Button:
- Add a toolbar button named "newsletter"
- Icon: simple SVG placeholder
- When clicked → open a dialog (modal)
2) Dialog Behavior:
The dialog must contain input fields:
- title (text input)
- description (textarea)
- tabs (dynamic list, user can add/remove tab items)
Each tab item:
- tabTitle
- tabContent (HTML allowed)
Buttons:
- Cancel
- OK
3) On OK:
- Generate structured HTML block inside editor
- Structure example:
<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">
Content 1
</div>
<div id="tab-2" class="tab-pane">
Content 2
</div>
</div>
</div>
4) Behavior inside editor:
- First tab always active by default.
- When user clicks <a> tab link:
- Remove class "active" from all tabs and panes
- Add class "active" to clicked tab and corresponding pane
- When user double-clicks <a>:
- Open dialog again
- Load existing data
- Allow editing
- Update HTML structure
5) MUST USE:
- GeneralHtmlSupport (GHS) for allowing custom classes & attributes
- Proper upcast / downcast converters
- Widget API (toWidget, toWidgetEditable if needed)
- Command class
- UI Component system (ButtonView, View, InputTextView)
- Editing & UI part separated
- Schema registration properly
6) Architecture required:
Create structure:
- newsletter/
- newsletterplugin.ts
- newsletterediting.ts
- newsletterui.ts
- newslettercommand.ts
7) Technical requirements:
- Register schema element:
newsletterBlock
- Must allow:
class
id
href
data attributes
- Use:
editor.model.change()
conversion.for('upcast')
conversion.for('downcast')
- Handle click event via editing view document
- Use editing.view.document.on( 'click', ... )
- Detect double click event
8) Important:
Do NOT use raw DOM manipulation.
All updates must go through editor.model.
9) Output required:
- Full plugin code
- Proper imports
- Comments explaining architecture
- Explain migration differences from CKEditor 4
- Show how to register plugin in build
10) Extra:
Explain how to enable GeneralHtmlSupport configuration in editor config.
========================================
Please produce clean production-ready code.
Do not simplify logic.
Follow CKEditor 5 best practices strictly. REQUIRED CONTEXT
- Feature requirements
- CKEditor 5 UI framework and plugin system documentation
- General HTML support documentation
OPTIONAL CONTEXT
- Legacy CKEditor 4 plugin migration context
- Typescript preference
- ES6 modules
- Custom build environment
ROLES & RULES
Role assignments
- You are a senior CKEditor 5 plugin architect.
- Follow CKEditor 5 architecture strictly.
- Use CKEditor 5 UI framework and plugin system.
- Follow documentation.
- No usage of CKEditor 4 APIs.
- Do NOT use raw DOM manipulation.
- All updates must go through editor.model.
- Produce clean production-ready code.
- Do not simplify logic.
- Follow CKEditor 5 best practices strictly.
EXPECTED OUTPUT
- Format
- code
- Constraints
-
- Full plugin code in specified file structure
- Proper imports
- Comments explaining architecture
- Explain migration differences from CKEditor 4
- Show how to register plugin in build
- Explain GeneralHtmlSupport configuration
SUCCESS CRITERIA
- Build complete NewsletterPlugin with toolbar button and dialog.
- Implement dynamic tabs with title and HTML content.
- Generate structured HTML block on OK.
- Handle tab switching and double-click editing via model.
- Use GeneralHtmlSupport, Widget API, Command, converters.
- Create specified file structure with editing/UI separation.
- Provide full code, imports, comments, migration explanations, registration instructions.
FAILURE MODES
- Using CKEditor 4 APIs.
- Raw DOM manipulation.
- Not using editor.model.change().
- Incomplete upcast/downcast converters.
- Not implementing widget behavior.
- Mixing editing and UI logic.
- Simplifying tab management or dialog logic.
CAVEATS
- Missing context
-
- CSS styles for .newsletter, .newsletter-tabs, etc.
- Exact CKEditor 5 version or build setup details.
- Handling of multiple newsletter blocks (selection, insertion).
- Tab content HTML sanitization or restrictions.
- Ambiguities
-
- Icon: 'simple SVG placeholder' lacks exact SVG code.
- UI for dynamic tabs add/remove not detailed (e.g., buttons, list rendering).
- Double-click target: specifically on <a> or entire widget?
- Click event handling: exact selector for tab links within widget.
QUALITY
- OVERALL
- 0.82
- CLARITY
- 0.92
- SPECIFICITY
- 0.95
- REUSABILITY
- 0.25
- COMPLETENESS
- 0.93
IMPROVEMENT SUGGESTIONS
- Provide exact SVG code for the toolbar button icon.
- Explicitly describe tab management UI (e.g., 'Add Tab button, list of tabs with delete buttons').
- Clarify double-click: 'Double-click on any tab <a> link opens edit dialog'.
- Add section for required CSS and how to include it.
- Include full editor config example with plugin registration and GHS.
USAGE
Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.
MORE FOR DEVELOPER
- Context7 Library Documentation Expertdevelopercoding
- Structured Python Production Code Generatordevelopercoding
- Angular Standalone Directive Generatordevelopercoding
- Pytest Unit Test Suite Generatordevelopercoding
- Unity Architecture Specialistdevelopercoding
- Web Typography CSS Generatordevelopercoding
- VSCode CodeTour File Expertdevelopercoding
- Senior Python Code Reviewerdevelopercoding
- Structured Cross-Language Code Translatordevelopercoding
- Multi-DB SQL Query Optimizer and Builderdevelopercoding