fix: properly handle visible whitespaces in empty blocks

docs/CHANGELOG.md

@@ -9,6 +9,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.6
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.31.0-rc.4",
+  "version": "2.31.0-rc.5",
   "description": "Editor.js — open source block-style WYSIWYG editor with JSON output",
   "main": "dist/editorjs.umd.js",
   "module": "dist/editorjs.mjs",

src/components/dom.ts

@@ -126,7 +126,7 @@ export default class Dom {
   public static swap(el1: HTMLElement, el2: HTMLElement): void {
     // create marker element and insert it where el1 is
     const temp = document.createElement('div'),
-        parent = el1.parentNode;
+      parent = el1.parentNode;
 
     parent.insertBefore(temp, el1);
 
@@ -225,7 +225,7 @@ export default class Dom {
      * @type {string}
      */
     const child = atLast ? 'lastChild' : 'firstChild',
-        sibling = atLast ? 'previousSibling' : 'nextSibling';
+      sibling = atLast ? 'previousSibling' : 'nextSibling';
 
     if (node && node.nodeType === Node.ELEMENT_NODE && node[child]) {
       let nodeChild = node[child] as Node;
@@ -405,7 +405,7 @@ export default class Dom {
      */
     node.normalize();
 
-    const treeWalker = [ node ];
+    const treeWalker = [node];
 
     while (treeWalker.length > 0) {
       node = treeWalker.shift();
@@ -539,7 +539,7 @@ export default class Dom {
    */
   public static getDeepestBlockElements(parent: HTMLElement): HTMLElement[] {
     if (Dom.containsOnlyInlineElements(parent)) {
-      return [ parent ];
+      return [parent];
     }
 
     return Array.from(parent.children).reduce((result, element) => {
@@ -670,5 +670,16 @@ export function calculateBaseline(element: Element): number {
  * @param element - The element to toggle the [data-empty] attribute on
  */
 export function toggleEmptyMark(element: HTMLElement): void {
-  element.dataset.empty = Dom.isEmpty(element) ? 'true' : 'false';
+  const isOnlyWhitespace = isCollapsedWhitespaces(element.textContent || '');
+
+  const isElementEmpty = Dom.isEmpty(element) && isOnlyWhitespace;
+
+  element.dataset.empty = isElementEmpty ? 'true' : 'false';
+
+  if (isElementEmpty) {
+    const lastChild = element.lastChild;
+    if (lastChild && lastChild.nodeType === Node.ELEMENT_NODE && (lastChild as HTMLElement).tagName === 'BR') {
+      element.removeChild(lastChild);
+    }
+  }
 }