Instead of a new class for NestedEditor an existing was used

test/cypress/fixtures/tools/NestedEditorTool.ts

@@ -1,123 +0,0 @@
-import type {
-  API,
-  EditorConfig,
-  BaseTool,
-  BlockAPI,
-  BlockToolConstructorOptions,
-  OutputData
-} from '../../../../types';
-import EditorJS from '../../../../types';
-
-export interface NestedEditorToolConfig {
-  editorLibrary: typeof EditorJS,
-  editorTools?: EditorConfig["tools"],
-  editorTunes?: EditorConfig["tunes"],
-}
-
-export interface NestedEditorToolData {
-  nestedEditor: OutputData,
-}
-
-/**
- * Simplified Header for testing
- */
-export class NestedEditorTool implements BaseTool {
-  private api: API;
-  private readOnly: boolean;
-  private block: BlockAPI;
-
-  private config: NestedEditorToolConfig;
-  private _data: NestedEditorToolData;
-
-  private nestedEditor?: EditorJS;
-
-  /**
-   * This flag tells core that current tool supports the read-only mode
-   * @link https://editorjs.io/tools-api#isreadonlysupported
-   */
-  static get isReadOnlySupported(): boolean {
-    return true;
-  }
-
-  /**
-   * With this option, Editor.js won't handle Enter keydowns
-   * @link https://editorjs.io/tools-api#enablelinebreaks
-   */
-  static get enableLineBreaks(): boolean {
-    return true;
-  }
-
-  /**
-   *
-   * @param options - constructor options
-   */
-  constructor({ data, api, config, readOnly, block }: BlockToolConstructorOptions) {
-    this.api = api;
-    this._data = data;
-    this.config = {
-      editorLibrary: config.editorLibrary,
-      editorTools: config.editorTools || {},
-      editorTunes: config.editorTunes || [],
-    };
-    this.readOnly = readOnly;
-    this.block = block;
-  }
-
-  /**
-   * Return Tool's view
-   */
-  public render(): HTMLElement {
-    const rootNode = document.createElement('div');
-    rootNode.classList.add(this.api.styles.block);
-
-    const editorNode = document.createElement('div');
-    editorNode.style.border = '1px solid'
-    editorNode.style.padding = '12px 20px'
-    rootNode.appendChild(editorNode);
-
-    this.nestedEditor = new this.config.editorLibrary({
-      holder: editorNode,
-      data: this.data.nestedEditor,
-      tools: this.config.editorTools,
-      tunes: this.config.editorTunes,
-      minHeight: 150,
-      readOnly: this.readOnly,
-      onChange: () => {
-        this.block.dispatchChange()
-      }
-    });
-
-    return rootNode;
-  }
-
-  /**
-   * Return Tool data
-   */
-  get data(): NestedEditorToolData {
-    return this._data;
-  }
-
-  /**
-   * Stores all Tool's data
-   */
-  set data(data: NestedEditorToolData) {
-    this._data.nestedEditor = data.nestedEditor || {};
-    if (this.nestedEditor) {
-      this.nestedEditor.blocks.render(this.data.nestedEditor);
-    }
-  }
-
-  /**
-   * Extracts Block data from the UI
-   */
-  public async save(): Promise<NestedEditorToolData> {
-    let savedData: OutputData = { blocks: [] }
-    if (this.nestedEditor) {
-      savedData = await this.nestedEditor.save();
-    }
-
-    return {
-      nestedEditor: savedData
-    };
-  }
-}

test/cypress/tests/modules/Ui.cy.ts

@@ -1,6 +1,6 @@
 import { createEditorWithTextBlocks } from '../../support/utils/createEditorWithTextBlocks';
 import type EditorJS from '../../../../types/index';
-import { NestedEditorTool } from '../../fixtures/tools/NestedEditorTool';
+import NestedEditor, { NESTED_EDITOR_ID } from '../../support/utils/nestedEditorInstance';
 
 describe('Ui module', function () {
   describe('documentKeydown', function () {
@@ -142,58 +142,37 @@ describe('Ui module', function () {
     });
 
     it('click on block of nested editor should also set the block of parent editor as current', function () {
-      cy.window()
-        .then((window) => {
-          const editorJsClass = window.EditorJS;
-
-          cy.createEditor({
-            tools: {
-              nestedEditor: {
-                class: NestedEditorTool,
-                config: {
-                  editorLibrary: editorJsClass
-                }
+      cy.createEditor({
+        tools: {
+          nestedEditor: {
+            class: NestedEditor,
+          },
+        },
+        data: {
+          blocks: [
+            {
+              type: 'paragraph',
+              data: {
+                text: 'First block of parent editor',
               },
             },
-            data: {
-              blocks: [
-                {
-                  id: 'block1',
-                  type: 'paragraph',
-                  data: {
-                    text: 'First block of parent editor',
-                  },
-                },
-                {
-                  id: 'block2',
-                  type: 'paragraph',
-                  data: {
-                    text: 'Second block of parent editor',
-                  },
-                },
-                {
-                  id: 'block3',
-                  type: 'nestedEditor',
-                  data: {
-                    nestedEditor: {
-                      blocks: [
-                        {
-                          id: 'nestedBlock1',
-                          type: 'paragraph',
-                          data: {
-                            text: 'First block of nested editor',
-                          },
-                        }
-                      ]
-                    }
-                  }
-                }
-              ],
+            {
+              type: 'paragraph',
+              data: {
+                text: 'Second block of parent editor',
+              },
             },
-          }).as('editorInstance');
-        });
+            {
+              type: 'nestedEditor',
+              data: {
+                text: 'First block of nested editor',
+              },
+            },
+          ],
+        },
+      }).as('editorInstance');
 
-      cy.get('[data-id=nestedBlock1]')
+      cy.get(`[data-cy=${NESTED_EDITOR_ID}]`)
         .find('.ce-paragraph')
         .click();