Flat Message Layout

ApiTestManager/src/components/EditableInput.js

@@ -161,7 +161,12 @@ class EditableInputController {
         const preCaretRange = range.cloneRange();
         preCaretRange.selectNodeContents(element);
         preCaretRange.setEnd(range.endContainer, range.endOffset);
-        return preCaretRange.toString().trim().length;
+        const content = preCaretRange.toString().trim();
+        if (content === '\u200B') {
+            return 0; // Return 0 if the content is only the zero-width space character
+        }
+        console.log(content);
+        return content.replace('\u200B', '').length;
     }
 
     handleInput(editableDiv) {
@@ -181,15 +186,50 @@ class EditableInputController {
             })
             .join('');
 
-        var result = mergedString.replace(/[\u200B-\u200D\uFEFF]/g, '');
+        let result = mergedString.replace(/[\u200B-\u200D\uFEFF]/g, '');
 
         let content = this.parseContent(result);
 
         this.model.setValue(content.join(''));
         // Optionally, update the view if needed
         this.view.updateUI();
-
         this.restoreCursor(editableDiv, cursor);
+
+    }
+
+    restoreCursor(element, position) {
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.setStart(element, 0);
+        range.collapse(true);
+
+        const nodeStack = [element];
+        let node, foundStart = false, stop = false;
+        let charIndex = 0;
+        console.log('restoreCursor', position);
+        while (!stop && (node = nodeStack.pop())) {
+            if (node.nodeType === 3) {
+                console.log(node);
+                const nextCharIndex = charIndex + node.length;
+                if (!foundStart && position >= charIndex && position <= nextCharIndex) {
+                    range.setStart(node, position - charIndex);
+                    foundStart = true;
+                }
+                if (foundStart && position >= charIndex && position <= nextCharIndex) {
+                    range.setEnd(node, position - charIndex);
+                    stop = true;
+                }
+                charIndex = nextCharIndex;
+            } else {
+                let i = node.childNodes.length;
+                while (i--) {
+                    nodeStack.push(node.childNodes[i]);
+                }
+            }
+        }
+
+        selection.removeAllRanges();
+        selection.addRange(range);
     }
 
     parseContent(inputString) {
@@ -218,39 +258,7 @@ class EditableInputController {
         return returnStringArray;
     }
 
-    restoreCursor(element, position) {
-        const selection = window.getSelection();
-        const range = document.createRange();
-        range.setStart(element, 0);
-        range.collapse(true);
 
-        const nodeStack = [element];
-        let node, foundStart = false, stop = false;
-        let charIndex = 0;
-
-        while (!stop && (node = nodeStack.pop())) {
-            if (node.nodeType === 3) {
-                const nextCharIndex = charIndex + node.length;
-                if (!foundStart && position >= charIndex && position <= nextCharIndex) {
-                    range.setStart(node, position - charIndex);
-                    foundStart = true;
-                }
-                if (foundStart && position >= charIndex && position <= nextCharIndex) {
-                    range.setEnd(node, position - charIndex);
-                    stop = true;
-                }
-                charIndex = nextCharIndex;
-            } else {
-                let i = node.childNodes.length;
-                while (i--) {
-                    nodeStack.push(node.childNodes[i]);
-                }
-            }
-        }
-
-        selection.removeAllRanges();
-        selection.addRange(range);
-    }
 
     updateUI() {
         this.view.updateUI();