Merge branch 'next' into fix-link-safari

docs/CHANGELOG.md

@@ -7,6 +7,8 @@
 - `Fix` - Fix selection of first block in read-only initialization with "autofocus=true"
 - `Fix` - Incorrect caret position after blocks merging in Safari
 - `Fix` - Several toolbox items exported by the one tool have the same shortcut displayed in toolbox
+- `Improvement` - The current block reference will be updated in read-only mode when blocks are clicked
+- `Fix` - codex-notifier and codex-tooltip moved from devDependencies to dependencies in package.json to solve type errors
 
 ### 2.30.6
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.31.0-rc.2",
+  "version": "2.31.0-rc.4",
   "description": "Editor.js — open source block-style WYSIWYG editor with JSON output",
   "main": "dist/editorjs.umd.js",
   "module": "dist/editorjs.mjs",
@@ -50,8 +50,6 @@
     "@editorjs/simple-image": "^1.4.1",
     "@types/node": "^18.15.11",
     "chai-subset": "^1.6.0",
-    "codex-notifier": "^1.1.2",
-    "codex-tooltip": "^1.0.5",
     "core-js": "3.30.0",
     "cypress": "^13.13.3",
     "cypress-intellij-reporter": "^0.0.7",
@@ -79,6 +77,8 @@
     "url": "https://opencollective.com/editorjs"
   },
   "dependencies": {
-    "@editorjs/caret": "^1.0.1"
+    "@editorjs/caret": "^1.0.1",
+    "codex-notifier": "^1.1.2",
+    "codex-tooltip": "^1.0.5"
   }
 }

src/components/modules/ui.ts

@@ -143,7 +143,6 @@ export default class UI extends Module<UINodes> {
     this.loadStyles();
   }
 
-
   /**
    * Toggle read-only state
    *
@@ -246,6 +245,15 @@ export default class UI extends Module<UINodes> {
     Toolbar.toolbox.close();
   }
 
+  /**
+   * Event listener for 'mousedown' and 'touchstart' events
+   *
+   * @param event - TouchEvent or MouseEvent
+   */
+  private documentTouchedListener = (event: Event): void => {
+    this.documentTouched(event);
+  };
+
   /**
    * Check for mobile mode and save the result
    */
@@ -353,6 +361,16 @@ export default class UI extends Module<UINodes> {
     this.listeners.on(window, 'resize', this.resizeDebouncer, {
       passive: true,
     });
+
+    this.listeners.on(this.nodes.redactor, 'mousedown', this.documentTouchedListener, {
+      capture: true,
+      passive: true,
+    });
+
+    this.listeners.on(this.nodes.redactor, 'touchstart', this.documentTouchedListener, {
+      capture: true,
+      passive: true,
+    });
   }
 
   /**
@@ -361,6 +379,8 @@ export default class UI extends Module<UINodes> {
   private unbindReadOnlyInsensitiveListeners(): void {
     this.listeners.off(document, 'selectionchange', this.selectionChangeDebounced);
     this.listeners.off(window, 'resize', this.resizeDebouncer);
+    this.listeners.off(this.nodes.redactor, 'mousedown', this.documentTouchedListener);
+    this.listeners.off(this.nodes.redactor, 'touchstart', this.documentTouchedListener);
   }
 
 
@@ -372,20 +392,6 @@ export default class UI extends Module<UINodes> {
       this.redactorClicked(event);
     }, false);
 
-    this.readOnlyMutableListeners.on(this.nodes.redactor, 'mousedown', (event: MouseEvent | TouchEvent) => {
-      this.documentTouched(event);
-    }, {
-      capture: true,
-      passive: true,
-    });
-
-    this.readOnlyMutableListeners.on(this.nodes.redactor, 'touchstart', (event: MouseEvent | TouchEvent) => {
-      this.documentTouched(event);
-    }, {
-      capture: true,
-      passive: true,
-    });
-
     this.readOnlyMutableListeners.on(document, 'keydown', (event: KeyboardEvent) => {
       this.documentKeydown(event);
     }, true);
@@ -711,17 +717,17 @@ export default class UI extends Module<UINodes> {
    * - Move and show the Toolbar
    * - Set a Caret
    *
-   * @param {MouseEvent | TouchEvent} event - touch or mouse event
+   * @param event - touch or mouse event
    */
-  private documentTouched(event: MouseEvent | TouchEvent): void {
+  private documentTouched(event: Event): void {
     let clickedNode = event.target as HTMLElement;
 
     /**
      * If click was fired on Editor`s wrapper, try to get clicked node by elementFromPoint method
      */
     if (clickedNode === this.nodes.redactor) {
-      const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-      const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+      const clientX = event instanceof MouseEvent ? event.clientX : (event as TouchEvent).touches[0].clientX;
+      const clientY = event instanceof MouseEvent ? event.clientY : (event as TouchEvent).touches[0].clientY;
 
       clickedNode = document.elementFromPoint(clientX, clientY) as HTMLElement;
     }
@@ -744,7 +750,9 @@ export default class UI extends Module<UINodes> {
      * Move and open toolbar
      * (used for showing Block Settings toggler after opening and closing Inline Toolbar)
      */
-    this.Editor.Toolbar.moveAndOpen();
+    if (!this.Editor.ReadOnly.isEnabled) {
+      this.Editor.Toolbar.moveAndOpen();
+    }
   }
 
   /**

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

@@ -1,3 +1,4 @@
+import { createEditorWithTextBlocks } from '../../support/utils/createEditorWithTextBlocks';
 import type EditorJS from '../../../../types/index';
 
 describe('Ui module', function () {
@@ -93,4 +94,50 @@ describe('Ui module', function () {
       });
     });
   });
+
+  describe('mousedown', function () {
+    it('should update current block by click on block', function () {
+      createEditorWithTextBlocks([
+        'first block',
+        'second block',
+        'third block',
+      ])
+        .as('editorInstance');
+
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .eq(1)
+        .click();
+
+      cy.get<EditorJS>('@editorInstance')
+        .then(async (editor) => {
+          const currentBlockIndex = await editor.blocks.getCurrentBlockIndex();
+
+          expect(currentBlockIndex).to.eq(1);
+        });
+    });
+
+    it('(in readonly) should update current block by click on block', function () {
+      createEditorWithTextBlocks([
+        'first block',
+        'second block',
+        'third block',
+      ], {
+        readOnly: true,
+      })
+        .as('editorInstance');
+
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .eq(1)
+        .click();
+
+      cy.get<EditorJS>('@editorInstance')
+        .then(async (editor) => {
+          const currentBlockIndex = await editor.blocks.getCurrentBlockIndex();
+
+          expect(currentBlockIndex).to.eq(1);
+        });
+    });
+  });
 });