ckeditor5-livewire 1.12.0 → 1.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-livewire",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "description": "CKEditor 5 integration for Laravel Livewire",
   "author": "Mateusz Bagiński <cziken58@gmail.com>",
   "license": "MIT",

package/src/hooks/editor/editor.ts

@@ -2,6 +2,7 @@ import type { Editor } from 'ckeditor5';
 
 import type { RootAttributesUpdater } from '../utils';
 import type { EditorId, EditorLanguage, EditorPreset } from './typings';
+import type { EditableItem } from './utils';
 
 import { ContextsRegistry } from '../../hooks/context';
 import { isEmptyObject, waitFor } from '../../shared';
@@ -13,8 +14,7 @@ import {
   createSyncEditorWithInputPlugin,
 } from './plugins';
 import {
-  assignInitialDataToEditorConfig,
-  assignSourceElementsToEditorConfig,
+  assignEditorRootsToConfig,
   cleanupOrphanEditorElements,
   createEditorInContext,
   isSingleRootEditor,
@@ -22,8 +22,7 @@ import {
   loadEditorConstructor,
   loadEditorPlugins,
   normalizeCustomTranslations,
-  queryEditablesElements,
-  queryEditablesSnapshotContent,
+  queryAllEditorEditables,
   resolveEditorConfigElementReferences,
   resolveEditorConfigTranslations,
   setEditorEditableHeight,
@@ -145,7 +144,6 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
       saveDebounceMs,
       language,
       watchdog: useWatchdog,
-      content,
     } = this.canonical;
 
     const {
@@ -193,70 +191,45 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
       ]
         .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 instanceof HTMLElement) && !('main' in sourceElements)) {
-          const requiredRoots = (
-            editorType === 'decoupled'
-              ? ['main']
-              : Object.keys(initialData as Record<string, string>)
-          );
-
-          if (!checkIfAllRootsArePresent(sourceElements, requiredRoots)) {
-            sourceElements = await waitForAllRootsToBePresent(editorId, requiredRoots);
-            initialData = {
-              ...content,
-              ...queryEditablesSnapshotContent(editorId),
-            };
-          }
-        }
+      if (!checkIfAllRootsArePresent(editables, requiredRoots)) {
+        editables = await waitForAllRootsToBePresent(editorId, requiredRoots);
+      }
 
-        // If single root editor, unwrap the element from the object.
-        if (isSingleRootEditor(editorType) && 'main' in sourceElements) {
-          sourceElements = sourceElements['main'];
-        }
+      // Do some postprocessing on received configuration.
+      let resolvedConfig = {
+        ...config,
+        licenseKey,
+        plugins: loadedPlugins,
+        language,
+        ...mixedTranslations.length && {
+          translations: mixedTranslations,
+        },
+      };
 
-        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);
-
-        // Construct parsed config.
-        const parsedConfig = {
-          ...resolvedConfig,
-          licenseKey,
-          plugins: loadedPlugins,
-          language,
-          ...mixedTranslations.length && {
-            translations: mixedTranslations,
-          },
-        };
+      resolvedConfig = resolveEditorConfigElementReferences(resolvedConfig);
+      resolvedConfig = resolveEditorConfigTranslations([...mixedTranslations].reverse(), language.ui, resolvedConfig);
+      resolvedConfig = assignEditorRootsToConfig(Constructor, editables, resolvedConfig);
 
-        if (!context || !(sourceElements instanceof HTMLElement)) {
-          return Constructor.create(parsedConfig);
+      // Depending of the editor type, and parent lookup for nearest context or initialize it without it.
+      const editor = await (async () => {
+        if (!context) {
+          return Constructor.create(resolvedConfig);
         }
 
         const result = await createEditorInContext({
           context,
           creator: Constructor,
-          config: parsedConfig,
+          config: resolvedConfig,
         });
 
         return result.editor;
@@ -303,42 +276,42 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
 }
 
 /**
- * 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/hooks/editor/utils/assign-editor-roots-to-config.ts

@@ -0,0 +1,60 @@
+import type { EditorConfig } from 'ckeditor5';
+
+import type { EditorRelaxedConstructor } from '../types/editor-relaxed-constructor.type';
+import type { EditableItem } from './query-all-editor-editables';
+
+/**
+ * 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 ?? {}),
+  ]);
+
+  /* v8 ignore start -- @preserve */
+  const rootsConfig = Array.from(allRootsKeys).reduce((acc, rootKey) => ({
+    ...acc,
+    [rootKey]: {
+      ...config.roots?.[rootKey],
+      ...rootKey === 'main' ? config.root : {},
+      ...rootKey in editables
+        ? {
+            ...editables[rootKey]!.content !== null && {
+              initialData: editables[rootKey]!.content,
+            },
+            ...!isClassicEditor && editables[rootKey]!.element !== null && {
+              element: editables[rootKey]!.element,
+            },
+          }
+        : {},
+    },
+  }), Object.create(config.roots || {}));
+  /* v8 ignore stop */
+
+  const mappedConfig: C = {
+    ...config,
+    roots: rootsConfig,
+    ...isClassicEditor && editables['main']?.element && {
+      attachTo: editables['main'].element,
+    },
+  };
+
+  delete mappedConfig.root;
+
+  return mappedConfig;
+}

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

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

@@ -0,0 +1,77 @@
+import type { EditorId } from '../typings';
+
+/**
+ * Queries all editable elements within a specific editor instance. It picks
+ * initial values from Livewire component canonicals or from the root editor
+ * component's content, whichever is available.
+ *
+ * Roots present in the editor component's content but without a matching
+ * `ckeditor5-editable` component 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 = window.Livewire
+    .all()
+    .filter(({ name, canonical }) => name === 'ckeditor5-editable' && canonical['editorId'] === editorId)
+    .reduce<Record<string, EditableItem>>((acc, { canonical, el }) => {
+      const rootName = canonical['rootName'] as string;
+
+      acc[rootName] = {
+        element: el.querySelector<HTMLElement>('[data-cke-editable-content]'),
+        content: canonical['content'],
+      };
+
+      return acc;
+    }, Object.create({}));
+
+  const rootHook = window.Livewire
+    .all()
+    .find(({ name, canonical }) => name === 'ckeditor5' && canonical['editorId'] === editorId);
+
+  /* v8 ignore next -- @preserve */
+  if (!rootHook) {
+    return acc;
+  }
+
+  // v8 ignore next -- @preserve
+  const editorContent: Record<string, string> = (rootHook.canonical.content as Record<string, string>) ?? {};
+  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 component 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 component 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/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,CA+BH"}

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,CAwCH"}

package/dist/hooks/editor/utils/query-editor-editables.d.ts

@@ -1,32 +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>;
-/**
- * Queries all editable elements within a specific editor instance.
- *
- * @param editorId The ID of the editor to query.
- * @returns An object mapping editable names to their corresponding elements and initial values.
- */
-export declare function queryAllEditorEditables(editorId: EditorId): Record<string, EditableItem>;
-/**
- * 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/hooks/editor/utils/query-editor-editables.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"query-editor-editables.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/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;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CA+CxF;AAED;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,CAAC,QAAQ,EAAE,QAAQ,GAIW,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAChG;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,CAAC"}

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

@@ -1,48 +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 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

@@ -1,61 +0,0 @@
-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/query-editor-editables.ts

@@ -1,93 +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);
-}
-
-/**
- * Queries all editable elements within a specific editor instance.
- *
- * @param editorId The ID of the editor to query.
- * @returns An object mapping editable names to their corresponding elements and initial values.
- */
-export function queryAllEditorEditables(editorId: EditorId): Record<string, EditableItem> {
-  const acc = (
-    window.Livewire
-      .all()
-      .filter(({ name, canonical }) => name === 'ckeditor5-editable' && canonical['editorId'] === editorId)
-      .reduce<Record<string, EditableItem>>((acc, { canonical, el }) => ({
-        ...acc,
-        [canonical['rootName'] as string]: {
-          element: el.querySelector('[data-cke-editable-content]')!,
-          content: canonical['content'],
-        },
-      }), Object.create({}))
-  );
-
-  const rootHook = (
-    window.Livewire
-      .all()
-      .find(({ name, canonical }) => name === 'ckeditor5' && canonical['editorId'] === editorId)
-  );
-
-  const initialRootEditableValue = rootHook?.canonical.content as Record<string, string> | null;
-  const contentElement = document.querySelector<HTMLElement>(`#${editorId}_editor `);
-  const currentMain = acc['main'];
-
-  // 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;
-}
-
-/**
- * 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>;
-}
-
-/**
- * Type representing an editable item within an editor.
- */
-export type EditableItem = {
-  element: HTMLElement;
-  content: string | null;
-};