From dd93e896813cb4bbea5e8b2a43c5235996164b32 Mon Sep 17 00:00:00 2001
From: promptadmin <your@email.com>
Date: Sat, 6 Jun 2026 20:33:10 +0000
Subject: [PATCH] Automated ingestion of prompt: CKEditor 5 Plugin

---
 prompts/coding/ckeditor_5_plugin_1294.md | 138 +++++++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 prompts/coding/ckeditor_5_plugin_1294.md

diff --git a/prompts/coding/ckeditor_5_plugin_1294.md b/prompts/coding/ckeditor_5_plugin_1294.md
new file mode 100644
index 0000000..e29f831
--- /dev/null
+++ b/prompts/coding/ckeditor_5_plugin_1294.md
@@ -0,0 +1,138 @@
+---
+title: "CKEditor 5 Plugin"
+contributor: "@bimbimkkay@gmail.com"
+tags: #coding, #bimbimkkaygmailcom
+---
+
+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.