ckeditor5-symfony 1.0.0 → 1.0.2

package/src/elements/editable.test.ts

@@ -6,10 +6,11 @@ import {
   createEditorPreset,
   renderTestEditable,
   renderTestEditor,
+  waitForDestroyAllEditors,
   waitForTestEditor,
 } from '~/test-utils';
 
-import { EditorsRegistry } from './editor/editors-registry';
+import { timeout } from '../shared';
 import { registerCustomElements } from './register-custom-elements';
 
 describe('editable component', () => {
@@ -22,8 +23,9 @@ describe('editable component', () => {
     vi.useRealTimers();
     vi.resetAllMocks();
 
+    await waitForDestroyAllEditors();
+
     document.body.innerHTML = '';
-    EditorsRegistry.the.reset();
   });
 
   describe('mounting editable', () => {
@@ -155,6 +157,25 @@ describe('editable component', () => {
         expect(editable.getAttribute('data-cke-editor-id')).toBe('test-editor');
       });
     });
+
+    it('should not initialize editable if element is disconnected before editor is ready', async () => {
+      const el = renderTestEditable({
+        rootName: 'foo',
+        content: '<p>Foo</p>',
+      });
+      el.remove();
+
+      renderTestEditor({
+        preset: createEditorPreset('multiroot'),
+        content: {},
+      });
+
+      const editor = await waitForTestEditor<MultiRootEditor>();
+
+      await timeout(10);
+
+      expect(editor.model.document.getRoot('foo')).toBe(null);
+    });
   });
 
   describe('input value synchronization', () => {

package/src/elements/editable.ts

@@ -12,7 +12,7 @@ export class EditableComponentElement extends HTMLElement {
   /**
    * The promise that resolves when the editable is mounted.
    */
-  private editorPromise: Promise<MultiRootEditor> | null = null;
+  private editorPromise: Promise<MultiRootEditor | null> | null = null;
 
   /**
    * Mounts the editable component.
@@ -37,6 +37,10 @@ export class EditableComponentElement extends HTMLElement {
     // If the editor is not registered yet, we will wait for it to be registered.
     this.style.display = 'block';
     this.editorPromise = EditorsRegistry.the.execute(editorId, async (editor: MultiRootEditor) => {
+      if (!this.isConnected) {
+        return null;
+      }
+
       const input = this.querySelector('input') as HTMLInputElement | null;
       const { ui, editing, model } = editor;
 
@@ -106,7 +110,14 @@ export class EditableComponentElement extends HTMLElement {
       const root = editor.model.document.getRoot(rootName);
 
       if (root && 'detachEditable' in editor) {
-        editor.detachEditable(root);
+        try {
+          editor.detachEditable(root);
+        }
+        catch (err) {
+          // Ignore errors when detaching editable.
+          console.error('Unable unmount editable from root:', err);
+        }
+
         editor.detachRoot(rootName, false);
       }
     }

package/src/elements/editor/editor.test.ts

@@ -19,27 +19,28 @@ import {
   isEditorShown,
   renderTestEditable,
   renderTestEditor,
+  waitForDestroyAllEditors,
   waitForTestEditor,
 } from '~/test-utils';
 
 import { timeout } from '../../shared/timeout';
 import { registerCustomElements } from '../register-custom-elements';
 import { CustomEditorPluginsRegistry } from './custom-editor-plugins';
-import { EditorsRegistry } from './editors-registry';
 import { unwrapEditorWatchdog } from './utils';
 
 describe('editor component', () => {
-  beforeEach(() => {
+  beforeEach(async () => {
     document.body.innerHTML = '';
     registerCustomElements();
   });
 
   afterEach(async () => {
     vi.useRealTimers();
+    vi.resetAllMocks();
+
     document.body.innerHTML = '';
 
-    CustomEditorPluginsRegistry.the.unregisterAll();
-    EditorsRegistry.the.reset();
+    await waitForDestroyAllEditors();
   });
 
   it('should save the editor instance in the registry with provided editorId', async () => {
@@ -219,14 +220,17 @@ describe('editor component', () => {
           },
         });
 
-        await timeout(500); // Simulate some delay before adding the root.
-
-        renderTestEditable(createEditableSnapshot('header', '<p>Editable content overrides snapshot content</p>'));
+        renderTestEditable(
+          createEditableSnapshot('header', '<p>Editable content overrides snapshot content</p>'),
+        );
 
         const editor = await waitForTestEditor();
 
         expect(editor).toBeInstanceOf(MultiRootEditor);
-        expect(editor.getData({ rootName: 'header' })).toBe('<p>Editable content overrides snapshot content</p>');
+
+        await vi.waitFor(() => {
+          expect(editor.getData({ rootName: 'header' })).toBe('<p>Editable content overrides snapshot content</p>');
+        });
       });
 
       it('should not crash after setting content using `setData`', async () => {
@@ -242,6 +246,23 @@ describe('editor component', () => {
           editor.setData('<p>New content</p>');
         }).not.toThrow();
       });
+
+      it('should update root data if root already exists but editable has different content', async () => {
+        renderTestEditor({
+          preset: createEditorPreset('multiroot'),
+          content: {},
+        });
+
+        const editor = await waitForTestEditor<MultiRootEditor>();
+
+        editor.addRoot('existingRoot', { data: '<p>Old content</p>' });
+
+        renderTestEditable(createEditableSnapshot('existingRoot', '<p>New content</p>'));
+
+        await vi.waitFor(() => {
+          expect(editor.getData({ rootName: 'existingRoot' })).toBe('<p>New content</p>');
+        });
+      });
     });
   });
 

package/src/elements/ui-part.test.ts

@@ -5,10 +5,11 @@ import {
   createUIPartSnapshot,
   renderTestEditor,
   renderTestUIPart,
+  waitForDestroyAllEditors,
   waitForTestEditor,
 } from '~/test-utils';
 
-import { CustomEditorPluginsRegistry } from './editor/custom-editor-plugins';
+import { timeout } from '../shared';
 import { EditorsRegistry } from './editor/editors-registry';
 import { registerCustomElements } from './register-custom-elements';
 
@@ -19,10 +20,11 @@ describe('ui-part component', () => {
   });
 
   afterEach(async () => {
+    vi.useRealTimers();
+    vi.resetAllMocks();
+
+    await waitForDestroyAllEditors();
     document.body.innerHTML = '';
-    CustomEditorPluginsRegistry.the.unregisterAll();
-    EditorsRegistry.the.reset();
-    vi.restoreAllMocks();
   });
 
   describe('mounting ui part', () => {
@@ -86,6 +88,18 @@ describe('ui-part component', () => {
 
       expect(toolbarElement).toBeTruthy();
     });
+
+    it('should not mount UI part if element is disconnected before editor is ready', async () => {
+      const el = renderTestUIPart(createUIPartSnapshot('toolbar'));
+      el.remove();
+
+      appendMultirootEditor();
+
+      await waitForTestEditor();
+      await timeout(10);
+
+      expect(el.innerHTML).toBe('');
+    });
   });
 
   describe('destroying ui part', () => {

package/src/elements/ui-part.ts

@@ -29,6 +29,10 @@ export class UIPartComponentElement extends HTMLElement {
     // If the editor is not registered yet, we will wait for it to be registered.
     this.style.display = 'block';
     this.mountedPromise = EditorsRegistry.the.execute(editorId, (editor) => {
+      if (!this.isConnected) {
+        return;
+      }
+
       const { ui } = editor;
 
       const uiViewName = mapUIPartView(name);