feat: enhance content change handling in ContentEditable component

Author: ChrisUser

lib/ContentEditable.tsx

@@ -110,6 +110,7 @@ const ContentEditable = forwardRef<ContentEditableHandle, ContentEditableProps>(
         if (!divRef.current) return
         divRef.current.innerText = ""
         setContent("")
+        fireOnChange("", 0)
       },
       getCaretPosition: () => {
         if (!divRef.current) return 0
@@ -120,21 +121,14 @@ const ContentEditable = forwardRef<ContentEditableHandle, ContentEditableProps>(
 
     useEffect(() => {
       if (updatedContent !== null && updatedContent !== undefined) {
-        setContent(updatedContent)
-        if (divRef.current) divRef.current.innerText = updatedContent
+        setContent((prev) => prev === updatedContent ? prev : updatedContent)
+        if (divRef.current && divRef.current.innerText !== updatedContent) {
+          divRef.current.innerText = updatedContent
+        }
         if (onContentExternalUpdate) onContentExternalUpdate(updatedContent)
       }
     }, [updatedContent, onContentExternalUpdate])
 
-    useEffect(() => {
-      if (divRef.current) {
-        divRef.current.style.height = "auto"
-        if (onChange && isContentWithinMaxLength(content, maxLength)) {
-          onChange(content, { caretPosition: lastCaretPosition.current })
-        }
-      }
-    }, [content, onChange, maxLength])
-
     useEffect(() => {
       if (divRef.current && autoFocus) {
         divRef.current.focus()
@@ -157,6 +151,12 @@ const ContentEditable = forwardRef<ContentEditableHandle, ContentEditableProps>(
 
     // --- Helper functions ---
 
+    function fireOnChange(newContent: string, caretPos?: number) {
+      if (onChange && isContentWithinMaxLength(newContent, maxLength)) {
+        onChange(newContent, { caretPosition: caretPos ?? lastCaretPosition.current })
+      }
+    }
+
     function getCaretPositionFromElement(editableDiv: HTMLElement): number {
       const sel = window.getSelection()
       if (!sel || sel.rangeCount === 0) return -1
@@ -235,6 +235,7 @@ const ContentEditable = forwardRef<ContentEditableHandle, ContentEditableProps>(
 
       const newPos = currentCaretPos + text.length
       lastCaretPosition.current = newPos
+      fireOnChange(divRef.current.innerText, newPos)
     }
 
     function isCaretOnLastLine(element: HTMLElement): boolean {
@@ -312,6 +313,7 @@ const ContentEditable = forwardRef<ContentEditableHandle, ContentEditableProps>(
             const pos = getCaretPositionFromElement(divRef.current)
             if (pos >= 0) lastCaretPosition.current = pos
           }
+          fireOnChange(newContent)
         }
       } else {
         const availableSpace = maxLength
@@ -358,6 +360,7 @@ const ContentEditable = forwardRef<ContentEditableHandle, ContentEditableProps>(
             divRef.current.innerText = previousContent
             setCaretAtTheEnd(divRef.current)
           }
+          fireOnChange(previousContent)
         }
         return
       }
@@ -376,6 +379,7 @@ const ContentEditable = forwardRef<ContentEditableHandle, ContentEditableProps>(
             divRef.current.innerText = nextContent
             setCaretAtTheEnd(divRef.current)
           }
+          fireOnChange(nextContent)
         }
         return
       }
@@ -397,6 +401,7 @@ const ContentEditable = forwardRef<ContentEditableHandle, ContentEditableProps>(
         e.preventDefault()
         divRef.current.innerText = ""
         setContent("")
+        fireOnChange("", 0)
       }
     }
 
@@ -459,6 +464,7 @@ const ContentEditable = forwardRef<ContentEditableHandle, ContentEditableProps>(
                 if (pos >= 0) lastCaretPosition.current = pos
               }
             }
+            fireOnChange(processed)
           }}
           onPaste={(e: React.ClipboardEvent<HTMLElement>) => {
             if (disabled) return

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-basic-contenteditable",
   "description": "React contenteditable component. Super-customizable!",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",