feat: allow to wrap text selection in text composer

Author: MartinCupela

src/messageComposer/CustomDataManager.ts

@@ -6,6 +6,7 @@ import type {
   LocalMessage,
 } from '..';
 import type { MessageComposer } from './messageComposer';
+import type { DeepPartial } from '../types.utility';
 
 export type CustomDataManagerState = {
   message: CustomMessageData;
@@ -49,7 +50,7 @@ export class CustomDataManager {
     this.state.next(initState({ composer: this.composer, message }));
   };
 
-  setMessageData(data: Partial<CustomMessageData>) {
+  setMessageData(data: DeepPartial<CustomMessageData>) {
     this.state.partialNext({
       message: {
         ...this.state.getLatestValue().message,
@@ -58,7 +59,7 @@ export class CustomDataManager {
     });
   }
 
-  setCustomData(data: Partial<CustomMessageComposerData>) {
+  setCustomData(data: DeepPartial<CustomMessageComposerData>) {
     this.state.partialNext({
       custom: {
         ...this.state.getLatestValue().custom,

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;

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',