ckeditor5 1.31.8 → 1.32.2

data/npm_package/dist/index.mjs

@@ -0,0 +1,723 @@
+function p(s) {
+  switch (document.readyState) {
+    case "loading":
+      document.addEventListener("DOMContentLoaded", s, { once: !0 });
+      break;
+    case "interactive":
+    case "complete":
+      setTimeout(s, 0);
+      break;
+    default:
+      console.warn("Unexpected document.readyState:", document.readyState), setTimeout(s, 0);
+  }
+}
+const g = /* @__PURE__ */ new Map();
+function y(s) {
+  if (g.has(s))
+    return g.get(s);
+  const t = new Promise((e, i) => {
+    const n = document.createElement("script");
+    n.src = s, n.onload = e, n.onerror = i, document.head.appendChild(n);
+  });
+  return g.set(s, t), t;
+}
+function v(s) {
+  return typeof s == "string" && s !== "__proto__" && s !== "constructor" && s !== "prototype";
+}
+function C(s) {
+  return Array.from(document.styleSheets).some(
+    (t) => t.href === s || t.href === new URL(s, window.location.href).href
+  );
+}
+function w(s = []) {
+  const t = s.map(
+    (e) => new Promise((i, n) => {
+      if (C(e)) {
+        i();
+        return;
+      }
+      const r = document.createElement("link");
+      r.rel = "stylesheet", r.href = e, r.onerror = n, r.onload = () => i(), document.head.appendChild(r);
+    })
+  );
+  return Promise.all(t);
+}
+function h(s = []) {
+  const t = async ({ url: i, import_name: n, import_as: r, window_name: o, stylesheets: a }) => {
+    if (a?.length && await w(a), o) {
+      let l = function() {
+        return Object.prototype.hasOwnProperty.call(window, o);
+      };
+      if (i && !l() && await y(i), l() || window.dispatchEvent(
+        new CustomEvent(`ckeditor:request-cjs-plugin:${o}`)
+      ), !l())
+        throw new Error(
+          `Plugin window['${o}'] not found in global scope. Please ensure the plugin is loaded before CKEditor initialization.`
+        );
+      return window[o];
+    }
+    const c = await import(n), d = c[r || "default"];
+    if (!d)
+      throw new Error(
+        `Plugin "${r || "default"}" not found in the ESM module "${n}"! Available imports: ${Object.keys(c).join(", ")}! Consider changing "import_as" value.`
+      );
+    return d;
+  };
+  function e(i) {
+    return t(typeof i == "string" ? { import_name: "ckeditor5", import_as: i } : i);
+  }
+  return Promise.all(s.map(e));
+}
+function u(s) {
+  if (!s || typeof s != "object")
+    return s;
+  if (Array.isArray(s))
+    return s.map((i) => u(i));
+  const t = s;
+  if (t.$element && typeof t.$element == "string") {
+    const i = document.querySelector(t.$element);
+    return i || console.warn(`Element not found for selector: ${t.$element}`), i || null;
+  }
+  const e = /* @__PURE__ */ Object.create(null);
+  for (const [i, n] of Object.entries(s))
+    e[i] = u(n);
+  return e;
+}
+function A() {
+  return Math.random().toString(36).substring(2);
+}
+class x extends HTMLElement {
+  instance = null;
+  instancePromise = Promise.withResolvers();
+  #e = /* @__PURE__ */ new Set();
+  static get observedAttributes() {
+    return ["plugins", "config"];
+  }
+  async connectedCallback() {
+    try {
+      p(() => this.#t());
+    } catch (t) {
+      console.error("Failed to initialize context:", t), this.dispatchEvent(new CustomEvent("context-error", { detail: t }));
+    }
+  }
+  async attributeChangedCallback(t, e, i) {
+    e !== null && e !== i && await this.#t();
+  }
+  async disconnectedCallback() {
+    this.instance && (await this.instance.destroy(), this.instance = null);
+  }
+  /**
+   * Register editor component with this context
+   *
+   * @param editor - Editor component to register.
+   */
+  registerEditor(t) {
+    this.#e.add(t);
+  }
+  /**
+   * Unregister editor component from this context
+   *
+   * @param editor - Editor component to unregister
+   */
+  unregisterEditor(t) {
+    this.#e.delete(t);
+  }
+  /**
+   * Initialize CKEditor context with shared configuration
+   *
+   * @private
+   */
+  async #t() {
+    this.instance && (this.instancePromise = Promise.withResolvers(), await this.instance.destroy(), this.instance = null), window.dispatchEvent(
+      new CustomEvent("ckeditor:context:attach:before", { detail: { element: this } })
+    );
+    const { Context: t, ContextWatchdog: e } = await import("ckeditor5"), i = await this.#i(), n = this.#s();
+    window.dispatchEvent(
+      new CustomEvent("ckeditor:context:attach", { detail: { config: n, element: this } })
+    ), this.instance = new e(t, {
+      crashNumberLimit: 10
+    }), await this.instance.create({
+      ...n,
+      plugins: i
+    }), this.instance.on("itemError", (...r) => {
+      console.error("Context item error:", ...r);
+    }), this.instancePromise.resolve(this.instance), this.dispatchEvent(new CustomEvent("context-ready", { detail: this.instance })), await Promise.all(
+      [...this.#e].map((r) => r.reinitializeEditor())
+    );
+  }
+  async #i() {
+    const t = this.getAttribute("plugins");
+    return h(t ? JSON.parse(t) : []);
+  }
+  /**
+   * Gets context configuration with resolved element references.
+   *
+   * @private
+   */
+  #s() {
+    const t = JSON.parse(this.getAttribute("config") || "{}");
+    return u(t);
+  }
+}
+customElements.define("ckeditor-context-component", x);
+class P 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
+   */
+  get name() {
+    return this.getAttribute("name") || "editable";
+  }
+  /**
+   * Gets the actual editable DOM element.
+   */
+  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
+   */
+  connectedCallback() {
+    p(() => {
+      const t = this.#e();
+      if (!t)
+        throw new Error("ckeditor-editable-component must be a child of ckeditor-component");
+      if (this.innerHTML = `<div>${this.innerHTML}</div>`, this.style.display = "block", t.isDecoupled())
+        t.runAfterEditorReady((e) => {
+          this.appendChild(e.ui.view[this.name].element);
+        });
+      else {
+        if (!this.name)
+          throw new Error('Editable component missing required "name" attribute');
+        t.editables[this.name] = this;
+      }
+    });
+  }
+  /**
+   * Lifecycle callback for attribute changes
+   * Handles name changes and propagates other attributes to editable element
+   */
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      if (t === "name") {
+        if (!e)
+          return;
+        const n = this.#e();
+        n && (n.editables[i] = n.editables[e], delete n.editables[e]);
+      } else
+        this.editableElement.setAttribute(t, i);
+  }
+  /**
+   * Lifecycle callback when element is removed
+   * Un-registers this editable from the parent editor
+   */
+  disconnectedCallback() {
+    const t = this.#e();
+    t && delete t.editables[this.name];
+  }
+  /**
+   * Finds the parent editor component
+   */
+  #e() {
+    return this.closest("ckeditor-component") || document.body.querySelector("ckeditor-component");
+  }
+}
+customElements.define("ckeditor-editable-component", P);
+class b {
+  #e;
+  #t;
+  /**
+   * Creates new tracker instance wrapped in a Proxy for dynamic property access
+   *
+   * @param editorElement - Parent editor component reference
+   * @param initialEditables - Initial editable elements
+   * @returns Proxy wrapping the tracker
+   */
+  constructor(t, e = {}) {
+    return this.#e = t, this.#t = e, new Proxy(this, {
+      /**
+       * Handles property access, returns class methods or editable elements
+       *
+       * @param target - The tracker instance
+       * @param name - Property name being accessed
+       */
+      get(i, n) {
+        return typeof i[n] == "function" ? i[n].bind(i) : i.#t[n];
+      },
+      /**
+       * Handles setting new editable elements, triggers root attachment
+       *
+       * @param target - The tracker instance
+       * @param name - Name of the editable root
+       * @param element - Element to attach as editable
+       */
+      set(i, n, r) {
+        return i.#t[n] !== r && (i.attachRoot(n, r), i.#t[n] = r), !0;
+      },
+      /**
+       * Handles removing editable elements, triggers root detachment
+       *
+       * @param target - The tracker instance
+       * @param name - Name of the root to remove
+       */
+      deleteProperty(i, n) {
+        return i.detachRoot(n), delete i.#t[n], !0;
+      }
+    });
+  }
+  /**
+   * Attaches a new editable root to the editor.
+   * Creates new editor root and binds UI elements.
+   *
+   * @param name - Name of the editable root
+   * @param element - DOM element to use as editable
+   * @returns Resolves when root is attached
+   */
+  async attachRoot(t, e) {
+    return await this.detachRoot(t), this.#e.runAfterEditorReady((i) => {
+      const { ui: n, editing: r, model: o } = i;
+      i.addRoot(t, {
+        isUndoable: !1,
+        data: e.innerHTML
+      });
+      const a = o.document.getRoot(t);
+      n.getEditableElement(t) && i.detachEditable(a);
+      const c = n.view.createEditable(t, e);
+      n.addEditable(c), r.view.forceRender();
+    });
+  }
+  /**
+   * Detaches an editable root from the editor.
+   * Removes editor root and cleans up UI bindings.
+   *
+   * @param name - Name of root to detach
+   * @returns Resolves when root is detached
+   */
+  async detachRoot(t) {
+    return this.#e.runAfterEditorReady((e) => {
+      const i = e.model.document.getRoot(t);
+      i && (e.detachEditable(i), e.detachRoot(t, !0));
+    });
+  }
+  /**
+   * Gets all currently tracked editable elements
+   *
+   * @returns Map of all editable elements
+   */
+  getAll() {
+    return this.#t;
+  }
+}
+class m extends HTMLElement {
+  instancePromise = Promise.withResolvers();
+  watchdog = null;
+  instance = null;
+  editables = /* @__PURE__ */ Object.create({});
+  #e = "";
+  #t = null;
+  #i = null;
+  #s = null;
+  /**
+   * List of attributes that trigger updates when changed.
+   */
+  static get observedAttributes() {
+    return ["config", "plugins", "translations", "type"];
+  }
+  /**
+   * List of input attributes that trigger updates when changed.
+   */
+  static get inputAttributes() {
+    return ["name", "required", "value"];
+  }
+  get oneditorchange() {
+    return this.#r("editorchange");
+  }
+  set oneditorchange(t) {
+    this.#o("editorchange", t);
+  }
+  get oneditorready() {
+    return this.#r("editorready");
+  }
+  set oneditorready(t) {
+    this.#o("editorready", t);
+  }
+  get oneditorerror() {
+    return this.#r("editorerror");
+  }
+  set oneditorerror(t) {
+    this.#o("editorerror", t);
+  }
+  /**
+   * Gets event handler function from attribute or property
+   *
+   * @private
+   * @param name - Event name without 'on' prefix
+   * @returns Event handler or null
+   */
+  #r(t) {
+    if (this.hasAttribute(`on${t}`)) {
+      const e = this.getAttribute(`on${t}`);
+      if (!v(e))
+        throw new Error(`Unsafe event handler attribute value: ${e}`);
+      return window[e] || new Function("event", e);
+    }
+    return this[`#${t}Handler`];
+  }
+  /**
+   * Sets event handler function
+   *
+   * @private
+   * @param name - Event name without 'on' prefix
+   * @param handler - Event handler
+   */
+  #o(t, e) {
+    typeof e == "string" ? this.setAttribute(`on${t}`, e) : (this.removeAttribute(`on${t}`), this[`#${t}Handler`] = e);
+  }
+  /**
+   * Lifecycle callback when element is connected to DOM
+   * Initializes the editor when DOM is ready
+   *
+   * @protected
+   */
+  connectedCallback() {
+    this.#t = this.closest("ckeditor-context-component"), this.#e = this.innerHTML;
+    try {
+      p(async () => {
+        this.#t && (await this.#t.instancePromise.promise, this.#t.registerEditor(this)), await this.reinitializeEditor();
+      });
+    } catch (t) {
+      console.error("Failed to initialize editor:", t);
+      const e = new CustomEvent("editor-error", { detail: t });
+      this.dispatchEvent(e), this.oneditorerror?.(e);
+    }
+  }
+  /**
+   * Handles attribute changes and reinitializes editor if needed
+   *
+   * @protected
+   * @param  name - Name of changed attribute
+   * @param oldValue - Previous attribute value
+   * @param newValue - New attribute value
+   */
+  async attributeChangedCallback(t, e, i) {
+    e !== null && e !== i && m.observedAttributes.includes(t) && this.isConnected && await this.reinitializeEditor();
+  }
+  /**
+   * Lifecycle callback when element is removed from DOM
+   * Destroys the editor instance
+   * @protected
+   */
+  async disconnectedCallback() {
+    this.#t && this.#t.unregisterEditor(this);
+    try {
+      await this.#d();
+    } catch (t) {
+      console.error("Failed to destroy editor:", t);
+    }
+  }
+  /**
+   * Runs a callback after the editor is ready. It waits for editor
+   * initialization if needed.
+   *
+   * @param callback - Callback to run
+   */
+  runAfterEditorReady(t) {
+    return this.instance ? Promise.resolve(t(this.instance)) : this.instancePromise.promise.then(t);
+  }
+  /**
+   * Determines appropriate editor element tag based on editor type
+   */
+  get #n() {
+    switch (this.getAttribute("type")) {
+      case "ClassicEditor":
+        return "textarea";
+      default:
+        return "div";
+    }
+  }
+  /**
+   * Gets the CKEditor context instance if available.
+   */
+  get #a() {
+    return this.#t?.instance;
+  }
+  /**
+   * Destroys the editor instance and watchdog if available
+   */
+  async #d() {
+    this.#i && await this.#a.remove(this.#i), await this.instance?.destroy(), this.watchdog?.destroy();
+  }
+  /**
+   * Gets editor configuration with resolved element references
+   */
+  #l() {
+    const t = JSON.parse(this.getAttribute("config") || "{}");
+    return u(t);
+  }
+  /**
+   * Creates a new CKEditor instance
+   */
+  async #u(t) {
+    await Promise.all([
+      this.#b(),
+      this.#w()
+    ]);
+    let e = t;
+    t instanceof b ? e = t.getAll() : typeof t != "string" && (e = t.main);
+    const i = {
+      ...e instanceof HTMLElement && { element: e },
+      ...typeof e == "string" && { data: e },
+      ...e instanceof Object && { editables: e }
+    };
+    window.dispatchEvent(
+      new CustomEvent("ckeditor:attach:before", { detail: i })
+    );
+    const n = await this.#v(), [r, o] = await Promise.all([
+      this.#y(),
+      this.#E()
+    ]), a = {
+      ...this.#l(),
+      ...o.length && {
+        translations: o
+      },
+      plugins: r
+    };
+    window.dispatchEvent(
+      new CustomEvent("ckeditor:attach", { detail: { config: a, ...i } })
+    ), console.warn("Initializing CKEditor with:", { config: a, watchdog: this.hasWatchdog(), context: this.#t });
+    let c = null, d = null, l = null;
+    if (this.#t)
+      l = A(), await this.#a.add({
+        creator: (f, E) => n.create(f, E),
+        id: l,
+        sourceElementOrData: e,
+        type: "editor",
+        config: a
+      }), d = this.#a.getItem(l);
+    else if (this.hasWatchdog()) {
+      const { EditorWatchdog: f } = await import("ckeditor5");
+      c = new f(n), await c.create(e, a), d = c.editor;
+    } else
+      d = await n.create(e, a);
+    return console.warn("CKEditor initialized:", {
+      instance: d,
+      watchdog: c,
+      config: d.config._config
+    }), {
+      contextId: l,
+      instance: d,
+      watchdog: c
+    };
+  }
+  /**
+   * Re-initializes the editor by destroying existing instance and creating new one
+   *
+   * @private
+   * @returns {Promise<void>}
+   */
+  async reinitializeEditor() {
+    this.instance && (this.instancePromise = Promise.withResolvers(), await this.#d(), this.instance = null), this.style.display = "block", !this.isMultiroot() && !this.isDecoupled() && (this.innerHTML = `<${this.#n}>${this.#e}</${this.#n}>`, this.#p()), this.isMultiroot() ? this.editables = new b(this, this.#h()) : this.isDecoupled() ? this.editables = null : this.editables = this.#h();
+    try {
+      const { watchdog: t, instance: e, contextId: i } = await this.#u(this.editables || this.#l().initialData || "");
+      this.watchdog = t, this.instance = e, this.#i = i, this.#f(), this.#g(), this.#m(), this.instancePromise.resolve(this.instance);
+      const n = new CustomEvent("editor-ready", { detail: this.instance });
+      this.dispatchEvent(n), this.oneditorready?.(n);
+    } catch (t) {
+      throw this.instancePromise.reject(t), t;
+    }
+  }
+  /**
+   * Sets up data change listener that broadcasts content changes
+   */
+  #m() {
+    const t = (i) => this.instance.getData({ rootName: i }), e = () => this.instance?.model.document.getRootNames().reduce((i, n) => ({
+      ...i,
+      [n]: t(n)
+    }), {});
+    this.instance?.model.document.on("change:data", () => {
+      const i = new CustomEvent("editor-change", {
+        detail: {
+          editor: this.instance,
+          data: e()
+        },
+        bubbles: !0
+      });
+      this.dispatchEvent(i), this.oneditorchange?.(i);
+    });
+  }
+  /**
+   * Checks if current editor is classic type
+   */
+  isClassic() {
+    return this.getAttribute("type") === "ClassicEditor";
+  }
+  /**
+   * Checks if current editor is balloon type
+   */
+  isBallon() {
+    return this.getAttribute("type") === "BalloonEditor";
+  }
+  /**
+   * Checks if current editor is multiroot type
+   */
+  isMultiroot() {
+    return this.getAttribute("type") === "MultiRootEditor";
+  }
+  /**
+   * Checks if current editor is decoupled type
+   */
+  isDecoupled() {
+    return this.getAttribute("type") === "DecoupledEditor";
+  }
+  /**
+   * Checks if current editor has watchdog enabled
+   */
+  hasWatchdog() {
+    return this.getAttribute("watchdog") === "true";
+  }
+  /**
+   * Queries and validates editable elements
+   */
+  #h() {
+    if (this.isDecoupled())
+      return {};
+    if (this.isMultiroot())
+      return [...this.querySelectorAll("ckeditor-editable-component")].reduce((i, n) => {
+        if (!n.name)
+          throw new Error('Editable component missing required "name" attribute');
+        return i[n.name] = n, i;
+      }, /* @__PURE__ */ Object.create(null));
+    const t = this.querySelector(this.#n);
+    if (!t)
+      throw new Error(`No ${this.#n} element found`);
+    return { main: t };
+  }
+  /**
+   * Copies input-related attributes from component to the main editable element
+   *
+   * @private
+   */
+  #p() {
+    const t = this.querySelector("textarea");
+    if (t)
+      for (const e of m.inputAttributes)
+        this.hasAttribute(e) && t.setAttribute(e, this.getAttribute(e));
+  }
+  /**
+   * Sets up content sync between editor and textarea element.
+   *
+   * @private
+   */
+  #f() {
+    if (!this.instance)
+      return;
+    const t = this.querySelector("textarea");
+    if (!t)
+      return;
+    const e = () => {
+      this.style.position = "relative", t.innerHTML = "", t.value = this.instance.getData(), t.tabIndex = -1, Object.assign(t.style, {
+        display: "flex",
+        position: "absolute",
+        bottom: "0",
+        left: "50%",
+        width: "1px",
+        height: "1px",
+        opacity: "0",
+        pointerEvents: "none",
+        margin: "0",
+        padding: "0",
+        border: "none"
+      });
+    };
+    e(), this.instance.model.document.on("change:data", () => {
+      t.dispatchEvent(new Event("input", { bubbles: !0 })), t.dispatchEvent(new Event("change", { bubbles: !0 })), e();
+    });
+  }
+  /**
+   * Sets up editable height for ClassicEditor
+   *
+   * @private
+   */
+  #g() {
+    if (!this.isClassic() && !this.isBallon())
+      return;
+    const { instance: t } = this, e = Number.parseInt(this.getAttribute("editable-height"), 10);
+    Number.isNaN(e) || t.editing.view.change((i) => {
+      i.setStyle("height", `${e}px`, t.editing.view.document.getRoot());
+    });
+  }
+  /**
+   * Gets bundle JSON description from translations attribute
+   */
+  #c() {
+    return this.#s ||= JSON.parse(this.getAttribute("bundle"));
+  }
+  /**
+   * Checks if all required stylesheets are injected. If not, inject.
+   */
+  async #b() {
+    await w(this.#c().stylesheets || []);
+  }
+  /**
+   * Checks if all required scripts are injected. If not, inject.
+   */
+  async #w() {
+    const t = (this.#c().scripts || []).filter((e) => !!e.window_name);
+    await h(t);
+  }
+  /**
+   * Loads translation modules
+   */
+  async #E() {
+    const t = this.#c().scripts.filter((e) => e.translation);
+    return h(t);
+  }
+  /**
+   * Loads plugin modules
+   */
+  async #y() {
+    const t = this.getAttribute("plugins"), i = (t ? JSON.parse(t) : []).map(
+      (n) => typeof n == "string" ? { import_name: "ckeditor5", import_as: n } : n
+    );
+    return h(i);
+  }
+  /**
+   * Gets editor constructor based on type attribute
+   */
+  async #v() {
+    const t = await import("ckeditor5"), e = this.getAttribute("type");
+    if (!e || !Object.prototype.hasOwnProperty.call(t, e))
+      throw new Error(`Invalid editor type: ${e}`);
+    return t[e];
+  }
+}
+customElements.define("ckeditor-component", m);
+class S extends HTMLElement {
+  /**
+   * Lifecycle callback when element is added to DOM.
+   * Adds the toolbar to the editor UI.
+   */
+  connectedCallback() {
+    p(async () => {
+      const t = this.getAttribute("name"), e = await this.#e().instancePromise.promise;
+      this.appendChild(e.ui.view[t].element);
+    });
+  }
+  /**
+   * Finds the parent editor component.
+   */
+  #e() {
+    return this.closest("ckeditor-component") || document.body.querySelector("ckeditor-component");
+  }
+}
+customElements.define("ckeditor-ui-part-component", S);
+//# sourceMappingURL=index.mjs.map