Merge pull request #670 from GetStream/textarea-paste-limit

textarea-paste-limit

Author: DanC5

src/components/MessageInput/MessageInputFlat.js

@@ -122,9 +122,9 @@ MessageInputFlat.propTypes = {
   /** enable/disable firing the typing event */
   publishTypingEvent: PropTypes.bool,
   /**
-   * Any additional attrubutes that you may want to add for underlying HTML textarea element.
+   * Any additional attributes that you may want to add for underlying HTML textarea element.
    */
-  additionalTextareaProps: PropTypes.object,
+  additionalTextareaProps: /** @type {PropTypes.Validator<React.TextareaHTMLAttributes<import('types').AnyType>>} */ (PropTypes.object),
   /**
    * Override the default triggers of the ChatAutoComplete component
    */

src/components/MessageInput/MessageInputLarge.js

@@ -167,9 +167,9 @@ MessageInputLarge.propTypes = {
   /** enable/disable firing the typing event */
   publishTypingEvent: PropTypes.bool,
   /**
-   * Any additional attrubutes that you may want to add for underlying HTML textarea element.
+   * Any additional attributes that you may want to add for underlying HTML textarea element.
    */
-  additionalTextareaProps: PropTypes.object,
+  additionalTextareaProps: /** @type {PropTypes.Validator<React.TextareaHTMLAttributes<import('types').AnyType>>} */ (PropTypes.object),
   /**
    * Override the default triggers of the ChatAutoComplete component
    */

src/components/MessageInput/MessageInputSimple.js

@@ -78,9 +78,9 @@ MessageInputSimple.propTypes = {
   /** enable/disable firing the typing event */
   publishTypingEvent: PropTypes.bool,
   /**
-   * Any additional attrubutes that you may want to add for underlying HTML textarea element.
+   * Any additional attributes that you may want to add for underlying HTML textarea element.
    */
-  additionalTextareaProps: PropTypes.object,
+  additionalTextareaProps: /** @type {PropTypes.Validator<React.TextareaHTMLAttributes<import('types').AnyType>>} */ (PropTypes.object),
   /**
    * Override the default triggers of the ChatAutoComplete component
    */

src/components/MessageInput/MessageInputSmall.js

@@ -123,9 +123,9 @@ MessageInputSmall.propTypes = {
   /** enable/disable firing the typing event */
   publishTypingEvent: PropTypes.bool,
   /**
-   * Any additional attrubutes that you may want to add for underlying HTML textarea element.
+   * Any additional attributes that you may want to add for underlying HTML textarea element.
    */
-  additionalTextareaProps: PropTypes.object,
+  additionalTextareaProps: /** @type {PropTypes.Validator<React.TextareaHTMLAttributes<import('types').AnyType>>} */ (PropTypes.object),
   /**
    * Override the default triggers of the ChatAutoComplete component
    */

src/components/MessageInput/hooks/messageInput.js

@@ -1,4 +1,3 @@
-// @ts-check
 import {
   useReducer,
   useEffect,
@@ -62,7 +61,7 @@ function initState(message) {
     };
   }
 
-  // if message prop is defined, get imageuploads, fileuploads, text, etc. from it
+  // if message prop is defined, get image uploads, file uploads, text, etc. from it
   const imageUploads =
     message.attachments
       ?.filter(({ type }) => type === 'image')
@@ -212,24 +211,29 @@ function messageInputReducer(state, action) {
  */
 export default function useMessageInput(props) {
   const {
+    additionalTextareaProps,
+    clearEditingState,
     doImageUploadRequest,
     doFileUploadRequest,
+    errorHandler,
     focus,
     message,
-    clearEditingState,
+    noFiles,
     overrideSubmitHandler,
     parent,
-    noFiles,
-    errorHandler,
     publishTypingEvent,
   } = props;
 
+  const {
+    channel,
+    editMessage,
+    maxNumberOfFiles,
+    multipleUploads,
+    sendMessage,
+  } = useContext(ChannelContext);
+
   const [state, dispatch] = useReducer(messageInputReducer, message, initState);
-  const textareaRef = useRef(
-    /** @type {HTMLTextAreaElement | undefined} */ (undefined),
-  );
-  const emojiPickerRef = useRef(/** @type {HTMLDivElement | null} */ (null));
-  const channelContext = useContext(ChannelContext);
+
   const {
     text,
     imageOrder,
@@ -240,10 +244,13 @@ export default function useMessageInput(props) {
     numberOfUploads,
     mentioned_users,
   } = state;
-  const { channel, editMessage, sendMessage } = channelContext;
 
-  // Focus
+  const textareaRef = useRef(
+    /** @type {HTMLTextAreaElement | undefined} */ (undefined),
+  );
+  const emojiPickerRef = useRef(/** @type {HTMLDivElement | null} */ (null));
 
+  // Focus
   useEffect(() => {
     if (focus && textareaRef.current) {
       textareaRef.current.focus();
@@ -252,28 +259,45 @@ export default function useMessageInput(props) {
 
   // Text + cursor position
   const newCursorPosition = useRef(/** @type {number | null} */ (null));
+
   const insertText = useCallback(
     (textToInsert) => {
+      const { maxLength } = additionalTextareaProps;
+
       if (!textareaRef.current) {
         dispatch({
           type: 'setText',
-          getNewText: (t) => t + textToInsert,
+          getNewText: (t) => {
+            const updatedText = t + textToInsert;
+            if (updatedText.length > maxLength) {
+              return updatedText.slice(0, maxLength);
+            }
+            return updatedText;
+          },
         });
         return;
       }
 
-      const textareaElement = textareaRef.current;
-      const { selectionStart, selectionEnd } = textareaElement;
+      const { selectionStart, selectionEnd } = textareaRef.current;
       newCursorPosition.current = selectionStart + textToInsert.length;
+
       dispatch({
         type: 'setText',
-        getNewText: (prevText) =>
-          prevText.slice(0, selectionStart) +
-          textToInsert +
-          prevText.slice(selectionEnd),
+        getNewText: (prevText) => {
+          const updatedText =
+            prevText.slice(0, selectionStart) +
+            textToInsert +
+            prevText.slice(selectionEnd);
+
+          if (updatedText.length > maxLength) {
+            return updatedText.slice(0, maxLength);
+          }
+
+          return updatedText;
+        },
       });
     },
-    [textareaRef, newCursorPosition],
+    [additionalTextareaProps, newCursorPosition, textareaRef],
   );
 
   useEffect(() => {
@@ -524,7 +548,7 @@ export default function useMessageInput(props) {
           dispatch({ type: 'setFileUpload', id, state: 'failed' });
         }
         if (!alreadyRemoved && errorHandler) {
-          // TODO: verify if the paramaters passed to the error handler actually make sense
+          // TODO: verify if the parameters passed to the error handler actually make sense
           errorHandler(e, 'upload-file', file);
         }
         return;
@@ -579,7 +603,7 @@ export default function useMessageInput(props) {
           dispatch({ type: 'setImageUpload', id, state: 'failed' });
         }
         if (!alreadyRemoved && errorHandler) {
-          // TODO: verify if the paramaters passed to the error handler actually make sense
+          // TODO: verify if the parameters passed to the error handler actually make sense
           errorHandler(e, 'upload-image', {
             id,
             file,
@@ -639,12 +663,12 @@ export default function useMessageInput(props) {
   // Number of files that the user can still add. Should never be more than the amount allowed by the API.
   // If multipleUploads is false, we only want to allow a single upload.
   const maxFilesAllowed = useMemo(() => {
-    if (!channelContext.multipleUploads) return 1;
-    if (channelContext.maxNumberOfFiles === undefined) {
+    if (!multipleUploads) return 1;
+    if (maxNumberOfFiles === undefined) {
       return apiMaxNumberOfFiles;
     }
-    return channelContext.maxNumberOfFiles;
-  }, [channelContext.maxNumberOfFiles, channelContext.multipleUploads]);
+    return maxNumberOfFiles;
+  }, [maxNumberOfFiles, multipleUploads]);
 
   const maxFilesLeft = maxFilesAllowed - numberOfUploads;
 
@@ -673,9 +697,7 @@ export default function useMessageInput(props) {
       (async (event) => {
         // TODO: Move this handler to package with ImageDropzone
         const { items } = event.clipboardData;
-        if (!dataTransferItemsHaveFiles(items)) {
-          return;
-        }
+        if (!dataTransferItemsHaveFiles(items)) return;
 
         event.preventDefault();
         // Get a promise for the plain text in case no files are
@@ -686,6 +708,7 @@ export default function useMessageInput(props) {
         const plainTextItem = [...items].find(
           ({ kind, type }) => kind === 'string' && type === 'text/plain',
         );
+
         if (plainTextItem) {
           plainTextPromise = new Promise((resolve) => {
             plainTextItem.getAsString((s) => {
@@ -699,14 +722,15 @@ export default function useMessageInput(props) {
           uploadNewFiles(fileLikes);
           return;
         }
+
         // fallback to regular text paste
         if (plainTextPromise) {
-          const s = await plainTextPromise;
-          insertText(s);
+          const pastedText = await plainTextPromise;
+          insertText(pastedText);
         }
       })(e);
     },
-    [uploadNewFiles, insertText],
+    [insertText, uploadNewFiles],
   );
 
   const isUploadEnabled = channel?.getConfig?.()?.uploads !== false;

types/index.d.ts

@@ -709,7 +709,7 @@ export interface MessageInputProps {
    *  }}
    * />
    */
-  additionalTextareaProps?: object;
+  additionalTextareaProps?: React.TextareaHTMLAttributes;
   /** Message object. If defined, the message passed will be edited, instead of a new message being created */
   message?: Client.MessageResponse;
   /** Callback to clear editing state in parent component */