ckeditor5-phoenix 1.26.0 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-phoenix",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "CKEditor 5 integration for Phoenix Framework",
   "author": "Mateusz Bagiński <cziken58@gmail.com>",
   "license": "MIT",

package/src/hooks/editable.ts

@@ -56,7 +56,7 @@ class EditableHookImpl extends ClassHook {
 
         editor.addRoot(rootName, {
           isUndoable: false,
-          data: initialValue,
+          initialData: initialValue,
         });
 
         const editable = ui.view.createEditable(rootName, contentElement);

package/src/hooks/editor/editor.ts

@@ -11,6 +11,8 @@ import {
   createSyncEditorWithPhoenixPlugin,
 } from './plugins';
 import {
+  assignInitialDataToEditorConfig,
+  assignSourceElementsToEditorConfig,
   cleanupOrphanEditorElements,
   createEditorInContext,
   isSingleRootEditor,
@@ -262,15 +264,17 @@ class EditorHookImpl extends ClassHook {
         sourceElements = sourceElements['main'];
       }
 
-      // Construct parsed config. First resolve DOM element references in the provided configuration.
-      let resolvedConfig = resolveEditorConfigElementReferences(config);
+      let resolvedConfig = { ...config };
 
-      // Then resolve translation references in the provided configuration, using the mixed translations.
+      // 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);
 
+      // Post-processed configuration of the editor.
       const parsedConfig = {
         ...resolvedConfig,
-        initialData,
         licenseKey: license.key,
         plugins: loadedPlugins,
         language,
@@ -281,12 +285,11 @@ class EditorHookImpl extends ClassHook {
 
       const editor = await (async () => {
         if (!context || !(sourceElements instanceof HTMLElement)) {
-          return (Constructor.create as any)(sourceElements, parsedConfig);
+          return Constructor.create(parsedConfig);
         }
 
         const result = await createEditorInContext({
           context,
-          element: sourceElements,
           creator: Constructor,
           config: parsedConfig,
         });

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,47 @@
+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 next 5 */
+      ...rootKey in dataMap
+        ? {
+            initialData: dataMap[rootKey],
+          }
+        : {},
+    },
+  }), 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,60 @@
+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 next 5 */
+      ...rootKey in elementsMap
+        ? {
+            element: elementsMap[rootKey],
+          }
+        : {},
+    },
+  }), 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 };
+}

package/src/hooks/editor/utils/create-editor-in-context.ts

@@ -12,19 +12,17 @@ const CONTEXT_EDITOR_WATCHDOG_SYMBOL = Symbol.for('context-editor-watchdog');
  * Creates a CKEditor 5 editor instance within a given context watchdog.
  *
  * @param params Parameters for editor creation.
- * @param params.element The DOM element or data for the editor.
  * @param params.context The context watchdog instance.
  * @param params.creator The editor creator utility.
  * @param params.config The editor configuration object.
  * @returns The created editor instance.
  */
-export async function createEditorInContext({ element, context, creator, config }: Attrs) {
+export async function createEditorInContext({ context, creator, config }: Attrs) {
   const editorContextId = uid();
 
   await context.add({
-    creator: (_element, _config) => creator.create(_element, _config),
+    creator: creator.create.bind(creator),
     id: editorContextId,
-    sourceElementOrData: element,
     type: 'editor',
     config,
   });
@@ -74,7 +72,6 @@ export function unwrapEditorContext(editor: Editor): EditorContextDescriptor | n
 type Attrs = {
   context: ContextWatchdog<Context>;
   creator: EditorCreator;
-  element: HTMLElement;
   config: EditorConfig;
 };
 

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

@@ -1,3 +1,5 @@
+export * from './assign-initial-data-to-editor-config';
+export * from './assign-source-elements-to-editor-config';
 export * from './cleanup-orphan-editor-elements';
 export * from './create-editor-in-context';
 export * from './is-multiroot-editor-instance';