ckeditor5-livewire 1.11.0 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-livewire",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "CKEditor 5 integration for Laravel Livewire",
   "author": "Mateusz Bagiński <cziken58@gmail.com>",
   "license": "MIT",
@@ -30,8 +30,8 @@
   ],
   "devDependencies": {
     "@vitest/coverage-v8": "^4.1.0",
-    "ckeditor5": "^47.6.0",
-    "ckeditor5-premium-features": "^47.6.0",
+    "ckeditor5": "^48.1.0",
+    "ckeditor5-premium-features": "^48.1.0",
     "happy-dom": "^20.8.9",
     "typescript": "^5.5.4",
     "vite": "^8.0.5",

package/src/hooks/editable.ts

@@ -57,7 +57,7 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
         editor.addRoot(rootName, {
           isUndoable: false,
           ...content !== null && {
-            data: content,
+            initialData: content,
           },
         });
 

package/src/hooks/editor/editor.ts

@@ -13,6 +13,8 @@ import {
   createSyncEditorWithInputPlugin,
 } from './plugins';
 import {
+  assignInitialDataToEditorConfig,
+  assignSourceElementsToEditorConfig,
   cleanupOrphanEditorElements,
   createEditorInContext,
   isSingleRootEditor,
@@ -228,16 +230,17 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
           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);
 
         // Construct parsed config.
         const parsedConfig = {
           ...resolvedConfig,
-          initialData,
           licenseKey,
           plugins: loadedPlugins,
           language,
@@ -247,12 +250,11 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
         };
 
         if (!context || !(sourceElements instanceof HTMLElement)) {
-          return Constructor.create(sourceElements as any, 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,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 };
+}

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,
   });
@@ -80,7 +78,6 @@ type EditorCreator = {
 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 './get-editor-roots-values';