Add custom support for long press MessageContent (#974)

Fixes: [AC-1231](https://sendbird.atlassian.net/browse/AC-1231)

### Changelogs
- Added `renderMobileMenuOnLongPress` in `MessageContentProps`

[AC-1231]:
https://sendbird.atlassian.net/browse/AC-1231?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

### Design Doc

https://sendbird.atlassian.net/wiki/spaces/SDK/pages/2262860027/React+Design+Doc

### Customer Requirements Doc

https://sendbird.atlassian.net/wiki/spaces/SDK/pages/2262860027/React+Design+Doc

Author: chohongm

src/modules/App/stories/customized/MessageContentLongPress.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import ChannelSettings from '../../../ChannelSettings';
+import { CustomSampleAppId, CustomSampleUserNames } from './const';
+import GroupChannelList from '../../../GroupChannelList';
+import Channel from '../../../Channel';
+import SendbirdProvider from '../../../../lib/Sendbird';
+import MessageContent from '../../../../ui/MessageContent';
+
+const userName = CustomSampleUserNames[0];
+const MessageContentLongPress = () => {
+  const [channelUrl, setChannelUrl] = useState();
+  const [showSettings, setShowSettings] = useState(false);
+
+  const setCurrentChannel = (channel) => {
+    setChannelUrl(channel?.url);
+  };
+
+  return (
+    <SendbirdProvider
+      appId={CustomSampleAppId}
+      userId={userName}
+      nickname={userName}
+      theme="dark"
+      showSearchIcon
+      allowProfileEdit
+      breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)}
+    >
+      <div style={{ height: '100%', width: '100%', display: 'flex' }}>
+        <div className="sendbird-app__channellist-wrap">
+          <GroupChannelList
+            selectedChannelUrl={channelUrl}
+            onChannelSelect={setCurrentChannel}
+            onChannelCreated={setCurrentChannel}
+          />
+        </div>
+        <div className="sendbird-app__conversation-wrap">
+          <Channel
+            channelUrl={channelUrl}
+            onChatHeaderActionClick={() => {
+              setShowSettings(true);
+            }}
+            renderMessageContent={(props) => (
+              <MessageContent
+                {...props}
+                onLongPress={(e, contentRef) => {
+                  if (contentRef?.current) {
+                    const belowContainer = document.createElement('div');
+                    belowContainer.style.cssText = 'background-color: white;';
+                    belowContainer.innerText = 'This post is appended!';
+                    contentRef.current.appendChild(belowContainer);
+                  }
+                }}
+              />
+            )}
+          />
+        </div>
+        {showSettings && (
+          <div className="sendbird-app__settingspanel-wrap">
+            <ChannelSettings
+              channelUrl={channelUrl}
+              onCloseClick={() => {
+                setShowSettings(false);
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </SendbirdProvider>
+  );
+};
+
+export default MessageContentLongPress;

src/modules/App/stories/customized/const.ts

@@ -0,0 +1,9 @@
+const age = 75;
+export const CustomSampleAppId = process.env.STORYBOOK_APP_ID;
+export const CustomSampleUserNames = [
+  `hoon${age}1`,
+  `hoon${age}2`,
+  `hoon${age}3`,
+  `hoon${age}4`,
+  `eunseo${age}1`,
+];

src/ui/MessageContent/index.tsx

@@ -44,6 +44,7 @@ import MobileFeedbackMenu from '../MobileFeedbackMenu';
 import MessageFeedbackModal from '../../modules/Channel/components/MessageFeedbackModal';
 import { SbFeedbackStatus } from './types';
 import MessageFeedbackFailedModal from '../../modules/Channel/components/MessageFeedbackFailedModal';
+import { MobileBottomSheetProps } from '../MobileMenu/types';
 
 export interface MessageContentProps {
   className?: string | Array<string>;
@@ -80,6 +81,7 @@ export interface MessageContentProps {
   renderMessageMenu?: (props: MessageMenuProps) => ReactNode;
   renderEmojiMenu?: (props: MessageEmojiMenuProps) => ReactNode;
   renderEmojiReactions?: (props: EmojiReactionsProps) => ReactNode;
+  renderMobileMenuOnLongPress?: (props: MobileBottomSheetProps) => React.ReactElement;
 }
 
 export default function MessageContent(props: MessageContentProps): ReactElement {
@@ -129,6 +131,9 @@ export default function MessageContent(props: MessageContentProps): ReactElement
     renderEmojiReactions = (props: EmojiReactionsProps) => (
       <EmojiReactions {...props} />
     ),
+    renderMobileMenuOnLongPress = (props: MobileBottomSheetProps) => (
+      <MobileMenu {...props} />
+    ),
   } = props;
 
   const { dateLocale } = useLocalization();
@@ -460,33 +465,31 @@ export default function MessageContent(props: MessageContentProps): ReactElement
       {
         showMenu && (
           message?.isUserMessage?.() || message?.isFileMessage?.() || message?.isMultipleFilesMessage?.()
-        ) && (
-          <MobileMenu
-            parentRef={contentRef}
-            channel={channel}
-            hideMenu={() => { setShowMenu(false); }}
-            message={message}
-            isReactionEnabled={isReactionEnabledInChannel}
-            isByMe={isByMe}
-            userId={userId}
-            replyType={replyType}
-            disabled={disabled}
-            showRemove={showRemove}
-            emojiContainer={emojiContainer}
-            resendMessage={resendMessage}
-            deleteMessage={deleteMessage}
-            setQuoteMessage={setQuoteMessage}
-            toggleReaction={toggleReaction}
-            showEdit={showEdit}
-            onReplyInThread={({ message }) => {
-              if (threadReplySelectType === ThreadReplySelectType.THREAD) {
-                onReplyInThread?.({ message });
-              } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
-                scrollToMessage?.(message?.parentMessage?.createdAt || 0, message?.parentMessageId || 0);
-              }
-            }}
-          />
-        )
+        ) && renderMobileMenuOnLongPress({
+          parentRef: contentRef,
+          channel,
+          hideMenu: () => { setShowMenu(false); },
+          message,
+          isReactionEnabled: isReactionEnabledInChannel,
+          isByMe,
+          userId,
+          replyType,
+          disabled,
+          showRemove,
+          emojiContainer,
+          resendMessage,
+          deleteMessage,
+          setQuoteMessage,
+          toggleReaction,
+          showEdit,
+          onReplyInThread: ({ message }) => {
+            if (threadReplySelectType === ThreadReplySelectType.THREAD) {
+              onReplyInThread?.({ message });
+            } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
+              scrollToMessage?.(message?.parentMessage?.createdAt || 0, message?.parentMessageId || 0);
+            }
+          },
+        })
       }
       {
         message?.myFeedback?.rating && showFeedbackOptionsMenu && (