diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 43fca419..205b2086 100644 --- a/docs/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index c8e74e97..da2a5147 100644 --- a/package.json +++ b/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" } } diff --git a/src/components/modules/ui.ts b/src/components/modules/ui.ts index fefd47e3..cba658bc 100644 --- a/src/components/modules/ui.ts +++ b/src/components/modules/ui.ts @@ -143,7 +143,6 @@ export default class UI extends Module { this.loadStyles(); } - /** * Toggle read-only state * @@ -246,6 +245,15 @@ export default class UI extends Module { 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 { 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 { 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 { 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 { * - 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 { * 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(); + } } /** diff --git a/test/cypress/tests/modules/Ui.cy.ts b/test/cypress/tests/modules/Ui.cy.ts index 88fd3515..eaf2246a 100644 --- a/test/cypress/tests/modules/Ui.cy.ts +++ b/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('@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('@editorInstance') + .then(async (editor) => { + const currentBlockIndex = await editor.blocks.getCurrentBlockIndex(); + + expect(currentBlockIndex).to.eq(1); + }); + }); + }); });