paste tests fixed

cypress.config.ts

@@ -11,9 +11,22 @@ export default defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./test/cypress/plugins/index.ts')(on, config);
+      /**
+       * Plugin for cypress that adds better terminal output for easier debugging.
+       * Prints cy commands, browser console logs, cy.request and cy.intercept data. Great for your pipelines.
+       * https://github.com/archfz/cypress-terminal-report
+       */
+      require('cypress-terminal-report/src/installLogsPrinter')(on);
+
+      require('./test/cypress/plugins/index.ts')(on, config);
     },
     specPattern: 'test/cypress/tests/**/*.cy.{js,jsx,ts,tsx}',
     supportFile: 'test/cypress/support/index.ts',
   },
+  'retries': {
+    // Configure retry attempts for `cypress run`
+    'runMode': 2,
+    // Configure retry attempts for `cypress open`
+    'openMode': 0,
+  },
 });

docs/CHANGELOG.md

@@ -14,6 +14,7 @@
 - `Improvement` - Selection style won't override your custom style for `::selection` outside the editor.
 - `Improvement` - Performance optimizations: initialization speed increased, `blocks.render()` API method optimized. Big documents will be displayed faster.
 - `Improvement` - "Editor saving" log removed
+- `Improvement` - "I'm ready" log removed
 
 ### 2.27.2
 

package.json

@@ -53,6 +53,7 @@
     "core-js": "3.30.0",
     "cypress": "^12.9.0",
     "cypress-intellij-reporter": "^0.0.7",
+    "cypress-terminal-report": "^5.3.2",
     "eslint": "^8.37.0",
     "eslint-config-codex": "^1.7.1",
     "eslint-plugin-chai-friendly": "^0.7.2",

src/components/core.ts

@@ -54,8 +54,6 @@ export default class Core {
         this.init();
         await this.start();
 
-        _.logLabeled('I\'m ready! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧', 'log', '', 'color: #E24A75');
-
         await this.render();
 
         if ((this.configuration as EditorConfig).autofocus) {
@@ -68,7 +66,9 @@ export default class Core {
         /**
          * Resolve this.isReady promise
          */
-        onReady();
+        window.requestIdleCallback(() => {
+          onReady();
+        });
       })
       .catch((error) => {
         _.log(`Editor.js is not ready because of ${error}`, 'error');

src/components/modules/caret.ts

@@ -534,15 +534,19 @@ export default class Caret extends Module {
       fragment.appendChild(new Text());
     }
 
-    const lastChild = fragment.lastChild;
+    const lastChild = fragment.lastChild as ChildNode;
 
     range.deleteContents();
     range.insertNode(fragment);
 
     /** Cross-browser caret insertion */
     const newRange = document.createRange();
 
-    newRange.setStart(lastChild, lastChild.textContent.length);
+    const nodeToSetCaret = lastChild.nodeType === Node.TEXT_NODE ? lastChild : lastChild.firstChild;
+
+    if (nodeToSetCaret !== null && nodeToSetCaret.textContent !== null) {
+      newRange.setStart(nodeToSetCaret, nodeToSetCaret.textContent.length);
+    }
 
     selection.removeAllRanges();
     selection.addRange(newRange);

src/components/modules/renderer.ts

@@ -22,6 +22,11 @@ export default class Renderer extends Module {
      * Create Blocks instances
      */
     const blocks = blocksData.map(({ type: tool, data, tunes, id }) => {
+      /**
+       * @todo handle plugin error
+       * @todo handle stub case
+       */
+
       return this.Editor.BlockManager.composeBlock({
         id,
         tool,
@@ -30,6 +35,8 @@ export default class Renderer extends Module {
       });
     });
 
+
+
     /**
      * Insert batch of Blocks
      */
@@ -48,6 +55,8 @@ export default class Renderer extends Module {
        */
       this.Editor.ModificationsObserver.enable();
     }, { timeout: 2000 });
+
+
   }
 
   /**

src/components/modules/toolbar/index.ts

@@ -103,8 +103,9 @@ export default class Toolbar extends Module<ToolbarNodes> {
 
   /**
    * Toolbox class instance
+   * It will be created in requestIdleCallback so it can be null in some period of time
    */
-  private toolboxInstance: Toolbox;
+  private toolboxInstance: Toolbox | null = null;
 
   /**
    * @class
@@ -155,27 +156,47 @@ export default class Toolbar extends Module<ToolbarNodes> {
    * Public interface for accessing the Toolbox
    */
   public get toolbox(): {
-    opened: boolean;
+    opened: boolean | undefined; // undefined is for the case when Toolbox is not initialized yet
     close: () => void;
     open: () => void;
     toggle: () => void;
-    hasFocus: () => boolean;
+    hasFocus: () => boolean | undefined;
     } {
     return {
-      opened: this.toolboxInstance.opened,
-      close: (): void => {
-        this.toolboxInstance.close();
+      opened: this.toolboxInstance?.opened,
+      close: () => {
+        this.toolboxInstance?.close();
       },
-      open: (): void => {
+      open: () => {
+        /**
+         * If Toolbox is not initialized yet, do nothing
+         */
+        if (this.toolboxInstance === null)  {
+          _.log('toolbox.open() called before initialization is finished', 'warn');
+
+          return;
+        }
+
         /**
          * Set current block to cover the case when the Toolbar showed near hovered Block but caret is set to another Block.
          */
         this.Editor.BlockManager.currentBlock = this.hoveredBlock;
 
         this.toolboxInstance.open();
       },
-      toggle: (): void => this.toolboxInstance.toggle(),
-      hasFocus: (): boolean => this.toolboxInstance.hasFocus(),
+      toggle: () => {
+        /**
+         * If Toolbox is not initialized yet, do nothing
+         */
+        if (this.toolboxInstance === null)  {
+          _.log('toolbox.toggle() called before initialization is finished', 'warn');
+
+          return;
+        }
+
+        this.toolboxInstance.toggle();
+      },
+      hasFocus: () => this.toolboxInstance?.hasFocus(),
     };
   }
 
@@ -227,6 +248,15 @@ export default class Toolbar extends Module<ToolbarNodes> {
    * @param block - block to move Toolbar near it
    */
   public moveAndOpen(block: Block = this.Editor.BlockManager.currentBlock): void {
+    /**
+     * Some UI elements creates inside requestIdleCallback, so the can be not ready yet
+     */
+    if (this.toolboxInstance === null)  {
+      _.log('Can\'t open Toolbar since Editor initialization is not finished yet', 'warn');
+
+      return;
+    }
+
     /**
      * Close Toolbox when we move toolbar
      */
@@ -296,7 +326,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
 
     /** Close components */
     this.blockActions.hide();
-    this.toolboxInstance.close();
+    this.toolboxInstance?.close();
     this.Editor.BlockSettings.close();
   }
 
@@ -456,7 +486,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
      */
     this.Editor.BlockManager.currentBlock = this.hoveredBlock;
 
-    this.toolboxInstance.toggle();
+    this.toolboxInstance?.toggle();
   }
 
   /**
@@ -478,7 +508,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
 
       this.settingsTogglerClicked();
 
-      if (this.toolboxInstance.opened) {
+      if (this.toolboxInstance?.opened) {
         this.toolboxInstance.close();
       }
 
@@ -498,7 +528,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
         /**
          * Do not move toolbar if Block Settings or Toolbox opened
          */
-        if (this.Editor.BlockSettings.opened || this.toolboxInstance.opened) {
+        if (this.Editor.BlockSettings.opened || this.toolboxInstance?.opened) {
           return;
         }
 

src/components/selection.ts

@@ -225,7 +225,7 @@ export default class SelectionUtils {
    *
    * @param selection - Selection object to get Range from
    */
-  public static getRangeFromSelection(selection: Selection): Range {
+  public static getRangeFromSelection(selection: Selection): Range | null {
     return selection && selection.rangeCount ? selection.getRangeAt(0) : null;
   }
 

src/components/utils/events.ts

@@ -94,6 +94,12 @@ export default class EventsDispatcher<EventMap> {
    * @param callback - event handler
    */
   public off<Name extends keyof EventMap>(eventName: Name, callback: Listener<EventMap[Name]>): void {
+    if (this.subscribers[eventName] === undefined) {
+      console.warn(`EventDispatcher .off(): there is no subscribers for event "${eventName.toString()}". Probably, .off() called before .on()`);
+
+      return;
+    }
+
     for (let i = 0; i < this.subscribers[eventName].length; i++) {
       if (this.subscribers[eventName][i] === callback) {
         delete this.subscribers[eventName][i];
@@ -107,6 +113,6 @@ export default class EventsDispatcher<EventMap> {
    * clears subscribers list
    */
   public destroy(): void {
-    this.subscribers = null;
+    this.subscribers = {} as Subscriptions<EventMap>;
   }
 }

test/cypress/.eslintrc

@@ -11,7 +11,9 @@
         "plugin:chai-friendly/recommended"
     ],
     "rules": {
-        "cypress/require-data-selectors": 2
+        "cypress/require-data-selectors": 2,
+        "cypress/no-unnecessary-waiting": 0,
+        "@typescript-eslint/no-magic-numbers": 0
     },
     "globals": {
         "EditorJS": true

test/cypress/support/commands.ts

@@ -61,7 +61,7 @@ Cypress.Commands.add('paste', {
 
   subject[0].dispatchEvent(pasteEvent);
 
-  return subject;
+  cy.wait(200); // wait a little since some tools (paragraph) could have async hydration
 });
 
 /**

test/cypress/support/index.ts

@@ -7,6 +7,9 @@
  */
 
 import '@cypress/code-coverage/support';
+import installLogsCollector from 'cypress-terminal-report/src/installLogsCollector';
+
+installLogsCollector();
 
 /**
  * File with the helpful commands

test/cypress/tests/api/blocks.cy.ts

@@ -214,7 +214,7 @@ describe('api.blocks', () => {
           convert(existingBlock.id, 'convertableTool');
         });
 
-      // eslint-disable-next-line cypress/no-unnecessary-waiting, @typescript-eslint/no-magic-numbers -- wait for block to be converted
+      // wait for block to be converted
       cy.wait(100);
 
       /**

test/cypress/tests/block-ids.cy.ts

@@ -75,12 +75,6 @@ describe('Block ids', () => {
         blocks,
       });
 
-    cy.get('[data-cy=editorjs]')
-      .get('div.ce-block')
-      .first()
-      .click()
-      .type('{movetoend} Some more text');
-
     cy.get('@editorInstance')
       .then(async (editor: any) => {
         const data = await editor.save();