fix: Modified sanitizeString logic (#1236)

[CLNP-5419](https://sendbird.atlassian.net/browse/CLNP-5419)
[SBISSUE-17457](https://sendbird.atlassian.net/browse/SBISSUE-17457)

#### Issue
- Other languages' text was broken when pasting

#### Fix
- Modified the `sanitizeString` logic

[CLNP-5419]:
https://sendbird.atlassian.net/browse/CLNP-5419?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
[SBISSUE-17457]:
https://sendbird.atlassian.net/browse/SBISSUE-17457?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: HoonBaek

src/ui/MessageInput/__tests__/utils.spec.ts

@@ -1,6 +1,5 @@
 import jsdom from 'jsdom';
-
-import { nodeListToArray } from '../utils';
+import { nodeListToArray, sanitizeString } from '../utils';
 
 describe('MessageInputUtils/nodeListToArray', () => {
   it('should convert node list to array', () => {
@@ -19,7 +18,75 @@ describe('MessageInputUtils/nodeListToArray', () => {
   });
 
   it('should return empty array if nodelist is undefined', () => {
-    const nodes = nodeListToArray(null);
+    const nodes = nodeListToArray(undefined);
     expect(nodes.length).toBe(0);
   });
 });
+
+describe('Utils/sanitizeString', () => {
+  it('should encode special HTML characters', () => {
+    const input = '<div>Hello & "world"!</div>';
+    const expectedOutput = '&#60;div&#62;Hello & \"world\"!&#60;/div&#62;';
+    expect(sanitizeString(input)).toBe(expectedOutput);
+  });
+
+  it('should encode non-English characters correctly', () => {
+    const input = '안녕하세요';
+    const expectedOutput = '안녕하세요';
+    expect(sanitizeString(input)).toBe(expectedOutput);
+  });
+
+  it('should encode emojis as HTML entities', () => {
+    const input = '🙂';
+    const expectedOutput = '🙂';
+    expect(sanitizeString(input)).toBe(expectedOutput);
+  });
+
+  it('should handle mixed content with HTML tags and non-English characters', () => {
+    const input = '<p>안녕 & Hello 🙂</p>';
+    const expectedOutput = '&#60;p&#62;안녕 & Hello 🙂&#60;/p&#62;';
+    expect(sanitizeString(input)).toBe(expectedOutput);
+  });
+
+  it('should return an empty string if input is undefined', () => {
+    expect(sanitizeString(undefined)).toBe('');
+  });
+
+  it('should return an empty string if input is null', () => {
+    expect(sanitizeString(null as any)).toBe('');
+  });
+
+  it('should return an empty string if input is empty', () => {
+    expect(sanitizeString('')).toBe('');
+  });
+
+  it('should encode spaces as non-breaking spaces', () => {
+    const input = 'Hello world!'; // Note: The space here is a non-breaking space (U+00A0)
+    const expectedOutput = 'Hello world!';
+    expect(sanitizeString(input)).toBe(expectedOutput);
+  });
+
+  it('should not double encode already encoded HTML entities', () => {
+    const input = '&#60;div&#62;Hello&#60;/div&#62;';
+    const expectedOutput = '&#60;div&#62;Hello&#60;/div&#62;';
+    expect(sanitizeString(input)).toBe(expectedOutput);
+  });
+
+  it('should handle long strings without performance issues', () => {
+    const input = '<div>'.repeat(1000);
+    const expectedOutput = '&#60;div&#62;'.repeat(1000);
+    expect(sanitizeString(input)).toBe(expectedOutput);
+  });
+
+  it('should handle mixed types of spaces', () => {
+    const input = 'Hello\u0020world\u00A0!';
+    const expectedOutput = 'Hello world !';
+    expect(sanitizeString(input)).toBe(expectedOutput);
+  });
+
+  it('should handle special Unicode control characters', () => {
+    const input = 'Hello\u200BWorld'; // Zero-width space (U+200B)
+    const expectedOutput = 'Hello\u200BWorld';
+    expect(sanitizeString(input)).toBe(expectedOutput);
+  });
+});

src/ui/MessageInput/hooks/usePaste/index.ts

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import DOMPurify from 'dompurify';
 
-import { inserTemplateToDOM } from './insertTemplate';
+import { insertTemplateToDOM } from './insertTemplate';
 import { sanitizeString } from '../../utils';
 import { DynamicProps } from './types';
 import { domToMessageTemplate, extractTextFromNodes, getLeafNodes, getUsersFromWords, hasMention } from './utils';
@@ -73,7 +73,7 @@ export function usePaste({
     const mentionedUsers = channel.isGroupChannel() ? getUsersFromWords(words, channel) : [];
 
     setMentionedUsers(mentionedUsers); // Update mentioned users state
-    inserTemplateToDOM(words); // Insert mentions and content into the DOM
+    insertTemplateToDOM(words); // Insert mentions and content into the DOM
     pasteNode.remove();
 
     setIsInput(true);

src/ui/MessageInput/hooks/usePaste/insertTemplate.ts

@@ -2,7 +2,7 @@ import { Word } from './types';
 import { sanitizeString } from '../../utils';
 import renderMentionLabelToString from '../../../MentionUserLabel/renderToString';
 
-export function inserTemplateToDOM(templateList: Word[]): void {
+export function insertTemplateToDOM(templateList: Word[]): void {
   const nodes = templateList.map((template) => {
     const { text, userId } = template;
     if (userId) {

src/ui/MessageInput/utils.ts

@@ -3,8 +3,13 @@ import { BaseChannel } from '@sendbird/chat';
 import { NodeNames, NodeTypes } from './const';
 import { USER_MENTION_TEMP_CHAR } from '../../modules/GroupChannel/context/const';
 
-export const sanitizeString = (str?: string) => {
-  return str?.replace(/[\u00A0-\u9999<>]/gim, (i) => ''.concat('&#', String(i.charCodeAt(0)), ';'));
+/**
+ * - Converts `<` and `>` characters to their HTML entities (`&#60;` and `&#62;`).
+ * - All other characters (including special symbols, emojis, and non-English text) remain unchanged.
+ */
+export const sanitizeString = (str: string = ''): string => {
+  if (!str) return '';
+  return str.replace(/[<>]/g, (char) => (char === '<' ? '&#60;' : '&#62;'));
 };
 
 /**