fix: handle whitespace input in empty placeholders correctly

idebenone · idebenone · commit 363612c7c97d · 2024-11-09T15:48:06.000+05:30
diff --git a/docs/CHANGELOG.md b/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
 
diff --git a/example/tools/code b/example/tools/code
@@ -1 +1 @@
-Subproject commit f281996f82c7ac676172757e45687cae27443427
+Subproject commit e34a4381fbf9aa30742143bf4cb33380d7c6c3d9
diff --git a/example/tools/delimiter b/example/tools/delimiter
@@ -1 +1 @@
-Subproject commit 4ca1c1c972261f47dd34f6b8754763a4a79a4866
+Subproject commit 95a5eb90dd2e2e8ab153eb66b59a70cdafdf2d7f
diff --git a/example/tools/embed b/example/tools/embed
@@ -1 +1 @@
-Subproject commit f2585abb9019abf93c18f1dcfa63b07a3dd08318
+Subproject commit 801580fbdb7ab0ad1e975cfdaab38ada6625e301
diff --git a/example/tools/header b/example/tools/header
@@ -1 +1 @@
-Subproject commit 477853c1646ae479867603847e49071438ffd80c
+Subproject commit 3e457cbac2c5da53fff1b02b99ddaccaa577f401
diff --git a/example/tools/image b/example/tools/image
@@ -1 +1 @@
-Subproject commit 25d46cd8d3930851b14ddc26ee80fb5b485e1496
+Subproject commit 8113357636df9c09a1204316481830530aab793e
diff --git a/example/tools/inline-code b/example/tools/inline-code
@@ -1 +1 @@
-Subproject commit dcd4c17740c9ba636140751596aff1e9f6ef6b01
+Subproject commit 31a086d7dc97169de34b9c191735cba7d63562d6
diff --git a/example/tools/list b/example/tools/list
@@ -1 +1 @@
-Subproject commit a6dc6a692b88c9eff3d87223b239e7517b160c67
+Subproject commit 2977364201cc1c35ac6ae2a718f4868c1be27512
diff --git a/example/tools/quote b/example/tools/quote
@@ -1 +1 @@
-Subproject commit 9377ca713f552576b8b11f77cf371b67261ec00b
+Subproject commit 5740e1ccae2c694c93751c06e6acbb7ed855ca2f
diff --git a/example/tools/table b/example/tools/table
@@ -1 +1 @@
-Subproject commit 2948cd7595e632f7555e2dc09e6bac050a2b87ea
+Subproject commit 7dd394191a47d110beda623ba4a22580bcf0a15c
diff --git a/package.json b/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",
diff --git a/src/components/dom.ts b/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);
+    }
+  }
 }
