[CLNP-8323]Fixed a bug where invisible zero-width spaces inserted during paste i… (#1410)

Fixes [CLNP-8323](https://sendbird.atlassian.net/browse/CLNP-8323)

### Changelogs
- Fixed a bug where invisible zero-width spaces inserted during paste in
`MessageInput` could be included in sent or updated messages


### Checklist

Put an `x` in the boxes that apply. You can also fill these out after
creating the PR. If unsure, ask the members.
This is a reminder of what we look for before merging your code.

- [x] **All tests pass locally with my changes**
- [ ] **I have added tests that prove my fix is effective or that my
feature works**
- [ ] **Public components / utils / props are appropriately exported**
- [ ] I have added necessary documentation (if appropriate)


## External Contributions

This project is not yet set up to accept pull requests from external
contributors.

If you have a pull request that you believe should be accepted, please
contact
the Developer Relations team <developer-advocates@sendbird.com> with
details
and we'll evaluate if we can set up a
[CLA](https://en.wikipedia.org/wiki/Contributor_License_Agreement) to
allow for the contribution.


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

Author: danney-chun

.github/workflows/release-ticket-creation.yml

@@ -204,6 +204,19 @@ describe('ui/MessageInput', () => {
     fireEvent.keyDown(input, { key: 'Enter' });
     expect(onSendMessage).not.toHaveBeenCalledWith({ mentionTemplate: '', message: mockText });
   });
+
+  it('should not call sendMessage with only zero-width spaces', () => {
+    const onSendMessage = jest.fn();
+    render(<MessageInput onSendMessage={onSendMessage} />);
+
+    const input = screen.getByRole('textbox');
+    input.textContent = '\u200B';
+
+    fireEvent.input(input);
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onSendMessage).not.toHaveBeenCalled();
+  });
 
   it('should render send icon if text is present', async() => {
     const onSendMessage = jest.fn();
@@ -367,4 +380,3 @@ describe('MessageInput error handling', () => {
   });
 });
 
-

src/ui/MessageInput/__tests__/MessageInput.spec.js

@@ -1,5 +1,5 @@
 import jsdom from 'jsdom';
-import { nodeListToArray, sanitizeString } from '../utils';
+import { extractTextAndMentions, nodeListToArray, sanitizeString, stripZeroWidthSpace } from '../utils';
 
 describe('MessageInputUtils/nodeListToArray', () => {
   it('should convert node list to array', () => {
@@ -90,3 +90,30 @@ describe('Utils/sanitizeString', () => {
     expect(sanitizeString(input)).toBe(expectedOutput);
   });
 });
+
+describe('Utils/stripZeroWidthSpace', () => {
+  it('should remove zero-width spaces', () => {
+    const input = 'Hello\u200BWorld\u200B';
+    expect(stripZeroWidthSpace(input)).toBe('HelloWorld');
+  });
+
+  it('should return an empty string if input is undefined', () => {
+    expect(stripZeroWidthSpace(undefined)).toBe('');
+  });
+});
+
+describe('Utils/extractTextAndMentions', () => {
+  it('should remove zero-width spaces from extracted text', () => {
+    const dom = new jsdom.JSDOM('<div id="root">Hello\u200BWorld\u200B</div>');
+    const root = dom.window.document.getElementById('root');
+    if (!root) throw new Error('root element not found');
+
+    const result = extractTextAndMentions(root.childNodes);
+
+    expect(result).toEqual({
+      isMentionedMessage: false,
+      mentionTemplate: 'HelloWorld',
+      messageText: 'HelloWorld',
+    });
+  });
+});

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

@@ -11,7 +11,13 @@ import Icon, { IconColors, IconTypes } from '../Icon';
 import Label, { LabelColors, LabelTypography } from '../Label';
 import { useLocalization } from '../../lib/LocalizationContext';
 
-import { extractTextAndMentions, isChannelTypeSupportsMultipleFilesMessage, nodeListToArray, sanitizeString } from './utils';
+import {
+  extractTextAndMentions,
+  isChannelTypeSupportsMultipleFilesMessage,
+  nodeListToArray,
+  sanitizeString,
+  stripZeroWidthSpace,
+} from './utils';
 import { arrayEqual, getMimeTypesUIKitAccepts } from '../../utils';
 import { usePaste } from './hooks/usePaste';
 import { tokenizeMessage } from '../../modules/Message/utils/tokens/tokenize';
@@ -38,6 +44,14 @@ const resetInput = (ref: MutableRefObject<HTMLInputElement | null> | null) => {
   }
 };
 
+const getTextContentWithoutZeroWidthSpace = (node?: { textContent?: string | null } | null) => {
+  return stripZeroWidthSpace(node?.textContent ?? '');
+};
+
+const hasTextContentWithoutZeroWidthSpace = (node?: { textContent?: string | null } | null) => {
+  return getTextContentWithoutZeroWidthSpace(node).trim().length > 0;
+};
+
 interface TargetStringInfo {
   targetString: string;
   startNodeIndex: number | null;
@@ -145,7 +159,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
   useEffect(() => {
     const textField = internalRef?.current;
     setMentionedUserIds([]);
-    setIsInput(textField?.textContent ? textField.textContent.trim().length > 0 : false);
+    setIsInput(hasTextContentWithoutZeroWidthSpace(textField));
   }, [initialValue]);
 
   // #Mention | Clear input value when channel changes
@@ -199,7 +213,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
         }
         setMentionedUserIds([]);
       }
-      setIsInput(textField?.textContent ? textField?.textContent?.trim().length > 0 : false);
+      setIsInput(hasTextContentWithoutZeroWidthSpace(textField));
     }
   }, [isEdit, message]);
 
@@ -216,7 +230,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
         setMentionedUserIds(newMentionedUserIds);
       }
     }
-    setIsInput(textField?.textContent ? textField.textContent?.trim().length > 0 : false);
+    setIsInput(hasTextContentWithoutZeroWidthSpace(textField));
   }, [targetStringInfo, isMentionEnabled]);
 
   // #Mention | Replace selected user nickname to the MentionedUserLabel
@@ -348,8 +362,9 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
   const sendMessage = () => {
     try {
       const textField = internalRef?.current;
-      if (!isEdit && textField?.textContent) {
+      if (!isEdit && textField) {
         const { messageText, mentionTemplate, isMentionedMessage } = extractTextAndMentions(textField.childNodes);
+        if (messageText.trim().length === 0) return;
         const params = { message: messageText, mentionTemplate };
         if (!isMentionedMessage) params.mentionTemplate = '';
         onSendMessage(params);
@@ -372,13 +387,14 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
       eventHandlers?.message?.onSendMessageFailed?.(message, error);
     }
   };
-  const isEditDisabled = !internalRef?.current?.textContent?.trim();
+  const isEditDisabled = !hasTextContentWithoutZeroWidthSpace(internalRef?.current);
   const editMessage = () => {
     try {
       const textField = internalRef?.current;
       const messageId = message?.messageId;
       if (isEdit && messageId && textField) {
         const { messageText, mentionTemplate } = extractTextAndMentions(textField.childNodes);
+        if (messageText.trim().length === 0) return;
         const params = { messageId, message: messageText, mentionTemplate };
         onUpdateMessage(params);
         resetInput(internalRef);
@@ -470,8 +486,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
                 !e.shiftKey
                 && e.key === MessageInputKeys.Enter
                 && !isMobile
-                && internalRef?.current?.textContent
-                && internalRef.current.textContent.trim().length > 0
+                && hasTextContentWithoutZeroWidthSpace(internalRef?.current)
                 && e?.nativeEvent?.isComposing !== true
                 /**
                  * NOTE: What isComposing does?
@@ -506,7 +521,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
           }}
           onInput={() => {
             onStartTyping();
-            setIsInput(internalRef?.current?.textContent ? internalRef.current.textContent.trim().length > 0 : false);
+            setIsInput(hasTextContentWithoutZeroWidthSpace(internalRef?.current));
             useMentionedLabelDetection();
           }}
           onPaste={(e) => {
@@ -515,7 +530,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
           }}
         />
         {/* placeholder */}
-        {(internalRef?.current?.textContent?.length ?? 0) === 0 && (
+        {getTextContentWithoutZeroWidthSpace(internalRef?.current).length === 0 && (
           <Label
             className="sendbird-message-input--placeholder"
             type={LabelTypography.BODY_1}

src/ui/MessageInput/index.tsx

@@ -12,6 +12,11 @@ export const sanitizeString = (str: string = ''): string => {
   return str.replace(/[<>]/g, (char) => (char === '<' ? '&#60;' : '&#62;'));
 };
 
+export const stripZeroWidthSpace = (str: string = ''): string => {
+  if (!str) return '';
+  return str.replace(/\u200B/g, '');
+};
+
 /**
  * NodeList cannot be used with Array methods
  * @param {NodeListOf<ChildNode>} childNodes
@@ -40,17 +45,17 @@ export function extractTextAndMentions(childNodes: NodeListOf<ChildNode>) {
       const { innerText, dataset = {} } = node;
       const { userid = '' } = dataset;
       if (userid) isMentionedMessage = true;
-      messageText += innerText;
+      messageText += stripZeroWidthSpace(innerText);
       mentionTemplate += `${USER_MENTION_TEMP_CHAR}{${userid}}`;
     } else if (isHTMLElement(node) && node.nodeName === NodeNames.Br) {
       messageText += '\n';
       mentionTemplate += '\n';
     } else if (isHTMLElement(node) && node.nodeName === NodeNames.Div) {
-      const { textContent = '' } = node;
+      const textContent = stripZeroWidthSpace(node.textContent ?? '');
       messageText += `\n${textContent}`;
       mentionTemplate += `\n${textContent}`;
     } else {
-      const { textContent = '' } = node;
+      const textContent = stripZeroWidthSpace(node.textContent ?? '');
       messageText += textContent;
       mentionTemplate += textContent;
     }