ckeditor5-phoenix 1.15.1 → 1.15.2

package/src/hooks/editor/editor.ts

@@ -4,15 +4,14 @@ import type { EditorId, EditorType } from './typings';
 import type { EditorCreator } from './utils';
 
 import {
-  debounce,
   isEmptyObject,
-  isNil,
   mapObjectValues,
   parseIntIfNotNull,
 } from '../../shared';
 import { ClassHook, makeHook } from '../../shared/hook';
 import { ContextsRegistry, getNearestContextParentPromise } from '../context';
 import { EditorsRegistry } from './editors-registry';
+import { createSyncEditorWithInputPlugin, createSyncEditorWithPhoenixPlugin } from './plugins';
 import {
   createEditorInContext,
   isSingleEditingLikeEditor,
@@ -179,6 +178,25 @@ class EditorHookImpl extends ClassHook {
 
     const { loadedPlugins, hasPremium } = await loadEditorPlugins(plugins);
 
+    if (isSingleEditingLikeEditor(type)) {
+      loadedPlugins.push(
+        await createSyncEditorWithInputPlugin({
+          editorId,
+          saveDebounceMs,
+        }),
+      );
+    }
+
+    loadedPlugins.push(
+      await createSyncEditorWithPhoenixPlugin({
+        editorId,
+        saveDebounceMs,
+        events,
+        pushEvent: this.pushEvent.bind(this),
+        handleEvent: this.handleEvent.bind(this),
+      }),
+    );
+
     // Mix custom translations with loaded translations.
     const loadedTranslations = await loadAllEditorTranslations(language, hasPremium);
     const mixedTranslations = [
@@ -216,126 +234,12 @@ class EditorHookImpl extends ClassHook {
       return result.editor;
     })();
 
-    if (events.change) {
-      this.setupTypingContentPush(editorId, editor, saveDebounceMs);
-    }
-
-    if (events.blur) {
-      this.setupEventPush(editorId, editor, 'blur');
-    }
-
-    if (events.focus) {
-      this.setupEventPush(editorId, editor, 'focus');
-    }
-
-    // Handle incoming data from the server.
-    this.handleEvent('ckeditor5:set-data', ({ editorId, data }) => {
-      if (isNil(editorId) || editorId === this.attrs.editorId) {
-        editor.setData(data);
-      }
-    });
-
-    if (isSingleEditingLikeEditor(type)) {
-      const input = document.getElementById(`${editorId}_input`) as HTMLInputElement | null;
-
-      if (input) {
-        syncEditorToInput(input, editor, saveDebounceMs);
-      }
-
-      if (editableHeight) {
-        setEditorEditableHeight(editor, editableHeight);
-      }
+    if (isSingleEditingLikeEditor(type) && editableHeight) {
+      setEditorEditableHeight(editor, editableHeight);
     }
 
     return editor;
   };
-
-  /**
-   * Setups the content push event for the editor.
-   */
-  private setupTypingContentPush(editorId: EditorId, editor: Editor, saveDebounceMs: number) {
-    const pushContentChange = () => {
-      this.pushEvent(
-        'ckeditor5:change',
-        {
-          editorId,
-          data: getEditorRootsValues(editor),
-        },
-      );
-    };
-
-    editor.model.document.on('change:data', debounce(saveDebounceMs, pushContentChange));
-    pushContentChange();
-  }
-
-  /**
-   * Setups the event push for the editor.
-   */
-  private setupEventPush(editorId: EditorId, editor: Editor, eventType: 'focus' | 'blur') {
-    const pushEvent = () => {
-      const { isFocused } = editor.ui.focusTracker;
-      const currentType = isFocused ? 'focus' : 'blur';
-
-      if (currentType !== eventType) {
-        return;
-      }
-
-      this.pushEvent(
-        `ckeditor5:${eventType}`,
-        {
-          editorId,
-          data: getEditorRootsValues(editor),
-        },
-      );
-    };
-
-    editor.ui.focusTracker.on('change:isFocused', pushEvent);
-  }
-}
-
-/**
- * Gets the values of the editor's roots.
- *
- * @param editor The CKEditor instance.
- * @returns An object mapping root names to their content.
- */
-function getEditorRootsValues(editor: Editor) {
-  const roots = editor.model.document.getRootNames();
-
-  return roots.reduce<Record<string, string>>((acc, rootName) => {
-    acc[rootName] = editor.getData({ rootName });
-    return acc;
-  }, Object.create({}));
-}
-
-/**
- * Synchronizes the editor's content with a hidden input field.
- *
- * @param input The input element to synchronize with the editor.
- * @param editor The CKEditor instance.
- */
-function syncEditorToInput(input: HTMLInputElement, editor: Editor, saveDebounceMs: number) {
-  const sync = () => {
-    const newValue = editor.getData();
-
-    input.value = newValue;
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-  };
-
-  editor.model.document.on('change:data', debounce(saveDebounceMs, sync));
-  getParentFormElement(input)?.addEventListener('submit', sync);
-
-  sync();
-}
-
-/**
- * Gets the parent form element of the given HTML element.
- *
- * @param element The HTML element to find the parent form for.
- * @returns The parent form element or null if not found.
- */
-function getParentFormElement(element: HTMLElement) {
-  return element.closest('form') as HTMLFormElement | null;
 }
 
 /**

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

@@ -0,0 +1,2 @@
+export * from './sync-editor-with-input';
+export * from './sync-editor-with-phoenix';

package/src/hooks/editor/plugins/sync-editor-with-input.ts

@@ -0,0 +1,82 @@
+import type { PluginConstructor } from 'ckeditor5';
+
+import { debounce } from '../../../shared';
+
+/**
+ * Creates a SyncEditorWithInput plugin class.
+ */
+export async function createSyncEditorWithInputPlugin(
+  {
+    editorId,
+    saveDebounceMs,
+  }: Attrs,
+): Promise<PluginConstructor> {
+  const { Plugin } = await import('ckeditor5');
+
+  return class SyncEditorWithInput extends Plugin {
+    /**
+     * The input element to synchronize with.
+     */
+    private input: HTMLInputElement | null = null;
+
+    /**
+     * The form element reference for cleanup.
+     */
+    private form: HTMLFormElement | null = null;
+
+    /**
+     * The name of the plugin.
+     */
+    static get pluginName() {
+      return 'SyncEditorWithInput' as const;
+    }
+
+    /**
+     * Initializes the plugin.
+     */
+    public afterInit(): void {
+      const { editor } = this;
+
+      this.input = document.getElementById(`${editorId}_input`) as HTMLInputElement | null;
+
+      if (!this.input) {
+        return;
+      }
+
+      // Setup handlers.
+      editor.model.document.on('change:data', debounce(saveDebounceMs, () => this.sync()));
+      editor.once('ready', this.sync);
+
+      // Setup form integration.
+      this.form = this.input.closest('form');
+      this.form?.addEventListener('submit', this.sync);
+    }
+
+    /**
+     * Synchronizes the editor's content with the input field.
+     */
+    private sync = (): void => {
+      const newValue = this.editor.getData();
+
+      this.input!.value = newValue;
+      this.input!.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+
+    /**
+     * Destroys the plugin.
+     */
+    public override destroy(): void {
+      if (this.form) {
+        this.form.removeEventListener('submit', this.sync);
+      }
+
+      this.input = null;
+      this.form = null;
+    }
+  };
+}
+
+type Attrs = {
+  editorId: string;
+  saveDebounceMs: number;
+};

package/src/hooks/editor/plugins/sync-editor-with-phoenix.ts

@@ -0,0 +1,120 @@
+import type { Editor, PluginConstructor } from 'ckeditor5';
+
+import type { EditorId } from '../typings';
+
+import { debounce, isNil } from '../../../shared';
+
+/**
+ * Creates a SyncEditorWithPhoenix plugin class.
+ */
+export async function createSyncEditorWithPhoenixPlugin(options: Attrs): Promise<PluginConstructor> {
+  const { Plugin } = await import('ckeditor5');
+  const { editorId, saveDebounceMs, events, pushEvent, handleEvent } = options;
+
+  return class SyncEditorWithPhoenix extends Plugin {
+    /**
+     * The name of the plugin.
+     */
+    static get pluginName() {
+      return 'SyncEditorWithPhoenix' as const;
+    }
+
+    /**
+     * Initializes the plugin.
+     */
+    public init(): void {
+      const { editor } = this;
+
+      if (events.change) {
+        this.setupTypingContentPush();
+      }
+
+      if (events.blur) {
+        this.setupEventPush('blur');
+      }
+
+      if (events.focus) {
+        this.setupEventPush('focus');
+      }
+
+      handleEvent('ckeditor5:set-data', ({ editorId: targetId, data }) => {
+        if (isNil(targetId) || targetId === editorId) {
+          editor.setData(data);
+        }
+      });
+    }
+
+    /**
+     * Setups the content push event for the editor.
+     */
+    private setupTypingContentPush() {
+      const { editor } = this;
+
+      const pushContentChange = () => {
+        pushEvent(
+          'ckeditor5:change',
+          {
+            editorId,
+            data: getEditorRootsValues(this.editor),
+          },
+        );
+      };
+
+      editor.model.document.on('change:data', debounce(saveDebounceMs, pushContentChange));
+      editor.once('ready', pushContentChange);
+    }
+
+    /**
+     * Setups the event push for the editor.
+     */
+    private setupEventPush(eventType: 'focus' | 'blur') {
+      const { editor } = this;
+
+      const pushEventCallback = () => {
+        const { isFocused } = editor.ui.focusTracker;
+        const currentType = isFocused ? 'focus' : 'blur';
+
+        if (currentType !== eventType) {
+          return;
+        }
+
+        pushEvent(
+          `ckeditor5:${eventType}`,
+          {
+            editorId,
+            data: getEditorRootsValues(editor),
+          },
+        );
+      };
+
+      editor.ui.focusTracker.on('change:isFocused', pushEventCallback);
+    }
+  };
+}
+
+type Attrs = {
+  editorId: EditorId;
+  saveDebounceMs: number;
+  events: {
+    change: boolean;
+    focus: boolean;
+    blur: boolean;
+  };
+  pushEvent: (event: string, payload: any) => void;
+  handleEvent: (event: string, callback: (payload: any) => void) => void;
+};
+
+/**
+ * Gets the values of the editor's roots.
+ *
+ * @param editor The CKEditor instance.
+ * @returns An object mapping root names to their content.
+ */
+function getEditorRootsValues(editor: Editor) {
+  const roots = editor.model.document.getRootNames();
+
+  return roots.reduce<Record<string, string>>((acc, rootName) => {
+    acc[rootName] = editor.getData({ rootName });
+    return acc;
+  }, Object.create({}));
+}