[WIKI-538] chore: common description component

apps/web/core/components/editor/rich-text/description-input/index.ts

@@ -0,0 +1 @@
+export * from "./root";

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

@@ -0,0 +1,33 @@
+// plane imports
+import { Loader } from "@plane/ui";
+import { cn } from "@plane/utils";
+
+type Props = {
+  className?: string;
+};
+
+export const DescriptionInputLoader: React.FC<Props> = (props) => {
+  const { className } = props;
+
+  return (
+    <Loader className={cn("space-y-2", className)}>
+      <Loader.Item width="100%" height="26px" />
+      <div className="flex items-center gap-2">
+        <Loader.Item width="26px" height="26px" />
+        <Loader.Item width="400px" height="26px" />
+      </div>
+      <div className="flex items-center gap-2">
+        <Loader.Item width="26px" height="26px" />
+        <Loader.Item width="400px" height="26px" />
+      </div>
+      <Loader.Item width="80%" height="26px" />
+      <div className="flex items-center gap-2">
+        <Loader.Item width="50%" height="26px" />
+      </div>
+      <div className="border-0.5 absolute bottom-2 right-3.5 z-10 flex items-center gap-2">
+        <Loader.Item width="100px" height="26px" />
+        <Loader.Item width="50px" height="26px" />
+      </div>
+    </Loader>
+  );
+};

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

@@ -1,98 +1,150 @@
 "use client";
 
-import { FC, useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState, useRef } from "react";
 import debounce from "lodash/debounce";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
-import type { EditorRefApi } from "@plane/editor";
+import type { EditorRefApi, TExtensions } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
-import { EFileAssetType, TIssue, TNameDescriptionLoader } from "@plane/types";
-import { Loader } from "@plane/ui";
-// components
+import { EFileAssetType, type TNameDescriptionLoader } from "@plane/types";
 import { getDescriptionPlaceholderI18n } from "@plane/utils";
+// components
 import { RichTextEditor } from "@/components/editor/rich-text";
-import { TIssueOperations } from "@/components/issues/issue-detail";
-// helpers
 // hooks
 import { useEditorAsset } from "@/hooks/store/use-editor-asset";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 // plane web services
 import { WorkspaceService } from "@/plane-web/services";
+// local imports
+import { DescriptionInputLoader } from "./loader";
+// services init
 const workspaceService = new WorkspaceService();
 
-export type IssueDescriptionInputProps = {
+type TFormData = {
+  id: string;
+  description_html: string;
+};
+
+type Props = {
+  /**
+   * @description Container class name, this will be used to add custom styles to the editor container
+   */
   containerClassName?: string;
+  /**
+   * @description Disabled, this will be used to disable the editor
+   */
+  disabled?: boolean;
+  /**
+   * @description Disabled extensions, this will be used to disable the extensions in the editor
+   */
+  disabledExtensions?: TExtensions[];
+  /**
+   * @description Editor ref, this will be used to imperatively attach editor related helper functions
+   */
   editorRef?: React.RefObject<EditorRefApi>;
-  workspaceSlug: string;
-  projectId: string;
-  issueId: string;
+  /**
+   * @description Entity ID, this will be used for file uploads and as the unique identifier for the entity
+   */
+  entityId: string;
+  /**
+   * @description File asset type, this will be used to upload the file to the editor
+   */
+  fileAssetType: EFileAssetType;
+  /**
+   * @description Initial value, pass the actual description to initialize the editor
+   */
   initialValue: string | undefined;
-  disabled?: boolean;
-  issueOperations: TIssueOperations;
+  /**
+   * @description Submit handler, the actual function which will be called when the form is submitted
+   */
+  onSubmit: (value: string) => Promise<void>;
+  /**
+   * @description Placeholder, if not provided, the placeholder will be the default placeholder
+   */
   placeholder?: string | ((isFocused: boolean, value: string) => string);
+  /**
+   * @description projectId, if not provided, the entity will be considered as a workspace entity
+   */
+  projectId?: string;
+  /**
+   * @description Set is submitting, use it to set the loading state of the form
+   */
   setIsSubmitting: (initialValue: TNameDescriptionLoader) => void;
-  swrIssueDescription?: string | null | undefined;
+  /**
+   * @description SWR description, use it only if you want to sync changes in realtime(pseudo realtime)
+   */
+  swrDescription?: string | null | undefined;
+  /**
+   * @description Workspace slug, this will be used to get the workspace details
+   */
+  workspaceSlug: string;
 };
 
-export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((props) => {
+/**
+ * @description DescriptionInput component for rich text editor with autosave functionality using debounce
+ * The component also makes an API call to save the description on unmount
+ */
+export const DescriptionInput: React.FC<Props> = observer((props) => {
   const {
     containerClassName,
-    editorRef,
-    workspaceSlug,
-    projectId,
-    issueId,
     disabled,
-    swrIssueDescription,
+    disabledExtensions,
+    editorRef,
+    entityId,
+    fileAssetType,
     initialValue,
-    issueOperations,
-    setIsSubmitting,
+    onSubmit,
     placeholder,
+    projectId,
+    setIsSubmitting,
+    swrDescription,
+    workspaceSlug,
   } = props;
   // states
-  const [localIssueDescription, setLocalIssueDescription] = useState({
-    id: issueId,
+  const [localDescription, setLocalDescription] = useState({
+    id: entityId,
     description_html: initialValue,
   });
   // ref to track if there are unsaved changes
   const hasUnsavedChanges = useRef(false);
   // store hooks
-  const { uploadEditorAsset } = useEditorAsset();
   const { getWorkspaceBySlug } = useWorkspace();
+  const { uploadEditorAsset } = useEditorAsset();
   // derived values
-  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id?.toString();
+  const workspaceDetails = getWorkspaceBySlug(workspaceSlug);
+  // translation
+  const { t } = useTranslation();
   // form info
-  const { handleSubmit, reset, control } = useForm<TIssue>({
+  const { handleSubmit, reset, control } = useForm<TFormData>({
     defaultValues: {
-      description_html: initialValue,
+      id: entityId,
+      description_html: initialValue || "",
     },
   });
-  // i18n
-  const { t } = useTranslation();
 
+  // submit handler
   const handleDescriptionFormSubmit = useCallback(
-    async (formData: Partial<TIssue>) => {
-      await issueOperations.update(workspaceSlug, projectId, issueId, {
-        description_html: formData.description_html ?? "<p></p>",
-      });
+    async (formData: TFormData) => {
+      await onSubmit(formData.description_html ?? "<p></p>");
     },
-    [workspaceSlug, projectId, issueId, issueOperations]
+    [onSubmit]
   );
 
   // reset form values
   useEffect(() => {
-    if (!issueId) return;
+    if (!entityId) return;
     reset({
-      id: issueId,
-      description_html: initialValue === "" ? "<p></p>" : initialValue,
+      id: entityId,
+      description_html: initialValue?.trim() === "" ? "<p></p>" : initialValue,
     });
-    setLocalIssueDescription({
-      id: issueId,
-      description_html: initialValue === "" ? "<p></p>" : initialValue,
+    setLocalDescription({
+      id: entityId,
+      description_html: initialValue?.trim() === "" ? "<p></p>" : initialValue,
     });
     // Reset unsaved changes flag when form is reset
     hasUnsavedChanges.current = false;
-  }, [initialValue, issueId, reset]);
+  }, [entityId, initialValue, reset]);
 
   // ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS
   // TODO: Verify the exhaustive-deps warning
@@ -104,7 +156,7 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
         hasUnsavedChanges.current = false;
       });
     }, 1500),
-    [handleSubmit, issueId]
+    [entityId, handleSubmit]
   );
 
   // Save on unmount if there are unsaved changes
@@ -128,40 +180,35 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
     []
   );
 
-  if (!workspaceId) return null;
-
   return (
     <>
-      {localIssueDescription.description_html ? (
+      {localDescription.description_html ? (
         <Controller
           name="description_html"
           control={control}
           render={({ field: { onChange } }) => (
             <RichTextEditor
               editable={!disabled}
-              id={issueId}
-              initialValue={localIssueDescription.description_html ?? "<p></p>"}
-              value={swrIssueDescription ?? null}
+              ref={editorRef}
+              id={entityId}
+              disabledExtensions={disabledExtensions}
+              initialValue={localDescription.description_html ?? "<p></p>"}
+              value={swrDescription ?? null}
               workspaceSlug={workspaceSlug}
-              workspaceId={workspaceId}
+              workspaceId={workspaceDetails?.id ?? ""}
               projectId={projectId}
               dragDropEnabled
-              onChange={(_description: object, description_html: string) => {
+              onChange={(_description, description_html) => {
                 setIsSubmitting("submitting");
                 onChange(description_html);
                 hasUnsavedChanges.current = true;
                 debouncedFormSave();
               }}
-              placeholder={
-                placeholder
-                  ? placeholder
-                  : (isFocused, value) => t(`${getDescriptionPlaceholderI18n(isFocused, value)}`)
-              }
+              placeholder={placeholder ?? ((isFocused, value) => t(getDescriptionPlaceholderI18n(isFocused, value)))}
               searchMentionCallback={async (payload) =>
                 await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
                   ...payload,
-                  project_id: projectId?.toString() ?? "",
-                  issue_id: issueId?.toString(),
+                  project_id: projectId,
                 })
               }
               containerClassName={containerClassName}
@@ -170,27 +217,24 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
                   const { asset_id } = await uploadEditorAsset({
                     blockId,
                     data: {
-                      entity_identifier: issueId,
-                      entity_type: EFileAssetType.ISSUE_DESCRIPTION,
+                      entity_identifier: entityId,
+                      entity_type: fileAssetType,
                     },
                     file,
                     projectId,
                     workspaceSlug,
                   });
                   return asset_id;
                 } catch (error) {
-                  console.log("Error in uploading work item asset:", error);
+                  console.log("Error in uploading asset:", error);
                   throw new Error("Asset upload failed. Please try again later.");
                 }
               }}
-              ref={editorRef}
             />
           )}
         />
       ) : (
-        <Loader>
-          <Loader.Item height="150px" />
-        </Loader>
+        <DescriptionInputLoader />
       )}
     </>
   );

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

@@ -5,20 +5,21 @@ import { observer } from "mobx-react";
 // plane imports
 import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import type { EditorRefApi } from "@plane/editor";
-import { EInboxIssueSource, TIssue, TNameDescriptionLoader } from "@plane/types";
-import { Loader, TOAST_TYPE, setToast } from "@plane/ui";
+import { EFileAssetType, EInboxIssueSource, TIssue, TNameDescriptionLoader } from "@plane/types";
+import { TOAST_TYPE, setToast } from "@plane/ui";
 import { getTextContent } from "@plane/utils";
 // components
 import { DescriptionVersionsRoot } from "@/components/core/description-versions";
+import { DescriptionInput } from "@/components/editor/rich-text/description-input";
+import { DescriptionInputLoader } from "@/components/editor/rich-text/description-input/loader";
 import { IssueAttachmentRoot } from "@/components/issues/attachment";
-import { IssueDescriptionInput } from "@/components/issues/description-input";
 import type { TIssueOperations } from "@/components/issues/issue-detail";
 import { IssueActivity } from "@/components/issues/issue-detail/issue-activity";
 import { IssueReaction } from "@/components/issues/issue-detail/reactions";
 import { IssueTitleInput } from "@/components/issues/title-input";
 // helpers
-// hooks
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+// hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useMember } from "@/hooks/store/use-member";
 import { useProject } from "@/hooks/store/use-project";
@@ -149,7 +150,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
             payload: { id: issueId },
           });
         } catch (error) {
-          console.log("Error in archiving issue:", error);
+          console.error("Error in archiving issue:", error);
           captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.archive,
             payload: { id: issueId },
@@ -189,21 +190,25 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
         />
 
         {loader === "issue-loading" ? (
-          <Loader className="min-h-[6rem] rounded-md border border-custom-border-200">
-            <Loader.Item width="100%" height="140px" />
-          </Loader>
+          <DescriptionInputLoader />
         ) : (
-          <IssueDescriptionInput
+          <DescriptionInput
+            containerClassName="-ml-3 border-none"
+            disabled={!isEditable}
             editorRef={editorRef}
-            workspaceSlug={workspaceSlug}
-            projectId={issue.project_id}
-            issueId={issue.id}
-            swrIssueDescription={issue.description_html ?? "<p></p>"}
+            entityId={issue.id}
+            fileAssetType={EFileAssetType.ISSUE_DESCRIPTION}
             initialValue={issue.description_html ?? "<p></p>"}
-            disabled={!isEditable}
-            issueOperations={issueOperations}
+            onSubmit={async (value) => {
+              if (!issue.id || !issue.project_id) return;
+              await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
+                description_html: value,
+              });
+            }}
+            projectId={issue.project_id}
             setIsSubmitting={(value) => setIsSubmitting(value)}
-            containerClassName="-ml-3 border-none"
+            swrDescription={issue.description_html ?? "<p></p>"}
+            workspaceSlug={workspaceSlug}
           />
         )}