fix: properly handle visible whitespaces in empty blocks (#2865)

* fix: handle whitespace input in empty placeholders correctly

* fix: isNodeEmpty() to handle visible whitespaces

* chore: bump version from 2.31.0-rc.5 to 2.31.0-rc.6

* chore: bump version from 2.31.0-rc.5 to 2.31.0-rc.6

* fix: submodules updated

* fix: eslint errors

* test: backspace removes trailing spaces, hides placeholder in empty blocks

* fix: update incorrect tests

* fix: resolving submodules issue

* Create list

---------

Co-authored-by: Peter Savchenko <[email protected]>

docs/CHANGELOG.md

@@ -10,6 +10,7 @@
 - `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
+- `Fix` - Handle whitespace input in empty placeholder elements to prevent caret from moving unexpectedly to the end of the placeholder
 
 ### 2.30.7
 

src/components/dom.ts

@@ -373,7 +373,7 @@ export default class Dom {
       nodeText = nodeText.replace(new RegExp(ignoreChars, 'g'), '');
     }
 
-    return nodeText.trim().length === 0;
+    return nodeText.length === 0;
   }
 
   /**

test/cypress/tests/modules/BlockEvents/Backspace.cy.ts

@@ -118,6 +118,28 @@ describe('Backspace keydown', function () {
         .last()
         .should('have.text', '12');
     });
+
+    it('   | — should delete visible and invisble whitespaces in the abscence of any non whitespace characters', function () {
+      createEditorWithTextBlocks([
+        '1',
+        '   ',
+      ]);
+
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .last()
+        .click()
+        .type('{downArrow}')
+        .type('{backspace}')
+        .type('{backspace}')
+        .type('{backspace}')
+        .type('{backspace}');
+
+      cy.get('[data-cy=editorjs]')
+        .find('div.ce-block')
+        .last()
+        .should('have.text', '1');
+    });
   });
 
   it('should just delete chars (native behaviour) when some fragment is selected', function () {
@@ -184,7 +206,7 @@ describe('Backspace keydown', function () {
        * Saving logic is not necessary for this test
        */
       // eslint-disable-next-line @typescript-eslint/no-empty-function
-      public save(): void {}
+      public save(): void { }
     }
 
     cy.createEditor({
@@ -545,7 +567,7 @@ describe('Backspace keydown', function () {
        * Saving logic is not necessary for this test
        */
       // eslint-disable-next-line @typescript-eslint/no-empty-function
-      public save(): void {}
+      public save(): void { }
     }
 
     cy.createEditor({
@@ -678,7 +700,7 @@ describe('Backspace keydown', function () {
 
   describe('at the start of the first Block', function () {
     it('should do nothing if Block is not empty', function () {
-      createEditorWithTextBlocks([ 'The only block. Not empty' ]);
+      createEditorWithTextBlocks(['The only block. Not empty']);
 
       cy.get('[data-cy=editorjs]')
         .find('.ce-paragraph')

test/cypress/tests/ui/Placeholders.cy.ts

@@ -77,4 +77,21 @@ describe('Placeholders', function () {
       .getPseudoElementContent('::before')
       .should('eq', 'none');
   });
+
+  it('should be hidden when user adds trailing whitespace characters', function () {
+    cy.createEditor({
+      placeholder: PLACEHOLDER_TEXT,
+    });
+
+    cy.get('[data-cy=editorjs]')
+      .find('.ce-paragraph')
+      .as('firstBlock')
+      .getPseudoElementContent('::before')
+      .should('eq', PLACEHOLDER_TEXT);
+
+    cy.get('@firstBlock')
+      .type('   ')
+      .getPseudoElementContent('::before')
+      .should('eq', 'none');
+  });
 });