Merge pull request #2983 from matrix-org/bwindels/editor-cursor-fixes

Message editing: fix some bugs in cursor behaviour

src/components/views/elements/MessageEditor.js

@@ -144,12 +144,7 @@ export default class MessageEditor extends React.Component {
 
     componentDidMount() {
         this._updateEditorState();
-        const sel = document.getSelection();
-        const range = document.createRange();
-        range.selectNodeContents(this._editorRef);
-        range.collapse(false);
-        sel.removeAllRanges();
-        sel.addRange(range);
+        setCaretPosition(this._editorRef, this.model, this.model.getPositionAtEnd());
         this._editorRef.focus();
     }
 

src/editor/model.js

@@ -61,6 +61,16 @@ export default class EditorModel {
         return null;
     }
 
+    getPositionAtEnd() {
+        if (this._parts.length) {
+            const index = this._parts.length - 1;
+            const part = this._parts[index];
+            return new DocumentPosition(index, part.text.length);
+        } else {
+            return new DocumentPosition(0, 0);
+        }
+    }
+
     serializeParts() {
         return this._parts.map(({type, text}) => {return {type, text};});
     }
@@ -88,7 +98,8 @@ export default class EditorModel {
         }
         this._mergeAdjacentParts();
         const caretOffset = diff.at - removedOffsetDecrease + addedLen;
-        const newPosition = this._positionForOffset(caretOffset, true);
+        let newPosition = this._positionForOffset(caretOffset, true);
+        newPosition = newPosition.skipUneditableParts(this._parts);
         this._setActivePart(newPosition);
         this._updateCallback(newPosition);
     }
@@ -172,21 +183,26 @@ export default class EditorModel {
             // part might be undefined here
             let part = this._parts[index];
             const amount = Math.min(len, part.text.length - offset);
-            if (part.canEdit) {
-                const replaceWith = part.remove(offset, amount);
-                if (typeof replaceWith === "string") {
-                    this._replacePart(index, this._partCreator.createDefaultPart(replaceWith));
-                }
-                part = this._parts[index];
-                // remove empty part
-                if (!part.text.length) {
-                    this._removePart(index);
+            // don't allow 0 amount deletions
+            if (amount) {
+                if (part.canEdit) {
+                    const replaceWith = part.remove(offset, amount);
+                    if (typeof replaceWith === "string") {
+                        this._replacePart(index, this._partCreator.createDefaultPart(replaceWith));
+                    }
+                    part = this._parts[index];
+                    // remove empty part
+                    if (!part.text.length) {
+                        this._removePart(index);
+                    } else {
+                        index += 1;
+                    }
                 } else {
-                    index += 1;
+                    removedOffsetDecrease += offset;
+                    this._removePart(index);
                 }
             } else {
-                removedOffsetDecrease += offset;
-                this._removePart(index);
+                index += 1;
             }
             len -= amount;
             offset = 0;
@@ -261,4 +277,13 @@ class DocumentPosition {
     get offset() {
         return this._offset;
     }
+
+    skipUneditableParts(parts) {
+        const part = parts[this.index];
+        if (part && !part.canEdit) {
+            return new DocumentPosition(this.index + 1, 0);
+        } else {
+            return this;
+        }
+    }
 }

src/editor/parts.js

@@ -57,7 +57,7 @@ class BasePart {
     appendUntilRejected(str) {
         for (let i = 0; i < str.length; ++i) {
             const chr = str.charAt(i);
-            if (!this.acceptsInsertion(chr)) {
+            if (!this.acceptsInsertion(chr, i)) {
                 this._text = this._text + str.substr(0, i);
                 return str.substr(i);
             }
@@ -180,8 +180,8 @@ class PillPart extends BasePart {
 }
 
 export class NewlinePart extends BasePart {
-    acceptsInsertion(chr) {
-        return this.text.length === 0 && chr === "\n";
+    acceptsInsertion(chr, i) {
+        return (this.text.length + i) === 0 && chr === "\n";
     }
 
     acceptsRemoval(position, chr) {
@@ -205,6 +205,14 @@ export class NewlinePart extends BasePart {
     get type() {
         return "newline";
     }
+
+    // this makes the cursor skip this part when it is inserted
+    // rather than trying to append to it, which is what we want.
+    // As a newline can also be only one character, it makes sense
+    // as it can only be one character long. This caused #9741.
+    get canEdit() {
+        return false;
+    }
 }
 
 export class RoomPillPart extends PillPart {