ckeditor5-phoenix 1.27.0 → 1.27.2

package/package.json

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

package/src/hooks/editor/editor.ts

@@ -1,4 +1,5 @@
 import type { EditorId } from './typings';
+import type { EditableItem } from './utils';
 
 import { isEmptyObject, parseIntIfNotNull, waitFor } from '../../shared';
 import { ClassHook, makeHook } from '../../shared/hook';
@@ -11,8 +12,7 @@ import {
   createSyncEditorWithPhoenixPlugin,
 } from './plugins';
 import {
-  assignInitialDataToEditorConfig,
-  assignSourceElementsToEditorConfig,
+  assignEditorRootsToConfig,
   cleanupOrphanEditorElements,
   createEditorInContext,
   isSingleRootEditor,
@@ -20,8 +20,7 @@ import {
   loadEditorConstructor,
   loadEditorPlugins,
   normalizeCustomTranslations,
-  queryEditablesElements,
-  queryEditablesSnapshotContent,
+  queryAllEditorEditables,
   readPresetOrThrow,
   resolveEditorConfigElementReferences,
   resolveEditorConfigTranslations,
@@ -234,47 +233,21 @@ class EditorHookImpl extends ClassHook {
       ]
         .filter(translations => !isEmptyObject(translations));
 
-      // Let's query all elements, and create basic configuration.
-      let initialData: string | Record<string, string> = queryEditablesSnapshotContent(editorId);
+      // Query all editable elements along with their initial values in one pass.
+      let editables = queryAllEditorEditables(editorId);
+      const requiredRoots = Object.keys(editables);
 
       if (isSingleRootEditor(type)) {
-        initialData = initialData['main'] || '';
+        requiredRoots.push('main');
       }
 
-      // Depending of the editor type, and parent lookup for nearest context or initialize it without it.
-      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 = (
-          type === 'decoupled'
-            ? ['main']
-            : Object.keys(initialData as Record<string, string>)
-        );
-
-        if (!checkIfAllRootsArePresent(sourceElements, requiredRoots)) {
-          sourceElements = await waitForAllRootsToBePresent(editorId, requiredRoots);
-          initialData = queryEditablesSnapshotContent(editorId);
-        }
+      if (!checkIfAllRootsArePresent(editables, requiredRoots)) {
+        editables = await waitForAllRootsToBePresent(editorId, requiredRoots);
       }
 
-      // If single root editor, unwrap the element from the object.
-      if (isSingleRootEditor(type) && 'main' in sourceElements) {
-        sourceElements = sourceElements['main'];
-      }
-
-      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);
-
-      // Post-processed configuration of the editor.
-      const parsedConfig = {
-        ...resolvedConfig,
+      let resolvedConfig = {
+        ...config,
         licenseKey: license.key,
         plugins: loadedPlugins,
         language,
@@ -283,15 +256,19 @@ class EditorHookImpl extends ClassHook {
         },
       };
 
+      resolvedConfig = resolveEditorConfigElementReferences(resolvedConfig);
+      resolvedConfig = resolveEditorConfigTranslations([...mixedTranslations].reverse(), language.ui, resolvedConfig);
+      resolvedConfig = assignEditorRootsToConfig(Constructor, editables, resolvedConfig);
+
       const editor = await (async () => {
-        if (!context || !(sourceElements instanceof HTMLElement)) {
-          return Constructor.create(parsedConfig);
+        if (!context) {
+          return Constructor.create(resolvedConfig);
         }
 
         const result = await createEditorInContext({
           context,
           creator: Constructor,
-          config: parsedConfig,
+          config: resolvedConfig,
         });
 
         return result.editor;
@@ -340,42 +317,42 @@ class EditorHookImpl extends ClassHook {
 }
 
 /**
- * Checks if all required root elements are present in the elements object.
+ * Checks if all required root elements are present in the editables map.
  *
- * @param elements The elements object mapping root IDs to HTMLElements.
- * @param requiredRoots The list of required root IDs.
+ * @param editables The editables map keyed by root name.
+ * @param requiredRoots The list of required root names.
  * @returns True if all required roots are present, false otherwise.
  */
-function checkIfAllRootsArePresent(elements: Record<string, HTMLElement>, requiredRoots: string[]): boolean {
-  return requiredRoots.every(rootId => elements[rootId]);
+function checkIfAllRootsArePresent(editables: Record<string, EditableItem>, requiredRoots: string[]): boolean {
+  return requiredRoots.every(rootId => editables[rootId]);
 }
 
 /**
  * Waits for all required root elements to be present in the DOM.
  *
  * @param editorId The editor's ID.
- * @param requiredRoots The list of required root IDs.
- * @returns A promise that resolves to the record of root elements.
+ * @param requiredRoots The list of required root names.
+ * @returns A promise that resolves to the map of editable items.
  */
 async function waitForAllRootsToBePresent(
   editorId: EditorId,
   requiredRoots: string[],
-): Promise<Record<string, HTMLElement>> {
+): Promise<Record<string, EditableItem>> {
   return waitFor(
     () => {
-      const elements = queryEditablesElements(editorId) as unknown as Record<string, HTMLElement>;
+      const editables = queryAllEditorEditables(editorId);
 
-      if (!checkIfAllRootsArePresent(elements, requiredRoots)) {
+      if (!checkIfAllRootsArePresent(editables, requiredRoots)) {
         throw new Error(
           'It looks like not all required root elements are present yet.\n'
           + '* If you want to wait for them, ensure they are registered before editor initialization.\n'
           + '* If you want lazy initialize roots, consider removing root values from the `initialData` config '
           + 'and assign initial data in editable components.\n'
-          + `Missing roots: ${requiredRoots.filter(rootId => !elements[rootId]).join(', ')}.`,
+          + `Missing roots: ${requiredRoots.filter(rootId => !editables[rootId]).join(', ')}.`,
         );
       }
 
-      return elements;
+      return editables;
     },
     { timeOutAfter: 2000, retryAfter: 100 },
   );

package/src/hooks/editor/utils/{assign-source-elements-to-editor-config.ts → assign-editor-roots-to-config.ts}

@@ -1,45 +1,40 @@
 import type { EditorConfig } from 'ckeditor5';
 
 import type { EditorRelaxedConstructor } from '../types/editor-relaxed-constructor.type';
+import type { EditableItem } from './query-all-editor-editables';
 
 /**
- * Assigns a DOM element to the editor configuration in a way that is compatible with the specific editor type.
+ * Assigns DOM elements and initial data 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 editables Map of editable items (element + initial value) keyed by root name.
  * @param config Config of the editor.
  * @returns The updated configuration object.
  */
-export function assignSourceElementsToEditorConfig<C extends EditorConfig>(
+export function assignEditorRootsToConfig<C extends EditorConfig>(
   Editor: EditorRelaxedConstructor,
-  elementOrMap: HTMLElement | Record<string, HTMLElement>,
+  editables: Record<string, EditableItem>,
   config: C,
 ): C {
-  const elementsMap = toElementsMap(elementOrMap);
-
-  if (!Editor.editorName || Editor.editorName === 'ClassicEditor') {
-    return {
-      ...config,
-      attachTo: elementsMap['main'],
-    };
-  }
-
+  const isClassicEditor = !Editor.editorName || Editor.editorName === 'ClassicEditor';
   const allRootsKeys = new Set([
-    ...Object.keys(elementsMap),
+    ...Object.keys(editables),
     ...Object.keys(config.roots ?? {}),
   ]);
 
   const rootsConfig = Array.from(allRootsKeys).reduce((acc, rootKey) => ({
     ...acc,
     [rootKey]: {
-      /* v8 ignore next */
+      /* v8 ignore next 1 */
       ...config.roots?.[rootKey],
       ...rootKey === 'main' ? config.root : {},
 
-      /* v8 ignore next 5 */
-      ...rootKey in elementsMap
+      /* v8 ignore next 6 */
+      ...rootKey in editables
         ? {
-            element: elementsMap[rootKey],
+            initialData: editables[rootKey]!.initialValue,
+            ...!isClassicEditor && { element: editables[rootKey]!.content },
           }
         : {},
     },
@@ -48,13 +43,12 @@ export function assignSourceElementsToEditorConfig<C extends EditorConfig>(
   const mappedConfig: C = {
     ...config,
     roots: rootsConfig,
+    ...isClassicEditor && {
+      attachTo: editables['main']?.content,
+    },
   };
 
   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/index.ts

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

package/src/hooks/editor/utils/query-all-editor-editables.ts

@@ -1,34 +1,5 @@
 import type { EditorId } from '../typings';
 
-import { filterObjectValues, mapObjectValues } from '../../../shared';
-
-/**
- * Gets the initial root elements for the editor based on its type.
- *
- * @param editorId The editor's ID.
- * @returns The root element(s) for the editor.
- */
-export function queryEditablesElements(editorId: EditorId) {
-  const editables = queryAllEditorEditables(editorId);
-
-  return mapObjectValues(editables, ({ content }) => content);
-}
-
-/**
- * Gets the initial data for the roots of the editor. If the editor is a single editing-like editor,
- * it retrieves the initial value from the element's attribute. Otherwise, it returns an object mapping
- * editable names to their initial values.
- *
- * @param editorId The editor's ID.
- * @returns The initial values for the editor's roots.
- */
-export function queryEditablesSnapshotContent(editorId: EditorId) {
-  const editables = queryAllEditorEditables(editorId);
-  const values = mapObjectValues(editables, ({ initialValue }) => initialValue);
-
-  return filterObjectValues(values, value => typeof value === 'string') as Record<string, string>;
-}
-
 /**
  * Queries all editable elements within a specific editor instance.
  *

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

@@ -1,10 +0,0 @@
-import { 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 declare function assignInitialDataToEditorConfig<C extends EditorConfig>(dataOrMap: string | Record<string, string>, config: C): C;
-//# sourceMappingURL=assign-initial-data-to-editor-config.d.ts.map

package/dist/hooks/editor/utils/assign-initial-data-to-editor-config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"assign-initial-data-to-editor-config.d.ts","sourceRoot":"","sources":["../../../../src/hooks/editor/utils/assign-initial-data-to-editor-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;;;GAMG;AACH,wBAAgB,+BAA+B,CAAC,CAAC,SAAS,YAAY,EACpE,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC1C,MAAM,EAAE,CAAC,GACR,CAAC,CA8BH"}

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

@@ -1,12 +0,0 @@
-import { EditorConfig } from 'ckeditor5';
-import { 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 declare function assignSourceElementsToEditorConfig<C extends EditorConfig>(Editor: EditorRelaxedConstructor, elementOrMap: HTMLElement | Record<string, HTMLElement>, config: C): C;
-//# sourceMappingURL=assign-source-elements-to-editor-config.d.ts.map

package/dist/hooks/editor/utils/assign-source-elements-to-editor-config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"assign-source-elements-to-editor-config.d.ts","sourceRoot":"","sources":["../../../../src/hooks/editor/utils/assign-source-elements-to-editor-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;AAEzF;;;;;;;GAOG;AACH,wBAAgB,kCAAkC,CAAC,CAAC,SAAS,YAAY,EACvE,MAAM,EAAE,wBAAwB,EAChC,YAAY,EAAE,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACvD,MAAM,EAAE,CAAC,GACR,CAAC,CAuCH"}

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

@@ -1,47 +0,0 @@
-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 };
-}