From 9ec308bcc28215ce8346dee55892337da79e16db Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Sat, 21 Dec 2024 00:38:15 +0100
Subject: [PATCH] feat(reply modal): add spellcheck for the content, excluding
 the c/cid at the top

---
 src/components/reply-modal/reply-modal.tsx | 25 +++++++++++++---------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx
index aae794bd..58768337 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/src/components/reply-modal/reply-modal.tsx
@@ -163,6 +163,20 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
 
   const contentPrefix = `c/${parentCid && Plebbit.getShortCid(parentCid)}\n`;
 
+  // enable spellcheck after the prefix is set
+  useEffect(() => {
+    if (showReplyModal && textRef.current) {
+      textRef.current.spellcheck = false;
+      textRef.current.value = contentPrefix + (selectedText || '');
+
+      setTimeout(() => {
+        if (textRef.current) {
+          textRef.current.spellcheck = true;
+        }
+      }, 100);
+    }
+  }, [showReplyModal, contentPrefix, selectedText]);
+
   const handleContentInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const { value } = e.target;
     if (!value.startsWith(contentPrefix)) {
@@ -245,16 +259,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
           />
         </div>
         <div className={styles.content}>
-          <textarea
-            cols={48}
-            rows={4}
-            wrap='soft'
-            ref={textRef}
-            spellCheck={false}
-            defaultValue={contentPrefix + selectedText}
-            onInput={handleContentInput}
-            onChange={handleContentChange}
-          />
+          <textarea cols={48} rows={4} wrap='soft' ref={textRef} spellCheck={true} onInput={handleContentInput} onChange={handleContentChange} />
         </div>
         {!(isInAllView || isInSubscriptionsView) && offlineAlert}
         <div className={styles.offlineAlert}></div>