Merge pull request #1297 from Shelf-nu/fix-markdown-editor-state

fix: markdown editor state
Shelf-nu · Sep 3, 2024 · 9b2227b · 9b2227b
2 parents 1dc20e7 + f585349
commit 9b2227b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 24 deletions.
diff --git a/app/components/assets/custom-fields-inputs.tsx b/app/components/assets/custom-fields-inputs.tsx
@@ -176,14 +176,15 @@ export default function AssetCustomFields({
       const value = customFieldsValues?.find(
         (cfv) => cfv.customFieldId === field.id
       )?.value?.raw;
+
       const error = zo.errors[`cf-${field.id}`]()?.message;
 
       return (
         <>
           <MarkdownEditor
             name={`cf-${field.id}`}
             label={field.name}
-            defaultValue={typeof value === "string" ? value : ""}
+            defaultValue={value ? String(value) : ""}
             placeholder={field.helpText ?? field.name}
             disabled={disabled}
             maxLength={5000}

diff --git a/app/components/assets/notes/new.tsx b/app/components/assets/notes/new.tsx
@@ -1,15 +1,12 @@
 import type { ChangeEvent, FocusEvent } from "react";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { FetcherWithComponents } from "@remix-run/react";
 import { useParams } from "@remix-run/react";
 import { atom, useAtom } from "jotai";
 import { useZorm } from "react-zorm";
 import { z } from "zod";
 import Input from "~/components/forms/input";
-import {
-  MarkdownEditor,
-  clearMarkdownAtom,
-} from "~/components/markdown/markdown-editor";
+import { MarkdownEditor } from "~/components/markdown/markdown-editor";
 import { Button } from "~/components/shared/button";
 
 export const NewNoteSchema = z.object({
@@ -29,9 +26,16 @@ export const NewNote = ({
   const [isEditing, setIsEditing] = useAtom(isEditingAtom);
   const editorRef = useRef<HTMLTextAreaElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const [, clearMarkdown] = useAtom(clearMarkdownAtom);
   const isDone = fetcher.state === "idle" && fetcher.data != null;
 
+  /** Controls whether actions are disabled */
+  const [disabled, setDisabled] = useState<boolean>(false);
+
+  function handleSubmit() {
+    /** Disabled the input and buttons while form is submitting */
+    setDisabled(true);
+  }
+
   const handelBlur = (
     e: ChangeEvent<HTMLTextAreaElement> & FocusEvent<HTMLTextAreaElement>
   ) => {
@@ -65,23 +69,25 @@ export const NewNote = ({
     [fetcher]
   );
 
+  /** Focus the input when we are in edit mode */
   useEffect(() => {
     if (isEditing) {
       editorRef?.current?.focus();
     }
   }, [isEditing]);
 
+  /** When submitting is done, set isEditing to false to close the editor */
   useEffect(() => {
-    clearMarkdown();
-  }, [isDone, clearMarkdown]);
+    setIsEditing(false);
+  }, [isDone, setIsEditing]);
 
   return (
     <div ref={wrapperRef}>
       <fetcher.Form
         action={`/assets/${params.assetId}/note`}
         method="post"
         ref={zo.ref}
-        onSubmit={clearMarkdown}
+        onSubmit={handleSubmit}
       >
         {isEditing ? (
           <div className="relative flex flex-col pb-12 xl:pb-0">
@@ -90,10 +96,11 @@ export const NewNote = ({
                 variant="secondary"
                 size="sm"
                 onClick={() => setIsEditing(false)}
+                disabled={disabled}
               >
                 Cancel
               </Button>
-              <Button type="submit" size="sm" className="">
+              <Button type="submit" size="sm" className="" disabled={disabled}>
                 Create note
               </Button>
             </div>
@@ -107,6 +114,7 @@ export const NewNote = ({
               className="rounded-b-none"
               onBlur={handelBlur}
               onKeyDown={handleKeyDown}
+              disabled={disabled}
             />
           </div>
         ) : (

diff --git a/app/components/list/bulk-actions/bulk-list-item-checkbox.tsx b/app/components/list/bulk-actions/bulk-list-item-checkbox.tsx
@@ -29,7 +29,10 @@ export default function BulkListItemCheckbox({
   return (
     <Td className="md:pl-4 md:pr-3" onClick={handleBulkItemSelection}>
       <FakeCheckbox
-        className={tw("text-white", checked ? "text-primary" : "")}
+        className={tw(
+          "overflow-visible text-white",
+          checked ? "text-primary" : ""
+        )}
         checked={checked}
       />
     </Td>

diff --git a/app/components/markdown/markdown-editor.tsx b/app/components/markdown/markdown-editor.tsx
@@ -1,7 +1,6 @@
-import { useEffect, forwardRef } from "react";
+import { useEffect, forwardRef, useState } from "react";
 import type { TextareaHTMLAttributes, ChangeEvent } from "react";
 import { Link, useFetcher } from "@remix-run/react";
-import { atom, useAtom } from "jotai";
 import type { action } from "~/routes/api+/utils.parse-markdown";
 import { tw } from "~/utils/tw";
 import { MarkdownViewer } from "./markdown-viewer";
@@ -17,11 +16,6 @@ interface Props extends TextareaHTMLAttributes<any> {
   className?: string;
 }
 
-export const markdownAtom = atom("");
-export const clearMarkdownAtom = atom(null, (_get, set) =>
-  set(markdownAtom, "")
-);
-
 export const MarkdownEditor = forwardRef(function MarkdownEditor(
   {
     label,
@@ -37,7 +31,7 @@ export const MarkdownEditor = forwardRef(function MarkdownEditor(
 ) {
   const fetcher = useFetcher<typeof action>();
   const content = fetcher.data?.error ? "" : fetcher.data?.content;
-  const [markdown, setMarkdown] = useAtom(markdownAtom);
+  const [markdown, setMarkdown] = useState<string>("");
 
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     const content = e.currentTarget.value;
@@ -55,8 +49,7 @@ export const MarkdownEditor = forwardRef(function MarkdownEditor(
 
   useEffect(() => {
     setMarkdown(defaultValue);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [defaultValue]);
 
   return (
     <Tabs

diff --git a/package.json b/package.json
@@ -13,8 +13,8 @@
     "db:deploy-migration:staging": "dotenv -e .env.staging -- prisma migrate deploy && prisma generate",
     "db:deploy-migration:production": "dotenv -e .env.production -- prisma migrate deploy && prisma generate",
     "dev": "vite --host",
-    "production:dev": "dotenv -e .env.production -- run-p dev:*",
-    "staging:dev": "dotenv -e .env.staging -- run-p dev:*",
+    "production:dev": "dotenv -e .env.production -- vite --host",
+    "staging:dev": "dotenv -e .env.staging -- vite --host",
     "format": "prettier --write .",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "setup": "prisma generate && prisma migrate deploy",