feat: improve MessageComposer ergonomics

MartinCupela · MartinCupela · commit 2c0c639b6539 · 2025-04-30T13:28:38.000+02:00
diff --git a/src/custom_types.ts b/src/custom_types.ts
@@ -9,3 +9,4 @@ export interface CustomPollData {}
 export interface CustomReactionData {}
 export interface CustomUserData {}
 export interface CustomThreadData {}
+export interface CustomMessageComposerData {}
diff --git a/src/index.ts b/src/index.ts
@@ -8,6 +8,7 @@ export * from './connection';
 export * from './events';
 export * from './insights';
 export * from './messageComposer';
+export * from './middleware';
 export * from './moderation';
 export * from './permissions';
 export * from './poll';
@@ -34,6 +35,7 @@ export type {
   CustomCommandData,
   CustomEventData,
   CustomMemberData,
+  CustomMessageComposerData,
   CustomMessageData,
   CustomPollOptionData,
   CustomPollData,
diff --git a/src/messageComposer/CustomDataManager.ts b/src/messageComposer/CustomDataManager.ts
@@ -1,9 +1,16 @@
-import type { CustomMessageData, DraftMessage, LocalMessage } from '..';
 import { StateStore } from '..';
+import type {
+  CustomMessageComposerData,
+  CustomMessageData,
+  DraftMessage,
+  LocalMessage,
+} from '..';
 import type { MessageComposer } from './messageComposer';
+import type { DeepPartial } from '../types.utility';
 
 export type CustomDataManagerState = {
-  data: CustomMessageData;
+  message: CustomMessageData;
+  custom: CustomMessageComposerData;
 };
 
 export type CustomDataManagerOptions = {
@@ -12,8 +19,9 @@ export type CustomDataManagerOptions = {
 };
 
 const initState = (options: CustomDataManagerOptions): CustomDataManagerState => {
-  if (!options) return { data: {} as CustomMessageData };
-  return { data: {} as CustomMessageData };
+  if (!options)
+    return { message: {} as CustomMessageData, custom: {} as CustomMessageComposerData };
+  return { message: {} as CustomMessageData, custom: {} as CustomMessageComposerData };
 };
 
 export class CustomDataManager {
@@ -25,23 +33,36 @@ export class CustomDataManager {
     this.state = new StateStore<CustomDataManagerState>(initState({ composer, message }));
   }
 
-  get data() {
-    return this.state.getLatestValue().data;
+  get customMessageData() {
+    return this.state.getLatestValue().message;
   }
 
-  isDataEqual = (
+  get customComposerData() {
+    return this.state.getLatestValue().custom;
+  }
+
+  isMessageDataEqual = (
     nextState: CustomDataManagerState,
     previousState?: CustomDataManagerState,
-  ) => JSON.stringify(nextState.data) === JSON.stringify(previousState?.data);
+  ) => JSON.stringify(nextState.message) === JSON.stringify(previousState?.message);
 
   initState = ({ message }: { message?: DraftMessage | LocalMessage } = {}) => {
     this.state.next(initState({ composer: this.composer, message }));
   };
 
-  setData(data: Partial<CustomMessageData>) {
+  setMessageData(data: DeepPartial<CustomMessageData>) {
+    this.state.partialNext({
+      message: {
+        ...this.state.getLatestValue().message,
+        ...data,
+      },
+    });
+  }
+
+  setCustomData(data: DeepPartial<CustomMessageComposerData>) {
     this.state.partialNext({
-      data: {
-        ...this.state.getLatestValue().data,
+      custom: {
+        ...this.state.getLatestValue().custom,
         ...data,
       },
     });
diff --git a/src/messageComposer/index.ts b/src/messageComposer/index.ts
@@ -1,6 +1,7 @@
 export * from './attachmentIdentity';
 export * from './attachmentManager';
 export * from './configuration';
+export * from './CustomDataManager';
 export * from './fileUtils';
 export * from './linkPreviewsManager';
 export * from './messageComposer';
diff --git a/src/messageComposer/messageComposer.ts b/src/messageComposer/messageComposer.ts
@@ -511,7 +511,7 @@ export class MessageComposer {
     this.customDataManager.state.subscribe((nextValue, previousValue) => {
       if (
         typeof previousValue !== 'undefined' &&
-        !this.customDataManager.isDataEqual(nextValue, previousValue)
+        !this.customDataManager.isMessageDataEqual(nextValue, previousValue)
       ) {
         this.logStateUpdateTimestamp();
       }
diff --git a/src/messageComposer/middleware/messageComposer/customData.ts b/src/messageComposer/middleware/messageComposer/customData.ts
@@ -11,7 +11,7 @@ export const createCustomDataCompositionMiddleware = (composer: MessageComposer)
     input,
     nextHandler,
   }: MiddlewareHandlerParams<MessageComposerMiddlewareValueState>) => {
-    const data = composer.customDataManager.data;
+    const data = composer.customDataManager.customMessageData;
     if (!data) return nextHandler(input);
 
     return nextHandler({
@@ -39,7 +39,7 @@ export const createDraftCustomDataCompositionMiddleware = (
     input,
     nextHandler,
   }: MiddlewareHandlerParams<MessageDraftComposerMiddlewareValueState>) => {
-    const data = composer.customDataManager.data;
+    const data = composer.customDataManager.customMessageData;
     if (!data) return nextHandler(input);
 
     return nextHandler({
diff --git a/src/messageComposer/textComposer.ts b/src/messageComposer/textComposer.ts
@@ -1,7 +1,12 @@
 import { TextComposerMiddlewareExecutor } from './middleware';
 import { StateStore } from '../store';
 import { logChatPromiseExecution } from '../utils';
-import type { TextComposerState, TextComposerSuggestion, TextSelection } from './types';
+import type {
+  Suggestions,
+  TextComposerState,
+  TextComposerSuggestion,
+  TextSelection,
+} from './types';
 import type { MessageComposer } from './messageComposer';
 import type { DraftMessage, LocalMessage, UserResponse } from '../types';
 
@@ -150,6 +155,11 @@ export class TextComposer {
     this.state.partialNext({ text });
   };
 
+  setSelection = (selection: TextSelection) => {
+    if (!this.enabled) return;
+    this.state.partialNext({ selection });
+  };
+
   insertText = ({ text, selection }: { text: string; selection?: TextSelection }) => {
     if (!this.enabled) return;
 
@@ -184,6 +194,34 @@ export class TextComposer {
     });
   };
 
+  wrapSelection = ({
+    head = '',
+    selection,
+    tail = '',
+  }: {
+    head?: string;
+    selection?: TextSelection;
+    tail?: string;
+  }) => {
+    if (!this.enabled) return;
+    const currentSelection: TextSelection = selection ?? this.selection;
+    const prependedText = this.text.slice(0, currentSelection.start);
+    const selectedText = this.text.slice(currentSelection.start, currentSelection.end);
+    const appendedText = this.text.slice(currentSelection.end);
+    const finalSelection = {
+      start: prependedText.length + head.length,
+      end: prependedText.length + head.length + selectedText.length,
+    };
+    this.state.partialNext({
+      text: [prependedText, head, selectedText, tail, appendedText].join(''),
+      selection: finalSelection,
+    });
+  };
+
+  setSuggestions = (suggestions: Suggestions) => {
+    this.state.partialNext({ suggestions });
+  };
+
   closeSuggestions = () => {
     const { suggestions } = this.state.getLatestValue();
     if (!suggestions) return;
diff --git a/test/unit/MessageComposer/CustomDataManager.test.ts b/test/unit/MessageComposer/CustomDataManager.test.ts
@@ -33,7 +33,7 @@ describe('CustomDataManager', () => {
 
   describe('constructor', () => {
     it('should initialize with empty data', () => {
-      expect(customDataManager.data).toEqual({});
+      expect(customDataManager.customMessageData).toEqual({});
     });
 
     it('should initialize with message data if provided', () => {
@@ -56,19 +56,19 @@ describe('CustomDataManager', () => {
         message,
       });
 
-      expect(managerWithMessage.data).toEqual({});
+      expect(managerWithMessage.customMessageData).toEqual({});
     });
   });
 
   describe('initState', () => {
     it('should reset state to empty data', () => {
       // Set some data first
-      customDataManager.setData({ test: 'value' });
-      expect(customDataManager.data).toEqual({ test: 'value' });
+      customDataManager.setMessageData({ test: 'value' });
+      expect(customDataManager.customMessageData).toEqual({ test: 'value' });
 
       // Reset state
       customDataManager.initState();
-      expect(customDataManager.data).toEqual({});
+      expect(customDataManager.customMessageData).toEqual({});
     });
 
     it('should reset state with message data if provided', () => {
@@ -87,42 +87,45 @@ describe('CustomDataManager', () => {
       };
 
       customDataManager.initState({ message });
-      expect(customDataManager.data).toEqual({});
+      expect(customDataManager.customMessageData).toEqual({});
     });
   });
 
   describe('setCustomData', () => {
     it('should update data with new values', () => {
-      customDataManager.setData({ field1: 'value1' });
-      expect(customDataManager.data).toEqual({ field1: 'value1' });
+      customDataManager.setMessageData({ field1: 'value1' });
+      expect(customDataManager.customMessageData).toEqual({ field1: 'value1' });
 
-      customDataManager.setData({ field2: 'value2' });
-      expect(customDataManager.data).toEqual({ field1: 'value1', field2: 'value2' });
+      customDataManager.setMessageData({ field2: 'value2' });
+      expect(customDataManager.customMessageData).toEqual({
+        field1: 'value1',
+        field2: 'value2',
+      });
     });
 
     it('should override existing values', () => {
-      customDataManager.setData({ field1: 'value1' });
-      customDataManager.setData({ field1: 'new-value' });
-      expect(customDataManager.data).toEqual({ field1: 'new-value' });
+      customDataManager.setMessageData({ field1: 'value1' });
+      customDataManager.setMessageData({ field1: 'new-value' });
+      expect(customDataManager.customMessageData).toEqual({ field1: 'new-value' });
     });
   });
 
   describe('isDataEqual', () => {
     it('should return true for equal data', () => {
-      const state1 = { data: { field1: 'value1' } };
-      const state2 = { data: { field1: 'value1' } };
-      expect(customDataManager.isDataEqual(state1, state2)).toBe(true);
+      const state1 = { message: { field1: 'value1' } };
+      const state2 = { message: { field1: 'value1' } };
+      expect(customDataManager.isMessageDataEqual(state1, state2)).toBe(true);
     });
 
     it('should return false for different data', () => {
-      const state1 = { data: { field1: 'value1' } };
-      const state2 = { data: { field1: 'value2' } };
-      expect(customDataManager.isDataEqual(state1, state2)).toBe(false);
+      const state1 = { message: { field1: 'value1' } };
+      const state2 = { message: { field1: 'value2' } };
+      expect(customDataManager.isMessageDataEqual(state1, state2)).toBe(false);
     });
 
     it('should handle undefined previous state', () => {
-      const state1 = { data: { field1: 'value1' } };
-      expect(customDataManager.isDataEqual(state1, undefined)).toBe(false);
+      const state1 = { message: { field1: 'value1' } };
+      expect(customDataManager.isMessageDataEqual(state1, undefined)).toBe(false);
     });
   });
 });
diff --git a/test/unit/MessageComposer/middleware/messageComposer/customData.test.ts b/test/unit/MessageComposer/middleware/messageComposer/customData.test.ts
@@ -29,7 +29,7 @@ describe('Custom Data Middleware', () => {
   describe('createCustomDataCompositionMiddleware', () => {
     it('should initialize with custom data', async () => {
       const data = { key: 'value' };
-      composer.customDataManager.setData(data);
+      composer.customDataManager.setMessageData(data);
       const middleware = createCustomDataCompositionMiddleware(composer);
       const state: MessageComposerMiddlewareValueState = {
         message: { id: '1', type: 'regular' },
@@ -91,7 +91,7 @@ describe('Custom Data Middleware', () => {
   describe('createDraftCustomDataCompositionMiddleware', () => {
     it('should initialize with custom data', async () => {
       const data = { key: 'value' };
-      composer.customDataManager.setData(data);
+      composer.customDataManager.setMessageData(data);
       const middleware = createDraftCustomDataCompositionMiddleware(composer);
       const state: MessageDraftComposerMiddlewareValueState = {
         draft: {
diff --git a/test/unit/MessageComposer/textComposer.test.ts b/test/unit/MessageComposer/textComposer.test.ts
@@ -491,6 +491,77 @@ describe('TextComposer', () => {
     });
   });
 
+  describe('wrapSelection', () => {
+    const message: LocalMessage = {
+      id: 'test-message',
+      type: 'regular',
+      text: 'Hello world',
+    };
+
+    it('should wrap selection from both sides', () => {
+      const selection = { start: 0, end: 5 };
+      const {
+        messageComposer: { textComposer },
+      } = setup({ composition: message });
+      textComposer.wrapSelection({ head: '**', tail: '**', selection });
+      expect(textComposer.text).toBe('**Hello** world');
+      expect(textComposer.selection).toEqual({ start: 2, end: 7 });
+    });
+
+    it('should wrap selection from the head side', () => {
+      const selection = { start: 0, end: 5 };
+      const {
+        messageComposer: { textComposer },
+      } = setup({ composition: message });
+      textComposer.wrapSelection({ head: '**', selection });
+      expect(textComposer.text).toBe('**Hello world');
+      expect(textComposer.selection).toEqual({ start: 2, end: 7 });
+    });
+
+    it('should wrap selection from the tail side', () => {
+      const selection = { start: 0, end: 5 };
+      const {
+        messageComposer: { textComposer },
+      } = setup({ composition: message });
+      textComposer.wrapSelection({ tail: '**', selection });
+      expect(textComposer.text).toBe('Hello** world');
+      expect(textComposer.selection).toEqual({ start: 0, end: 5 });
+    });
+
+    it('should wrap cursor', () => {
+      const selection = { start: 5, end: 5 };
+      const {
+        messageComposer: { textComposer },
+      } = setup({ composition: message });
+      textComposer.wrapSelection({ head: '**', tail: '**', selection });
+      expect(textComposer.text).toBe('Hello**** world');
+      expect(textComposer.selection).toEqual({ start: 7, end: 7 });
+    });
+
+    it('should avoid changes if text composition is disabled', () => {
+      const selection = { start: 5, end: 5 };
+      const {
+        messageComposer: { textComposer },
+      } = setup({ composition: message, config: { enabled: false } });
+      const initialSelection = textComposer.selection;
+      textComposer.wrapSelection({ head: '**', tail: '**', selection });
+      expect(textComposer.text).toBe(message.text);
+      expect(selection).not.toEqual(initialSelection);
+      expect(textComposer.selection).toEqual(initialSelection);
+    });
+
+    it('should use current selection if custom not provided', () => {
+      const initialSelection = { start: 2, end: 3 };
+      const {
+        messageComposer: { textComposer },
+      } = setup({ composition: message });
+      textComposer.setSelection(initialSelection);
+      textComposer.wrapSelection({ head: '**', tail: '**' });
+      expect(textComposer.text).toBe('He**l**lo world');
+      expect(textComposer.selection).toEqual({ start: 4, end: 5 });
+    });
+  });
+
   describe('closeSuggestions', () => {
     const message: LocalMessage = {
       id: 'test-message',

Original file line number	Diff line number	Diff line change
`@@ -511,7 +511,7 @@ export class MessageComposer {`
`511`	`511`	`this.customDataManager.state.subscribe((nextValue, previousValue) => {`
`512`	`512`	`if (`
`513`	`513`	`typeof previousValue !== 'undefined' &&`
`514`		`- !this.customDataManager.isDataEqual(nextValue, previousValue)`
	`514`	`+ !this.customDataManager.isMessageDataEqual(nextValue, previousValue)`
`515`	`515`	`) {`
`516`	`516`	`this.logStateUpdateTimestamp();`
`517`	`517`	`}`