CKEditor 5 Plugin
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 follo
Description
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
- Toolbar Button:
- Add a toolbar button named "newsletter"
- Icon: simple SVG placeholder
- When clicked → open a dialog (modal)
- 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
- On OK:
- Generate structured HTML block inside editor
- Structure example:
- Behavior inside editor:
- First tab always active by default.
- When user clicks tab link:
- Remove class "active" from all tabs and panes
- Add class "active" to clicked tab and corresponding pane
- When user double-clicks :
- Open dialog again
- Load existing data
- Allow editing
- Update HTML structure
- 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
- Architecture required:
Create structure:
- newsletter/
- newsletterplugin.ts
- newsletterediting.ts
- newsletterui.ts
- newslettercommand.ts
- 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
-
Important: Do NOT use raw DOM manipulation. All updates must go through editor.model.
-
Output required:
- Full plugin code
- Proper imports
- Comments explaining architecture
- Explain migration differences from CKEditor 4
- Show how to register plugin in build
- 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.
Reviews (0)
No reviews yet. Be the first to review!
Comments (0)
No comments yet. Be the first to share your thoughts!