fix: update the composer text with default value if config changes

Author: MartinCupela

src/messageComposer/messageComposer.ts

@@ -25,11 +25,7 @@ import type {
 } from '../types';
 import type { StreamChat } from '../client';
 import type { MessageComposerConfig } from './configuration/types';
-
-// todo: move to a more global place to be reused
-type DeepPartial<T> = {
-  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
-};
+import type { DeepPartial } from '../types.utility';
 
 export type LastComposerChange = { draftUpdate: number | null; stateUpdate: number };
 
@@ -371,7 +367,7 @@ export class MessageComposer {
     this.unsubscribeFunctions.add(this.subscribePollComposerStateChanged());
     this.unsubscribeFunctions.add(this.subscribeCustomDataManagerStateChanged());
     this.unsubscribeFunctions.add(this.subscribeMessageComposerStateChanged());
-
+    this.unsubscribeFunctions.add(this.subscribeMessageComposerConfigStateChanged());
     if (this.config.drafts.enabled) {
       this.unsubscribeFunctions.add(this.subscribeDraftUpdated());
       this.unsubscribeFunctions.add(this.subscribeDraftDeleted());
@@ -573,6 +569,17 @@ export class MessageComposer {
       }
     });
 
+  private subscribeMessageComposerConfigStateChanged = () =>
+    this.configState.subscribe((nextValue) => {
+      const { text } = nextValue;
+      if (this.textComposer.text === '' && text.defaultValue) {
+        this.textComposer.insertText({
+          text: text.defaultValue,
+          selection: { start: 0, end: 0 },
+        });
+      }
+    });
+
   setQuotedMessage = (quotedMessage: LocalMessage | null) => {
     this.state.partialNext({ quotedMessage });
   };

src/messageComposer/textComposer.ts

@@ -148,16 +148,28 @@ export class TextComposer {
     };
     const { maxLengthOnEdit } = this.composer.config.text ?? {};
     const currentText = this.text;
-    const newText = [
+    const textBeforeTrim = [
       currentText.slice(0, finalSelection.start),
       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;
+
     this.state.partialNext({
-      text: newText.slice(
-        0,
-        typeof maxLengthOnEdit === 'number' ? maxLengthOnEdit : newText.length,
-      ),
+      text: finalText,
+      selection: {
+        start: cursorPosition,
+        end: cursorPosition,
+      },
     });
   };
 

src/types.utility.ts

@@ -0,0 +1,3 @@
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};

test/unit/MessageComposer/messageComposer.test.ts

@@ -6,6 +6,7 @@ import {
   StreamChat,
   Thread,
 } from '../../../src';
+import { DeepPartial } from '../../../src/types.utility';
 import { MessageComposer } from '../../../src/messageComposer/messageComposer';
 import { StateStore } from '../../../src/store';
 import { DraftResponse, MessageResponse } from '../../../src/types';
@@ -20,14 +21,32 @@ vi.mock('../../../src/utils', () => ({
   isArray: vi.fn(),
   isDate: vi.fn(),
   isNumber: vi.fn(),
-
+  debounce: vi.fn().mockImplementation((fn) => fn),
   generateUUIDv4: vi.fn().mockReturnValue('test-uuid'),
   isLocalMessage: vi.fn().mockReturnValue(true),
   formatMessage: vi.fn().mockImplementation((msg) => msg),
   randomId: vi.fn().mockReturnValue('test-uuid'),
   throttle: vi.fn().mockImplementation((fn) => fn),
 }));
 
+// // Mock dependencies
+// vi.mock('../../../src/utils', () => ({
+//   axiosParamsSerializer: vi.fn(),
+//   isFunction: vi.fn(),
+//   isString: vi.fn(),
+//   isObject: vi.fn(),
+//   isArray: vi.fn(),
+//   isDate: vi.fn(),
+//   isNumber: vi.fn(),
+//   logChatPromiseExecution: vi.fn(),
+//   generateUUIDv4: vi.fn().mockReturnValue('test-uuid'),
+//   debounce: vi.fn().mockImplementation((fn) => fn),
+//   randomId: vi.fn().mockReturnValue('test-uuid'),
+//   isLocalMessage: vi.fn().mockReturnValue(true),
+//   formatMessage: vi.fn().mockImplementation((msg) => msg),
+//   throttle: vi.fn().mockImplementation((fn) => fn),
+// }));
+
 vi.mock('../../../src/messageComposer/attachmentManager', () => ({
   AttachmentManager: vi.fn().mockImplementation(() => ({
     state: new StateStore({ attachments: [] }),
@@ -46,14 +65,14 @@ vi.mock('../../../src/messageComposer/linkPreviewsManager', () => ({
   })),
 }));
 
-vi.mock('../../../src/messageComposer/textComposer', () => ({
-  TextComposer: vi.fn().mockImplementation(() => ({
-    state: new StateStore({ text: '', mentionedUsers: [] }),
-    initState: vi.fn(),
-    clear: vi.fn(),
-    textIsEmpty: vi.fn().mockReturnValue(true),
-  })),
-}));
+// vi.mock('../../../src/messageComposer/textComposer', () => ({
+//   TextComposer: vi.fn().mockImplementation(() => ({
+//     state: new StateStore({ text: '', mentionedUsers: [] }),
+//     initState: vi.fn(),
+//     clear: vi.fn(),
+//     textIsEmpty: vi.fn().mockReturnValue(true),
+//   })),
+// }));
 
 vi.mock('../../../src/messageComposer/pollComposer', () => ({
   PollComposer: vi.fn().mockImplementation(() => ({
@@ -74,7 +93,7 @@ vi.mock('../../../src/messageComposer/CustomDataManager', () => ({
   })),
 }));
 
-vi.mock('../../../src/messageComposer/middleware', () => ({
+vi.mock('../../../src/messageComposer/middleware/messageComposer', () => ({
   MessageComposerMiddlewareExecutor: vi.fn().mockImplementation(() => ({
     execute: vi.fn().mockResolvedValue({ state: {} }),
   })),
@@ -134,7 +153,7 @@ const setup = ({
 }: {
   composition?: LocalMessage | DraftResponse | MessageResponse | undefined;
   compositionContext?: Channel | Thread | LocalMessage | undefined;
-  config?: Partial<MessageComposerConfig>;
+  config?: DeepPartial<MessageComposerConfig>;
 } = {}) => {
   const mockClient = new StreamChat('test-api-key');
   mockClient.user = user;
@@ -379,21 +398,26 @@ describe('MessageComposer', () => {
 
     it('should return the correct compositionIsEmpty', () => {
       const { messageComposer } = setup();
-      const textComposerMock = messageComposer.textComposer as any;
-
+      const spyTextComposerTextIsEmpty = vi
+        .spyOn(messageComposer.textComposer, 'textIsEmpty', 'get')
+        .mockReturnValueOnce(true)
+        .mockReturnValueOnce(false);
       // First case - empty composition
-      Object.defineProperty(textComposerMock, 'textIsEmpty', {
-        get: () => true,
+      messageComposer.textComposer.state.partialNext({
+        text: '',
+        mentionedUsers: [],
+        selection: { start: 0, end: 0 },
       });
-      textComposerMock.state.next({ text: '' });
       expect(messageComposer.compositionIsEmpty).toBe(true);
 
       // Second case - non-empty composition
-      Object.defineProperty(textComposerMock, 'textIsEmpty', {
-        get: () => false,
+      messageComposer.textComposer.state.partialNext({
+        text: 'Hello world',
+        mentionedUsers: [],
+        selection: { start: 0, end: 0 },
       });
-      textComposerMock.state.next({ text: 'Hello world' });
       expect(messageComposer.compositionIsEmpty).toBe(false);
+      spyTextComposerTextIsEmpty.mockRestore();
     });
   });
 
@@ -982,7 +1006,7 @@ describe('MessageComposer', () => {
             description: '',
             enforce_unique_vote: false,
             is_closed: false,
-            max_votes_allowed: 1,
+            max_votes_allowed: '1',
             user_id: 'user-id',
             voting_visibility: 'public',
           },
@@ -1024,5 +1048,42 @@ describe('MessageComposer', () => {
         expect(spy).toHaveBeenCalled();
       });
     });
+
+    describe('subscribeMessageComposerConfigStateChanged', () => {
+      const defaultValue = 'Default text';
+
+      it('should insert default text when text is empty and config has a default value', () => {
+        const { messageComposer } = setup();
+        const spy = vi.spyOn(messageComposer.textComposer, 'insertText');
+        messageComposer.registerSubscriptions();
+        expect(spy).not.toHaveBeenCalled();
+
+        messageComposer.textComposer.defaultValue = defaultValue;
+
+        expect(spy).toHaveBeenCalledWith({
+          text: defaultValue,
+          selection: { start: 0, end: 0 },
+        });
+        spy.mockRestore();
+      });
+
+      it('should not insert default text when text is not empty', () => {
+        const { messageComposer } = setup();
+        messageComposer.registerSubscriptions();
+        const spy = vi.spyOn(messageComposer.textComposer, 'insertText');
+
+        messageComposer.textComposer.state.next({
+          text: 'Hello world',
+          mentionedUsers: [],
+          selection: { start: 0, end: 0 },
+        });
+        expect(spy).not.toHaveBeenCalled();
+
+        messageComposer.textComposer.defaultValue = defaultValue;
+
+        expect(spy).not.toHaveBeenCalled();
+        spy.mockRestore();
+      });
+    });
   });
 });

test/unit/MessageComposer/textComposer.test.ts

@@ -443,6 +443,23 @@ describe('TextComposer', () => {
       textComposer.insertText({ text: 'Hi', selection: { start: 0, end: 5 } });
       expect(textComposer.text).toBe('Hi world');
     });
+
+    it('should handle insertion with multi-character selection and maxLengthOnEdit restricting the size', () => {
+      const message: LocalMessage = {
+        id: 'test-message',
+        type: 'regular',
+        text: 'Hello world',
+      };
+      const {
+        messageComposer: { textComposer },
+      } = setup({
+        config: { maxLengthOnEdit: 10 },
+        composition: message,
+      });
+      const insertedText = 'Hi world';
+      textComposer.insertText({ text: insertedText, selection: { start: 7, end: 9 } });
+      expect(textComposer.text).toBe('Hello wHi ');
+    });
   });
 
   describe('closeSuggestions', () => {