From dc172ca05678ed4fabfdec69b9b842c60c350000 Mon Sep 17 00:00:00 2001
From: Alexanderdunlop <alexjamesdunlop@gmail.com>
Date: Tue, 19 Aug 2025 09:08:23 +0100
Subject: [PATCH] feat: enhance MentionInput placeholder handling and improve
 content clearing logic

- Introduced a custom placeholder fallback in MentionInput for better user experience.
- Updated content clearing logic in useMentionInput to ensure the editor is truly empty for CSS :empty.
- Added a test to verify that the placeholder reappears correctly after content is added and then removed.
---
 .../mentis/src/components/MentionInput.tsx    |  7 ++-
 packages/mentis/src/hooks/useMentionInput.ts  |  6 ++-
 packages/mentis/tests/input.test.tsx          | 43 ++++++++++++++++++-
 3 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/packages/mentis/src/components/MentionInput.tsx b/packages/mentis/src/components/MentionInput.tsx
index 14c8b73..fa636cc 100644
--- a/packages/mentis/src/components/MentionInput.tsx
+++ b/packages/mentis/src/components/MentionInput.tsx
@@ -15,6 +15,11 @@ export const MentionInput: React.FC<MentionInputProps> = ({
   onChange,
   onKeyDown,
 }) => {
+  // Get the custom placeholder or fall back to default
+  const placeholder =
+    slotsProps?.contentEditable?.["data-placeholder"] ||
+    `Type ${trigger} to mention someone`;
+
   const {
     editorRef,
     showModal,
@@ -42,7 +47,7 @@ export const MentionInput: React.FC<MentionInputProps> = ({
   return (
     <div className="mention-input-container" {...slotsProps?.container}>
       <div
-        data-placeholder={`Type ${trigger} to mention someone`}
+        data-placeholder={placeholder}
         role="combobox"
         aria-autocomplete="list"
         aria-expanded={showModal}
diff --git a/packages/mentis/src/hooks/useMentionInput.ts b/packages/mentis/src/hooks/useMentionInput.ts
index e0271b7..20a0709 100644
--- a/packages/mentis/src/hooks/useMentionInput.ts
+++ b/packages/mentis/src/hooks/useMentionInput.ts
@@ -44,8 +44,9 @@ export function useMentionInput({
         const currentData = extractMentionData(editorRef.current);
         if (currentData.dataValue !== dataValue) {
           if (dataValue === "") {
-            // Clear all content including mention chips
+            // Clear all content including mention chips and ensure truly empty for CSS :empty
             editorRef.current.innerHTML = "";
+            editorRef.current.textContent = "";
           } else {
             // Reconstruct content from dataValue
             const reconstructedHTML = reconstructFromDataValue({
@@ -62,8 +63,9 @@ export function useMentionInput({
         const currentText = getTextContent(editorRef.current);
         if (currentText !== displayValue) {
           if (displayValue === "") {
-            // Clear all content including mention chips
+            // Clear all content including mention chips and ensure truly empty for CSS :empty
             editorRef.current.innerHTML = "";
+            editorRef.current.textContent = "";
           } else {
             // Update text content
             editorRef.current.textContent = displayValue;
diff --git a/packages/mentis/tests/input.test.tsx b/packages/mentis/tests/input.test.tsx
index 78b760f..dc17185 100644
--- a/packages/mentis/tests/input.test.tsx
+++ b/packages/mentis/tests/input.test.tsx
@@ -34,7 +34,10 @@ describe("Input props", () => {
 
     // Update to a value with mentions
     rerender(
-      <MentionInput options={options} displayValue="Hello @john, how are you?" />
+      <MentionInput
+        options={options}
+        displayValue="Hello @john, how are you?"
+      />
     );
     editorElement = screen.getByRole("combobox");
     expect(editorElement).toHaveTextContent("Hello @john, how are you?");
@@ -152,4 +155,42 @@ describe("Input props", () => {
       customPlaceholder
     );
   });
+
+  test("Placeholder should reappear after content is added and then removed", async () => {
+    const customPlaceholder = "Type your message here...";
+    const { rerender } = render(
+      <MentionInput
+        options={[]}
+        slotsProps={{
+          contentEditable: {
+            "data-placeholder": customPlaceholder,
+          },
+        }}
+      />
+    );
+
+    const user = userEvent.setup();
+    const editorElement = screen.getByRole("combobox");
+
+    // Add some content
+    await user.type(editorElement, "Hello world");
+    expect(editorElement).toHaveTextContent("Hello world");
+
+    // Clear the content by setting displayValue to empty string
+    rerender(
+      <MentionInput
+        options={[]}
+        displayValue=""
+        slotsProps={{
+          contentEditable: {
+            "data-placeholder": customPlaceholder,
+          },
+        }}
+      />
+    );
+
+    // Element should be empty and placeholder should be visible via CSS
+    expect(editorElement).toHaveTextContent("");
+    expect(editorElement.innerHTML).toBe("");
+  });
 });