From e5ad30a25be77aae17b277dc0a8f64b3ff67e563 Mon Sep 17 00:00:00 2001
From: Xander Dumaine <xander.dumaine@fountainlife.com>
Date: Wed, 9 Oct 2024 19:29:20 -0400
Subject: [PATCH] feat: plaintext-only message input

---
 src/components/ContentEditable/ContentEditable.jsx | 13 +++++++++++--
 src/components/MessageInput/MessageInput.d.ts      |  1 +
 src/components/MessageInput/MessageInput.jsx       |  8 ++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/ContentEditable/ContentEditable.jsx b/src/components/ContentEditable/ContentEditable.jsx
index 5bd7c07..ea53462 100644
--- a/src/components/ContentEditable/ContentEditable.jsx
+++ b/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
diff --git a/src/components/MessageInput/MessageInput.d.ts b/src/components/MessageInput/MessageInput.d.ts
index 6d4a7d2..3e800c9 100644
--- a/src/components/MessageInput/MessageInput.d.ts
+++ b/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;
diff --git a/src/components/MessageInput/MessageInput.jsx b/src/components/MessageInput/MessageInput.jsx
index 942f38a..93d771f 100644
--- a/src/components/MessageInput/MessageInput.jsx
+++ b/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,