sceyt-chat-react-uikit 1.7.8-beta.11 → 1.7.8-beta.12

package/components/SendMessageInput/FormatMessagePlugin/index.d.ts

@@ -1,2 +1,12 @@
 /// <reference types="react" />
-export default function FormatMessagePlugin({ editorState, setMessageBodyAttributes, setMessageText, messageToEdit }: any): JSX.Element | null;
+import { IMessage, IMember } from '../../../types';
+export default function FormatMessagePlugin({ editorState, setMessageBodyAttributes, setMessageText, setMentionedMember, messageToEdit, activeChannelMembers, contactsMap, getFromContacts }: {
+    editorState: any;
+    setMessageBodyAttributes: (data: any) => void;
+    setMessageText: (newMessageText: string) => void;
+    setMentionedMember: (mentionedMember: any) => void;
+    messageToEdit?: IMessage;
+    activeChannelMembers: IMember[];
+    contactsMap: any;
+    getFromContacts: boolean;
+}): JSX.Element | null;

package/index.js

@@ -40904,26 +40904,122 @@ function EditMessagePlugin(_ref) {
   return null;
 }
 
-function useFormatMessage(editor, editorState, setMessageBodyAttributes, setMessageText, messageToEdit) {
-  function $insertDataTransferForPlainText(dataTransfer, selection) {
-    var text = dataTransfer.getData('text/plain') || dataTransfer.getData('text/uri-list');
-    if (text != null) {
-      selection.insertRawText(text);
+function useFormatMessage(editor, editorState, setMessageBodyAttributes, setMessageText, setMentionedMember, messageToEdit, activeChannelMembers, contactsMap, getFromContacts) {
+  if (activeChannelMembers === void 0) {
+    activeChannelMembers = [];
+  }
+  if (contactsMap === void 0) {
+    contactsMap = {};
+  }
+  if (getFromContacts === void 0) {
+    getFromContacts = false;
+  }
+  function processMentionsInPastedText(pastedText, activeChannelMembers, contactsMap, getFromContacts, setMentionedMember, selection) {
+    if (!pastedText) return;
+    var contacts = getFromContacts ? [].concat(Object.values(contactsMap), activeChannelMembers) : activeChannelMembers;
+    var mentionPatterns = [];
+    contacts.forEach(function (contactOrMember) {
+      var contactFromMap = contactsMap[contactOrMember.id];
+      var contact = getFromContacts && contactFromMap ? contactFromMap : undefined;
+      var member = contact ? undefined : contactOrMember;
+      var fullDisplayName = makeUsername(contact, member, getFromContacts, false);
+      if (fullDisplayName && fullDisplayName !== 'Deleted user') {
+        mentionPatterns.push({
+          pattern: "@" + fullDisplayName,
+          contact: contactOrMember
+        });
+      }
+    });
+    mentionPatterns.sort(function (a, b) {
+      return b.pattern.length - a.pattern.length;
+    });
+    var matches = [];
+    var usedRanges = [];
+    mentionPatterns.forEach(function (_ref) {
+      var pattern = _ref.pattern,
+        contact = _ref.contact;
+      var searchIndex = 0;
+      var _loop = function _loop() {
+        var index = pastedText.indexOf(pattern, searchIndex);
+        if (index === -1) return 1;
+        var isOverlapping = usedRanges.some(function (range) {
+          return index < range.end && index + pattern.length > range.start;
+        });
+        if (!isOverlapping) {
+          var charBefore = index > 0 ? pastedText[index - 1] : undefined;
+          var isValidStart = charBefore === undefined || charBefore === ' ' || charBefore === '\n' || charBefore === '\r';
+          var charAfter = pastedText[index + pattern.length];
+          var isValidEnd = charAfter === undefined || charAfter === ' ' || charAfter === '\n' || charAfter === '\r';
+          if (isValidStart && isValidEnd) {
+            matches.push({
+              start: index,
+              end: index + pattern.length,
+              contact: contact,
+              pattern: pattern
+            });
+            usedRanges.push({
+              start: index,
+              end: index + pattern.length
+            });
+          }
+        }
+        searchIndex = index + 1;
+      };
+      while (true) {
+        if (_loop()) break;
+      }
+    });
+    matches.sort(function (a, b) {
+      return a.start - b.start;
+    });
+    var nodes = [];
+    var currentIndex = 0;
+    matches.forEach(function (_ref2) {
+      var start = _ref2.start,
+        end = _ref2.end,
+        contact = _ref2.contact,
+        pattern = _ref2.pattern;
+      if (start > currentIndex) {
+        var textBefore = pastedText.substring(currentIndex, start);
+        if (textBefore) {
+          nodes.push(lexical.$createTextNode(textBefore));
+        }
+      }
+      setMentionedMember(contact);
+      var mentionNode = $createMentionNode(_extends({}, contact, {
+        name: pattern
+      }));
+      nodes.push(mentionNode);
+      currentIndex = end;
+    });
+    if (currentIndex < pastedText.length) {
+      var remainingText = pastedText.substring(currentIndex);
+      if (remainingText) {
+        nodes.push(lexical.$createTextNode(remainingText));
+      }
+    }
+    if (matches.length === 0) {
+      nodes.push(lexical.$createTextNode(pastedText));
+    }
+    if (nodes.length > 0) {
+      selection.insertNodes(nodes);
     }
   }
   var handlePast = React.useCallback(function (e) {
-    var pastedTex = e.clipboardData.getData('text/plain');
-    if (pastedTex) {
+    if (!('clipboardData' in e) || !e.clipboardData) {
+      return false;
+    }
+    var pastedText = e.clipboardData.getData('text/plain');
+    if (pastedText) {
       editor.update(function () {
         var selection = lexical.$getSelection();
-        var _event = event,
-          clipboardData = _event.clipboardData;
-        if (clipboardData != null && lexical.$isRangeSelection(selection)) {
-          $insertDataTransferForPlainText(clipboardData, selection);
+        if (lexical.$isRangeSelection(selection)) {
+          processMentionsInPastedText(pastedText, activeChannelMembers, contactsMap, getFromContacts, setMentionedMember, selection);
         }
       });
     }
-  }, [editor]);
+    return true;
+  }, [editor, contactsMap, setMentionedMember, getFromContacts, activeChannelMembers]);
   var onDelete = React.useCallback(function (event) {
     event.preventDefault();
     editor.update(function () {
@@ -41037,14 +41133,18 @@ function useFormatMessage(editor, editorState, setMessageBodyAttributes, setMess
     }
   }, [editor, editorState]);
 }
-function FormatMessagePlugin(_ref) {
-  var editorState = _ref.editorState,
-    setMessageBodyAttributes = _ref.setMessageBodyAttributes,
-    setMessageText = _ref.setMessageText,
-    messageToEdit = _ref.messageToEdit;
+function FormatMessagePlugin(_ref3) {
+  var editorState = _ref3.editorState,
+    setMessageBodyAttributes = _ref3.setMessageBodyAttributes,
+    setMessageText = _ref3.setMessageText,
+    setMentionedMember = _ref3.setMentionedMember,
+    messageToEdit = _ref3.messageToEdit,
+    activeChannelMembers = _ref3.activeChannelMembers,
+    contactsMap = _ref3.contactsMap,
+    getFromContacts = _ref3.getFromContacts;
   var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
     editor = _useLexicalComposerCo[0];
-  useFormatMessage(editor, editorState, setMessageBodyAttributes, setMessageText, messageToEdit);
+  useFormatMessage(editor, editorState, setMessageBodyAttributes, setMessageText, setMentionedMember, messageToEdit, activeChannelMembers, contactsMap, getFromContacts);
   return null;
 }
 
@@ -44196,7 +44296,11 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     editorState: realEditorState,
     setMessageBodyAttributes: setMessageBodyAttributes,
     setMessageText: messageToEdit ? setEditMessageText : setMessageText,
-    messageToEdit: messageToEdit
+    messageToEdit: messageToEdit,
+    activeChannelMembers: activeChannelMembers,
+    contactsMap: contactsMap,
+    getFromContacts: getFromContacts,
+    setMentionedMember: handleSetMentionMember
   }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isEmojisOpened && (/*#__PURE__*/React__default.createElement(EmojisPopup$1, {
     handleEmojiPopupToggle: handleEmojiPopupToggle,
     rightSide: emojisInRightSide,

package/index.modern.js

@@ -40903,26 +40903,122 @@ function EditMessagePlugin(_ref) {
   return null;
 }
 
-function useFormatMessage(editor, editorState, setMessageBodyAttributes, setMessageText, messageToEdit) {
-  function $insertDataTransferForPlainText(dataTransfer, selection) {
-    var text = dataTransfer.getData('text/plain') || dataTransfer.getData('text/uri-list');
-    if (text != null) {
-      selection.insertRawText(text);
+function useFormatMessage(editor, editorState, setMessageBodyAttributes, setMessageText, setMentionedMember, messageToEdit, activeChannelMembers, contactsMap, getFromContacts) {
+  if (activeChannelMembers === void 0) {
+    activeChannelMembers = [];
+  }
+  if (contactsMap === void 0) {
+    contactsMap = {};
+  }
+  if (getFromContacts === void 0) {
+    getFromContacts = false;
+  }
+  function processMentionsInPastedText(pastedText, activeChannelMembers, contactsMap, getFromContacts, setMentionedMember, selection) {
+    if (!pastedText) return;
+    var contacts = getFromContacts ? [].concat(Object.values(contactsMap), activeChannelMembers) : activeChannelMembers;
+    var mentionPatterns = [];
+    contacts.forEach(function (contactOrMember) {
+      var contactFromMap = contactsMap[contactOrMember.id];
+      var contact = getFromContacts && contactFromMap ? contactFromMap : undefined;
+      var member = contact ? undefined : contactOrMember;
+      var fullDisplayName = makeUsername(contact, member, getFromContacts, false);
+      if (fullDisplayName && fullDisplayName !== 'Deleted user') {
+        mentionPatterns.push({
+          pattern: "@" + fullDisplayName,
+          contact: contactOrMember
+        });
+      }
+    });
+    mentionPatterns.sort(function (a, b) {
+      return b.pattern.length - a.pattern.length;
+    });
+    var matches = [];
+    var usedRanges = [];
+    mentionPatterns.forEach(function (_ref) {
+      var pattern = _ref.pattern,
+        contact = _ref.contact;
+      var searchIndex = 0;
+      var _loop = function _loop() {
+        var index = pastedText.indexOf(pattern, searchIndex);
+        if (index === -1) return 1;
+        var isOverlapping = usedRanges.some(function (range) {
+          return index < range.end && index + pattern.length > range.start;
+        });
+        if (!isOverlapping) {
+          var charBefore = index > 0 ? pastedText[index - 1] : undefined;
+          var isValidStart = charBefore === undefined || charBefore === ' ' || charBefore === '\n' || charBefore === '\r';
+          var charAfter = pastedText[index + pattern.length];
+          var isValidEnd = charAfter === undefined || charAfter === ' ' || charAfter === '\n' || charAfter === '\r';
+          if (isValidStart && isValidEnd) {
+            matches.push({
+              start: index,
+              end: index + pattern.length,
+              contact: contact,
+              pattern: pattern
+            });
+            usedRanges.push({
+              start: index,
+              end: index + pattern.length
+            });
+          }
+        }
+        searchIndex = index + 1;
+      };
+      while (true) {
+        if (_loop()) break;
+      }
+    });
+    matches.sort(function (a, b) {
+      return a.start - b.start;
+    });
+    var nodes = [];
+    var currentIndex = 0;
+    matches.forEach(function (_ref2) {
+      var start = _ref2.start,
+        end = _ref2.end,
+        contact = _ref2.contact,
+        pattern = _ref2.pattern;
+      if (start > currentIndex) {
+        var textBefore = pastedText.substring(currentIndex, start);
+        if (textBefore) {
+          nodes.push($createTextNode(textBefore));
+        }
+      }
+      setMentionedMember(contact);
+      var mentionNode = $createMentionNode(_extends({}, contact, {
+        name: pattern
+      }));
+      nodes.push(mentionNode);
+      currentIndex = end;
+    });
+    if (currentIndex < pastedText.length) {
+      var remainingText = pastedText.substring(currentIndex);
+      if (remainingText) {
+        nodes.push($createTextNode(remainingText));
+      }
+    }
+    if (matches.length === 0) {
+      nodes.push($createTextNode(pastedText));
+    }
+    if (nodes.length > 0) {
+      selection.insertNodes(nodes);
     }
   }
   var handlePast = useCallback(function (e) {
-    var pastedTex = e.clipboardData.getData('text/plain');
-    if (pastedTex) {
+    if (!('clipboardData' in e) || !e.clipboardData) {
+      return false;
+    }
+    var pastedText = e.clipboardData.getData('text/plain');
+    if (pastedText) {
       editor.update(function () {
         var selection = $getSelection();
-        var _event = event,
-          clipboardData = _event.clipboardData;
-        if (clipboardData != null && $isRangeSelection(selection)) {
-          $insertDataTransferForPlainText(clipboardData, selection);
+        if ($isRangeSelection(selection)) {
+          processMentionsInPastedText(pastedText, activeChannelMembers, contactsMap, getFromContacts, setMentionedMember, selection);
         }
       });
     }
-  }, [editor]);
+    return true;
+  }, [editor, contactsMap, setMentionedMember, getFromContacts, activeChannelMembers]);
   var onDelete = useCallback(function (event) {
     event.preventDefault();
     editor.update(function () {
@@ -41036,14 +41132,18 @@ function useFormatMessage(editor, editorState, setMessageBodyAttributes, setMess
     }
   }, [editor, editorState]);
 }
-function FormatMessagePlugin(_ref) {
-  var editorState = _ref.editorState,
-    setMessageBodyAttributes = _ref.setMessageBodyAttributes,
-    setMessageText = _ref.setMessageText,
-    messageToEdit = _ref.messageToEdit;
+function FormatMessagePlugin(_ref3) {
+  var editorState = _ref3.editorState,
+    setMessageBodyAttributes = _ref3.setMessageBodyAttributes,
+    setMessageText = _ref3.setMessageText,
+    setMentionedMember = _ref3.setMentionedMember,
+    messageToEdit = _ref3.messageToEdit,
+    activeChannelMembers = _ref3.activeChannelMembers,
+    contactsMap = _ref3.contactsMap,
+    getFromContacts = _ref3.getFromContacts;
   var _useLexicalComposerCo = useLexicalComposerContext(),
     editor = _useLexicalComposerCo[0];
-  useFormatMessage(editor, editorState, setMessageBodyAttributes, setMessageText, messageToEdit);
+  useFormatMessage(editor, editorState, setMessageBodyAttributes, setMessageText, setMentionedMember, messageToEdit, activeChannelMembers, contactsMap, getFromContacts);
   return null;
 }
 
@@ -44195,7 +44295,11 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     editorState: realEditorState,
     setMessageBodyAttributes: setMessageBodyAttributes,
     setMessageText: messageToEdit ? setEditMessageText : setMessageText,
-    messageToEdit: messageToEdit
+    messageToEdit: messageToEdit,
+    activeChannelMembers: activeChannelMembers,
+    contactsMap: contactsMap,
+    getFromContacts: getFromContacts,
+    setMentionedMember: handleSetMentionMember
   }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isEmojisOpened && (/*#__PURE__*/React__default.createElement(EmojisPopup$1, {
     handleEmojiPopupToggle: handleEmojiPopupToggle,
     rightSide: emojisInRightSide,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.7.8-beta.11",
+  "version": "1.7.8-beta.12",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",