fix: handle whitespace input in empty placeholders correctly

codex-team · Nov 9, 2024 · 363612c · 363612c
1 parent 58a7a9e
commit 363612c
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 15 deletions.
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
diff --git a/example/tools/delimiter b/example/tools/delimiter
diff --git a/example/tools/embed b/example/tools/embed
diff --git a/example/tools/header b/example/tools/header
diff --git a/example/tools/image b/example/tools/image
diff --git a/example/tools/inline-code b/example/tools/inline-code
diff --git a/example/tools/list b/example/tools/list
diff --git a/example/tools/quote b/example/tools/quote
diff --git a/example/tools/table b/example/tools/table
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);
+    }
+  }
 }
+10 −0		.editorconfig
+0 −83		.eslintrc
+12 −0		.github/workflows/eslint.yml
+5 −28		.github/workflows/npm-publish.yml
+0 −62		.jshintrc
+46 −0		eslint.config.mjs
+19 −6		package.json
+0 −282		src/index.js
+327 −0		src/index.ts
+4 −5		src/utils/string.ts
+10 −0		tsconfig.json
+13 −9		vite.config.js
+2,721 −179		yarn.lock
+10 −5		package.json
+40 −12		src/index.ts
+11 −0		tsconfig.json
+9 −2		vite.config.js
+926 −179		yarn.lock
+1 −1		package.json
+2 −2		src/index.ts
+0 −0		src/serviceConfig.ts
+5 −3		src/services.ts
+17 −0		test/services.ts
+1 −0		.github/workflows/npm-publish.yml
+6 −4		package.json
+0 −17		src/index.css
+23 −16		src/index.ts
+0 −10		.eslintrc
+16 −2		README.md
+35 −0		dev/index.html
+42 −9		dev/server.js
+48 −0		eslint.config.mjs
+25 −16		package.json
+10 −2		src/index.css
+189 −200		src/index.ts
+89 −0		src/types/codexteam__ajax.d.ts
+228 −0		src/types/types.ts
+175 −114		src/ui.ts
+66 −40		src/uploader.ts
+0 −23		src/utils/dom.js
+24 −0		src/utils/dom.ts
+0 −9		src/utils/isPromise.js
+10 −0		src/utils/isPromise.ts
+15 −0		tsconfig.json
+12 −3		vite.config.js
+2,729 −1,178		yarn.lock
+9 −4		package.json
+56 −42		src/index.ts
+15 −0		tsconfig.json
+7 −3		vite.config.js
+625 −4		yarn.lock
+13 −6		package.json
+0 −310		src/index.js
+427 −0		src/index.ts
+17 −0		tsconfig.json
+3 −2		vite.config.js
+602 −26		yarn.lock
+9 −2		README.md
+5 −4		index.html
+9 −5		package.json
+33 −14		src/plugin.js
+7 −1		src/styles/table.pcss
+60 −2		src/table.js
+9 −0		tsconfig.json
+11 −2		vite.config.js
+1,434 −239		yarn.lock