ckeditor5-livewire 1.10.0 → 1.12.0

package/src/hooks/editor/editor.ts

@@ -2,7 +2,6 @@ import type { Editor } from 'ckeditor5';
 
 import type { RootAttributesUpdater } from '../utils';
 import type { EditorId, EditorLanguage, EditorPreset } from './typings';
-import type { EditorCreator } from './utils';
 
 import { ContextsRegistry } from '../../hooks/context';
 import { isEmptyObject, waitFor } from '../../shared';
@@ -14,6 +13,9 @@ import {
   createSyncEditorWithInputPlugin,
 } from './plugins';
 import {
+  assignInitialDataToEditorConfig,
+  assignSourceElementsToEditorConfig,
+  cleanupOrphanEditorElements,
   createEditorInContext,
   isSingleRootEditor,
   loadAllEditorTranslations,
@@ -34,11 +36,6 @@ import {
  * The Livewire hook that manages the lifecycle of CKEditor5 instances.
  */
 export class EditorComponentHook extends ClassHook<Snapshot> {
-  /**
-   * The promise that resolves to the editor instance.
-   */
-  private editorPromise: Promise<Editor> | null = null;
-
   /**
    * Root attributes updater for the main editor root.
    */
@@ -53,27 +50,51 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
     EditorsRegistry.the.resetErrors(editorId);
 
     try {
-      this.editorPromise = this.createEditor();
-
-      const editor = await this.editorPromise;
+      const editor = await this.createEditor();
+      const editorContext = unwrapEditorContext(editor);
+      const watchdog = unwrapEditorWatchdog(editor);
 
-      // Do not even try to broadcast about the registration of the editor
-      // if hook was immediately destroyed.
-      /* v8 ignore next if -- @preserve */
-      if (!this.isBeingDestroyed()) {
-        EditorsRegistry.the.register(editorId, editor);
+      // Do not even try to broadcast about the registration of the editor if hook was immediately destroyed.
+      /* v8 ignore next 3 */
+      if (this.isBeingDestroyed()) {
+        return;
+      }
 
+      // Run some stuff that have to be reinitialized every-time editor is being restarted.
+      const unmountDestroyWatcher = EditorsRegistry.the.mountEffect(editorId, (editor) => {
+        // Enforce deregistration of the editor when it's being destroyed by watchdog.
         editor.once('destroy', () => {
-          /* v8 ignore next if -- @preserve */
-          if (EditorsRegistry.the.hasItem(editorId)) {
-            EditorsRegistry.the.unregister(editorId);
+          // Let's handle case when watchdog (or context watchdog) destroyed editor "externally"
+          // user might also manually kill the editor using `.destroy()` method.
+          // Keep pending callbacks though. Someone might register new callbacks just before calling `.destroy()`.
+          EditorsRegistry.the.unregister(editorId, false);
+        }, { priority: 'highest' });
+      });
+
+      this.onBeforeDestroy(async () => {
+        // If for some reason editor not fired `destroy`, enforce deregistration.
+        EditorsRegistry.the.unregister(editorId);
+        unmountDestroyWatcher();
+
+        if (editorContext) {
+          // If context is present, make sure it's not in unmounting phase, as it'll kill the editors.
+          // If it's being destroyed, don't do anything, as the context will take care of it.
+          if (editorContext.state !== 'unavailable') {
+            await editorContext.context.remove(editorContext.editorContextId);
           }
-        });
-      }
+        }
+        else if (watchdog) {
+          await watchdog.destroy();
+        }
+        else {
+          await editor.destroy();
+        }
+      });
+
+      EditorsRegistry.the.register(editorId, editor);
     }
     catch (error: any) {
       console.error(`Error initializing CKEditor5 instance with ID "${editorId}":`, error);
-      this.editorPromise = null;
       EditorsRegistry.the.error(editorId, error);
     }
   }
@@ -85,42 +106,13 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
   override async destroyed() {
     // Let's hide the element during destruction to prevent flickering.
     this.element.style.display = 'none';
-
-    // Let's wait for the mounted promise to resolve before proceeding with destruction.
-    try {
-      const editor = await this.editorPromise;
-
-      if (!editor) {
-        return;
-      }
-
-      const editorContext = unwrapEditorContext(editor);
-      const watchdog = unwrapEditorWatchdog(editor);
-
-      if (editorContext) {
-        // If context is present, make sure it's not in unmounting phase, as it'll kill the editors.
-        // If it's being destroyed, don't do anything, as the context will take care of it.
-        if (editorContext.state !== 'unavailable') {
-          await editorContext.context.remove(editorContext.editorContextId);
-        }
-      }
-      else if (watchdog) {
-        await watchdog.destroy();
-      }
-      else {
-        await editor.destroy();
-      }
-    }
-    finally {
-      this.editorPromise = null;
-    }
   }
 
   /**
    * Updates the editor content when the component is updated after commit changes.
    */
   override async afterCommitSynced(): Promise<void> {
-    const editor = await this.editorPromise;
+    const editor = await EditorsRegistry.the.waitFor(this.canonical.editorId);
 
     /* v8 ignore if -- @preserve */
     if (editor) {
@@ -152,7 +144,7 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
       editableHeight,
       saveDebounceMs,
       language,
-      watchdog,
+      watchdog: useWatchdog,
       content,
     } = this.canonical;
 
@@ -160,133 +152,153 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
       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!;
+      // Add integration specific plugins.
+      loadedPlugins.push(
+        await createLivewireSyncPlugin(
+          {
+            saveDebounceMs,
+            component: 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'] || '';
+      }
 
-    // Add integration specific plugins.
-    loadedPlugins.push(
-      await createLivewireSyncPlugin(
-        {
-          saveDebounceMs,
-          component: this,
-        },
-      ),
-    );
+      // Depending of the editor type, and parent lookup for nearest context or initialize it without it.
+      const editor = await (async () => {
+        let sourceElements: 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 (!(sourceElements instanceof HTMLElement) && !('main' in sourceElements)) {
+          const requiredRoots = (
+            editorType === 'decoupled'
+              ? ['main']
+              : Object.keys(initialData as Record<string, string>)
+          );
+
+          if (!checkIfAllRootsArePresent(sourceElements, requiredRoots)) {
+            sourceElements = 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 sourceElements) {
+          sourceElements = sourceElements['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),
-    };
+        let resolvedConfig = { ...config };
+
+        // Do some postprocessing on received configuration.
+        resolvedConfig = resolveEditorConfigElementReferences(resolvedConfig);
+        resolvedConfig = resolveEditorConfigTranslations([...mixedTranslations].reverse(), language.ui, resolvedConfig);
+        resolvedConfig = assignSourceElementsToEditorConfig(Constructor, sourceElements, resolvedConfig);
+        resolvedConfig = assignInitialDataToEditorConfig(initialData, resolvedConfig);
+
+        // Construct parsed config.
+        const parsedConfig = {
+          ...resolvedConfig,
+          licenseKey,
+          plugins: loadedPlugins,
+          language,
+          ...mixedTranslations.length && {
+            translations: mixedTranslations,
+          },
+        };
+
+        if (!context || !(sourceElements instanceof HTMLElement)) {
+          return Constructor.create(parsedConfig);
+        }
 
-    if (isSingleRootEditor(editorType)) {
-      initialData = initialData['main'] || '';
-    }
+        const result = await createEditorInContext({
+          context,
+          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 sourceElements: 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 (!(sourceElements instanceof HTMLElement) && !('main' in sourceElements)) {
-        const requiredRoots = (
-          editorType === 'decoupled'
-            ? ['main']
-            : Object.keys(initialData as Record<string, string>)
-        );
+        return result.editor;
+      })();
 
-        if (!checkIfAllRootsArePresent(sourceElements, requiredRoots)) {
-          sourceElements = await waitForAllRootsToBePresent(editorId, requiredRoots);
-          initialData = {
-            ...content,
-            ...queryEditablesSnapshotContent(editorId),
-          };
-        }
+      if (isSingleRootEditor(editorType) && editableHeight) {
+        setEditorEditableHeight(editor, editableHeight);
       }
 
-      // If single root editor, unwrap the element from the object.
-      if (isSingleRootEditor(editorType) && 'main' in sourceElements) {
-        sourceElements = sourceElements['main'];
-      }
+      this.applyRootAttributes(editor);
 
-      // 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 || !(sourceElements instanceof HTMLElement)) {
-        return Constructor.create(sourceElements 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);
+
+      // Cleanup editor registry before restart of the editor (restart might fail too).
+      watchdog.on('error', (_, { causesRestart }) => {
+        if (causesRestart) {
+          const prevEditor = EditorsRegistry.the.getItem(editorId);
+
+          /* v8 ignore next 3 */
+          if (prevEditor) {
+            cleanupOrphanEditorElements(prevEditor);
+            EditorsRegistry.the.unregister(editorId);
+          }
+        }
+      });
 
-      const result = await createEditorInContext({
-        context,
-        element: sourceElements,
-        creator: Constructor,
-        config: parsedConfig,
+      // Register new instance after editor restarted.
+      watchdog.on('restart', () => {
+        EditorsRegistry.the.register(editorId, watchdog.editor!);
       });
 
-      return result.editor;
-    })();
+      await watchdog.create({});
 
-    if (isSingleRootEditor(editorType) && editableHeight) {
-      setEditorEditableHeight(editor, editableHeight);
+      return watchdog.editor!;
     }
 
-    this.applyRootAttributes(editor);
-
-    return editor;
+    return buildAndCreateEditor();
   };
 }
 

package/src/hooks/editor/plugins/livewire-sync.ts

@@ -108,7 +108,9 @@ export async function createLivewireSyncPlugin(
      * Setups the content sync from Livewire to the editor when Livewire emits an event.
      */
     private setupSetEditorContentHandler() {
-      Livewire.on('set-editor-content', ({ editorId, content }: SetContentPayload) => {
+      const { editor } = this;
+
+      const handler = ({ editorId, content }: SetContentPayload) => {
         if (editorId !== component.canonical.editorId) {
           return;
         }
@@ -116,9 +118,16 @@ export async function createLivewireSyncPlugin(
         const currentValues = this.getEditorRootsValues();
 
         if (!shallowEqual(currentValues, content)) {
-          this.editor.setData(content);
+          editor.setData(content);
         }
-      });
+      };
+
+      const clean: any = Livewire.on('set-editor-content', handler);
+
+      /* v8 ignore next if -- @preserve */
+      if (typeof clean === 'function') {
+        editor.once('destroy', clean);
+      }
     }
 
     /**
@@ -150,21 +159,21 @@ export async function createLivewireSyncPlugin(
       };
 
       const debouncedSync = debounce(saveDebounceMs, syncContentChange);
-      const onChangeData = () => {
+
+      // Apply small debounce to avoid race conditions during re-mount of editables during watchdog restart.
+      // CKEditor tends to reset roots map and re-assign value in the same tick which may confuse two way binding.
+      model.document.on('change:data', debounce(10, () => {
         if (ui.focusTracker.isFocused) {
           debouncedSync();
         }
         else {
           syncContentChange();
         }
-      };
-
-      model.document.on('change:data', onChangeData);
+      }));
 
       editor.once('ready', syncContentChange);
       editor.once('destroy', () => {
         isDestroyed = true;
-        model.document.off('change:data', onChangeData);
       });
     }
 

package/src/hooks/editor/types/editor-relaxed-constructor.type.ts

@@ -0,0 +1,6 @@
+import type { Editor } from 'ckeditor5';
+
+export type EditorRelaxedConstructor<TEditor extends Editor = Editor> = {
+  create: (...args: any) => Promise<TEditor>;
+  editorName?: string;
+};

package/src/hooks/editor/types/index.ts

@@ -0,0 +1 @@
+export * from './editor-relaxed-constructor.type';

package/src/hooks/editor/utils/assign-initial-data-to-editor-config.ts

@@ -0,0 +1,48 @@
+import type { EditorConfig } from 'ckeditor5';
+
+/**
+ * Assigns initial data to specified editor config.
+ *
+ * @param dataOrMap Initial data to be assigned to config.
+ * @param config Config of the editor.
+ * @returns The updated configuration object.
+ */
+export function assignInitialDataToEditorConfig<C extends EditorConfig>(
+  dataOrMap: string | Record<string, string>,
+  config: C,
+): C {
+  const dataMap = toDataMap(dataOrMap);
+  const allRootsKeys = new Set([
+    ...Object.keys(dataMap),
+    ...Object.keys(config.roots ?? {}),
+  ]);
+
+  const rootsConfig = Array.from(allRootsKeys).reduce((acc, rootKey) => ({
+    ...acc,
+    [rootKey]: {
+      ...config.roots?.[rootKey],
+      ...rootKey === 'main' ? config.root : {},
+
+      /* v8 ignore start -- @preserve */
+      ...rootKey in dataMap
+        ? {
+            initialData: dataMap[rootKey],
+          }
+        : {},
+      /* v8 ignore stop -- @preserve */
+    },
+  }), Object.create(config.roots || {}));
+
+  const mappedConfig: C = {
+    ...config,
+    roots: rootsConfig,
+  };
+
+  delete mappedConfig.root;
+
+  return mappedConfig;
+}
+
+function toDataMap(element: string | Record<string, string>): Record<string, string> {
+  return typeof element === 'string' ? { main: element } : { ...element };
+}

package/src/hooks/editor/utils/assign-source-elements-to-editor-config.ts

@@ -0,0 +1,61 @@
+import type { EditorConfig } from 'ckeditor5';
+
+import type { EditorRelaxedConstructor } from '../types/editor-relaxed-constructor.type';
+
+/**
+ * Assigns a DOM element to the editor configuration in a way that is compatible with the specific editor type.
+ *
+ * @param Editor Constructor of the editor used to determine the location of element config entry.
+ * @param elementOrMap Element to be assigned to config.
+ * @param config Config of the editor.
+ * @returns The updated configuration object.
+ */
+export function assignSourceElementsToEditorConfig<C extends EditorConfig>(
+  Editor: EditorRelaxedConstructor,
+  elementOrMap: HTMLElement | Record<string, HTMLElement>,
+  config: C,
+): C {
+  const elementsMap = toElementsMap(elementOrMap);
+
+  if (!Editor.editorName || Editor.editorName === 'ClassicEditor') {
+    return {
+      ...config,
+      attachTo: elementsMap['main'],
+    };
+  }
+
+  const allRootsKeys = new Set([
+    ...Object.keys(elementsMap),
+    ...Object.keys(config.roots ?? {}),
+  ]);
+
+  const rootsConfig = Array.from(allRootsKeys).reduce((acc, rootKey) => ({
+    ...acc,
+    [rootKey]: {
+      /* v8 ignore next */
+      ...config.roots?.[rootKey],
+      ...rootKey === 'main' ? config.root : {},
+
+      /* v8 ignore start -- @preserve */
+      ...rootKey in elementsMap
+        ? {
+            element: elementsMap[rootKey],
+          }
+        : {},
+      /* v8 ignore stop -- @preserve */
+    },
+  }), Object.create(config.roots || {}));
+
+  const mappedConfig: C = {
+    ...config,
+    roots: rootsConfig,
+  };
+
+  delete mappedConfig.root;
+
+  return mappedConfig;
+}
+
+function toElementsMap(element: HTMLElement | Record<string, HTMLElement>): Record<string, HTMLElement> {
+  return element instanceof HTMLElement ? { main: element } : { ...element };
+}