[WIKI-874] refactor: description input component (#8544)

* refactor: description input component

* fix: add missing prop to rich text editor

apps/web/core/components/editor/rich-text/description-input/root.tsx

@@ -28,6 +28,7 @@ const workspaceService = new WorkspaceService();
 type TFormData = {
   id: string;
   description_html: string;
+  description_json?: object;
   isMigrationUpdate: boolean;
 };
 
@@ -67,7 +68,13 @@ type Props = {
   /**
    * @description Submit handler, the actual function which will be called when the form is submitted
    */
-  onSubmit: (value: string, isMigrationUpdate?: boolean) => Promise<void>;
+  onSubmit: (
+    value: {
+      description_html: string;
+      description_json: object | undefined;
+    },
+    isMigrationUpdate?: boolean
+  ) => Promise<void>;
   /**
    * @description Placeholder, if not provided, the placeholder will be the default placeholder
    */
@@ -107,13 +114,13 @@ export const DescriptionInput = observer(function DescriptionInput(props: Props)
     entityId,
     fileAssetType,
     initialValue,
+    issueSequenceId,
     onSubmit,
     placeholder,
     projectId,
     setIsSubmitting,
     swrDescription,
     workspaceSlug,
-    issueSequenceId,
   } = props;
   // states
   const [localDescription, setLocalDescription] = useState<TFormData>({
@@ -144,7 +151,13 @@ export const DescriptionInput = observer(function DescriptionInput(props: Props)
   // submit handler
   const handleDescriptionFormSubmit = useCallback(
     async (formData: TFormData) => {
-      await onSubmit(formData.description_html, formData.isMigrationUpdate);
+      await onSubmit(
+        {
+          description_html: formData.description_html,
+          description_json: formData.description_json,
+        },
+        formData.isMigrationUpdate
+      );
       // Update lastSavedContent after successful save
       lastSavedContent.current = formData.description_html;
     },
@@ -209,9 +222,9 @@ export const DescriptionInput = observer(function DescriptionInput(props: Props)
 
   if (!workspaceDetails) return null;
 
+  if (!localDescription.description_html) return <DescriptionInputLoader />;
+
   return (
-    <>
-      {localDescription.description_html ? (
     <Controller
       name="description_html"
       control={control}
@@ -229,12 +242,12 @@ export const DescriptionInput = observer(function DescriptionInput(props: Props)
           workspaceId={workspaceDetails.id}
           projectId={projectId}
           dragDropEnabled
-              onChange={(_description, description_html, options) => {
+          onChange={(description_json, description_html, options) => {
-                // Skip if content hasn't actually changed (handles editor normalization on init)
             if (description_html === lastSavedContent.current) return;
             setIsSubmitting("submitting");
             onChange(description_html);
-                setValue("isMigrationUpdate", options?.isMigrationUpdate ?? false);
+            setValue("isMigrationUpdate", !!options?.isMigrationUpdate);
+            setValue("description_json", description_json);
             hasUnsavedChanges.current = true;
             debouncedFormSave();
           }}
@@ -280,9 +293,5 @@ export const DescriptionInput = observer(function DescriptionInput(props: Props)
         />
       )}
     />
-      ) : (
-        <DescriptionInputLoader />
-      )}
-    </>
   );
 });

apps/web/core/components/inbox/content/issue-root.tsx

@@ -180,7 +180,7 @@ export const InboxIssueMainContent = observer(function InboxIssueMainContent(pro
             onSubmit={async (value, isMigrationUpdate) => {
               if (!issue.id || !issue.project_id) return;
               await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
-                description_html: value,
+                description_html: value.description_html,
                 ...(isMigrationUpdate ? { skip_activity: "true" } : {}),
               });
             }}

apps/web/core/components/issues/issue-detail/main-content.tsx

@@ -144,7 +144,7 @@ export const IssueMainContent = observer(function IssueMainContent(props: Props)
           onSubmit={async (value, isMigrationUpdate) => {
             if (!issue.id || !issue.project_id) return;
             await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
-              description_html: value,
+              description_html: value.description_html,
               ...(isMigrationUpdate ? { skip_activity: "true" } : {}),
             });
           }}

apps/web/core/components/issues/peek-overview/issue-detail.tsx

@@ -144,7 +144,7 @@ export const PeekOverviewIssueDetails = observer(function PeekOverviewIssueDetai
         onSubmit={async (value, isMigrationUpdate) => {
           if (!issue.id || !issue.project_id) return;
           await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
-            description_html: value,
+            description_html: value.description_html,
             ...(isMigrationUpdate ? { skip_activity: "true" } : {}),
           });
         }}