ckeditor5-phoenix 1.27.1 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-phoenix",
-  "version": "1.27.1",
+  "version": "1.28.0",
   "description": "CKEditor 5 integration for Phoenix Framework",
   "author": "Mateusz Bagiński <cziken58@gmail.com>",
   "license": "MIT",
@@ -24,8 +24,8 @@
     "test-utils"
   ],
   "dependencies": {
-    "ckeditor5": "^48.1.0",
-    "ckeditor5-premium-features": "^48.1.0",
+    "ckeditor5": "^48.2.0",
+    "ckeditor5-premium-features": "^48.2.0",
     "phoenix_live_view": "^1.0.17"
   },
   "devDependencies": {

package/src/hooks/editable.test.ts

@@ -105,6 +105,35 @@ describe('editable hook', () => {
 
       expect(editor.getData({ rootName: 'foo' })).toBe('<p>Foo</p>');
     });
+
+    it('should set proper root element name on initial added root', async () => {
+      const editable = createEditableHtmlElement({
+        name: 'foo',
+        initialValue: '<p>Foo</p>',
+        modelElement: '$inlineRoot',
+      });
+
+      document.body.appendChild(editable);
+
+      const editor = await appendMultirootEditor();
+      EditableHook.mounted.call({ el: editable });
+
+      expect(editor.model.document.getRoot('foo')?.name).to.be.equal('$inlineRoot');
+    });
+
+    it('should set proper root element name on lazy added root', async () => {
+      const editor = await appendMultirootEditor();
+      const editable = createEditableHtmlElement({
+        name: 'foo',
+        initialValue: '<p>Foo</p>',
+        modelElement: '$inlineRoot',
+      });
+
+      document.body.appendChild(editable);
+      EditableHook.mounted.call({ el: editable });
+
+      expect(editor.model.document.getRoot('foo')?.name).to.be.equal('$inlineRoot');
+    });
   });
 
   describe('value synchronization', () => {

package/src/hooks/editable.ts

@@ -22,6 +22,7 @@ class EditableHookImpl extends ClassHook {
       editableId: this.el.getAttribute('id')!,
       editorId: this.el.getAttribute('data-cke-editor-id') || null,
       rootName: this.el.getAttribute('data-cke-editable-root-name')!,
+      modelElement: this.el.getAttribute('data-cke-editable-root-model-element-name') || null,
       initialValue: this.el.getAttribute('data-cke-editable-initial-value') || '',
     };
 
@@ -39,7 +40,7 @@ class EditableHookImpl extends ClassHook {
    * Mounts the editable component.
    */
   override mounted() {
-    const { editableId, editorId, rootName, initialValue } = this.attrs;
+    const { editableId, editorId, rootName, initialValue, modelElement } = this.attrs;
 
     const unmountEffect = EditorsRegistry.the.mountEffect(editorId, (editor: MultiRootEditor | DecoupledEditor) => {
       const contentElement = this.el.querySelector('[data-cke-editable-content]') as HTMLElement;
@@ -57,6 +58,7 @@ class EditableHookImpl extends ClassHook {
         editor.addRoot(rootName, {
           isUndoable: false,
           initialData: initialValue,
+          modelElement: modelElement || '$root',
         });
 
         const editable = ui.view.createEditable(rootName, contentElement);

package/src/hooks/editor/editor.test.ts

@@ -111,6 +111,19 @@ describe('editor hook', () => {
 
         expect(isEditorShown()).toBe(true);
       });
+
+      it('should be possible to specify root element name', async () => {
+        const hookElement = createEditorHtmlElement({
+          modelElement: '$inlineRoot',
+        });
+
+        document.body.appendChild(hookElement);
+        EditorHook.mounted.call({ el: hookElement });
+
+        const editor = await waitForTestEditor();
+
+        expect(editor.model.document.getRoot()?.name).to.be.equal('$inlineRoot');
+      });
     });
 
     describe('decoupled', () => {
@@ -249,6 +262,57 @@ describe('editor hook', () => {
         expect(editor).toBeInstanceOf(DecoupledEditor);
         expect(editor.getData()).toBe('<p>XD</p>');
       });
+
+      it('should be possible to specify root element name using global config (if editable model element not specified)', async () => {
+        const hookElement = createEditorHtmlElement({
+          preset: createEditorPreset('decoupled'),
+          modelElement: '$inlineRoot',
+        });
+
+        document.body.appendChild(hookElement);
+        document.body.appendChild(createEditableHtmlElement());
+
+        EditorHook.mounted.call({ el: hookElement });
+
+        const editor = await waitForTestEditor();
+
+        expect(editor.model.document.getRoot()?.name).toEqual('$inlineRoot');
+      });
+
+      it('should be possible to specify root element name using editable config alone', async () => {
+        const hookElement = createEditorHtmlElement({
+          preset: createEditorPreset('decoupled'),
+        });
+
+        document.body.appendChild(hookElement);
+        document.body.appendChild(createEditableHtmlElement({
+          modelElement: '$inlineRoot',
+        }));
+
+        EditorHook.mounted.call({ el: hookElement });
+
+        const editor = await waitForTestEditor();
+
+        expect(editor.model.document.getRoot()?.name).toEqual('$inlineRoot');
+      });
+
+      it('should use editable root element name config if both specified', async () => {
+        const hookElement = createEditorHtmlElement({
+          preset: createEditorPreset('decoupled'),
+          modelElement: '$miamia',
+        });
+
+        document.body.appendChild(hookElement);
+        document.body.appendChild(createEditableHtmlElement({
+          modelElement: '$inlineRoot',
+        }));
+
+        EditorHook.mounted.call({ el: hookElement });
+
+        const editor = await waitForTestEditor();
+
+        expect(editor.model.document.getRoot()?.name).toEqual('$inlineRoot');
+      });
     });
 
     describe('inline', () => {
@@ -313,6 +377,36 @@ describe('editor hook', () => {
           '<p>Third root</p>',
         );
       });
+
+      it('should create a multiroot editor with inline editables', async () => {
+        const hookElement = createEditorHtmlElement({
+          preset: createEditorPreset('multiroot'),
+        });
+
+        document.body.appendChild(hookElement);
+        document.body.appendChild(
+          createEditableHtmlElement({
+            name: 'second',
+            initialValue: '<p>Second root</p>',
+            modelElement: '$inlineRoot',
+          }),
+        );
+
+        document.body.appendChild(
+          createEditableHtmlElement({
+            name: 'third',
+            initialValue: '<p>Third root</p>',
+            modelElement: '$inlineRoot',
+          }),
+        );
+
+        EditorHook.mounted.call({ el: hookElement });
+
+        const editor = await waitForTestEditor();
+
+        expect(editor.model.document.getRoot('second')?.name).toEqual('$inlineRoot');
+        expect(editor.model.document.getRoot('third')?.name).toEqual('$inlineRoot');
+      });
     });
   });
 

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,34 +233,16 @@ 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 single root editor, unwrap the element from the object.
-      if (isSingleRootEditor(type) && 'main' in sourceElements) {
-        sourceElements = sourceElements['main'];
+      if (!checkIfAllRootsArePresent(editables, requiredRoots)) {
+        editables = await waitForAllRootsToBePresent(editorId, requiredRoots);
       }
 
       // Do some postprocessing on received configuration.
@@ -277,8 +258,7 @@ class EditorHookImpl extends ClassHook {
 
       resolvedConfig = resolveEditorConfigElementReferences(resolvedConfig);
       resolvedConfig = resolveEditorConfigTranslations([...mixedTranslations].reverse(), language.ui, resolvedConfig);
-      resolvedConfig = assignSourceElementsToEditorConfig(Constructor, sourceElements, resolvedConfig);
-      resolvedConfig = assignInitialDataToEditorConfig(initialData, resolvedConfig);
+      resolvedConfig = assignEditorRootsToConfig(Constructor, editables, resolvedConfig);
 
       const editor = await (async () => {
         if (!context) {
@@ -337,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/plugins/sync-editor-with-phoenix.ts

@@ -168,7 +168,7 @@ function getEditorRootsValues(editor: Editor) {
   return roots.reduce<Record<string, string>>((acc, rootName) => {
     acc[rootName] = editor.getData({ rootName });
     return acc;
-  }, Object.create({}));
+  }, Object.create(null));
 }
 
 /**

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

@@ -0,0 +1,58 @@
+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.
+ *
+ * @param Editor Constructor of the editor used to determine the location of element config entry.
+ * @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 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 start */
+      ...rootKey in editables
+        ? {
+            initialData: editables[rootKey]!.initialValue,
+            modelElement: editables[rootKey]!.modelElement || '$root',
+            ...!isClassicEditor && {
+              element: editables[rootKey]!.content,
+            },
+          }
+        : {},
+      /* v8 ignore end */
+    },
+  }), { ...config.roots || {} });
+
+  const mappedConfig: C = {
+    ...config,
+    roots: rootsConfig,
+    ...isClassicEditor && {
+      attachTo: editables['main']?.content,
+    },
+  };
+
+  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 './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.
  *
@@ -49,6 +20,7 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
       .from(iterator)
       .reduce<Record<string, EditableItem>>((acc, element) => {
         const name = element.getAttribute('data-cke-editable-root-name');
+        const modelElement = element.getAttribute('data-cke-editable-root-model-element-name') || null;
         const initialValue = element.getAttribute('data-cke-editable-initial-value') || '';
         const content = element.querySelector('[data-cke-editable-content]') as HTMLElement;
 
@@ -61,9 +33,10 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
           [name]: {
             content,
             initialValue,
+            modelElement,
           },
         };
-      }, Object.create({}))
+      }, Object.create(null))
   );
 
   const rootEditorElement = document.querySelector<HTMLElement>(`[phx-hook="CKEditor5"][id="${editorId}"]`);
@@ -72,26 +45,29 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
     return acc;
   }
 
+  const rootEditorModelElement = rootEditorElement.getAttribute('data-cke-root-model-element-name');
   const initialRootEditableValue = rootEditorElement.getAttribute('data-cke-initial-value') || '';
-  const contentElement = rootEditorElement.querySelector<HTMLElement>(`#${editorId}_editor `);
-  const currentMain = acc['main'];
 
-  if (currentMain) {
+  if (acc['main']) {
     return {
       ...acc,
       main: {
-        ...currentMain,
-        initialValue: currentMain.initialValue || initialRootEditableValue,
+        ...acc['main'],
+        modelElement: acc['main'].modelElement || rootEditorModelElement,
+        initialValue: acc['main'].initialValue || initialRootEditableValue,
       },
     };
   }
 
+  const contentElement = rootEditorElement.querySelector<HTMLElement>(`#${editorId}_editor `);
+
   if (contentElement) {
     return {
       ...acc,
       main: {
         content: contentElement,
         initialValue: initialRootEditableValue,
+        modelElement: rootEditorElement.getAttribute('data-cke-root-model-element-name') || '$root',
       },
     };
   }
@@ -105,4 +81,5 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
 export type EditableItem = {
   content: HTMLElement;
   initialValue: string;
+  modelElement: string | null;
 };

package/test-utils/editor/create-editable-html-element.ts

@@ -12,12 +12,14 @@ export function createEditableHtmlElement(
     editorId,
     initialValue,
     withInput = false,
+    modelElement,
   }: {
     id?: string;
     editorId?: EditorId;
     name?: string;
     initialValue?: string;
     withInput?: boolean;
+    modelElement?: string;
   } = {},
 ) {
   return html.div(
@@ -30,6 +32,9 @@ export function createEditableHtmlElement(
       ...initialValue && {
         'data-cke-editable-initial-value': initialValue,
       },
+      ...modelElement && {
+        'data-cke-editable-root-model-element-name': modelElement,
+      },
     },
     html.div({
       'class': 'editable-content',

package/test-utils/editor/create-editor-html-element.ts

@@ -20,6 +20,7 @@ export function createEditorHtmlElement(
     readyEvent = false,
     watchdog = false,
     saveDebounceMs = undefined,
+    modelElement,
     language,
     hookAttrs,
   }: EditorCreatorAttrs = {},
@@ -63,6 +64,9 @@ export function createEditorHtmlElement(
       ...contextId && {
         'data-cke-context-id': contextId,
       },
+      ...modelElement && {
+        'data-cke-root-model-element-name': modelElement,
+      },
       ...hookAttrs,
     },
     !['multiroot', 'decoupled'].includes(preset.type) && html.div({ id: `${id}_editor` }),
@@ -91,5 +95,6 @@ type EditorCreatorAttrs = {
   watchdog?: boolean;
   saveDebounceMs?: number;
   hookAttrs?: Record<string, string>;
+  modelElement?: string;
   language?: { ui?: string; content?: string; };
 };

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 };
-}