fix: lexical

Author: aaryan610

apps/app/components/lexical/editor.tsx

@@ -1,4 +1,10 @@
-import { EditorState, LexicalEditor, $getRoot, $getSelection } from "lexical";
+import {
+  EditorState,
+  $getRoot,
+  $getSelection,
+  SerializedEditorState,
+  LexicalEditor,
+} from "lexical";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
@@ -21,7 +27,7 @@ import { getValidatedValue } from "./helpers/editor";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
 
 export interface RichTextEditorProps {
-  onChange: (state: string) => void;
+  onChange: (state: SerializedEditorState) => void;
   id: string;
   value: string;
   placeholder?: string;
@@ -33,11 +39,17 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
   value,
   placeholder = "Enter some text...",
 }) => {
-  function handleChange(state: EditorState, editor: LexicalEditor) {
-    state.read(() => {
-      onChange(JSON.stringify(state.toJSON()));
+  const handleChange = (editorState: EditorState) => {
+    editorState.read(() => {
+      let editorData = editorState.toJSON();
+      if (onChange) onChange(editorData);
     });
-  }
+  };
+  // function handleChange(state: EditorState, editor: LexicalEditor) {
+  //   state.read(() => {
+  //     onChange(state.toJSON());
+  //   });
+  // }
 
   return (
     <LexicalComposer

apps/app/components/lexical/helpers/editor.ts

@@ -6,9 +6,7 @@ export const positionEditorElement = (editor: any, rect: any) => {
       editor.style.left = "-1000px";
     } else {
       editor.style.opacity = "1";
-      editor.style.top = `${
-        rect.top + rect.height + window.pageYOffset + 10
-      }px`;
+      editor.style.top = `${rect.top + rect.height + window.pageYOffset + 10}px`;
       editor.style.left = `${
         rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2
       }px`;
@@ -22,9 +20,9 @@ export const getValidatedValue = (value: string) => {
 
   if (value) {
     try {
-      const json = JSON.parse(value);
-      return JSON.stringify(json);
-    } catch (error) {
+      console.log(value);
+      return value;
+    } catch (e) {
       return defaultValue;
     }
   }

apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx

@@ -51,7 +51,7 @@ type Props = {
 const defaultValues: Partial<IIssue> = {
   project: "",
   name: "",
-  description: "",
+  // description: "",
   state: "",
   sprints: "",
   priority: "",
@@ -176,7 +176,6 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
     if (!activeWorkspace || !activeProject) return;
     const payload: Partial<IIssue> = {
       ...formData,
-      description: JSON.stringify(formData.description),
       target_date: formData.target_date ? renderDateFormat(formData.target_date ?? "") : null,
     };
     if (!data) {

apps/app/components/project/issues/ListView/index.tsx

@@ -184,9 +184,9 @@ const ListView: React.FC<Props> = ({
                                         <td className="px-3 py-4 font-medium text-gray-900 truncate text-xs max-w-[15rem]">
                                           {/* <LexicalViewer
                                             id={`descriptionViewer-${issue.id}`}
-                                            value={JSON.parse(issue.description)}
+                                            value={issue.description}
                                           /> */}
-                                          {issue.description}
+                                          {/* {issue.description} */}
                                         </td>
                                       ) : (key as keyof Properties) === "priority" ? (
                                         <td className="px-3 py-4 text-sm font-medium text-gray-900 relative">