ckeditor5-blazor 1.9.0 → 1.10.0

package/dist/interop/create-editable-blazor-interop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-editable-blazor-interop.d.ts","sourceRoot":"","sources":["../../../src/interop/create-editable-blazor-interop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAS9C;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa;IAoDpF;;OAEG;;IAkBH;;;OAGG;sBACqB,MAAM;IAW9B;;;OAGG;yCACwC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;EAU5E"}
+{"version":3,"file":"create-editable-blazor-interop.d.ts","sourceRoot":"","sources":["../../../src/interop/create-editable-blazor-interop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAS9C;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa;IA6DpF;;OAEG;;IAcH;;;OAGG;sBACqB,MAAM;IAS9B;;;OAGG;yCACwC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;EAU5E"}

package/dist/interop/create-editor-blazor-interop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-editor-blazor-interop.d.ts","sourceRoot":"","sources":["../../../src/interop/create-editor-blazor-interop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAW9C;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa;IAmElF;;OAEG;sBACqB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAS9C;;OAEG;yCACwC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUzE;;OAEG;;IAmBH;;;;OAIG;;EAWN"}
+{"version":3,"file":"create-editor-blazor-interop.d.ts","sourceRoot":"","sources":["../../../src/interop/create-editor-blazor-interop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAW9C;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa;IAqElF;;OAEG;sBACqB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAS9C;;OAEG;yCACwC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUzE;;OAEG;;IAcH;;;;OAIG;;EAWN"}

package/dist/shared/are-maps-equal.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Compares two Map structures for equality based on their contents.
+ * The function checks if the maps have the same size, contain the exact same keys,
+ * and have strictly equal values (using shallow comparison).
+ *
+ * @param map1 - The first map to compare (can be null).
+ * @param map2 - The second map to compare.
+ * @returns Returns `true` if the maps are identical in terms of keys and values, otherwise `false`.
+ */
+export declare function areMapsEqual(map1: Map<any, any> | null, map2: Map<any, any>): boolean;
+//# sourceMappingURL=are-maps-equal.d.ts.map

package/dist/shared/are-maps-equal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"are-maps-equal.d.ts","sourceRoot":"","sources":["../../../src/shared/are-maps-equal.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,OAAO,CAYrF"}

package/dist/shared/async-registry.d.ts

@@ -19,6 +19,15 @@ export declare class AsyncRegistry<T extends Destructible> {
      * Set of watchers that observe changes to the registry.
      */
     private readonly watchers;
+    /**
+     * Batch nesting depth. When > 0, watcher notifications are deferred.
+     */
+    private batchDepth;
+    /**
+     * Snapshot of the last state dispatched to watchers, used for change detection.
+     */
+    private lastNotifiedItems;
+    private lastNotifiedErrors;
     /**
      * Executes a function on an item.
      * If the item is not yet registered, it will wait for it to be registered.
@@ -29,6 +38,14 @@ export declare class AsyncRegistry<T extends Destructible> {
      * @returns A promise that resolves with the result of the function.
      */
     execute<R, E extends T = T>(id: RegistryId | null, onSuccess: (item: E) => R, onError?: (error: any) => void): Promise<Awaited<R>>;
+    /**
+     * Reactively binds a mount/unmount lifecycle to a single registry item.
+     *
+     * @param id The ID of the item to observe.
+     * @param onMount Function executed when the item mounts.
+     * @returns A function that stops observing and immediately runs any pending cleanup.
+     */
+    mountEffect<E extends T = T>(id: RegistryId | null, onMount: (item: E) => (() => void) | void): () => void;
     /**
      * Registers an item.
      *
@@ -53,14 +70,21 @@ export declare class AsyncRegistry<T extends Destructible> {
      * Un-registers an item.
      *
      * @param id The ID of the item.
+     * @param resetPendingCallbacks If true resets pending callbacks.
      */
-    unregister(id: RegistryId | null): void;
+    unregister(id: RegistryId | null, resetPendingCallbacks?: boolean): void;
     /**
      * Gets all registered items.
      *
      * @returns An array of all registered items.
      */
     getItems(): T[];
+    /**
+     * Returns single registered item.
+     *
+     * @returns Registered item.
+     */
+    getItem(id: RegistryId | null): T | undefined;
     /**
      * Checks if an item with the given ID is registered.
      *
@@ -73,15 +97,30 @@ export declare class AsyncRegistry<T extends Destructible> {
      * If the item is not registered yet, it will wait for it to be registered.
      *
      * @param id The ID of the item.
-     * @param timeout Optional timeout in milliseconds.
      * @returns A promise that resolves with the item instance.
      */
-    waitFor<E extends T = T>(id: RegistryId | null, timeout?: number): Promise<E>;
+    waitFor<E extends T = T>(id: RegistryId | null): Promise<E>;
     /**
      * Destroys all registered items and clears the registry.
      * This will call the `destroy` method on each item.
      */
     destroyAll(): Promise<void>;
+    /**
+     * Destroys all registered editors and removes all watchers.
+     */
+    reset(): Promise<void>;
+    /**
+     * Executes a callback while deferring all watcher notifications.
+     * A single notification is fired synchronously after the callback returns,
+     * but only if the registry actually changed.
+     *
+     * Batches can be nested — watchers are notified only when the outermost
+     * batch completes.
+     *
+     * @param fn The callback to execute.
+     * @returns The return value of the callback.
+     */
+    batch<R>(fn: () => R): R;
     /**
      * Registers a watcher that will be called whenever the registry changes.
      *
@@ -96,13 +135,9 @@ export declare class AsyncRegistry<T extends Destructible> {
      */
     unwatch(watcher: RegistryWatcher<T>): void;
     /**
-     * Resets the registry by clearing all items, errors, and pending callbacks.
+     * Immediately dispatches the current state to all watchers if it changed.
      */
-    reset(): void;
-    /**
-     * Notifies all watchers about changes to the registry.
-     */
-    private notifyWatchers;
+    private flushWatchers;
     /**
      * Gets or creates pending callbacks for a specific ID.
      *
@@ -110,13 +145,6 @@ export declare class AsyncRegistry<T extends Destructible> {
      * @returns The pending callbacks structure.
      */
     private getPendingCallbacks;
-    /**
-     * Registers an item as the default (null ID) item if it's the first one.
-     *
-     * @param id The ID of the item being registered.
-     * @param item The item instance.
-     */
-    private registerAsDefault;
 }
 /**
  * Interface for objects that can be destroyed.

package/dist/shared/async-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"async-registry.d.ts","sourceRoot":"","sources":["../../../src/shared/async-registry.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,qBAAa,aAAa,CAAC,CAAC,SAAS,YAAY;IAC/C;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAmC;IAEzD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAqC;IAE1E;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAqD;IAEtF;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAiC;IAE1D;;;;;;;;OAQG;IACH,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,EACxB,EAAE,EAAE,UAAU,GAAG,IAAI,EACrB,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,GAC7B,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAgCtB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI;IAqB9C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAqB9C;;;;OAIG;IACH,WAAW,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI;IAWxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI;IAgBvC;;;;OAIG;IACH,QAAQ,IAAI,CAAC,EAAE;IAIf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,GAAG,OAAO;IAIvC;;;;;;;OAOG;IACH,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,UAAU,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC;IAwC7E;;;OAGG;IACG,UAAU;IAehB;;;;;OAKG;IACH,KAAK,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAY9C;;;;OAIG;IACH,OAAO,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI;IAI1C;;OAEG;IACH,KAAK,IAAI,IAAI;IAOb;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;CAK1B;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,KAAK,UAAU,GAAG,MAAM,CAAC;AAUzB;;GAEG;AACH,KAAK,eAAe,CAAC,CAAC,IAAI,CACxB,KAAK,EAAE,GAAG,CAAC,UAAU,GAAG,IAAI,EAAE,CAAC,CAAC,EAChC,MAAM,EAAE,GAAG,CAAC,UAAU,GAAG,IAAI,EAAE,KAAK,CAAC,KAClC,IAAI,CAAC"}
+{"version":3,"file":"async-registry.d.ts","sourceRoot":"","sources":["../../../src/shared/async-registry.ts"],"names":[],"mappings":"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"}

package/dist/shared/index.d.ts

@@ -1,3 +1,4 @@
+export * from './are-maps-equal';
 export * from './async-registry';
 export * from './camel-case';
 export * from './debounce';

package/dist/shared/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-blazor",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "CKEditor 5 integration for Blazor",
   "license": "MIT",
   "repository": {
@@ -30,9 +30,9 @@
     "@vitest/coverage-v8": "^4.0.18",
     "ckeditor5": "^47.6.0",
     "ckeditor5-premium-features": "^47.6.0",
-    "happy-dom": "^20.5.0",
+    "happy-dom": "^20.8.9",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^6.0.5",
     "vitest": "^4.0.18"

package/src/elements/editable.ts

@@ -11,27 +11,15 @@ import { queryAllEditorIds } from './editor/utils';
  */
 export class EditableComponentElement extends HTMLElement {
   /**
-   * The promise that resolves when the editable is mounted.
+   * Stops observing the editor registry and immediately runs any pending cleanup.
    */
-  private editorPromise: Promise<MultiRootEditor | null> | null = null;
+  private unmountEffect: VoidFunction | null = null;
 
   /**
    * Wait result for the interactive attribute.
    */
   private interactiveWait?: WaitForInteractiveResult;
 
-  /**
-   * Callbacks to be invoked before the editable is destroyed.
-   */
-  private beforeDestroyCallbacks: Array<() => void> = [];
-
-  /**
-   * Registers a callback to be called before the editable is destroyed.
-   */
-  public onBeforeDestroy(callback: () => void): void {
-    this.beforeDestroyCallbacks.push(callback);
-  }
-
   /**
    * Mounts the editable component.
    */
@@ -62,11 +50,11 @@ export class EditableComponentElement extends HTMLElement {
       throw new CKEditor5BlazorError('Editor ID or Root Name is missing.');
     }
 
-    // If the editor is not registered yet, we will wait for it to be registered.
     this.style.display = 'block';
-    this.editorPromise = EditorsRegistry.the.execute(editorId, async (editor: MultiRootEditor) => {
+
+    this.unmountEffect = EditorsRegistry.the.mountEffect(editorId, (editor: MultiRootEditor) => {
       if (!this.isConnected) {
-        return null;
+        return;
       }
 
       const { ui, editing, model } = editor;
@@ -95,7 +83,7 @@ export class EditableComponentElement extends HTMLElement {
           });
         }
 
-        return editor;
+        return;
       }
 
       editor.addRoot(rootName, {
@@ -135,59 +123,51 @@ export class EditableComponentElement extends HTMLElement {
       const debouncedSync = debounce(saveDebounceMs, sync);
 
       editor.model.document.on('change:data', debouncedSync);
-      this.onBeforeDestroy(() => editor.model.document.off('change:data', debouncedSync));
       sync();
 
-      return editor;
+      return () => {
+        editor.model.document.off('change:data', debouncedSync);
+
+        if (editor.state !== 'destroyed' && rootName) {
+          const root = editor.model.document.getRoot(rootName);
+
+          /* v8 ignore else -- @preserve */
+          if (root && 'detachEditable' in editor) {
+            // Detaching editables seem to be buggy when something removed DOM element of the editable (e.g. Blazor re-render) before
+            // the editable is unmounted. To prevent errors in such cases, we will try to detach the editable if it exists, but ignore errors.
+            try {
+              /* v8 ignore else -- @preserve */
+              if (editor.ui.view.editables[rootName]) {
+                editor.detachEditable(root);
+              }
+            }
+            catch (err) {
+              // Ignore errors when detaching editable.
+              /* v8 ignore next -- @preserve */
+              console.error('Unable unmount editable from root:', err);
+            }
+
+            if (root.isAttached()) {
+              editor.detachRoot(rootName, false);
+            }
+          }
+        }
+      };
     });
   }
 
   /**
    * Destroys the editable component. Unmounts root from the editor.
    */
-  async disconnectedCallback() {
+  disconnectedCallback() {
     // Disconnect the observer if present.
     this.interactiveWait?.disconnect();
 
-    const rootName = this.getAttribute('data-cke-root-name');
-
     // Let's hide the element during destruction to prevent flickering.
     this.style.display = 'none';
 
-    // Let's wait for the mounted promise to resolve before proceeding with destruction.
-    const editor = await this.editorPromise;
-    this.editorPromise = null;
-
-    // Run all registered pre-destroy callbacks and clear the queue.
-    for (const callback of this.beforeDestroyCallbacks) {
-      callback();
-    }
-
-    this.beforeDestroyCallbacks = [];
-
-    // Unmount root from the editor if editor is still registered.
-    if (editor && editor.state !== 'destroyed' && rootName) {
-      const root = editor.model.document.getRoot(rootName);
-
-      /* v8 ignore else -- @preserve */
-      if (root && 'detachEditable' in editor) {
-        // Detaching editables seem to be buggy when something removed DOM element of the editable (e.g. Blazor re-render) before
-        // the editable is unmounted. To prevent errors in such cases, we will try to detach the editable if it exists, but ignore errors.
-        try {
-          if (editor.ui.view.editables[rootName]) {
-            editor.detachEditable(root);
-          }
-        }
-        catch (err) {
-          // Ignore errors when detaching editable.
-          /* v8 ignore next -- @preserve */
-          console.error('Unable unmount editable from root:', err);
-        }
-
-        if (root.isAttached()) {
-          editor.detachRoot(rootName, false);
-        }
-      }
-    }
+    // Stop observing the registry and run cleanup immediately.
+    this.unmountEffect?.();
+    this.unmountEffect = null;
   }
 }

package/src/elements/editor/editor.ts

@@ -1,6 +1,5 @@
 import type { WaitForInteractiveResult } from '../../shared';
 import type { EditorId, EditorLanguage, EditorPreset } from './typings';
-import type { EditorCreator } from './utils';
 import type { Editor } from 'ckeditor5';
 
 import {
@@ -16,6 +15,7 @@ import {
   createSyncEditorWithInputPlugin,
 } from './plugins';
 import {
+  cleanupOrphanEditorElements,
   createEditorInContext,
   isSingleRootEditor,
   loadAllEditorTranslations,
@@ -155,144 +155,165 @@ export class EditorComponentElement extends HTMLElement {
     const editableHeight = this.getAttribute('data-cke-editable-height') ? Number.parseInt(this.getAttribute('data-cke-editable-height')!, 10) : null;
     const saveDebounceMs = Number.parseInt(this.getAttribute('data-cke-save-debounce-ms')!, 10);
     const language = JSON.parse(this.getAttribute('data-cke-language')!) as EditorLanguage;
-    const watchdog = this.hasAttribute('data-cke-watchdog');
+    const useWatchdog = this.hasAttribute('data-cke-watchdog');
     const content = JSON.parse(this.getAttribute('data-cke-content')!) as Record<string, string>;
 
     const {
       customTranslations,
       editorType,
       licenseKey,
+      watchdogConfig,
       config: { plugins, ...config },
     } = preset;
 
-    // Wrap editor creator with watchdog if needed.
-    let Constructor: EditorCreator = await loadEditorConstructor(editorType);
+    const Constructor = await loadEditorConstructor(editorType);
     const context = await (
       contextId
         ? ContextsRegistry.the.waitFor(contextId)
         : null
     );
 
-    // Do not use editor specific watchdog if context is attached, as the context is by default protected.
-    if (watchdog && !context) {
-      const wrapped = await wrapWithWatchdog(Constructor);
+    /**
+     * Builds the full editor configuration and creates the editor instance.
+     */
+    const buildAndCreateEditor = async () => {
+      const { loadedPlugins, hasPremium } = await loadEditorPlugins(plugins);
 
-      ({ Constructor } = wrapped);
-      wrapped.watchdog.on('restart', () => {
-        const newInstance = wrapped.watchdog.editor!;
+      loadedPlugins.push(
+        await createDispatchEditorRootsChangeEventPlugin({
+          saveDebounceMs,
+          editorId,
+          targetElement: this,
+        }),
+      );
 
-        this.editorPromise = Promise.resolve(newInstance);
+      if (isSingleRootEditor(editorType)) {
+        loadedPlugins.push(
+          await createSyncEditorWithInputPlugin(saveDebounceMs),
+        );
+      }
 
-        EditorsRegistry.the.register(editorId, newInstance);
-      });
-    }
+      // Mix custom translations with loaded translations.
+      const loadedTranslations = await loadAllEditorTranslations(language, hasPremium);
+      const mixedTranslations = [
+        ...loadedTranslations,
+        normalizeCustomTranslations(customTranslations || {}),
+      ]
+        .filter(translations => !isEmptyObject(translations));
+
+      // Let's query all elements, and create basic configuration.
+      let initialData: string | Record<string, string> = {
+        ...content,
+        ...queryEditablesSnapshotContent(editorId),
+      };
 
-    const { loadedPlugins, hasPremium } = await loadEditorPlugins(plugins);
+      if (isSingleRootEditor(editorType)) {
+        initialData = initialData['main'] || '';
+      }
 
-    loadedPlugins.push(
-      await createDispatchEditorRootsChangeEventPlugin({
-        saveDebounceMs,
-        editorId,
-        targetElement: this,
-      }),
-    );
+      // Depending of the editor type, and parent lookup for nearest context or initialize it without it.
+      const editor = await (async () => {
+        let sourceElementOrData: HTMLElement | Record<string, HTMLElement> = queryEditablesElements(editorId);
+
+        // Handle special case when user specified `initialData` of several root elements, but editable components
+        // are not yet present in the DOM. In other words - editor is initialized before attaching root elements.
+        if (!sourceElementOrData['main']) {
+          const requiredRoots = (
+            isSingleRootEditor(editorType)
+              ? ['main']
+              : Object.keys(initialData as Record<string, string>)
+          );
+
+          if (!checkIfAllRootsArePresent(sourceElementOrData, requiredRoots)) {
+            sourceElementOrData = await waitForAllRootsToBePresent(editorId, requiredRoots);
+            initialData = {
+              ...content,
+              ...queryEditablesSnapshotContent(editorId),
+            };
+          }
+        }
 
-    if (isSingleRootEditor(editorType)) {
-      loadedPlugins.push(
-        await createSyncEditorWithInputPlugin(saveDebounceMs),
-      );
-    }
+        // If single root editor, unwrap the element from the object.
+        if (isSingleRootEditor(editorType) && 'main' in sourceElementOrData) {
+          sourceElementOrData = sourceElementOrData['main'];
+        }
 
-    // Mix custom translations with loaded translations.
-    const loadedTranslations = await loadAllEditorTranslations(language, hasPremium);
-    const mixedTranslations = [
-      ...loadedTranslations,
-      normalizeCustomTranslations(customTranslations || {}),
-    ]
-      .filter(translations => !isEmptyObject(translations));
-
-    // Let's query all elements, and create basic configuration.
-    let initialData: string | Record<string, string> = {
-      ...content,
-      ...queryEditablesSnapshotContent(editorId),
-    };
+        // Construct parsed config. First resolve DOM element references in the provided configuration.
+        let resolvedConfig = resolveEditorConfigElementReferences(config);
+
+        // Then resolve translation references in the provided configuration, using the mixed translations.
+        resolvedConfig = resolveEditorConfigTranslations([...mixedTranslations].reverse(), language.ui, resolvedConfig);
+
+        // Construct parsed config.
+        const parsedConfig = {
+          ...resolvedConfig,
+          initialData,
+          licenseKey,
+          plugins: loadedPlugins,
+          language,
+          ...mixedTranslations.length && {
+            translations: mixedTranslations,
+          },
+        };
+
+        if (!context || !(sourceElementOrData instanceof HTMLElement)) {
+          return Constructor.create(sourceElementOrData as any, parsedConfig);
+        }
 
-    if (isSingleRootEditor(editorType)) {
-      initialData = initialData['main'] || '';
-    }
+        const result = await createEditorInContext({
+          context,
+          element: sourceElementOrData,
+          creator: Constructor,
+          config: parsedConfig,
+        });
 
-    // Depending of the editor type, and parent lookup for nearest context or initialize it without it.
-    const editor = await (async () => {
-      let sourceElementOrData: HTMLElement | Record<string, HTMLElement> = queryEditablesElements(editorId);
-
-      // Handle special case when user specified `initialData` of several root elements, but editable components
-      // are not yet present in the DOM. In other words - editor is initialized before attaching root elements.
-      if (!sourceElementOrData['main']) {
-        const requiredRoots = (
-          isSingleRootEditor(editorType)
-            ? ['main']
-            : Object.keys(initialData as Record<string, string>)
-        );
+        return result.editor;
+      })();
 
-        if (!checkIfAllRootsArePresent(sourceElementOrData, requiredRoots)) {
-          sourceElementOrData = await waitForAllRootsToBePresent(editorId, requiredRoots);
-          initialData = {
-            ...content,
-            ...queryEditablesSnapshotContent(editorId),
-          };
-        }
+      // Assign root attributes if they are not empty. This is needed to support custom attributes on the root element of the editor.
+      if (!isEmptyObject(rootAttributes)) {
+        editor.model.change((writer) => {
+          writer.setAttributes(rootAttributes, editor.model.document.getRoot()!);
+        });
       }
 
-      // If single root editor, unwrap the element from the object.
-      if (isSingleRootEditor(editorType) && 'main' in sourceElementOrData) {
-        sourceElementOrData = sourceElementOrData['main'];
+      if (isSingleRootEditor(editorType) && editableHeight) {
+        setEditorEditableHeight(editor, editableHeight);
       }
 
-      // Construct parsed config. First resolve DOM element references in the provided configuration.
-      let resolvedConfig = resolveEditorConfigElementReferences(config);
-
-      // Then resolve translation references in the provided configuration, using the mixed translations.
-      resolvedConfig = resolveEditorConfigTranslations([...mixedTranslations].reverse(), language.ui, resolvedConfig);
-
-      // Construct parsed config.
-      const parsedConfig = {
-        ...resolvedConfig,
-        initialData,
-        licenseKey,
-        plugins: loadedPlugins,
-        language,
-        ...mixedTranslations.length && {
-          translations: mixedTranslations,
-        },
-      };
+      return editor;
+    };
 
-      if (!context || !(sourceElementOrData instanceof HTMLElement)) {
-        return Constructor.create(sourceElementOrData as any, parsedConfig);
-      }
+    // Do not use editor specific watchdog if context is attached, as the context is by default protected.
+    if (useWatchdog && !context) {
+      const watchdog = await wrapWithWatchdog(buildAndCreateEditor, watchdogConfig);
 
-      const result = await createEditorInContext({
-        context,
-        element: sourceElementOrData,
-        creator: Constructor,
-        config: parsedConfig,
+      watchdog.on('error', (_, { causesRestart }) => {
+        if (causesRestart) {
+          const prevEditor = EditorsRegistry.the.getItem(editorId);
+
+          /* v8 ignore next 3 */
+          if (prevEditor) {
+            cleanupOrphanEditorElements(prevEditor);
+
+            EditorsRegistry.the.unregister(editorId);
+          }
+        }
       });
 
-      return result.editor;
-    })();
+      watchdog.on('restart', () => {
+        const newInstance = watchdog.editor!;
 
-    // Assign root attributes if they are not empty. This is needed to support custom attributes on the root element of the editor.
-    if (!isEmptyObject(rootAttributes)) {
-      editor.model.change((writer) => {
-        writer.setAttributes(rootAttributes, editor.model.document.getRoot()!);
+        EditorsRegistry.the.register(editorId, newInstance);
       });
-    }
 
-    if (isSingleRootEditor(editorType) && editableHeight) {
-      setEditorEditableHeight(editor, editableHeight);
+      await watchdog.create({});
+
+      return watchdog.editor!;
     }
 
-    return editor;
-  };
+    return buildAndCreateEditor();
+  }
 }
 
 /**

package/src/elements/editor/typings.ts

@@ -1,3 +1,5 @@
+import type { WatchdogConfig } from 'ckeditor5';
+
 /**
  * Represents a unique identifier for a CKEditor5 editor instance.
  * This is typically the ID of the HTML element that the editor is attached to.
@@ -100,7 +102,7 @@ export type EditorPreset = {
   /**
    * Optional watchdog configuration for error recovery.
    */
-  watchdogConfig?: Record<string, any> | null;
+  watchdogConfig?: WatchdogConfig | null;
 
   /**
    * Optional custom translations for the editor.