ckeditor5 1.9.0 → 1.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bb520612d3f2847e8d70c48a8ffb3d1ad4be25800dd5f141a6948caf30b07978
-  data.tar.gz: 5f9850fb6a39774ab796f67b5dc95fa0ec1e6a5fe6f04fb3481f6ff17c76e026
+  metadata.gz: e3e06c4a4882429855d9570658be64f10fffd97371d0ae60e9aee2ecec08df00
+  data.tar.gz: f48eabec0f1bcab9299be0f00094f2e1078a757582a705e57d504748943b5790
 SHA512:
-  metadata.gz: 7057a3e537f5626b4754b815c1f418ddac64301350aa3b0299d5051dcda474a5f397018389a0e7c773bc1d15687043498a2bcd44518581e4233f8ab4ae85dc52
-  data.tar.gz: 0526b5810f411971ce3adafa1bad252eabaffc566f3d637b6585c2a16a6d6c938078e8b88ed88b34e610477c87c66f5dfc74d092fab2f46f183327f2fca9d287
+  metadata.gz: c989f7723dadc126c356b579f50160b09f3c359af8a791a919bcff0595c7387241f89f5a63a100c482878d0f067c094f45619628094d6a8c0659d797d75cb514
+  data.tar.gz: a411bbde271725fbaeddfc58023307837ffac5e26d4814ed13e922288846129973a2b297681076b480982485a91ed4b5c527056cf2b9b799cfbb321a5ed83762

data/README.md

@@ -102,8 +102,8 @@ Voilà! You have CKEditor 5 integrated with your Rails application. 🎉
     - [Balloon editor 🎈](#balloon-editor-)
     - [Decoupled editor 🌐](#decoupled-editor-)
   - [Using Context 📦](#using-context-)
-    - [Benefits of Using Context in Collaboration 🤝](#benefits-of-using-context-in-collaboration-)
     - [Using Context in CKEditor 5 🔄](#using-context-in-ckeditor-5-)
+    - [Example usage of `ckeditor5_context` helper 📝](#example-usage-of-ckeditor5_context-helper-)
   - [How to access editor instance? 🤔](#how-to-access-editor-instance-)
   - [Common Tasks and Solutions 💡](#common-tasks-and-solutions-)
     - [Setting Editor Language 🌐](#setting-editor-language-)
@@ -115,6 +115,8 @@ Voilà! You have CKEditor 5 integrated with your Rails application. 🎉
   - [Events fired by the editor 🔊](#events-fired-by-the-editor-)
     - [`editor-ready` event](#editor-ready-event)
     - [`editor-error` event](#editor-error-event)
+    - [`editor-change` event](#editor-change-event)
+    - [Inline event handling](#inline-event-handling)
   - [Trademarks 📜](#trademarks-)
   - [License 📜](#license-)
 
@@ -967,25 +969,24 @@ If you want to use a decoupled editor, you can pass the `type` keyword argument
 
 Context CKEditor 5 is a feature that allows multiple editor instances to share a common configuration and state. This is particularly useful in collaborative environments where multiple users are editing different parts of the same document simultaneously. By using a shared context, all editor instances can synchronize their configurations, plugins, and other settings, ensuring a consistent editing experience across all users.
 
-### Benefits of Using Context in Collaboration 🤝
-
-1. **Consistency**: Ensures that all editor instances have the same configuration, plugins, and settings, providing a uniform editing experience.
-2. **Synchronization**: Allows real-time synchronization of content and changes across multiple editor instances, making collaborative editing seamless.
-3. **Resource Sharing**: Reduces the overhead of loading and initializing multiple editor instances by sharing common resources and configurations.
-4. **Simplified Management**: Makes it easier to manage and update the configuration and state of multiple editor instances from a single point.
+![CKEditor 5 Context](docs/context.png)
 
 ### Using Context in CKEditor 5 🔄
 
 Format of the `ckeditor5_context` helper:
 
 ```erb
-<%= ckeditor5_context config: { ...you context config... }, plugins: [ ...your context plugins... ] do %>
+<!-- app/views/demos/index.html.erb -->
+
+<%= ckeditor5_context config: { ... }, plugins: [ ... ] do %>
   <%= ckeditor5_editor %>
   <%= ckeditor5_editor %>
 <% end %>
 ```
 
-Example usage:
+The `ckeditor5_context` helper takes the `config` and `plugins` keyword arguments. The `config` keyword argument allows you to define the shared configuration of the editor instances, while the `plugins` keyword argument allows you to define the shared plugins. Format of these arguments is the same as in the `ckeditor5_editor` helper.
+
+### Example usage of `ckeditor5_context` helper 📝
 
 ```erb
 <!-- app/views/demos/index.html.erb -->
@@ -1260,6 +1261,8 @@ class HighlightCommand extends Command {
 
 ## Events fired by the editor 🔊
 
+CKEditor 5 provides a set of events that you can listen to in order to react to changes in the editor. You can listen to these events using the `addEventListener` method or by defining event handlers directly in the view.
+
 ### `editor-ready` event
 
 The event is fired when the initialization of the editor is completed. You can listen to it using the `editor-ready` event.
@@ -1280,6 +1283,40 @@ document.getElementById('editor').addEventListener('editor-error', () => {
 });
 ```
 
+### `editor-change` event
+
+The event is fired when the content of the editor changes. You can listen to it using the `editor-change` event.
+
+```js
+document.getElementById('editor').addEventListener('editor-change', () => {
+  console.log('Editor content has changed');
+});
+```
+
+### Inline event handling
+
+You can also define event handlers directly in the view using the `oneditorchange`, `oneditorerror`, and `oneditorready` attributes.
+
+```erb
+<!-- app/views/demos/index.html.erb -->
+
+<script type="text/javascript">
+  function onEditorChange(event) {
+    // event.detail.editor, event.detail.data
+  }
+
+  function onEditorError(event) {
+    // event.detail.editor
+  }
+
+  function onEditorReady(event) {
+    // event.detail.editor
+  }
+</script>
+
+<%= ckeditor5_editor style: 'width: 600px', id: 'editor', oneditorchange: 'onEditorChange', oneditorerror: 'onEditorError', oneditorready: 'onEditorReady' %>
+```
+
 ## Trademarks 📜
 
 CKEditor® is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com/) All rights reserved. For more information about the license of CKEditor® please visit [CKEditor's licensing page](https://ckeditor.com/legal/ckeditor-oss-license/).
@@ -1288,6 +1325,6 @@ This gem is not owned by CKSource and does not use the CKEditor® trademark for
 
 ## License 📜
 
-This project is licensed under the terms of the [GNU General Public License v2.0](https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html). See the [LICENSE](LICENSE) file for details.
+This project is licensed under the terms of the [GNU General Public License v2.0 or later](https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html). See the [LICENSE](LICENSE) file for details.
 
-This project uses CKEditor 5 which is licensed under the terms of [GNU General Public License Version 2](https://www.gnu.org/licenses/old-licenses/gpl-2.0.html). For more information about CKEditor 5 licensing, please see their [official documentation](https://ckeditor.com/legal/ckeditor-oss-license/).
+This project uses CKEditor 5 which is licensed under the terms of [GNU General Public License Version 2 or later](https://www.gnu.org/licenses/old-licenses/gpl-2.0.html). For more information about CKEditor 5 licensing, please see their [official documentation](https://ckeditor.com/legal/ckeditor-oss-license/).

data/lib/ckeditor5/rails/assets/assets_bundle_html_serializer.rb

@@ -3,9 +3,9 @@
 require 'uri'
 require 'action_view'
 
-module CKEditor5::Rails::Assets
-  WEBCOMPONENT_SOURCE = File.read(File.join(__dir__, 'webcomponent.mjs')).html_safe
+require_relative 'webcomponent_bundle'
 
+module CKEditor5::Rails::Assets
   class AssetsBundleHtmlSerializer
     include ActionView::Helpers::TagHelper
 
@@ -38,7 +38,7 @@ module CKEditor5::Rails::Assets
     private
 
     def web_component_tag
-      @web_component_tag ||= tag.script(WEBCOMPONENT_SOURCE, type: 'module', nonce: true)
+      @web_component_tag ||= tag.script(WebComponentBundle.source, type: 'module', nonce: true)
     end
 
     def window_scripts_tags

data/lib/ckeditor5/rails/assets/webcomponent_bundle.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module CKEditor5::Rails::Assets
+  module WebComponentBundle
+    WEBCOMPONENTS_PATH = File.join(__dir__, 'webcomponents')
+    WEBCOMPONENTS_MODULES = [
+      'utils.mjs',
+      'components/editable.mjs',
+      'components/ui-part.mjs',
+      'components/editor.mjs',
+      'components/context.mjs'
+    ].freeze
+
+    module_function
+
+    def source
+      @source ||= WEBCOMPONENTS_MODULES.map do |file|
+        File.read(File.join(WEBCOMPONENTS_PATH, file))
+      end.join("\n").html_safe
+    end
+  end
+end

data/lib/ckeditor5/rails/assets/webcomponents/components/context.mjs

@@ -0,0 +1,113 @@
+class CKEditorContextComponent extends HTMLElement {
+  static get observedAttributes() {
+    return ['plugins', 'config'];
+  }
+
+  /** @type {import('ckeditor5').Context|null} */
+  instance = null;
+
+  /** @type {Promise<import('ckeditor5').Context>} */
+  instancePromise = Promise.withResolvers();
+
+  /** @type {Set<CKEditorComponent>} */
+  #connectedEditors = new Set();
+
+  async connectedCallback() {
+    try {
+      execIfDOMReady(() => this.#initializeContext());
+    } catch (error) {
+      console.error('Failed to initialize context:', error);
+      this.dispatchEvent(new CustomEvent('context-error', { detail: error }));
+    }
+  }
+
+  async attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== null && oldValue !== newValue) {
+      await this.#initializeContext();
+    }
+  }
+
+  async disconnectedCallback() {
+    if (this.instance) {
+      await this.instance.destroy();
+      this.instance = null;
+    }
+  }
+
+  /**
+   * Register editor component with this context
+   *
+   * @param {CKEditorComponent} editor
+   */
+  registerEditor(editor) {
+    this.#connectedEditors.add(editor);
+  }
+
+  /**
+   * Unregister editor component from this context
+   *
+   * @param {CKEditorComponent} editor
+   */
+  unregisterEditor(editor) {
+    this.#connectedEditors.delete(editor);
+  }
+
+  /**
+   * Initialize CKEditor context with shared configuration
+   *
+   * @private
+   */
+  async #initializeContext() {
+    if (this.instance) {
+      this.instancePromise = Promise.withResolvers();
+
+      await this.instance.destroy();
+
+      this.instance = null;
+    }
+
+    const { Context, ContextWatchdog } = await import('ckeditor5');
+    const plugins = await this.#getPlugins();
+    const config = this.#getConfig();
+
+    this.instance = new ContextWatchdog(Context, {
+      crashNumberLimit: 10
+    });
+
+    await this.instance.create({
+      ...config,
+      plugins
+    });
+
+    this.instance.on('itemError', (...args) => {
+      console.error('Context item error:', ...args);
+    });
+
+    this.instancePromise.resolve(this.instance);
+    this.dispatchEvent(new CustomEvent('context-ready', { detail: this.instance }));
+
+    // Reinitialize connected editors.
+    await Promise.all(
+      [...this.#connectedEditors].map(editor => editor.reinitializeEditor())
+    );
+  }
+
+  async #getPlugins() {
+    const raw = this.getAttribute('plugins');
+
+    return loadAsyncImports(raw ? JSON.parse(raw) : []);
+  }
+
+  /**
+   * Gets context configuration with resolved element references.
+   *
+   * @private
+   */
+  #getConfig() {
+    const config = JSON.parse(this.getAttribute('config') || '{}');
+
+    return resolveElementReferences(config);
+  }
+}
+
+customElements.define('ckeditor-context-component', CKEditorContextComponent);

data/lib/ckeditor5/rails/assets/webcomponents/components/editable.mjs

@@ -0,0 +1,113 @@
+class CKEditorEditableComponent extends HTMLElement {
+  /**
+   * List of attributes that trigger updates when changed
+   *
+   * @static
+   * @returns {string[]} Array of attribute names to observe
+   */
+  static get observedAttributes() {
+    return ['name'];
+  }
+
+  /**
+   * Gets the name of this editable region
+   *
+   * @returns {string} The name attribute value
+   */
+  get name() {
+    // The default value is set mainly for decoupled editors where the name is not required.
+    return this.getAttribute('name') || 'editable';
+  }
+
+  /**
+   * Gets the actual editable DOM element
+   * @returns {HTMLDivElement|null} The div element containing editable content
+   */
+  get editableElement() {
+    return this.querySelector('div');
+  }
+
+  /**
+   * Lifecycle callback when element is added to DOM
+   * Sets up the editable element and registers it with the parent editor
+   *
+   * @throws {Error} If not used as child of ckeditor-component
+   */
+  connectedCallback() {
+    execIfDOMReady(() => {
+      const editorComponent = this.#queryEditorElement();
+
+      if (!editorComponent ) {
+        throw new Error('ckeditor-editable-component must be a child of ckeditor-component');
+      }
+
+      this.innerHTML = `<div>${this.innerHTML}</div>`;
+      this.style.display = 'block';
+
+      if (editorComponent.isDecoupled()) {
+        editorComponent.runAfterEditorReady(editor => {
+          this.appendChild(editor.ui.view[this.name].element);
+        });
+      } else {
+        if (!this.name) {
+          throw new Error('Editable component missing required "name" attribute');
+        }
+
+        editorComponent.editables[this.name] = this;
+      }
+    });
+  }
+
+  /**
+   * Lifecycle callback for attribute changes
+   * Handles name changes and propagates other attributes to editable element
+   *
+   * @param {string} name - Name of changed attribute
+   * @param {string|null} oldValue - Previous value
+   * @param {string|null} newValue - New value
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) {
+      return;
+    }
+
+    if (name === 'name') {
+      if (!oldValue) {
+        return;
+      }
+
+      const editorComponent = this.#queryEditorElement();
+
+      if (editorComponent) {
+        editorComponent.editables[newValue] = editorComponent.editables[oldValue];
+        delete editorComponent.editables[oldValue];
+      }
+    } else {
+      this.editableElement.setAttribute(name, newValue);
+    }
+  }
+
+  /**
+   * Lifecycle callback when element is removed
+   * Un-registers this editable from the parent editor
+   */
+  disconnectedCallback() {
+    const editorComponent = this.#queryEditorElement();
+
+    if (editorComponent) {
+      delete editorComponent.editables[this.name];
+    }
+  }
+
+  /**
+   * Finds the parent editor component
+   *
+   * @private
+   * @returns {CKEditorComponent|null} Parent editor component or null if not found
+   */
+  #queryEditorElement() {
+    return this.closest('ckeditor-component') || document.body.querySelector('ckeditor-component');
+  }
+}
+
+customElements.define('ckeditor-editable-component', CKEditorEditableComponent);

data/lib/ckeditor5/rails/assets/{webcomponent.mjs → webcomponents/components/editor.mjs}

@@ -1,26 +1,3 @@
-/**
- * Custom web component for integrating CKEditor 5 into web applications.
- *
- * @class
- * @extends HTMLElement
- *
- * @property {import('ckeditor5').Editor|null} instance - The current CKEditor instance
- * @property {Record<string, HTMLElement>} editables - Object containing editable elements
- *
- * @fires editor-ready - Fired when editor is initialized with the editor instance as detail
- * @fires editor-error - Fired when initialization fails with the error as detail
- *
- * @example
- * // Basic usage with Classic Editor
- * <ckeditor-component type="ClassicEditor" config='{"toolbar": ["bold", "italic"]}'>
- * </ckeditor-component>
- *
- * // Multiroot editor with multiple editables
- * <ckeditor-component type="MultirootEditor">
- *   <ckeditor-editable-component name="title">Title content</ckeditor-editable-component>
- *   <ckeditor-editable-component name="content">Main content</ckeditor-editable-component>
- * </ckeditor-component>
- */
 class CKEditorComponent extends HTMLElement {
   /**
    * List of attributes that trigger updates when changed.
@@ -63,6 +40,69 @@ class CKEditorComponent extends HTMLElement {
   /** @type {String} ID of editor within context */
   #contextEditorId = null;
 
+  /** @type {(event: CustomEvent) => void} Event handler for editor change */
+  get oneditorchange() {
+    return this.#getEventHandler('editorchange');
+  }
+
+  set oneditorchange(handler) {
+    this.#setEventHandler('editorchange', handler);
+  }
+
+  /** @type {(event: CustomEvent) => void} Event handler for editor ready */
+  get oneditorready() {
+    return this.#getEventHandler('editorready');
+  }
+
+  set oneditorready(handler) {
+    this.#setEventHandler('editorready', handler);
+  }
+
+  /** @type {(event: CustomEvent) => void} Event handler for editor error */
+  get oneditorerror() {
+    return this.#getEventHandler('editorerror');
+  }
+
+  set oneditorerror(handler) {
+    this.#setEventHandler('editorerror', handler);
+  }
+
+  /**
+   * Gets event handler function from attribute or property
+   *
+   * @private
+   * @param {string} name - Event name without 'on' prefix
+   * @returns {Function|null} Event handler or null
+   */
+  #getEventHandler(name) {
+    if (this.hasAttribute(`on${name}`)) {
+      const handler = this.getAttribute(`on${name}`);
+
+      if (!isSafeKey(handler)) {
+        throw new Error(`Unsafe event handler attribute value: ${handler}`);
+      }
+
+      return window[handler] || new Function('event', handler);
+    }
+    return this[`#${name}Handler`];
+  }
+
+  /**
+   * Sets event handler function
+   *
+   * @private
+   * @param {string} name - Event name without 'on' prefix
+   * @param {Function|string|null} handler - Event handler
+   */
+  #setEventHandler(name, handler) {
+    if (typeof handler === 'string') {
+      this.setAttribute(`on${name}`, handler);
+    } else {
+      this.removeAttribute(`on${name}`);
+      this[`#${name}Handler`] = handler;
+    }
+  }
+
   /**
    * Lifecycle callback when element is connected to DOM
    * Initializes the editor when DOM is ready
@@ -83,7 +123,11 @@ class CKEditorComponent extends HTMLElement {
       });
     } catch (error) {
       console.error('Failed to initialize editor:', error);
-      this.dispatchEvent(new CustomEvent('editor-error', { detail: error }));
+
+      const event = new CustomEvent('editor-error', { detail: error });
+
+      this.dispatchEvent(event);
+      this.oneditorerror?.(event);
     }
   }
 
@@ -250,8 +294,6 @@ class CKEditorComponent extends HTMLElement {
       instance = await Editor.create(content, config);
     }
 
-    this.dispatchEvent(new CustomEvent('editor-ready', { detail: instance }));
-
     return {
       contextId,
       instance,
@@ -299,14 +341,50 @@ class CKEditorComponent extends HTMLElement {
 
       this.#setupContentSync();
       this.#setupEditableHeight();
+      this.#setupDataChangeListener();
 
       this.instancePromise.resolve(this.instance);
+
+      // Broadcast editor ready event
+      const event = new CustomEvent('editor-ready', { detail: this.instance });
+
+      this.dispatchEvent(event);
+      this.oneditorready?.(event);
     } catch (err) {
       this.instancePromise.reject(err);
       throw err;
     }
   }
 
+  /**
+   * Sets up data change listener that broadcasts content changes
+   *
+   * @private
+   */
+  #setupDataChangeListener() {
+    const getRootContent = rootName => this.instance.getData({ rootName });
+    const getAllRoots = () =>
+      this.instance.model.document
+        .getRootNames()
+        .reduce((acc, rootName) => ({
+          ...acc,
+          [rootName]: getRootContent(rootName)
+        }), {});
+
+    this.instance?.model.document.on('change:data', () => {
+      const event = new CustomEvent('editor-change', {
+        detail: {
+          editor: this.instance,
+          data: getAllRoots(),
+        },
+        bubbles: true
+      });
+
+      this.dispatchEvent(event);
+      this.oneditorchange?.(event);
+    });
+  }
+
   /**
    * Checks if current editor is classic type
    *
@@ -515,138 +593,6 @@ class CKEditorComponent extends HTMLElement {
   }
 }
 
-/**
- * Custom element that provides shared CKEditor context for multiple editors.
- *
- * @extends HTMLElement
- * @example
- *
- * <ckeditor-context-component plugins='[ ... ]'>
- *  <ckeditor-component type="ClassicEditor" config='{"toolbar": ["bold", "italic"]}'>
- *  <ckeditor-component type="ClassicEditor" config='{"toolbar": ["bold", "italic"]}'>
- * </ckeditor-component>
- */
-class CKEditorContextComponent extends HTMLElement {
-  static get observedAttributes() {
-    return ['plugins', 'config'];
-  }
-
-  /** @type {import('ckeditor5').Context|null} */
-  instance = null;
-
-  /** @type {Promise<import('ckeditor5').Context>} */
-  instancePromise = Promise.withResolvers();
-
-  /** @type {Set<CKEditorComponent>} */
-  #connectedEditors = new Set();
-
-  async connectedCallback() {
-    try {
-      execIfDOMReady(() => this.#initializeContext());
-    } catch (error) {
-      console.error('Failed to initialize context:', error);
-      this.dispatchEvent(new CustomEvent('context-error', { detail: error }));
-    }
-  }
-
-  async attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue !== null && oldValue !== newValue) {
-      await this.#initializeContext();
-    }
-  }
-
-  async disconnectedCallback() {
-    if (this.instance) {
-      await this.instance.destroy();
-      this.instance = null;
-    }
-  }
-
-  /**
-   * Register editor component with this context
-   *
-   * @param {CKEditorComponent} editor
-   */
-  registerEditor(editor) {
-    this.#connectedEditors.add(editor);
-  }
-
-  /**
-   * Unregister editor component from this context
-   *
-   * @param {CKEditorComponent} editor
-   */
-  unregisterEditor(editor) {
-    this.#connectedEditors.delete(editor);
-  }
-
-  /**
-   * Initialize CKEditor context with shared configuration
-   *
-   * @private
-   */
-  async #initializeContext() {
-    if (this.instance) {
-      this.instancePromise = Promise.withResolvers();
-
-      await this.instance.destroy();
-
-      this.instance = null;
-    }
-
-    const { Context, ContextWatchdog } = await import('ckeditor5');
-    const plugins = await this.#getPlugins();
-    const config = this.#getConfig();
-
-    this.instance = new ContextWatchdog(Context, {
-      crashNumberLimit: 10
-    });
-
-    await this.instance.create({
-      ...config,
-      plugins
-    });
-
-    this.instance.on('itemError', (...args) => {
-      console.error('Context item error:', ...args);
-    });
-
-    this.instancePromise.resolve(this.instance);
-    this.dispatchEvent(new CustomEvent('context-ready', { detail: this.instance }));
-
-    // Reinitialize connected editors.
-    await Promise.all(
-      [...this.#connectedEditors].map(editor => editor.reinitializeEditor())
-    );
-  }
-
-  async #getPlugins() {
-    const raw = this.getAttribute('plugins');
-
-    return loadAsyncImports(raw ? JSON.parse(raw) : []);
-  }
-
-  /**
-   * Gets context configuration with resolved element references.
-   *
-   * @private
-   */
-  #getConfig() {
-    const config = JSON.parse(this.getAttribute('config') || '{}');
-
-    return resolveElementReferences(config);
-  }
-}
-
-/**
- * Tracks and manages editable roots for CKEditor MultiRoot editor.
- * Provides a proxy-based API for dynamically managing editable elements with automatic
- * attachment/detachment of editor roots.
- *
- * @class
- * @property {CKEditorComponent} #editorElement - Reference to parent editor component
- * @property {Record<string, HTMLElement>} #editables - Map of tracked editable elements
- */
 class CKEditorMultiRootEditablesTracker {
   #editorElement;
   #editables;
@@ -765,325 +711,4 @@ class CKEditorMultiRootEditablesTracker {
   }
 }
 
-/**
- * Custom HTML element representing an editable region for CKEditor.
- * Must be used as a child of ckeditor-component element.
- *
- * @customElement ckeditor-editable-component
- * @extends HTMLElement
- *
- * @property {string} name - The name of the editable region, accessed via getAttribute
- * @property {HTMLDivElement} editableElement - The div element containing editable content
- *
- * @fires connectedCallback - When the element is added to the DOM
- * @fires attributeChangedCallback - When element attributes change
- * @fires disconnectedCallback - When the element is removed from the DOM
- *
- * @throws {Error} Throws error if not used as child of ckeditor-component
- *
- * @example
- * <ckeditor-component>
- *   <ckeditor-editable-component name="main">
- *     Content goes here
- *   </ckeditor-editable-component>
- * </ckeditor-component>
- */
-class CKEditorEditableComponent extends HTMLElement {
-  /**
-   * List of attributes that trigger updates when changed
-   *
-   * @static
-   * @returns {string[]} Array of attribute names to observe
-   */
-  static get observedAttributes() {
-    return ['name'];
-  }
-
-  /**
-   * Gets the name of this editable region
-   *
-   * @returns {string} The name attribute value
-   */
-  get name() {
-    // The default value is set mainly for decoupled editors where the name is not required.
-    return this.getAttribute('name') || 'editable';
-  }
-
-  /**
-   * Gets the actual editable DOM element
-   * @returns {HTMLDivElement|null} The div element containing editable content
-   */
-  get editableElement() {
-    return this.querySelector('div');
-  }
-
-  /**
-   * Lifecycle callback when element is added to DOM
-   * Sets up the editable element and registers it with the parent editor
-   *
-   * @throws {Error} If not used as child of ckeditor-component
-   */
-  connectedCallback() {
-    execIfDOMReady(() => {
-      const editorComponent = this.#queryEditorElement();
-
-      if (!editorComponent ) {
-        throw new Error('ckeditor-editable-component must be a child of ckeditor-component');
-      }
-
-      this.innerHTML = `<div>${this.innerHTML}</div>`;
-      this.style.display = 'block';
-
-      if (editorComponent.isDecoupled()) {
-        editorComponent.runAfterEditorReady(editor => {
-          this.appendChild(editor.ui.view[this.name].element);
-        });
-      } else {
-        if (!this.name) {
-          throw new Error('Editable component missing required "name" attribute');
-        }
-
-        editorComponent.editables[this.name] = this;
-      }
-    });
-  }
-
-  /**
-   * Lifecycle callback for attribute changes
-   * Handles name changes and propagates other attributes to editable element
-   *
-   * @param {string} name - Name of changed attribute
-   * @param {string|null} oldValue - Previous value
-   * @param {string|null} newValue - New value
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue === newValue) {
-      return;
-    }
-
-    if (name === 'name') {
-      if (!oldValue) {
-        return;
-      }
-
-      const editorComponent = this.#queryEditorElement();
-
-      if (editorComponent) {
-        editorComponent.editables[newValue] = editorComponent.editables[oldValue];
-        delete editorComponent.editables[oldValue];
-      }
-    } else {
-      this.editableElement.setAttribute(name, newValue);
-    }
-  }
-
-  /**
-   * Lifecycle callback when element is removed
-   * Un-registers this editable from the parent editor
-   */
-  disconnectedCallback() {
-    const editorComponent = this.#queryEditorElement();
-
-    if (editorComponent) {
-      delete editorComponent.editables[this.name];
-    }
-  }
-
-  /**
-   * Finds the parent editor component
-   *
-   * @private
-   * @returns {CKEditorComponent|null} Parent editor component or null if not found
-   */
-  #queryEditorElement() {
-    return this.closest('ckeditor-component') || document.body.querySelector('ckeditor-component');
-  }
-}
-
-/**
- * Custom HTML element that represents a CKEditor UI part component.
- * It helpers with management of toolbar and other elements.
- *
- * @extends HTMLElement
- * @customElement ckeditor-ui-part-component
- * @example
- * <ckeditor-ui-part-component></ckeditor-ui-part-component>
- */
-class CKEditorUIPartComponent extends HTMLElement {
-  /**
-   * Lifecycle callback when element is added to DOM
-   * Adds the toolbar to the editor UI
-   */
-  connectedCallback() {
-    execIfDOMReady(async () => {
-      const uiPart = this.getAttribute('name');
-      const editor = await this.#queryEditorElement().instancePromise.promise;
-
-      this.appendChild(editor.ui.view[uiPart].element);
-    });
-  }
-
-  /**
-   * Finds the parent editor component
-   *
-   * @private
-   * @returns {CKEditorComponent|null} Parent editor component or null if not found
-   */
-  #queryEditorElement() {
-    return this.closest('ckeditor-component') || document.body.querySelector('ckeditor-component');
-  }
-}
-
-/**
- * Executes callback when DOM is ready
- *
- * @param {() => void} callback - Function to execute
- */
-function execIfDOMReady(callback) {
-  switch (document.readyState) {
-    case 'loading':
-      document.addEventListener('DOMContentLoaded', callback, { once: true });
-      break;
-
-    case 'interactive':
-    case 'complete':
-      setTimeout(callback, 0);
-      break;
-
-    default:
-      console.warn('Unexpected document.readyState:', document.readyState);
-      setTimeout(callback, 0);
-  }
-}
-
-/**
- * Dynamically imports modules based on configuration
- *
- * @param {Array<ImportConfig>} imports - Array of import configurations
- * @returns {Promise<Array<any>>} Loaded modules
- */
-function loadAsyncImports(imports = []) {
-  const loadInlinePlugin = async ({ name, code }) => {
-    const module = await import(`data:text/javascript,${encodeURIComponent(code)}`);
-
-    if (!module.default) {
-      throw new Error(`Inline plugin "${name}" must export a default class/function!`);
-    }
-
-    return module.default;
-  };
-
-  const loadExternalPlugin = async ({ import_name, import_as, window_name }) => {
-    if (window_name) {
-      if (!Object.prototype.hasOwnProperty.call(window, window_name)) {
-        throw new Error(
-          `Plugin window['${window_name}'] not found in global scope. ` +
-          'Please ensure the plugin is loaded before CKEditor initialization.'
-        );
-      }
-
-      return window[window_name];
-    }
-
-    const module = await import(import_name);
-    const imported = module[import_as || 'default'];
-
-    if (!imported) {
-      throw new Error(`Plugin "${import_as}" not found in the ESM module "${import_name}"!`);
-    }
-
-    return imported;
-  };
-
-  return Promise.all(imports.map(item => {
-    switch(item.type) {
-      case 'inline':
-        return loadInlinePlugin(item);
-
-      case 'external':
-      default:
-        return loadExternalPlugin(item);
-    }
-  }));
-}
-
-
-/**
- * Checks if a key is safe to use in configuration objects to prevent prototype pollution.
- *
- * @param {string} key - Key name to check
- * @returns {boolean} True if key is safe to use.
- */
-function isSafeKey(key) {
-  return typeof key === 'string' &&
-          key !== '__proto__' &&
-          key !== 'constructor' &&
-          key !== 'prototype';
-}
-
-/**
- * Resolves element references in configuration object.
- * Looks for objects with { $element: "selector" } format and replaces them with actual elements.
- *
- * @param {Object} obj - Configuration object to process
- * @returns {Object} Processed configuration object with resolved element references
- */
-function resolveElementReferences(obj) {
-  if (!obj || typeof obj !== 'object') {
-    return obj;
-  }
-
-  if (Array.isArray(obj)) {
-    return obj.map(item => resolveElementReferences(item));
-  }
-
-  const result = Object.create(null);
-
-  for (const key of Object.getOwnPropertyNames(obj)) {
-    if (!isSafeKey(key)) {
-      console.warn(`Suspicious key "${key}" detected in config, skipping`);
-      continue;
-    }
-
-    const value = obj[key];
-
-    if (value && typeof value === 'object') {
-      if (value.$element) {
-        const selector = value.$element;
-
-        if (typeof selector !== 'string') {
-          console.warn(`Invalid selector type for "${key}", expected string`);
-          continue;
-        }
-
-        const element = document.querySelector(selector);
-
-        if (!element) {
-          console.warn(`Element not found for selector: ${selector}`);
-        }
-
-        result[key] = element || null;
-      } else {
-        result[key] = resolveElementReferences(value);
-      }
-    } else {
-      result[key] = value;
-    }
-  }
-
-  return result;
-}
-
-/**
- * Custom element that provides shared CKEditor context for multiple editors.
- *
- * @returns {String} unique id
- */
-function uid() {
-  return Math.random().toString(36).substring(2);
-}
-
 customElements.define('ckeditor-component', CKEditorComponent);
-customElements.define('ckeditor-editable-component', CKEditorEditableComponent);
-customElements.define('ckeditor-ui-part-component', CKEditorUIPartComponent);
-customElements.define('ckeditor-context-component', CKEditorContextComponent);

data/lib/ckeditor5/rails/assets/webcomponents/components/ui-part.mjs

@@ -0,0 +1,26 @@
+class CKEditorUIPartComponent extends HTMLElement {
+  /**
+   * Lifecycle callback when element is added to DOM
+   * Adds the toolbar to the editor UI
+   */
+  connectedCallback() {
+    execIfDOMReady(async () => {
+      const uiPart = this.getAttribute('name');
+      const editor = await this.#queryEditorElement().instancePromise.promise;
+
+      this.appendChild(editor.ui.view[uiPart].element);
+    });
+  }
+
+  /**
+   * Finds the parent editor component
+   *
+   * @private
+   * @returns {CKEditorComponent|null} Parent editor component or null if not found
+   */
+  #queryEditorElement() {
+    return this.closest('ckeditor-component') || document.body.querySelector('ckeditor-component');
+  }
+}
+
+customElements.define('ckeditor-ui-part-component', CKEditorUIPartComponent);

data/lib/ckeditor5/rails/assets/webcomponents/utils.mjs

@@ -0,0 +1,155 @@
+/**
+ * Executes callback when DOM is ready
+ *
+ * @param {() => void} callback - Function to execute when DOM is ready
+ */
+function execIfDOMReady(callback) {
+  switch (document.readyState) {
+    case 'loading':
+      document.addEventListener('DOMContentLoaded', callback, { once: true });
+      break;
+
+    case 'interactive':
+    case 'complete':
+      setTimeout(callback, 0);
+      break;
+
+    default:
+      console.warn('Unexpected document.readyState:', document.readyState);
+      setTimeout(callback, 0);
+  }
+}
+
+/**
+ * Dynamically imports modules based on configuration
+ *
+ * @param {Array<Object>} imports - Array of import configurations
+ * @param {Object} imports[].name - Name of inline plugin (for inline type)
+ * @param {Object} imports[].code - Source code of inline plugin (for inline type)
+ * @param {Object} imports[].import_name - Module path to import (for external type)
+ * @param {Object} imports[].import_as - Name to import as (for external type)
+ * @param {Object} imports[].window_name - Global window object name (for external type)
+ * @param {('inline'|'external')} imports[].type - Type of import
+ * @returns {Promise<Array<any>>} Array of loaded modules
+ * @throws {Error} When plugin loading fails
+ */
+function loadAsyncImports(imports = []) {
+  const loadInlinePlugin = async ({ name, code }) => {
+    const module = await import(`data:text/javascript,${encodeURIComponent(code)}`);
+
+    if (!module.default) {
+      throw new Error(`Inline plugin "${name}" must export a default class/function!`);
+    }
+
+    return module.default;
+  };
+
+  const loadExternalPlugin = async ({ import_name, import_as, window_name }) => {
+    if (window_name) {
+      if (!Object.prototype.hasOwnProperty.call(window, window_name)) {
+        throw new Error(
+          `Plugin window['${window_name}'] not found in global scope. ` +
+          'Please ensure the plugin is loaded before CKEditor initialization.'
+        );
+      }
+
+      return window[window_name];
+    }
+
+    const module = await import(import_name);
+    const imported = module[import_as || 'default'];
+
+    if (!imported) {
+      throw new Error(`Plugin "${import_as}" not found in the ESM module "${import_name}"!`);
+    }
+
+    return imported;
+  };
+
+  return Promise.all(imports.map(item => {
+    switch(item.type) {
+      case 'inline':
+        return loadInlinePlugin(item);
+
+      case 'external':
+      default:
+        return loadExternalPlugin(item);
+    }
+  }));
+}
+
+/**
+ * Checks if a key is safe to use in configuration objects to prevent prototype pollution
+ *
+ * @param {string} key - Key name to check
+ * @returns {boolean} True if key is safe to use
+ */
+function isSafeKey(key) {
+  return typeof key === 'string' &&
+          key !== '__proto__' &&
+          key !== 'constructor' &&
+          key !== 'prototype';
+}
+
+/**
+ * Resolves element references in configuration object.
+ * Looks for objects with { $element: "selector" } format and replaces them with actual DOM elements.
+ *
+ * @param {Object} obj - Configuration object to process
+ * @returns {Object} Processed configuration object with resolved element references
+ * @throws {Error} When element reference is invalid
+ */
+function resolveElementReferences(obj) {
+  if (!obj || typeof obj !== 'object') {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map(item => resolveElementReferences(item));
+  }
+
+  const result = Object.create(null);
+
+  for (const key of Object.getOwnPropertyNames(obj)) {
+    if (!isSafeKey(key)) {
+      console.warn(`Suspicious key "${key}" detected in config, skipping`);
+      continue;
+    }
+
+    const value = obj[key];
+
+    if (value && typeof value === 'object') {
+      if (value.$element) {
+        const selector = value.$element;
+
+        if (typeof selector !== 'string') {
+          console.warn(`Invalid selector type for "${key}", expected string`);
+          continue;
+        }
+
+        const element = document.querySelector(selector);
+
+        if (!element) {
+          console.warn(`Element not found for selector: ${selector}`);
+        }
+
+        result[key] = element || null;
+      } else {
+        result[key] = resolveElementReferences(value);
+      }
+    } else {
+      result[key] = value;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Generates a unique identifier string
+ *
+ * @returns {string} Random string that can be used as unique identifier
+ */
+function uid() {
+  return Math.random().toString(36).substring(2);
+}

data/lib/ckeditor5/rails/cdn/helpers.rb

@@ -6,7 +6,7 @@ require_relative 'ckbox_bundle'
 
 module CKEditor5::Rails
   module Cdn::Helpers
-    def ckeditor5_cdn_assets(preset: :default, **kwargs)
+    def ckeditor5_assets(preset: :default, **kwargs)
       merge_with_editor_preset(preset, **kwargs) => {
         cdn:,
         version:,
@@ -32,15 +32,7 @@ module CKEditor5::Rails
 
     Cdn::UrlGenerator::CDN_THIRD_PARTY_GENERATORS.each_key do |key|
       define_method(:"ckeditor5_#{key.to_s.parameterize}_assets") do |**kwargs|
-        ckeditor5_cdn_assets(**kwargs.merge(cdn: key))
-      end
-    end
-
-    def ckeditor5_assets(**kwargs)
-      if kwargs[:license_key] && kwargs[:license_key] != 'GPL'
-        ckeditor5_cloud_assets(**kwargs)
-      else
-        ckeditor5_cdn_assets(**kwargs.merge(cdn: Engine.default_preset.cdn))
+        ckeditor5_assets(**kwargs.merge(cdn: key))
       end
     end
 
@@ -62,7 +54,7 @@ module CKEditor5::Rails
 
         raise ArgumentError,
               "Poor thing. You forgot to define #{key}. Make sure you passed `#{key}:` parameter to " \
-              "`ckeditor5_cdn_assets` or defined default one in your `#{preset}` preset!"
+              "`ckeditor5_assets` or defined default one in your `#{preset}` preset!"
       end
 
       hash

data/lib/ckeditor5/rails/helpers.rb

@@ -1,14 +1,12 @@
 # frozen_string_literal: true
 
 require_relative 'cdn/helpers'
-require_relative 'cloud/helpers'
 require_relative 'editor/helpers'
 require_relative 'context/helpers'
 
 module CKEditor5::Rails
   module Helpers
     include Cdn::Helpers
-    include Cloud::Helpers
     include Editor::Helpers
     include Context::Helpers
   end

data/lib/ckeditor5/rails/presets/preset_builder.rb

@@ -22,6 +22,18 @@ module CKEditor5::Rails
         }
       end
 
+      def premium?
+        @premium
+      end
+
+      def gpl?
+        license_key == 'GPL'
+      end
+
+      def menubar?
+        @config.dig(:menuBar, :isVisible) || false
+      end
+
       def to_h_with_overrides(**overrides)
         {
           version: overrides.fetch(:version, version),
@@ -51,6 +63,8 @@ module CKEditor5::Rails
         return @license_key if license_key.nil?
 
         @license_key = license_key
+
+        cdn(:cloud) unless gpl?
       end
 
       def gpl
@@ -134,7 +148,9 @@ module CKEditor5::Rails
         names.each { |name| plugin(name, **kwargs) }
       end
 
-      def language(ui, content: ui) # rubocop:disable Naming/MethodParameterName
+      def language(ui = nil, content: ui) # rubocop:disable Naming/MethodParameterName
+        return @config[:language] if ui.nil?
+
         @config[:language] = {
           ui: ui,
           content: content

data/lib/ckeditor5/rails/version.rb

@@ -2,6 +2,6 @@
 
 module CKEditor5
   module Rails
-    VERSION = '1.9.0'
+    VERSION = '1.10.0'
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ckeditor5
 version: !ruby/object:Gem::Version
-  version: 1.9.0
+  version: 1.10.0
 platform: ruby
 authors:
 - Mateusz Bagiński
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-11-14 00:00:00.000000000 Z
+date: 2024-11-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -45,12 +45,16 @@ files:
 - lib/ckeditor5/rails.rb
 - lib/ckeditor5/rails/assets/assets_bundle.rb
 - lib/ckeditor5/rails/assets/assets_bundle_html_serializer.rb
-- lib/ckeditor5/rails/assets/webcomponent.mjs
+- lib/ckeditor5/rails/assets/webcomponent_bundle.rb
+- lib/ckeditor5/rails/assets/webcomponents/components/context.mjs
+- lib/ckeditor5/rails/assets/webcomponents/components/editable.mjs
+- lib/ckeditor5/rails/assets/webcomponents/components/editor.mjs
+- lib/ckeditor5/rails/assets/webcomponents/components/ui-part.mjs
+- lib/ckeditor5/rails/assets/webcomponents/utils.mjs
 - lib/ckeditor5/rails/cdn/ckbox_bundle.rb
 - lib/ckeditor5/rails/cdn/ckeditor_bundle.rb
 - lib/ckeditor5/rails/cdn/helpers.rb
 - lib/ckeditor5/rails/cdn/url_generator.rb
-- lib/ckeditor5/rails/cloud/helpers.rb
 - lib/ckeditor5/rails/context/helpers.rb
 - lib/ckeditor5/rails/context/props.rb
 - lib/ckeditor5/rails/editor/config_helpers.rb

data/lib/ckeditor5/rails/cloud/helpers.rb

@@ -1,13 +0,0 @@
-# frozen_string_literal: true
-
-module CKEditor5::Rails
-  module Cloud
-    module Helpers
-      def ckeditor5_cloud_assets(license_key:, **kwargs)
-        raise 'Cloud assets are not permitted in GPL license!' if license_key == 'GPL'
-
-        ckeditor5_cdn_assets(cdn: :cloud, license_key: license_key, **kwargs)
-      end
-    end
-  end
-end