removed shadow, added alert if not saved and ts errors

apps/app/components/issues/description-form.tsx

@@ -69,11 +69,13 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
 
   useEffect(() => {
     if (isSubmitting === "submitted") {
+      setShowAlert(false);
       setTimeout(async () => {
         setIsSubmitting("saved");
       }, 2000);
     }
-  }, [isSubmitting]);
+  }, [isSubmitting, setShowAlert]);
+
 
   // reset form values
   useEffect(() => {
@@ -112,9 +114,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
         {characterLimit && (
           <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 text-custom-text-200 p-0.5 text-xs">
             <span
-              className={`${
+              className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
-                watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
+                }`}
-              }`}
             >
               {watch("name").length}
             </span>
@@ -134,16 +135,18 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
               <Tiptap
                 value={
                   !value ||
-                  value === "" ||
+                    value === "" ||
-                  (typeof value === "object" && Object.keys(value).length === 0)
+                    (typeof value === "object" && Object.keys(value).length === 0)
                     ? watch("description_html")
                     : value
                 }
                 debouncedUpdatesEnabled={true}
+                setShouldShowAlert={setShowAlert}
                 setIsSubmitting={setIsSubmitting}
                 customClassName="min-h-[150px]"
                 editorContentCustomClassNames="pb-9"
                 onChange={(description: Object, description_html: string) => {
+                  setShowAlert(true);
                   setIsSubmitting("submitting");
                   onChange(description_html);
                   setValue("description", description);
@@ -156,9 +159,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
           }}
         />
         <div
-          className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${
+          className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${isSubmitting === "saved" ? "fadeOut" : "fadeIn"
-            isSubmitting === "saved" ? "fadeOut" : "fadeIn"
+            }`}
-          }`}
         >
           {isSubmitting === "submitting" ? "Saving..." : "Saved"}
         </div>

apps/app/components/tiptap/extensions/image-resize.tsx

@@ -12,7 +12,7 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => {
         src: imageInfo.src,
         width: Number(imageInfo.style.width.replace("px", "")),
         height: Number(imageInfo.style.height.replace("px", "")),
-      });
+      } as any);
       editor.commands.setNodeSelection(selection.from);
     }
   };
@@ -23,46 +23,30 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => {
         target={document.querySelector(".ProseMirror-selectednode") as any}
         container={null}
         origin={false}
-        /* Resize event edges */
         edge={false}
         throttleDrag={0}
-        /* When resize or scale, keeps a ratio of the width, height. */
         keepRatio={true}
-        /* resizable*/
-        /* Only one of resizable, scalable, warpable can be used. */
         resizable={true}
         throttleResize={0}
         onResize={({
           target,
           width,
           height,
-          // dist,
           delta,
-        }: // direction,
+        }:
-          // clientX,
-          // clientY,
           any) => {
           delta[0] && (target!.style.width = `${width}px`);
           delta[1] && (target!.style.height = `${height}px`);
         }}
-        // { target, isDrag, clientX, clientY }: any
         onResizeEnd={() => {
           updateMediaSize();
         }}
-        /* scalable */
-        /* Only one of resizable, scalable, warpable can be used. */
         scalable={true}
-        throttleScale={0}
-        /* Set the direction of resizable */
         renderDirections={["w", "e"]}
         onScale={({
           target,
-          // scale,
-          // dist,
-          // delta,
           transform,
-        }: // clientX,
+        }:
-          // clientY,
           any) => {
           target!.style.transform = transform;
         }}

apps/app/components/tiptap/index.tsx

@@ -19,6 +19,7 @@ export interface ITiptapRichTextEditor {
   editorContentCustomClassNames?: string;
   onChange?: (json: any, html: string) => void;
   setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+  setShouldShowAlert?: (showAlert: boolean) => void;
   editable?: boolean;
   forwardedRef?: any;
   debouncedUpdatesEnabled?: boolean;
@@ -31,6 +32,7 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
     forwardedRef,
     editable,
     setIsSubmitting,
+    setShouldShowAlert,
     editorContentCustomClassNames,
     value,
     noBorder,
@@ -46,6 +48,7 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
     onUpdate: async ({ editor }) => {
       // for instant feedback loop
       setIsSubmitting?.("submitting");
+      setShouldShowAlert?.(true);
       checkForNodeDeletions(editor);
       if (debouncedUpdatesEnabled) {
         debouncedUpdates({ onChange, editor });
@@ -113,7 +116,7 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
     }, 500);
   }, 1000);
 
-  const editorClassNames = `relative w-full max-w-screen-lg sm:rounded-lg sm:shadow-lg mt-2 p-3 relative focus:outline-none rounded-md
+  const editorClassNames = `relative w-full max-w-screen-lg sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
       ${noBorder ? "" : "border border-custom-border-200"} ${borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
     } ${customClassName}`;