ckeditor5 1.9.0 → 1.11.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.
@@ -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);