fix: placeholder on clear

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}

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;

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("");
+  });
 });