feat: mention should work on paste (#438)

Sravan S · web-flow · commit 1e667ea968e5 · 2023-03-17T15:25:48.000+09:00
Mentions should be preserved from copy paste from sendbird-messages and message input * Make sure you are posting mentions of users from same channel * We dont support pasting of rich text from other applications * For copying simple text, we recommend using paste option in message context-menu Conditions tested: 1. paste simple text 2. paste text with mention 3. paste text with mention and text 4. paste text with mention and text and paste again before and after 5. copy message with mention(only one mention, no other text) and paste 6. copy message with mention from input and paste(before and after) fixes: https://sendbird.atlassian.net/browse/UIKIT-2980
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "@sendbird/chat": "^4.2.3",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
+    "dompurify": "^3.0.1",
     "lamejs": "^1.2.1",
     "prop-types": "^15.7.2"
   },
diff --git a/rollup.config.js b/rollup.config.js
@@ -48,6 +48,7 @@ module.exports = ({
     'react-dom',
     'css-vars-ponyfill',
     'date-fns',
+    'dompurify',
   ],
   plugins: [
     postcss({
diff --git a/scripts/package.template.json b/scripts/package.template.json
@@ -29,7 +29,8 @@
     "@sendbird/chat": "^4.1.1",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "dompurify": "^3.0.1"
   },
   "bugs": {
     "url": "https://community.sendbird.com"
diff --git a/src/smart-components/Channel/components/MessageInput/index.tsx b/src/smart-components/Channel/components/MessageInput/index.tsx
@@ -54,6 +54,7 @@ const MessageInputWrapper = (
 
   const { stringSet } = useContext(LocalizationContext);
   const [mentionNickname, setMentionNickname] = useState('');
+  // todo: set type
   const [mentionedUsers, setMentionedUsers] = useState([]);
   const [mentionedUserIds, setMentionedUserIds] = useState([]);
   const [selectedUser, setSelectedUser] = useState(null);
@@ -173,6 +174,8 @@ const MessageInputWrapper = (
               onVoiceMessageIconClick={() => {
                 setShowVoiceMessageInput(true);
               }}
+              setMentionedUsers={setMentionedUsers}
+              channel={channel}
               placeholder={
                 (quoteMessage && stringSet.MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER)
                 || (utils.isDisabledBecauseFrozen(channel) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED)
diff --git a/src/smart-components/Thread/components/ThreadMessageInput/index.tsx b/src/smart-components/Thread/components/ThreadMessageInput/index.tsx
@@ -141,6 +141,8 @@ const ThreadMessageInput = (
               className="sendbird-thread-message-input__message-input"
               messageFieldId="sendbird-message-input-text-field--thread"
               disabled={disabled}
+              channel={currentChannel}
+              setMentionedUsers={setMentionedUsers}
               channelUrl={currentChannel?.url}
               mentionSelectedUser={selectedUser}
               isMentionEnabled={isMentionEnabled}
diff --git a/src/ui/MentionLabel/index.tsx b/src/ui/MentionLabel/index.tsx
@@ -63,6 +63,8 @@ export default function MentionLabel(props: MentionLabelProps): JSX.Element {
           `}
           onClick={() => fetchUser(toggleDropdown)}
           ref={mentionRef}
+          data-userid={mentionedUserId}
+          data-nickname={mentionedUserNickname}
         >
           <Label
             type={LabelTypography.CAPTION_1}
diff --git a/src/ui/MessageInput/hooks/usePaste/consts.ts b/src/ui/MessageInput/hooks/usePaste/consts.ts
@@ -0,0 +1,5 @@
+export const PASTE_NODE = 'sendbird-uikit__paste-node';
+export const TEXT_MESSAGE_CLASS = 'sendbird-word';
+export const MENTION_CLASS = 'sendbird-word__mention';
+export const MENTION_CLASS_IN_INPUT = 'sendbird-mention-user-label';
+export const MENTION_CLASS_COMBINED_QUERY = `.${MENTION_CLASS}, .${MENTION_CLASS_IN_INPUT}`;
diff --git a/src/ui/MessageInput/hooks/usePaste/index.ts b/src/ui/MessageInput/hooks/usePaste/index.ts
@@ -0,0 +1,80 @@
+import { useCallback } from 'react';
+import DOMPurify from 'dompurify';
+
+import { inserTemplateToDOM } from './insertTemplate';
+import { sanitizeString } from '../../utils';
+import { DynamicProps } from './types';
+import { MENTION_CLASS_COMBINED_QUERY, MENTION_CLASS_IN_INPUT, TEXT_MESSAGE_CLASS } from './consts';
+import {
+  createPasteNode,
+  hasMention,
+  domToMessageTemplate,
+  getUsersFromWords,
+  extractTextFromNodes,
+} from './utils';
+
+// conditions to test:
+// 1. paste simple text
+// 2. paste text with mention
+// 3. paste text with mention and text
+// 4. paste text with mention and text and paste again before and after
+// 5. copy message with mention(only one mention, no other text) and paste
+// 6. copy message with mention from input and paste(before and after)
+export default function usePaste({
+  ref,
+  setIsInput,
+  setHeight,
+  channel,
+  setMentionedUsers,
+}: DynamicProps): (e: React.ClipboardEvent<HTMLDivElement>) => void {
+  return useCallback((e) => {
+    e.preventDefault();
+    const html = e?.clipboardData.getData('text/html');
+    // simple text, continue as normal
+    if (!html) {
+      const text = e?.clipboardData.getData('text');
+      document.execCommand('insertHTML', false, sanitizeString(text));
+      setIsInput(true);
+      setHeight();
+      return;
+    }
+
+    // has html, check if there are mentions, sanitize and insert
+    const purifier = DOMPurify(window);
+    const clean = purifier.sanitize(html);
+    const pasteNode = createPasteNode();
+    pasteNode.innerHTML = clean;
+    // does not have mention, continue as normal
+    if (!hasMention(pasteNode)) {
+      // to preserve space between words
+      const text = extractTextFromNodes(Array.from(pasteNode.children) as HTMLSpanElement[]);
+      document.execCommand('insertHTML', false, sanitizeString(text));
+      pasteNode.remove();
+      setIsInput(true);
+      setHeight();
+      return;
+    }
+
+    // has mention, sanitize and insert
+    let childNodes = pasteNode.querySelectorAll(`.${TEXT_MESSAGE_CLASS}`) as NodeListOf<HTMLSpanElement>;
+    if (pasteNode.querySelectorAll(`.${MENTION_CLASS_IN_INPUT}`).length > 0) {
+      // @ts-ignore
+      childNodes = pasteNode.children;
+    }
+    let nodeArray = Array.from(childNodes);
+    // handle paste when there is only one child
+    if (pasteNode.children.length === 1 && pasteNode.querySelectorAll(MENTION_CLASS_COMBINED_QUERY).length === 1) {
+      nodeArray = Array.from(pasteNode.children) as HTMLSpanElement[];
+    }
+    const words = domToMessageTemplate(nodeArray);
+
+    const mentionedUsers = getUsersFromWords(words, channel);
+    setMentionedUsers(mentionedUsers);
+    inserTemplateToDOM(words);
+    pasteNode.remove();
+    setIsInput(true);
+    setHeight();
+    return;
+
+  }, [ref, setIsInput, setHeight, channel, setMentionedUsers]);
+}
diff --git a/src/ui/MessageInput/hooks/usePaste/insertTemplate.tsx b/src/ui/MessageInput/hooks/usePaste/insertTemplate.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+
+import { Word } from './types';
+import { sanitizeString } from '../../utils';
+import MentionUserLabel from '../../../MentionUserLabel';
+
+export function inserTemplateToDOM(templateList: Word[]): void {
+  const nodes = templateList.map((template) => {
+    const { text, userId } = template;
+    if (userId) {
+      return (
+        renderToString(
+          <>
+            <MentionUserLabel userId={userId}>
+              {text}
+            </MentionUserLabel>
+          </>
+        )
+      );
+    }
+    return sanitizeString(text);
+  })
+  .join(' ')
+  // add a space at the end of the mention, else cursor/caret wont work
+  .concat(' ');
+  document.execCommand('insertHTML', false, nodes);
+}
diff --git a/src/ui/MessageInput/hooks/usePaste/types.ts b/src/ui/MessageInput/hooks/usePaste/types.ts
@@ -0,0 +1,16 @@
+import type { User } from "@sendbird/chat";
+import type { GroupChannel } from "@sendbird/chat/groupChannel";
+
+export type Word = {
+  text: string;
+  userId?: string;
+};
+
+export type DynamicProps = {
+  ref: React.RefObject<HTMLDivElement>;
+  channel: GroupChannel;
+  setUniqueUserIds: React.Dispatch<React.SetStateAction<string[]>>;
+  setMentionedUsers: React.Dispatch<React.SetStateAction<User[]>>;
+  setIsInput: React.Dispatch<React.SetStateAction<boolean>>;
+  setHeight: () => void;
+};
diff --git a/src/ui/MessageInput/hooks/usePaste/utils.ts b/src/ui/MessageInput/hooks/usePaste/utils.ts
@@ -0,0 +1,86 @@
+import { GroupChannel } from '@sendbird/chat/groupChannel';
+import { User } from '@sendbird/chat';
+
+import {
+  PASTE_NODE,
+  MENTION_CLASS,
+  TEXT_MESSAGE_CLASS,
+  MENTION_CLASS_COMBINED_QUERY,
+  MENTION_CLASS_IN_INPUT,
+} from './consts';
+import { Word } from './types';
+
+export function createPasteNode(): HTMLDivElement | null {
+  const pasteNode = document.body.querySelector(`#${PASTE_NODE}`);
+  // remove existing paste node
+  if (pasteNode) {
+    pasteNode?.remove();
+  }
+
+  // create new paste node and return
+  const node = document.createElement('div');
+  node.id = PASTE_NODE;
+  node.style.display = 'none';
+  return node;
+}
+
+export function hasMention(parent: HTMLDivElement): boolean {
+  return parent?.querySelector(MENTION_CLASS_COMBINED_QUERY) ? true : false;
+}
+
+export const extractTextFromNodes = (nodes: HTMLSpanElement[]): string => {
+  let text = '';
+  nodes.forEach((node) => {
+    // to preserve space between words
+    const textNodes = node.querySelectorAll(`.${TEXT_MESSAGE_CLASS}`);
+    if (textNodes.length > 0) {
+      text += ((extractTextFromNodes(Array.from(textNodes) as HTMLSpanElement[])) + ' ');
+    }
+    text += (node.innerText + ' ');
+  });
+  return text;
+}
+
+export function domToMessageTemplate(nodeArray: HTMLSpanElement[]): Word[] {
+  const templates: Word[] = nodeArray?.reduce((accumulator, currentValue) => {
+    let mentionNode = currentValue.querySelector(MENTION_CLASS_COMBINED_QUERY) as HTMLSpanElement;
+    // sometimes the mention node is the parent node
+    // in this case querySelector will return null
+    if (!mentionNode) {
+      mentionNode = (
+        currentValue.classList.contains(MENTION_CLASS)  // for nodes copied from message
+        || currentValue.classList.contains(MENTION_CLASS_IN_INPUT) // for nodes copied from input
+      ) ? currentValue : null;
+    }
+    const text = currentValue.innerText;
+    if (mentionNode) {
+      const userId = mentionNode.dataset?.userid;
+      return [
+        ...accumulator,
+        {
+          text,
+          userId,
+        },
+      ];
+    }
+
+    return [
+      ...accumulator,
+      {
+        text,
+      },
+    ];
+  }, [] as Word[]);
+  return templates;
+}
+
+export function getUsersFromWords(templates: Word[], channel: GroupChannel): User[] {
+  const userMap = {};
+  const users = channel.members;
+  templates.forEach((template) => {
+    if (template.userId) {
+      userMap[template.userId] = users.find((user) => user.userId === template.userId);
+    }
+  });
+  return Object.values(userMap);
+}
diff --git a/src/ui/MessageInput/index.jsx b/src/ui/MessageInput/index.jsx
@@ -26,6 +26,7 @@ import {
   StringObjType,
   convertWordToStringObj,
 } from '../../utils';
+import usePaste from './hooks/usePaste';
 
 const TEXT_FIELD_ID = 'sendbird-message-input-text-field';
 const LINE_HEIGHT = 76;
@@ -81,6 +82,7 @@ const MessageInput = React.forwardRef((props, ref) => {
     onCancelEdit,
     onStartTyping,
     channelUrl,
+    channel,
     mentionSelectedUser,
     onUserMentioned,
     onMentionStringChange,
@@ -91,6 +93,7 @@ const MessageInput = React.forwardRef((props, ref) => {
     renderFileUploadIcon,
     renderVoiceMessageIcon,
     renderSendMessageIcon,
+    setMentionedUsers,
   } = props;
   const textFieldId = messageFieldId || TEXT_FIELD_ID;
   const { stringSet } = useContext(LocalizationContext);
@@ -373,6 +376,14 @@ const MessageInput = React.forwardRef((props, ref) => {
       resetInput(ref);
     }
   };
+  const onPaste = usePaste({
+    ref,
+    setMentionedUserIds,
+    setMentionedUsers,
+    channel,
+    setIsInput,
+    setHeight,
+  });
 
   return (
     <form
@@ -432,10 +443,7 @@ const MessageInput = React.forwardRef((props, ref) => {
             setIsInput(ref?.current?.innerText?.length > 0);
             useMentionedLabelDetection();
           }}
-          onPaste={(e) => {
-            e.preventDefault();
-            document.execCommand("insertHTML", false, sanitizeString(e?.clipboardData.getData('text')));
-          }}
+          onPaste={onPaste}
         />
         {/* placeholder */}
         {!isInput && (
@@ -580,6 +588,7 @@ MessageInput.propTypes = {
     userId: PropTypes.string,
     nickname: PropTypes.string,
   }),
+  setMentionedUsers: PropTypes.func,
   onUserMentioned: PropTypes.func,
   onMentionStringChange: PropTypes.func,
   onMentionedUserIdsUpdated: PropTypes.func,
diff --git a/src/ui/Word/__tests__/__snapshots__/Word.spec.js.snap b/src/ui/Word/__tests__/__snapshots__/Word.spec.js.snap
@@ -15,6 +15,8 @@ exports[`ui/Word should do a snapshot test of the Word DOM 1`] = `
             sendbird-word__mention
             
           "
+        data-nickname="Hoon Baek"
+        data-userid="hoon"
       >
         <span
           class="sendbird-label sendbird-label--caption-1 sendbird-label--color-onbackground-1"

Original file line number	Diff line number	Diff line change
`@@ -63,6 +63,8 @@ export default function MentionLabel(props: MentionLabelProps): JSX.Element {`
`63`	`63`	`}
`64`	`64`	`onClick={() => fetchUser(toggleDropdown)}`
`65`	`65`	`ref={mentionRef}`
	`66`	`+ data-userid={mentionedUserId}`
	`67`	`+ data-nickname={mentionedUserNickname}`
`66`	`68`	`>`
`67`	`69`	`<Label`
`68`	`70`	`type={LabelTypography.CAPTION_1}`