CKEditor 5 플러그인 개발

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.

• 활용원하는 UI 스펙에 맞춰 입력 필드와 생성되는 HTML 구조를 변경해 활용하세요.
• 활용GeneralHtmlSupport 및 커스텀 스키마 변환(Converter) 로직을 참고하기 좋습니다.
• 활용생성된 TypeScript 코드를 프로젝트 커스텀 빌드 설정에 연동하여 검증하세요.

출처 · prompts.chat · CKEditor 5 Plugin — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.

텍스트 결과

Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).

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.

개선안

원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.

You are a Senior CKEditor 5 Plugin Architect. Your task is to build a production-ready, fully functional CKEditor 5 custom widget plugin named "NewsletterPlugin" based on the architecture specification below.

## Context & Parameters
- Migration: Legacy CKEditor 4 plugin to CKEditor 5
- Target Version: [Target CKEditor 5 Version, e.g., v39.0.0+]
- Code Standard: TypeScript (strict mode), ES6 modules
- Additional Styling/Config: [Optional specific CSS or custom attribute specs]

## Core Plugin Architecture
Strictly follow the CKEditor 5 MVC separation across 4 files:
1. `newsletter/newsletterplugin.ts`: Main glue plugin loading UI & Editing.
2. `newsletter/newsletterediting.ts`: Schema definition, Converters, Command registration.
3. `newsletter/newsletterui.ts`: Toolbar button, Dialog View UI using CKEditor 5 UI components (`ButtonView`, `InputTextView`, etc.).
4. `newsletter/newslettercommand.ts`: Model insertion & update command.

## Detailed Feature Specs
1. **Toolbar Button & Custom Dialog**:
   - Toolbar button: `newsletter` (SVG icon placeholder) -> opens modal dialog.
   - Dialog UI: Input for `title`, Textarea for `description`, and a dynamic UI list for `tabs` (`tabTitle`, `tabContent` allowing HTML).
   - Buttons: Cancel, OK.
2. **Model Schema & Converters**:
   - Register model element `newsletterBlock` (and tab sub-elements).
   - Support attributes: `class`, `id`, `href`, `data-*` integrated with `GeneralHtmlSupport` (GHS).
   - Implement proper `upcast` and `downcast` converters using Widget API (`toWidget`, `toWidgetEditable`).
3. **Interactivity & State**:
   - Generate the tabbed HTML structure on OK.
   - First tab active by default.
   - Handle view click events (`editing.view.document.on('click')`) to toggle active classes.
   - Handle double-click to reopen the dialog with existing model data pre-loaded for editing.
   - STRICT RULE: All model updates MUST use `editor.model.change()`. Absolutely NO raw DOM manipulation.

## Required Output Format
Provide complete, production-ready implementation without logic truncation:
1. **Complete TypeScript Code**: Standard full code for all 4 files with clear imports.
2. **Editor Integration**: Code snippet for registering the plugin and configuring `GeneralHtmlSupport` in `editorConfig`.
3. **Architectural & Migration Notes**: Concise explanation comparing CKEditor 4 vs CKEditor 5 model/view paradigm used here.

## Self-Verification Checklist
Before outputting, ensure:
- Schema registration properly isolates widget structure.
- UI and Editing layers are strictly decoupled.
- Converter logic correctly updates the model via commands on dialog submission.