feat: plaintext-only message input

src/components/ContentEditable/ContentEditable.jsx

@@ -113,15 +113,18 @@ export class ContentEditable extends Component {
         handleInput,
         handleKeyPress,
         innerHTML,
-        props: { placeholder, disabled, className },
+        props: { placeholder, disabled, className, plaintextOnly },
       } = this,
       ph = typeof placeholder === "string" ? placeholder : "";
 
+    const enabledContentEditable = plaintextOnly ? "plaintext-only" : true;
+    const contentEditable = disabled === false ? enabledContentEditable : false;
+
     return (
       <div
         ref={msgRef}
         className={className}
-        contentEditable={disabled === false}
+        contentEditable={contentEditable}
         disabled={disabled}
         data-placeholder={ph}
         onInput={handleInput}
@@ -142,6 +145,12 @@ ContentEditable.propTypes = {
   /** A input can show it is currently unable to be interacted with. */
   disabled: PropTypes.bool,
 
+  /**
+   * plaintext-only content-editable state, instead of true (when enabled).
+   * prevents pasting rich text (removes formatting from pasted text).
+   */
+  plaintextOnly: PropTypes.bool,
+
   /**
    * Sets focus element and caret at the end of input
    * when value is changed programmatically (e.g) from button click and element is not active

src/components/MessageInput/MessageInput.d.ts

@@ -5,6 +5,7 @@ export interface MessageInputProps {
   value?: string;
   placeholder?: string;
   disabled?: boolean;
+  plaintextOnly?: boolean;
   sendOnReturnDisabled?: boolean;
   sendDisabled?: boolean;
   fancyScroll?: boolean;

src/components/MessageInput/MessageInput.jsx

@@ -76,6 +76,7 @@ function MessageInputInner(
     className,
     activateAfterChange = false,
     disabled = false,
+    plaintextOnly = false,
     sendDisabled,
     sendOnReturnDisabled = false,
     attachDisabled = false,
@@ -205,6 +206,7 @@ function MessageInputInner(
             ref={msgRef}
             className={`${cName}__content-editor`}
             disabled={disabled}
+            plaintextOnly={plaintextOnly}
             placeholder={ph}
             onKeyPress={handleKeyPress}
             onChange={handleChange}
@@ -238,6 +240,12 @@ MessageInput.propTypes = {
   /** A input can show it is currently unable to be interacted with. */
   disabled: PropTypes.bool,
 
+  /**
+   * plaintext-only content-editable state, instead of true (when enabled).
+   * prevents pasting rich text (removes formatting from pasted text).
+   */
+  plaintextOnly: PropTypes.bool,
+
   /** Prevent that the input message is sent on a return press */
   sendOnReturnDisabled: PropTypes.bool,