ckeditor5-phoenix 1.27.2 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-phoenix",
-  "version": "1.27.2",
+  "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/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

@@ -30,15 +30,19 @@ export function assignEditorRootsToConfig<C extends EditorConfig>(
       ...config.roots?.[rootKey],
       ...rootKey === 'main' ? config.root : {},
 
-      /* v8 ignore next 6 */
+      /* v8 ignore start */
       ...rootKey in editables
         ? {
             initialData: editables[rootKey]!.initialValue,
-            ...!isClassicEditor && { element: editables[rootKey]!.content },
+            modelElement: editables[rootKey]!.modelElement || '$root',
+            ...!isClassicEditor && {
+              element: editables[rootKey]!.content,
+            },
           }
         : {},
+      /* v8 ignore end */
     },
-  }), Object.create(config.roots || {}));
+  }), { ...config.roots || {} });
 
   const mappedConfig: C = {
     ...config,

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

@@ -20,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;
 
@@ -32,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}"]`);
@@ -43,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',
       },
     };
   }
@@ -76,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; };
 };