fix: placeholder and ai response not getting appended in textarea (#1031)

apps/app/components/core/gpt-assistant-modal.tsx

@@ -60,6 +60,8 @@ export const GptAssistantModal: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const editorRef = useRef<any>(null);
+
   const { setToastAlert } = useToast();
 
   const {
@@ -127,6 +129,10 @@ export const GptAssistantModal: React.FC<Props> = ({
     if (isOpen) setFocus("task");
   }, [isOpen, setFocus]);
 
+  useEffect(() => {
+    editorRef.current?.setEditorValue(htmlContent ?? `<p>${content}</p>`);
+  }, [htmlContent, editorRef, content]);
+
   return (
     <div
       className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-brand-base bg-brand-base p-4 shadow ${
@@ -136,12 +142,13 @@ export const GptAssistantModal: React.FC<Props> = ({
       {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
         <div className="remirror-section text-sm">
           Content:
-          <RemirrorRichTextEditor
+          <WrappedRemirrorRichTextEditor
             value={htmlContent ?? <p>{content}</p>}
             customClassName="-m-3"
             noBorder
             borderOnFocus={false}
             editable={false}
+            ref={editorRef}
           />
         </div>
       )}

apps/app/components/issues/description-form.tsx

@@ -69,26 +69,12 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
     [handleFormSubmit]
   );
 
-  // useEffect(() => {
-  //   const alertUser = (e: BeforeUnloadEvent) => {
-  //     e.preventDefault();
-  //     e.returnValue = "";
-  //     return "Are you sure you want to leave?";
-  //   };
-
-  //   window.addEventListener("beforeunload", alertUser);
-  //   return () => {
-  //     window.removeEventListener("beforeunload", alertUser);
-  //   };
-  // }, [isSubmitting]);
-
   // reset form values
   useEffect(() => {
     if (!issue) return;
 
     reset({
       ...issue,
-      description: issue.description,
     });
   }, [issue, reset]);
 
@@ -139,7 +125,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
         name="description"
         control={control}
         render={({ field: { value } }) => {
-          if (!value || !watch("description_html")) return <></>;
+          if (!value && !watch("description_html")) return <></>;
 
           return (
             <RemirrorRichTextEditor
@@ -169,7 +155,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
                     setIsSubmitting(false);
                   });
               }}
-              placeholder="Describe the issue..."
+              placeholder="Description"
               editable={!isNotAllowed}
             />
           );

apps/app/components/issues/form.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, useState, useEffect } from "react";
+import React, { ChangeEvent, FC, useState, useEffect, useRef } from "react";
 
 import Link from "next/link";
 import dynamic from "next/dynamic";
@@ -50,6 +50,15 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
   ),
 });
 
+import { IRemirrorRichTextEditor } from "components/rich-text-editor";
+
+const WrappedRemirrorRichTextEditor = React.forwardRef<
+  IRemirrorRichTextEditor,
+  IRemirrorRichTextEditor
+>((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
+
+WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
+
 const defaultValues: Partial<IIssue> = {
   project: "",
   name: "",
@@ -105,6 +114,8 @@ export const IssueForm: FC<IssueFormProps> = ({
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
 
+  const editorRef = useRef<any>(null);
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -346,7 +357,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                   name="description"
                   control={control}
                   render={({ field: { value } }) => (
-                    <RemirrorRichTextEditor
+                    <WrappedRemirrorRichTextEditor
                       value={
                         !value || (typeof value === "object" && Object.keys(value).length === 0)
                           ? watch("description_html")
@@ -354,7 +365,8 @@ export const IssueForm: FC<IssueFormProps> = ({
                       }
                       onJSONChange={(jsonValue) => setValue("description", jsonValue)}
                       onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
-                      placeholder="Describe the issue..."
+                      placeholder="Description"
+                      ref={editorRef}
                     />
                   )}
                 />
@@ -368,7 +380,10 @@ export const IssueForm: FC<IssueFormProps> = ({
                   inset="top-2 left-0"
                   content=""
                   htmlContent={watch("description_html")}
-                  onResponse={handleAiAssistance}
+                  onResponse={(response) => {
+                    handleAiAssistance(response);
+                    editorRef.current?.setEditorValue(`${watch("description_html")}`);
+                  }}
                   projectId={projectId}
                 />
               </div>

apps/app/styles/editor.css

@@ -1,13 +1,11 @@
 .empty-node::after {
   content: attr(data-placeholder);
-  color: #ccc;
-  font-style: italic;
+  color: #9ca3af;
 
   position: absolute;
   pointer-events: none;
   top: 15px;
   margin-left: 1px;
-  z-index: -1;
 }
 
 .ProseMirror {
@@ -92,6 +90,7 @@
   fill: rgb(var(--color-text-base)) !important;
 }
 
-.MuiButtonBase-root.Mui-selected, .MuiButtonBase-root:hover {
+.MuiButtonBase-root.Mui-selected,
+.MuiButtonBase-root:hover {
   background-color: rgb(var(--color-bg-base)) !important;
 }