scribe: fix some lint warnings (#261)

- React Hook dependency warnings
- wrap `handleInputSubmit` in useCallback and define it before it is used
- also de-nest else-if
- also don't need both `?` and `| undefined`

Author: irahopkinson

packages/scribe/src/components/Editor.tsx

@@ -74,7 +74,7 @@ const Editor = forwardRef(function Editor(
   const editorRef = useRef<LexicalEditor>(null);
   const editedUsjRef = useRef<Usj>();
   const [usj, setUsj] = useState(usjInput);
-  const [loadedUsj, , setEditedUsj] = useDeferredState(usj);
+  const [loadedUsj] = useDeferredState(usj);
   useDefaultNodeOptions(nodeOptions);
   const autoNumbering = false;
   const initialConfig = {
@@ -116,7 +116,7 @@ const Editor = forwardRef(function Editor(
         if (isEdited || !deepEqual(usj, newUsj)) onChange?.(newUsj);
       }
     },
-    [onChange, setEditedUsj],
+    [onChange, usj],
   );
 
   return (

packages/scribe/src/plugins/FloatingBox/useCursorCoords.tsx

@@ -21,7 +21,7 @@ export default function useCursorCoords({
       updatePosition(domRange, floatingBoxRef.current);
       return cleanup;
     }
-  }, [isOpen, updatePosition, cleanup]);
+  }, [cleanup, isOpen, floatingBoxRef, updatePosition]);
 
   return { coords, placement };
 }

packages/scribe/src/plugins/NodesMenu/Menu/Option.tsx

@@ -23,7 +23,7 @@ export const MenuOption = forwardRef<HTMLButtonElement, OptionProps>(
         setSelectedIndex(-1);
         onClick?.(event);
       },
-      [index, setSelectedIndex, onClick],
+      [onClick, select, setSelectedIndex],
     );
 
     const handleMouseEnter = useCallback(

packages/scribe/src/plugins/NodesMenu/NodeSelectionMenu.tsx

@@ -54,19 +54,17 @@ export function NodeSelectionMenu({
           event.preventDefault();
           action();
           return true;
-        } else {
-          if (event.key.length === 1) {
-            event.stopPropagation();
-            event.preventDefault();
-            setQuery((prev) => prev + event.key);
-            return true;
-          }
+        } else if (event.key.length === 1) {
+          event.stopPropagation();
+          event.preventDefault();
+          setQuery((prev) => prev + event.key);
+          return true;
         }
         return false;
       },
       COMMAND_PRIORITY_HIGH,
     );
-  }, [editor, onClose, localQuery]);
+  }, [editor, isControlled, localQuery, onClose]);
 
   return (
     <Menu.Root

packages/scribe/src/plugins/NodesMenu/index.tsx

@@ -20,6 +20,34 @@ export default function NodesMenu({
   const [selectedOption, setSelectedOption] = useState<OptionItem | null>(null);
   const [isRequestingInput, setIsRequestingInput] = useState(false);
 
+  const handleInputSubmit = useCallback(() => {
+    if (selectedOption && userInputValue.trim()) {
+      try {
+        if (selectedOption.name === "c" || selectedOption.name === "v") {
+          const newVerseRChapterNum = parseInt(userInputValue);
+          if (isNaN(newVerseRChapterNum)) {
+            console.error("Invalid number input");
+            return;
+          }
+          selectedOption.action({ editor, newVerseRChapterNum });
+        } else if (selectedOption.name === "f" || selectedOption.name === "x") {
+          selectedOption.action({ editor, noteText: userInputValue });
+        } else {
+          selectedOption.action({ editor });
+        }
+
+        console.log("Submitted: ", selectedOption.name, userInputValue);
+      } catch (error) {
+        console.error("Error processing input:", error);
+      }
+
+      setIsRequestingInput(false);
+      setUserInputValue("");
+      setSelectedOption(null);
+      editor.focus();
+    }
+  }, [editor, selectedOption, userInputValue]);
+
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.key === "Escape" && (isOpen || isRequestingInput)) {
@@ -37,7 +65,7 @@ export default function NodesMenu({
         }
       }
     },
-    [editor, trigger, isOpen, isRequestingInput],
+    [editor, handleInputSubmit, isOpen, isRequestingInput, trigger],
   );
 
   useEffect(() => {
@@ -91,37 +119,9 @@ export default function NodesMenu({
         setIsOpen(false);
       }
     },
-    [editor],
+    [autoNumbering, editor],
   );
 
-  const handleInputSubmit = () => {
-    if (selectedOption && userInputValue.trim()) {
-      try {
-        if (selectedOption.name === "c" || selectedOption.name === "v") {
-          const newVerseRChapterNum = parseInt(userInputValue);
-          if (isNaN(newVerseRChapterNum)) {
-            console.error("Invalid number input");
-            return;
-          }
-          selectedOption.action({ editor, newVerseRChapterNum });
-        } else if (selectedOption.name === "f" || selectedOption.name === "x") {
-          selectedOption.action({ editor, noteText: userInputValue });
-        } else {
-          selectedOption.action({ editor });
-        }
-
-        console.log("Submitted: ", selectedOption.name, userInputValue);
-      } catch (error) {
-        console.error("Error processing input:", error);
-      }
-
-      setIsRequestingInput(false);
-      setUserInputValue("");
-      setSelectedOption(null);
-      editor.focus();
-    }
-  };
-
   return (
     <>
       {items && isOpen && (

packages/scribe/src/plugins/PerfNodesItems/useUsfmMarkersForMenu.ts

@@ -7,13 +7,11 @@ import getMarker from "shared/utils/usfm/getMarker";
 // getMarkerAction() returns a function to generate a LexicalNode and insert it in the editor, this lexical node is a custom node made for the PERF editor
 //NOTE: You can create your own typeahead plugin by creating your own getMarker() and getMarkerAction() functions adapted to your editor needs.
 export default function useUsfmMakersForMenu({
-  editor,
   scriptureReference,
   contextMarker,
   getMarkerAction,
   autoNumbering,
 }: {
-  editor: LexicalEditor;
   scriptureReference: ScriptureReference;
   contextMarker: string | undefined;
   getMarkerAction: GetMarkerAction;
@@ -38,8 +36,8 @@ export default function useUsfmMakersForMenu({
             noteText,
           }: {
             editor: LexicalEditor;
-            newVerseRChapterNum?: number | undefined;
-            noteText?: string | undefined;
+            newVerseRChapterNum?: number;
+            noteText?: string;
           }) => {
             action({
               editor,
@@ -52,7 +50,7 @@ export default function useUsfmMakersForMenu({
         };
       }),
     );
-  }, [editor, contextMarker, scriptureReference]);
+  }, [autoNumbering, contextMarker, getMarkerAction, scriptureReference]);
 
   return { markersMenuItems };
 }

packages/scribe/src/plugins/UsfmNodesMenuPlugin.tsx

@@ -1,4 +1,3 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { GetMarkerAction, ScriptureReference } from "shared/utils/get-marker-action.model";
 import useUsfmMakersForMenu from "./PerfNodesItems/useUsfmMarkersForMenu";
 import NodesMenu from "./NodesMenu";
@@ -16,9 +15,7 @@ export default function UsfmNodesMenuPlugin({
   getMarkerAction: GetMarkerAction;
   autoNumbering?: boolean;
 }) {
-  const [editor] = useLexicalComposerContext();
   const { markersMenuItems } = useUsfmMakersForMenu({
-    editor,
     scriptureReference,
     contextMarker,
     getMarkerAction,

packages/scribe/src/plugins/UsjNodesMenuPlugin.tsx

@@ -40,6 +40,7 @@ export default function UsjNodesMenuPlugin({
   autoNumbering: boolean;
 }) {
   const { book, chapterNum, verseNum, verse } = scrRef;
+  // This is intentionally missing the `scrRef` dependency to ensure property changes are updated.
   const scriptureReference = useMemo(() => scrRef, [book, chapterNum, verseNum, verse]);
 
   const [editor] = useLexicalComposerContext();

packages/shared-react/plugins/UsjNodesMenuPlugin.tsx

@@ -41,6 +41,7 @@ export default function UsjNodesMenuPlugin({
   getMarkerAction: GetMarkerAction;
 }) {
   const { book, chapterNum, verseNum, verse } = scrRef;
+  // This is intentionally missing the `scrRef` dependency to ensure property changes are updated.
   const scriptureReference = useMemo(() => scrRef, [book, chapterNum, verseNum, verse]);
 
   const [editor] = useLexicalComposerContext();