fix(MessageBar): Accept markdown input

patternfly · Nov 19, 2024 · 5b75285 · 5b75285
1 parent 4396bdd
commit 5b75285
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/packages/module/src/MessageBar/MessageBar.scss b/packages/module/src/MessageBar/MessageBar.scss
@@ -46,6 +46,15 @@
     padding-block-start: var(--pf-chatbot__message-bar-child--PaddingBlockStart);
     padding-block-end: var(--pf-chatbot__message-bar-child--PaddingBlockEnd);
     overflow: hidden;
+    position: relative;
+  }
+
+  &-placeholder {
+    position: absolute;
+    top: 20px;
+    left: 16px;
+    color: var(--pf-t--global--text--color--placeholder);
+    pointer-events: none;
   }
 }
 
@@ -64,4 +73,5 @@
   height: 100%;
   width: 100%;
   display: block !important;
+  position: relative;
 }
diff --git a/packages/module/src/MessageBar/MessageBar.tsx b/packages/module/src/MessageBar/MessageBar.tsx
@@ -89,9 +89,23 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   const attachButtonRef = React.useRef<HTMLButtonElement>(null);
 
   const handleInput = (event) => {
-    const newMessage = DOMPurify.sanitize(event.target.textContent);
-    setMessage(newMessage);
-    onChange && onChange(event, newMessage);
+    // newMessage === '' doesn't work unless we trim, which causes other problems
+    // textContent seems to work, but doesn't allow for markdown, so we need both
+    const messageText = DOMPurify.sanitize(event.target.textContent);
+    if (messageText === '') {
+      setShowPlaceholder(true);
+      setMessage('');
+      onChange && onChange(event, '');
+    } else {
+      setShowPlaceholder(false);
+      // this is so that tests work; RTL doesn't seem to like event.target.innerText, but browsers don't pick up markdown without it
+      let newMessage = messageText;
+      if (event.target.innerText) {
+        newMessage = DOMPurify.sanitize(event.target.innerText);
+      }
+      setMessage(newMessage);
+      onChange && onChange(event, newMessage);
+    }
   };
 
   // Handle sending message
@@ -101,6 +115,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
       setMessage('');
       if (textareaRef.current) {
         textareaRef.current.innerText = '';
+        setShowPlaceholder(true);
         textareaRef.current.blur();
       }
       return '';
@@ -181,22 +196,27 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   const messageBarContents = (
     <>
       <div className="pf-chatbot__message-bar-input">
+        {(showPlaceholder || message === '') && (
+          <div className="pf-chatbot__message-bar-placeholder">{placeholder}</div>
+        )}
         <div
           contentEditable
           suppressContentEditableWarning={true}
           role="textbox"
           aria-multiline="false"
           className="pf-chatbot__message-textarea"
           onInput={handleInput}
-          onFocus={() => setShowPlaceholder(!showPlaceholder)}
-          onBlur={() => setShowPlaceholder(!showPlaceholder)}
+          onFocus={() => setShowPlaceholder(false)}
+          onBlur={() => {
+            if (message === '') {
+              setShowPlaceholder(!showPlaceholder);
+            }
+          }}
           aria-label={placeholder}
           ref={textareaRef}
           onKeyDown={handleKeyDown}
           {...props}
-        >
-          {showPlaceholder ? placeholder : undefined}
-        </div>
+        ></div>
       </div>
       <div className="pf-chatbot__message-bar-actions">{renderButtons()}</div>
     </>