fix: rich text editor (#1008)

* fix: undo/redo, placeholder overlapping with text, horizontal cursor

refractor: removed a lot of state-management that was not required

* fix: forwarding ref to remirror for getting extra helper functions

* fix: icon type error

* fix: value type not supported error on page block

* style: spacing, and UX for add link

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>

apps/app/components/pages/create-update-block-inline.tsx

@@ -34,8 +34,8 @@ type Props = {
 
 const defaultValues = {
   name: "",
-  description: { type: "doc", content: [] },
-  description_html: "<p></p>",
+  description: null,
+  description_html: null,
 };
 
 const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
@@ -46,6 +46,14 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
     </Loader>
   ),
 });
+import { IRemirrorRichTextEditor } from "components/rich-text-editor";
+
+const WrappedRemirrorRichTextEditor = React.forwardRef<
+  IRemirrorRichTextEditor,
+  IRemirrorRichTextEditor
+>((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
+
+WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
 
 export const CreateUpdateBlockInline: React.FC<Props> = ({
   handleClose,
@@ -57,6 +65,8 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
 
+  const editorRef = React.useRef<any>(null);
+
   const router = useRouter();
   const { workspaceSlug, projectId, pageId } = router.query;
 
@@ -97,6 +107,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
             (prevData) => [...(prevData as IPageBlock[]), res],
             false
           );
+          editorRef.current?.clearEditor();
         })
         .catch(() => {
           setToastAlert({
@@ -135,6 +146,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
         })
         .then((res) => {
           mutate(PAGE_BLOCKS_LIST(pageId as string));
+          editorRef.current?.setEditorValue(res.description);
           if (data.issue && data.sync)
             issuesService
               .patchIssue(workspaceSlug as string, projectId as string, data.issue, {
@@ -200,8 +212,14 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
     reset({
       ...defaultValues,
       name: data.name,
-      description: data.description,
-      description_html: data.description_html,
+      description:
+        !data.description || data.description === ""
+          ? {
+              type: "doc",
+              content: [{ type: "paragraph" }],
+            }
+          : data.description,
+      description_html: data.description_html ?? "<p></p>",
     });
   }, [reset, data, focus, setFocus]);
 
@@ -254,21 +272,43 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
             <Controller
               name="description"
               control={control}
-              render={({ field: { value } }) => (
-                <RemirrorRichTextEditor
-                  value={
-                    !value || (typeof value === "object" && Object.keys(value).length === 0)
-                      ? watch("description_html")
-                      : value
-                  }
-                  onJSONChange={(jsonValue) => setValue("description", jsonValue)}
-                  onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
-                  placeholder="Write something..."
-                  customClassName="text-sm"
-                  noBorder
-                  borderOnFocus={false}
-                />
-              )}
+              render={({ field: { value } }) => {
+                if (!data)
+                  return (
+                    <WrappedRemirrorRichTextEditor
+                      value={value}
+                      onJSONChange={(jsonValue) => setValue("description", jsonValue)}
+                      onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
+                      placeholder="Write something..."
+                      customClassName="text-sm"
+                      noBorder
+                      borderOnFocus={false}
+                      ref={editorRef}
+                    />
+                  );
+                else if (!value || !watch("description_html"))
+                  return (
+                    <div className="h-32 w-full flex items-center justify-center text-brand-secondary text-sm" />
+                  );
+
+                return (
+                  <RemirrorRichTextEditor
+                    value={
+                      value && value !== "" && Object.keys(value).length > 0
+                        ? value
+                        : watch("description_html") && watch("description_html") !== ""
+                        ? watch("description_html")
+                        : { type: "doc", content: [{ type: "paragraph" }] }
+                    }
+                    onJSONChange={(jsonValue) => setValue("description", jsonValue)}
+                    onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
+                    placeholder="Write something..."
+                    customClassName="text-sm"
+                    noBorder
+                    borderOnFocus={false}
+                  />
+                );
+              }}
             />
             <div className="m-2 mt-6 flex">
               <button