Added test to check the current block id in the nested editor

Author: VolgaIgor

test/cypress/fixtures/tools/NestedEditorTool.ts

@@ -0,0 +1,123 @@
+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,5 +1,6 @@
 import { createEditorWithTextBlocks } from '../../support/utils/createEditorWithTextBlocks';
 import type EditorJS from '../../../../types/index';
+import { NestedEditorTool } from '../../fixtures/tools/NestedEditorTool';
 
 describe('Ui module', function () {
   describe('documentKeydown', function () {
@@ -139,5 +140,69 @@ describe('Ui module', function () {
           expect(currentBlockIndex).to.eq(1);
         });
     });
+
+    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
+                }
+              },
+            },
+            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',
+                          },
+                        }
+                      ]
+                    }
+                  }
+                }
+              ],
+            },
+          }).as('editorInstance');
+        });
+
+      cy.get('[data-id=nestedBlock1]')
+        .find('.ce-paragraph')
+        .click();
+
+      cy.get<EditorJS>('@editorInstance')
+        .then(async (editor) => {
+          const currentBlockIndex = editor.blocks.getCurrentBlockIndex();
+
+          expect(currentBlockIndex).to.eq(2); // 3 block in numbering from 0
+        });
+    });
   });
 });