fix: calculate TextComposer selection upon text insertion correctly (#1608)

Author: MartinCupela

src/messageComposer/textComposer.ts

@@ -212,16 +212,13 @@ export class TextComposer {
       text,
       currentText.slice(finalSelection.end),
     ].join('');
+
     const finalText = textBeforeTrim.slice(
       0,
       typeof maxLengthOnEdit === 'number' ? maxLengthOnEdit : textBeforeTrim.length,
     );
-    const expectedCursorPosition =
-      currentText.slice(0, finalSelection.start).length + text.length;
-    const cursorPosition =
-      expectedCursorPosition >= finalText.length
-        ? finalText.length
-        : currentText.slice(0, expectedCursorPosition).length;
+    const expectedCursorPosition = finalSelection.start + text.length;
+    const cursorPosition = Math.min(expectedCursorPosition, finalText.length);
 
     await this.handleChange({
       text: finalText,

test/unit/MessageComposer/textComposer.test.ts

@@ -501,6 +501,7 @@ describe('TextComposer', () => {
         selection: { start: 5, end: 5 },
       });
       expect(textComposer.text).toBe('Hello beautiful world');
+      expect(textComposer.selection).toStrictEqual({ start: 15, end: 15 });
     });
 
     it('should insert text at the end if no selection provided', async () => {
@@ -509,6 +510,7 @@ describe('TextComposer', () => {
       } = setup({ composition: message });
       await textComposer.insertText({ text: '!' });
       expect(textComposer.text).toBe('Hello world!');
+      expect(textComposer.selection).toStrictEqual({ start: 12, end: 12 });
     });
 
     it('should respect maxLengthOnEdit', async () => {
@@ -525,6 +527,7 @@ describe('TextComposer', () => {
       });
       await textComposer.insertText({ text: ' beautiful world' });
       expect(textComposer.text).toBe('Hello be');
+      expect(textComposer.selection).toStrictEqual({ start: 8, end: 8 });
     });
 
     it('should handle empty text insertion', async () => {
@@ -533,6 +536,7 @@ describe('TextComposer', () => {
       } = setup({ composition: message });
       await textComposer.insertText({ text: '', selection: { start: 5, end: 5 } });
       expect(textComposer.text).toBe('Hello world');
+      expect(textComposer.selection).toStrictEqual({ start: 5, end: 5 });
     });
 
     it('should handle insertion at the start of text', async () => {
@@ -541,6 +545,7 @@ describe('TextComposer', () => {
       } = setup({ composition: message });
       await textComposer.insertText({ text: 'Hi ', selection: { start: 0, end: 0 } });
       expect(textComposer.text).toBe('Hi Hello world');
+      expect(textComposer.selection).toStrictEqual({ start: 3, end: 3 });
     });
 
     it('should handle insertion at end of text', async () => {
@@ -549,6 +554,7 @@ describe('TextComposer', () => {
       } = setup({ composition: message });
       await textComposer.insertText({ text: '!', selection: { start: 11, end: 11 } });
       expect(textComposer.text).toBe('Hello world!');
+      expect(textComposer.selection).toStrictEqual({ start: 12, end: 12 });
     });
 
     it('should handle insertion with multi-character selection', async () => {
@@ -557,6 +563,7 @@ describe('TextComposer', () => {
       } = setup({ composition: message });
       await textComposer.insertText({ text: 'Hi', selection: { start: 0, end: 5 } });
       expect(textComposer.text).toBe('Hi world');
+      expect(textComposer.selection).toStrictEqual({ start: 2, end: 2 });
     });
 
     it('should handle insertion with multi-character selection and maxLengthOnEdit restricting the size', async () => {
@@ -577,6 +584,7 @@ describe('TextComposer', () => {
         selection: { start: 7, end: 9 },
       });
       expect(textComposer.text).toBe('Hello wHi ');
+      expect(textComposer.selection).toStrictEqual({ start: 10, end: 10 });
     });
 
     it('should not insert text if disabled', async () => {
@@ -588,6 +596,7 @@ describe('TextComposer', () => {
         selection: { start: 5, end: 5 },
       });
       expect(textComposer.text).toBe(message.text);
+      expect(textComposer.selection).toStrictEqual({ start: 11, end: 11 });
     });
 
     it('should reflect pasting of command trigger with partial command name', async () => {
@@ -597,6 +606,7 @@ describe('TextComposer', () => {
       await textComposer.insertText({ text: '/giph', selection: { start: 0, end: 11 } });
       expect(textComposer.text).toBe('/giph');
       expect(textComposer.suggestions).toBeDefined();
+      expect(textComposer.selection).toStrictEqual({ start: 5, end: 5 });
     });
   });