ckeditor5-blazor 1.11.0 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-blazor",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "CKEditor 5 integration for Blazor",
   "license": "MIT",
   "repository": {

package/src/elements/editor/editor.ts

@@ -1,5 +1,6 @@
 import type { WaitForInteractiveResult } from '../../shared';
 import type { EditorId, EditorLanguage, EditorPreset } from './typings';
+import type { EditableItem } from './utils';
 
 import {
   isEmptyObject,
@@ -14,8 +15,7 @@ import {
   createSyncEditorWithInputPlugin,
 } from './plugins';
 import {
-  assignInitialDataToEditorConfig,
-  assignSourceElementsToEditorConfig,
+  assignEditorRootsToConfig,
   cleanupOrphanEditorElements,
   createEditorInContext,
   isSingleRootEditor,
@@ -24,8 +24,7 @@ import {
   loadEditorPlugins,
   normalizeCustomTranslations,
   normalizeEditorLanguage,
-  queryEditablesElements,
-  queryEditablesSnapshotContent,
+  queryAllEditorEditables,
   resolveEditorConfigElementReferences,
   resolveEditorConfigTranslations,
   setEditorEditableHeight,
@@ -158,7 +157,6 @@ export class EditorComponentElement extends HTMLElement {
     const editableHeight = this.getAttribute('data-cke-editable-height') ? Number.parseInt(this.getAttribute('data-cke-editable-height')!, 10) : null;
     const saveDebounceMs = Number.parseInt(this.getAttribute('data-cke-save-debounce-ms')!, 10);
     const useWatchdog = this.hasAttribute('data-cke-watchdog');
-    const content = JSON.parse(this.getAttribute('data-cke-content')!) as Record<string, string>;
     const language = (
       this.getAttribute('data-cke-language')
         ? JSON.parse(this.getAttribute('data-cke-language')!)
@@ -200,59 +198,36 @@ export class EditorComponentElement extends HTMLElement {
       ]
         .filter(translations => !isEmptyObject(translations));
 
-      // Let's query all elements, and create basic configuration.
-      let initialData: string | Record<string, string> = {
-        ...content,
-        ...queryEditablesSnapshotContent(editorId),
-      };
+      // Query all editable elements along with their content in one pass.
+      // Roots present in the editor container's data-cke-content but not yet in the DOM
+      // are included with element: null so we know which roots to wait for.
+      let editables = queryAllEditorEditables(editorId);
+      const requiredRoots = Object.keys(editables);
 
       if (isSingleRootEditor(editorType)) {
-        initialData = initialData['main'] || '';
+        requiredRoots.push('main');
       }
 
-      // 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['main']) {
-          const requiredRoots = (
-            isSingleRootEditor(editorType)
-              ? ['main']
-              : Object.keys(initialData as Record<string, string>)
-          );
-
-          if (!checkIfAllRootsArePresent(sourceElements, requiredRoots)) {
-            sourceElements = await waitForAllRootsToBePresent(editorId, requiredRoots);
-            initialData = {
-              ...content,
-              ...queryEditablesSnapshotContent(editorId),
-            };
-          }
-        }
-
-        // If single root editor, unwrap the element from the object.
-        if (isSingleRootEditor(editorType) && 'main' in sourceElements) {
-          sourceElements = sourceElements['main'];
-        }
+      if (!checkIfAllRootsArePresent(editables, requiredRoots)) {
+        editables = await waitForAllRootsToBePresent(editorId, requiredRoots);
+      }
 
-        // Do some postprocessing on received configuration.
-        let resolvedConfig = {
-          ...config,
-          licenseKey,
-          plugins: loadedPlugins,
-          language,
-          ...mixedTranslations.length && {
-            translations: mixedTranslations,
-          },
-        };
+      // Do some postprocessing on received configuration.
+      let resolvedConfig = {
+        ...config,
+        licenseKey,
+        plugins: loadedPlugins,
+        language,
+        ...mixedTranslations.length && {
+          translations: mixedTranslations,
+        },
+      };
 
-        resolvedConfig = resolveEditorConfigElementReferences(resolvedConfig);
-        resolvedConfig = resolveEditorConfigTranslations([...mixedTranslations].reverse(), language.ui, resolvedConfig);
-        resolvedConfig = assignSourceElementsToEditorConfig(Constructor, sourceElements, resolvedConfig);
-        resolvedConfig = assignInitialDataToEditorConfig(initialData, resolvedConfig);
+      resolvedConfig = resolveEditorConfigElementReferences(resolvedConfig);
+      resolvedConfig = resolveEditorConfigTranslations([...mixedTranslations].reverse(), language.ui, resolvedConfig);
+      resolvedConfig = assignEditorRootsToConfig(Constructor, editables, resolvedConfig);
 
+      const editor = await (async () => {
         if (!context) {
           return Constructor.create(resolvedConfig);
         }
@@ -313,42 +288,42 @@ export class EditorComponentElement extends HTMLElement {
 }
 
 /**
- * Checks if all required root elements are present in the elements object.
+ * Checks if all required root elements are present (i.e. have a non-null element) in the editables map.
  *
- * @param elements The elements object mapping root IDs to HTMLElements.
- * @param requiredRoots The list of required root IDs.
- * @returns True if all required roots are present, false otherwise.
+ * @param editables The editables map keyed by root name.
+ * @param requiredRoots The list of required root names.
+ * @returns True if all required roots have a DOM element attached, 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]?.element);
 }
 
 /**
  * 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 updated editables map once all elements are attached.
  */
 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]?.element).join(', ')}.`,
         );
       }
 
-      return elements;
+      return editables;
     },
     { timeOutAfter: 2000, retryAfter: 100 },
   );

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

@@ -0,0 +1,60 @@
+import type { EditorRelaxedConstructor } from '../types/editor-relaxed-constructor.type';
+import type { EditableItem } from './query-all-editor-editables';
+import type { EditorConfig } from 'ckeditor5';
+
+/**
+ * Assigns DOM elements and initial data to the editor configuration in a way that is compatible
+ * with the specific editor type.
+ *
+ * Roots with `element: null` (pending roots not yet in the DOM) contribute only `initialData`
+ * and are skipped for element assignment.
+ *
+ * @param Editor Constructor of the editor used to determine the location of element config entry.
+ * @param editables Map of editable items (element + content) keyed by root name.
+ * @param config Config of the editor.
+ * @returns The updated configuration object.
+ */
+export function assignEditorRootsToConfig<C extends EditorConfig>(
+  Editor: EditorRelaxedConstructor,
+  editables: Record<string, EditableItem>,
+  config: C,
+): C {
+  const isClassicEditor = !Editor.editorName || Editor.editorName === 'ClassicEditor';
+  const allRootsKeys = new Set([
+    ...Object.keys(editables),
+    ...Object.keys(config.roots ?? {}),
+  ]);
+
+  const rootsConfig = Array.from(allRootsKeys).reduce((acc, rootKey) => ({
+    ...acc,
+    [rootKey]: {
+      /* v8 ignore next 1 */
+      ...config.roots?.[rootKey],
+      ...rootKey === 'main' ? config.root : {},
+
+      /* v8 ignore next 11 */
+      ...rootKey in editables
+        ? {
+            ...editables[rootKey]!.content !== null && {
+              initialData: editables[rootKey]!.content,
+            },
+            ...!isClassicEditor && editables[rootKey]!.element !== null && {
+              element: editables[rootKey]!.element,
+            },
+          }
+        : {},
+    },
+  }), Object.create(config.roots || {}));
+
+  const mappedConfig: C = {
+    ...config,
+    roots: rootsConfig,
+    ...isClassicEditor && editables['main']?.element && {
+      attachTo: editables['main'].element,
+    },
+  };
+
+  delete mappedConfig.root;
+
+  return mappedConfig;
+}

package/src/elements/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 './get-editor-roots-values';
@@ -9,8 +8,8 @@ export * from './load-editor-plugins';
 export * from './load-editor-translations';
 export * from './normalize-custom-translations';
 export * from './normalize-editor-language';
+export * from './query-all-editor-editables';
 export * from './query-all-editor-ids';
-export * from './query-editor-editables';
 export * from './resolve-editor-config-elements-references';
 export * from './resolve-editor-config-translations';
 export * from './set-editor-editable-height';

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

@@ -0,0 +1,74 @@
+import type { EditorId } from '../typings';
+
+/**
+ * Queries all editable elements within a specific editor instance. It picks
+ * initial values from actually rendered elements or from the editor container's
+ * `data-cke-content` attribute, whichever is available.
+ *
+ * Roots present in the editor container's content but without a matching
+ * `cke5-editable` element yet are included with `element: null` — these are
+ * "pending" roots that haven't been attached to the DOM yet.
+ *
+ * @param editorId The ID of the editor to query.
+ * @returns An object mapping root names to their corresponding elements and content.
+ */
+export function queryAllEditorEditables(editorId: EditorId): Record<string, EditableItem> {
+  const acc = Array
+    .from(document.querySelectorAll<HTMLElement>(`cke5-editable[data-cke-editor-id="${editorId}"]`))
+    .reduce<Record<string, EditableItem>>((acc, element) => {
+      const rootName = element.getAttribute('data-cke-root-name')!;
+
+      acc[rootName] = {
+        element: element.querySelector<HTMLElement>('[data-cke-editable-content]'),
+        content: element.getAttribute('data-cke-content'),
+      };
+
+      return acc;
+    }, Object.create({}));
+
+  const rootEditorElement = document.querySelector<HTMLElement>(`cke5-editor[data-cke-editor-id="${editorId}"]`);
+
+  /* v8 ignore next -- @preserve */
+  if (!rootEditorElement) {
+    return acc;
+  }
+
+  // v8 ignore next -- @preserve
+  const editorContent: Record<string, string> = JSON.parse(rootEditorElement.getAttribute('data-cke-content')!) ?? {};
+  const classicMainElement = document.querySelector<HTMLElement>(`#${editorId}_editor`);
+
+  if (classicMainElement && !acc['main']) {
+    acc['main'] = {
+      element: classicMainElement,
+      content: editorContent['main'] || '',
+    };
+  }
+
+  for (const [rootName, rootContent] of Object.entries(editorContent)) {
+    if (acc[rootName]) {
+      // Editable element is already present — fill content from editor level if the editable didn't provide its own.
+      acc[rootName] = {
+        ...acc[rootName],
+        content: acc[rootName].content ?? rootContent,
+      };
+    }
+    else {
+      // Root has server-provided content but its editable element hasn't been attached to the DOM yet.
+      acc[rootName] = {
+        element: null,
+        content: rootContent,
+      };
+    }
+  }
+
+  return acc;
+}
+
+/**
+ * Type representing an editable item within an editor.
+ * `element` is null when the root's DOM element hasn't appeared yet (pending root).
+ */
+export type EditableItem = {
+  element: HTMLElement | null;
+  content: string | null;
+};

package/dist/elements/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/elements/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/elements/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/elements/editor/utils/assign-source-elements-to-editor-config.d.ts

@@ -1,12 +0,0 @@
-import { EditorRelaxedConstructor } from '../types/editor-relaxed-constructor.type';
-import { EditorConfig } from 'ckeditor5';
-/**
- * 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/elements/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/elements/editor/utils/assign-source-elements-to-editor-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;AACzF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;;;;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/dist/elements/editor/utils/query-editor-editables.d.ts

@@ -1,25 +0,0 @@
-import { EditorId } from '../typings';
-/**
- * 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 declare function queryEditablesElements(editorId: EditorId): Record<string, HTMLElement>;
-/**
- * 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 declare function queryEditablesSnapshotContent(editorId: EditorId): Record<string, string>;
-/**
- * Type representing an editable item within an editor.
- */
-export type EditableItem = {
-    element: HTMLElement;
-    content: string | null;
-};
-//# sourceMappingURL=query-editor-editables.d.ts.map

package/dist/elements/editor/utils/query-editor-editables.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"query-editor-editables.d.ts","sourceRoot":"","sources":["../../../../../src/elements/editor/utils/query-editor-editables.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAI3C;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,QAAQ,+BAIxD;AAED;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,CAAC,QAAQ,EAAE,QAAQ,GAIW,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAChG;AAiED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,CAAC"}

package/src/elements/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 };
-}

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

@@ -1,59 +0,0 @@
-import type { EditorRelaxedConstructor } from '../types/editor-relaxed-constructor.type';
-import type { EditorConfig } from 'ckeditor5';
-
-/**
- * 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/elements/editor/utils/query-editor-editables.ts

@@ -1,101 +0,0 @@
-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, ({ element }) => element);
-}
-
-/**
- * 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, ({ content }) => content);
-
-  return filterObjectValues(values, value => typeof value === 'string') as Record<string, string>;
-}
-
-/**
- * Queries all editable elements within a specific editor instance. It picks
- * initial values from actually rendered elements or from the editor container's.
- *
- * It may differ from the `initialData` used during editor creation, as it might
- * not set all roots or set different values.
- *
- * @param editorId The ID of the editor to query.
- * @returns An object mapping editable names to their corresponding elements and initial values.
- */
-function queryAllEditorEditables(editorId: EditorId) {
-  const acc = (
-    Array
-      .from(document.querySelectorAll<HTMLElement>(`cke5-editable[data-cke-editor-id="${editorId}"]`))
-      .reduce<Record<string, EditableItem>>((acc, element) => {
-        const rootName = element.getAttribute('data-cke-root-name')!;
-        const content = element.getAttribute('data-cke-content');
-
-        acc[rootName] = {
-          element: element.querySelector<HTMLElement>('[data-cke-editable-content]')!,
-          content,
-        };
-
-        return acc;
-      }, Object.create({}))
-  );
-
-  const editor = document.querySelector<HTMLElement>(`cke5-editor[data-cke-editor-id="${editorId}"]`);
-
-  /* v8 ignore next -- @preserve */
-  if (!editor) {
-    return acc;
-  }
-
-  const currentMain = acc['main'];
-  const initialRootEditableValue = JSON.parse(editor.getAttribute('data-cke-content')!);
-  const contentElement = document.querySelector<HTMLElement>(`#${editorId}_editor `);
-
-  // If found `main` editable, but it has no content, try to fill it from the editor container.
-  if (currentMain && initialRootEditableValue?.['main']) {
-    return {
-      ...acc,
-      main: {
-        ...currentMain,
-        content: currentMain.content || initialRootEditableValue['main'],
-      },
-    };
-  }
-
-  // If no `main` editable found, try to create it from the editor container.
-  if (contentElement) {
-    return {
-      ...acc,
-      main: {
-        element: contentElement,
-        content: initialRootEditableValue?.['main'] || null,
-      },
-    };
-  }
-
-  return acc;
-}
-
-/**
- * Type representing an editable item within an editor.
- */
-export type EditableItem = {
-  element: HTMLElement;
-  content: string | null;
-};