### Install Claude Code and Run Prompt

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/PROMPT.md

Instructions for users of Claude Code to install the tool and run a prompt for generating Drupal CKEditor 5 plugins.

```bash
# Install Claude Code: https://docs.anthropic.com/en/docs/claude-code
# Place files in your Drupal installation:
#   - Copy SKILL.md to your project or Claude Code memory
#   - Adjust PROMPT.md with your specific requirements

# Run the prompt:
Please create a CKEditor 5 plugin for Drupal following the SKILL.md approach.

My requirements:
- Plugin function: [describe what it should do]
- Module name: [your_module_name]
- UI type: [toolbar button / context menu / etc.]
```

--------------------------------

### Build and Manage Plugin Lifecycle

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

Commands for installing dependencies, building production/development assets, and watching for file changes.

```bash
# Install Node.js dependencies
npm install

# Build for production (minified)
npm run build

# Build for development (readable, unminified)
npm run build:dev

# Watch mode - rebuild automatically on file changes
npm run watch
```

--------------------------------

### Example Prompt for AI Module Generation

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/OUTLINE.md

A template prompt to guide an AI in creating a CKEditor 5 plugin module for Drupal. It specifies the desired functionality, module name, and UI element type.

```markdown
# SKILL.md

## Goal
Create a CKEditor 5 plugin module for Drupal.

## Steps

1.  **Understand Drupal Module Structure**: Familiarize yourself with `*.info.yml`, `*.libraries.yml`, and `src/Plugin/CKEditor5Plugin/*.php` files.
2.  **Understand CKEditor 5 Plugin Structure**: Learn about `index.js` (or equivalent for bundling) and how plugins are defined and registered.
3.  **Identify Existing Patterns**: Analyze existing CKEditor modules in the Drupal codebase (e.g., Linkit, AI CKEditor) for common structures and configurations.
4.  **Clarify Requirements**: Ask the user for:
    *   **Plugin Functionality**: What should the plugin do? (e.g., insert timestamp, format text)
    *   **Module Name**: What should the Drupal module be called? (e.g., `ckeditor5_myplugin`)
    *   **UI Type**: How should the plugin be accessed? (e.g., toolbar button, context menu item)
5.  **Generate Files**: Create the necessary files:
    *   `[module_name].info.yml`
    *   `[module_name].ckeditor5.yml`
    *   `[module_name].libraries.yml`
    *   `js/ckeditor5_plugins/[plugin_name]/src/index.js` (or similar source file)
    *   `src/Plugin/CKEditor5Plugin/[PluginName].php`
6.  **Handle JavaScript Bundling**: Recognize that raw ES modules often fail due to Drupal's DLL pattern. The JavaScript must be bundled (e.g., using Webpack, Rollup) into a UMD format that exports to `CKEditor5.[plugin_name]`. Generate a `js/build/[plugin_name].js` file.
7.  **Update Library Definition**: Modify `[module_name].libraries.yml` to point to the bundled JavaScript file (`js/build/[plugin_name].js`).
8.  **Troubleshoot**: Be prepared to address errors like `Uncaught SyntaxError: Cannot use import statement outside a module` by ensuring the JavaScript is correctly bundled.

# PROMPT.md

## Requirements

*   **Plugin Function**: Insert current date and time into the editor.
*   **Module Name**: `ckeditor5_timestamp`
*   **UI Type**: Toolbar button

## AI Instruction

Please create a CKEditor 5 plugin for Drupal following the SKILL.md approach using the requirements in PROMPT.md. Ensure the JavaScript is correctly bundled for Drupal's DLL architecture.
```

--------------------------------

### Install and Configure CKEditor 5 Timestamp Module

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

Steps to install the module using composer, enable it with Drush, clear cache, and configure the toolbar button via the Drupal admin UI.

```bash
# Copy module to Drupal custom modules directory
cp -r ckeditor5_timestamp /path/to/drupal/web/modules/custom/

# Enable the module with Drush
drush en ckeditor5_timestamp

# Clear Drupal cache to register the new CKEditor plugin
drush cr

# Configure via admin UI:
# 1. Navigate to /admin/config/content/formats
# 2. Edit a text format using CKEditor 5 (e.g., "Full HTML")
# 3. Drag the "Timestamp" button to your toolbar
# 4. Save configuration
```

--------------------------------

### Generate Plugin via Prompt Template

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

Example prompt structure for using AI tools to scaffold new CKEditor 5 plugins.

```text
# Example prompt for Claude Code to create a new plugin:

Please create a CKEditor 5 plugin for Drupal following the SKILL.md approach.

My requirements:
- Plugin function: [describe what it should do, e.g., "Insert a signature block"]
- Module name: [your_module_name, e.g., "ckeditor5_signature"]
- UI type: [toolbar button / context menu / dialog]
```

--------------------------------

### Install CKEditor 5 Timestamp Plugin via Bash

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/README.md

Use this bash command to copy the module to your Drupal installation's modules directory.

```bash
# Place in modules/custom/ directory
cp -r ckeditor5_timestamp /path/to/drupal/web/modules/custom/
```

--------------------------------

### Enable Timestamp Module and Clear Cache

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/PROMPT.md

Commands to enable the custom module and clear Drupal's cache after installation.

```bash
drush en ckeditor5_timestamp
drush cr
```

--------------------------------

### Build CKEditor 5 Plugin Commands

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/README.md

Standard npm commands for installing dependencies and managing the build process for production, development, and watch modes.

```bash
# Install dependencies
npm install

# Build for production (minified)
npm run build

# Build for development (readable)
npm run build:dev

# Watch mode (rebuild on changes)
npm run watch
```

--------------------------------

### CKEditor 5 JavaScript Plugin Source (index.js)

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/SKILL.md

The core JavaScript file for your CKEditor 5 plugin. This example demonstrates adding a toolbar button that inserts simple text content into the editor. Customize the 'execute' function for your specific plugin logic.

```javascript
import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';

class {PluginClass} extends Plugin {
  init() {
    const editor = this.editor;

    editor.ui.componentFactory.add('{toolbar_id}', (locale) => {
      const button = new ButtonView(locale);

      button.set({
        label: '{Button Label}',
        withText: true,
        tooltip: true,
      });

      button.on('execute', () => {
        // Plugin logic here
        editor.model.change((writer) => {
          editor.model.insertContent(writer.createText('content'));
        });
        editor.editing.view.focus();
      });

      return button;
    });
  }

  static get pluginName() {
    return '{PluginClass}';
  }
}

export default {
  {PluginClass},
};
```

--------------------------------

### Troubleshoot Common Plugin Errors

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

Commands and configuration checks to resolve common build, namespace, and display issues.

```bash
# Error: "Uncaught SyntaxError: Cannot use import statement outside a module"
# Cause: Using ES module source instead of bundled UMD
# Solution: Ensure libraries.yml points to js/build/ directory
npm run build
drush cr

# Error: "CKEditorError: plugincollection-plugin-not-found"
# Cause: Plugin namespace mismatch between .ckeditor5.yml and JavaScript export
# Solution: Verify the plugin reference matches the export
# In .ckeditor5.yml: plugins: - timestamp.Timestamp
# In index.js: export default { Timestamp };

# Plugin not appearing in toolbar
# Solution: Enable module and clear cache
drush en ckeditor5_timestamp
drush cr
# Then configure text format at /admin/config/content/formats
```

--------------------------------

### Enable and Configure Custom Module (Claude Code)

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/PROMPT.md

Post-generation steps for enabling the custom module and configuring the text format after using Claude Code.

```bash
drush en your_module_name
drush cr
```

--------------------------------

### Plugin Execution Sequence

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/Article.md

Mermaid sequence diagram illustrating the interaction between the user, toolbar, plugin, and editor model.

```mermaid
sequenceDiagram
    participant User
    participant Toolbar as CKEditor Toolbar
    participant Plugin as Timestamp Plugin
    participant Editor as Editor Model

    User->>Toolbar: Click "Timestamp" button
    Toolbar->>Plugin: execute event
    Plugin->>Plugin: new Date()
    Plugin->>Editor: insertContent(timestamp)
    Editor->>User: Timestamp appears at cursor
```

--------------------------------

### MCP Tools for CKEditor 5 and Drupal Documentation

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/SKILL.md

Utilize MCP tools to query CKEditor 5 and Drupal documentation. Context7 can help find information on creating plugins, while WebFetch can extract details about Drupal module structure and conventions.

```bash
mcp__context7__resolve-library-id
  libraryName: "ckeditor5"
  query: "Creating a CKEditor 5 plugin for Drupal integration"

mcp__context7__query-docs
  libraryId: "/ckeditor/ckeditor5"
  query: "How to create a simple plugin with a button that inserts content"

url: https://www.drupal.org/docs/develop/creating-modules
prompt: "Extract module structure, .info.yml format, naming conventions"
```

--------------------------------

### Enabling and Clearing Drupal Cache

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/OUTLINE.md

Commands to enable the newly created custom module and clear Drupal's cache to make the changes effective.

```bash
drush en your_module_name
drush cr

```

--------------------------------

### Prompt for Creating a CKEditor 5 Plugin

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/README.md

A customizable template for creating new CKEditor 5 plugins for Drupal. Replace placeholders with your specific requirements.

```text
Please create a CKEditor 5 plugin for Drupal following the SKILL.md approach.

My requirements:
- Plugin function: [describe what it should do]
- Module name: [your_module_name]
- UI type: [toolbar button / context menu / dialog]
```

--------------------------------

### Configure CKEditor 5 Plugin via YAML

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/README.md

Define plugin configurations, including its PHP class, default values, library paths, and toolbar items, in a .ckeditor5.yml file.

```yaml
my_plugin_id:
  ckeditor5:
    plugins:
      - myPlugin.MyPlugin
    config:
      myPlugin:
        defaultValue: 'example'
  drupal:
    label: My Plugin
    library: my_module/my_plugin
    admin_library: my_module/admin
    toolbar_items:
      myButton:
        label: My Button
    elements: false
```

--------------------------------

### Drupal Library Configuration

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/Article.md

YAML configuration for a Drupal library that points to the bundled JavaScript file.

```yaml
timestamp:
  js:
    js/build/timestamp.js: { minified: true }
  dependencies:
    - core/ckeditor5
```

--------------------------------

### Enable Module and Clear Cache

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/SKILL.md

Use these Drush commands to enable a Drupal module and clear its cache. This is often necessary for new plugins to be recognized.

```bash
drush en {module_name}
drush cr
```

--------------------------------

### Implement Custom Content Insertion

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

Handles the execute event to insert text or dynamic content into the editor model at the current cursor position.

```javascript
// Insert custom content when button is clicked
button.on('execute', () => {
  editor.model.change((writer) => {
    // Insert plain text
    editor.model.insertContent(writer.createText('Hello World'));

    // Or insert formatted date
    const formattedDate = new Date().toLocaleDateString('en-US', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
    editor.model.insertContent(writer.createText(formattedDate));
  });

  // Return focus to editor after insertion
  editor.editing.view.focus();
});
```

--------------------------------

### Module Metadata Configuration (.info.yml)

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

Defines Drupal module metadata including name, description, and version compatibility. Ensure core_version_requirement matches your Drupal version.

```yaml
# ckeditor5_timestamp.info.yml
name: CKEditor 5 Timestamp
type: module
description: 'Adds a CKEditor 5 plugin that inserts the current timestamp at the cursor position.'
package: CKEditor
core_version_requirement: '^10.1 || ^11'
```

--------------------------------

### Drupal AI Agents Module Key Files

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/assets/drupal-ai-infographics.md

This structure outlines the key files for the Drupal AI Agents module, including entity definitions for agents and the service responsible for agent execution.

```php
web/modules/contrib/ai_agents/
├── src/
│   ├── Entity/AiAgent.php            # Agent config entity
│   └── Service/AiAgentRunner.php     # Agent execution
└── docs/                             # Agent documentation
```

--------------------------------

### Drupal AI Module Key Files

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/assets/drupal-ai-infographics.md

This structure details the core directories and files within the Drupal AI module, including provider discovery, interface definitions, operation type implementations, entity definitions, and service classes.

```php
web/modules/contrib/ai/
├── src/
│   ├── AiProviderPluginManager.php    # Provider discovery
│   ├── AiProviderInterface.php        # Provider contract
│   ├── OperationType/                 # Capability definitions
│   │   ├── Chat/
│   │   ├── Embeddings/
│   │   └── ...
│   ├── Entity/
│   │   └── AiPrompt.php              # Prompt entity
│   └── Service/
│       └── FunctionCalling/          # Tool execution
│
├── modules/
│   ├── ai_assistant_api/             # Assistant/Chatbot
│   ├── ai_automators/                # Field automation
│   ├── ai_chatbot/                   # DeepChat UI
│   └── ai_search/                    # Search integration
│
└── docs/                             # MkDocs documentation
```

--------------------------------

### Drupal Module Info File

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/OUTLINE.md

Defines basic information about the Drupal module. Ensure the 'core_version_requirement' matches your Drupal version.

```yaml
name: "ckeditor5_timestamp"
type: "module"
description: "Adds a timestamp button to CKEditor 5."
core_version_requirement: "^11.3"

```

--------------------------------

### Register Custom Elements and Schema

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

Defines new model elements and their corresponding HTML view conversions for complex plugin functionality.

```javascript
// Register a custom element in the editor schema
editor.model.schema.register('myElement', {
  inheritAllFrom: '$block'
});

// Define conversion between model and view (HTML)
editor.conversion.elementToElement({
  model: 'myElement',
  view: 'div'
});
```

--------------------------------

### Search Existing CKEditor 5 Integrations in Drupal

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/SKILL.md

Explore existing CKEditor 5 plugins in Drupal's contrib and custom modules to understand common patterns and file structures. Pay attention to .ckeditor5.yml, .info.yml, .libraries.yml, and JavaScript plugin source files.

```bash
Search for patterns in:
- web/modules/contrib/*/  - Look for modules with .ckeditor5.yml files
- web/modules/custom/*/   - Check existing custom CKEditor integrations
```

--------------------------------

### Define Module Metadata

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/Article.md

The standard info file required for Drupal to recognize the custom module.

```yaml
name: CKEditor 5 Timestamp
type: module
description: "Adds a CKEditor 5 plugin that inserts the current timestamp at the cursor position."
package: CKEditor
core_version_requirement: "^10.1 || ^11"
```

--------------------------------

### Declare Plugin in Drupal Configuration

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

Updates the module's .ckeditor5.yml file to register the plugin and define allowed HTML elements.

```yaml
# Update .ckeditor5.yml to declare allowed HTML elements
ckeditor5_mymodule_myplugin:
  ckeditor5:
    plugins:
      - myNamespace.MyPlugin
  drupal:
    label: My Plugin
    library: mymodule/myplugin
    toolbar_items:
      myButton:
        label: My Button
    elements:
      - <div class="my-class">
```

--------------------------------

### JavaScript Plugin (Bundled UMD)

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/SKILL.md

This JavaScript code demonstrates the UMD (Universal Module Definition) format required for Drupal's CKEditor 5 plugins. It exports to the `CKEditor5.{namespace}` global and references `CKEditor5.dll` for core imports. Ensure this is placed in your `js/build/` directory.

```javascript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.{namespace}=t())}(self,(function(){return function(){var e={"ckeditor5/src/core.js":function(e,t,n){e.exports=n("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/ui.js":function(e,t,n){e.exports=n("dll-reference CKEditor5.dll")("./src/ui.js")},"dll-reference CKEditor5.dll":function(e){"use strict";e.exports=CKEditor5.dll}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var r={};return function(){"use strict";n.d(r,{default:function(){return s}});var e=n("ckeditor5/src/core.js"),t=n("ckeditor5/src/ui.js");class o extends e.Plugin{init(){const e=this.editor;e.ui.componentFactory.add("{toolbar_id}",n=>{const r=new t.ButtonView(n);return r.set({label:"{Button Label}",withText:!0,tooltip:!0}),r.on("execute",()=>{/* plugin logic */e.editing.view.focus()}),r})}static get pluginName(){return"{PluginClass}"}}}const s={{PluginClass}:o}}(),r=r.default}()}));
```

--------------------------------

### Drupal CKEditor 5 Timestamp Plugin - info.yml

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/PROMPT.md

Module metadata file for Drupal, defining the module's name, type, and dependencies.

```yaml
name: "CKEditor 5 Timestamp Plugin"
type: "module"
description: "Adds a timestamp button to CKEditor 5."
core_version_requirement: "^11 || ^12"
dependencies:
  - "ckeditor5:ckeditor5

```

--------------------------------

### Customize Plugin Behavior (Insert Timestamp)

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/PROMPT.md

JavaScript code snippet demonstrating how to modify the core logic of the timestamp plugin to insert the current date and time.

```javascript
button.on('execute', () => {
  // Change this logic for different functionality
  const now = new Date();
  editor.model.change((writer) => {
    editor.model.insertContent(writer.createText(now.toString()));
  });
});
```

--------------------------------

### Configure Webpack for Drupal CKEditor 5

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

Bundles ES modules into the UMD format required by the Drupal CKEditor 5 DLL architecture.

```javascript
// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './js/ckeditor5_plugins/timestamp/src/index.js',
  output: {
    path: path.resolve(__dirname, 'js/build'),
    filename: 'timestamp.js',
    library: ['CKEditor5', 'timestamp'],
    libraryTarget: 'umd',
    libraryExport: 'default'
  },
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require.resolve('ckeditor5/build/ckeditor5-dll.manifest.json'),
      scope: 'ckeditor5/src',
      name: 'CKEditor5.dll'
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/
      }
    ]
  }
};
```

--------------------------------

### Register CKEditor 5 Plugin

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/Article.md

The configuration file that maps the CKEditor 5 plugin to the Drupal module integration.

```yaml
ckeditor5_timestamp_timestamp:
  ckeditor5:
    plugins:
      - timestamp.Timestamp
  drupal:
    label: Timestamp
    library: ckeditor5_timestamp/timestamp
    toolbar_items:
      timestamp:
        label: Timestamp
    elements: false
```

--------------------------------

### Customize Toolbar Button Appearance

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

Configures the button label, tooltip, and icon visibility within the editor UI component factory.

```javascript
// Customize button in editor.ui.componentFactory.add callback
button.set({
  label: 'My Plugin',     // Button text displayed in toolbar
  withText: true,         // true = show text label, false = icon only
  tooltip: true,          // Enable tooltip on hover
  // icon: mySvgIcon,     // Custom SVG icon (import as string)
});
```

--------------------------------

### Implement JavaScript Plugin Logic

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/Article.md

The CKEditor 5 plugin implementation that adds a toolbar button and inserts a timestamp into the editor model.

```javascript
import { Plugin } from "ckeditor5/src/core";
import { ButtonView } from "ckeditor5/src/ui";

class Timestamp extends Plugin {
  init() {
    const editor = this.editor;

    editor.ui.componentFactory.add("timestamp", (locale) => {
      const button = new ButtonView(locale);

      button.set({
        label: "Timestamp",
        withText: true,
        tooltip: true,
      });

      button.on("execute", () => {
        const now = new Date();
        editor.model.change((writer) => {
          editor.model.insertContent(writer.createText(now.toString()));
        });
        editor.editing.view.focus();
      });

      return button;
    });
  }

  static get pluginName() {
    return "Timestamp";
  }
}

export default { Timestamp };
```

--------------------------------

### CKEditor 5 Plugin Registration (.ckeditor5.yml)

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

Registers the JavaScript plugin with Drupal's CKEditor 5 integration and defines the toolbar button. The 'library' key must match the name in .libraries.yml.

```yaml
# ckeditor5_timestamp.ckeditor5.yml
ckeditor5_timestamp_timestamp:
  ckeditor5:
    plugins: 
      - timestamp.Timestamp
  drupal:
    label: Timestamp
    library: ckeditor5_timestamp/timestamp
    toolbar_items:
      timestamp:
        label: Timestamp
    elements: false
```

--------------------------------

### Drupal CKEditor 5 Timestamp Plugin - libraries.yml

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/PROMPT.md

JavaScript library definition file for Drupal, specifying the bundled JavaScript file and its dependencies.

```yaml
timestamp:
  version: VERSION
  js:
    js/build/timestamp.js: {}
  dependencies:
    - core/ckeditor5

```

--------------------------------

### JavaScript Library Definition (.libraries.yml)

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

Defines the JavaScript library for the timestamp plugin and its dependency on CKEditor 5 core. The path to the JS file should match your build output.

```yaml
# ckeditor5_timestamp.libraries.yml
timestamp:
  js:
    js/build/timestamp.js: { minified: true }
  dependencies:
    - core/ckeditor5
```

--------------------------------

### Drupal Module Structure for CKEditor 5 Plugin

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/SKILL.md

This outlines the standard directory and file structure for a Drupal module that includes a CKEditor 5 plugin. Ensure the 'build' directory contains the bundled JavaScript file for production.

```yaml
web/modules/custom/{module_name}/
├── {module_name}.info.yml          # Module metadata
├── {module_name}.ckeditor5.yml     # CKEditor plugin definition
├── {module_name}.libraries.yml     # JS library definition
├── js/
│   ├── ckeditor5_plugins/
│   │   └── {plugin_name}/
│   │       └── src/
│   │           └── index.js        # Source (for development)
│   └── build/
│       └── {plugin_name}.js        # Bundled (for production) **REQUIRED**
└── src/
    └── Plugin/
        └── CKEditor5Plugin/
            └── {PluginName}.php    # PHP plugin class
```

--------------------------------

### CKEditor 5 Plugin Definition File (.ckeditor5.yml)

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/SKILL.md

Configures the CKEditor 5 plugin within Drupal. This file links the plugin's PHP class, JavaScript library, and defines toolbar items if applicable. Set 'elements' to false if the plugin doesn't directly map to a specific HTML element.

```yaml
{module_name}_{plugin_id}:
  ckeditor5:
    plugins: 
      - {namespace}.{PluginClass}
  drupal:
    label: {Plugin Label}
    library: {module_name}/{library_name}
    toolbar_items:
      {toolbar_id}:
        label: {Button Label}
    elements: false
```

--------------------------------

### CKEditor 5 DLL Error Message

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/README.md

The error message encountered when attempting to use raw ES modules instead of the required UMD format.

```text
Uncaught SyntaxError: Cannot use import statement outside a module
```

--------------------------------

### CKEditor 5 Plugin Error

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/Article.md

Common error encountered when a plugin is not correctly registered in the global CKEditor5 namespace.

```plain
CKEditorError: plugincollection-plugin-not-found {"plugin":null}
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-plugincollection-plugin-not-found
```

--------------------------------

### Configure Toolbar Button in CKEditor 5

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/README.md

Configure the properties of a CKEditor 5 toolbar button, such as its label, text visibility, tooltip, and icon.

```javascript
button.set({
  label: 'My Plugin',     // Button text
  withText: true,         // Show text (false = icon only)
  tooltip: true,          // Enable tooltip on hover
  icon: mySvgIcon,        // Custom SVG icon
});
```

--------------------------------

### Declare Allowed Elements in .ckeditor5.yml

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/README.md

Update the .ckeditor5.yml file to declare custom elements that are allowed within the editor content.

```yaml
elements:
  - <div class="my-class">
```

--------------------------------

### CKEditor 5 Plugin Configuration

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/OUTLINE.md

Configures the CKEditor 5 plugin for Drupal. This file links the Drupal module to the CKEditor 5 plugin and specifies its integration point, such as a toolbar button.

```yaml
ckeditor5_timestamp:
  label: "Timestamp"
  library: "ckeditor5_timestamp/timestamp"
  plugins:
    - "timestamp"
  # Define the toolbar button configuration
  toolbar_items:
    - "timestamp"

```

--------------------------------

### Configure Text Format for Timestamp Button

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/PROMPT.md

Steps to add the custom timestamp button to a CKEditor 5 toolbar within a Drupal text format configuration.

```bash
# Configure text format
# Go to /admin/config/content/formats
# Edit a text format using CKEditor 5
# Add "Timestamp" button to toolbar
# Save
```

--------------------------------

### PHP Plugin Class (Timestamp.php)

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

Integrates the JavaScript CKEditor 5 plugin with Drupal's plugin system. This class extends CKEditor5PluginDefault and requires no additional methods for basic integration.

```php
<?php
// src/Plugin/CKEditor5Plugin/Timestamp.php

declare(strict_types=1);

namespace Drupal\ckeditor5_timestamp\Plugin\CKEditor5Plugin;

use Drupal\ckeditor5\Plugin\CKEditor5PluginDefault;

/**
 * CKEditor 5 Timestamp plugin.
 *
 * Provides a toolbar button that inserts the current timestamp.
 */
class Timestamp extends CKEditor5PluginDefault {

}

```

--------------------------------

### CKEditor 5 JavaScript Library Definition (.libraries.yml)

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/SKILL.md

Defines the JavaScript library for your CKEditor 5 plugin. It specifies the bundled JavaScript file and its core CKEditor 5 dependency.

```yaml
{library_name}:
  js:
    js/build/{plugin_name}.js: { minified: true }
  dependencies:
    - core/ckeditor5
```

--------------------------------

### Drupal CKEditor 5 Timestamp Plugin - ckeditor5.yml

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/PROMPT.md

CKEditor 5 plugin definition file for Drupal, mapping the plugin to its JavaScript build and toolbar configuration.

```yaml
ckeditor5_timestamp:
  drupal_plugin_name: "timestamp"
  library: "ckeditor5_timestamp/timestamp"
  menu_items:
    - timestamp
  toolbar_items:
    - timestamp

```

--------------------------------

### Define Custom Element Conversion in CKEditor 5

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/README.md

Define the conversion rules between the CKEditor 5 model and view for a custom element, mapping model elements to view elements.

```javascript
// Define conversion (model <-> view)
editor.conversion.elementToElement({
  model: 'myElement',
  view: 'div'
});
```

--------------------------------

### Drupal Library Definition for CKEditor Plugin

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/OUTLINE.md

Defines the JavaScript and CSS assets for the CKEditor 5 plugin. It specifies the bundled JavaScript file and its dependencies.

```yaml
timestamp:
  version: "1.0.0"
  js:
    js/build/timestamp.js: {}
  dependencies:
    - "core/ckeditor5"
    - "core/ckeditor5.ckeditor5"

```

--------------------------------

### JavaScript Plugin Implementation (Timestamp.js)

Source: https://context7.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/llms.txt

The core JavaScript plugin extends CKEditor 5's Plugin class. It registers a 'timestamp' button that, when clicked, inserts the current date and time as text into the editor.

```javascript
// js/ckeditor5_plugins/timestamp/src/index.js
import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';

class Timestamp extends Plugin {
  init() {
    const editor = this.editor;

    // Register the 'timestamp' button in the editor's UI component factory.
    editor.ui.componentFactory.add('timestamp', (locale) => {
      const button = new ButtonView(locale);

      button.set({
        label: 'Timestamp',
        withText: true,
        tooltip: true,
      });

      // Execute the timestamp insertion when the button is clicked.
      button.on('execute', () => {
        const now = new Date();

        // Insert the timestamp at the current cursor position.
        editor.model.change((writer) => {
          editor.model.insertContent(writer.createText(now.toString()));
        });

        // Return focus to the editor.
        editor.editing.view.focus();
      });

      return button;
    });
  }

  static get pluginName() {
    return 'Timestamp';
  }
}

export default {
  Timestamp,
};

```

--------------------------------

### Drupal CKEditor 5 Timestamp Plugin - Bundled JavaScript (UMD)

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/PROMPT.md

The UMD (Universal Module Definition) bundled JavaScript file for the CKEditor 5 timestamp plugin, ready for use in Drupal.

```javascript
/**
 * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
 */
(function(global, factory) { for (var x in factory) _(x, factory[x]); })(this, function(CKEditor5) {
  'use strict';

  class Timestamp extends CKEditor5.Plugin {
    init() {
      const editor = this.editor;
      const componentFactory = editor.ui.componentFactory;

      componentFactory.add('timestamp', locale => {
        const view = componentFactory.createPluginResult('timestamp', locale);

        // The state of the button will be toggled by the editor. If the button is
        // pressed, the editor will add the "pressed" CSS class to the element.
        view.bind('isOn', 'isEnabled').to(this, 'state', 'isEnabled');

        // Execute the command when the button is clicked.
        view.on('execute', () => {
          editor.execute('insertTimestamp');
        });

        return view;
      });
    }
  }

  // Register the plugin with the editor.
  CKEditor5.editor.plugins.add('timestamp', Timestamp);

  // Define the command.
  editor.commands.add('insertTimestamp', {
    execute: () => {
      const now = new Date();
      editor.model.change(writer => {
        editor.model.insertContent(writer.createText(now.toString()));
      });
    }
  });
});

```

--------------------------------

### CKEditor 5 Timestamp Plugin JavaScript (Bundled)

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/OUTLINE.md

The bundled JavaScript for the CKEditor 5 timestamp plugin. This UMD format is required for Drupal's CKEditor 5 DLL architecture, exporting the plugin to the CKEditor5 namespace.

```javascript
/**
 * @fileOverview
 * Timestamp plugin for CKEditor 5.
 */

(function (CKEDITOR5) {
  CKEDITOR5.builtin.Timestamp = class Timestamp extends CKEDITOR5.core.Command {
    execute() {
      const timestamp = new Date().toLocaleString();
      this.editor.model.change(writer => {
        writer.insertText(timestamp, this.editor.model.document.selection.getFirstPosition());
      });
    }

    refresh() {
      const model = this.editor.model;
      const selection = model.document.selection;
      const allowedIn = model.schema.findAllowedParent( selection.getFirstPosition(), 'text' );
      if ( allowedIn && model.schema.checkChild( allowedIn, 'text' ) ) {
        this.isEnabled = true;
      } else {
        this.isEnabled = false;
      }
    }
  });

  CKEDITOR5.editor.add
    .ui.componentFactory.add('timestamp', (editor) => {
      const command = editor.commands.get('timestamp');
      const buttonView = new CKEDITOR5.ui.view.ButtonView(editor);

      buttonView.set({
        label: 'Insert Timestamp',
        icon: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 14a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm-1-5h2v3h-2v-3z" fill="currentColor" fill-rule="evenodd"></path></svg>', // Simple clock icon
        tooltip: true
      });

      buttonView.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
      buttonView.on('execute', () => editor.execute('timestamp'));

      return buttonView;
    });

})(window.CKEDITOR5);

```

--------------------------------

### Customize Button Appearance

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/PROMPT.md

JavaScript code snippet for configuring the appearance of the CKEditor 5 toolbar button, including its label, text visibility, and tooltip.

```javascript
button.set({
  label: 'Timestamp',      // Change label
  withText: true,          // true = text label, false = icon only
  tooltip: true,           // Show tooltip on hover
  // icon: svgIcon,        // Add custom SVG icon
});
```

--------------------------------

### Define Custom Element Schema in CKEditor 5

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/README.md

Define the schema for a custom element within the CKEditor 5 model, specifying its inheritance and properties.

```javascript
// Define schema
editor.model.schema.register('myElement', {
  inheritAllFrom: '$block'
});
```

--------------------------------

### Define PHP Plugin Class

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/Article.md

The minimal PHP class required to extend Drupal's CKEditor 5 plugin system.

```php
<?php

declare(strict_types=1);

namespace Drupal\ckeditor5_timestamp\Plugin\CKEditor5Plugin;

use Drupal\ckeditor5\Plugin\CKEditor5PluginDefault;

/**
 * CKEditor 5 Timestamp plugin.
 */
class Timestamp extends CKEditor5PluginDefault {

}
```

--------------------------------

### Drupal CKEditor 5 Timestamp Plugin - Source JavaScript (ES Module)

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/PROMPT.md

The source ES module JavaScript file for the CKEditor 5 timestamp plugin, useful for development and understanding the plugin's structure.

```javascript
/**
 * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
 */
import { Plugin } from '@ckeditor/ckeditor5-core';

export default class Timestamp extends Plugin {
  init() {
    const editor = this.editor;
    const componentFactory = editor.ui.componentFactory;

    componentFactory.add('timestamp', locale => {
      const view = componentFactory.createPluginResult('timestamp', locale);

      // The state of the button will be toggled by the editor. If the button is
      // pressed, the editor will add the "pressed" CSS class to the element.
      view.bind('isOn', 'isEnabled').to(this, 'state', 'isEnabled');

      // Execute the command when the button is clicked.
      view.on('execute', () => {
        editor.execute('insertTimestamp');
      });

      return view;
    });
  }
}

// Register the plugin with the editor.
CKEditor5.editor.plugins.add('timestamp', Timestamp);

// Define the command.
editor.commands.add('insertTimestamp', {
  execute: () => {
    const now = new Date();
    editor.model.change(writer => {
      editor.model.insertContent(writer.createText(now.toString()));
    });
  }
});

```

--------------------------------

### PHP CKEditor 5 Plugin Class

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/SKILL.md

This PHP code defines a basic CKEditor 5 plugin class in Drupal. It extends `CKEditor5PluginDefault` and is intended to be registered via a `.ckeditor5.yml` file.

```php
<?php

declare(strict_types=1);

namespace Drupal\{module_name}\Plugin\CKEditor5Plugin;

use Drupal\ckeditor5\Plugin\CKEditor5PluginDefault;

/**
 * CKEditor 5 {Plugin Name} plugin.
 */
class {PluginClass} extends CKEditor5PluginDefault {

}
```

--------------------------------

### PHP Plugin Definition for CKEditor 5

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/OUTLINE.md

Defines the CKEditor 5 plugin in PHP for Drupal. This class registers the plugin with Drupal's CKEditor 5 integration and specifies its configuration.

```php
<?php

namespace Drupal\ckeditor5_timestamp\Plugin\CKEditor5Plugin;

use Drupal\ckeditor5\Plugin\CKEditor5PluginBase;

/**
 * Configuration for the Timestamp CKEditor 5 plugin.
 */
class Timestamp extends CKEditor5PluginBase {

  /**
   * {@inheritdoc}
   */
  public function getConfiguration(): array {
    return [
      'name' => $this->pluginId,
      'library' => 'ckeditor5_timestamp/timestamp',
      'menuItems' => [
        'timestamp' => [
          'label' => $this->t('Insert Timestamp'),
          'icon' => '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 14a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm-1-5h2v3h-2v-3z" fill="currentColor" fill-rule="evenodd"></path></svg>', // Simple clock icon
        ],
      ],
    ];
  }

}

```

--------------------------------

### Drupal CKEditor 5 Timestamp Plugin - PHP Class

Source: https://github.com/simply007/drupalcon-chicago-26-ckeditor-ai-playground/blob/main/PROMPT.md

The PHP plugin class for Drupal's CKEditor 5 integration, defining the plugin's metadata and integration points.

```php
<?php

namespace Drupal\ckeditor5_timestamp\Plugin\CKEditor5Plugin;

use Drupal\ckeditor5\Plugin\CKEditor5PluginBase;

/**
 * Configure the timestamp CKEditor 5 plugin.
 */
class Timestamp extends CKEditor5PluginBase
{

  /**
   * {@inheritdoc}
   */
  public function getLibraries(array $editor_configurations = []):
  {
    return [
      'ckeditor5_timestamp/timestamp' => [],
    ];
  }

}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.