ckeditor5 1.8.0 → 1.10.0

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.
@@ -57,19 +34,100 @@ class CKEditorComponent extends HTMLElement {
   /** @type {String} Initial HTML passed to component */
   #initialHTML = '';
 
+  /** @type {CKEditorContextComponent|null} */
+  #context = null;
+
+  /** @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
    * @protected
    */
   connectedCallback() {
+    this.#context = this.closest('ckeditor-context-component');
     this.#initialHTML = this.innerHTML;
 
     try {
-      execIfDOMReady(() => this.#reinitializeEditor());
+      execIfDOMReady(async () => {
+        if (this.#context) {
+          await this.#context.instancePromise.promise;
+          this.#context.registerEditor(this);
+        }
+
+        await this.reinitializeEditor();
+      });
     } 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);
     }
   }
 
@@ -84,7 +142,7 @@ class CKEditorComponent extends HTMLElement {
     if (oldValue !== null &&
         oldValue !== newValue &&
         CKEditorComponent.observedAttributes.includes(name) && this.isConnected) {
-      await this.#reinitializeEditor();
+      await this.reinitializeEditor();
     }
   }
 
@@ -94,9 +152,12 @@ class CKEditorComponent extends HTMLElement {
    * @protected
    */
   async disconnectedCallback() {
+    if (this.#context) {
+      this.#context.unregisterEditor(this);
+    }
+
     try {
-      await this.instance?.destroy();
-      await this.watchdog?.destroy();
+      await this.#destroy();
     } catch (error) {
       console.error('Failed to destroy editor:', error);
     }
@@ -119,6 +180,7 @@ class CKEditorComponent extends HTMLElement {
 
   /**
    * Determines appropriate editor element tag based on editor type
+   *
    * @private
    * @returns {string} HTML tag name to use
    */
@@ -133,57 +195,25 @@ class CKEditorComponent extends HTMLElement {
   }
 
   /**
-   * Resolves element references in configuration object.
-   * Looks for objects with { $element: "selector" } format and replaces them with actual elements.
+   * Gets the CKEditor context instance if available.
    *
    * @private
-   * @param {Object} obj - Configuration object to process
-   * @returns {Object} Processed configuration object with resolved element references
+   * @returns {import('ckeditor5').ContextWatchdog|null}
    */
-  #resolveElementReferences(obj) {
-    if (!obj || typeof obj !== 'object') {
-      return obj;
-    }
-
-    if (Array.isArray(obj)) {
-      return obj.map(item => this.#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}`);
-          }
+  get #contextWatchdog() {
+    return this.#context?.instance;
+  }
 
-          result[key] = element || null;
-        } else {
-          result[key] = this.#resolveElementReferences(value);
-        }
-      } else {
-        result[key] = value;
-      }
+  /**
+   * Destroys the editor instance and watchdog if available
+   */
+  async #destroy() {
+    if (this.#contextEditorId) {
+      await this.#contextWatchdog.remove(this.#contextEditorId);
     }
 
-    return result;
+    await this.instance?.destroy();
+    await this.watchdog?.destroy();
   }
 
   /**
@@ -195,7 +225,7 @@ class CKEditorComponent extends HTMLElement {
   #getConfig() {
     const config = JSON.parse(this.getAttribute('config') || '{}');
 
-    return this.#resolveElementReferences(config);
+    return resolveElementReferences(config);
   }
 
   /**
@@ -232,13 +262,27 @@ class CKEditorComponent extends HTMLElement {
       plugins,
     };
 
-    console.warn('Initializing CKEditor with:', { config, watchdog: this.hasWatchdog() });
+    console.warn('Initializing CKEditor with:', { config, watchdog: this.hasWatchdog(), context: this.#context });
 
     // Initialize watchdog if needed
     let watchdog = null;
     let instance = null;
-
-    if (this.hasWatchdog()) {
+    let contextId = null;
+
+    if (this.#context) {
+      contextId = uid();
+
+      await this.#contextWatchdog.add( {
+        creator: (_element, _config) => Editor.create(_element, _config),
+        id: contextId,
+        sourceElementOrData: content,
+        type: 'editor',
+        config,
+      } );
+
+      instance = this.#contextWatchdog.getItem(contextId);
+    } else if (this.hasWatchdog()) {
+      // Let's create use with plain watchdog.
       const { EditorWatchdog } = await import('ckeditor5');
       const watchdog = new EditorWatchdog(Editor);
 
@@ -246,12 +290,12 @@ class CKEditorComponent extends HTMLElement {
 
       instance = watchdog.editor;
     } else {
+      // Let's create the editor without watchdog.
       instance = await Editor.create(content, config);
     }
 
-    this.dispatchEvent(new CustomEvent('editor-ready', { detail: instance }));
-
     return {
+      contextId,
       instance,
       watchdog,
     };
@@ -263,11 +307,12 @@ class CKEditorComponent extends HTMLElement {
    * @private
    * @returns {Promise<void>}
    */
-  async #reinitializeEditor() {
+  async reinitializeEditor() {
     if (this.instance) {
       this.instancePromise = Promise.withResolvers();
 
-      await this.instance.destroy();
+      await this.#destroy();
+
       this.instance = null;
     }
 
@@ -288,21 +333,58 @@ class CKEditorComponent extends HTMLElement {
     }
 
     try {
-      const { watchdog, instance } = await this.#initializeEditor(this.editables || this.#getConfig().initialData || '');
+      const { watchdog, instance, contextId } = await this.#initializeEditor(this.editables || this.#getConfig().initialData || '');
 
       this.watchdog = watchdog;
       this.instance = instance;
+      this.#contextEditorId = contextId;
 
       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
    *
@@ -511,15 +593,6 @@ class CKEditorComponent extends HTMLElement {
   }
 }
 
-/**
- * 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;
@@ -638,262 +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';
-}
-
 customElements.define('ckeditor-component', CKEditorComponent);
-customElements.define('ckeditor-editable-component', CKEditorEditableComponent);
-customElements.define('ckeditor-ui-part-component', CKEditorUIPartComponent);

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