RubyGems - ckeditor5 - Versions diffs - 1.35.1 → 1.82.3 - Mend

ckeditor5 1.35.1 → 1.82.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of ckeditor5 might be problematic. Click here for more details.

Files changed (83) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 384ec0fadd3143749a408679b80aea46b61c8a8740fb06f2e6b24344f8929626
-  data.tar.gz: edc8fb8ddc4e675638edc023ed9a9327d2c931f5c92010b102c5264c2e11aa12
+  metadata.gz: 96d36dda0de7c2996cd72c8299310ec4c125b9dc116eaa0905b6315d7163ef5d
+  data.tar.gz: 662863639b11c95b324541e600762a6c020579d0cd5f1897bf490aa42af54bf8
 SHA512:
-  metadata.gz: b5518fa67e4c9fc81d63f477a425b2e8d1479f35966bd053eac26f352f12323f730e40e7274b02f981f6161e80787befe5e6000c1473c4c02f203ffd9255c87b
-  data.tar.gz: 70719e1470023116b6714b3c386de48463c8b776ced330599d13feb5e79365c89fdbe810f3dbdd756786f052c8ae1b65267e8959c0d3ffda25410916cdcb79ec
+  metadata.gz: 0a93e0c0f088e10b267d4eb5938a5a0d71589a00d2257f8d472f28ebe18f732c0eb926ee0b8331c8cdaff8f14411f46795697683394cbc180ee34367c21aa852
+  data.tar.gz: 67c6218db4f5642a2fa3be5101fe11b1f4a4f47d1dbed601e964231d7037f3cf60a6adb7d982d36e56dff2f76f0c50dd9b165efe5040cb9b7926f3a8e8bf9b37

data/README.md CHANGED Viewed

@@ -1,7 +1,6 @@
 # CKEditor 5 Rails Integration ✨
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)](LICENSE)
-![NPM Version](https://img.shields.io/npm/v/ckeditor5-rails?style=flat-square)
 [![Gem Version](https://img.shields.io/gem/v/ckeditor5?style=flat-square)](https://rubygems.org/gems/ckeditor5)
 [![Gem Total Downloads](https://img.shields.io/gem/dt/ckeditor5?style=flat-square&color=orange)](https://rubygems.org/gems/ckeditor5)
 [![Coverage](https://img.shields.io/codecov/c/github/mati365/ckeditor5-rails?style=flat-square)](https://codecov.io/gh/mati365/ckeditor5-rails)
@@ -11,12 +10,8 @@
 CKEditor 5 Ruby on Rails integration gem. Provides seamless integration of CKEditor 5 with Rails applications through web components and helper methods. This gem supports various editor types, including classic, inline, balloon, and decoupled editors. It also includes support for custom plugins, translations, and configuration options.
-**Requirements:**
-  * Ruby >= 2.5
-  * Rails >= 5.0
 > [!IMPORTANT]
-> This gem is unofficial and not maintained by CKSource. For official CKEditor 5 documentation, visit [ckeditor.com](https://ckeditor.com/docs/ckeditor5/latest/). If you encounter any issues in editor, please report them on the [GitHub repository](https://github.com/ckeditor/ckeditor5/issues).
+> This gem is unofficial and not maintained by CKSource. For official CKEditor 5 documentation, visit [ckeditor.com](https://ckeditor.com/docs/ckeditor5/latest/). If you encounter any issues in integration, please report them on the [GitHub repository](https://github.com/Mati365/ckeditor5-rails/issues).
 <p align="center">
   <img src="docs/intro-classic-editor.png" alt="CKEditor 5 Classic Editor in Ruby on Rails application">
@@ -46,12 +41,8 @@ In your layout:
       ⚠️ **Important**: When using `importmap-rails`, make sure the importmap
       tags are rendered after `ckeditor5_assets` helper. In this scenario,
       content is yielded before rendering `javascript_importmap_tags`.
-      If you are not using `importmap-rails`, you can ignore this note and just
-      include `ckeditor5_assets` helper in the head section of your layout (or using `content_for`).
     -->
     <!-- javascript_importmap_tags -->
     <%= yield :head %>
   </head>
   <body>
@@ -96,7 +87,7 @@ CKEditor5::Rails.configure do
   # Optionally, you can specify version of CKEditor 5 to use.
   # If it's not specified the default version specified in the gem will be used.
-  # version '47.6.0'
+  # version '44.3.0'
   # Upload images to the server using the simple upload adapter, instead of Base64 encoding.
   # simple_upload_adapter
@@ -110,31 +101,6 @@ end
 Voilà! You have CKEditor 5 integrated with your Rails application. 🎉
-### If you are not using importmap (custom bundler) 📦
-If your app uses a custom JS bundler (for example Vite, esbuild, or Webpack), install the npm packages and import the integration in your JavaScript bundle.
-```bash
-npm install ckeditor5-rails ckeditor5
-```
-```js
-// app/javascript/application.js (or your main bundle entry)
-import 'ckeditor5-rails';
-import 'ckeditor5/ckeditor5.css';
-```
-If you use premium features, also install `ckeditor5-premium-features` and import its CSS.
-```bash
-npm install ckeditor5-premium-features
-```
-```js
-import 'ckeditor5-premium-features/ckeditor5-premium-features.css';
-```
 ## Try Demos! 🎮 ✨
 Explore various editor configurations with the interactive [demo application](https://github.com/Mati365/ckeditor5-rails/tree/main/sandbox/app/views/demos). For additional inspiration, visit the official CKEditor 5 [examples](https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html).
@@ -154,7 +120,6 @@ For extending CKEditor's functionality, refer to the [plugins directory](https:/
 - [CKEditor 5 Rails Integration ✨](#ckeditor-5-rails-integration-)
   - [Installation 🛠️](#installation-️)
-    - [If you are not using importmap (custom bundler) 📦](#if-you-are-not-using-importmap-custom-bundler-)
   - [Try Demos! 🎮 ✨](#try-demos--)
   - [Table of Contents 📚](#table-of-contents-)
   - [Presets 🎨](#presets-)
@@ -181,12 +146,10 @@ For extending CKEditor's functionality, refer to the [plugins directory](https:/
       - [`inline_plugin(name, code)` method](#inline_pluginname-code-method)
       - [`external_plugin(name, script:, import_as: nil, window_name: nil, stylesheets: [])` method](#external_pluginname-script-import_as-nil-window_name-nil-stylesheets--method)
       - [`patch_plugin(plugin)`](#patch_pluginplugin)
-      - [`apply_integration_patches(compress: false)` method](#apply_integration_patchescompress-false-method)
-      - [`simple_upload_adapter(url, compress: true)` method](#simple_upload_adapterurl-compress-true-method)
-      - [`special_characters(compress: true, &block)` method](#special_characterscompress-true-block-method)
-      - [`wproofreader(version: nil, cdn: nil, compress: true, **config)` method](#wproofreaderversion-nil-cdn-nil-compress-true-config-method)
-      - [`custom_translations(lang_code = nil, translations = {}, compress: true)` method](#custom_translationslang_code--nil-translations---compress-true-method)
-      - [`compression(enabled: true)` method](#compressionenabled-true-method)
+      - [`simple_upload_adapter(url)` method](#simple_upload_adapterurl-method)
+      - [`special_characters(&block)` method](#special_charactersblock-method)
+      - [`wproofreader(version: nil, cdn: nil, **config)` method](#wproofreaderversion-nil-cdn-nil-config-method)
+      - [`custom_translations(lang_code = nil, translations = {})` method](#custom_translationslang_code--nil-translations---method)
     - [Controller / View helpers 📦](#controller--view-helpers-)
       - [`ckeditor5_translation_ref(key)` method](#ckeditor5_translation_refkey-method)
       - [`ckeditor5_element_ref(selector)` method](#ckeditor5_element_refselector-method)
@@ -232,9 +195,7 @@ For extending CKEditor's functionality, refer to the [plugins directory](https:/
     - [`editor-change` event](#editor-change-event)
     - [Inline event handling](#inline-event-handling)
   - [Gem Development 🛠](#gem-development-)
-    - [Building NPM package 📦](#building-npm-package-)
     - [Running tests 🧪](#running-tests-)
-  - [Psst... 👀](#psst-)
   - [Trademarks 📜](#trademarks-)
   - [License 📜](#license-)
@@ -249,7 +210,7 @@ You can create your own by defining it in the `config/initializers/ckeditor5.rb`
 CKEditor5::Rails.configure do
   # It's possible to override the default preset right in the initializer.
-  version '47.6.0'
+  version '44.3.0'
   # New presets inherit properties from the default preset defined in the initializer.
   # In this example, the custom preset inherits everything from default but disables the menubar:
@@ -259,7 +220,7 @@ CKEditor5::Rails.configure do
   # In order to define preset from scratch, you can use the `inherit: false` option.
   presets.define :blank_preset, inherit: false do
-    version '47.6.0'
+    version '44.3.0'
     # It tells the integration to fetch the newest security patches and bug fixes.
     # It may be disabled, but it's highly recommended to keep it enabled to avoid
@@ -381,24 +342,10 @@ Defines the version of CKEditor 5 to be used. The example below shows how to set
 CKEditor5::Rails.configure do
   # ... other configuration
-  version '47.6.0'
+  version '44.3.0'
 end
 ```
-In order to disable default patches, you can pass the `apply_patches: false` keyword argument to the `version` method.
-```rb
-# config/initializers/ckeditor5.rb
-CKEditor5::Rails.configure do
-  # ... other configuration
-  version '47.6.0', apply_patches: false
-end
-```
-The patches are defined in the `lib/ckeditor5/rails/plugins/patches` directory. If you want to apply custom patches, you can use the `patch_plugin` method.
 </details>
 #### `automatic_upgrades(enabled: true)` method
@@ -765,9 +712,7 @@ It is useful when you want to use Balloon Editor or Balloon Toolbar features.
 <br />
-Defines the visibility of the menubar. By default, it's set to `true`. In order to hide the menubar, you can pass the `visible: false` keyword argument.
-The example below shows how to set the menubar visibility:
+Defines the visibility of the menubar. By default, it's set to `true`.
 ```rb
 # config/initializers/ckeditor5.rb
@@ -775,7 +720,9 @@ The example below shows how to set the menubar visibility:
 CKEditor5::Rails.configure do
   # ... other configuration
-  menubar visible: false
+  toolbar :undo, :redo, :|, :heading, :|, :bold, :italic, :underline, :|,
+          :link, :insertImage, :ckbox, :mediaEmbed, :insertTable, :blockQuote, :|,
+          :bulletedList, :numberedList, :todoList, :outdent, :indent
 end
 ```
 </details>
@@ -921,9 +868,7 @@ end
 <br />
-⚠️ **Warning:** Use with caution as this is an inline definition of the plugin code, and it can potentially cause XSS vulnerabilities. Only use this method with static, trusted JavaScript code. In order to pass some dynamic data to such plugin, you can use the `configure` method and override the selected preset in your controller.
-The example below shows how to define a custom plugin that doesn't do anything:
+⚠️ **Warning:** Use with caution as this is an inline definition of the plugin code, and it can potentially cause XSS vulnerabilities. Only use this method with static, trusted JavaScript code. The example below shows how to define a custom plugin that highlights the text:
 ```rb
 # config/initializers/ckeditor5.rb
@@ -1086,35 +1031,13 @@ class YourPatch < CKEditor5::Rails::Editor::PropsPatchPlugin
   def initialize
     super(:YourPatch, PLUGIN_CODE, min_version: nil, max_version: '45.0.0')
+    compress!
   end
 end
 ```
 </details>
-#### `apply_integration_patches(compress: false)` method
-<details>
-  <summary>Apply patches to the specific versions of CKEditor 5</summary>
-<br />
-Defines a method that applies patches to the specific versions of CKEditor 5. The example below shows how to apply patches to the `44.1.0` version:
-```rb
-# config/initializers/ckeditor5.rb
-CKEditor5::Rails.configure do
-  # ... other configuration
-  apply_integration_patches
-end
-```
-It's useful when you want to apply patches to the specific versions of CKEditor 5. The patches are defined in the `lib/ckeditor5/rails/plugins/patches` directory.
-</details>
-#### `simple_upload_adapter(url, compress: true)` method
+#### `simple_upload_adapter(url)` method
 <details>
   <summary>Configure server-side image upload endpoint</summary>
@@ -1137,7 +1060,7 @@ end
 ```
 </details>
-#### `special_characters(compress: true, &block)` method
+#### `special_characters(&block)` method
 <details>
   <summary>Configure special characters plugin</summary>
@@ -1183,7 +1106,7 @@ For more info about the special characters plugin, check the [official documenta
 </details>
-#### `wproofreader(version: nil, cdn: nil, compress: true, **config)` method
+#### `wproofreader(version: nil, cdn: nil, **config)` method
 <details>
   <summary>Configure WProofreader plugin</summary>
@@ -1237,7 +1160,7 @@ For more info about the WProofreader plugin, check the [official documentation](
 </details>
-#### `custom_translations(lang_code = nil, translations = {}, compress: true)` method
+#### `custom_translations(lang_code = nil, translations = {})` method
 <details>
   <summary>Define custom translations for CKEditor components and UI</summary>
@@ -1270,40 +1193,6 @@ end
 </details>
-#### `compression(enabled: true)` method
-<details>
-  <summary>Enable or disable compression of the inline plugins or patches</summary>
-<br />
-Defines whether the inline plugins should be compressed. It **must** be called before the `inline_plugin` and `version` methods. The example below shows how to disable compression:
-```rb
-# config/initializers/ckeditor5.rb
-CKEditor5::Rails.configure do
-  compression enabled: false
-  # ... other configuration
-end
-```
-:warning: Compression is enabled by default, and it's recommended to keep it enabled for production environments. It reduces the size of the inline plugins and patches, which improves the loading time of the editor.
-If you want to disable compression for a specific plugin, you can pass the `compress: false` keyword argument to the `inline_plugin` method:
-```rb
-# config/initializers/ckeditor5.rb
-CKEditor5::Rails.configure do
-  # ... other configuration
-  inline_plugin :MyCustomPlugin, plugin_code, compress: false
-end
-```
-</details>
 ### Controller / View helpers 📦
 #### `ckeditor5_translation_ref(key)` method
@@ -1373,7 +1262,7 @@ It may be useful when you want to define a preset based on the current user or r
 class ApplicationController < ActionController::Base
   def show
     @preset = ckeditor5_preset do
-      version '47.6.0'
+      version '44.3.0'
       toolbar :sourceEditing, :|, :bold, :italic, :underline, :strikethrough,
               :subscript, :superscript, :removeFormat, :|, :bulletedList, :numberedList,
@@ -1408,7 +1297,7 @@ If you want to override the preset defined in the initializer, you can search fo
 class ApplicationController < ActionController::Base
   def show
     @preset = ckeditor5_preset(:default).override do
-      version '47.6.0'
+      version '44.3.0'
       toolbar :sourceEditing, :|, :bold, :italic, :underline, :strikethrough,
               :subscript, :superscript, :removeFormat, :|, :bulletedList, :numberedList,
@@ -1581,7 +1470,7 @@ In that scenario it's recommended to add `gpl` method to the initializer along w
 CKEditor5::Rails.configure do
   gpl
-  version '47.6.0'
+  version '44.3.0'
 end
 ```
@@ -1950,13 +1839,13 @@ For example:
 ⚠️ Direct access of `instance` property of the web component. Keep in mind it's unsafe and may cause issues if the editor is not loaded yet.
 ```js
-document.getElementById('editor').instance;
+document.getElementById('editor').instance
 ```
 👌 Accessing the editor instance using `instancePromise` property. It's a promise that resolves to the editor instance when the editor is ready.
 ```js
-document.getElementById('editor').instancePromise.then((editor) => {
+document.getElementById('editor').instancePromise.then(editor => {
   console.log(editor);
 });
 ```
@@ -1964,7 +1853,7 @@ document.getElementById('editor').instancePromise.then((editor) => {
 ✅ Accessing the editor through the `runAfterEditorReady` helper method. It's a safe way to access the editor instance when the editor is ready.
 ```js
-document.getElementById('editor').runAfterEditorReady((editor) => {
+document.getElementById('editor').runAfterEditorReady(editor => {
   console.log(editor);
 });
 ```
@@ -2364,18 +2253,9 @@ If you want to contribute to the gem, you can clone the repository and run the f
 ```sh
 gem install bundler -v 2.5.22
 bundle install
-npm install
 bundle exec guard -g rails
 ```
-### Building NPM package 📦
-To build the NPM package, you can run the following command:
-```sh
-npm run build
-```
 ### Running tests 🧪
 You can run the tests using the following command:
@@ -2390,19 +2270,6 @@ If you want to watch the tests, you can use the following command:
 bundle exec guard -g rspec
 ```
-## Psst... 👀
-If you're looking for similar stuff, check these out:
-* [ckeditor5-phoenix](https://github.com/Mati365/ckeditor5-phoenix)
-  Seamless CKEditor 5 integration for Phoenix Framework. Plug & play support for LiveView forms with dynamic content, localization, and custom builds.
-* [ckeditor5-livewire](https://github.com/Mati365/ckeditor5-livewire)
-  Drop-in CKEditor 5 solution for Laravel + Livewire apps. Works great with Blade forms too. Includes JS hooks, flexible config, and easy customization.
-* [ckeditor5-symfony](https://github.com/Mati365/ckeditor5-symfony)
-  Native CKEditor 5 integration for Symfony. Works with Symfony 6.x+, standard forms and Twig. Supports custom builds, multiple editor configurations, asset management, and localization. Designed to be simple, predictable, and framework-native.
 ## 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/).

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

@@ -52,9 +52,9 @@ module CKEditor5::Rails::Assets
     private
     def window_scripts_tags(nonce: nil)
-      scripts = bundle.scripts.map do |script|
+      scripts = bundle.scripts.filter_map do |script|
         tag.script(src: script.url, nonce: nonce, crossorigin: 'anonymous') if script.window?
-      end.compact
+      end
       safe_join(scripts)
     end

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

@@ -8,14 +8,33 @@ module CKEditor5::Rails::Assets
     include ActionView::Helpers::TagHelper
     include Singleton
-    NPM_PACKAGE_PATH = File.join(__dir__, '..', '..', '..', '..', 'npm_package').freeze
+    WEBCOMPONENTS_PATH = File.join(__dir__, 'webcomponents')
+    WEBCOMPONENTS_MODULES = [
+      'utils.mjs',
+      'components/editable.mjs',
+      'components/ui-part.mjs',
+      'components/editor.mjs',
+      'components/context.mjs'
+    ].freeze
     def source
-      @source ||= File.read(File.join(NPM_PACKAGE_PATH, 'dist/index.cjs')).html_safe
+      @source ||= compress_source(raw_source)
     end
     def to_html(nonce: nil)
       tag.script(source, type: 'module', nonce: nonce)
     end
+    private
+    def raw_source
+      @raw_source ||= WEBCOMPONENTS_MODULES.map do |file|
+        File.read(File.join(WEBCOMPONENTS_PATH, file))
+      end.join("\n")
+    end
+    def compress_source(code)
+      Terser.new(compress: true, mangle: true).compile(code).html_safe
+    end
   end
 end

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

@@ -0,0 +1,123 @@
+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;
+    }
+    // Broadcast context initialization event
+    window.dispatchEvent(
+      new CustomEvent('ckeditor:context:attach:before', { detail: { element: this } })
+    );
+    const { Context, ContextWatchdog } = await import('ckeditor5');
+    const plugins = await this.#getPlugins();
+    const config = this.#getConfig();
+    // Broadcast context mounting event with configuration
+    window.dispatchEvent(
+      new CustomEvent('ckeditor:context:attach', { detail: { config, element: this } })
+    );
+    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 ADDED Viewed

@@ -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);