From 35e40a7bec4875cc0e4ccd50294e84061740d2b4 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 3 Apr 2023 18:14:50 +0530
Subject: [PATCH] chore: added placeholder to remirror (#686)

* chore: added placeholder to remirror

* fix: build error
---
 .../components/issues/comment/add-comment.tsx |  4 +--
 apps/app/components/issues/form.tsx           |  2 +-
 .../components/pages/single-page-block.tsx    |  4 +--
 .../app/components/rich-text-editor/index.tsx | 12 +++----
 .../projects/[projectId]/pages/[pageId].tsx   | 32 ++++++++++---------
 5 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/apps/app/components/issues/comment/add-comment.tsx b/apps/app/components/issues/comment/add-comment.tsx
index 426a222ac..307b4b0b4 100644
--- a/apps/app/components/issues/comment/add-comment.tsx
+++ b/apps/app/components/issues/comment/add-comment.tsx
@@ -96,7 +96,7 @@ export const AddComment: React.FC = () => {
                   setValue("comment_json", jsonValue);
                   setValue("comment_html", htmlValue);
                 }}
-                // placeholder="Enter Your comment..."
+                placeholder="Enter your comment..."
               />
             )}
           />
@@ -104,7 +104,7 @@ export const AddComment: React.FC = () => {
           <button
             type="submit"
             disabled={isSubmitting}
-            className="rounded-md bg-gray-300 p-2 px-4 text-sm text-black hover:bg-gray-300"
+            className="rounded-md bg-gray-300 p-2 px-4 text-sm text-black hover:bg-gray-300 mt-4"
           >
             {isSubmitting ? "Adding..." : "Comment"}
           </button>
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index b320107ee..b37ba8db5 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -332,7 +332,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                       }
                       onJSONChange={(jsonValue) => setValue("description", jsonValue)}
                       onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
-                      placeholder="Description"
+                      placeholder="Describe the issue..."
                     />
                   )}
                 />
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx
index f138c39f8..6dd8b02bc 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@@ -315,9 +315,9 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails }) => {
               onJSONChange={(jsonValue) => setValue("description", jsonValue)}
               onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
               placeholder="Block description..."
-              customClassName="border border-transparent"
+              customClassName="border border-transparent text-sm"
               noBorder
-              borderOnFocus
+              borderOnFocus={false}
             />
           )}
         />
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index 93ce1a60b..4c44650b9 100644
--- a/apps/app/components/rich-text-editor/index.tsx
+++ b/apps/app/components/rich-text-editor/index.tsx
@@ -185,25 +185,23 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
   };
 
   return (
-    <div className="mt-2 mb-4">
+    <div className="relative">
       <Remirror
         manager={manager}
         initialContent={state}
         classNames={[
           `p-4 relative focus:outline-none rounded-md focus:border-gray-200 ${
             noBorder ? "" : "border"
-          } ${borderOnFocus ? "focus:border" : ""} ${customClassName}`,
+          } ${borderOnFocus ? "focus:border" : "focus:border-0"} ${customClassName}`,
         ]}
         editable={editable}
         onBlur={() => {
           onBlur(jsonValue, htmlValue);
         }}
       >
-        {/* {(!value || value === "" || value?.content?.[0]?.content === undefined) && (
-          <p className="pointer-events-none absolute top-[8.8rem] left-12 text-gray-300">
-            {placeholder || "Enter text..."}
-          </p>
-        )} */}
+        {(!value || value === "" || value?.content?.[0]?.content === undefined) && placeholder && (
+          <p className="absolute pointer-events-none top-4 left-4 text-gray-300">{placeholder}</p>
+        )}
         <EditorComponent />
 
         {imageLoader && (
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index fff14ef06..c12580afb 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -65,11 +65,11 @@ const SinglePage: NextPage<UserAuth> = (props) => {
     workspaceSlug && projectId && pageId ? PAGE_DETAILS(pageId as string) : null,
     workspaceSlug && projectId
       ? () =>
-        pagesService.getPageDetails(
-          workspaceSlug as string,
-          projectId as string,
-          pageId as string
-        )
+          pagesService.getPageDetails(
+            workspaceSlug as string,
+            projectId as string,
+            pageId as string
+          )
       : null
   );
 
@@ -77,11 +77,11 @@ const SinglePage: NextPage<UserAuth> = (props) => {
     workspaceSlug && projectId && pageId ? PAGE_BLOCKS_LIST(pageId as string) : null,
     workspaceSlug && projectId
       ? () =>
-        pagesService.listPageBlocks(
-          workspaceSlug as string,
-          projectId as string,
-          pageId as string
-        )
+          pagesService.listPageBlocks(
+            workspaceSlug as string,
+            projectId as string,
+            pageId as string
+          )
       : null
   );
 
@@ -272,8 +272,9 @@ const SinglePage: NextPage<UserAuth> = (props) => {
                         key={label.id}
                         className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
                         style={{
-                          backgroundColor: `${label?.color && label.color !== "" ? label.color : "#000000"
-                            }20`,
+                          backgroundColor: `${
+                            label?.color && label.color !== "" ? label.color : "#000000"
+                          }20`,
                         }}
                       >
                         <span
@@ -341,8 +342,9 @@ const SinglePage: NextPage<UserAuth> = (props) => {
                     <>
                       <Popover.Button
                         type="button"
-                        className={`group inline-flex items-center outline-none ${open ? "text-gray-900" : "text-gray-500"
-                          }`}
+                        className={`group inline-flex items-center outline-none ${
+                          open ? "text-gray-900" : "text-gray-500"
+                        }`}
                       >
                         {watch("color") && watch("color") !== "" ? (
                           <span
@@ -418,7 +420,7 @@ const SinglePage: NextPage<UserAuth> = (props) => {
                 )}
                 <button
                   type="button"
-                  className="flex items-center gap-1 rounded bg-gray-100 px-2.5 py-1 text-xs hover:bg-gray-200"
+                  className="flex items-center gap-1 rounded bg-gray-100 px-2.5 py-1 text-xs hover:bg-gray-200 mt-4"
                   onClick={createPageBlock}
                   disabled={isAddingBlock}
                 >